/* ===========================================================================
 * Compass design tokens — THE single canonical :root token source.
 *
 * Plan items: GAP-18 (one shared token source — FEA-01 + FEB-12 CONSUME this,
 * they do not redefine it), FEA-01 (token foundation), FEA-02/FEB-12 (component
 * styles below consume these). No CDN, no CSP change — same-origin styles only
 * (the site CSP is `style-src 'self'`, so every style lives in this file).
 *
 * a11y CRITICAL (charter): freshness/status + caveats must NEVER rely on color
 * alone. Each semantic state pairs a COLOR token with an icon glyph + text label
 * (the badge/pill/callout markup carries the glyph + word; color is additive).
 * Tokens are mobile-first and reuse the existing site accent (#1a73e8).
 * ======================================================================== */

:root {
  color-scheme: light dark;   /* native form controls + scrollbars follow the theme (MOB-07) */

  /* Surfaces + text (consistent with the existing #f9f9f9 / #222 palette). */
  --c-surface:          #f9f9f9;
  --c-surface-raised:   #ffffff;
  --c-surface-sunken:   #f0f1f3;
  --c-border:           #e2e2e2;
  --c-border-strong:    #d8d8d8;
  --c-text:             #222222;
  --c-text-muted:       #5a5f66;
  --c-text-subtle:      #888888;
  --c-accent:           #1a73e8;   /* existing site accent, reused */
  --c-accent-weak:      #eef3fb;
  --c-accent-contrast:  #ffffff;

  /* Semantic status palette (freshness + severity/comfort/warning).
   * Each is color-INDEPENDENT in use: paired with a glyph + text label. */
  --c-live:             #1e7d34;   /* fresh / good */
  --c-live-weak:        #e7f4ea;
  --c-stale:            #8a6100;   /* overdue / caution */
  --c-stale-weak:       #fbf2dc;
  --c-offline:          #b3261e;   /* offline / error */
  --c-offline-weak:     #fbe9e7;
  --c-warning:          #b3261e;   /* caveats — warning color */
  --c-warning-weak:     #fbe9e7;

  /* Severity scale (e.g. recommendation confidence / comfort emphasis). */
  --c-sev-high:         #1e7d34;
  --c-sev-med:          #8a6100;
  --c-sev-low:          #5a5f66;

  /* Spacing scale (mobile-first, rem-based). */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* Radius scale. */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Typography scale. */
  --fs-xs:  0.78rem;
  --fs-sm:  0.88rem;
  --fs-md:  1rem;
  --fs-lg:  1.2rem;
  --fs-xl:  1.5rem;
  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold:   700;

  /* Elevation + z-index. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --z-banner: 10;
  --z-toast:  100;

  /* Motion / duration (with a reduced-motion fallback below). */
  --dur-fast: 120ms;
  --dur-med:  240ms;
  --ease:     cubic-bezier(0.2, 0, 0.2, 1);
  --skeleton-anim: compass-shimmer 1.2s ease-in-out infinite;
}

/* Reduced-motion: neutralise the skeleton shimmer + transitions. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med:  0ms;
    --skeleton-anim: none;
  }
}

/* ---------------------------------------------------------------------------
 * Dark theme (MOB-07 §5.5). Every component reads var(--c-*), so dark mode is
 * only a re-point of the token VALUES — zero per-component CSS. Status colors
 * are lightened so they stay legible on the dark weak-backgrounds; the code
 * <pre> block is intentionally dark in both themes. `color-scheme` (in :root)
 * themes the native form controls + scrollbars to match.
 * ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --c-surface:          #16181c;
    --c-surface-raised:   #1f2227;
    --c-surface-sunken:   #24272d;
    --c-border:           #303542;
    --c-border-strong:    #3a4150;
    --c-text:             #e6e7ea;
    --c-text-muted:       #aab1bd;
    --c-text-subtle:      #8a909b;
    --c-accent:           #5b9bf3;
    --c-accent-weak:      #1b2942;
    --c-accent-contrast:  #0d1117;

    /* Status palette — lightened foregrounds for legibility on dark surfaces. */
    --c-live:             #5fcf7f;
    --c-live-weak:        #15351f;
    --c-stale:            #e0b54d;
    --c-stale-weak:       #3a2f12;
    --c-offline:          #f08a82;
    --c-offline-weak:     #3a1c1a;
    --c-warning:          #f08a82;
    --c-warning-weak:     #3a1c1a;

    --c-sev-high:         #5fcf7f;
    --c-sev-med:          #e0b54d;
    --c-sev-low:          #aab1bd;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}

/* ---------------------------------------------------------------------------
 * Resets + base
 * ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* iOS touch hardening (mobile-optimization-design.md §5.4 — MOB-03/MOB-10):
 * - text-size-adjust: stop Safari inflating text in landscape; keep user zoom.
 * - tap-highlight + touch-action: remove the grey flash + the double-tap delay.
 * - 16px baseline on text-entry controls so focusing never triggers iOS's
 *   zoom-on-focus. (The two sub-16px inputs are bumped at their own rules too,
 *   since class specificity outranks this element-level baseline.) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

a, button, input, select, textarea, summary, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

input, select, textarea { font-size: 16px; }

/* MOB-11: skip link (the first focusable element) — off-screen until focused. */
.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -3.5rem;
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

/* Don't flash a focus ring on a route target focused by SCRIPT (MOB-11); a real
 * keyboard focus still shows :focus-visible. */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--c-surface);
  color: var(--c-text);
  line-height: 1.55;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * Auth wall
 * ------------------------------------------------------------------------ */

#auth-wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;   /* iOS: stable height, ignores toolbar show/hide (MOB-02) */
  gap: 1rem;
}

#auth-wall h1 { font-size: 2rem; }

#auth-wall form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 320px;
}

#auth-wall input {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--c-border-strong);
  border-radius: 6px;
  font-size: 1rem;
  background: var(--c-surface-raised);
  color: var(--c-text);
}

#auth-wall button {
  padding: 0.6rem;
  border: none;
  border-radius: 6px;
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  font-size: 1rem;
  cursor: pointer;
}

#auth-wall button:hover { filter: brightness(1.05); }
#auth-error { color: var(--c-offline); font-size: 0.9rem; }

/* ---------------------------------------------------------------------------
 * Authenticated shell — header + nav + content frame
 * ------------------------------------------------------------------------ */

#app {
  display: none;            /* flipped to flex by app.js on sign-in */
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;       /* fill the live viewport under the iOS toolbar (MOB-02) */
}

#app > header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* Safe-area aware: pad past the notch/Dynamic Island + side insets, falling
   * back to the original 0.75rem/1.5rem when the inset is 0 (MOB-01 §5.1). */
  padding: max(var(--sp-3), env(safe-area-inset-top))
           max(var(--sp-5), env(safe-area-inset-right))
           var(--sp-3)
           max(var(--sp-5), env(safe-area-inset-left));
  background: var(--c-surface-raised);
  border-bottom: 1px solid var(--c-border);
  flex-wrap: wrap;
}

.brand {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--c-text);
}

.brand:hover { text-decoration: none; }

#primary-nav {
  display: flex;
  gap: 1rem;
  flex: 1;
}

#primary-nav a {
  padding: 0.35rem 0.6rem;
  border-radius: 5px;
  color: var(--c-text-muted);
  font-size: 0.95rem;
}

#primary-nav a:hover { background: var(--c-accent-weak); text-decoration: none; }

#primary-nav a.active {
  background: var(--c-accent);
  color: var(--c-accent-contrast);
}

/* ---------------------------------------------------------------------------
 * "More" nav group — APG disclosure (button + plain links), one implementation
 * for the desktop header dropdown and the mobile tab-bar sheet (nav-more.js).
 * ------------------------------------------------------------------------- */
.nav-more { position: relative; }

.nav-more__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0.35rem 0.6rem;
  border-radius: 5px;
  color: var(--c-text-muted);
  font-size: 0.95rem;
}

#primary-nav .nav-more__trigger:hover { background: var(--c-accent-weak); }

.nav-more__trigger.active {
  background: var(--c-accent);
  color: var(--c-accent-contrast);
}

.nav-more__chevron { width: 14px; height: 14px; flex: 0 0 auto; }

.nav-more__trigger[aria-expanded="true"] .nav-more__chevron {
  transform: rotate(180deg);
}

/* The base class sets display:flex, and ANY author display beats the UA's
   [hidden] { display: none } — so the closed state must be restated
   explicitly or the menu renders permanently open (the bug this fixes). */
.nav-more__menu[hidden] { display: none; }

.nav-more__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  z-index: var(--z-toast);
}

.nav-more__menu a {
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: 0.95rem;
  text-decoration: none;
}

.nav-more__menu a:hover { background: var(--c-accent-weak); text-decoration: none; }

.nav-more__menu a.active {
  background: var(--c-accent);
  color: var(--c-accent-contrast);
}

.header-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#user-display { color: var(--c-text-muted); font-size: 0.9rem; }

#sign-out {
  background: none;
  border: 1px solid var(--c-border-strong);
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--c-text);
}

#sign-out:hover { background: var(--c-surface-sunken); }

main#content {
  /* Side gutters respect the landscape safe-area insets (MOB-01 §5.1). */
  padding: 2rem max(clamp(1rem, 5vw, 3rem), env(safe-area-inset-right))
           2rem max(clamp(1rem, 5vw, 3rem), env(safe-area-inset-left));
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
}

main#content .loading { color: var(--c-text-subtle); }

/* ---------------------------------------------------------------------------
 * Markdown-rendered content typography
 * ------------------------------------------------------------------------ */

main#content h1,
main#content h2,
main#content h3,
main#content h4 {
  color: var(--c-text);
  line-height: 1.25;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

main#content h1 {
  font-size: 1.9rem;
  margin-top: 0;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--c-accent);
}

main#content h2 {
  font-size: 1.4rem;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 0.3rem;
}

main#content h3 { font-size: 1.15rem; }
main#content h4 { font-size: 1rem; color: var(--c-text-muted); }

main#content p,
main#content ul,
main#content ol,
main#content pre,
main#content blockquote,
main#content table { margin: 0.75em 0; }

main#content ul,
main#content ol { padding-left: 1.5rem; }

main#content li { margin: 0.2em 0; }

main#content code {
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 0.88em;
  background: var(--c-surface-sunken);
  padding: 0.12em 0.35em;
  border-radius: 3px;
}

main#content pre {
  background: #1f2227;          /* code block stays dark in both themes by design */
  color: #e6e6e6;
  padding: 0.9rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow-x: auto;
}

main#content pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: 0.85rem;
}

main#content blockquote {
  border-left: 4px solid var(--c-accent);
  background: var(--c-accent-weak);
  padding: 0.6rem 1rem;
  color: var(--c-text);
  border-radius: 0 4px 4px 0;
}

main#content blockquote > :first-child { margin-top: 0; }
main#content blockquote > :last-child  { margin-bottom: 0; }

main#content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}

main#content th,
main#content td {
  border: 1px solid var(--c-border-strong);
  padding: 0.45rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

main#content th { background: var(--c-surface-sunken); font-weight: 600; }
main#content tr:nth-child(even) td { background: var(--c-surface-raised); }

main#content hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: 2rem 0;
}

main#content strong { color: var(--c-text); }

/* ===========================================================================
 * Compass design-system components (FEA-02 / FEB-12).
 *
 * Reusable presentational classes the dashboard pages apply via the render
 * functions: cards, pills, chips, skeletons, the 3-state freshness badge,
 * banners, callouts, and empty states. All consume the tokens above (no new
 * hardcoded hex). Mobile-first: single-column by default, grid at wider widths.
 * Every status component pairs color with an icon glyph + text (set in markup),
 * so meaning is never color-only.
 * ======================================================================== */

/* Section heading inside a Compass page. */
.compass-section-heading {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  margin: var(--sp-5) 0 var(--sp-3);
}

.compass-todo {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  background: var(--c-accent-weak);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
}

/* --- Cards + layout containers ------------------------------------------- */

.compass-card {
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}

a.compass-card,
.compass-card--link {
  display: block;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

a.compass-card:hover,
.compass-card--link:hover {
  text-decoration: none;
  border-color: var(--c-accent);
}

.compass-card-grid {
  display: grid;
  grid-template-columns: 1fr;        /* mobile-first single column */
  gap: var(--sp-4);
  margin: var(--sp-4) 0;
}

.compass-card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: var(--sp-4) 0;
}

@media (min-width: 640px) {
  .compass-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

/* --- Pills (confidence / comfort / severity) ---------------------------- */

.compass-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  padding: 0.15em 0.6em;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface-sunken);
  color: var(--c-text);
}

.compass-pill--high  { background: var(--c-live-weak);   color: var(--c-sev-high); border-color: var(--c-live); }
.compass-pill--med   { background: var(--c-stale-weak);  color: var(--c-sev-med);  border-color: var(--c-stale); }
.compass-pill--low   { background: var(--c-surface-sunken); color: var(--c-sev-low); }

/* --- Chips (prep checklist, activity tags) ------------------------------ */

.compass-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  padding: 0.1em 0.55em;
  border-radius: var(--r-sm);
  background: var(--c-accent-weak);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  margin: 0 var(--sp-1) var(--sp-1) 0;
}
/* Interactive chips (forecast ranges, event tags) — clickable + a clear
   selected state. Static span chips are unaffected. */
button.compass-chip {
  cursor: pointer;
  padding: var(--sp-1) var(--sp-3);
  font: inherit;
  font-size: var(--fs-xs);
}
.compass-chip--on {
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  border-color: var(--c-accent);
}

