/* ============================================================================
 *  Compass — Trail Life Troop WA-0337
 *  "Outdoorsman" theme stylesheet. Dark, journal-like, classic field-guide feel.
 *
 *  Loaded by _theme.html. Tailwind handles layout/spacing/typography utility;
 *  this file owns: design tokens, topo background, card chrome, status badges,
 *  icon sizing, and a few components that benefit from hand-tuned CSS.
 *
 *  Palette intentionally echoes Trail Life USA's brand guide (Trail Gold
 *  #f49322 / Leaf Green #728e38 / Mountain Green #34441c / Field Brown #3e2e18)
 *  but leans darker for an "at-the-trailhead, dusk-lamp, leather-journal" mood.
 * ========================================================================== */

:root {
  /* ── Brand palette ─────────────────────────────────────────────────── */
  --c-gold:        #f49322;       /* Trail Gold — primary action, headings */
  --c-gold-soft:   #fde7c9;       /* Gold-100, hover backgrounds */
  --c-gold-deep:   #d67a14;       /* Gold-600, pressed/active */
  --c-leaf:        #728e38;       /* Leaf Green — secondary, positive */
  --c-mountain:    #34441c;       /* Mountain Green — deep brand */
  --c-moss:        #4c6b2f;       /* mid-green, accents */
  --c-field:       #3e2e18;       /* Field Brown — text on light, dividers */
  --c-amber-light: #e9b672;       /* trail-marker cream */

  /* ── Surface palette ───────────────────────────────────────────────── */
  --c-bg:           #0a0f07;      /* page bg, deep forest-night */
  --c-bg-tint:      #0d1309;      /* slightly lighter for sections */
  --c-panel:        #131a0e;      /* cards/panels */
  --c-panel-hi:     #182012;      /* hover/elevated panels */
  --c-panel-edge:   #243019;      /* borders */
  --c-panel-edge2:  #2c3a1f;      /* hover borders */
  --c-rule:         #1f2a16;      /* hairline dividers */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --c-ink:          #ece8dc;      /* warm parchment white */
  --c-ink-soft:     #cdc6b3;      /* secondary text */
  --c-ink-mute:     #9a9382;      /* muted text — AA on bg */
  --c-ink-faint:    #847d6b;      /* very muted, captions — AA large on bg */

  /* ── Semantic ──────────────────────────────────────────────────────── */
  --c-urgent:       #c84a3a;      /* trail blaze red */
  --c-urgent-light: #f1a89e;      /* urgent on dark */
  --c-urgent-bg:    #3a1410;
  --c-soon:         #d6892a;      /* amber trail tape */
  --c-soon-light:   #f3c285;
  --c-soon-bg:      #3a2710;
  --c-planned:      #4a7c34;      /* forest planned */
  --c-planned-light:#bcd9a3;
  --c-planned-bg:   #14240d;
  --c-leaf-light:   #b7d18a;
  --c-gold-light:   #fbdbae;
  --c-blue:         #608cc8;
  --c-blue-light:   #aac6ec;
  --c-purple-light: #d2bdec;
  --c-mountain-light:#cdd9b0;

  /* ── Type scale (serif for display, sans for body) ─────────────────── */
  --font-display: "Spectral", "Source Serif Pro", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ── Layout ────────────────────────────────────────────────────────── */
  --radius:        10px;
  --radius-lg:     16px;
  --shadow-1:      0 1px 0 rgba(244,147,34,0.04), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-2:      0 1px 0 rgba(244,147,34,0.06), 0 8px 28px rgba(0,0,0,0.55);

  /* ── Topo-line pattern (subtle field-guide background) ──────────────── */
  --topo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'><g fill='none' stroke='%23728e38' stroke-width='0.6' stroke-opacity='0.07'><path d='M0 60 Q60 30 120 60 T240 60 T360 60 T480 60'/><path d='M0 110 Q60 80 120 110 T240 110 T360 110 T480 110'/><path d='M0 160 Q60 130 120 160 T240 160 T360 160 T480 160'/><path d='M0 210 Q60 180 120 210 T240 210 T360 210 T480 210'/><path d='M0 260 Q60 230 120 260 T240 260 T360 260 T480 260'/><path d='M0 310 Q60 280 120 310 T240 310 T360 310 T480 310'/><path d='M0 360 Q60 330 120 360 T240 360 T360 360 T480 360'/><path d='M0 410 Q60 380 120 410 T240 410 T360 410 T480 410'/></g><g fill='none' stroke='%23728e38' stroke-width='0.4' stroke-opacity='0.05'><circle cx='80' cy='180' r='40'/><circle cx='80' cy='180' r='60'/><circle cx='80' cy='180' r='80'/><circle cx='320' cy='300' r='50'/><circle cx='320' cy='300' r='80'/></g></svg>");
}