/* --- Freshness badge (FEA-09 / FEB-19) — 3 color-INDEPENDENT states ----- */

.compass-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  padding: 0.18em 0.6em;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface-sunken);
  color: var(--c-text);
}

.compass-badge__icon  { font-size: 0.95em; }
.compass-badge__label { white-space: nowrap; }

/* Color is ADDITIVE; the icon glyph (●/◐/⚠) + text label already differentiate. */
.compass-badge--live    { background: var(--c-live-weak);    color: var(--c-live);    border-color: var(--c-live); }
.compass-badge--stale   { background: var(--c-stale-weak);   color: var(--c-stale);   border-color: var(--c-stale); }
.compass-badge--offline { background: var(--c-offline-weak); color: var(--c-offline); border-color: var(--c-offline); }

/* --- Caveat callout (warning color + icon + text) ----------------------- */

.compass-callout {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font-size: var(--fs-sm);
  background: var(--c-warning-weak);
  color: var(--c-warning);
  border: 1px solid var(--c-warning);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0;
}

.compass-callout__icon { flex: 0 0 auto; }

/* --- Paused / status banner --------------------------------------------- */

.compass-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  margin: var(--sp-3) 0;
  background: var(--c-stale-weak);
  color: var(--c-stale);
  border: 1px solid var(--c-stale);
}

.compass-banner--offline {
  background: var(--c-offline-weak);
  color: var(--c-offline);
  border-color: var(--c-offline);
}

/* --- NWS weather alerts (E1) ---------------------------------------------
   Severity is color-INDEPENDENT: every row pairs the level color with the ⚠
   glyph + the severity word. Levels: high (extreme/severe), med (moderate),
   low (minor/unknown). */

.compass-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}

.compass-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface-raised);
  color: var(--c-text);
}

.compass-alert--high {
  background: var(--c-warning-weak);
  border-color: var(--c-warning);
}

.compass-alert--med {
  background: var(--c-stale-weak);
  border-color: var(--c-stale);
}

.compass-alert__severity {
  text-transform: uppercase;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.compass-alert--high .compass-alert__severity { color: var(--c-warning); }
.compass-alert--med .compass-alert__severity { color: var(--c-stale); }
.compass-alert--low .compass-alert__severity { color: var(--c-text-muted); }

.compass-alert__kind { font-weight: var(--fw-medium); }

.compass-alert__until {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}

.compass-alert__headline {
  flex-basis: 100%;
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}

/* --- Empty-state block --------------------------------------------------- */

.compass-empty {
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  padding: var(--sp-5) var(--sp-4);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
}

/* --- Who's where (household presence, E2) --------------------------------
   One row per member: name + their upcoming placement segments. The current
   segment is emphasised (accent border); date ranges are muted. */

.compass-presence { margin: var(--sp-4) 0; }

.compass-presence__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.compass-presence__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.compass-presence__name {
  font-weight: var(--fw-medium);
  min-width: 5rem;
}

.compass-presence__segments {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.compass-presence__seg {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface-raised);
}

.compass-presence__seg--now {
  border-color: var(--c-accent);
  background: var(--c-accent-weak);
}

.compass-presence__range {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}

/* --- Strip cells (conditions strip, shared-window strip) ----------------- */

.compass-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}

.compass-strip__cell {
  flex: 1 1 auto;
  min-width: 120px;
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
}

/* Hourly forecast (Compass §1): the expanded full forecast is a HORIZONTAL
   scroll-strip (momentum scroll on iOS) so 48 hourly columns don't wrap into a
   wall. The location <select> + range chips wrap above it. */
.compass-forecast { margin: var(--sp-3) 0; }
.compass-forecast__summary {
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) 0;
  list-style: none;
}
.compass-forecast__summary::-webkit-details-marker { display: none; }
.compass-forecast__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
}
.compass-forecast__location {
  font-size: 16px; /* >= 16px: no iOS focus-zoom */
  min-height: 44px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface-raised);
  color: var(--c-text);
}
.compass-forecast__ranges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ── Compass tabs chrome (compass-tabs-redesign.md) ─────────────────────────
   The subnav is the trailhead underline-tab pattern with compass classes;
   the alert pill condenses the old full-width banner on every non-Weather
   tab; the scope row carries per-tab controls + the location dropdown. */
.compass-subnav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--c-border-strong);
  padding-bottom: var(--sp-2);
  margin-top: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.compass-subnav::-webkit-scrollbar { display: none; }
.compass-subnav__link {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  text-decoration: none;
  padding: var(--sp-1) 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.compass-subnav__link:hover { color: var(--c-accent); }
.compass-subnav__link.is-active {
  color: var(--c-text);
  font-weight: 600;
  border-bottom-color: var(--c-accent);
}

.compass-alertpill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  margin: var(--sp-2) 0 0;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-warning-weak);
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
  min-height: 32px;
}
.compass-alertpill:hover { border-color: var(--c-accent); }
.compass-alertpill__sev { font-weight: var(--fw-bold); }
.compass-alertpill__sev--high { color: var(--c-warning); }
.compass-alertpill__sev--med { color: var(--c-stale); }
.compass-alertpill__sev--low { color: var(--c-text-muted); }
.compass-alertpill__kind {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compass-alertpill__go { color: var(--c-accent); white-space: nowrap; }

.compass-scoperow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-2);
  min-height: 34px;
}
.compass-scoperow__loc {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.compass-scoperow__caption {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
  font-style: italic;
}
.compass-loc-select {
  font-size: 16px; /* >= 16px: no iOS focus-zoom */
  min-height: 44px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface-raised);
  color: var(--c-text);
  max-width: 16rem;
}

.compass-condline {
  margin: var(--sp-4) 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-raised);
  padding: var(--sp-2) var(--sp-3);
}
.compass-condline__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.compass-condline__link { margin-left: var(--sp-3); white-space: nowrap; }

.compass-events-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
}
.compass-events-caption {
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
  font-style: italic;
  margin: var(--sp-2) 0 0;
}
.compass-weather__caption {
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-2);
}
.compass-weather__forecast-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.compass-weather__forecast-head .compass-forecast__ranges { margin-left: auto; }

/* ── Household Week-Ahead grid (compass-tabs CT-C) ──────────────────────────
   Lanes × days; the TOGETHER lane pinned first. Comfort levels reuse the
   outlook vocabulary (sev-high here = GOOD/green; never color-only — the
   %+word always renders). The grid scrolls in its own container. */
.compass-week__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface-raised);
  box-shadow: var(--shadow-card);
}
.compass-week {
  display: grid;
  min-width: 860px;
  font-size: var(--fs-xs);
}
.compass-week > div,
.compass-week > button {
  border-left: 1px solid var(--c-border);
  border-top: 1px solid var(--c-border);
  padding: var(--sp-2);
}
.compass-week > :nth-child(-n + 8) { border-top: 0; }
.compass-week__rail {
  border-left: 0 !important;
  background: var(--c-surface-sunken);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  position: sticky;
  left: 0;
  z-index: 1;
}
.compass-week__rail small {
  font-weight: var(--fw-normal);
  color: var(--c-text-subtle);
}
.compass-week__rail--together { color: var(--c-accent); }
.compass-week__dayhead {
  background: var(--c-surface-sunken);
  text-align: center;
  font-weight: 600;
  border: 0;
  border-left: 1px solid var(--c-border);
  cursor: pointer;
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.compass-week__dayhead:hover .compass-week__daytop { color: var(--c-accent); }
.compass-week__daysub {
  font-weight: var(--fw-normal);
  color: var(--c-text-subtle);
}
.compass-week__cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  min-height: 56px;
  background: none;
  border-right: 0;
  border-bottom: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}
button.compass-week__cell { cursor: pointer; }
.compass-week__act { font-weight: 600; }
.compass-week__win {
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
}
.compass-week__score { font-weight: 600; }
.compass-week__cell--good { background: var(--c-live-weak); }
.compass-week__cell--good .compass-week__score,
.compass-week__score--good { color: var(--c-sev-high); }
.compass-week__cell--fair { background: var(--c-stale-weak); }
.compass-week__cell--fair .compass-week__score,
.compass-week__score--fair { color: var(--c-sev-med); }
.compass-week__cell--poor { background: var(--c-offline-weak); }
.compass-week__cell--poor .compass-week__score,
.compass-week__score--poor { color: var(--c-offline); }
.compass-week__cell--lowconf {
  box-shadow: inset 0 3px 0 -1px var(--c-border-strong);
}
.compass-week__cell--none {
  justify-content: center;
  color: var(--c-text-subtle);
  font-style: italic;
}
.compass-week__cell--nodata {
  justify-content: center;
  color: var(--c-text-subtle);
}
.compass-week__cell--dim { opacity: 0.35; }
.compass-week__who {
  font-size: 0.68rem;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
}
.compass-week__waiting {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-text-muted);
  font-style: italic;
}
.compass-week__legend {
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
  margin: var(--sp-2) 0 0;
}

/* The day sheet — the touch replacement for tooltips (mobile-first; renders
   as a bottom sheet at every width until a desktop popover earns its keep). */
.compass-sheet__veil {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: var(--z-toast);
}
.compass-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-toast) + 1);
  background: var(--c-surface-raised);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2);
  padding: var(--sp-3) var(--sp-4)
    calc(var(--sp-4) + env(safe-area-inset-bottom));
  max-height: 70vh;
  overflow-y: auto;
}
.compass-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.compass-sheet__title { margin: 0; font-size: var(--fs-md); }
.compass-sheet__lanehead {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin: var(--sp-3) 0 var(--sp-1);
}
.compass-sheet__lanehead:first-of-type { color: var(--c-accent); }
.compass-sheet__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-1) 0;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.compass-sheet__name,
.compass-sheet__act { font-weight: 600; min-width: 72px; }
.compass-sheet__names,
.compass-sheet__opts { color: var(--c-text-muted); }

/* ── Household Live Music (compass-tabs CT-D) ───────────────────────────────
   Reuses the member concerts-card vocabulary; adds the dense Radar rows and
   the member-initial attribution chips (which deep-link to the member's own
   Live Music page — Dismiss lives there). */
.compass-concert-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.compass-music__rows { display: flex; flex-direction: column; }
.compass-music__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.compass-music__row:first-child { border-top: 0; }
.compass-music__artist { font-weight: 600; }
.compass-music__meta { color: var(--c-text-muted); }
.compass-music__members {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.compass-music__member {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-accent-weak);
  color: var(--c-accent);
  font-size: 0.66rem;
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.compass-music__member:hover { background: var(--c-accent); color: var(--c-accent-contrast); }

/* ── Member Week Ahead (compass-tabs CT-E) ──────────────────────────────── */
.compass-back { font-size: var(--fs-sm); }
.compass-bestbets { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.compass-bestbets__chip {
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--c-accent-weak);
  color: var(--c-accent);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3);
}
.compass-week__footnote {
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
  margin: var(--sp-1) 0 0;
}
.compass-week-digest {
  margin-top: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-raised);
  padding: var(--sp-2) var(--sp-3);
}
.compass-week-digest__summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.compass-week-digest__body { margin-top: var(--sp-2); }
.compass-collapsed-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-raised);
  padding: var(--sp-2) var(--sp-3);
}
.compass-forecast__strip {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: var(--sp-2);
}
.compass-forecast__cell {
  flex: 0 0 auto; /* fixed-width hour columns; scroll, don't wrap */
  min-width: 96px;
  scroll-snap-align: start;
}
.compass-forecast__hour { font-weight: var(--fw-medium); margin-bottom: var(--sp-1); }
.compass-forecast__condition {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  margin-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.compass-forecast__condition-label { text-transform: capitalize; }
.compass-forecast__reading {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--c-text-muted);
}
.compass-forecast__metric { color: var(--c-text-subtle); }

/* Digest heading row (E7): title + the regenerate control. */
.compass-digest-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.compass-digest-regen { flex: 0 0 auto; }

/* Week outlook (E6): activity × day grid from the persisted window scores.
   Cell = comfort % + level color (number and color together, never color
   alone); grid-template-columns is a CSSOM write (CSP: no inline style). */
/* The outlook grid is now the Go-now "This week" view; the Go-now section's
   flex-gap spaces it, so the wrapper needs no margin of its own. */
.compass-gonow-outlook { display: flex; flex-direction: column; gap: var(--sp-2); }
.compass-outlook__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-2);
}
.compass-outlook {
  display: grid;
  gap: var(--sp-1);
  align-items: center;
  min-width: 34rem; /* keep day columns readable; the wrapper scrolls */
  font-size: var(--fs-xs);
}
.compass-outlook__day,
.compass-outlook__activity {
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
}
.compass-outlook__day { text-align: center; }
.compass-outlook__cell {
  text-align: center;
  padding: var(--sp-1) 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface-raised);
  font-variant-numeric: tabular-nums;
}
.compass-outlook__cell--high {
  border-color: var(--c-sev-high);
  color: var(--c-sev-high);
  background: var(--c-live-weak);
  font-weight: var(--fw-medium);
}
.compass-outlook__cell--med {
  border-color: var(--c-sev-med);
  color: var(--c-sev-med);
  background: var(--c-stale-weak);
}
.compass-outlook__cell--low { color: var(--c-text-muted); }
.compass-outlook__cell--none {
  border-style: dashed;
  color: var(--c-text-subtle);
  background: transparent;
}
.compass-outlook__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
}

/* Preferences panel (E3): a read-only, collapsed <details> on the person page
   with the member's tastes, digest schedule, channels + comfort bands. */
.compass-prefs { margin: var(--sp-3) 0; }
.compass-prefs__summary {
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) 0;
  list-style: none;
}
.compass-prefs__summary::-webkit-details-marker { display: none; }
.compass-prefs__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-3);
}
.compass-prefs__group-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-1);
}
.compass-prefs__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin: var(--sp-1) 0;
  font-size: var(--fs-sm);
}
.compass-prefs__row-label {
  min-width: 5rem;
  font-weight: var(--fw-medium);
}
.compass-prefs__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.compass-prefs__chip--dislike {
  color: var(--c-text-muted);
  text-decoration: line-through;
}
.compass-prefs__line,
.compass-prefs__bands {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.compass-prefs__controls { display: flex; justify-content: flex-end; }
.compass-prefs__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.compass-prefs__chip--removable { cursor: pointer; }
.compass-prefs__tag-input,
.compass-prefs__time,
.compass-prefs__text,
.compass-prefs__select {
  font-size: 16px; /* >= 16px: no iOS focus-zoom */
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface-raised);
  color: var(--c-text);
  max-width: 10rem;
}
/* Identity/contact fields hold names + emails — give them more room. */
.compass-prefs__text { max-width: 16rem; flex: 1 1 12rem; }
.compass-prefs__checkbox { width: 1.1rem; height: 1.1rem; }
.compass-prefs__actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* Marine section (E9): good on-the-water windows + tide events. */
.compass-overview__marine { margin: var(--sp-4) 0; }
.compass-marine__windows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.compass-marine__window {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.compass-marine__when { font-weight: var(--fw-medium); }
.compass-marine__stats { color: var(--c-text-muted); }
.compass-marine__tides {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* System panel (E5): a lazy <details> with per-job heartbeat rows + digest
   render times. Status is glyph + word; the level class only adds color. */
.compass-system { margin: var(--sp-3) 0; }
.compass-system__summary {
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) 0;
  list-style: none;
}
.compass-system__summary::-webkit-details-marker { display: none; }
.compass-system__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-3);
}
.compass-system__rollup { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.compass-system__rollup--ok { color: var(--c-live); }
.compass-system__rollup--bad { color: var(--c-warning); }
.compass-system__version {
  color: var(--c-text-muted);
  font-weight: var(--fw-normal);
  font-size: var(--fs-xs);
}
.compass-system__jobs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.compass-system__job {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.compass-system__glyph { min-width: 1em; text-align: center; }
.compass-system__job--ok .compass-system__glyph { color: var(--c-live); }
.compass-system__job--warn .compass-system__glyph,
.compass-system__job--warn .compass-system__word { color: var(--c-stale); }
.compass-system__job--bad .compass-system__glyph,
.compass-system__job--bad .compass-system__word { color: var(--c-warning); }
.compass-system__job--muted { color: var(--c-text-subtle); }
.compass-system__name { font-family: ui-monospace, monospace; font-size: var(--fs-xs); }
.compass-system__word { font-weight: var(--fw-medium); }
.compass-system__age { color: var(--c-text-muted); font-size: var(--fs-xs); }
.compass-system__error {
  flex-basis: 100%;
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  padding-left: calc(1em + var(--sp-2));
}
.compass-system__digests-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-1);
}
.compass-system__digest { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* LLM usage panel (E11): the spend counterpart to the System panel — a lazy
   <details> with window totals + by-model / by-member cost breakdowns. */
.compass-usage { margin: var(--sp-3) 0; }
.compass-usage__summary {
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) 0;
  list-style: none;
}
.compass-usage__summary::-webkit-details-marker { display: none; }
.compass-usage__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-3);
}
.compass-usage__totals { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.compass-usage__cost { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-text); }
.compass-usage__totals-meta { font-size: var(--fs-xs); color: var(--c-text-muted); }
.compass-usage__group { display: flex; flex-direction: column; gap: var(--sp-1); }
.compass-usage__group-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-1);
}
.compass-usage__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.compass-usage__row-name { color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compass-usage__row-calls { color: var(--c-text-subtle); font-size: var(--fs-xs); }
.compass-usage__row-cost {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
}

/* Events explorer (Compass §1): a lazy <details> to search events at any
   household location, with client-side tag chips + a show-more pager. */
.compass-events-explorer { margin: var(--sp-3) 0; }
.compass-events-explorer__summary {
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) 0;
  list-style: none;
}
.compass-events-explorer__summary::-webkit-details-marker { display: none; }
.compass-events-explorer__controls { margin: var(--sp-2) 0; }
.compass-events-explorer__location {
  font-size: 16px; /* >= 16px: no iOS focus-zoom */
  min-height: 44px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface-raised);
  color: var(--c-text);
}
.compass-events-explorer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
}
.compass-events-explorer__list { margin-top: var(--sp-2); }

/* --- Skeleton loading blocks (shimmer; respects reduced-motion) ---------- */

.compass-skeleton__line {
  height: 0.85rem;
  border-radius: var(--r-sm);
  margin: var(--sp-2) 0;
  background: linear-gradient(
    90deg,
    var(--c-surface-sunken) 25%,
    var(--c-border) 37%,
    var(--c-surface-sunken) 63%
  );
  background-size: 400% 100%;
  animation: var(--skeleton-anim);
}

.compass-skeleton__line--title { height: 1.1rem; width: 55%; }
.compass-skeleton__line--short { width: 40%; }

@keyframes compass-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* --- Safe external link (never auto-followed) --------------------------- */

.compass-extlink { color: var(--c-accent); }
.compass-extlink::after { content: " \2197"; font-size: 0.8em; } /* ↗ */

/* --- Toast (write-loop feedback; aria-live in markup) -------------------- */

.compass-toast {
  position: fixed;
  bottom: max(var(--sp-5), env(safe-area-inset-bottom));   /* clear the home indicator (MOB-01 §5.1/G8) */
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--c-text);
  color: var(--c-accent-contrast);
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}

.compass-toast--error { background: var(--c-offline); }

/* Visually-hidden helper for SR-only text (badge announcements etc.). */
.compass-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
 * Compass HOUSEHOLD OVERVIEW page (FEA-06/07/10/11/12/14/15).
 *
 * Builds on the slice-1 tokens + components above (cards, pills, chips, badges,
 * banners, skeletons, empty states). Mobile-first: single column on phones,
 * grid at wider screens (FEA-14). Color-independent states (text/shape/icon, not
 * color alone). NO inline styles — every style lives here (CSP style-src 'self').
 * ======================================================================== */

.compass-overview {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* --- Page header: title + page-level freshness badge --------------------- */

.compass-overview__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.compass-overview__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.compass-overview__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: 1.2;
  margin: 0;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--c-accent);
  flex: 1 1 auto;
}

/* Remove the focus ring's harshness but keep it visible for keyboard a11y. */
.compass-overview__title:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.compass-overview__page-badge { flex: 0 0 auto; }

/* --- Roster section ------------------------------------------------------- */

.compass-overview__roster { display: block; }

/* --- Member card --------------------------------------------------------- */

.compass-member-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  /* AA touch target: ensure a comfortable minimum tap height (FEA-14). */
  min-height: 44px;
}

.compass-member-card:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.compass-member-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}

.compass-member-card__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  margin: 0;
  word-break: break-word;
}

.compass-member-card__badge { flex: 0 0 auto; }

.compass-member-card__paused {
  /* The shared .compass-banner provides color + border; tighten spacing here. */
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  font-weight: var(--fw-medium);
}

.compass-member-card__loc {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.compass-member-card__loc-label { color: var(--c-text-subtle); }
.compass-member-card__loc-val { color: var(--c-text); font-weight: var(--fw-medium); }

/* --- Headline "go-now" window line --------------------------------------- */

.compass-member-card__headline {
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border);
}

.compass-headline-line {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

.compass-headline-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.compass-headline-empty {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  font-style: italic;
}

/* --- Strip metric cells (conditions strip) ------------------------------- */

.compass-strip__metric {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-text-subtle);
}

.compass-strip__value {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

.compass-strip__source {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: var(--sp-1);
  word-break: break-word;
}

/* --- Responsive: side-by-side strips at wider widths (FEA-14) ------------ */

@media (min-width: 720px) {
  .compass-overview__title { font-size: 1.7rem; }
}

/* ===========================================================================
 * Compass PER-PERSON DETAIL page (FEB-03..26).
 *
 * Builds on the slice-1 tokens + shared components (cards, pills, chips, badges,
 * banners, skeletons, toast, empty states) and the overview layout above.
 * Mobile-first; color-independent states (icon/word/shape, not color alone);
 * NO inline styles (CSP style-src 'self').
 * ======================================================================== */

.compass-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* --- Profile header (FEB-04/05/11/19) ----------------------------------- */

.compass-detail__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.compass-detail__back {
  font-size: var(--fs-sm);
  color: var(--c-accent);
  align-self: flex-start;
}

.compass-detail__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.compass-detail__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: 1.2;
  margin: 0;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--c-accent);
  flex: 1 1 auto;
}

.compass-detail__title:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.compass-detail__page-badge { flex: 0 0 auto; }

.compass-detail__meta {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.compass-detail__loc {
  font-size: var(--fs-sm);
}

.compass-detail__loc-label { color: var(--c-text-subtle); }
.compass-detail__loc-val { color: var(--c-text); font-weight: var(--fw-medium); }
.compass-detail__loc-src { color: var(--c-text-subtle); }

/* Activities the member follows (relocated from the overview card). */
.compass-detail__activities {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.compass-detail__activities-label { font-size: var(--fs-sm); color: var(--c-text-subtle); }
.compass-detail__activities-chips {
  display: flex;
  flex-wrap: wrap;
}
/* Collapsed = a single clipped row; the toggle reveals the rest. Phone-only —
   desktop wraps the full set and hides the toggle (override below). */
.compass-detail__activities-chips--collapsed {
  flex-wrap: nowrap;
  overflow: hidden;
}
.compass-detail__activities-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: var(--sp-1) 0;
  color: var(--c-accent);
  font-size: var(--fs-sm);
  cursor: pointer;
}
@media (min-width: 640px) {
  .compass-detail__activities-chips--collapsed { flex-wrap: wrap; overflow: visible; }
  .compass-detail__activities-toggle { display: none; }
}

.compass-detail__pause {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
  margin-top: var(--sp-2);
}

.compass-detail__paused-banner { width: 100%; }

/* --- Buttons (shared across actions + pause/snooze) ---------------------- */

.compass-btn {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-raised);
  color: var(--c-text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.compass-btn:hover { background: var(--c-accent-weak); }

.compass-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.compass-btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  border-color: var(--c-accent);
}
.compass-btn--primary:hover { filter: brightness(1.05); background: var(--c-accent); }

.compass-btn--secondary { background: var(--c-surface-sunken); }

.compass-btn--ghost {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-text-muted);
}

.compass-btn[disabled],
.compass-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Go-now recommendation cards (FEB-06..12) --------------------------- */

.compass-detail__gonow { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Go-now heading row: the title + the day-span the suggestions cover. */
.compass-gonow-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap; /* the 4-way toggle drops below the title on a phone */
  gap: var(--sp-2) var(--sp-3);
}
.compass-gonow-coverage {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  white-space: nowrap;
}

/* Go-now tile grid: compact tiles instead of one long full-width stack.
   Mobile collapses to a single column via auto-fill; desktop packs 2-4
   across. Tiles are denser than a default card (tighter padding, smaller
   title/buttons) — the scoped overrides below only touch cards in the
   grid, so a card rendered elsewhere keeps the roomy defaults. */
.compass-rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-3);
  align-items: start;
}
.compass-rec-grid .compass-rec-card {
  padding: var(--sp-3);
  gap: var(--sp-1);
}
.compass-rec-grid .compass-rec-card__activity { font-size: var(--fs-md); }
.compass-rec-grid .compass-rec-card__actions .compass-btn {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
}

/* --- Go-now layout toggle + the three views (2026-07-12 redesign) -------- */