/* ─────────────────────────────────────────────────────────────────────────
 *  Base
 * ──────────────────────────────────────────────────────────────────────── */
html, body {
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Subtle topo-line wash on the page background, like a paper field map
   laid flat on a desk. Pointer-events: none so it never catches clicks. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--topo);
  background-size: 420px 420px;
  background-repeat: repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
/* A faint vignette to deepen the corners — a "lamplight at the tent" feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ── Typography ────────────────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); letter-spacing: -0.005em; }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
h1 { font-weight: 600; }
h2, h3, h4 { font-weight: 600; color: var(--c-ink); }

/* In-page heading underline that reads like a trail-blaze stripe */
.heading-rule {
  position: relative;
  padding-bottom: 0.55rem;
  margin-bottom: 1rem;
}
.heading-rule::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 2px;
  background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold) 60%, transparent 100%);
}

/* ── Selection ─────────────────────────────────────────────────────────── */
::selection { background: rgba(244,147,34,0.35); color: var(--c-ink); }

/* ── Focus rings (keyboard nav) ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: 2px;
}
button:focus-visible,
.btn:focus-visible,
a:focus-visible {
  outline-offset: 3px;
}

/* Scrollbars — slim, on-brand */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb {
  background: var(--c-panel-edge);
  border-radius: 8px;
  border: 2px solid var(--c-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-panel-edge2); }

/* ─────────────────────────────────────────────────────────────────────────
 *  Cards / panels — leather-journal feel
 * ──────────────────────────────────────────────────────────────────────── */