.compass-gonow-toggle {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.compass-gonow-toggle__btn {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: var(--sp-1) var(--sp-2);
  border: 0;
  border-left: 1px solid var(--c-border);
  background: var(--c-surface-raised);
  color: var(--c-text-muted);
  cursor: pointer;
}
.compass-gonow-toggle__btn:first-child { border-left: 0; }
.compass-gonow-toggle__btn--on {
  background: var(--c-accent-weak);
  color: var(--c-accent);
}

/* The action sheet: the selected plan's full card, pinned under the head. */
.compass-gonow-sheet {
  border: 1px solid var(--c-accent);
  border-radius: var(--r-lg);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.compass-gonow-sheet__close {
  align-self: flex-end;
  font-size: var(--fs-xs);
  padding: 2px var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface-raised);
  color: var(--c-text-muted);
  cursor: pointer;
}

/* View A: one tile per activity, day plans as colored time chips. */
.compass-gonow-activities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
  align-items: start;
}
.compass-gonow-atile { padding: var(--sp-3); }
.compass-gonow-atile__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.compass-gonow-atile__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  margin: 0;
  word-break: break-word;
}
.compass-gonow-days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.compass-gonow-day {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
  cursor: pointer;
}
.compass-gonow-day__d { font-weight: var(--fw-bold); color: var(--c-text); }
.compass-gonow-day--high { border-color: var(--c-live); background: var(--c-live-weak); }
.compass-gonow-day--med { border-color: var(--c-stale); background: var(--c-stale-weak); }
.compass-gonow-day.is-open { outline: 2px solid var(--c-accent); }
.compass-gonow-day--dismissed { opacity: 0.55; }
.compass-gonow-atile__event {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* View B: chronological day tiles, one tappable row per plan. */
.compass-gonow-daytiles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.compass-gonow-dtile { padding: var(--sp-2) var(--sp-3); }
.compass-gonow-dtile__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.compass-gonow-dtile__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  margin: 0;
}
.compass-gonow-dtile__sub { font-size: var(--fs-xs); color: var(--c-text-subtle); }
.compass-gonow-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  width: 100%;
  text-align: left;
  padding: var(--sp-2) var(--sp-1);
  border: 0;
  border-top: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text);
  cursor: pointer;
}
.compass-gonow-row:first-of-type { border-top: 0; }
.compass-gonow-row.is-open { outline: 2px solid var(--c-accent); border-radius: var(--r-sm); }
.compass-gonow-row--dismissed { opacity: 0.55; }
.compass-gonow-row__name { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.compass-gonow-row__time {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}
.compass-gonow-row__event {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compass-gonow-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  align-self: center;
  flex: 0 0 auto;
  background: var(--c-border-strong);
}
.compass-gonow-dot--high { background: var(--c-live); }
.compass-gonow-dot--med { background: var(--c-stale); }

/* View C: hero cards (reuse .compass-rec-grid) + the activity × day grid. */
.compass-gonow-best { display: flex; flex-direction: column; gap: var(--sp-3); }
.compass-gonow-grid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-2);
}
.compass-gonow-grid {
  display: grid;
  gap: 2px;
  min-width: 480px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  background: var(--c-surface-raised);
  align-items: center;
}
.compass-gonow-grid__head {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--sp-1);
  text-align: center;
}
.compass-gonow-grid__head:first-child { text-align: left; }
.compass-gonow-grid__name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  padding: var(--sp-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compass-gonow-grid__cell {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: var(--sp-1);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
}
.compass-gonow-grid__cell--none { cursor: default; color: var(--c-text-subtle); }
.compass-gonow-grid__cell--high { background: var(--c-live-weak); color: var(--c-sev-high); border-color: var(--c-live); }
.compass-gonow-grid__cell--med { background: var(--c-stale-weak); color: var(--c-sev-med); border-color: var(--c-stale); }
.compass-gonow-grid__cell.is-open { outline: 2px solid var(--c-accent); }
.compass-gonow-grid__cell--dismissed { opacity: 0.55; }

/* Gating event name on an event-gated tile (e.g. the market's own name).
   One clamped line — the events section below carries the full text. */
.compass-rec-card__event {
  font-size: var(--fs-sm);
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Same-day alternate windows folded into the tile. */
.compass-rec-card__alts {
  border-top: 1px dashed var(--c-border);
  padding-top: var(--sp-1);
}
.compass-rec-card__alts-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-subtle);
}
.compass-rec-card__alt {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compass-rec-card__alt--more { font-style: italic; }

.compass-rec-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.compass-rec-card--dismissed { opacity: 0.7; }
.compass-rec-card--accepted { border-color: var(--c-live); }

.compass-rec-card__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  justify-content: space-between;
}

.compass-rec-card__activity {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  word-break: break-word;
}

.compass-rec-card__pills {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.compass-rec-card__when {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
}

.compass-rec-card__rationale {
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.compass-rec-card__caveats-label,
.compass-rec-card__prep-label,
.compass-rec-card__events-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-subtle);
}

.compass-rec-card__caveats-label { color: var(--c-warning); }

.compass-rec-card__caveats,
.compass-rec-card__prep {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.compass-rec-card__caveats .compass-chip {
  background: var(--c-warning-weak);
  color: var(--c-warning);
  border-color: var(--c-warning);
}

.compass-rec-card__events { font-size: var(--fs-sm); color: var(--c-text-muted); }
.compass-rec-card__events-label { color: var(--c-text-subtle); }

/* "Why this score?" drilldown (Compass §1): a per-card disclosure whose metric
   breakdown is a STACKED list (no wide table) so it reads top-to-bottom on a
   phone. The summary carries a comfortable tap target. */
.compass-rec-card__why {
  margin-top: var(--sp-2);
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-1);
}
.compass-rec-card__why-summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-accent);
  padding: var(--sp-2) 0; /* comfortable tap target on mobile */
  list-style: none;
}
.compass-rec-card__why-summary::-webkit-details-marker { display: none; }
.compass-why {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-1);
}
.compass-why__pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.compass-why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.compass-why__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  background: var(--c-surface-sunken);
  border-radius: var(--r-sm);
  padding: var(--sp-1) var(--sp-2);
}
.compass-why__metric { font-weight: var(--fw-medium); color: var(--c-text); }
.compass-why__note { color: var(--c-text-muted); }

.compass-rec-card__statemsg {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
}

.compass-rec-card__statemsg--accepted {
  background: var(--c-live-weak); color: var(--c-live); border-color: var(--c-live);
}
.compass-rec-card__statemsg--dismissed {
  background: var(--c-surface-sunken); color: var(--c-text-muted);
}
.compass-rec-card__statemsg--snoozed {
  background: var(--c-stale-weak); color: var(--c-stale); border-color: var(--c-stale);
}

.compass-rec-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-1);
}

.compass-rec-card__writes-off {
  width: 100%;
  font-size: var(--fs-xs);
  color: var(--c-offline);
}

/* --- Snooze popover (FEB-17) -------------------------------------------- */

.compass-snooze-popover {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-sunken);
}

.compass-snooze-popover__presets,
.compass-snooze-popover__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.compass-snooze-popover__label { font-size: var(--fs-sm); color: var(--c-text-muted); }

.compass-snooze-popover__input {
  font-size: 16px;   /* MOB-03/G6: ≥16px so iOS doesn't zoom on focus */
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface-raised);
  color: var(--c-text);
}

.compass-snooze-popover__input[aria-invalid="true"] { border-color: var(--c-offline); }

.compass-snooze-popover__error {
  font-size: var(--fs-xs);
  color: var(--c-offline);
}

.compass-snooze-popover__error:empty { display: none; }

/* --- This-week digest block (FEB-18) ----------------------------------- */

.compass-detail__digest { display: flex; flex-direction: column; gap: var(--sp-2); }

.compass-digest-block {
  font-size: var(--fs-sm);
  color: var(--c-text);
  line-height: 1.6;
}

.compass-digest-block h1,
.compass-digest-block h2,
.compass-digest-block h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin: var(--sp-2) 0 var(--sp-1);
}

.compass-digest-block ul { padding-left: var(--sp-5); }
.compass-digest-block p { margin: var(--sp-1) 0; }

/* --- Events nearby (FEB-22) -------------------------------------------- */

.compass-detail__events { display: flex; flex-direction: column; gap: var(--sp-2); }

.compass-event-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.compass-event {
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.compass-event__summary { font-weight: var(--fw-medium); color: var(--c-text); word-break: break-word; }
.compass-event__meta { font-size: var(--fs-xs); color: var(--c-text-muted); }
.compass-event__link { font-size: var(--fs-sm); }

/* --- Events row chrome — used by the OVERVIEW Events Explorer's flat
   per-location list (.compass-event-list of .compass-event rows). The layout
   of the Events-nearby section itself is the shared .compass-events rule
   below; .compass-overview__events remains only as a per-page hook. -------- */
.compass-event__title { font-weight: var(--fw-medium); color: var(--c-text); word-break: break-word; }
.compass-event__when { font-size: var(--fs-xs); color: var(--c-text-muted); }
.compass-event__where { font-size: var(--fs-xs); color: var(--c-text-muted); word-break: break-word; }

/* --- Events nearby REDESIGN (2026-07-13): Worth-a-look / By-interest toggle
   over the deduped happenings. Shared by the detail AND overview pages via the
   .compass-events class (events-view.js createEventsSection). --------------- */
.compass-events { display: flex; flex-direction: column; gap: var(--sp-3); }
.compass-events-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.compass-events-count { font-size: var(--fs-sm); color: var(--c-text-muted); }
.compass-events-toggle {
  display: inline-flex; margin-left: auto;
  border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden;
}
.compass-events-toggle__btn {
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  padding: var(--sp-1) var(--sp-2); border: 0; border-left: 1px solid var(--c-border);
  background: var(--c-surface-raised); color: var(--c-text-muted); cursor: pointer;
}
.compass-events-toggle__btn:first-child { border-left: 0; }
.compass-events-toggle__btn--on { background: var(--c-accent-weak); color: var(--c-accent); }

/* Worth a look: featured cards + collapsible category tail. */
.compass-events-worth { display: flex; flex-direction: column; gap: var(--sp-3); }
.compass-event-featured {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-3); align-items: start;
}
.compass-event-card { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.compass-event-card__top { display: flex; align-items: center; gap: var(--sp-2); }
.compass-event-card__glyph { font-size: var(--fs-md); }
.compass-event-card__title {
  font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-text);
  margin: 0; line-height: 1.25; word-break: break-word;
}
.compass-event-card__chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.compass-event-chip {
  font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-sm);
  background: var(--c-surface-sunken); color: var(--c-text-muted); border: 1px solid var(--c-border);
}
.compass-event-chip--music { color: var(--c-text-subtle); opacity: 0.85; }
.compass-event-card__when { font-size: var(--fs-sm); color: var(--c-text); }
.compass-event-card__where { font-size: var(--fs-xs); color: var(--c-text-muted); word-break: break-word; }
.compass-event-card__foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: 2px; }
.compass-event-card__cad { font-size: var(--fs-xs); color: var(--c-text-muted); display: inline-flex; align-items: center; gap: 4px; }

.compass-events-sectlabel {
  font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-text-subtle); margin-bottom: calc(-1 * var(--sp-1));
}
.compass-events-cat, .compass-events-lane {
  border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden;
}
.compass-events-cat__summary, .compass-events-lane__summary {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); cursor: pointer; background: var(--c-surface-raised);
  list-style: none; font-size: var(--fs-sm);
}
.compass-events-cat__summary::-webkit-details-marker,
.compass-events-lane__summary::-webkit-details-marker { display: none; }
.compass-events-cat__label, .compass-events-lane__label { font-weight: var(--fw-medium); color: var(--c-text); }
.compass-events-cat__count { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-subtle); }
.compass-events-lane__meta { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2); }
.compass-events-lane__count { font-size: var(--fs-xs); color: var(--c-text-subtle); white-space: nowrap; }

.compass-events-rows { padding: 0 var(--sp-3) var(--sp-2); }
.compass-event-row {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) 0; border-top: 1px solid var(--c-border);
}
.compass-event-row:first-child { border-top: 0; }
.compass-event-row__series { font-size: var(--fs-xs); color: var(--c-text-subtle); flex: 0 0 auto; }
.compass-event-row__title {
  font-size: var(--fs-sm); color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compass-event-row__when {
  margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-muted);
  white-space: nowrap; flex: 0 0 auto;
}
.compass-event-row__link { flex: 0 0 auto; font-size: var(--fs-sm); }
.compass-events-more { font-size: var(--fs-xs); color: var(--c-accent); padding: var(--sp-2) 0 0; }
.compass-events-footlink { font-size: var(--fs-sm); }
.compass-link { color: var(--c-accent); font-weight: var(--fw-medium); }

/* --- Conditions on the DETAIL page (reuses the .compass-strip* cells) ------ */

.compass-detail__conditions { display: flex; flex-direction: column; gap: var(--sp-2); }

/* --- Optional sections: availability / concerts teaser / plan history --- */

.compass-detail__sections { display: flex; flex-direction: column; gap: var(--sp-5); }

.compass-concert-teaser {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.compass-concert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-raised);
}

.compass-concert__artist { font-weight: var(--fw-medium); color: var(--c-text); word-break: break-word; }
.compass-concert__meta { font-size: var(--fs-sm); color: var(--c-text-muted); }
.compass-concert__link { font-size: var(--fs-sm); }

/* FEB-25: the "View all concerts" link from the detail teaser to the page. */
.compass-detail__concerts-all {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-accent);
}

/* ---------------------------------------------------------------------------
 * Concerts PAGE (GAP-13/14) — /compass/<user_id>/concerts. Mobile-first;
 * built on the slice-1 tokens; color-independent (tier word + chip both carry
 * meaning); no inline styles.
 * ------------------------------------------------------------------------ */

.compass-concerts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.compass-concerts__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.compass-concerts__back {
  font-size: var(--fs-sm);
  color: var(--c-accent);
  align-self: flex-start;
}

.compass-concerts__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.compass-concerts__title {
  font-size: 1.5rem;
  margin: 0;
}

.compass-concerts__member {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.compass-concerts__digest,
.compass-concerts__list-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.compass-concert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.compass-concert-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.compass-concert-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
}

.compass-concert-card__artist {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  margin: 0;
  word-break: break-word;
}

.compass-concert-card__event {
  font-size: var(--fs-sm);
  color: var(--c-text);
  word-break: break-word;
}