.panel {
  background: linear-gradient(180deg, var(--c-panel) 0%, #10160a 100%);
  border: 1px solid var(--c-panel-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  position: relative;
}
/* Optional stitched border for "important field journal page" */
.panel.stitched {
  border-style: dashed;
  border-color: var(--c-panel-edge2);
}
.panel-lift {
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.panel-lift:hover {
  border-color: var(--c-panel-edge2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

/* ── Status / merit badges — trail-marker paint stripes, not rounded chips */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: var(--font-body);
}
.badge-gold    { background: rgba(244,147,34,0.14); color: var(--c-gold); border-color: rgba(244,147,34,0.4); }
.badge-leaf    { background: rgba(114,142,56,0.16); color: #b7d18a; border-color: rgba(114,142,56,0.45); }
.badge-mountain{ background: rgba(52,68,28,0.45); color: #cdd9b0; border-color: rgba(52,68,28,0.7); }
.badge-brown   { background: rgba(62,46,24,0.45); color: var(--c-amber-light); border-color: rgba(62,46,24,0.7); }
.badge-urgent  { background: rgba(200,74,58,0.16); color: #f1a89e; border-color: rgba(200,74,58,0.5); }
.badge-soon    { background: rgba(214,137,42,0.16); color: #f0c386; border-color: rgba(214,137,42,0.5); }
.badge-planned { background: rgba(74,124,52,0.16); color: #bcd9a3; border-color: rgba(74,124,52,0.5); }
.badge-ghost   { background: rgba(255,255,255,0.04); color: var(--c-ink-mute); border-color: var(--c-panel-edge); }
.badge-blue    { background: rgba(96,140,200,0.14); color: var(--c-blue-light); border-color: rgba(96,140,200,0.4); }
.badge-purple  { background: rgba(155,120,200,0.14); color: var(--c-purple-light); border-color: rgba(155,120,200,0.4); }

/* Status pill — bigger, more prominent merit-badge style with rank-letter.
   Used in question cards and anywhere a status deserves more visual weight. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem 0.32rem 0.42rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  font-family: var(--font-body);
  white-space: nowrap;
}
.status-pill .rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}
.status-pill.status-open         { background: rgba(200,74,58,0.18); color: var(--c-urgent-light); border-color: rgba(200,74,58,0.45); }
.status-pill.status-open .rank   { background: var(--c-urgent); color: #fff; }
.status-pill.status-assigned     { background: rgba(214,137,42,0.18); color: var(--c-soon-light); border-color: rgba(214,137,42,0.45); }
.status-pill.status-assigned .rank { background: var(--c-soon); color: #1d1408; }
.status-pill.status-in_progress  { background: rgba(96,140,200,0.18); color: var(--c-blue-light); border-color: rgba(96,140,200,0.4); }
.status-pill.status-in_progress .rank { background: var(--c-blue); color: #fff; }
.status-pill.status-answered     { background: rgba(74,124,52,0.18); color: var(--c-leaf-light); border-color: rgba(74,124,52,0.45); }
.status-pill.status-answered .rank { background: var(--c-leaf); color: #0d1604; }
.status-pill.status-closed       { background: rgba(255,255,255,0.04); color: var(--c-ink-mute); border-color: var(--c-panel-edge); }
.status-pill.status-closed .rank { background: var(--c-panel-edge2); color: var(--c-ink-soft); }

/* Trail-blaze stripe — diagonal paint stripe like a trail marker painted on a tree.
   Used inline as a section accent and inside `.section-head::before`. */
.blaze-stripe {
  display: inline-block;
  width: 28px; height: 8px;
  background:
    repeating-linear-gradient(135deg,
      var(--c-gold) 0 7px,
      #1a1208 7px 11px);
  border-radius: 2px;
  vertical-align: middle;
  box-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.blaze-stripe.blaze {
  width: 40px;
  height: 10px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.85rem;
  font-family: var(--font-body);
  line-height: 1;
  border: 1px solid transparent;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
  cursor: pointer;
  user-select: none;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-gold    { background: var(--c-gold); color: #1d1408; border-color: var(--c-gold-deep); }
.btn-gold:hover    { background: var(--c-gold-deep); color: #fff; }
.btn-leaf    { background: var(--c-leaf); color: #0d1604; border-color: #5b7530; }
.btn-leaf:hover    { background: #5e7a32; color: #fff; }
.btn-ghost   { background: transparent; color: var(--c-ink-soft); border-color: var(--c-panel-edge2); }
.btn-ghost:hover   { background: var(--c-panel-hi); color: var(--c-ink); }
.btn-danger  { background: transparent; color: #f1a89e; border-color: rgba(200,74,58,0.5); }
.btn-danger:hover  { background: rgba(200,74,58,0.18); color: #fff; }
.btn-xs { padding: 0.3rem 0.6rem; font-size: 0.72rem; }

/* ── Motion Needed slider switch ──────────────────────────────────────── */
.motion-switch {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.motion-switch-track {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 1.1rem;
  border-radius: 999px;
  background: var(--c-panel-edge2, #3a3f47);
  border: 1px solid var(--c-panel-edge, #3a3f47);
  transition: background-color 160ms ease, border-color 160ms ease;
  flex-shrink: 0;
}
.motion-switch-track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: #d6d3c8;
  transition: transform 160ms ease, background-color 160ms ease;
}
.motion-switch:checked + .motion-switch-track {
  background: var(--c-gold, #f49322);
  border-color: var(--c-gold-deep, #b86812);
}
.motion-switch:checked + .motion-switch-track::before {
  transform: translateX(0.9rem);
  background: #1d1408;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.input, select.input, textarea.input {
  background: #0c1208;
  border: 1px solid var(--c-panel-edge);
  color: var(--c-ink);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  font-family: var(--font-body);
  transition: border-color 140ms ease, box-shadow 140ms ease;
  width: 100%;
}
.input:focus, select.input:focus, textarea.input:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(244,147,34,0.15);
}
.input::placeholder { color: var(--c-ink-faint); }

label.label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-bottom: 0.3rem;
}

/* ── Tables — event list, agenda items, etc. ──────────────────────────── */
.table-clean {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}
.table-clean th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--c-rule);
}
.table-clean td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--c-rule);
  vertical-align: top;
}
.table-clean tr:last-child td { border-bottom: none; }
.table-clean tr:hover td { background: rgba(244,147,34,0.04); }

/* ─────────────────────────────────────────────────────────────────────────
 *  Top app bar
 * ──────────────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  background: linear-gradient(180deg, rgba(10,15,7,0.95) 0%, rgba(10,15,7,0.7) 100%);
  border-bottom: 1px solid var(--c-panel-edge);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.65rem 1.25rem;
  max-width: 1280px;
  margin: 0 auto;
}
.topbar-brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--c-ink); }
.topbar-brand:hover { color: var(--c-gold); }
.topbar-brand .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.1; }
.topbar-brand .brand-sub  { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-mute); }
.topbar-brand .brand-blaze {
  display: inline-block;
  width: 4px;
  height: 32px;
  margin-left: 0.5rem;
  background:
    repeating-linear-gradient(180deg,
      var(--c-gold) 0 5px,
      transparent 5px 9px);
  border-radius: 1px;
  align-self: center;
}

.topbar-nav { display: flex; gap: 0.15rem; margin-left: auto; margin-right: auto; }
.topbar-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.topbar-nav a:hover { background: var(--c-panel-hi); color: var(--c-ink); }
.topbar-nav a.active { background: rgba(244,147,34,0.12); color: var(--c-gold); }

.topbar-user { display: flex; align-items: center; gap: 0.6rem; }

/* ─────────────────────────────────────────────────────────────────────────
 *  Stat cards (dashboard tiles)
 * ──────────────────────────────────────────────────────────────────────── */
.stat {
  background: linear-gradient(180deg, var(--c-panel) 0%, #0e140a 100%);
  border: 1px solid var(--c-panel-edge);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: "";
  position: absolute;
  right: -20px; top: -20px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(244,147,34,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.stat-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-mute); }
.stat-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--c-ink); line-height: 1.05; }
.stat-foot  { font-size: 0.72rem; color: var(--c-ink-mute); }

/* Tier-colored stat tiles — accent rail + glow */
.stat-tier-red    { border-left: 3px solid var(--c-urgent); }
.stat-tier-red::after    { background: radial-gradient(circle, rgba(200,74,58,0.18) 0%, transparent 70%); }
.stat-tier-red .stat-value { color: var(--c-urgent-light); }
.stat-tier-yellow { border-left: 3px solid var(--c-soon); }
.stat-tier-yellow::after { background: radial-gradient(circle, rgba(214,137,42,0.18) 0%, transparent 70%); }
.stat-tier-yellow .stat-value { color: var(--c-soon-light); }
.stat-tier-green  { border-left: 3px solid var(--c-planned); }
.stat-tier-green::after  { background: radial-gradient(circle, rgba(74,124,52,0.18) 0%, transparent 70%); }
.stat-tier-green .stat-value { color: var(--c-planned-light); }
.stat-tier-review { border-left: 3px solid var(--c-blue); }
.stat-tier-review::after { background: radial-gradient(circle, rgba(96,140,200,0.18) 0%, transparent 70%); }
.stat-tier-review .stat-value { color: var(--c-blue-light); }

/* ── Signpost — compact in-page jump nav (just under the hero) ───────── */
.signpost {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 1.75rem;
  padding: 0.35rem;
  background: rgba(20,28,12,0.4);
  border: 1px solid var(--c-panel-edge);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.signpost-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease;
}
.signpost-link:hover {
  background: rgba(244,147,34,0.12);
  color: var(--c-gold);
}

/* ── Breadcrumb trail — compact path-back nav at the top of nested pages */
.breadcrumb-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 1rem;
  padding: 0.5rem 0.85rem;
  background: rgba(20,28,12,0.35);
  border: 1px solid var(--c-panel-edge);
  border-radius: 999px;
  font-size: 0.78rem;
  width: fit-content;
  max-width: 100%;
}
.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.breadcrumb-link:hover {
  background: rgba(244,147,34,0.12);
  color: var(--c-gold);
}
.breadcrumb-link.breadcrumb-home {
  color: var(--c-ink-mute);
}
.breadcrumb-current {
  display: inline-block;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  color: var(--c-ink);
  font-weight: 600;
  background: rgba(244,147,34,0.1);
  border: 1px solid rgba(244,147,34,0.3);
}
.breadcrumb-sep {
  color: var(--c-ink-faint);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  user-select: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 *  Event cards — fuller visual hierarchy: countdown bar + hover arrow
 * ──────────────────────────────────────────────────────────────────────── */
.event-card {
  background: linear-gradient(180deg, var(--c-panel) 0%, #0e140a 100%);
  border: 1px solid var(--c-panel-edge);
  border-radius: var(--radius);
  padding: 0.85rem 1rem 0.95rem;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  cursor: pointer;
  position: relative;
}
.event-card::after {
  content: "";
  position: absolute;
  right: 1rem; top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f49322' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12 L19 12'/><path d='M13 6 L19 12 L13 18'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.event-card:hover::after { opacity: 1; transform: translateX(0); }
.event-card:hover { border-color: var(--c-gold-deep); transform: translateY(-1px); box-shadow: var(--shadow-2); }
/* Left "urgency rail" — a thin paint stripe of the tier */
.event-card { border-left-width: 3px; }
.event-card.tier-red     { border-left-color: var(--c-urgent); }
.event-card.tier-yellow  { border-left-color: var(--c-soon); }
.event-card.tier-green   { border-left-color: var(--c-planned); }
.event-card.tier-cancel  { border-left-color: var(--c-ink-faint); opacity: 0.7; }

.event-card .event-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--c-ink); }
.event-card .event-when  { font-size: 0.85rem; color: var(--c-ink-soft); }
.event-card .event-meta  { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-top: 0.4rem; }

/* ── Countdown chip — small badge with "Nd" ───────────────────────────── */
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.countdown-red    { background: rgba(200,74,58,0.22); color: #f3aea5; border: 1px solid rgba(200,74,58,0.5); }
.countdown-yellow { background: rgba(214,137,42,0.22); color: #f3c285; border: 1px solid rgba(214,137,42,0.5); }
.countdown-green  { background: rgba(74,124,52,0.22); color: #b8dca0; border: 1px solid rgba(74,124,52,0.5); }
.countdown-ghost  { background: rgba(255,255,255,0.05); color: var(--c-ink-mute); border: 1px solid var(--c-panel-edge); }

/* ── Countdown progress bar — fills across the bottom of event cards ────── */
.countdown-bar {
  position: relative;
  height: 3px;
  margin-top: 0.55rem;
  border-radius: 2px;
  background: rgba(0,0,0,0.35);
  overflow: hidden;
}
.countdown-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 240ms ease;
}
.countdown-fill.tier-red    { background: linear-gradient(90deg, var(--c-soon) 0%, var(--c-urgent) 100%); }
.countdown-fill.tier-yellow { background: var(--c-soon); }
.countdown-fill.tier-green  { background: var(--c-planned); }
.countdown-fill.tier-cancel { background: var(--c-ink-faint); }

/* ─────────────────────────────────────────────────────────────────────────
 *  Icons — sizing + currentColor inheritance
 * ──────────────────────────────────────────────────────────────────────── */
.icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; }
.icon    { width: 18px; height: 18px; }
.icon-md { width: 22px; height: 22px; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 40px; height: 40px; }

/* ── Hero / empty states ───────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--c-panel-edge2);
  border-radius: var(--radius);
  color: var(--c-ink-mute);
  background:
    linear-gradient(180deg, rgba(20,28,12,0.35) 0%, rgba(20,28,12,0.05) 100%);
  position: relative;
}
.empty-state::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    transparent 0 14px,
    rgba(244,147,34,0.4) 14px 18px);
}
.empty-state .empty-icon { color: var(--c-gold); opacity: 0.75; margin-bottom: 0.75rem; }

/* Empty-state illustration — full-width hand-drawn SVG */
.empty-state-illust { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.empty-illust {
  display: block;
  margin: 0 auto 0.5rem;
  width: 220px;
  height: 140px;
  max-width: 100%;
  filter: drop-shadow(0 4px 18px rgba(244,147,34,0.06));
}
@media (max-width: 480px) {
  .empty-illust { width: 180px; height: 115px; }
}

/* ── Section headings with trail blaze ────────────────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.5rem 0 0.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(244,147,34,0.06) 0%, transparent 80%);
  border-left: 3px solid var(--c-gold);
}
.section-head .label {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.section-head .blaze { flex-shrink: 0; }
.section-head .count {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--c-ink-mute);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--c-panel-edge);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.app-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-rule);
  text-align: center;
  font-size: 0.78rem;
  color: var(--c-ink-mute);
}
.app-footer a { color: var(--c-ink-soft); text-decoration: none; border-bottom: 1px dotted var(--c-panel-edge2); }
.app-footer a:hover { color: var(--c-gold); border-color: var(--c-gold-deep); }

/* Footer: scout creed mark on top, charter line in the middle */
.app-footer .footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--c-gold);
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.app-footer .footer-meta { color: var(--c-ink-mute); }
.app-footer .footer-label {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  color: var(--c-ink-faint);
}

/* ── Page wrapper ──────────────────────────────────────────────────────── */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}
.page-narrow { max-width: 720px; }

/* ── Utility: dot leader (separator "·" with on-brand spacing) ────────── */
.dot-sep { color: var(--c-ink-faint); margin: 0 0.4rem; }

/* ── Keyboard hint — the ⌘K / Ctrl-K chip inside the search box ──────── */
.kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--c-ink-mute);
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--c-panel-edge);
  border-radius: 4px;
  user-select: none;
  white-space: nowrap;
}

/* ── Command palette — ⌘K / Ctrl-K modal overlay ────────────────────── */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6rem 1rem 1rem;
}
.cmd-palette[hidden] { display: none; }
.cmd-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cmd-palette-panel {
  position: relative;
  width: 100%;
  max-width: 580px;
  background: linear-gradient(180deg, var(--c-panel) 0%, #0e140a 100%);
  border: 1px solid var(--c-panel-edge2);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(244,147,34,0.06);
  overflow: hidden;
  animation: cmdEnter 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cmdEnter {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cmd-palette-input-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--c-rule);
}
.cmd-palette-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.25rem 0;
}
.cmd-palette-input::placeholder { color: var(--c-ink-faint); }
.cmd-palette-results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 0.5rem;
}
.cmd-palette-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--c-ink-soft);
  text-align: left;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 100ms ease;
}
.cmd-palette-item:hover,
.cmd-palette-item.cmd-palette-selected {
  background: rgba(244,147,34,0.1);
  color: var(--c-ink);
}
.cmd-palette-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem; height: 1.85rem;
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
  color: var(--c-gold);
  flex-shrink: 0;
}
.cmd-palette-label { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cmd-palette-label strong {
  color: var(--c-ink);
  font-weight: 600;
  font-size: 0.88rem;
}
.cmd-palette-sub {
  font-size: 0.72rem;
  color: var(--c-ink-mute);
  margin-top: 0.05rem;
}
.cmd-palette-foot {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.6rem 1.1rem;
  border-top: 1px solid var(--c-rule);
  font-size: 0.72rem;
  color: var(--c-ink-mute);
}
.cmd-palette-foot .kbd-hint { font-size: 0.65rem; }

/* ─────────────────────────────────────────────────────────────────────────
 *  Responsive tweaks
 * ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; padding: 0.6rem 0.9rem; gap: 0.75rem; }
  .topbar-nav { order: 3; width: 100%; overflow-x: auto; margin: 0; padding-bottom: 0.25rem; }
  .topbar-nav a { white-space: nowrap; }
  .topbar-user { margin-left: auto; }
  .page { padding: 1rem 0.9rem 3rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
 *  Reduced motion
 * ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Page enter — fast fade-up, respects reduced-motion via the rule above */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page > * { animation: pageEnter 280ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.page > *:nth-child(2) { animation-delay: 40ms; }
.page > *:nth-child(3) { animation-delay: 80ms; }
.page > *:nth-child(4) { animation-delay: 120ms; }
.page > *:nth-child(5) { animation-delay: 160ms; }

/* Dashboard widget cards — gentle stagger */
.panel-card-grid > * { animation: pageEnter 280ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.panel-card-grid > *:nth-child(1) { animation-delay: 80ms; }
.panel-card-grid > *:nth-child(2) { animation-delay: 140ms; }
.panel-card-grid > *:nth-child(3) { animation-delay: 200ms; }
.panel-card-grid > *:nth-child(4) { animation-delay: 260ms; }

/* ─────────────────────────────────────────────────────────────────────────
 *  Print — clean white agenda for PDF / paper
 * ──────────────────────────────────────────────────────────────────────── */
@media print {
  /* Reset everything to white background, dark text */
  * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  html, body {
    background: white !important;
    color: #111 !important;
    font-size: 11pt;
    line-height: 1.45;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body::before, body::after { display: none !important; }
  body > * { position: static !important; animation: none !important; }

  /* Hide all screen chrome */
  .topbar, .app-footer, .cmd-palette, .no-print,
  nav, form, button, .btn, .badge, .countdown-bar,
  .signpost, .breadcrumb-trail, .event-card::after,
  .section-head .blaze, .section-head .count,
  .empty-state::before, .sync-now,
  .kbd-hint, .role-chip-committee, .role-chip-member,
  .heading-rule::after, .blaze-stripe,
  dialog, #event-plan-dialog,
  .topo-pattern, .page > * { animation: none !important; }
  .topbar, .app-footer, .cmd-palette { display: none !important; }

  /* Hide interactive elements */
  input, select, textarea, details, summary,
  .btn, button, form, .no-print, .badge,
  .sync-now, [onclick], .cmd-palette,
  .event-card .countdown, .event-card:hover::before,
  .event-card:hover::after { display: none !important; }

  /* Page wrapper: remove max-width constraint, full-width print */
  .page { max-width: 100% !important; padding: 0.5in 0.75in !important; margin: 0 !important; }

  /* Hide ALL screen content — print only the .print-agenda block */
  main > *:not(.print-agenda) { display: none !important; }
  .print-agenda { display: block !important; }
  /* If no print-agenda on the page, show screen content as plain text */
  body:not(:has(.print-agenda)) main > * { display: revert !important; }

  /* Force all card/panel elements to text-only (no dark bg, no borders,
     no rounded corners, no padding — clean printed handout look).
     Only applies when there is no .print-agenda block (fallback pages). */
  .event-card, .panel, .panel-lift {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 6pt 0 !important;
    box-shadow: none !important;
  }
  /* Strip all background/border color classes — plain black text */
  [class*="bg-red"], [class*="bg-green"], [class*="bg-amber"],
  [class*="bg-yellow"], [class*="bg-purple"], [class*="bg-blue"],
  [class*="bg-cyan"], [class*="bg-orange"],
  [class*="bg-gray"], [style*="background"] {
    background: transparent !important;
    color: #000 !important;
  }
  /* All colored text → black */
  [class*="text-"] { color: #000 !important; }
  /* Section headings: plain text, compact */
  .section-head { border: none !important; background: transparent !important; padding: 0 !important; margin: 8pt 0 3pt 0 !important; }
  .section-head .label { font-weight: 700; color: #000 !important; font-size: 10pt; }
  .section-head .count { color: #555 !important; font-size: 8pt; }
  /* Month group headers */
  h3[style*="color:var(--c-ink-mute)"] { color: #444 !important; font-size: 9pt; margin: 6pt 0 2pt 0 !important; }
  /* Strip the 4-week exception / urgency coloring */
  .bg-red-600, .bg-red-900, .bg-amber-500, .bg-green-700 { background: transparent !important; color: #000 !important; }

  /* ── .print-agenda formatting (the ONLY visible content in print) ── */
  .print-agenda { font-size: 10pt; line-height: 1.35; color: #000; }
  .print-agenda * { color: #000 !important; background: transparent !important; }

  /* Logo + header block */
  .print-agenda .print-header { text-align: center; margin-bottom: 0.12in; border-bottom: 1px solid #000; padding-bottom: 0.08in; }
  .print-agenda .print-header .print-logo { width: 32px; height: 32px; margin: 0 auto 0.05in; display: block; }
  .print-agenda .print-header h1 { font-family: 'Georgia', 'Times New Roman', serif; font-size: 14pt; font-weight: 700; color: #000 !important; margin: 0 0 2pt; letter-spacing: -0.01em; }
  .print-agenda .print-header .print-meta { font-size: 8pt; color: #222 !important; }
  .print-agenda .print-header .print-meta span { display: inline-block; margin: 0 6pt; }
  .print-agenda .print-header .print-meta .print-label { font-weight: 600; color: #000 !important; }

  /* Attendees section */
  .print-agenda .print-attendees { margin: 4pt 0 8pt; padding: 4pt 0; border-bottom: 1px solid #ccc; }
  .print-agenda .print-attendees h2 { font-family: 'Georgia', 'Times New Roman', serif; font-size: 10pt; font-weight: 700; color: #000 !important; margin: 0 0 3pt; }
  .print-agenda .print-attendees .attendee-row { display: flex; flex-wrap: wrap; gap: 2pt 8pt; font-size: 8pt; color: #000 !important; }
  .print-agenda .print-attendees .attendee-row span { padding: 0; }

  /* Agenda items */
  .print-agenda .print-items { margin-top: 0.08in; }
  .print-agenda .print-items h2 { font-family: 'Georgia', 'Times New Roman', serif; font-size: 10pt; font-weight: 700; color: #000 !important; margin: 0 0 4pt; border-bottom: 1px solid #ccc; padding-bottom: 2pt; }
  .print-agenda .print-item { margin-bottom: 5pt; page-break-inside: avoid; }
  .print-agenda .print-item .print-item-title { font-size: 9pt; font-weight: 600; color: #000 !important; }
  .print-agenda .print-item .print-item-desc { font-size: 8pt; color: #333 !important; margin-top: 1pt; }
  .print-agenda .print-item .print-item-meta { font-size: 8pt; color: #444 !important; margin-top: 0; }
  .print-agenda .print-item .print-item-tasks { margin-top: 1pt; padding-left: 10pt; font-size: 8pt; color: #333 !important; }
  .print-agenda .print-item .print-item-tasks li { margin-bottom: 0; }

  /* Footer */
  .print-agenda .print-footer { margin-top: 0.15in; padding-top: 4pt; border-top: 1px solid #ccc; font-size: 7pt; color: #666 !important; text-align: center; }

  /* Events section (compact listing for the next-meeting page) */
  .print-agenda .print-events { margin-top: 0.1in; page-break-before: auto; }
  .print-agenda .print-events h2 { font-family: 'Georgia', 'Times New Roman', serif; font-size: 10pt; font-weight: 700; color: #000 !important; margin: 0 0 3pt; border-bottom: 1px solid #ccc; padding-bottom: 2pt; }
  .print-agenda .print-events .print-event { font-size: 8pt; color: #222 !important; margin-bottom: 2pt; page-break-inside: avoid; }

  /* Links: no underline, keep dark */
  a { color: #000 !important; text-decoration: none !important; }

  /* Status badges collapse to plain text */
  .badge, .status-pill { border: none !important; padding: 0 !important; font-size: inherit !important; color: inherit !important; background: none !important; }

  /* Avoid orphaned headings */
  h1, h2, h3, h4 { page-break-after: avoid; }
  .print-item, .event-card, .panel { page-break-inside: avoid; }
}

/* ─────────────────────────────────────────────────────────────────────────
 *  Hero — atmospheric dashboard signature
 * ──────────────────────────────────────────────────────────────────────── */
.hero-rose {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 0 1.5rem;
}
.hero-rose .rose-art {
  flex-shrink: 0;
  width: 120px; height: 120px;
  color: var(--c-gold);
  opacity: 0.85;
}
.hero-rose .rose-art svg { width: 100%; height: 100%; }
.hero-rose h1 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1.1;
  margin: 0;
}
.hero-rose p { margin: 0.4rem 0 0; color: var(--c-ink-soft); max-width: 36rem; }

@media (max-width: 640px) {
  .hero-rose { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .hero-rose .rose-art { width: 80px; height: 80px; }
  .hero-rose h1 { font-size: 1.8rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
 *  Topbar — active route highlight tuned, plus mobile-friendly scroll
 * ──────────────────────────────────────────────────────────────────────── */
.panel-card-grid .panel {
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.panel-card-grid .panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  opacity: 0;
  transition: opacity 200ms ease;
}
.panel-card-grid .panel:hover {
  transform: translateY(-2px);
  border-color: var(--c-gold-deep);
  box-shadow: var(--shadow-2);
}
.panel-card-grid .panel:hover::before { opacity: 0.7; }
.panel-card-grid .panel:hover .icon-tile { transform: scale(1.05); }
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: transform 200ms ease;
}
.icon-tile.icon-tile-md { width: 2.5rem; height: 2.5rem; }
.topbar-nav a.active {
  background: rgba(244,147,34,0.16);
  color: var(--c-gold);
  box-shadow: inset 0 -2px 0 var(--c-gold);
}

/* ─────────────────────────────────────────────────────────────────────────
 *  Event-card tier bar — fuller visual hierarchy on hover
 * ──────────────────────────────────────────────────────────────────────── */
.event-card:hover::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 4px;
  background: currentColor;
  opacity: 0.6;
  border-radius: 4px 0 0 4px;
}
.event-card.tier-red:hover::before    { color: var(--c-urgent); }
.event-card.tier-yellow:hover::before { color: var(--c-soon); }
.event-card.tier-green:hover::before  { color: var(--c-planned); }

/* ─────────────────────────────────────────────────────────────────────────
 *  Trail marker — small "you are here" pinpoint for active meeting
 * ──────────────────────────────────────────────────────────────────────── */
.trail-marker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.trail-marker::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 4px rgba(244,147,34,0.25);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(244,147,34,0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(244,147,34,0.05); }
}

/* ─────────────────────────────────────────────────────────────────────────
 *  Question card status stripe — bolder left border by status
 * ──────────────────────────────────────────────────────────────────────── */
.question-card {
  border-left-width: 4px !important;
}
.question-card.status-open         { border-left-color: var(--c-urgent) !important; }
.question-card.status-assigned     { border-left-color: var(--c-soon) !important; }
.question-card.status-in_progress  { border-left-color: var(--c-blue) !important; }
.question-card.status-answered     { border-left-color: var(--c-leaf) !important; }
.question-card.status-closed       { border-left-color: var(--c-panel-edge2) !important; opacity: 0.78; }

/* ─────────────────────────────────────────────────────────────────────────
 *  Topbar — committee + member pill chips
 * ──────────────────────────────────────────────────────────────────────── */
.role-chip-committee { color: var(--c-gold); border-color: rgba(244,147,34,0.45); background: rgba(244,147,34,0.1); }
.role-chip-member    { color: var(--c-ink-mute); border-color: var(--c-panel-edge); background: transparent; }