.compass-concert-card__meta {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.compass-concert-card__summary {
  font-size: var(--fs-sm);
  color: var(--c-text);
  word-break: break-word;
}

.compass-concert-card__link { font-size: var(--fs-sm); }

/* Tier chips — color is ADDITIVE; the tier word in the chip carries meaning. */
.compass-concert-card__tier { text-transform: capitalize; }
.compass-concert-card__tier--hot {
  background: var(--c-offline-weak);
  color: var(--c-offline);
  border-color: var(--c-offline);
}
.compass-concert-card__tier--warm {
  background: var(--c-stale-weak);
  color: var(--c-stale);
  border-color: var(--c-stale);
}
.compass-concert-card__tier--followed {
  background: var(--c-accent-weak);
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.compass-concert-card__tier--discover {
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
}

.compass-concert-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.compass-concert-card__writes-off {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.compass-concert-card__detail {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-sunken);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.compass-concert-card__detail-loading {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.compass-concert-card__detail-summary {
  font-size: var(--fs-sm);
  word-break: break-word;
}

.compass-concert-card__detail-rows {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
}

.compass-concert-card__detail-term {
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
}

.compass-concert-card__detail-desc {
  margin: 0;
  word-break: break-word;
}

@media (min-width: 720px) {
  .compass-concerts__title { font-size: 1.7rem; }
}

.compass-detail__history-summary { cursor: pointer; }

.compass-history-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

.compass-history__item { font-size: var(--fs-sm); }
.compass-history__plan { color: var(--c-text); word-break: break-word; }
.compass-history__resp { color: var(--c-text-muted); }

/* --- Responsive: roomier header + side-by-side actions at width -------- */

@media (min-width: 720px) {
  .compass-detail__title { font-size: 1.7rem; }
  .compass-detail__pause { flex-direction: row; align-items: center; }
}

/* ---------------------------------------------------------------------------
 * Preview harness only (src/compass/_preview.html, FEA-20). Scoped so it never
 * affects the real app; lets the standalone preview reveal the shell without
 * app.js (which normally flips #app to flex on sign-in) and without inline
 * styles (CSP style-src 'self').
 * ------------------------------------------------------------------------ */

#app.preview-app { display: flex; }

.preview-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) clamp(1rem, 5vw, 3rem);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-raised);
}

.preview-controls button {
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
}

.preview-controls button:hover { background: var(--c-accent-weak); }

/* ──────────────────────────────────────────────────────────────────────────
 * Waypoint (trips) vertical — WP-06/07. Reuses the Compass design tokens; the
 * freshness badge reuses the .compass-badge component (rendered by freshness.js).
 * ────────────────────────────────────────────────────────────────────────── */
.waypoint-page { display: flex; flex-direction: column; gap: var(--sp-4); }
.waypoint-host { display: contents; }
.waypoint-header,
.waypoint-trip-header { display: flex; flex-direction: column; gap: var(--sp-2); }
.waypoint-h1 { font-size: var(--fs-xl); margin: 0; }
.waypoint-h2 { font-size: var(--fs-lg); margin: 0; }
.waypoint-back { font-size: var(--fs-sm); color: var(--c-text-muted); text-decoration: none; }
.waypoint-back:hover { color: var(--c-accent); }

/* Trip-detail subnav (tabs-as-routes) — mirrors .compass-subnav. Scrolls
   inside itself on narrow screens (the page body never pans). */
.waypoint-subnav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--c-border-strong);
  padding-bottom: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.waypoint-subnav::-webkit-scrollbar { display: none; }
.waypoint-subnav__link {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  text-decoration: none;
  padding: var(--sp-1) 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.waypoint-subnav__link:hover { color: var(--c-accent); }
.waypoint-subnav__link.is-active {
  color: var(--c-text);
  font-weight: 600;
  border-bottom-color: var(--c-accent);
}

.waypoint-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.waypoint-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  text-decoration: none; color: var(--c-text);
}
a.waypoint-card:hover { border-color: var(--c-border-strong); background: var(--c-accent-weak); }
.waypoint-card__head { display: flex; align-items: flex-start; gap: var(--sp-2); }
.waypoint-card__title { flex: 1; font-weight: 600; }
.waypoint-card__meta { font-size: var(--fs-sm); color: var(--c-text-muted); }

.waypoint-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-sunken); color: var(--c-text-muted);
}
.waypoint-pill--planning,
.waypoint-pill--active,
.waypoint-pill--booked { background: var(--c-accent-weak); color: var(--c-accent); border-color: var(--c-accent); }
.waypoint-pill--ok      { background: var(--c-live-weak);    color: var(--c-sev-high); border-color: var(--c-live); }
.waypoint-pill--watch,
.waypoint-pill--stale   { background: var(--c-stale-weak);   color: var(--c-sev-med);  border-color: var(--c-stale); }
.waypoint-pill--action  { background: var(--c-offline-weak); color: var(--c-offline);  border-color: var(--c-offline); }
.waypoint-pill--flight,
.waypoint-pill--lodging { background: var(--c-accent-weak); color: var(--c-accent); border-color: var(--c-accent); }

.waypoint-filters,
.waypoint-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.waypoint-chip {
  font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-sunken);
  color: var(--c-text-muted); cursor: pointer;
}
.waypoint-chip--on { background: var(--c-accent-weak); color: var(--c-accent); border-color: var(--c-accent); }
.waypoint-chip--danger { background: var(--c-offline-weak); color: var(--c-offline); border-color: var(--c-offline); }
.waypoint-chip[disabled] { opacity: 0.6; cursor: default; }
/* Async wishlist research in flight (queued/running). */
.waypoint-chip--busy {
  cursor: default; color: var(--c-accent);
  background: var(--c-accent-weak); border-color: var(--c-accent);
  animation: waypoint-pulse 1.2s ease-in-out infinite;
}
@keyframes waypoint-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .waypoint-chip--busy { animation: none; } }

.waypoint-section {
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
}
.waypoint-section__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.waypoint-section__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.waypoint-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.waypoint-dest { display: flex; flex-direction: column; gap: var(--sp-1); }
/* Push the per-leg Remove control to the end of its row; keep its two-step
   confirm buttons inline. */
.waypoint-dest__remove { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1); }
.waypoint-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.waypoint-row__name { font-weight: 600; }
.waypoint-row__meta { font-size: var(--fs-sm); color: var(--c-text-muted); }
.waypoint-list { margin: 0; padding-left: var(--sp-4); }
.waypoint-event { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.waypoint-event__title { font-weight: 600; }
.waypoint-utag { font-size: var(--fs-xs); color: var(--c-text-subtle); }
.waypoint-disclaimer { font-size: var(--fs-xs); color: var(--c-stale); }
.waypoint-verdict { margin-top: var(--sp-2); }

.waypoint-budget-bar {
  height: 6px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--c-surface-sunken); border: 1px solid var(--c-border);
}
.waypoint-budget-bar__fill { height: 100%; background: var(--c-live); }
.waypoint-budget-bar__fill--watch  { background: var(--c-stale); }
.waypoint-budget-bar__fill--action { background: var(--c-offline); }

.waypoint-travel-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  background: var(--c-accent-weak); border: 1px solid var(--c-accent);
}

.waypoint-create { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.waypoint-edit { margin-top: var(--sp-1); }
.waypoint-edit__summary {
  font-size: var(--fs-sm); color: var(--c-accent);
  cursor: pointer; width: fit-content;
}
.waypoint-edit .waypoint-create { margin-top: var(--sp-2); }
.waypoint-check {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: 0.9em; color: var(--c-text-muted); user-select: none;
}
.waypoint-status { display: inline-flex; align-items: center; gap: var(--sp-2); }
.waypoint-input {
  font-size: 16px; padding: var(--sp-1) var(--sp-2);   /* MOB-03/G6: no iOS zoom-on-focus */
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
}
.waypoint-btn {
  font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); cursor: pointer;
}
.waypoint-btn:hover { background: var(--c-accent-weak); }
.waypoint-btn--primary { background: var(--c-accent); color: var(--c-accent-contrast); border-color: var(--c-accent); }
.waypoint-btn--primary:hover { filter: brightness(1.05); background: var(--c-accent); }
.waypoint-note { font-size: var(--fs-xs); color: var(--c-text-muted); }
.waypoint-note--error { color: var(--c-offline); }
.waypoint-empty {
  font-size: var(--fs-sm); color: var(--c-text-muted);
  border: 1px dashed var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); text-align: center;
}
.waypoint-banner {
  font-size: var(--fs-sm); color: var(--c-stale);
  background: var(--c-stale-weak); border: 1px solid var(--c-stale);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}

/* ---------------------------------------------------------------------------
 * Weather tile (.wx-*) — proximity-shaped forecast cards (waypoint v1.30).
 * Hourly strip scrolls inside the card; the [Temp|Precip|Wind] toggle flips a
 * wx-hourly--<metric> modifier so exactly one value row shows; daily rows put
 * lo–hi range bars on one shared per-card temperature scale (budget-bar kin).
 * ------------------------------------------------------------------------ */
.waypoint-grid--wx {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.wx-card { gap: var(--sp-2); }

.wx-head { display: flex; align-items: center; gap: var(--sp-3); }
.wx-head__temp {
  font-size: 2rem; font-weight: var(--fw-bold); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wx-head__cond { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wx-head__word { font-weight: var(--fw-medium); font-size: var(--fs-sm); text-transform: capitalize; }
.wx-head__hilo {
  font-size: var(--fs-xs); color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.wx-icon { font-size: 1rem; line-height: 1; }
.wx-icon--lg { font-size: 1.8rem; }

.wx-alert {
  display: flex; align-items: baseline; gap: var(--sp-1);
  font-size: var(--fs-xs); color: var(--c-stale);
  background: var(--c-stale-weak); border: 1px solid var(--c-stale);
  border-radius: var(--r-md); padding: var(--sp-1) var(--sp-2);
}

.wx-hourly__date {
  font-size: var(--fs-xs); color: var(--c-text-subtle);
  margin-bottom: calc(-1 * var(--sp-1));
}
.wx-hourly-wrap {
  overflow-x: auto;
  margin: 0 calc(-1 * var(--sp-2)); padding: 0 var(--sp-2);
}
.wx-hourly { display: flex; gap: var(--sp-1); min-width: max-content; }
.wx-hour {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 42px; padding: var(--sp-1) 2px; border-radius: var(--r-md);
  font-variant-numeric: tabular-nums;
}
.wx-hour--now { background: var(--c-surface-sunken); }
.wx-hour__h { font-size: var(--fs-xs); color: var(--c-text-subtle); }
.wx-hour__v { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
/* Exactly one value row per strip mode. */
.wx-hourly--t .wx-hour__v--p, .wx-hourly--t .wx-hour__v--w,
.wx-hourly--p .wx-hour__v--t, .wx-hourly--p .wx-hour__v--w,
.wx-hourly--w .wx-hour__v--t, .wx-hourly--w .wx-hour__v--p { display: none; }
.wx-hourly--p .wx-hour__v--p { color: var(--c-accent); }

.wx-days { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.wx-day {
  display: grid;
  grid-template-columns: 3.2rem 1.3rem 2.6rem 2.2rem minmax(40px, 1fr) 2.2rem;
  align-items: center; gap: var(--sp-1);
  padding: var(--sp-1); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.wx-day--today { background: var(--c-accent-weak); }
.wx-day--today .wx-day__d { color: var(--c-accent); }
.wx-day__d { font-weight: var(--fw-medium); }
.wx-day__pp { font-size: var(--fs-xs); color: var(--c-accent); font-weight: var(--fw-medium); }
.wx-day__lo { color: var(--c-text-muted); text-align: right; }
.wx-day__hi { font-weight: var(--fw-medium); text-align: right; }
.wx-day--outlook { opacity: 0.85; }
.wx-day--outlook .wx-day__typ {
  grid-column: 2 / 7; font-size: var(--fs-xs); color: var(--c-text-subtle);
}

.wx-range {
  position: relative; height: 6px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--c-surface-sunken); border: 1px solid var(--c-border);
}
.wx-range__fill {
  position: absolute; top: 0; bottom: 0;
  border-radius: var(--r-pill); background: var(--c-accent);
}

/* Reservation-inbox linking page (/waypoint/inbox). Each row stacks the
 * booking facts over its decision controls (picker / confirm form). */
.waypoint-link { font-size: var(--fs-sm); margin-left: auto; }
.waypoint-inbox-status {
  font-size: var(--fs-sm); color: var(--c-text-muted);
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}
.waypoint-inbox-row {
  flex-direction: column; align-items: stretch;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.waypoint-row__facts,
.waypoint-row__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.waypoint-confirm {
  border: 1px dashed var(--c-border-strong); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}

/* Expandable day / member rows in the enriched detail sections (WP roadmap #1).
 * Built on <details>/<summary>; the section content otherwise reuses the
 * existing .waypoint-card / -grid / -row / -chip kit above. */
.waypoint-day {
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface-raised); padding: var(--sp-2) var(--sp-3);
}
.waypoint-day + .waypoint-day { margin-top: var(--sp-2); }
.waypoint-day__summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap;
}
.waypoint-day__summary::-webkit-details-marker { display: none; }
.waypoint-day[open] .waypoint-day__summary { margin-bottom: var(--sp-2); }
.waypoint-filters button { font: inherit; }

/* ──────────────────────────────────────────────────────────────────────────
 * Flight (fares) vertical — the third backend. Reuses the Compass design
 * tokens; the freshness badge reuses .compass-badge (rendered by freshness.js).
 * ────────────────────────────────────────────────────────────────────────── */
.flight-page { display: flex; flex-direction: column; gap: var(--sp-4); }
.flight-header { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.flight-h1 { font-size: var(--fs-xl); margin: 0; }
.flight-h2 { font-size: var(--fs-lg); margin: 0; }
.flight-back { font-size: var(--fs-sm); color: var(--c-text-muted); text-decoration: none; }
.flight-back:hover { color: var(--c-accent); }

.flight-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.flight-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  text-decoration: none; color: var(--c-text);
}
a.flight-card:hover { border-color: var(--c-border-strong); background: var(--c-accent-weak); }
.flight-card__head { display: flex; align-items: flex-start; gap: var(--sp-2); }
.flight-card__title { flex: 1; font-weight: 600; }
.flight-card__meta { font-size: var(--fs-sm); color: var(--c-text-muted); }

.flight-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-sunken); color: var(--c-text-muted);
}
.flight-pill--on  { background: var(--c-live-weak);  color: var(--c-sev-high); border-color: var(--c-live); }
.flight-pill--off { background: var(--c-stale-weak); color: var(--c-sev-med);  border-color: var(--c-stale); }

.flight-section {
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
}
.flight-section__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.flight-section__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.flight-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.flight-row__name { font-weight: 600; }
.flight-row__meta { font-size: var(--fs-sm); color: var(--c-text-muted); }
.flight-price { font-weight: 600; min-width: 4.5em; }

.flight-kv {
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); margin: 0;
}
.flight-kv dt { color: var(--c-text-muted); }
.flight-kv dd { margin: 0; }

/* Vector price sparkline. Stretches to the card at any width — the SVG
   carries preserveAspectRatio="none", so bars widen instead of the box
   growing taller. The old text version was one glyph per data point, so
   a 60-point series overflowed the panel and wrecked phone layout. */
.flight-spark {
  display: block; width: 100%; height: 48px; margin-top: var(--sp-2);
}
.flight-spark__bar { fill: var(--c-accent); }
/* Above the p95 scale ceiling: drawn full height, so the colour is the
   only thing saying the true value is off the chart. The footnote under
   it carries the magnitude. */
.flight-spark__bar--over { fill: var(--c-warning); }

/* Fallback for payloads carrying no raw series — assess_buy_timing sends
   a sparkline only. Monospace so the blocks align, and bounded so it can
   never widen the card: a long run scrolls inside its own box. */
.flight-spark-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-sm); letter-spacing: 1px; color: var(--c-accent);
  max-width: 100%; overflow-x: auto; white-space: nowrap;
  overscroll-behavior-x: contain;
}

.flight-note { font-size: var(--fs-xs); color: var(--c-text-muted); }
.flight-utag { font-size: var(--fs-xs); color: var(--c-text-subtle); }
.flight-btn {
  font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); cursor: pointer;
}
.flight-btn:hover { background: var(--c-accent-weak); }
.flight-btn:disabled { opacity: 0.6; cursor: default; }
.flight-btn--danger { color: var(--c-offline); border-color: var(--c-offline); }
.flight-btn--danger:hover { background: var(--c-offline-weak); }
.flight-input {
  font-size: 16px; padding: var(--sp-1) var(--sp-2);   /* MOB-03/G6: no iOS zoom-on-focus */
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
}
.flight-create { border: 1px dashed var(--c-border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.flight-create__summary { cursor: pointer; font-size: var(--fs-sm); color: var(--c-text-muted); }
.flight-create__form {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.flight-create__more { flex-basis: 100%; border-top: 1px dashed var(--c-border); padding-top: var(--sp-2); }
.flight-check {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: 0.9em; color: var(--c-text-muted); user-select: none;
}
.flight-action { display: flex; flex-direction: column; gap: var(--sp-2); }
.flight-action__host { display: flex; flex-direction: column; gap: var(--sp-2); }
.flight-analysis {
  display: flex; flex-direction: column; gap: var(--sp-1);
  border-left: 3px solid var(--c-accent); padding-left: var(--sp-3);
}
.flight-analysis__text { margin: 0; font-size: var(--fs-sm); }
.flight-empty {
  font-size: var(--fs-sm); color: var(--c-text-muted);
  border: 1px dashed var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); text-align: center;
}
.flight-banner {
  font-size: var(--fs-sm); color: var(--c-stale);
  background: var(--c-stale-weak); border: 1px solid var(--c-stale);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Trailhead (vehicles + expeditions) vertical — the fourth backend. Reuses the
 * Compass design tokens; the freshness badge reuses .compass-badge (rendered by
 * freshness.js). No new :root tokens.
 * ────────────────────────────────────────────────────────────────────────── */
.trailhead-page { display: flex; flex-direction: column; gap: var(--sp-4); }
.trailhead-header { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
/* Header vehicle switcher: jump between vehicles from the detail page. */
.trailhead-switch { max-width: 14rem; }
.trailhead-h1 { font-size: var(--fs-xl); margin: 0; }
.trailhead-h2 { font-size: var(--fs-lg); margin: 0; }
.trailhead-h3 { font-size: var(--fs-md); margin: var(--sp-2) 0 0; }
.trailhead-back { font-size: var(--fs-sm); color: var(--c-text-muted); text-decoration: none; }
.trailhead-back:hover { color: var(--c-accent); }
.trailhead-subnav {
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-4);
  border-bottom: 1px solid var(--c-border-strong); padding-bottom: var(--sp-2);
}
.trailhead-subnav__link {
  font-size: var(--fs-sm); color: var(--c-text-muted); text-decoration: none;
  padding: var(--sp-1) 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.trailhead-subnav__link:hover { color: var(--c-accent); }
.trailhead-subnav__link.is-active {
  color: var(--c-text); font-weight: 600; border-bottom-color: var(--c-accent);
}
.trailhead-planmeta { font-size: var(--fs-sm); color: var(--c-text-muted); }
.trailhead-refresh {
  font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-3); margin-left: auto;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); cursor: pointer;
}
.trailhead-refresh:hover { background: var(--c-accent-weak); }

.trailhead-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.trailhead-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  text-decoration: none; color: var(--c-text);
}
a.trailhead-card:hover { border-color: var(--c-border-strong); background: var(--c-accent-weak); }
.trailhead-card__head { display: flex; align-items: flex-start; gap: var(--sp-2); }
.trailhead-card__title { flex: 1; font-weight: 600; }
.trailhead-card__meta { font-size: var(--fs-sm); color: var(--c-text-muted); }

.trailhead-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-sunken); color: var(--c-text-muted);
}
.trailhead-pill--ok       { background: var(--c-live-weak);    color: var(--c-live);    border-color: var(--c-live); }
.trailhead-pill--upcoming { background: var(--c-stale-weak);   color: var(--c-stale);   border-color: var(--c-stale); }
.trailhead-pill--overdue  { background: var(--c-offline-weak); color: var(--c-offline); border-color: var(--c-offline); }
.trailhead-pill--plan     { background: var(--c-accent-weak);  color: var(--c-accent);  border-color: var(--c-accent); }
/* Archived (and unknown) route statuses: the muted base look, made explicit. */
.trailhead-pill--muted    { background: var(--c-surface-sunken); color: var(--c-text-muted); border-color: var(--c-border); }

.trailhead-section {
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
}
.trailhead-section__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.trailhead-section__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.trailhead-src { font-size: var(--fs-xs); color: var(--c-text-subtle); margin-left: auto; }

.trailhead-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.trailhead-row__name { font-weight: 600; }
.trailhead-row__meta { font-size: var(--fs-sm); color: var(--c-text-muted); }
.trailhead-row__note { flex-basis: 100%; font-size: var(--fs-sm); color: var(--c-text-muted); }
.trailhead-warning { font-size: var(--fs-sm); color: var(--c-warning); }
/* Maintenance-due tiles: one card per schedule item in the shared grid (see
   .trailhead-grid / .trailhead-card). Overdue/upcoming cards are tinted — the
   status pill still carries a text label (word, plus a ⚠ glyph when overdue),
   so color stays additive, never the sole signal. The write collapsibles (Log
   service / Edit interval) stack full-width in the card foot; the card padding
   sets them apart, so no left inset. */
.trailhead-maint-card { gap: var(--sp-1); }
.trailhead-maint-card--upcoming { border-color: var(--c-stale);   background: var(--c-stale-weak); }
.trailhead-maint-card--overdue  { border-color: var(--c-offline); background: var(--c-offline-weak); }
.trailhead-maint-card__acts { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-1); }

.trailhead-board__row { display: flex; align-items: center; gap: var(--sp-2); }
.trailhead-board__name { flex: 1; font-size: var(--fs-sm); }

/* Route-management tiles: the title link + stacked action collapsibles in the
   tile foot (mirrors the maintenance tiles). Archived tiles carry [hidden]
   until the toggle reveals them. */
.trailhead-route-card[hidden] { display: none; }
.trailhead-route-card__acts { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-1); }
.trailhead-route-card__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.trailhead-route-act__inline { display: inline-flex; align-items: center; gap: var(--sp-1); }
a.trailhead-card__title { color: var(--c-text); text-decoration: none; }
a.trailhead-card__title:hover { color: var(--c-accent); text-decoration: underline; }

/* Catalog tiles: the lazy detail body + the inline SVG path preview. The
   polyline's geometry rides presentation attributes (CSP-safe); only the
   color lives here. */
.trailhead-catalog-card__detail { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.trailhead-catalog-card__text { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.trailhead-track { width: 100%; height: auto; background: var(--c-surface-sunken); border-radius: var(--r-md); }
.trailhead-track__line { stroke: var(--c-accent); stroke-width: 2; }

/* Service history: newest-first record cards, each expandable to its
   itemized "what was done". A hand-logged and an inbox-imported record read
   the same; the imported ones carry a text provenance tag + a subtle accent
   edge (additive to the tag — never color alone). Records past the first few
   carry [hidden] until the "Show older" toggle reveals them. */
.trailhead-service-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.trailhead-service-card { gap: var(--sp-1); }
.trailhead-service-card[hidden] { display: none; }
.trailhead-service-card--inbox { border-left: 3px solid var(--c-accent); }
.trailhead-card__note { font-size: var(--fs-sm); color: var(--c-text-muted); }
.trailhead-service-more { margin-top: var(--sp-1); }
.trailhead-service-detail { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.trailhead-service-items { margin: 0; padding-left: var(--sp-4); font-size: var(--fs-sm); color: var(--c-text); }
.trailhead-service-items li { margin: 2px 0; }

.trailhead-kv { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-sm); }
.trailhead-kv__k { color: var(--c-text-muted); min-width: 7em; }
.trailhead-kv__v { color: var(--c-text); }

.trailhead-bar { height: 8px; background: var(--c-surface-sunken); border-radius: var(--r-pill); overflow: hidden; flex-basis: 100%; }
.trailhead-bar__fill { height: 100%; background: var(--c-accent); }
.trailhead-tire { display: flex; flex-direction: column; gap: var(--sp-1); }
.trailhead-tire__head { display: flex; align-items: center; gap: var(--sp-2); }

.trailhead-recall, .trailhead-alert {
  display: flex; flex-direction: column; gap: var(--sp-1);
  border-left: 3px solid var(--c-offline); padding-left: var(--sp-3);
}
.trailhead-alert { border-left-color: var(--c-stale); }
.trailhead-recall__head, .trailhead-alert__head { display: flex; align-items: center; gap: var(--sp-2); }
.trailhead-recall__campaign, .trailhead-alert__event { font-weight: 600; }
.trailhead-recall__component { font-size: var(--fs-sm); color: var(--c-text-muted); }
.trailhead-recall__text, .trailhead-alert__headline { margin: 0; font-size: var(--fs-sm); }
/* Per-VIN NHTSA lookup in the Recalls header — keep it on one line. */
.trailhead-recall__lookup { white-space: nowrap; }

.trailhead-vin { display: inline-flex; align-items: center; gap: var(--sp-2); }
.trailhead-vin__value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.trailhead-vin__toggle {
  font-size: var(--fs-xs); padding: 1px var(--sp-2); border-radius: var(--r-sm);
  border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text-muted); cursor: pointer;
}
.trailhead-vin__toggle:hover { color: var(--c-accent); }

.trailhead-empty {
  font-size: var(--fs-sm); color: var(--c-text-muted);
  border: 1px dashed var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); text-align: center;
}
.trailhead-banner {
  font-size: var(--fs-sm); color: var(--c-stale);
  background: var(--c-stale-weak); border: 1px solid var(--c-stale);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}

/* Phase-2 write forms (dormant until ALLOW_WRITES=1). */
.trailhead-create { border: 1px dashed var(--c-border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.trailhead-create__summary { cursor: pointer; font-size: var(--fs-sm); color: var(--c-text-muted); }
.trailhead-create__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
/* A step in the two-step add-vehicle flow (VIN lookup, then the full form). */
.trailhead-create__step { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); flex-basis: 100%; }
/* A link-styled button (the "enter manually" escape hatch). */
.trailhead-link { background: none; border: none; padding: 0; color: var(--c-accent); font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; }
.trailhead-redecode { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* A field = a visible label stacked above its input (the <label> also supplies
 * the accessible name). Fields are the flex children of the form row. */
.trailhead-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.trailhead-field__label { font-size: var(--fs-xs); color: var(--c-text-muted); }
.trailhead-field--wide { flex-basis: 100%; }
.trailhead-input {
  font-size: 16px; padding: var(--sp-1) var(--sp-2);   /* 16px: no iOS zoom-on-focus */
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
}
textarea.trailhead-input { width: 100%; box-sizing: border-box; min-height: 3.5rem; font-family: inherit; }
.trailhead-btn {
  font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); cursor: pointer;
}
.trailhead-btn:hover { background: var(--c-accent-weak); }
.trailhead-btn:disabled { opacity: 0.6; cursor: default; }
.trailhead-note { font-size: var(--fs-xs); color: var(--c-text-muted); }
/* Contacts manager (vehicle-contacts §6.3): rows + the shared add/edit form. */
.trailhead-contacts { display: flex; flex-direction: column; gap: var(--sp-2); }
.trailhead-contact { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.trailhead-contact__email { font-size: var(--fs-sm); }
.trailhead-contact__role { font-size: var(--fs-xs); color: var(--c-text-muted); }
.trailhead-contacts__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); }
.trailhead-contacts__form [hidden] { display: none; }
/* Garage quick log: vehicle picker + the three log forms in one block. */
.trailhead-quicklog { display: flex; flex-direction: column; gap: var(--sp-2); }
.trailhead-quicklog__pick { max-width: 16rem; }
/* Maintenance-inbox review queue (maintenance-inbox §11.2): proposal cards. */
.trailhead-inbox__card {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3); border: 1px solid var(--c-border);
  border-radius: var(--r-md); background: var(--c-surface);
}
.trailhead-inbox__card + .trailhead-inbox__card { margin-top: var(--sp-2); }
.trailhead-inbox__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.trailhead-inbox__vehicle { font-size: var(--fs-sm); color: var(--c-text-muted); }
.trailhead-inbox__summary { font-size: var(--fs-sm); }
.trailhead-inbox__meta { font-size: var(--fs-xs); color: var(--c-text-muted); }
.trailhead-inbox__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.trailhead-inbox__pick { max-width: 16rem; }
.trailhead-inbox__note { font-size: var(--fs-xs); color: var(--c-text-muted); min-height: 1em; }
/* Correct-before-apply: prefilled = parsed, empty = "not parsed". */
.trailhead-inbox__fields { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.trailhead-inbox__fields .trailhead-input { max-width: 11rem; }
.trailhead-inbox__effect { font-size: var(--fs-xs); color: var(--c-text-muted); font-style: italic; }
/* One-shot outcome line after an action (the card left the queue). */
.trailhead-inbox__flash {
  font-size: var(--fs-sm); color: var(--c-ok, var(--c-text));
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-2); background: var(--c-surface);
}
.trailhead-btn--primary { border-color: var(--c-accent); color: var(--c-accent); }
.trailhead-pill--doc      { background: var(--c-accent-weak);  color: var(--c-accent);  border-color: var(--c-accent); }
.trailhead-pill--unlinked { background: var(--c-stale-weak);   color: var(--c-stale);   border-color: var(--c-stale); }

/* ===========================================================================
 * Mobile (≤639px) — Phase A papercuts (mobile-optimization-design.md §5.4/§5.7).
 *   MOB-03: promote interactive chrome to ≥44pt touch targets (Apple HIG) by
 *           growing the hit area, not the visual size.
 *   MOB-04: keep wide markdown tables inside a horizontal scroll region so they
 *           never force a page-wide overflow on a phone.
 * ======================================================================== */
@media (max-width: 639.98px) {
  #primary-nav a,
  #sign-out,
  .compass-btn,
  .waypoint-btn,
  .waypoint-chip,
  .compass-subnav__link,
  .waypoint-subnav__link,
  .compass-alertpill,
  .compass-week-digest__summary,
  button.compass-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* MOB-03 for the 22px member-initial chips: grow the HIT AREA, not the
     visual — an invisible padded halo brings the target to ~44px. */
  .compass-music__member { position: relative; }
  .compass-music__member::after {
    content: "";
    position: absolute;
    inset: -11px;
  }
  /* Five tab labels exceed 375px: the subnav scrolls inside itself (the page
     body never pans) with tighter gaps, sticks under the sticky site header,
     and fades at the right edge as a scroll affordance. */
  .compass-subnav,
  .waypoint-subnav {
    gap: var(--sp-3);
    position: sticky;
    top: 0;
    z-index: calc(var(--z-banner) - 1);
    background: var(--c-surface);
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }

  main#content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===========================================================================
 * Bosun vertical — the boat (seventh backend). Pure token consumers, no new
 * tokens. Same conventions as the trailhead/points blocks: inert text only,
 * status pills carry glyph + word (color additive), cards on raised surface.
 * ======================================================================== */
.bosun-page { display: flex; flex-direction: column; gap: var(--sp-4); }

.bosun-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.bosun-h1 { margin: 0; font-size: var(--fs-xl); }
.bosun-h2 { margin: 0; font-size: var(--fs-lg); }
.bosun-muted { color: var(--c-text-muted); font-size: var(--fs-sm); }

.bosun-subnav {
  display: flex;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
}
.bosun-subnav__link {
  padding: var(--sp-2) 0;
  color: var(--c-text-muted);
  text-decoration: none;
  font-weight: var(--fw-medium);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.bosun-subnav__link:hover { color: var(--c-text); text-decoration: none; }
.bosun-subnav__link.is-active {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.bosun-section {
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}
.bosun-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.bosun-section__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.bosun-empty { color: var(--c-text-subtle); font-size: var(--fs-sm); }
.bosun-banner {
  background: var(--c-stale-weak);
  color: var(--c-stale);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
}

/* Status pills: glyph + word, color additive (a11y charter). */
.bosun-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  border-radius: var(--r-pill);
  padding: 2px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  flex: 0 0 auto;
  white-space: nowrap;
}
.bosun-pill--ok       { background: var(--c-live-weak);    color: var(--c-live); }
.bosun-pill--upcoming { background: var(--c-stale-weak);   color: var(--c-stale); }
.bosun-pill--overdue  { background: var(--c-offline-weak); color: var(--c-offline); }
.bosun-pill--unknown  { background: var(--c-surface-sunken); color: var(--c-text-subtle); }

/* The dimension chip: WHY an item fired (HOURS/CALENDAR/SEASON/EVENT). */
.bosun-dim {
  flex: 0 0 auto;
  align-self: center;
  border-radius: var(--r-sm);
  padding: 2px 6px;
  font-size: 0.58rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.07em;
  background: var(--c-surface-sunken);
  color: var(--c-text-subtle);
}
.bosun-dim--hot { background: var(--c-offline-weak); color: var(--c-offline); }

/* Due / warranty / contact / schedule rows. */
.bosun-due {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--c-border);
}
.bosun-due:first-child { border-top: 0; padding-top: 0; }
.bosun-due__what { min-width: 0; flex: 1 1 auto; }
.bosun-due__name { font-weight: var(--fw-medium); }
.bosun-due__detail { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Season banner. */
.bosun-season {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-card);
}
.bosun-season--ok { background: var(--c-live-weak); border-color: transparent; }

/* Engine cards. */
.bosun-engines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.bosun-engine {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
.bosun-engine__head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  align-items: baseline;
}
.bosun-engine__pos {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--c-text-subtle);
}
.bosun-engine__hours {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: var(--sp-1);
}
.bosun-engine__sub { color: var(--c-text-muted); font-size: var(--fs-xs); }
.bosun-engine--detail { border: 0; padding: var(--sp-2) 0; }

/* Service records. */
.bosun-service {
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.bosun-service:first-child { border-top: 0; padding-top: 0; }
.bosun-service__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.bosun-service__date {
  color: var(--c-text-subtle);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.bosun-service__name { font-weight: var(--fw-medium); }
.bosun-service__meta { color: var(--c-text-muted); font-size: var(--fs-sm); }
.bosun-service__items {
  margin: 0;
  padding-left: var(--sp-5);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.bosun-tag {
  border-radius: var(--r-sm);
  padding: 1px 6px;
  font-size: var(--fs-xs);
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
}
.bosun-tag--src { background: var(--c-accent-weak); color: var(--c-accent); }

/* Key/value identity rows. */
.bosun-kv { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); }
.bosun-kv__k { flex: 0 0 9.5rem; color: var(--c-text-subtle); }
.bosun-kv__v { color: var(--c-text); overflow-wrap: anywhere; }

/* Footer links out. */
.bosun-footer { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.bosun-link { color: var(--c-accent); text-decoration: none; }
.bosun-link:hover { text-decoration: underline; }

/* Quick-action write forms (collapsed <details>; dormant until enabled). */
.bosun-qa { display: flex; flex-direction: column; gap: var(--sp-2); }
.bosun-form {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.bosun-form__summary {
  cursor: pointer;
  font-weight: var(--fw-medium);
  color: var(--c-accent);
}
.bosun-form__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  align-items: end;
}
.bosun-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bosun-field__label { font-size: var(--fs-xs); color: var(--c-text-subtle); }
.bosun-input {
  font: inherit;
  font-size: 16px; /* MOB-03: no input-zoom on phones */
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-raised);
  color: var(--c-text);
  min-width: 0;
}
.bosun-btn {
  font: inherit;
  font-weight: var(--fw-medium);
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  cursor: pointer;
  min-height: 44px; /* MOB-03 touch target */
}
.bosun-btn[disabled] { opacity: 0.55; cursor: default; }
.bosun-note { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ===========================================================================
 * Mobile navigation — bottom tab bar + condensed header (MOB-05 §5.3).
 * Desktop (≥640px) is unchanged: the inline #primary-nav stays and the tab bar
 * is hidden. Below 640px the inline nav folds away, the header becomes a sticky
 * condensed bar (brand + sign-out), and a thumb-reachable, safe-area-aware
 * bottom tab bar takes over. Icons are inline SVG (currentColor) — no webfont,
 * CSP-safe, no new assets.
 * ======================================================================== */
#tab-bar { display: none; }

.tab__icon  { width: 24px; height: 24px; flex: 0 0 auto; }
.tab__label { line-height: 1; }

@media (max-width: 639.98px) {
  #primary-nav { display: none; }             /* fold the inline header nav */
  #user-display { display: none; }            /* condensed header = brand + sign-out */

  #app > header {
    position: sticky;
    top: 0;
    z-index: var(--z-banner);
  }
  /* With the inline nav gone, push the sign-out cluster to the right edge. */
  .header-user { margin-left: auto; }

  #tab-bar {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-banner);
    background: var(--c-surface-raised);
    border-top: 1px solid var(--c-border);
    padding-bottom: env(safe-area-inset-bottom);   /* clear the home indicator */
  }
  #tab-bar a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;                          /* > 44pt touch target */
    padding: 6px 2px 8px;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-decoration: none;
  }
  #tab-bar a:hover  { text-decoration: none; }
  #tab-bar a.active { color: var(--c-accent); }

  /* The "More" tab renders the shared disclosure as a bottom sheet. The
     trigger mirrors a tab link exactly (column icon + label, same target). */
  #tab-bar .nav-more {
    flex: 1 1 0;
    display: flex;
    position: static;              /* sheet positions against the viewport */
  }
  #tab-bar .nav-more__trigger {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 6px 2px 8px;
    border-radius: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
  }
  #tab-bar .nav-more__trigger:hover { background: none; }
  #tab-bar .nav-more__trigger.active {
    background: none;
    color: var(--c-accent);
  }

  .nav-more__menu--sheet {
    position: fixed;
    top: auto;
    left: var(--sp-3, 12px);
    right: var(--sp-3, 12px);
    bottom: calc(52px + env(safe-area-inset-bottom) + 10px);
    min-width: 0;
    padding: 8px;
  }
  /* Sheet rows: icon beside label. The #tab-bar a column rule outranks a
     bare class selector, so scope with the id to win flex-direction back. */
  #tab-bar .nav-more__menu--sheet a {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.6rem;
    min-height: 44px;              /* MOB-03 touch target */
    padding: 0.5rem 0.6rem;
    font-size: 0.95rem;
  }

  /* Keep page content clear of the fixed bar. */
  main#content {
    padding-bottom: calc(52px + env(safe-area-inset-bottom) + var(--sp-4));
  }
}

/* ===========================================================================
 * Muse (/muse) — the fifth backend's vertical (MU-D). Mirrors the flight
 * vocabulary with a muse-* prefix; state badges are color-independent
 * (word + tint), matching the established a11y discipline.
 * ======================================================================== */
.muse-page { display: flex; flex-direction: column; gap: var(--sp-4); }
.muse-header { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.muse-h1 { font-size: var(--fs-xl); margin: 0; }
.muse-h2 { font-size: var(--fs-lg); margin: 0; }

.muse-banner {
  font-size: var(--fs-sm); color: var(--c-stale);
  background: var(--c-stale-weak); border: 1px solid var(--c-stale);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}
.muse-empty {
  font-size: var(--fs-sm); color: var(--c-text-muted);
  border: 1px dashed var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); text-align: center;
}

/* Pipeline chips (stats + status filter) */
.muse-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.muse-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  padding: 4px var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-raised);
  color: var(--c-text);
}
.muse-chip:hover { background: var(--c-accent-weak); }
.muse-chip.is-active {
  background: var(--c-accent); color: var(--c-accent-contrast);
  border-color: var(--c-accent);
}
.muse-chip__count { font-size: var(--fs-xs); opacity: 0.8; }

/* "Researching now" strip */
.muse-runs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm);
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}
.muse-runs__title { color: var(--c-text-muted); }
.muse-runs__item { color: var(--c-accent); text-decoration: none; }
.muse-runs__item:hover { text-decoration: underline; }

/* Filter bar */
.muse-filterbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-2); }
.muse-search {
  flex: 1 1 220px; min-width: 160px;
  font: inherit; padding: 0.4rem 0.6rem;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface-raised); color: var(--c-text);
}
.muse-filter { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--c-text-muted); }
.muse-filter__select {
  font: inherit; font-size: var(--fs-sm); padding: 0.35rem 0.4rem;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface-raised); color: var(--c-text);
}
.muse-btn {
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  padding: 0.4rem 0.8rem; border-radius: var(--r-md);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface-raised); color: var(--c-text);
}
.muse-btn:hover:not(:disabled) { background: var(--c-accent-weak); }
.muse-btn:disabled { opacity: 0.5; cursor: default; }

/* Idea cards */
.muse-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.muse-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  text-decoration: none; color: var(--c-text);
}
.muse-card:hover { border-color: var(--c-accent); text-decoration: none; }
.muse-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.muse-card__title { font-weight: 600; }
.muse-card__meta { font-size: var(--fs-sm); color: var(--c-text-muted); }
.muse-card__snippet { font-size: var(--fs-sm); color: var(--c-text-muted); font-style: italic; }
.muse-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.muse-tag {
  font-size: var(--fs-xs); padding: 1px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-sunken);
  color: var(--c-text-muted);
}

/* State badges (word + tint; never color-only) */
.muse-state {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-sunken);
  color: var(--c-text-muted); white-space: nowrap;
}
.muse-state--researching, .muse-state--drafting { background: var(--c-stale-weak); color: var(--c-sev-med); border-color: var(--c-stale); }
.muse-state--documented { background: var(--c-live-weak); color: var(--c-sev-high); border-color: var(--c-live); }
.muse-state--failed { background: var(--c-sev-high-weak, var(--c-stale-weak)); color: var(--c-sev-high); border-color: var(--c-sev-high); }

/* Pagination */
.muse-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.muse-pager__label { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Muse detail + RFC reader (MU-E) */
.muse-back { font-size: var(--fs-sm); color: var(--c-text-muted); text-decoration: none; }
.muse-back:hover { color: var(--c-accent); }
.muse-section {
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.muse-section__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.muse-body { white-space: pre-wrap; font-size: var(--fs-sm); }

.muse-q { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); }
.muse-q:last-child { border-bottom: none; }
.muse-q__head { display: flex; align-items: center; gap: var(--sp-2); }
.muse-q__text { font-weight: 600; font-size: var(--fs-sm); }
.muse-q__blocking {
  font-size: var(--fs-xs); padding: 1px var(--sp-2); border-radius: var(--r-pill);
  background: var(--c-stale-weak); color: var(--c-sev-med); border: 1px solid var(--c-stale);
}
.muse-q__rationale { font-size: var(--fs-xs); color: var(--c-text-muted); }
.muse-q__answer { font-size: var(--fs-sm); }
.muse-q__unanswered { font-size: var(--fs-xs); color: var(--c-sev-med); font-style: italic; }

.muse-source { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.muse-source__prov { font-size: var(--fs-xs); color: var(--c-text-muted); }
.muse-source__summary { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Markdown surfaces (framing + RFC) — rendered via safe.js renderMarkdown */
.muse-md { font-size: var(--fs-sm); line-height: 1.55; overflow-wrap: anywhere; }
.muse-md h1, .muse-md h2, .muse-md h3 { margin: var(--sp-3) 0 var(--sp-1); }
.muse-md pre { overflow-x: auto; background: var(--c-surface-sunken); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.muse-md table { display: block; overflow-x: auto; }
.muse-rfc { background: var(--c-surface-raised); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4); }

/* Muse write controls (MU-F) */
.muse-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.muse-form__input {
  font: inherit; font-size: var(--fs-sm); padding: 0.4rem 0.6rem;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface-raised); color: var(--c-text);
  min-width: 160px;
}
.muse-form__status { font-size: var(--fs-xs); color: var(--c-sev-med); min-height: 1em; }
.muse-tag__x {
  font: inherit; font-size: var(--fs-xs); margin-left: 4px;
  background: none; border: none; cursor: pointer; color: var(--c-text-muted);
  padding: 0 2px;
}
.muse-tag__x:hover { color: var(--c-sev-high); }
.muse-btn--danger { border-color: var(--c-sev-high); color: var(--c-sev-high); }
.muse-btn--danger:hover:not(:disabled) { background: var(--c-stale-weak); }

/* Muse capture + enrich (MU-H) */
.muse-capture textarea { resize: vertical; }
.muse-check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.muse-similar { display: flex; flex-direction: column; gap: 2px; }
.muse-form__status--ok { color: var(--c-sev-high); display: flex; gap: var(--sp-1); flex-wrap: wrap; }

/* ===========================================================================
 * Points (/points) — the sixth backend's vertical (S-5). Mirrors the muse /
 * flight vocabulary with a points-* prefix, reusing the existing tokens.
 *
 * A11Y: every badge on this surface is COLOR-INDEPENDENT. The CPP verdict
 * pills and the bonus-urgency tints each render an icon AND a word ("Beats
 * baseline", "Ending soon", "Ratio"), so the meaning survives without color
 * — the same discipline as the freshness badge and the muse state badges.
 * ======================================================================== */
.points-page { display: flex; flex-direction: column; gap: var(--sp-4); }
.points-header { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.points-h1 { font-size: var(--fs-xl); margin: 0; }
.points-h2 { font-size: var(--fs-lg); margin: 0; }
.points-h3 { font-size: var(--fs-md); margin: 0; }
.points-muted { font-size: var(--fs-sm); color: var(--c-text-muted); }
.points-link { color: var(--c-accent); text-decoration: none; }
.points-link:hover { text-decoration: underline; }
.points-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs); padding: 1px var(--sp-2);
  border-radius: var(--r-md); background: var(--c-surface-sunken);
  border: 1px solid var(--c-border);
}

.points-banner {
  font-size: var(--fs-sm); color: var(--c-stale);
  background: var(--c-stale-weak); border: 1px solid var(--c-stale);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}
.points-empty {
  font-size: var(--fs-sm); color: var(--c-text-muted);
  border: 1px dashed var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); text-align: center;
}
/* Explanatory notes (quota / no_key / public-offers disclaimer / CLI footnote).
   These are NOT failures — styled as information, never as errors. */
.points-note {
  font-size: var(--fs-sm); color: var(--c-text-muted);
  background: var(--c-surface-sunken); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}
.points-note--pinned { color: var(--c-text); }
.points-footnote { margin-top: var(--sp-2); }

/* Sections + layout */
.points-section {
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.points-section__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }
.points-section__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.points-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.points-footer { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-sm); }

/* Rows (bonuses, changes, bonus history) */
.points-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border);
}
.points-row:last-child { border-bottom: none; }
.points-row--tight { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.points-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.points-row__foot { font-size: var(--fs-xs); }
.points-pct { font-weight: 600; }

.points-tag {
  font-size: var(--fs-xs); padding: 1px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-sunken);
  color: var(--c-text-muted); white-space: nowrap;
}
.points-pill {
  font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-sunken);
  color: var(--c-text-muted); white-space: nowrap;
}
.points-pill--on { background: var(--c-live-weak); color: var(--c-sev-high); border-color: var(--c-live); }

/* CPP verdict badge — icon + word + value; the tint is decoration only. */
.points-cpp {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-sunken);
  color: var(--c-text-muted); white-space: nowrap;
}
.points-cpp--good { background: var(--c-live-weak); color: var(--c-sev-high); border-color: var(--c-live); }
.points-cpp--warn { background: var(--c-stale-weak); color: var(--c-sev-med); border-color: var(--c-stale); }
.points-cpp--bad { background: var(--c-sev-high-weak, var(--c-stale-weak)); color: var(--c-sev-high); border-color: var(--c-sev-high); }
.points-cpp__value { opacity: 0.85; }

/* Bonus-urgency badge — same discipline: the WORD carries the urgency. */
.points-expiry {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-sunken);
  color: var(--c-text-muted); white-space: nowrap;
}
.points-expiry--urgent { background: var(--c-stale-weak); color: var(--c-sev-med); border-color: var(--c-stale); }
.points-expiry--expired { opacity: 0.7; text-decoration: line-through; }
.points-expiry__text { opacity: 0.85; }

/* Partner-change chips */
.points-change {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-sunken);
  color: var(--c-text-muted); white-space: nowrap;
}
.points-change--added { background: var(--c-live-weak); color: var(--c-sev-high); border-color: var(--c-live); }
.points-change--removed { background: var(--c-sev-high-weak, var(--c-stale-weak)); color: var(--c-sev-high); border-color: var(--c-sev-high); }
.points-change--ratio_changed, .points-change--status_changed { background: var(--c-stale-weak); color: var(--c-sev-med); border-color: var(--c-stale); }

/* Report view (shared by the dashboard and the reports page) */
.points-report { display: flex; flex-direction: column; gap: var(--sp-3); }
.points-report__meta { font-size: var(--fs-xs); color: var(--c-text-muted); }
.points-report__summary { display: flex; flex-direction: column; gap: var(--sp-2); }
.points-summary__p { font-size: var(--fs-sm); line-height: 1.55; margin: 0; }
.points-report__recs, .points-report__matches { display: flex; flex-direction: column; gap: var(--sp-2); }
.points-rec {
  display: flex; flex-direction: column; gap: var(--sp-1);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.points-rec__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.points-rec__rank { font-weight: 700; color: var(--c-text-muted); }
.points-rec__title { font-weight: 600; }
.points-rec__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.points-rec__rationale { font-size: var(--fs-sm); margin: 0; }
.points-rec__sources { font-size: var(--fs-xs); display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* Wishlist matches + seats.aero availability rows */
.points-match {
  display: flex; flex-direction: column; gap: var(--sp-1);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.points-match__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.points-match__wish { font-weight: 600; }
.points-match__meta, .points-match__why { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }
.points-book {
  font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface-sunken);
  color: var(--c-text-muted); white-space: nowrap;
}
.points-book--yes { background: var(--c-live-weak); color: var(--c-sev-high); border-color: var(--c-live); }
.points-avail { display: flex; flex-direction: column; gap: 2px; }
.points-avail__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.points-avail__head { font-weight: 600; }
.points-avail__detail { color: var(--c-text-muted); }
.points-availability { display: flex; flex-direction: column; gap: var(--sp-2); }
.points-availability__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* Wish cards */
.points-wish {
  display: flex; flex-direction: column; gap: var(--sp-1);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.points-wish--pending { opacity: 0.6; }
.points-wish__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.points-wish__id { font-weight: 600; }
.points-wish__route { font-size: var(--fs-sm); }
.points-wish__meta, .points-wish__partners { font-size: var(--fs-sm); color: var(--c-text-muted); }
.points-wish__notes { font-size: var(--fs-sm); color: var(--c-text-muted); font-style: italic; margin: 0; }

/* Partner detail */
.points-profile, .points-cadence, .points-verdict-block { display: flex; flex-direction: column; gap: var(--sp-1); }
.points-profile__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.points-profile__program { font-weight: 600; }
.points-profile__meta { font-size: var(--fs-sm); color: var(--c-text-muted); }
.points-verdict {
  align-self: flex-start; font-weight: 600;
  font-size: var(--fs-sm); padding: 2px var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--c-accent); background: var(--c-accent-weak);
}
.points-verdict__why, .points-sim__why { margin: 0; padding-left: var(--sp-4); font-size: var(--fs-sm); }
.points-spot {
  display: flex; flex-direction: column; gap: var(--sp-1);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.points-spot__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.points-spot__name { font-weight: 600; }
.points-spot__meta { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Offers */
.points-offer {
  display: flex; flex-direction: column; gap: var(--sp-1);
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
}
.points-offer__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.points-offer__merchant { font-weight: 600; }
.points-offer__text { font-size: var(--fs-sm); margin: 0; }
.points-offer__foot { font-size: var(--fs-xs); }

/* Reports index */
.points-reportlist { display: flex; flex-direction: column; gap: var(--sp-2); }
.points-reportcard {
  display: flex; flex-direction: column; gap: var(--sp-1);
  background: var(--c-surface-raised); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  text-decoration: none; color: var(--c-text);
}
.points-reportcard:hover { border-color: var(--c-accent); text-decoration: none; }
.points-reportcard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.points-reportcard__id { font-weight: 600; }
.points-reportcard__snippet { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }

/* Controls: buttons, the simulator, the add-a-wish form */
.points-btn {
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  align-self: flex-start;
  padding: 0.4rem 0.8rem; border-radius: var(--r-md);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface-raised); color: var(--c-text);
}
.points-btn:hover:not(:disabled) { background: var(--c-accent-weak); }
.points-btn:disabled { opacity: 0.5; cursor: default; }
.points-btn--small { font-size: var(--fs-xs); padding: 0.25rem 0.6rem; }

.points-sim { display: flex; flex-direction: column; gap: var(--sp-2); }
.points-sim__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.points-sim__select, .points-sim__input, .points-form__input {
  font: inherit; font-size: var(--fs-sm); padding: 0.4rem 0.6rem;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface-raised); color: var(--c-text);
  min-width: 160px;
}
.points-sim__out { display: flex; flex-direction: column; gap: var(--sp-1); }
.points-sim__line { font-weight: 600; }
.points-sim__verdict { display: flex; gap: var(--sp-2); }
.points-sim__status, .points-form__status { font-size: var(--fs-xs); color: var(--c-sev-med); min-height: 1em; }

.points-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.points-form__grid {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-items: end;
}
.points-field { display: flex; flex-direction: column; gap: 2px; }
.points-field__label { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* Write-loop toast (its own live region; see the role/aria-live in the JS) */
.points-toast {
  position: fixed; left: 50%; bottom: var(--sp-4); transform: translateX(-50%);
  z-index: 50; max-width: min(90vw, 30rem);
  font-size: var(--fs-sm);
  background: var(--c-surface-raised); color: var(--c-text);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); box-shadow: var(--shadow-md, 0 2px 8px rgb(0 0 0 / 0.2));
}
.points-toast--error { border-color: var(--c-sev-high); color: var(--c-sev-high); }

/* Contacts tab: action rows + the two-step delete confirm. */
.bosun-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.bosun-actions__confirm {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.bosun-btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.bosun-btn--danger {
  background: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
  color: #fff;
}