/* ============================================================================
   ALPHAFLIGHTLOGS — design system
   Implements DESIGN_SYSTEM_AND_SCREEN_SPEC.md.

   Palette is the specified cockpit-meets-finance system: ink navy, midnight,
   polished blue, subtle teal, slate, off-white, cool border. Semantic green /
   amber / red are RESERVED for verified meaningful states (currency status,
   sync truth, validation) and are never used decoratively — a green card the
   pilot cannot trust is worse than no card.

   Dark mode is first-class, not an afterthought: every colour is a token
   defined on :root and redefined for dark. No rule hard-codes a colour that
   has to change between themes.

   Density: --row-y drives table and list rhythm so the user density toggle
   is a single attribute flip rather than a second stylesheet.
   ========================================================================= */

:root {
  /* ---- brand palette ---- */
  --ink-navy:      #0D192C;
  --midnight:      #14233A;
  --blue:          #2B5CB8;
  --blue-bright:   #4B7FDC;
  --teal:          #0E8C93;
  --slate:         #52657C;
  --off-white:     #F6F8FC;
  --paper:         #FFFFFF;
  --cool-border:   #E1E8F2;

  /* ---- ACCENT FAMILIES ------------------------------------------------
     Each family owns a part of the product, so colour carries meaning
     rather than decoration. A pilot learns that teal is geography, amber is
     achievement, emerald is a confirmed good state, violet is analysis.
     Every -ink value is the text shade for that family, chosen to clear
     WCAG AA on both the -soft background and the page surface. */

  /* Geography: the world map, routes, distance, airports */
  --geo:        #0E8C93;
  --geo-ink:    #0A6E74;
  --geo-soft:   #E2F4F5;
  --geo-bright: #22B8C0;

  /* Achievement: badges, milestones, career moments */
  --amber:      #C2700C;
  --amber-ink:  #8A4F08;
  --amber-soft: #FDF0DC;
  --amber-bright: #F0A028;

  /* Confirmed good: verified currency, completed, synced */
  --emerald:      #15794B;
  --emerald-ink:  #0F5C39;
  --emerald-soft: #E3F5EC;
  --emerald-bright: #1FA765;

  /* Analysis: insights, pivots, reports */
  --violet:      #6B40B8;
  --violet-ink:  #52309A;
  --violet-soft: #F0EAFB;
  --violet-bright: #8B5CF0;

  /* Prestige: hour clubs, certificates */
  /* Darkened from #9A6B10, which measured 4.17:1 on its own soft ground —
     under the 4.5 AA threshold for normal text. */
  --gold:      #855B0E;
  --gold-soft: #FBF1DC;

  /* Attention: destructive and failing states */
  --rose:      #B4291F;
  --rose-soft: #FDECEA;

  /* ---- semantic: verified states ONLY ---- */
  --ok:            #1B6B43;
  --ok-bg:         #E8F5EE;
  --warn:          #8A5A10;
  --warn-bg:       #FDF3E1;
  --danger:        #A32B22;
  --danger-bg:     #FDEEEC;
  --unknown:       #52657C;
  --unknown-bg:    #EEF1F6;

  /* ---- applied roles ---- */
  --bg:            #F5F8FD;
  --surface:       var(--paper);
  --surface-2:     #F8FAFE;
  --surface-sunk:  #EDF2F9;
  --border:        var(--cool-border);
  --border-strong: #CBD5E2;
  --text:          #101B2D;
  --text-2:        #3C4F68;
  --text-3:        #52657C;  /* spec slate: 5.98:1 on white, 5.67:1 on off-white */
  --accent:        var(--blue);
  --accent-ink:    #FFFFFF;
  --link:          #2A55A6;
  --focus:         #4B7FDC;


  /* Signal: route lines, live data, interactive emphasis. New family, so
     colour can separate 'this is a link in a chart' from 'this is good'. */
  --magenta:      #C0218F;
  --magenta-ink:  #96176F;
  --magenta-soft: #FCE8F5;
  --magenta-bright: #E24FB2;

  /* ---- surfaces and depth -------------------------------------------
     Light mode is paper-like: flat grounds, hairline rules, shadow used
     sparingly for real elevation rather than decoration. */
  --glass:        rgba(255, 255, 255, .72);
  --glass-border: rgba(16, 27, 45, .08);
  --glass-blur:   saturate(150%) blur(14px);
  --sheen:        linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
  --hero-ink:     #FFFFFF;

  /* Glow is a dark-mode device. In light mode these resolve to ordinary
     elevation so the same rule works in both themes without branching. */
  --glow-accent:  var(--shadow);
  --glow-geo:     var(--shadow);
  --glow-violet:  var(--shadow);
  --glow-magenta: var(--shadow);
  --glow-soft:    var(--shadow-sm);
  --grid-line:    rgba(16, 27, 45, .06);

  /* ---- shape, motion and focus, shared by both themes ---- */
  --r-xs: 6px;  --r-sm: 9px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 24px;
  --r-pill: 999px;
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 420ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ring: 0 0 0 3px rgba(75, 127, 220, .38);

  --nav-bg:        var(--ink-navy);
  --nav-text:      #AFC0D6;
  --nav-text-hi:   #FFFFFF;
  --nav-hover:     #1B2C47;
  --nav-active:    #22375A;
  --nav-rule:      #2A3D5C;

  --shadow-sm: 0 1px 2px rgba(13, 25, 44, .06);
  --shadow:    0 4px 16px rgba(13, 25, 44, .07);
  --shadow-lg: 0 24px 64px rgba(13, 25, 44, .28);

  /* ---- type ---- */
  --font: "Inter", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: var(--font);
  --font-display: "Inter", "Geist", -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-data: 14px;

  /* ---- rhythm: 8px base, density-driven ---- */
  --sp: 8px;
  --radius: 10px;
  --radius-sm: 6px;
  --row-y: 11px;
  --cell-x: 12px;
}

/* Comfortable / compact density toggle. */
:root[data-density="compact"]  { --row-y: 6px;  --cell-x: 9px;  --fs-data: 13px; }
:root[data-density="relaxed"]  { --row-y: 15px; --cell-x: 15px; --fs-data: 14px; }

/* ---- dark mode: explicit choice ---- */
:root[data-theme="dark"] {
    /* ---- NEON FLIGHT DECK ---------------------------------------------
       Near-black with a navy cast, midnight panels, and a small set of
       luminous accents. Glow is reserved for data and interaction: it marks
       what matters rather than outlining everything. */
    --bg:            #04070F;
    --surface:       #0B1324;
    --surface-2:     #101B33;
    --surface-sunk:  #060B16;
    --border:        #1B2A47;
    --border-strong: #2B3F66;
    --text:          #EAF2FF;
    --text-2:        #AFC3E0;
    --text-3:        #889FC0;
    --accent:        #38BDF8;
    --accent-ink:    #04070F;
    --link:          #7DD3FC;

    --nav-bg:        #05080F;
    --nav-text:      #9DB4D6;
    --nav-hover:     #101D33;
    --nav-active:    #152748;
    --nav-rule:      #18274180;

    --ok:            #35E39B;  --ok-bg:     #052A1C;
    --warn:          #FFBE4D;  --warn-bg:   #2E2008;
    --danger:        #FF7A6E;  --danger-bg: #330F0C;
    --unknown:       #889FC0;  --unknown-bg:#101B33;

    /* Accents go luminous. Every -ink clears AA on its own -soft ground and
       on the panel surface; `tests/palette.test.mjs` enforces it. */
    --geo:        #22E8F5;  --geo-ink:     #7CF4FD;  --geo-soft:     #06252C;
    --amber:      #FFBE4D;  --amber-ink:   #FFD486;  --amber-soft:   #2E2008;
    --emerald:    #35E39B;  --emerald-ink: #74F0BC;  --emerald-soft: #052A1C;
    --violet:     #A98BFF;  --violet-ink:  #C9B4FF;  --violet-soft:  #1B1340;
    --magenta:    #FF5CD6;  --magenta-ink: #FF9AE6;  --magenta-soft: #330B2A;
    --gold:       #E7C06A;  --gold-soft:   #2A2110;
    --rose:       #FF7A6E;  --rose-soft:   #330F0C;
    --geo-bright: #5FF6FF;  --amber-bright: #FFCF77;
    --emerald-bright: #5FEFB2; --violet-bright: #BFA3FF;
    --magenta-bright: #FF7FE0;

    /* Glass panels and selective neon. */
    --glass:        rgba(14, 24, 44, .62);
    --glass-border: rgba(124, 244, 253, .14);
    --glass-blur:   saturate(140%) blur(16px);
    --sheen:        linear-gradient(180deg, rgba(124,244,253,.07), rgba(124,244,253,0));
    --hero-ink:     #EAF2FF;
    --grid-line:    rgba(124, 244, 253, .08);

    --glow-accent:  0 0 0 1px rgba(56,189,248,.30), 0 0 22px -4px rgba(56,189,248,.55);
    --glow-geo:     0 0 0 1px rgba(34,232,245,.30), 0 0 24px -4px rgba(34,232,245,.55);
    --glow-violet:  0 0 0 1px rgba(169,139,255,.30), 0 0 24px -4px rgba(169,139,255,.55);
    --glow-magenta: 0 0 0 1px rgba(255,92,214,.28), 0 0 26px -4px rgba(255,92,214,.50);
    --glow-soft:    0 0 18px -6px rgba(124,244,253,.35);
    --ring:         0 0 0 3px rgba(56, 189, 248, .45);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6);
    --shadow:    0 10px 30px -12px rgba(0, 0, 0, .85);
    --shadow-lg: 0 32px 80px -24px rgba(0, 0, 0, .92);
}

/* ---- dark mode: following the system, unless light was chosen ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      /* ---- NEON FLIGHT DECK ---------------------------------------------
         Near-black with a navy cast, midnight panels, and a small set of
         luminous accents. Glow is reserved for data and interaction: it marks
         what matters rather than outlining everything. */
      --bg:            #04070F;
      --surface:       #0B1324;
      --surface-2:     #101B33;
      --surface-sunk:  #060B16;
      --border:        #1B2A47;
      --border-strong: #2B3F66;
      --text:          #EAF2FF;
      --text-2:        #AFC3E0;
      --text-3:        #889FC0;
      --accent:        #38BDF8;
      --accent-ink:    #04070F;
      --link:          #7DD3FC;

      --nav-bg:        #05080F;
      --nav-text:      #9DB4D6;
      --nav-hover:     #101D33;
      --nav-active:    #152748;
      --nav-rule:      #18274180;

      --ok:            #35E39B;  --ok-bg:     #052A1C;
      --warn:          #FFBE4D;  --warn-bg:   #2E2008;
      --danger:        #FF7A6E;  --danger-bg: #330F0C;
      --unknown:       #889FC0;  --unknown-bg:#101B33;

      /* Accents go luminous. Every -ink clears AA on its own -soft ground and
         on the panel surface; `tests/palette.test.mjs` enforces it. */
      --geo:        #22E8F5;  --geo-ink:     #7CF4FD;  --geo-soft:     #06252C;
      --amber:      #FFBE4D;  --amber-ink:   #FFD486;  --amber-soft:   #2E2008;
      --emerald:    #35E39B;  --emerald-ink: #74F0BC;  --emerald-soft: #052A1C;
      --violet:     #A98BFF;  --violet-ink:  #C9B4FF;  --violet-soft:  #1B1340;
      --magenta:    #FF5CD6;  --magenta-ink: #FF9AE6;  --magenta-soft: #330B2A;
      --gold:       #E7C06A;  --gold-soft:   #2A2110;
      --rose:       #FF7A6E;  --rose-soft:   #330F0C;
      --geo-bright: #5FF6FF;  --amber-bright: #FFCF77;
      --emerald-bright: #5FEFB2; --violet-bright: #BFA3FF;
      --magenta-bright: #FF7FE0;

      /* Glass panels and selective neon. */
      --glass:        rgba(14, 24, 44, .62);
      --glass-border: rgba(124, 244, 253, .14);
      --glass-blur:   saturate(140%) blur(16px);
      --sheen:        linear-gradient(180deg, rgba(124,244,253,.07), rgba(124,244,253,0));
      --hero-ink:     #EAF2FF;
      --grid-line:    rgba(124, 244, 253, .08);

      --glow-accent:  0 0 0 1px rgba(56,189,248,.30), 0 0 22px -4px rgba(56,189,248,.55);
      --glow-geo:     0 0 0 1px rgba(34,232,245,.30), 0 0 24px -4px rgba(34,232,245,.55);
      --glow-violet:  0 0 0 1px rgba(169,139,255,.30), 0 0 24px -4px rgba(169,139,255,.55);
      --glow-magenta: 0 0 0 1px rgba(255,92,214,.28), 0 0 26px -4px rgba(255,92,214,.50);
      --glow-soft:    0 0 18px -6px rgba(124,244,253,.35);
      --ring:         0 0 0 3px rgba(56, 189, 248, .45);

      --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6);
      --shadow:    0 10px 30px -12px rgba(0, 0, 0, .85);
      --shadow-lg: 0 32px 80px -24px rgba(0, 0, 0, .92);
  }
}

/* ========================================================================= */

* { box-sizing: border-box; }

html {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; font-size: var(--fs-data); line-height: 1.45; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
a { color: var(--link); }

/* Every hour figure lines up vertically. Non-negotiable for a logbook. */
.kpi-num, .numeric, td.numeric, th.numeric, .total-line strong,
.compact-kpis strong, .insight strong, .group-row-header strong,
.ledger-table td, .stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* WCAG-visible focus on every interactive element. */
:is(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- shell --------------------------------------------------------------- */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 244px; min-width: 244px;
  background: var(--nav-bg); color: var(--nav-text);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: 26px 14px 20px;
  z-index: 30;
  overflow-y: auto;
}

/* BRAND BAND.
   The official logo is drawn in navy and blue for a LIGHT background: placed
   directly on the navy sidebar its wordmark all but disappears, and placed in
   a small white chip it reads as a pasted-in box. A full-bleed light band
   across the head of the sidebar solves both — the logo gets the light ground
   it was designed for, and the band reads as deliberate structure rather than
   an artifact. The accent rule ties it back into the palette. */
.brand-band {
  /* An inset plate sized to the artwork, not a full-bleed card. The approved
     logo is dark navy on transparency, so it needs a light ground to sit on
     against the navy rail — but a contained, rounded one that reads as part
     of the interface. In dark mode it gains a faint neon rim instead of a
     hard border. */
  margin: 2px 2px 0;
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF4FC 100%);
  box-shadow: var(--brand-plate-glow, 0 4px 14px rgba(0, 0, 0, .18));
}

.brand { display: block; text-decoration: none; }
.brand-logo {
  display: block;
  width: 100%;
  max-width: 182px;
  height: auto;
  margin: 0 auto;
  transition: transform var(--dur) var(--ease);
}
.brand:hover .brand-logo { transform: scale(1.025); }

.brand-tagline {
  margin: 14px 4px 24px;
  color: #8AA0BC;
  letter-spacing: .22em;
  font-size: 8.5px;
  font-weight: 700;
  text-align: center;
}

.side-label {
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  color: #768BA7; margin: 0 12px 10px;
}

.sidebar nav { display: grid; gap: 2px; }

.nav-btn {
  color: var(--nav-text); background: transparent; border: 0;
  border-radius: 8px; display: flex; text-align: left; align-items: center;
  gap: 12px; padding: 10px 12px; font-weight: 600; font-size: 13px;
  width: 100%; transition: background .15s, color .15s;
}
.nav-btn span { font-size: 16px; width: 18px; text-align: center; font-weight: 400; opacity: .85; }
.nav-btn:hover { background: var(--nav-hover); color: var(--nav-text-hi); }
.nav-btn.active {
  background: var(--nav-active); color: var(--nav-text-hi);
  box-shadow: inset 3px 0 0 var(--blue-bright);
}
.nav-btn.active span { color: var(--blue-bright); opacity: 1; }

.sidebar-bottom { margin-top: auto; padding-top: 16px; }
.offline-panel {
  border: 1px solid var(--nav-rule); border-radius: var(--radius);
  padding: 11px; display: flex; gap: 10px; align-items: center;
  background: rgba(255, 255, 255, .03);
}
.offline-panel strong, .offline-panel small { display: block; font-size: 12px; }
.offline-panel strong { color: var(--nav-text-hi); font-weight: 650; }
.offline-panel small { color: #8FA4BE; font-size: 10px; margin-top: 3px; line-height: 1.4; }

.status-dot { height: 9px; width: 9px; border-radius: 50%; background: var(--unknown); flex: none; }
.status-dot.online  { background: var(--ok); }
.status-dot.offline { background: var(--warn); }
.status-dot.error   { background: var(--danger); }

.sidebar-bottom p {
  font-size: 11px; color: #7D92AE; margin: 11px 6px 0; line-height: 1.6;
}

.main-wrap { min-width: 0; flex: 1; display: flex; flex-direction: column; }

.topbar {
  min-height: 76px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px; gap: 12px;
  position: sticky; top: 0; z-index: 20;
}
.topbar-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title h1 {
  margin: 2px 0 0; font-size: 23px; font-family: var(--font-display);
  font-weight: 600; letter-spacing: -.02em; color: var(--text);
}

/* --geo-ink, not --teal. An eyebrow is 10px, and the decorative teal clears
   only 4.04:1 on white and 4.35:1 on the dark ground — both short of AA for
   text this small, in BOTH themes. --geo-ink is the same family's text
   shade, themed for each, and already held to AA by tests/palette.test.mjs
   (6.01:1 light, 13.6:1 dark). The modal rule below had already made this
   swap locally; it belongs here, where every eyebrow in the app reads it. */
.eyebrow {
  color: var(--geo-ink); text-transform: uppercase; font-size: 10px;
  font-weight: 700; letter-spacing: .18em;
}
.eyebrow.light { color: #7FD3DA; }

.top-actions, .action-group, .hero-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.today-label { color: var(--text-3); font-size: 12px; margin-right: 12px; }

/* ---- buttons ------------------------------------------------------------- */

.button {
  padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-weight: 600; font-size: 12px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
}
.button:hover { background: var(--surface-sunk); }
.button.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.button.primary:hover { background: var(--blue-bright); border-color: var(--blue-bright); }
.button.ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text-2); }
.button.cream, .button.gold {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.button.outline-light { background: transparent; border-color: #6B809C; color: #fff; }
.button.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.button.subtle-btn { background: transparent; color: var(--text-3); border-color: transparent; }
.button.subtle-btn:hover { background: var(--surface-sunk); color: var(--text); }
.small-btn { font-size: 11px; padding: 6px 10px; }

.text-action, .row-link {
  background: transparent; border: 0; color: var(--link);
  font-weight: 650; font-size: 12px; padding: 3px; text-align: left;
}
.text-action:hover, .row-link:hover { text-decoration: underline; }

.icon-btn {
  border: 0; background: transparent; color: var(--text-3); font-size: 16px;
  display: inline-grid; place-items: center; border-radius: var(--radius-sm);
  min-width: 30px; height: 30px;
}
.icon-btn:hover { background: var(--surface-sunk); color: var(--text); }
.icon-btn.star { font-size: 20px; }
.icon-btn.starred { color: var(--warn); }
.menu-btn { display: none; }

.mini-action {
  border: 1px solid var(--border); background: var(--surface-sunk);
  padding: 5px 9px; border-radius: var(--radius-sm);
  font-weight: 650; font-size: 11px; color: var(--text-2);
}
.mini-action:hover { background: var(--surface); color: var(--text); }

/* ---- layout -------------------------------------------------------------- */

.content { padding: 26px 32px 60px; max-width: 1700px; margin: 0 auto; width: 100%; }

.hero {
  background: linear-gradient(118deg, var(--midnight), var(--ink-navy));
  color: #fff; padding: 30px 36px; border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; overflow: hidden; position: relative;
  border: 1px solid var(--nav-rule);
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 82% 8%, rgba(75, 127, 220, .22), transparent 42%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h2 {
  font: 600 34px/1.15 var(--font-display); letter-spacing: -.03em; margin: 10px 0 12px;
}
.hero h2 em { font-style: normal; color: var(--blue-bright); }
.hero p { color: #B6C6DC; max-width: 545px; line-height: 1.6; margin: 0 0 22px; font-size: 13px; }

.hero-figures {
  display: grid;
  grid-auto-flow: column;
  gap: 28px;
  padding-right: 8px;
}
.hero-figures > div { text-align: right; }
.hero-figures small {
  display: block; color: #9FB4CE; letter-spacing: .16em;
  font-size: 9px; font-weight: 700; margin-bottom: 6px;
}
.hero-figures strong {
  display: block; font-size: 32px; font-weight: 650;
  letter-spacing: -.04em; color: #fff;
  font-variant-numeric: tabular-nums;
}

.section-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin: 32px 0 14px;
}
.section-heading.spaced { margin-top: 4px; margin-bottom: 20px; }
.section-heading h2 {
  font: 600 24px/1.2 var(--font-display); margin: 4px 0 0;
  letter-spacing: -.025em; color: var(--text);
}
.section-heading p { margin: 5px 0 0; }

.subtle { color: var(--text-3); font-size: 12px; }
.small { font-size: 11px; }
.muted-box { padding: 20px; color: var(--text-3); line-height: 1.6; }

/* ---- cards and panels ---------------------------------------------------- */

.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); min-width: 0;
}
.kpi.featured { border-top: 3px solid var(--accent); }
.kpi-label {
  text-transform: uppercase; letter-spacing: .09em; color: var(--text-3);
  font-size: 10px; font-weight: 700; margin-bottom: 14px;
}
.kpi-num {
  font-size: 27px; font-weight: 650; letter-spacing: -.04em; color: var(--text);
}
.kpi-desc { font-size: 10px; color: var(--text-3); margin-top: 4px; }

.two-col {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, 1fr);
  gap: 16px; margin-top: 18px;
}

.panel {
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); border-radius: 12px;
  padding: 20px; margin-bottom: 16px; min-width: 0;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.panel-head h3 {
  font: 600 19px var(--font-display); letter-spacing: -.02em;
  margin: 4px 0 0; color: var(--text);
}
.panel > p { line-height: 1.7; color: var(--text-2); }

.insight-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.insight {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px;
}
.insight small, .insight strong { display: block; }
.insight small { color: var(--text-3); font-size: 11px; margin-bottom: 8px; }
.insight strong { font-size: 19px; letter-spacing: -.035em; color: var(--text); }

/* ---- tables -------------------------------------------------------------- */

.table-scroll { width: 100%; overflow: auto; }
.table-scroll table { width: 100%; border-collapse: collapse; text-align: left; min-width: 550px; }

th {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3); font-weight: 700; padding: 10px var(--cell-x);
  white-space: nowrap; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 2;
}
td {
  padding: var(--row-y) var(--cell-x); border-bottom: 1px solid var(--border);
  color: var(--text-2); font-size: var(--fs-data); vertical-align: middle;
}
td strong { font-weight: 650; color: var(--text); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }

td.numeric, th.numeric { text-align: right; white-space: nowrap; }
td.numeric { font-weight: 600; color: var(--text); }
td .subtle { display: block; margin-top: 3px; }

.route { font-weight: 650; white-space: nowrap; color: var(--text); }
.route span { color: var(--text-3); margin: 0 4px; }

.wide-table th, .wide-table td { padding: var(--row-y) var(--cell-x); }
.wide-table table { min-width: 1250px; }
.flush-panel { padding: 0; overflow: hidden; }
.load-more { text-align: center; padding: 14px; border-top: 1px solid var(--border); }

/* ---- chips --------------------------------------------------------------- */

.chip {
  display: inline-block; border-radius: 5px; padding: 4px 7px; font-size: 10px;
  background: var(--surface-sunk); color: var(--text-2);
  margin: 2px 3px 2px 0; font-weight: 650;
}
.chip.accent { color: var(--teal); background: var(--unknown-bg); }
.chip.gold   { color: var(--warn); background: var(--warn-bg); }
.chip.ok     { color: var(--ok); background: var(--ok-bg); }
.chip.danger { color: var(--danger); background: var(--danger-bg); }

.chip-cloud { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.inline-actions { display: flex; align-items: center; gap: 3px; }

/* ---- status callouts ----------------------------------------------------- */

.caution {
  background: var(--warn-bg); padding: 14px 18px; border-radius: var(--radius);
  border: 1px solid var(--warn); color: var(--warn);
}
.caution strong { font-size: 12px; }
/* The one caution that is about destroying records rather than qualifying a
   figure. Same shape, the danger tokens instead of the warning ones, so it
   reads as a different KIND of message and not merely a louder one. */
.caution.severe {
  background: var(--danger-bg); border-color: var(--danger); color: var(--danger);
}
.caution.severe ul { font-size: 12px; line-height: 1.6; margin: 6px 0 0; padding-left: 18px; }
.caution ul { font-size: 12px; line-height: 1.6; margin: 6px 0 0; padding-left: 18px; }
.caution p { font-size: 12px; line-height: 1.6; margin: 6px 0 0; }
.moments-panel .caution { margin-top: 16px; }

/* ---- moments / timeline -------------------------------------------------- */

.moment-row {
  width: 100%; display: flex; align-items: center; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  padding: 12px 1px; gap: 12px; color: var(--text-3);
}
.moment-row:hover { background: var(--surface-2); }
.moment-icon {
  height: 34px; width: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--unknown-bg); color: var(--teal); flex: none;
}
.moment-row > span:nth-child(2) { flex: 1; }
.moment-row strong, .moment-row small { display: block; }
.moment-row strong { font-size: 12px; color: var(--text); }
.moment-row small { color: var(--text-3); font-size: 11px; margin-top: 4px; }

.timeline { padding-left: 15px; }
.timeline-item {
  position: relative; display: flex; gap: 20px; padding: 14px 0 22px;
  border-left: 1px solid var(--border); align-items: flex-start; padding-left: 28px;
}
.timeline-node {
  position: absolute; left: -16px; top: 14px;
  background: var(--unknown-bg); border: 5px solid var(--bg); color: var(--teal);
  font-size: 15px; border-radius: 50%; height: 31px; width: 31px;
  display: grid; place-items: center;
}
.timeline-item > div { flex: 1; min-width: 0; }
.timeline-item small { font-size: 11px; color: var(--teal); font-weight: 700; }
.timeline-item h3 { font: 600 18px var(--font-display); margin: 3px 0; color: var(--text); }
.timeline-item p { color: var(--text-2); margin: 2px 0 6px; font-size: 12px; }

/* ---- filters and inputs -------------------------------------------------- */

.filter-panel { padding: 12px; margin-bottom: 14px; }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filters select { max-width: 180px; }

.search-wrap {
  flex: 1; min-width: 200px; display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--border-strong); background: var(--surface);
  padding: 0 11px; border-radius: var(--radius-sm); min-height: 40px;
}
.search-wrap span { font-size: 19px; color: var(--text-3); }
.search-wrap input {
  border: 0; outline: 0; width: 100%; font-size: 12px;
  padding: 10px 0; min-width: 0; background: transparent;
}

.filters select, .print-controls select, .form-grid input,
.form-grid select, .form-grid textarea {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); min-height: 40px; padding: 0 10px;
  font-size: 12px; color: var(--text);
}
.form-grid textarea { padding: 10px; min-height: 84px; line-height: 1.5; }

.checkbox-filter {
  white-space: nowrap; font-size: 11px; font-weight: 650; color: var(--text-2);
  display: flex; gap: 5px; align-items: center; padding: 0 5px;
}
.checkbox-filter input { accent-color: var(--accent); }

.compact-kpis { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.compact-kpis > div {
  background: var(--surface-sunk); padding: 8px 14px; border-radius: var(--radius-sm);
  display: flex; align-items: baseline; gap: 8px;
}
.compact-kpis small { color: var(--text-3); font-size: 11px; }
.compact-kpis strong { font-size: 15px; color: var(--text); }

/* ---- empty state --------------------------------------------------------- */

.empty { text-align: center; padding: 54px 15px; color: var(--text-3); }
.empty-icon { font-size: 32px; color: var(--accent); margin-bottom: 7px; }
.empty h3 { font: 600 21px var(--font-display); color: var(--text); margin: 3px; }
.empty p { max-width: 350px; margin: 10px auto 20px; font-size: 13px; line-height: 1.55; }

/* ---- reports ------------------------------------------------------------- */

.milestone-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 20px; }
.report-options { background: var(--surface); }
.report-options p { max-width: 780px; }
.print-controls {
  border-top: 1px solid var(--border); padding-top: 14px;
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.print-controls label { color: var(--text-3); font-size: 11px; display: grid; gap: 7px; }
.print-controls button { margin-left: auto; }

.totals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.totals-group h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--teal); margin: 0 0 12px;
}
.total-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border);
}
.total-line span { font-size: 12px; color: var(--text-2); }
.total-line strong { font-size: 13px; color: var(--text); }

.group-report { display: grid; gap: 14px; }
.group-row-header { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.group-row-header strong { white-space: nowrap; color: var(--text); }
.group-row-header strong small { color: var(--text-3); font-weight: 400; }
.bar-bg { height: 6px; border-radius: 20px; background: var(--surface-sunk); margin: 8px 0 5px; }
.bar-bg > div { height: 100%; border-radius: 20px; background: var(--accent); }
.report-disclaimer { margin-top: 20px; }

/* ---- import / airports / settings ---------------------------------------- */

.airport-search { margin-bottom: 15px; }
.padded { padding: 10px 12px; }
.wrap-actions { flex-wrap: wrap; }
.mini-note { font-size: 11px; color: var(--text-3); margin-top: 12px; }

.import-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.import-card { padding: 24px; min-height: 240px; display: flex; align-items: flex-start; flex-direction: column; }
.import-icon {
  font-size: 24px; color: var(--accent); background: var(--unknown-bg);
  border-radius: var(--radius); width: 46px; height: 46px;
  display: grid; place-items: center; margin-bottom: 14px;
}
.import-card h3 { font: 600 20px var(--font-display); margin: 3px 0 10px; color: var(--text); }
.import-card p { font-size: 12px; line-height: 1.7; color: var(--text-2); flex: 1; }
.file-button { cursor: pointer; }

.settings-panel { max-width: 900px; }
.settings-panel form > button { margin-top: 20px; }
.settings-line {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--border);
}
.settings-line strong, .settings-line small { display: block; }
.settings-line strong { font-size: 13px; color: var(--text); }
.settings-line small { color: var(--text-3); margin-top: 4px; font-size: 11px; }
.settings-line:last-child { border: 0; }

/* ---- modal --------------------------------------------------------------- */

.modal[hidden] { display: none !important; }
.modal {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8, 17, 32, .7);
  display: grid; place-items: center; padding: 20px;
}
.modal-panel {
  width: min(970px, 100%); max-height: 94vh; background: var(--surface);
  border-radius: 13px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--border);
}
.modal-head {
  padding: 18px 24px; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head h2 {
  font: 600 21px var(--font-display); margin: 3px 0 0;
  letter-spacing: -.02em; color: var(--text);
}
.modal-content { padding: 22px 24px; overflow-y: auto; flex: 1; }
.modal-actions {
  padding: 15px 24px; border-top: 1px solid var(--border);
  background: var(--surface-2); display: flex; justify-content: flex-end; gap: 9px;
}
body.modal-open { overflow: hidden; }

.form-section { margin-bottom: 24px; }
.form-section > h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--teal); margin: 0 0 4px;
}
.form-section > p { font-size: 11px; color: var(--text-3); margin: 0 0 12px; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.form-grid label { display: grid; gap: 6px; font-size: 11px; color: var(--text-2); font-weight: 600; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid label.checkbox { display: flex; align-items: center; gap: 7px; }

/* ---- toast --------------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px);
  background: var(--ink-navy); color: #fff; padding: 12px 20px;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 90; max-width: min(560px, 92vw);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast:not(.show) { visibility: hidden; }
.toast.error { background: var(--danger); }
.toast.warn  { background: var(--warn); color: #fff; }

/* ---- print: classic ledger ----------------------------------------------- */

#printArea { display: none; }

@media print {
  /* The page size comes from the chosen preset, injected as #printPageRule
     at print time. A fixed rule here would override the pilot's choice. */
  @page { margin: 10mm; }
  .app-shell, .toast, .modal { display: none !important; }
  #printArea { display: block; }
  html, body { background: #fff; color: #000; }
}

/* ---- responsive ---------------------------------------------------------- */

/* Statistic-grid column counts, hero proportions, shell padding, dialog
   height and touch-target sizing all live in DEVICE ADAPTATION at the foot
   of this file, where they are expressed once as fluid or content-aware
   rules instead of being restated per breakpoint. What remains here is
   structural: the things that change kind, not degree. */

@media (max-width: 1400px) {
  .totals-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .sidebar {
    position: fixed; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .2s; box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .menu-btn { display: inline-grid; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .import-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .totals-grid { grid-template-columns: 1fr; }
  .section-heading { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  :root { --row-y: 9px; --cell-x: 8px; }
  .section-heading .action-group { width: 100%; }
  .section-heading .action-group .button { flex: 1 1 auto; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   MY AVIATION WORLD
   A modern map surface. Nothing here evokes paper: flat vector land, a calm
   ocean field, and route arcs that read as data rather than cartography.
   ======================================================================== */

.world-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}

.world-map-panel { overflow: hidden; }

.world-map { position: relative; background: var(--wm-ocean); }
.world-map svg { display: block; width: 100%; height: auto; }

:root {
  /* Land/ocean separation raised from 1.19:1 to 1.40:1 so the coastline is
     legible as a data backdrop without competing with the routes drawn on it. */
  --wm-ocean: #EAF0F7;
  --wm-land: #BFCEDF;
  --wm-land-edge: #A6B9CE;
  --wm-arc: #315FB7;
  --wm-dot: #258C95;
  --wm-dot-edge: #FFFFFF;
  --wm-sel: #B4532B;
}
:root[data-theme="dark"] {
  --wm-ocean: #0B1524;
  --wm-land: #1B2B44;
  --wm-land-edge: #273B59;
  --wm-arc: #6C9BEE;
  --wm-dot: #45C3CE;
  --wm-dot-edge: #0B1524;
  --wm-sel: #F0996A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wm-ocean: #0B1524;
    --wm-land: #1B2B44;
    --wm-land-edge: #273B59;
    --wm-arc: #6C9BEE;
    --wm-dot: #45C3CE;
    --wm-dot-edge: #0B1524;
    --wm-sel: #F0996A;
  }
}

.wm-ocean { fill: var(--wm-ocean); }
.wm-country {
  fill: var(--wm-land);
  stroke: var(--wm-land-edge);
  stroke-width: 0.0006;
  vector-effect: non-scaling-stroke;
}

/* Estimated great-circle routes are DASHED. A solid arc is reserved for a
   recorded GPS track, so the two can never be confused (QA G2-B12). */
.wm-arc {
  fill: none;
  stroke: var(--wm-arc);
  stroke-dasharray: 0.006 0.004;
  stroke-linecap: round;
  cursor: pointer;
  transition: stroke .15s, opacity .15s;
}
.wm-arc:hover, .wm-arc:focus-visible { stroke: var(--wm-sel); opacity: 1 !important; }
.wm-arc.is-selected { stroke: var(--wm-sel); opacity: 1 !important; }

/* Reserved for real recorded tracks. Solid, never dashed. */
.wm-track { fill: none; stroke: var(--wm-sel); stroke-dasharray: none; }

.wm-airport {
  fill: var(--wm-dot);
  stroke: var(--wm-dot-edge);
  stroke-width: 0.0008;
  cursor: pointer;
  transition: fill .15s;
}
.wm-airport:hover, .wm-airport:focus-visible { fill: var(--wm-sel); }
.wm-airport.is-selected { fill: var(--wm-sel); stroke-width: 0.0016; }

.wm-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 12px 16px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-3); align-items: center;
}
.wm-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.wm-key-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wm-dot); }
.wm-key-arc { width: 22px; border-top: 2px dashed var(--wm-arc); }
.wm-key-note { flex-basis: 100%; color: var(--text-3); line-height: 1.5; }

.wm-playback {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--border);
  background: var(--surface); font-size: 12px; flex-wrap: wrap;
}
.wm-progress {
  flex: 1; min-width: 120px; height: 4px; border-radius: 4px;
  background: var(--surface-sunk); overflow: hidden;
}
.wm-progress > div { height: 100%; background: var(--accent); transition: width .12s linear; }

.wm-note { margin: 12px 16px; }

.wm-disclosure { background: var(--surface-2); }
.wm-disclosure p { font-size: 12px; line-height: 1.7; color: var(--text-2); margin: 0 0 8px; }
.wm-disclosure p:last-child { margin-bottom: 0; }

.world-kpis { margin-bottom: 16px; }
.world-side { display: grid; gap: 16px; }

.planned-list { margin: 12px 0 16px; padding-left: 20px; }
.planned-list li { font-size: 13px; line-height: 1.7; color: var(--text-2); margin-bottom: 4px; }

@media (max-width: 1200px) {
  .world-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   FLIGHT GRID — a modern virtualized data table.
   CSS grid for the row layout so every row shares one column template and a
   resize is a single custom-property update rather than per-cell work.
   ======================================================================== */

.grid-panel { overflow: hidden; }

/* The GRID is the horizontal scroller, so header, body and footer share one
   horizontal offset and stay aligned. The inner .fgrid-scroll handles only
   vertical scrolling. Making the body the horizontal scroller instead let the
   header escape its container and overflow the page on narrow screens. */
.fgrid {
  display: flex;
  flex-direction: column;
  max-height: 68vh;
  overflow-x: auto;
  overflow-y: hidden;
  font-variant-numeric: tabular-nums;
}

.fgrid-head, .fgrid-foot, .fgrid-row {
  display: grid;
  grid-template-columns: var(--grid-cols);
  min-width: max-content;
}

.fgrid-head {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
}

.fgrid-scroll {
  overflow-y: auto;
  overflow-x: visible;
  flex: 1;
  min-height: 240px;
  min-width: max-content;
  /* Virtualized rows are absolutely sized; this keeps the browser from
     trying to anchor scroll position to recycled nodes. */
  overflow-anchor: none;
}

.fgrid-spacer { position: relative; min-width: max-content; }
.fgrid-rows { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }

.fgrid-cell {
  padding: 0 var(--cell-x);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-data);
  color: var(--text-2);
}
.fgrid-cell.is-num { justify-content: flex-end; font-weight: 600; color: var(--text); }
.fgrid-cell.is-pinned { box-shadow: 1px 0 0 var(--border); }

.fgrid-th {
  position: relative;
  background: var(--surface-2);
  padding: 0;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--text-3);
  cursor: grab;
}
.fgrid-th:active { cursor: grabbing; }
.fgrid-th.is-num { justify-content: flex-end; }

.fgrid-sort {
  flex: 1; min-width: 0;
  background: none; border: 0; padding: 0 var(--cell-x);
  height: 100%; text-align: inherit;
  font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fgrid-th.is-num .fgrid-sort { text-align: right; }
.fgrid-sort:hover { color: var(--text); }
.fgrid-sort em { font-style: normal; color: var(--accent); margin-left: 4px; }

.fgrid-pin {
  opacity: 0; cursor: pointer; padding: 0 4px; font-size: 11px;
  color: var(--text-3); transition: opacity .12s;
}
.fgrid-th:hover .fgrid-pin, .fgrid-pin:focus-visible { opacity: 1; }
.fgrid-th.is-pinned .fgrid-pin { opacity: 1; color: var(--accent); }

.fgrid-resize {
  position: absolute; right: 0; top: 0; bottom: 0; width: 7px;
  cursor: col-resize; touch-action: none;
}
.fgrid-resize::after {
  content: ''; position: absolute; right: 3px; top: 20%; bottom: 20%;
  width: 1px; background: var(--border-strong);
}
.fgrid-resize:hover::after { background: var(--accent); width: 2px; }

.fgrid-row:hover .fgrid-cell { background: var(--surface-2); }
.fgrid-row.is-starred .fgrid-cell { box-shadow: inset 3px 0 0 var(--warn); }
.fgrid-row.has-error .fgrid-cell { background: var(--danger-bg); }
.fgrid-row.has-warn  .fgrid-cell { background: var(--warn-bg); }
.fgrid-row.has-error:hover .fgrid-cell,
.fgrid-row.has-warn:hover .fgrid-cell { filter: brightness(0.98); }

.fgrid-foot {
  position: sticky; bottom: 0; z-index: 5;
  border-top: 2px solid var(--border-strong);
  background: var(--surface-2);
}
.fgrid-tf { background: var(--surface-2); font-weight: 700; color: var(--text); }

.fgrid-link {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--link); font-weight: 650; cursor: pointer;
}
.fgrid-link:hover { text-decoration: underline; }
.is-star { color: var(--warn); }

.grid-note { padding: 10px 16px; margin: 0; border-top: 1px solid var(--border); }

/* ---- saved views ---- */

.view-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.view-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-2); border-radius: 999px; padding: 6px 13px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.view-chip:hover { background: var(--surface-sunk); color: var(--text); }
.view-chip.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.view-del { opacity: .6; font-size: 10px; }
.view-del:hover { opacity: 1; }

.sort-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.sort-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-sunk); border-radius: var(--radius-sm);
  padding: 4px 8px; font-size: 11px; font-weight: 650; color: var(--text-2);
}
.sort-chip button { background: none; border: 0; cursor: pointer; color: var(--text-3); font-size: 10px; }

/* ---- column picker ---- */

.column-picker { max-height: 60vh; overflow: auto; }
.col-group { margin-bottom: 16px; }
.col-group h4 {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--teal); margin: 0 0 8px;
}
.col-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; }

/* ---- editor ---- */

.editor-modes {
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--border); margin-bottom: 18px; padding-bottom: 12px;
}
.mode-tab {
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 7px 14px; font-size: 12px; font-weight: 650; color: var(--text-3); cursor: pointer;
}
.mode-tab:hover { background: var(--surface-sunk); color: var(--text); }
.mode-tab.is-active {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.editor-hint { margin-left: auto; }

.editor-issues { display: grid; gap: 8px; margin-bottom: 18px; }
.issue {
  border-radius: var(--radius-sm); padding: 11px 14px;
  border-left: 3px solid var(--unknown); background: var(--unknown-bg);
}
.issue strong {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 4px;
}
.issue p { margin: 0; font-size: 12px; line-height: 1.55; }
.issue-why { color: var(--text-3); margin-top: 4px !important; font-size: 11px !important; }
.issue button { margin-top: 8px; }
.issue-error   { border-left-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.issue-warning { border-left-color: var(--warn);   background: var(--warn-bg);   color: var(--warn); }
.issue-info    { border-left-color: var(--unknown);background: var(--unknown-bg);color: var(--text-2); }
.issue-error p, .issue-warning p { color: inherit; }

.quick-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.field-error { color: var(--danger); font-size: 10px; font-weight: 600; }
[aria-invalid="true"] { border-color: var(--danger) !important; }

@media (max-width: 1024px) {
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgrid { max-height: 60vh; }
}
@media (max-width: 560px) {
  .quick-grid { grid-template-columns: 1fr; }
  .editor-hint { display: none; }
}

/* ===========================================================================
   AVIATION TROPHY ROOM
   Badges are the focus: generous spacing, a calm ground, and no competing
   colour. Locked badges stay visible but recede, so the set reads as a
   collection to complete rather than a wall of unknowns.
   ======================================================================== */

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 14px;
}

.badge-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.badge-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
}
.badge-card h4 {
  margin: 10px 0 2px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.3;
}

.badge-art-wrap { line-height: 0; }
.badge { display: block; filter: drop-shadow(0 3px 6px rgba(13, 25, 44, .2)); }

/* Locked and undetermined badges recede rather than disappear. */
.badge.is-locked { filter: grayscale(1) opacity(.38); }
.badge-card:hover .badge.is-locked { filter: grayscale(.72) opacity(.62); }

.badge-status {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.badge-status-earned { background: var(--ok-bg); color: var(--ok); }
.badge-status-locked { background: var(--surface-sunk); color: var(--text-3); }
.badge-status-undetermined { background: var(--unknown-bg); color: var(--unknown); }

.badge-date { margin: 6px 0 0; font-size: 11px; color: var(--text-2); font-weight: 600; }
.badge-evidence {
  margin: 2px 0 0; font-size: 10px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.badge-note {
  margin: 6px 0 0; font-size: 10px; color: var(--text-3);
  line-height: 1.5; text-align: center;
}

.badge-progress {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-sunk);
  overflow: hidden;
  margin-top: 10px;
}
.badge-progress > div {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .3s ease;
}

/* ---- next up ---- */

.next-up {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(118deg, var(--midnight), var(--ink-navy));
  border-color: var(--nav-rule);
  color: #fff;
  flex-wrap: wrap;
}
.next-up-badge { line-height: 0; flex: none; }
.next-up-text { flex: 1; min-width: 220px; }
.next-up-text h3 {
  margin: 6px 0 4px;
  font: 600 24px var(--font-display);
  letter-spacing: -.025em;
  color: #fff;
}
.next-up-text .subtle { color: #AFC0D6; }
.next-up-progress { background: rgba(255, 255, 255, .16); margin-top: 14px; }
.next-up-progress > div { background: var(--blue-bright); }
.next-up-remaining {
  margin: 8px 0 0; font-size: 12px; font-weight: 650; color: var(--blue-bright);
}
.next-up-stats { display: flex; gap: 20px; }
.next-up-stats small {
  display: block; color: #9FB4CE; letter-spacing: .14em;
  font-size: 9px; font-weight: 700; margin-bottom: 4px;
}
.next-up-stats strong {
  display: block; font-size: 30px; font-weight: 650;
  letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums;
}

.trophy-group { margin-top: 28px; }
.trophy-group-title {
  font: 600 20px var(--font-display);
  letter-spacing: -.02em;
  margin: 0;
  color: var(--text);
}
.trophy-footnote { margin-top: 28px; max-width: 640px; }
.filter-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }

/* Unlock animation, suppressed under reduced motion by the global rule. */
@keyframes badge-unlock {
  0%   { transform: scale(.82) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.05) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.badge-earned .badge { animation: badge-unlock .5s cubic-bezier(.2, .8, .3, 1) both; }

@media (max-width: 560px) {
  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .next-up { gap: 16px; }
  .next-up-stats { width: 100%; }
}

/* ===========================================================================
   ZULU CLOCK
   ======================================================================== */

.zulu-primary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.zulu-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
}
.zulu-utc {
  background: linear-gradient(118deg, var(--midnight), var(--ink-navy));
  border-color: var(--nav-rule);
  color: #fff;
}
.zulu-label {
  display: block; font-size: 10px; letter-spacing: .18em;
  font-weight: 700; color: var(--teal); margin-bottom: 8px;
}
.zulu-utc .zulu-label { color: var(--blue-bright); }
.zulu-time {
  display: block;
  font-size: 42px; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text); line-height: 1.05;
}
.zulu-utc .zulu-time { color: #fff; }
.zulu-date { display: block; margin-top: 6px; font-size: 12px; color: var(--text-3); }
.zulu-utc .zulu-date { color: #AFC0D6; }

.clock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.clock-tile {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.clock-city {
  display: block; font-size: 11px; font-weight: 650;
  color: var(--text-2); margin-bottom: 4px;
}
.clock-time {
  display: block; font-size: 22px; font-weight: 650;
  letter-spacing: -.02em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.clock-meta { display: block; font-size: 10px; color: var(--text-3); margin-top: 3px; }
.clock-day {
  display: inline-block; margin-top: 5px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--unknown-bg); color: var(--unknown);
  padding: 2px 6px; border-radius: 999px;
}
.clock-remove {
  position: absolute; top: 6px; right: 6px;
  background: none; border: 0; cursor: pointer;
  color: var(--text-3); font-size: 10px; opacity: 0; transition: opacity .12s;
}
.clock-tile:hover .clock-remove, .clock-remove:focus-visible { opacity: 1; }

.conv-result {
  margin-top: 14px; padding: 12px 14px;
  background: var(--surface-sunk); border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.6;
}
.conv-result strong { font-variant-numeric: tabular-nums; color: var(--text); }
.conv-error { background: var(--danger-bg); color: var(--danger); }
.conv-warn { color: var(--warn); font-size: 11px; }

.leg-result {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; padding: 16px 18px;
  background: var(--surface-sunk); border-radius: var(--radius);
}
.leg-figure { text-align: center; min-width: 120px; }
.leg-figure small {
  display: block; font-size: 9px; letter-spacing: .14em;
  font-weight: 700; color: var(--text-3); margin-bottom: 4px;
}
.leg-figure strong {
  display: block; font-size: 34px; font-weight: 650;
  letter-spacing: -.03em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.leg-detail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; flex: 1;
}
.leg-detail small {
  display: block; font-size: 9px; letter-spacing: .14em;
  font-weight: 700; color: var(--text-3); margin-bottom: 3px;
}
.leg-detail strong {
  display: block; font-size: 17px; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.leg-detail span { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }

@media (max-width: 560px) {
  .zulu-time { font-size: 32px; }
  .leg-figure strong { font-size: 26px; }
}

/* ===========================================================================
   3D GLOBE
   The globe is the centrepiece of My Aviation World, so it gets real height
   and a dark field that reads as space in both themes.
   ======================================================================== */

.globe-host {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 380px;
  max-height: 72vh;
  background:
    radial-gradient(ellipse at 50% 42%, #16305A 0%, #0C1A30 46%, #070E1B 100%);
  cursor: grab;
  overflow: hidden;
}
.globe-host:active { cursor: grabbing; }
.wm-seek { flex: 1; min-width: 65px; accent-color: var(--teal); }
.globe-host canvas { display: block; width: 100%; height: 100%; }
.globe-host:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }

/* A faint starfield, drawn in CSS so it costs nothing to download. */
.globe-host::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 78% 12%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.6px 1.6px at 33% 72%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.1px 1.1px at 88% 64%, rgba(255,255,255,.42), transparent),
    radial-gradient(1.3px 1.3px at 57% 31%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.1px 1.1px at 22% 48%, rgba(255,255,255,.30), transparent),
    radial-gradient(1.5px 1.5px at 67% 85%, rgba(255,255,255,.38), transparent),
    radial-gradient(1.0px 1.0px at 45% 8%,  rgba(255,255,255,.30), transparent);
}

.globe-loading, .globe-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 28px;
  color: #CBD9EC; z-index: 2;
}
.globe-fallback { background: rgba(7, 14, 27, .9); }
.globe-fallback strong { font-size: 15px; color: #fff; }
.globe-fallback p { max-width: 380px; font-size: 12px; line-height: 1.6; margin: 0; }

/* ---- 2D / 3D switch ---- */

.mode-switch {
  display: inline-flex;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.mode-opt {
  border: 0; background: none; cursor: pointer;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 650; color: var(--text-3);
  transition: background .16s, color .16s, box-shadow .16s;
}
.mode-opt:hover { color: var(--text); }
.mode-opt.is-active {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(43, 92, 184, .38);
}

@media (max-width: 560px) {
  .globe-host { aspect-ratio: 1 / 1; min-height: 300px; }
}

/* The globe animates its own camera; honour reduced motion by parking it.
   The renderer also checks the preference each frame. */
@media (prefers-reduced-motion: reduce) {
  .globe-host { scroll-behavior: auto; }
}

/* Premium data surfaces. Accent families identify product areas. */
#mainContent { --screen-accent: var(--geo); --screen-ink: var(--geo-ink); }
#mainContent[data-screen="analytics"], #mainContent[data-screen="reports"] { --screen-accent: var(--violet); --screen-ink: var(--violet-ink); }
#mainContent[data-screen="trophy"], #mainContent[data-screen="milestones"] { --screen-accent: var(--amber); --screen-ink: var(--amber-ink); }
#mainContent[data-screen="training"], #mainContent[data-screen="documents"] { --screen-accent: var(--violet); --screen-ink: var(--violet-ink); }
#mainContent > .section-heading:first-child { border-left: 3px solid var(--screen-accent); padding-left: 16px; }
@media screen {
  body { background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--geo-soft) 48%, transparent), transparent 45%), var(--bg); }
  .panel, .kpi, .insight { box-shadow: 0 3px 14px rgba(13,25,44,.045); }
  .panel-head .eyebrow { color: var(--screen-ink); }
  .kpi { border-top: 2px solid var(--geo); }
  .kpi:nth-child(3n+2) { border-top-color: var(--violet); }
  .kpi:nth-child(3n) { border-top-color: var(--amber); }
  .modal-panel { box-shadow: 0 24px 90px rgba(5,14,32,.3); }
  .badge-card { background: radial-gradient(ellipse at 50% 0%, var(--amber-soft), transparent 65%), var(--surface); }
  .moment-row { border-left: 2px solid var(--amber); padding-left: 12px; }
  .planned-list { list-style: none; padding-left: 0; display: grid; gap: 12px; }
  .planned-list li { border-left: 2px solid var(--screen-accent); padding: 8px 16px; background: var(--surface-2); border-radius: 0 8px 8px 0; }
}
.visual-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 18px; margin-top: 18px; }
.chart-panel { overflow: hidden; }
.chart-panel h3 { font-size: 20px; }
.aircraft-silhouette { width: 100px; height: 50px; color: var(--violet-ink); flex: none; }
.distribution { display: flex; align-items: center; gap: 22px; min-height: 210px; }
.donut { width: 185px; max-width: 46%; flex: none; }
.donut-total { font: 700 24px var(--font-body); fill: var(--text); letter-spacing: -1px; }
.donut-unit { font: 600 8px var(--font-body); fill: var(--text-3); letter-spacing: 1px; }
.chart-legend { flex: 1; min-width: 0; }
.chart-legend button { display: flex; gap: 8px; align-items: center; width: 100%; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--border); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.chart-legend button span { flex: 1; overflow-wrap: anywhere; }
.chart-legend button strong { white-space: nowrap; font-size: 12px; }
.chart-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chart-legend button:hover { color: var(--link); }
.activity-columns { display: flex; align-items: stretch; height: 210px; gap: 5px; padding-top: 15px; overflow-x: auto; }
.activity-columns button { flex: 1; min-width: 18px; max-width: 100px; background: none; border: 0; color: var(--text-3); display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 2px; cursor: pointer; font: inherit; }
.column-track { height: 142px; width: 100%; display: flex; align-items: flex-end; border-bottom: 1px solid var(--border-strong); background: repeating-linear-gradient(to top,transparent 0,transparent 34px,var(--border) 35px,transparent 36px); }
.column-track > span { width: 100%; min-height: 2px; background: linear-gradient(0deg,var(--geo),var(--geo-bright)); border-radius: 4px 4px 0 0; }
.activity-columns button:nth-child(3n) .column-track > span { background: linear-gradient(0deg,var(--violet),var(--violet-bright)); }
.activity-columns button:hover .column-track > span { background: var(--amber); }
.column-value { font-size: 9px; opacity: 0; height: 12px; }
.activity-columns button:hover .column-value, .activity-columns button:focus-visible .column-value { opacity: 1; }
.activity-columns small { font-size: 9px; }
.activity-columns em { display: block; font-size: 9px; font-style: normal; color: var(--text-3); }
.gauge-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.experience-gauge { display: flex; align-items: center; gap: 12px; background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; text-align: left; padding: 8px; border-radius: 12px; }
.experience-gauge:hover { background: var(--surface-sunk); }
.experience-gauge svg { width: 82px; flex: none; }
.experience-gauge circle { fill: none; stroke-width: 7; }
.gauge-track { stroke: var(--border); }
.gauge-fill { stroke: var(--geo); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.experience-gauge:nth-child(2n) .gauge-fill { stroke: var(--violet); }
.experience-gauge:nth-child(3n) .gauge-fill { stroke: var(--amber); }
.experience-gauge text { fill: var(--text); font: 650 20px var(--font-body); }
.experience-gauge strong { display: block; font-size: 18px; }
.experience-gauge small { display: block; color: var(--text-3); font-size: 11px; margin-top: 5px; }
.chart-empty { min-height: 120px; display: grid; place-content: center; text-align: center; color: var(--text-3); padding: 16px; }
.analytics-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; }
.analytics-filters label { min-width: 140px; flex: 1; color: var(--text-3); font-size: 11px; text-transform: capitalize; }
.analytics-filters select { display: block; width: 100%; margin-top: 6px; height: 38px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; }
.analytics-headline { display: flex; align-items: center; justify-content: space-between; padding: 30px; background: linear-gradient(120deg,var(--midnight),#283151); color: #fff; border-radius: 16px; }
.analytics-headline strong { display: block; font-size: clamp(36px,5vw,64px); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.analytics-headline strong small { margin-left: 10px; font-size: 18px; letter-spacing: 0; font-weight: 400; color: #C9D7EC; }
.analytics-headline .eyebrow { color: #85DBDF; }
.analytics-headline p { color: #C9D7EC; margin-bottom: 0; }
.analytics-headline .aircraft-silhouette { width: 180px; height: 100px; color: #95CBCD; opacity: .75; }
.chart-pagination { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; }
.achievement-orbit { --completion: 0%; width: 72px; height: 72px; padding: 6px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--amber-bright) var(--completion),var(--border-strong) 0); margin-top: 14px; }
.achievement-orbit strong { background: var(--surface); color: var(--text); width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; font-size: 14px; }
.compact-orbit { width: 48px; height: 48px; padding: 4px; margin: 14px auto 0; }
.compact-orbit strong { font-size: 10px; }
.currency-hero { display:flex; gap:30px; align-items:center; justify-content:space-between; padding:32px; border-radius:18px; color:#fff; background:radial-gradient(ellipse at 90% 20%,#255962,transparent 65%),linear-gradient(120deg,#172740,#0d192c); margin-bottom:20px; }
.currency-hero .eyebrow { color:#91e4de; }
.currency-hero h3 { font-size:clamp(25px,3vw,38px); line-height:1.15; margin:14px 0; letter-spacing:-.035em; }
.currency-hero p { color:#c9d7ec; max-width:620px; font-size:12px; line-height:1.7; }
.currency-instrument { position:relative; width:170px; flex:none; text-align:center; display:grid; place-items:center; }
.currency-instrument svg { width:170px; fill:none; stroke:#69c9d0; stroke-width:1; opacity:.45; }
.currency-instrument strong { position:absolute; top:46px; font-size:40px; font-weight:650; }
.currency-instrument span { position:absolute; top:105px; font-size:8px; letter-spacing:1.7px; }
.currency-context summary, #currencyEvidencePanel summary { cursor:pointer; font-weight:650; color:var(--text); padding:8px 0 14px; }
.currency-context select, #currencyEvidencePanel select { min-height:38px; width:100%; padding:8px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); border-radius:8px; }
.currency-context details, #currencyEvidencePanel details { border-top:1px solid var(--border); margin-top:16px; padding-top:8px; }
.currency-rule-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.currency-rule { border-top:3px solid var(--amber); padding:20px; margin-bottom:0; }
.currency-rule h3 { font-size:17px; margin:18px 0; line-height:1.3; }
.currency-rule.evidence-met { border-top-color:var(--geo); }
.currency-rule-heading { display:flex; justify-content:space-between; gap:10px; font-size:10px; align-items:center; }
.currency-status { color:var(--amber-ink); background:var(--amber-soft); border-radius:20px; padding:5px 9px; }
.evidence-met .currency-status { color:var(--geo-ink); background:var(--geo-soft); }
.currency-counts { display:flex; gap:14px; flex-wrap:wrap; margin:20px 0; }
.currency-counts > div { position:relative; display:grid; justify-items:center; min-width:64px; }
.currency-counts svg { width:64px; height:64px; fill:none; }
.currency-counts circle { stroke:var(--border); stroke-width:3; }
.currency-counts circle+circle { stroke:var(--amber); transform:rotate(-90deg); transform-origin:center; stroke-linecap:round; }
.evidence-met .currency-counts circle+circle { stroke:var(--geo); }
.currency-counts strong { position:absolute; top:20px; font-size:17px; }
.currency-counts strong small { font-weight:400; color:var(--text-3); font-size:10px; }
.currency-counts span { font-size:10px; color:var(--text-3); margin-top:4px; text-transform:capitalize; }
.currency-rule details { font-size:11px; margin-top:16px; padding-top:12px; border-top:1px solid var(--border); overflow-wrap:anywhere; }
.currency-rule details summary { cursor:pointer; color:var(--link); }
.currency-evidence-list { padding-left:16px; max-height:320px; overflow:auto; }
.currency-evidence-list li { padding:7px 0; color:var(--text-2); }
.currency-evidence-list small { display:block; color:var(--text-3); }
.currency-form-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:20px; }
#currencyEvidencePanel { margin-top:24px; scroll-margin-top:20px; }
.currency-review { background:var(--surface-sunk); border-radius:10px; padding:15px; margin-top:18px; }
.qualification-banner { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:32px; margin-bottom:20px; border-radius:18px; color:#fff; background:radial-gradient(ellipse at 85% 15%,#4a3569,transparent 60%),linear-gradient(120deg,#14233a,#20223d); }
.qualification-banner h3 { font-size:clamp(25px,3vw,38px); line-height:1.15; margin:14px 0; letter-spacing:-.035em; }
.qualification-banner .eyebrow { color:#d8bdff; }
.qualification-banner p { color:#d7dcef; max-width:650px; line-height:1.7; font-size:12px; }
.qualification-stat { flex:none; display:grid; text-align:center; gap:8px; }
.qualification-stat strong { font-size:64px; line-height:1; }
.qualification-stat span { font-size:12px; color:#d7dcef; }
.qualification-stat small { font-size:10px; color:#d7dcef; }
.qualification-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:16px; }
.qualification-toolbar > label:first-child { flex:1; min-width:180px; }
.qualification-toolbar label > input[type="search"] { display:block; width:100%; margin-top:6px; min-height:38px; padding:8px 10px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; }
.qualification-toolbar .checkbox { display:flex; align-items:center; gap:8px; }
.credential-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.credential-card { position:relative; border-top:3px solid var(--violet); }
.credential-kind { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--violet-ink); max-width:80%; }
.credential-card h3 { font-size:21px; letter-spacing:-.02em; margin:12px 0; overflow-wrap:anywhere; }
.credential-emblem { position:absolute; right:16px; top:14px; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:var(--violet-ink); background:var(--violet-soft); font-size:21px; }
.credential-card dl { display:grid; grid-template-columns:1fr; gap:5px; font-size:12px; margin:20px 0; }
.credential-card dt { color:var(--text-3); font-size:10px; margin-top:8px; }
.credential-card dd { margin:0; color:var(--text); overflow-wrap:anywhere; }
.credential-originals { display:grid; gap:8px; font-size:12px; }
.credential-expired { border-top-color:var(--rose); }
.credential-expired .currency-status { background:var(--rose-soft); color:var(--rose); }
.credential-historical { opacity:.8; }
#credentialFormPanel { scroll-margin-top:20px; }
#credentialFormPanel select,.qualification-toolbar select { display:block; width:100%; min-height:38px; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); padding:8px; }
.training-brief { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:18px; }
.training-brief > div { padding:24px; background:linear-gradient(130deg,var(--violet-soft),var(--surface)); border:1px solid var(--border); border-radius:14px; }
.training-brief > div:nth-child(2) { background:linear-gradient(130deg,var(--geo-soft),var(--surface)); }
.training-brief > div:nth-child(3) { background:linear-gradient(130deg,var(--amber-soft),var(--surface)); }
.training-brief strong { display:block; font-size:32px; color:var(--text); letter-spacing:-.04em; }
.training-brief span { display:block; margin-top:8px; color:var(--text-2); font-size:11px; }
.fleet-hero { padding:32px; display:flex; align-items:center; justify-content:space-between; gap:25px; border-radius:18px; margin-bottom:20px; color:#fff; background:radial-gradient(ellipse at 85% 10%,#3e6269,transparent 65%),linear-gradient(120deg,#14233a,#172f41); }
.fleet-hero .eyebrow { color:#9de5de; }
.fleet-hero h3 { font-size:clamp(25px,3vw,38px); margin:14px 0; letter-spacing:-.035em; }
.fleet-hero p { color:#d0e0ec; max-width:650px; font-size:12px; line-height:1.7; }
.fleet-hero > .aircraft-silhouette { width:210px; height:110px; color:#9cdad9; }
.fleet-hero-values { display:flex; gap:28px; flex-wrap:wrap; margin-top:24px; }
.fleet-hero-values strong { display:block; color:#fff; font-size:28px; margin-bottom:4px; }
.fleet-hero-values span { color:#d0e0ec; font-size:10px; }
.fleet-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.fleet-card { padding:20px; overflow:hidden; }
.fleet-card-art { height:100px; margin:-20px -20px 20px; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:linear-gradient(120deg,var(--geo-soft),var(--surface)); }
.fleet-card:nth-child(2n) .fleet-card-art { background:linear-gradient(120deg,var(--violet-soft),var(--surface)); }
.fleet-card-art .aircraft-silhouette { width:150px; height:80px; color:var(--geo-ink); }
.fleet-card:nth-child(2n) .aircraft-silhouette { color:var(--violet-ink); }
.fleet-card-art > span { color:var(--text-3); font-size:10px; }
.fleet-card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fleet-card-header h3 { font-size:24px; margin:6px 0 0; letter-spacing:-.03em; }
.fleet-card-header .eyebrow { font-size:8px; }
.fleet-measures { display:flex; gap:20px; margin:20px 0 10px; }
.fleet-measures strong { display:block; color:var(--text); font-size:23px; letter-spacing:-.03em; }
.fleet-measures small { display:block; color:var(--text-3); font-size:10px; margin-top:4px; }
.fleet-trend { width:100%; height:70px; fill:none; stroke:var(--border); stroke-width:1; }
.fleet-trend polyline { stroke:var(--geo); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.fleet-trend circle { fill:var(--geo); stroke:none; }
.fleet-card:nth-child(2n) .fleet-trend polyline { stroke:var(--violet); }
#aircraftProfilePanel, #fleetHistory { scroll-margin-top:20px; }
#aircraftProfilePanel select { display:block; min-height:38px; width:100%; padding:8px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); border-radius:8px; }
@media(max-width:1200px) { .fleet-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .fleet-grid { grid-template-columns:minmax(0,1fr); } .fleet-hero { padding:24px; } .fleet-hero > .aircraft-silhouette { display:none; } }
.currency-evidence-list pre { white-space:pre-wrap; word-break:break-word; font-size:10px; }
@media(max-width:1200px) { .credential-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .credential-grid,.training-brief { grid-template-columns:minmax(0,1fr); } .qualification-banner { padding:24px; } .qualification-stat { display:none; } }
@media(max-width:1200px) { .currency-rule-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .currency-rule-grid { grid-template-columns:minmax(0,1fr); } .currency-instrument { display:none; } .currency-hero { padding:24px; } }
.clock-tile { padding-right: 92px; min-height: 116px; }
.clock-dial { position: absolute; right: 12px; bottom: 10px; width: 72px; height: 72px; }
.dial-face { fill: var(--surface-sunk); stroke: var(--border-strong); stroke-width: 1; }
.dial-tick { stroke: var(--text-3); stroke-width: 1.5; }
.dial-hour { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.dial-minute { stroke: var(--geo-ink); stroke-width: 2.5; stroke-linecap: round; }
.dial-pivot { fill: var(--amber); }
.next-up-text .achievement-orbit strong { background: var(--ink-navy); color: #fff; }
@media(max-width:1200px) {
  .gauge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .distribution { gap: 12px; }
}
@media(max-width:900px) { .visual-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width:500px) {
  .distribution { gap: 10px; }
  .donut { width: 135px; }
  .chart-legend button { font-size: 11px; }
  .experience-gauge { gap: 6px; padding: 4px; flex-direction: column; text-align: center; }
  .analytics-headline { padding: 22px; }
  .analytics-headline .aircraft-silhouette { display: none; }
  .analytics-filters label { min-width: 100%; }
}

/* ---- Aviation calendar (C.4) ----------------------------------------
   Category colour comes from the existing accent families, so the legend
   keeps its meaning and its AA contrast in both themes without inventing
   another palette. */
.cal-hero { padding:32px; border-radius:18px; margin-bottom:20px; color:#fff;
  background:radial-gradient(ellipse at 90% 0%,#2f4f6b,transparent 60%),linear-gradient(120deg,#12203a,#1b3150); }
.cal-hero .eyebrow { color:#9fd0e8; }
.cal-hero h3 { font-size:clamp(24px,2.8vw,36px); margin:14px 0; letter-spacing:-.035em; }
.cal-hero p { color:#cfdeea; max-width:680px; font-size:12px; line-height:1.7; }
.cal-hero-values { display:flex; gap:28px; flex-wrap:wrap; margin-top:24px; }
.cal-hero-values strong { display:block; color:#fff; font-size:26px; margin-bottom:4px; }
.cal-hero-values span { color:#cfdeea; font-size:10px; }

.cal-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.cal-modes { display:flex; gap:4px; }
.cal-nav { display:flex; align-items:center; gap:10px; }
.cal-nav strong { min-width:190px; text-align:center; font-size:15px; letter-spacing:-.02em; }
.cal-zone { display:flex; flex-direction:column; gap:6px; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3); }
.cal-zone select { min-height:38px; padding:8px 10px; border:1px solid var(--border-strong);
  border-radius:8px; background:var(--surface); color:var(--text); font:inherit; text-transform:none; letter-spacing:0; }

.cal-legend { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:16px; }
.cal-filter { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-3);
  font-size:11px; cursor:pointer; opacity:.55; }
.cal-filter.is-on { opacity:1; color:var(--text); border-color:var(--border-strong); background:var(--surface); }
.cal-filter-count { color:var(--text-3); font-variant-numeric:tabular-nums; font-size:10px; }
.cal-dot { width:9px; height:9px; border-radius:3px; background:var(--cal-colour,var(--text-3)); flex:none; }

.cat-flight     { --cal-colour:var(--blue-bright); }
.cat-planned    { --cal-colour:var(--text-3); }
.cat-deadhead   { --cal-colour:var(--unknown); }
.cat-cancelled  { --cal-colour:var(--rose); }
.cat-simulator  { --cal-colour:var(--violet); }
.cat-training   { --cal-colour:var(--geo); }
.cat-check      { --cal-colour:var(--emerald); }
.cat-expiry     { --cal-colour:var(--amber); }
.cat-milestone  { --cal-colour:var(--gold); }

.cal-grid { margin-top:18px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); }
.cal-head, .cal-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.cal-head { background:var(--surface-2); border-bottom:1px solid var(--border); }
.cal-head span { padding:10px 12px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.cal-cell { position:relative; display:flex; flex-direction:column; gap:6px; align-items:stretch; text-align:left;
  min-height:118px; padding:8px; border-top:1px solid var(--border); border-left:1px solid var(--border);
  background:var(--surface); color:inherit; font:inherit; }
/* A full-size sibling, not a wrapper: nesting the chip buttons inside a cell
   button would be invalid markup and the parser would unnest them. */
.cal-cell-open { position:absolute; inset:0; width:100%; border:none; background:none;
  cursor:pointer; padding:0; border-radius:0; }
.cal-cell-head, .cal-cell-body { position:relative; pointer-events:none; }
.cal-cell-body .cal-chip { pointer-events:auto; }
.cal-week:first-child .cal-cell { border-top:none; }
.cal-cell:first-child { border-left:none; }
.cal-cell:hover { background:var(--surface-2); }
.cal-cell-open:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.cal-cell.is-outside { background:var(--surface-sunk); color:var(--text-3); }
.cal-cell.is-today .cal-date { background:var(--accent); color:var(--accent-ink); border-radius:7px; }
.cal-cell.is-selected { box-shadow:inset 0 0 0 2px var(--focus); }
.cal-cell-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.cal-date { font-size:12px; font-weight:650; min-width:22px; padding:2px 5px; text-align:center; font-variant-numeric:tabular-nums; }
.cal-cell-time { font-size:10px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.cal-cell-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.cal-chip { display:flex; align-items:center; gap:6px; width:100%; padding:3px 6px; border-radius:6px;
  border:none; background:var(--surface-2); color:var(--text); font:inherit; font-size:10.5px;
  text-align:left; cursor:pointer; border-left:3px solid var(--cal-colour,var(--text-3)); }
.cal-chip.is-continuation { opacity:.6; border-left-style:dotted; }
.cal-chip .cal-dot { display:none; }
.cal-chip-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-chip-time { margin-left:auto; color:var(--text-3); font-variant-numeric:tabular-nums; }
.cal-more { font-size:10px; color:var(--text-3); padding-left:3px; }

.cal-rows { display:flex; flex-direction:column; gap:6px; }
.cal-row { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; text-align:left;
  border:1px solid var(--border); border-left:3px solid var(--cal-colour,var(--text-3)); border-radius:10px;
  background:var(--surface-2); color:var(--text); font:inherit; }
button.cal-row { cursor:pointer; }
button.cal-row:hover { background:var(--surface); border-color:var(--border-strong); }
.cal-row-main { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.cal-row-main strong { font-size:13px; letter-spacing:-.01em; }
.cal-row-main small { color:var(--text-3); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-row-meta { color:var(--text-3); font-size:11px; font-variant-numeric:tabular-nums; text-align:right; flex:none; }
.cal-row-go { color:var(--text-3); }
.cal-notes { margin:12px 0 0; padding-left:18px; color:var(--text-3); font-size:11px; line-height:1.7; }

.cal-day-panel h3 { font-size:18px; margin:0 0 14px; letter-spacing:-.02em; }
.cal-day-figures { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.cal-day-figures strong { display:block; font-size:22px; letter-spacing:-.03em; }
.cal-day-figures small { display:block; color:var(--text-3); font-size:10px; margin-top:4px; }
.cal-day-panel.is-empty p { max-width:620px; }
.cal-selected { margin-top:18px; scroll-margin-top:20px; }

.cal-week-view { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; margin-top:18px; }
.cal-week-day { padding:14px; }
.cal-week-day.is-today { box-shadow:inset 0 0 0 2px var(--focus); }
.cal-week-day-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.cal-week-day-head strong { font-size:20px; letter-spacing:-.03em; }
.cal-week-view .cal-row { flex-direction:column; align-items:flex-start; gap:4px; padding:8px 10px; }
.cal-week-view .cal-row-meta { text-align:left; }
.cal-week-view .cal-row-go { display:none; }

.cal-agenda { display:flex; flex-direction:column; gap:0; margin-top:18px; }
.cal-agenda-day { display:grid; grid-template-columns:86px minmax(0,1fr); gap:18px; padding:16px 0; border-top:1px solid var(--border); }
.cal-agenda-day:first-child { border-top:none; padding-top:0; }
.cal-agenda-date strong { display:block; font-size:28px; letter-spacing:-.04em; line-height:1; }
.cal-agenda-date small { display:block; color:var(--text-3); font-size:10px; margin-top:4px; text-transform:uppercase; letter-spacing:.06em; }

.cal-pairings { margin-top:18px; }
.cal-trip-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.cal-trip { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface-2); }
.cal-trip strong { font-size:15px; letter-spacing:-.02em; }
.cal-trip span { color:var(--text-3); font-size:11px; }

@media(max-width:1200px) {
  .cal-day-figures { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cal-trip-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cal-week-view { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) {
  .cal-cell { min-height:92px; }
  .cal-chip-time { display:none; }
}
@media(max-width:650px) {
  .cal-hero { padding:24px; }
  .cal-toolbar { flex-direction:column; align-items:stretch; }
  .cal-nav { justify-content:space-between; }
  .cal-nav strong { min-width:0; }
  .cal-week-view, .cal-trip-list, .cal-day-figures { grid-template-columns:minmax(0,1fr); }
  .cal-agenda-day { grid-template-columns:minmax(0,1fr); gap:10px; }
  .cal-agenda-date { display:flex; align-items:baseline; gap:8px; }
  .cal-agenda-date strong { font-size:20px; }
  /* A seven-column month grid cannot stay legible on a phone, so the month
     view keeps its shape and scrolls sideways inside its own frame rather
     than forcing the whole page to scroll. */
  .cal-grid { overflow-x:auto; }
  .cal-head, .cal-week { min-width:620px; }
}

/* ---- Printed logbook, full specification ----------------------------
   An original ruled aviation ledger on a green ground. Nothing here copies
   another publisher's layout, brand marks or artwork. Page size comes from
   the chosen preset, injected at print time as a #printPageRule <style>. */

.print-sheet { page-break-after: always; break-after: page; padding: 4mm; }
.print-sheet:last-child { page-break-after: auto; break-after: auto; }

.ledger-table { width: 100%; border-collapse: collapse; font-size: 9px; table-layout: fixed; }
.ledger-table th, .ledger-table td {
  border: 1px solid #7f9a86; padding: 3px 4px; text-align: right;
  background: #eef5ee; color: #11250f; height: 17px;
  overflow: hidden; white-space: nowrap;
}
/* NO ELLIPSIS ON A FIGURE. A clipped number on a logbook page is worse than
   a missing one: "8.." reads as a value, and the reader cannot tell that
   digits were lost. Column widths come from the budget in
   printing.planLayout — each column is as wide as the widest figure it can
   hold — and when the chosen columns genuinely do not fit the paper, the
   sheet carries a visible warning instead of quietly trimming them. Only
   free text, which has no exact value to lose, is allowed to elide. */
.ledger-table td.col-remarks, .ledger-table td.col-text { text-overflow: ellipsis; }
.ledger-table th {
  background: #cfe0d1; font-size: 8px; text-transform: uppercase;
  letter-spacing: .03em; text-align: center; position: static;
  /* A heading may use its two ruled lines; an unreadable heading makes the
     column under it unreadable too. */
  white-space: normal; line-height: 1.05; word-break: normal; hyphens: none;
}
.ledger-table td.col-text, .ledger-table td.col-date,
.ledger-table td.col-remarks, .ledger-table td.col-label { text-align: left; }

/* Everything the reader needs to decode the abbreviated headings, on the
   same sheet as the headings themselves. */
.print-legend {
  display: flex; flex-wrap: wrap; gap: 2px 10px;
  margin: 3px 0 0; font-size: 6.6px; line-height: 1.35; color: #27402b;
}
.print-legend strong { letter-spacing: .04em; }
.print-scope-note { font-style: italic; }

/* The layout does not fit the paper. Printed on the page rather than only
   shown in the interface, because the page is what gets handed over. */
.print-overwide {
  margin: 0 0 4px; padding: 4px 6px; border: 1.5px solid #8a2a20;
  background: #fbe9e7; color: #5d1a13; font-size: 7.6px; line-height: 1.35;
}
.ledger-table tr:nth-child(even) td { background: #e6efe6; }
.ledger-table .important-row td { background: #dcebdb; font-weight: 700; }
.ledger-table .blank-row td { background: #f3f8f3; }
.ledger-table .total-row td {
  background: #c6d9c6; font-weight: 700; border-top: 2px solid #4e6b53;
  font-variant-numeric: tabular-nums;
}
.ledger-table .total-row td.col-label { letter-spacing: .06em; font-size: 8px; }

.print-book-title {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 6px; border-bottom: 2px solid #1d3a2a; padding-bottom: 4px;
}
.print-foot {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 8px; margin-top: 5px; color: #333;
}

/* Pilot certification area. A supplied signature is placed here; with none
   stored a ruled line is printed instead, never a substitute mark. */
.print-certify {
  display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 16px;
  margin-top: 6px; padding-top: 5px; border-top: 1px solid #7f9a86; font-size: 8px; color: #11250f;
}
.print-certify-statement { font-style: italic; }
.print-certify-sign { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 160px; }
.print-certify-sign small { font-size: 7px; letter-spacing: .08em; text-transform: uppercase; color: #46594a; }
.print-signature-line { display: block; width: 170px; height: 20px; border-bottom: 1px solid #11250f; }
.print-signature-text { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 17px; line-height: 20px; }
.print-signature-image { height: 24px; max-width: 190px; object-fit: contain; }
.print-certify-meta { display: flex; flex-direction: column; gap: 2px; text-align: right; color: #46594a; }
.print-note { font-size: 8px; color: #35463a; margin-top: 5px; line-height: 1.5; }

/* Cover sheet */
.print-cover { display: flex; flex-direction: column; gap: 14px; color: #11250f; }
.print-cover-rule { height: 3px; background: #1d3a2a; }
.print-cover-head { text-align: center; padding: 12px 0; }
.print-cover-kicker { font-size: 9px; letter-spacing: .3em; color: #46594a; }
.print-cover h1 { font-size: 30px; margin: 10px 0 4px; letter-spacing: -.01em; }
.print-cover-cert { font-size: 10px; color: #46594a; margin: 0; }
.print-cover-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; margin: 0; }
.print-cover-facts div { border-top: 1px solid #7f9a86; padding-top: 5px; }
.print-cover-facts dt { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: #46594a; }
.print-cover-facts dd { margin: 3px 0 0; font-size: 13px; font-weight: 700; }
.print-cover-totals { width: 100%; border-collapse: collapse; font-size: 9px; }
.print-cover-totals caption { text-align: left; font-size: 8px; letter-spacing: .12em;
  text-transform: uppercase; color: #46594a; padding-bottom: 4px; }
.print-cover-totals th { text-align: left; font-weight: 600; border-bottom: 1px solid #c3d4c5; padding: 3px 4px; }
.print-cover-totals td { text-align: right; border-bottom: 1px solid #c3d4c5; padding: 3px 4px;
  font-variant-numeric: tabular-nums; font-weight: 700; }
.print-cover-missing { text-align: right; font-weight: 400; color: #6a7c6d; font-size: 8px; }
.print-cover-selection { font-size: 10px; margin: 0; }
.print-cover-note { font-size: 8px; color: #35463a; line-height: 1.6; margin: 0; }

/* Appendices */
.print-list { width: 100%; border-collapse: collapse; font-size: 9px; }
.print-list th, .print-list td { border-bottom: 1px solid #c3d4c5; padding: 4px 5px; text-align: left; }
.print-list th { font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: #46594a; }
.print-endorsements { display: flex; flex-direction: column; gap: 10px; }
.print-endorsements article { border-left: 2px solid #4e6b53; padding: 4px 0 4px 9px; break-inside: avoid; }
.print-endorsements header { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; }
.print-endorse-detail { font-size: 8px; color: #46594a; margin: 2px 0; }
.print-endorsements blockquote { margin: 4px 0; font-size: 9px; line-height: 1.5; white-space: pre-wrap; }
.print-endorsements footer { font-size: 7px; letter-spacing: .06em; text-transform: uppercase; color: #6a7c6d; }

/* ---- print setup controls (on screen) ---- */
.print-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0 10px; }
.print-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.print-grid select { min-height: 38px; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit;
  text-transform: none; letter-spacing: 0; }
.print-toggles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.print-toggle { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.print-toggle strong { display: block; font-size: 12px; }
.print-toggle small { display: block; color: var(--text-3); font-size: 10px; margin-top: 3px; line-height: 1.5; }
.print-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

.signature-preview { display: flex; align-items: center; justify-content: center; min-height: 72px;
  margin: 14px 0; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 10px;
  background: var(--surface-2); }
.signature-preview-image { max-height: 56px; max-width: 320px; object-fit: contain; }
.signature-preview-text { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 28px; color: var(--text); }
.signature-tools { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.signature-tools > label:first-child { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; }
.signature-tools input[type="text"] { min-height: 38px; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.signature-pad-wrap { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
#signatureCanvas { width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 180;
  border: 1px solid var(--border-strong); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }

@media (max-width: 1024px) {
  .print-grid, .print-toggles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .print-grid, .print-toggles { grid-template-columns: minmax(0, 1fr); }
  .signature-tools { flex-direction: column; align-items: stretch; }
}

/* ---- Experience worksheet and interview binder --------------------- */
.ws-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 16px 0 14px; }
.ws-controls label { display: flex; flex-direction: column; gap: 6px; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ws-controls input[type="date"] { min-height: 38px; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit;
  text-transform: none; letter-spacing: 0; }

.ws-table { width: 100%; border-collapse: collapse; }
.ws-table th, .ws-table td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.ws-table thead th { font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap; }
.ws-table thead th.numeric, .ws-table td.numeric { text-align: right; }
.ws-table tbody th { font-size: 13px; white-space: nowrap; }
.ws-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 5px 8px; border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--text); font: inherit; cursor: pointer;
  font-variant-numeric: tabular-nums; }
.ws-cell:hover { background: var(--surface-2); border-color: var(--border); }
.ws-cell.is-open { background: var(--surface-2); border-color: var(--focus); }
.ws-cell small { color: var(--text-3); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.ws-range strong { font-weight: 650; }
.ws-range { white-space: nowrap; }
.ws-none { color: var(--text-3); font-size: 11px; }

.ws-notes { margin-top: 18px; }
.ws-notes h4, .ws-split h4 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 8px; }
.ws-notes ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 12px; line-height: 1.7; }
.ws-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 20px; }
.ws-list { width: 100%; border-collapse: collapse; }
.ws-list th, .ws-list td { border-bottom: 1px solid var(--border); padding: 6px 8px;
  text-align: left; font-size: 12px; font-weight: 400; }
.ws-list td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.ws-sources { margin-top: 18px; scroll-margin-top: 20px; }

.binder-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; margin: 18px 0 14px; }
.binder-figures strong { display: block; font-size: 26px; letter-spacing: -.03em; }
.binder-figures small { display: block; color: var(--text-3); font-size: 10px; margin-top: 4px; }

/* print */
.print-sub { font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: #46594a; margin: 10px 0 5px; }

@media (max-width: 1024px) {
  .ws-split, .binder-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .ws-split, .binder-figures { grid-template-columns: minmax(0, 1fr); }
  .ws-controls { flex-direction: column; align-items: stretch; }
}

/* ---- Import workbench ----------------------------------------------- */
.import-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px; margin: 16px 0; }
.import-map-col { display: flex; flex-direction: column; gap: 6px; padding: 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.import-map-head { font-size: 11px; font-weight: 650; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.import-map-col select { min-height: 34px; padding: 6px 8px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; }
.import-map-col small { font-size: 10px; line-height: 1.5; }
.import-unmapped { color: var(--warn); }
.import-sample { color: var(--text-3); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-order { display: flex; flex-direction: column; gap: 10px; }
.import-order label { display: flex; flex-direction: column; gap: 6px; max-width: 340px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.import-order select { min-height: 38px; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit;
  text-transform: none; letter-spacing: 0; }

.import-stats { display: flex; flex-wrap: wrap; gap: 20px; margin: 16px 0; }
.import-stats span { font-size: 11px; color: var(--text-3); }
.import-stats strong { display: block; font-size: 22px; color: var(--text);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.import-stats .import-bad strong { color: var(--danger); }
.import-stats .import-warn strong { color: var(--warn); }

.import-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip-button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-3); font-size: 11px; cursor: pointer; }
.chip-button.is-on { background: var(--surface); border-color: var(--border-strong); color: var(--text); }

.import-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.import-table th, .import-table td { border-bottom: 1px solid var(--border);
  padding: 7px 9px; text-align: left; vertical-align: top; }
.import-table thead th { font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap; }
.import-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.import-table small { display: block; font-size: 10px; line-height: 1.4; margin-top: 2px; }
.import-row-bad { background: var(--danger-bg); }
.import-row-error { background: var(--warn-bg); }
.import-row-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.import-cell-bad { color: var(--danger); font-weight: 600; }
.import-cell-warn { box-shadow: inset 0 -2px 0 var(--warn); }
.import-status { max-width: 280px; }
.import-ok { color: var(--ok); font-size: 11px; }
.import-bad { color: var(--danger); font-size: 11px; }
.import-warn { color: var(--warn); font-size: 11px; }

.import-commit { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border); }
.import-commit strong { font-size: 20px; }

@media (max-width: 650px) {
  .import-map { grid-template-columns: minmax(0, 1fr); }
  .import-commit { flex-direction: column; align-items: stretch; }
}

/* ---- Duty & rest ------------------------------------------------------
   Measurement and assessment are visually separate: figures are neutral,
   and only a comparison against a limit is ever coloured. */
.duty-disclaimer { margin-bottom: 18px; }
.duty-disclaimer p { margin: 6px 0 0; }

.duty-pack .panel-head { align-items: center; }
.duty-pack .checkbox { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.duty-pack p { margin: 10px 0 0; }

.duty-profile-summary { margin-top: 18px; }
.duty-profile-summary .panel-head { align-items: center; }
#dutyProfilePanel input[type="text"], #dutyPeriodPanel input, #dutyPeriodPanel select, #dutyPeriodPanel textarea {
  min-height: 38px; width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit;
}
#dutyProfilePanel label, #dutyPeriodPanel label { display: flex; flex-direction: column; gap: 6px; }
#dutyProfilePanel label small, #dutyPeriodPanel label small { color: var(--text-3); font-size: 10px; line-height: 1.5; }
#dutyPeriodPanel label.checkbox, #dutyProfilePanel label.checkbox { flex-direction: row; align-items: center; gap: 8px; }
#dutyPeriodPanel, #dutyProfilePanel, #dutyAuditPanel { scroll-margin-top: 20px; }

.duty-windows { margin-top: 18px; }
.duty-window-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.duty-window-grid strong { display: block; font-size: 26px; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.duty-window-grid small { display: block; color: var(--text-3); font-size: 10px; margin-top: 4px; line-height: 1.5; }

.duty-list { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.duty-card { padding: 20px; }
.duty-card.is-over { border-left: 3px solid var(--warn); }
.duty-card-head { display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 20px; }
.duty-card-head h3 { font-size: 20px; margin: 6px 0 2px; letter-spacing: -.03em; }
.duty-card-figures { display: grid; grid-template-columns: repeat(4, minmax(90px, auto)); gap: 18px; }
.duty-card-figures strong { display: block; font-size: 19px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.duty-card-figures small { display: block; color: var(--text-3); font-size: 10px; margin-top: 3px; }
.duty-none { color: var(--text-3); font-size: 12px; font-weight: 400; }

.duty-lines { list-style: none; margin: 16px 0 10px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.duty-line { padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); border-left-width: 3px; border-left-color: var(--border-strong); }
.duty-line.is-exceeds { border-left-color: var(--warn); background: var(--warn-bg); }
.duty-line.is-within { border-left-color: var(--ok); }
.duty-line-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.duty-line-head strong { font-size: 12px; }
.duty-line-figures { display: block; margin-top: 5px; font-size: 17px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.duty-line-figures small { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.duty-source, .duty-reason { display: block; margin-top: 4px; font-size: 10px; line-height: 1.5; }
.duty-source { color: var(--text-2); }
.duty-reason { color: var(--text-3); }
.duty-chip { flex: none; font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; background: var(--unknown-bg); color: var(--unknown); }
.duty-chip.is-within { background: var(--ok-bg); color: var(--ok); }
.duty-chip.is-exceeds { background: var(--warn-bg); color: var(--warn); }

@media (max-width: 1200px) {
  .duty-window-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .duty-lines { grid-template-columns: minmax(0, 1fr); }
  .duty-card-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .duty-window-grid { grid-template-columns: minmax(0, 1fr); }
  .duty-card-head { flex-direction: column; }
  .duty-pack .panel-head { align-items: flex-start; }
}

/* ====================================================================
   COMPONENT SYSTEM — one set of rules, two themes
   ====================================================================
   Every rule below reads tokens, never literal colours, so light mode
   stays a refined paper-like workspace and dark mode becomes the neon
   flight deck without a second copy of the stylesheet.

   Restraint is the rule in dark mode: glow marks data, primary actions
   and the thing you are interacting with. Ordinary borders, labels and
   body text do not glow. */

/* ---- buttons ---------------------------------------------------- */
.button {
  position: relative; isolation: isolate;
  padding: 10px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-weight: 600; font-size: 12px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.button:hover { background: var(--surface-sunk); border-color: var(--border-strong); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: none; box-shadow: var(--ring); }

.button.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  font-weight: 700;
}
.button.primary:hover { filter: brightness(1.08); box-shadow: var(--glow-accent); }
.button.ghost { background: transparent; border-color: var(--border-strong); color: var(--text-2); }
.button.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent); }
.button.cream, .button.gold {
  background: var(--geo); border-color: var(--geo); color: var(--accent-ink);
}
.button.cream:hover, .button.gold:hover { filter: brightness(1.08); box-shadow: var(--glow-geo); }
.button.outline-light { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.button.outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.button.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.button.subtle-btn { background: transparent; color: var(--text-3); border-color: transparent; }
.button.subtle-btn:hover { background: var(--surface-sunk); color: var(--text); }
.button[disabled], .button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.small-btn { font-size: 11px; padding: 7px 11px; border-radius: var(--r-xs); }

.text-action, .row-link {
  background: transparent; border: 0; color: var(--link);
  font-weight: 650; font-size: 12px; padding: 3px; text-align: left;
  border-radius: var(--r-xs); cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.text-action:hover, .row-link:hover { text-decoration: underline; color: var(--accent); }
.text-action:focus-visible, .row-link:focus-visible { outline: none; box-shadow: var(--ring); }

.icon-btn {
  border: 1px solid transparent; background: transparent; color: var(--text-3);
  font-size: 16px; display: inline-grid; place-items: center;
  border-radius: var(--r-sm); min-width: 32px; height: 32px; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.mini-action:focus-visible, .chip-button:focus-visible, .nav-btn:focus-visible,
.mode-tab:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: none; box-shadow: var(--ring);
}

/* ---- panels and glass ------------------------------------------- */
.panel {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); border-radius: var(--r-md);
  padding: 20px; margin-bottom: 16px; min-width: 0;
}
/* A hairline of light along the top edge. In light mode it is a subtle
   sheen; in dark mode it reads as the edge of a lit glass panel. */
.panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
  border-radius: var(--r-md) var(--r-md) 0 0; pointer-events: none;
}
.panel.is-glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
}

/* ---- navigation -------------------------------------------------- */
.nav-btn {
  position: relative;
  color: var(--nav-text); background: transparent; border: 0;
  border-radius: var(--r-sm); display: flex; text-align: left; align-items: center;
  gap: 12px; padding: 10px 12px; font-weight: 600; font-size: 13px;
  width: 100%; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-btn:hover { background: var(--nav-hover); color: var(--nav-text-hi); }
.nav-btn.active { background: var(--nav-active); color: var(--nav-text-hi); }
/* The active marker is the one piece of navigation chrome that lights up. */
.nav-btn.active::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: var(--glow-soft);
}
.nav-btn.active span { color: var(--accent); opacity: 1; }

/* ---- tabs and chips ---------------------------------------------- */
.mode-tab {
  border: 1px solid transparent; background: transparent; color: var(--text-3);
  padding: 8px 14px; border-radius: var(--r-pill); font-weight: 650; font-size: 12px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mode-tab:hover { color: var(--text); background: var(--surface-2); }
.mode-tab.is-active {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); box-shadow: var(--glow-accent);
}

/* ---- focus, motion and reduced motion ----------------------------- */
:where(a, button, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring); }

@media (prefers-reduced-motion: reduce) {
  /* Nothing moves. Colour and elevation still change, so state is never
     communicated by motion alone. */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Light / Neon switch ------------------------------------------- */
.theme-switch {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface-2);
}
.theme-opt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-3);
  font: 650 11px/1 var(--font-ui, inherit); letter-spacing: .02em; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.theme-opt:hover { color: var(--text); }
.theme-opt.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.theme-opt:focus-visible { outline: none; box-shadow: var(--ring); }
.theme-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.theme-dot-light { background: linear-gradient(135deg, #FFFFFF, #CBD9EE); border: 1px solid #AFC2DC; }
.theme-dot-dark { background: linear-gradient(135deg, #22E8F5, #FF5CD6); }
.theme-opt.is-active .theme-dot-dark { box-shadow: 0 0 10px -1px rgba(34, 232, 245, .9); }

/* One frame without transitions while the theme flips, so the whole
   interface changes together rather than easing element by element. */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition: none !important;
}

@media (max-width: 900px) {
  .theme-opt { padding: 6px 9px; }
  .theme-opt { font-size: 11px; gap: 5px; }
  .theme-dot { width: 11px; height: 11px; }
}

/* ====================================================================
   SHELL — sidebar rail, topbar and page atmosphere
   ==================================================================== */

/* A faint instrument grid behind the whole workspace. Invisible in light
   mode, a flight-deck surface in dark mode. */
.content { position: relative; }
.content::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 78%);
}

/* A single luminous seam down the edge of the rail — only while the rail is
   in flow. Below 1025px the sidebar is `position: fixed` and slides off
   canvas; setting `position: relative` here would override that rule and
   leave the rail occupying layout on a phone. */
@media (min-width: 1025px) {
  .sidebar { position: relative; }
  .sidebar::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
    background: linear-gradient(180deg, transparent, var(--glass-border) 18%,
      var(--glass-border) 82%, transparent);
    pointer-events: none;
  }
}

.topbar { position: relative; }
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
  pointer-events: none;
}

:root[data-theme="dark"] .brand-band,
:root:not([data-theme="light"]) .brand-band {
  --brand-plate-glow: 0 0 0 1px rgba(124, 244, 253, .22), 0 6px 22px -8px rgba(34, 232, 245, .45);
}

/* The status dot is live data, so it earns a glow. */
.status-dot.online { box-shadow: 0 0 10px -1px var(--ok); }
.status-dot.offline { box-shadow: 0 0 10px -1px var(--danger); }

/* ---- hero surfaces -------------------------------------------------
   Every screen's hero uses one atmosphere rule rather than a hand-made
   gradient per screen, so the look stays consistent as screens are added. */
.hero, .fleet-hero, .cal-hero, .qualification-banner, .analytics-headline,
.currency-hero, .trophy-hero {
  position: relative; overflow: hidden; isolation: isolate;
}
.hero::after, .fleet-hero::after, .cal-hero::after, .qualification-banner::after,
.analytics-headline::after, .currency-hero::after, .trophy-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 120% at 88% -10%, var(--hero-wash-a, rgba(56,189,248,.18)), transparent 62%),
    radial-gradient(ellipse 50% 100% at 8% 110%, var(--hero-wash-b, rgba(169,139,255,.14)), transparent 60%);
}
:root[data-theme="dark"] .hero::after, :root:not([data-theme="light"]) .hero::after,
:root[data-theme="dark"] .fleet-hero::after, :root:not([data-theme="light"]) .fleet-hero::after,
:root[data-theme="dark"] .cal-hero::after, :root:not([data-theme="light"]) .cal-hero::after,
:root[data-theme="dark"] .qualification-banner::after, :root:not([data-theme="light"]) .qualification-banner::after,
:root[data-theme="dark"] .analytics-headline::after, :root:not([data-theme="light"]) .analytics-headline::after {
  --hero-wash-a: rgba(34, 232, 245, .22);
  --hero-wash-b: rgba(255, 92, 214, .16);
}

/* ---- KPI cards ------------------------------------------------------
   Each card is tinted by its own accent family so a glance separates
   total time from PIC from night, instead of six identical boxes. */
.kpi {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.kpi::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--kpi-accent, var(--accent));
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi:nth-child(6n+1) { --kpi-accent: var(--accent); }
.kpi:nth-child(6n+2) { --kpi-accent: var(--geo); }
.kpi:nth-child(6n+3) { --kpi-accent: var(--violet); }
.kpi:nth-child(6n+4) { --kpi-accent: var(--emerald); }
.kpi:nth-child(6n+5) { --kpi-accent: var(--magenta); }
.kpi:nth-child(6n+6) { --kpi-accent: var(--amber); }
.kpi-num { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

/* ---- tables ---------------------------------------------------------- */
tbody tr { transition: background var(--dur-fast) var(--ease); }
tbody tr:hover { background: var(--surface-2); }

/* ---- the one place a toast should feel lit ---------------------------- */
.toast { border-radius: var(--r-pill); box-shadow: var(--shadow), var(--glow-soft); }

/* ---- topbar at narrow widths ----------------------------------------
   The Light/Neon switch is a permanent control, so the bar has to give it
   room rather than push the page wider. The order in which controls give way
   lives in DEVICE ADAPTATION at the foot of this file, alongside the rest of
   the per-device shaping; only the always-true parts are here. */
.topbar-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ====================================================================
   DATA VISUALISATION — src/views/dataviz.js
   ====================================================================
   The exact figure always sits beside the picture, so the chart is a way
   into the numbers rather than a replacement for them. */

.viz-empty, .viz-note {
  color: var(--text-3); font-size: 11.5px; line-height: 1.6; margin: 10px 0 0;
}
.viz-muted { color: var(--text-3); }

/* ---- donut ---------------------------------------------------------- */
.viz-donut-wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; align-items: center; justify-items: center;
}
.viz-donut { width: 196px; height: 196px; }
.viz-arc { transition: stroke-width var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.viz-donut:hover .viz-arc { opacity: .55; }
.viz-donut .viz-arc:hover { opacity: 1; stroke-width: 23; }
.viz-donut-total {
  font: 700 27px var(--font-display, inherit); fill: var(--text);
  letter-spacing: -.03em;
}
.viz-donut-unit {
  font-size: 8.5px; fill: var(--text-3); letter-spacing: .14em;
}
.viz-legend { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.viz-legend-row {
  display: grid; grid-template-columns: 11px minmax(0, 1fr) auto 42px;
  align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text); font: inherit; font-size: 12.5px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
button.viz-legend-row { cursor: pointer; }
button.viz-legend-row:hover { background: var(--surface-2); border-color: var(--border); }
.viz-legend-row i { width: 11px; height: 11px; border-radius: 3px; }
.viz-legend-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-legend-row strong { font-variant-numeric: tabular-nums; }
.viz-legend-row em {
  font-style: normal; color: var(--text-3); font-size: 11px;
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ---- area trend ----------------------------------------------------- */
.viz-trend svg { width: 100%; height: 150px; display: block; }
.viz-line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; }
.viz-dot { vector-effect: non-scaling-stroke; }
.viz-trend-scale {
  display: flex; gap: 2px; margin-top: 6px;
  overflow-x: auto; scrollbar-width: thin;
}
.viz-tick {
  flex: 1 0 auto; min-width: 54px; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 7px 4px; border: 1px solid transparent;
  border-radius: var(--r-xs); background: transparent; color: var(--text-3);
  font: inherit; font-size: 10px;
}
button.viz-tick { cursor: pointer; }
button.viz-tick:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.viz-tick strong { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.viz-single { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; }
.viz-single strong { font-size: 26px; letter-spacing: -.03em; }
.viz-single small { color: var(--text-3); font-size: 11px; }

/* ---- radial progress ------------------------------------------------- */
.viz-radial { display: flex; align-items: center; gap: 14px; }
.viz-radial svg { flex: none; }
.viz-radial-sm svg { width: 56px; height: 56px; }
.viz-radial-md svg { width: 78px; height: 78px; }
.viz-radial-lg svg { width: 112px; height: 112px; }
.viz-radial-track { fill: none; stroke: var(--surface-sunk); stroke-width: 9; }
.viz-radial-fill {
  fill: none; stroke-width: 9; stroke-linecap: round;
  filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 0%, transparent));
}
.viz-radial-value { font: 700 24px var(--font-display, inherit); fill: var(--text); }
.viz-radial-sub { font-size: 9px; fill: var(--text-3); letter-spacing: .1em; }
.viz-radial-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.viz-radial-text strong { font-size: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.viz-radial-text small { color: var(--text-3); font-size: 11px; }

/* ---- ranked rows ------------------------------------------------------
   A short proportional marker, not a full-width bar twenty-five times. */
.viz-ranked { list-style: none; margin: 4px 0 0; padding: 0; }
.viz-ranked li { border-top: 1px solid var(--border); }
.viz-ranked li:first-child { border-top: 0; }
.viz-ranked-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 86px auto;
  grid-template-areas: 'rank name meter value' '. note note note';
  align-items: center; gap: 4px 12px; width: 100%; text-align: left;
  padding: 10px 8px; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 12.5px; border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
}
button.viz-ranked-row { cursor: pointer; }
button.viz-ranked-row:hover { background: var(--surface-2); }
.viz-rank {
  grid-area: rank; color: var(--text-3); font-size: 10px;
  font-variant-numeric: tabular-nums; text-align: right;
}
.viz-ranked-name { grid-area: name; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 600; }
.viz-ranked-meter {
  grid-area: meter; height: 5px; border-radius: var(--r-pill);
  background: var(--surface-sunk); overflow: hidden;
}
.viz-ranked-meter i { display: block; height: 100%; border-radius: var(--r-pill); }
.viz-ranked-value { grid-area: value; font-variant-numeric: tabular-nums; }
.viz-ranked-note { grid-area: note; color: var(--text-3); font-size: 10.5px; }

/* ---- heatmap ---------------------------------------------------------- */
.viz-heatmap-grid { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.viz-heatmap-week { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.viz-cell {
  width: 11px; height: 11px; border-radius: 3px; display: block;
  background: var(--surface-sunk); border: 1px solid var(--border);
}
.viz-cell { padding: 0; flex: none; position: relative; cursor: help; }
.viz-cell-detail { display: none; position: absolute; z-index: 5; bottom: 18px; left: 0;
  width: max-content; max-width: 190px; padding: 7px 9px; border-radius: 6px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
  border: 1px solid var(--border); font: 11px/1.5 inherit; }
.viz-cell:focus .viz-cell-detail { display: block; }
.viz-heatmap-grid { padding-top: 46px; }
.viz-heatmap-week:nth-last-child(-n+14) .viz-cell-detail { left: auto; right: 0; }
.viz-cell.is-future { opacity: .25; }
.viz-cell.is-l0 { background: var(--surface-sunk); }
.viz-cell.is-l1 { background: color-mix(in srgb, var(--accent) 28%, var(--surface-sunk)); border-color: transparent; }
.viz-cell.is-l2 { background: color-mix(in srgb, var(--accent) 52%, var(--surface-sunk)); border-color: transparent; }
.viz-cell.is-l3 { background: color-mix(in srgb, var(--accent) 76%, var(--surface-sunk)); border-color: transparent; }
.viz-cell.is-l4 { background: var(--accent); border-color: transparent; }
.viz-heatmap-key {
  display: flex; align-items: center; gap: 6px; margin-top: 9px;
  color: var(--text-3); font-size: 10.5px; flex-wrap: wrap;
}
.viz-heatmap-key .viz-muted { margin-left: 6px; }

/* ---- sparkline and counter -------------------------------------------- */
.viz-spark { width: 90px; height: 26px; }
.viz-spark path { stroke-width: 2; vector-effect: non-scaling-stroke; }
.viz-counter { display: flex; flex-direction: column; gap: 3px; }
.viz-counter strong {
  font-size: 30px; letter-spacing: -.04em; color: var(--viz-accent, var(--text));
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.viz-counter small { color: var(--text-3); font-size: 10.5px; }

/* Charts are data, so in dark mode they are the thing that lights up. */
:root[data-theme="dark"] .viz-line,
:root:not([data-theme="light"]) .viz-line { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 45%, transparent)); }
:root[data-theme="dark"] .viz-radial-fill,
:root:not([data-theme="light"]) .viz-radial-fill { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 40%, transparent)); }
:root[data-theme="dark"] .viz-donut .viz-arc,
:root:not([data-theme="light"]) .viz-donut .viz-arc { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 40%, transparent)); }
:root[data-theme="dark"] .viz-spark path,
:root:not([data-theme="light"]) .viz-spark path { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 40%, transparent)); }

@media (max-width: 900px) {
  .viz-donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
  .viz-legend { width: 100%; }
}
@media (max-width: 650px) {
  .viz-ranked-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas: 'rank name value' '. meter meter' '. note note';
  }
  .viz-ranked-meter { width: 100%; }
  .viz-donut { width: 100%; max-width: 230px; }
  .viz-donut-wrap { width: 100%; }
}

/* Screen accents share the palette and preserve semantic status colours. */
@media screen {
  #mainContent { --screen-accent: var(--accent); }
  #mainContent:is([data-screen="world"],[data-screen="airports"],[data-screen="zulu"]) { --screen-accent: var(--geo); }
  #mainContent:is([data-screen="training"],[data-screen="documents"],[data-screen="milestones"]) { --screen-accent: var(--violet); }
  #mainContent:is([data-screen="trophy"],[data-screen="calendar"]) { --screen-accent: var(--amber); }
  #mainContent > .section-heading:first-child { border-left: 3px solid var(--screen-accent); padding-left: 14px; }
  .fleet-card-header .eyebrow, .zulu-label, .totals-group h4,
  .modal .eyebrow, .form-section h4 { color: var(--geo-ink); }
  .next-up-text h3, .next-up-stats strong { color: var(--text); }
  .next-up-text .subtle { color: var(--text-2); }
  .next-up-remaining { color: var(--accent); }
  .next-up-stats small { color: var(--text-3); }
  .import-icon, .credential-emblem { color: var(--screen-accent); background: color-mix(in srgb, var(--screen-accent) 10%, var(--surface)); }
  .badge-earned { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 65%), var(--surface); border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }
  .badge-earned .badge-art-wrap { filter: drop-shadow(0 7px 9px color-mix(in srgb, var(--amber) 20%, transparent)); }
  .fleet-card-art { background: linear-gradient(135deg, var(--surface-sunk), color-mix(in srgb, var(--geo) 12%, var(--surface))); }
  .timeline-node { box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--border); }
  .duty-line .viz-radial { margin-top: 10px; }
  .duty-line .viz-radial-text strong { font-size: 14px; }
  .experience-gauge:nth-child(2) { --gauge-color: var(--violet); }
  .experience-gauge:nth-child(3) { --gauge-color: var(--geo); }
  .experience-gauge:nth-child(4) { --gauge-color: var(--magenta); }
  .experience-gauge .gauge-fill { stroke: var(--gauge-color,var(--accent)); }
  :root[data-theme="dark"] .gauge-fill { filter: drop-shadow(0 0 3px var(--gauge-color,var(--accent))); }
  :root[data-theme="dark"] .clock-dial { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--geo) 22%, transparent)); }
  :root[data-theme="dark"] .globe-host { background: radial-gradient(ellipse at 55% 45%, #162044 0%, #060c20 58%, #02050e 100%); }
  :root[data-theme="dark"] .badge-earned:hover { box-shadow: var(--glow-violet); }
}
@media (prefers-reduced-motion: reduce) {
  .viz-arc, .viz-ranked-row, .viz-legend-row { transition: none; }
}
@media (forced-colors: active) {
  .viz-arc, .viz-line, .viz-radial-fill { stroke: Highlight; filter: none; }
  .viz-cell { border: 1px solid ButtonText; }
  .viz-cell.is-l4 { background: Highlight; }
}

/* Pilot profile — first account-readiness phase; retains local/offline truth. */
.pilot-profile-panel { overflow: hidden; }
.pilot-profile-top { display: flex; align-items: center; gap: 24px; padding: 6px 0 21px; }
.pilot-photo-ring { flex: 0 0 116px; width: 116px; height: 116px; border-radius: 29px;
  padding: 4px; background: linear-gradient(130deg, var(--geo-bright), var(--violet-bright) 52%, var(--amber-bright));
  box-shadow: 0 12px 40px rgba(48,115,182,.16); }
.pilot-photo-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 25px; background: var(--surface); display: block; }
.pilot-profile-heading { min-width: 0; }
.pilot-profile-heading h3 { font-size: 23px; color: var(--text); margin: 0 0 3px; overflow-wrap: anywhere; }
.pilot-profile-heading p { color: var(--text-3); font-size: 12px; margin: 5px 0 9px; }
.pilot-photo-actions,.pilot-profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pilot-avatar-label { margin: 0 0 10px; font-weight: 700; color: var(--text-2); font-size: 12px; }
.pilot-avatar-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; margin-bottom: 22px; }
.pilot-avatar-choice { border: 1px solid var(--border); border-radius: 17px; padding: 9px 5px; background: var(--surface-sunk);
  display: grid; justify-items: center; gap: 7px; color: var(--text-2); cursor: pointer; font: inherit; font-size: 11px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; min-width: 0; }
.pilot-avatar-choice img { width: min(100%,72px); aspect-ratio: 1; border-radius: 17px; }
.pilot-avatar-choice span { font-weight: 650; text-align: center; }
.pilot-avatar-choice.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--surface); }
.pilot-avatar-choice:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(23,74,132,.17); }
.pilot-avatar-choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pilot-profile-form .form-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.pilot-profile-form textarea { width: 100%; resize: vertical; min-height: 62px; }
.pilot-profile-actions { margin-top: 18px; }
.account-readiness-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 15px 0; }
.account-readiness-grid > div { border: 1px solid var(--border); border-radius: 15px; padding: 14px; background: var(--surface-sunk); }
.account-readiness-grid strong,.account-readiness-grid small { display: block; }
.account-readiness-grid strong { color: var(--text); margin-bottom: 5px; font-size: 13px; }
.account-readiness-grid small { color: var(--text-2); line-height: 1.55; }
@media(max-width: 900px) {
  .pilot-profile-form .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pilot-avatar-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .account-readiness-grid { grid-template-columns: 1fr; }
}
@media(max-width: 550px) {
  .pilot-profile-top { align-items: flex-start; gap: 13px; }
  .pilot-photo-ring { flex-basis: 86px; width: 86px; height: 86px; border-radius: 20px; }
  .pilot-photo-ring img { border-radius: 16px; }
  .pilot-profile-heading h3 { font-size: 18px; }
  .pilot-profile-form .form-grid { grid-template-columns: 1fr; }
  .pilot-avatar-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce){.pilot-avatar-choice{transition:none}.pilot-avatar-choice:hover{transform:none}}


/* Phase 2: read-only account transition inventory. Matches both themes. */
.account-preflight-panel .account-preflight-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.account-inventory-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.account-preflight-stat{display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm)}
.account-preflight-stat strong{font-size:clamp(1.2rem,2vw,1.7rem);color:var(--text)}
.account-preflight-stat span{font-size:.77rem;color:var(--text-2)}
.account-inventory-table{width:100%;border-collapse:collapse;text-align:left}
.account-inventory-table th,.account-inventory-table td{padding:9px 11px;border-bottom:1px solid var(--border)}
.account-inventory-table td.numeric,.account-inventory-table th.numeric{text-align:right;font-variant-numeric:tabular-nums}
.account-preflight-error{color:var(--danger,var(--text-1));font-weight:600}
@media(max-width:540px){.account-inventory-results{grid-template-columns:1fr}}

/* Phase 2B: cloud account. Uses shared light/Neon design tokens. */
.account-auth-panel { border-color: var(--border-strong); }
.account-auth-panel h4 { margin: 0; }
.account-auth-summary { display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap; margin:16px 0; }
.account-auth-summary h4 { overflow-wrap:anywhere; }
.account-auth-modes,.account-auth-actions { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.account-auth-form { display:grid; gap:14px; margin:18px 0; padding:18px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-md); }
.account-auth-form label { display:grid; gap:6px; min-width:0; font-weight:600; }
.account-auth-form input { width:100%; min-width:0; }
.account-auth-form button[type=submit] { justify-self:start; }
.account-auth-error,.account-auth-warning { border-radius:var(--radius-sm); padding:12px 14px; background:var(--amber-soft); border:1px solid var(--amber); overflow-wrap:anywhere; }
.account-auth-notice { padding:12px 14px; border-radius:var(--radius-sm); background:var(--emerald-soft); border:1px solid var(--emerald); overflow-wrap:anywhere; }
@media(max-width:620px){.account-auth-form{padding:12px}.account-auth-form button[type=submit]{justify-self:stretch}}


/* ==========================================================================
   SMART LOGBOOK — aircraft identification, fleet status, expiry signalling
   Added for the smart-logbook renovation. Everything here is built from the
   existing token set so both themes follow automatically; the one new pair of
   tokens is --urgent, because the five-level expiry scale needs a step
   between amber ("approaching") and red ("expired") and the palette had only
   four semantic states.
   ========================================================================== */

:root {
  --urgent:    #B4510B;
  --urgent-bg: #FDEEE1;
}
:root[data-theme="dark"] { --urgent: #FF9A52; --urgent-bg: #341806; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --urgent: #FF9A52; --urgent-bg: #341806; }
}

/* ---- flown vs saved, on a fleet card ---- */
.fleet-status {
  display:flex; align-items:center; gap:7px; margin:0 0 10px;
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
}
.fleet-status span { font-size:14px; line-height:1; }
.fleet-status.is-flown    { color:var(--ok); }
.fleet-status.is-saved    { color:var(--text-3); }
.fleet-status.is-archived { color:var(--unknown); }

/* ---- registration lookup ---- */
.aircraft-lookup { display:grid; gap:12px; margin:0 0 18px; }
.aircraft-lookup-run { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.aircraft-lookup-run .subtle { flex:1 1 260px; min-width:0; }
.aircraft-lookup-result {
  border:1px solid var(--border); border-left:3px solid var(--border-strong);
  border-radius:var(--radius-sm); padding:14px 16px; background:var(--surface-2);
  display:grid; gap:10px;
}
.aircraft-lookup-result.is-resolved { border-left-color:var(--ok); }
.aircraft-lookup-result.is-manual   { border-left-color:var(--unknown); }
.aircraft-lookup-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; }
.aircraft-lookup-head strong { font-size:17px; letter-spacing:.04em; font-variant-numeric:tabular-nums; }

/* A resolved aircraft reads as a spec sheet, and an Unknown field is visibly
   a gap to fill rather than a value. */
.aircraft-lookup-fields {
  margin:0; display:grid; gap:1px 18px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.aircraft-lookup-fields > div {
  display:flex; justify-content:space-between; gap:12px;
  padding:5px 0; border-bottom:1px solid var(--border);
}
.aircraft-lookup-fields dt { color:var(--text-3); font-size:12px; }
.aircraft-lookup-fields dd { margin:0; font-weight:600; font-size:12.5px; text-align:right; overflow-wrap:anywhere; }
.aircraft-lookup-fields .is-unknown dd { color:var(--unknown); font-weight:500; font-style:italic; }

@media (max-width:620px) {
  .aircraft-lookup-fields { grid-template-columns:1fr; }
  .aircraft-lookup-run .subtle { flex-basis:100%; }
}


/* ==========================================================================
   QUICK LOG — entry type, aircraft identification, OOOI, repeat
   The modal gained a lot of fields, so the layout's job is to keep it from
   reading as a wall of inputs: the entry type is a decision taken first and
   visibly, the aircraft collapses to a summary once identified, and the time
   fields sit in small labelled groups rather than one long grid.
   ========================================================================== */

/* ---- entry type: three cards, one chosen ---- */
.entry-type {
  display:grid; gap:10px; margin:0 0 18px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.entry-type-option {
  display:grid; gap:3px; text-align:left; cursor:pointer;
  padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); font:inherit;
  transition:border-color .12s ease, background .12s ease;
}
.entry-type-option:hover { border-color:var(--border-strong); background:var(--surface-2); }
.entry-type-option:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.entry-type-option.is-active {
  border-color:var(--accent); background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.entry-type-icon { font-size:17px; line-height:1; color:var(--accent); }
.entry-type-label { font-weight:650; font-size:13.5px; }
.entry-type-hint { font-size:11.5px; color:var(--text-3); line-height:1.35; }

/* ---- aircraft block ---- */
.quick-aircraft {
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px 16px; margin:0 0 18px; background:var(--surface-2);
  display:grid; gap:12px;
}
.quick-aircraft.is-resolved { border-left:3px solid var(--ok); }
.quick-aircraft.is-manual   { border-left:3px solid var(--unknown); }
.quick-aircraft-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; justify-content:space-between; }
.quick-aircraft-head h4 { margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }
.quick-aircraft-head .subtle { flex:1 1 220px; min-width:0; }
.quick-aircraft-reg {
  font-size:19px; letter-spacing:.05em; font-weight:700; color:var(--text);
  text-transform:none; font-variant-numeric:tabular-nums;
}

/* The resolved aircraft reads as a small spec plate, not a form. */
.quick-aircraft-facts {
  margin:0; display:grid; gap:1px 18px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.quick-aircraft-facts > div {
  display:flex; justify-content:space-between; gap:10px;
  padding:5px 0; border-bottom:1px solid var(--border);
}
.quick-aircraft-facts dt { color:var(--text-3); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; }
.quick-aircraft-facts dd { margin:0; font-weight:600; font-size:12.5px; text-align:right; overflow-wrap:anywhere; }

.quick-aircraft-tail { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.quick-aircraft-tail label { flex:1 1 180px; min-width:0; }
.quick-aircraft-tail input { text-transform:uppercase; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.quick-aircraft-saved select { width:100%; }
.quick-aircraft-actions { display:flex; gap:16px; flex-wrap:wrap; }
.quick-aircraft-note {
  margin:0; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--unknown-bg); color:var(--text-2); font-size:12.5px;
}

/* ---- OOOI ---- */
.quick-oooi {
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px 16px; margin:0 0 18px; background:var(--surface-2); display:grid; gap:12px;
}
.quick-oooi-toggle { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; margin:0 0 18px; }
.quick-oooi-grid { display:grid; gap:8px; }
.quick-oooi-point { display:grid; gap:8px; grid-template-columns:48px 88px 1fr 1fr; align-items:center; }
.quick-oooi-label {
  font-weight:700; font-size:12px; letter-spacing:.08em; color:var(--accent);
  border:1px solid var(--border); border-radius:4px; padding:5px 0; text-align:center; cursor:help;
}
.quick-oooi-point input { min-width:0; }
.quick-oooi-results {
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  padding:10px 0 0; border-top:1px solid var(--border);
}
.quick-oooi-results small { display:block; color:var(--text-3); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.quick-oooi-results strong { font-size:17px; font-variant-numeric:tabular-nums; }
.quick-oooi-suggest { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0; }
.quick-oooi-suggest .subtle { flex:1 1 240px; min-width:0; }
.quick-oooi-issues {
  margin:0; padding:10px 12px 10px 28px; border-radius:var(--radius-sm);
  background:var(--warn-bg); color:var(--text); font-size:12.5px;
}
.quick-oooi-issues li + li { margin-top:4px; }

/* ---- repeat ---- */
.quick-repeat { display:grid; gap:12px; margin:0 0 18px; }
.quick-repeat-group h4 { margin:0 0 7px; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }
.quick-repeat-chips { display:flex; flex-wrap:wrap; gap:8px; }
.repeat-chip {
  display:grid; gap:1px; text-align:left; cursor:pointer; font:inherit; color:var(--text);
  padding:7px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface);
  transition:border-color .12s ease, background .12s ease;
}
.repeat-chip:hover { border-color:var(--accent); background:var(--surface-2); }
.repeat-chip:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.repeat-chip strong { font-size:12.5px; letter-spacing:.03em; }
.repeat-chip small { font-size:11px; color:var(--text-3); }

/* ---- quick-log sections ---- */
.quick-log .form-section + .form-section { margin-top:16px; }
.quick-log .form-section h4 {
  margin:0 0 9px; font-size:12px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-3);
}
.quick-log .quick-grid { grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); }

@media (max-width:620px) {
  .entry-type { grid-template-columns:1fr; }
  .entry-type-option { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
  .entry-type-hint { flex-basis:100%; }
  .quick-aircraft-facts { grid-template-columns:1fr; }
  /* Four columns of time inputs do not fit a phone; the label leads its own row. */
  .quick-oooi-point { grid-template-columns:48px 1fr 1fr; }
  .quick-oooi-point input[type=date] { grid-column:2 / -1; }
  .quick-log .quick-grid { grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); }
}


/* ==========================================================================
   MEDICAL & CURRENCY — the five-level status scale, made legible
   Colour is never the only carrier: every pill pairs its tone with an icon
   and a word, and every card repeats the state in prose underneath. That is
   what keeps the scale readable in greyscale print, at low contrast, and for
   a pilot who cannot distinguish amber from orange.
   ========================================================================== */

.status-pill {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:650;
  letter-spacing:.02em; border:1px solid transparent;
}
.status-pill-icon { font-size:11px; line-height:1; }
/* No opacity on the day count. Dimming the tone colour dropped it to
   3.3-4.4:1 against its own soft ground — under AA for normal text — and the
   day count is the most useful part of the pill. Full strength instead, with
   the weight carrying the hierarchy. */
.status-pill-days { font-variant-numeric:tabular-nums; font-weight:500; }
.status-pill[data-compact] .status-pill-label { font-weight:600; }

.status-pill.is-valid    { background:var(--ok-bg);      color:var(--ok);      border-color:var(--ok); }
.status-pill.is-warning  { background:var(--warn-bg);    color:var(--warn);    border-color:var(--warn); }
.status-pill.is-urgent   { background:var(--urgent-bg);  color:var(--urgent);  border-color:var(--urgent); }
.status-pill.is-expired  { background:var(--danger-bg);  color:var(--danger);  border-color:var(--danger); }
.status-pill.is-review   { background:var(--unknown-bg); color:var(--unknown); border-color:var(--unknown); }

/* ---- the summary strip ---- */
.expiry-strip {
  display:grid; gap:1px; margin:0 0 18px;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden;
}
.expiry-strip-cell, .expiry-strip-next { background:var(--surface); padding:12px 14px; }
.expiry-strip-cell strong { display:block; font-size:24px; line-height:1.1; font-variant-numeric:tabular-nums; }
.expiry-strip-cell span { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); }
.expiry-strip-cell.is-expired strong { color:var(--danger); }
.expiry-strip-cell.is-urgent  strong { color:var(--urgent); }
.expiry-strip-cell.is-warning strong { color:var(--warn); }
.expiry-strip-cell.is-review  strong { color:var(--unknown); }
.expiry-strip-cell.is-valid   strong { color:var(--ok); }
/* A zero is a good answer for most of these levels; it should recede, not shout. */
.expiry-strip-cell.is-empty strong { color:var(--text-3); opacity:.5; }
.expiry-strip-next { grid-column:span 2; display:grid; gap:1px; align-content:center; }
.expiry-strip-next small { font-size:10.5px; letter-spacing:.07em; color:var(--text-3); }
.expiry-strip-next strong { font-size:18px; font-variant-numeric:tabular-nums; }
.expiry-strip-next span { font-size:12px; color:var(--text-2); }

/* ---- the operating-context bar ---- */
.currency-contextbar {
  display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between;
  padding:12px 16px; margin:0 0 18px; background:var(--surface-2);
  border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius-sm);
}
.currency-contextbar.is-incomplete { border-left-color:var(--unknown); }
.currency-contextbar-main { flex:1 1 320px; min-width:0; }
.currency-contextbar-main p { margin:2px 0 0; font-weight:600; font-size:13.5px; overflow-wrap:anywhere; }
.currency-contextbar-main .subtle { font-weight:400; }

/* ---- category filters ---- */
.expiry-filters { display:flex; gap:7px; flex-wrap:wrap; }
.chip-btn {
  font:inherit; font-size:12px; cursor:pointer; padding:5px 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-2);
  transition:border-color .12s ease, color .12s ease;
}
.chip-btn:hover { border-color:var(--border-strong); color:var(--text); }
.chip-btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.chip-btn.is-active { border-color:var(--accent); color:var(--accent); font-weight:650; }

/* ---- grouped cards ---- */
.expiry-group { margin:0 0 22px; }
.expiry-group-head { display:flex; align-items:baseline; gap:12px; margin:0 0 10px; }
.expiry-group-head h3 { margin:0; font-size:15px; }
.expiry-cards { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr)); }

.expiry-card {
  display:grid; gap:8px; align-content:start;
  padding:14px 16px; background:var(--surface);
  border:1px solid var(--border); border-left:3px solid var(--border-strong);
  border-radius:var(--radius-sm);
}
.expiry-card.is-expired { border-left-color:var(--danger); }
.expiry-card.is-urgent  { border-left-color:var(--urgent); }
.expiry-card.is-warning { border-left-color:var(--warn); }
.expiry-card.is-review  { border-left-color:var(--unknown); }
.expiry-card.is-valid   { border-left-color:var(--ok); }
.expiry-card-head { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; }
.expiry-card-head h4 { margin:0; font-size:14px; line-height:1.3; }
.expiry-card-when { margin:0; font-size:12.5px; color:var(--text-2); }
.expiry-card-rule { margin:0; font-size:11.5px; color:var(--text-3); line-height:1.45; }
.expiry-card-reqs { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 12px; }
.expiry-card-reqs li { font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.expiry-card-reqs li.is-met { color:var(--ok); }
.expiry-card-foot { display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding-top:2px; }
.expiry-card-foot a { font-size:12px; }

/* ---- medical cards ---- */
.medical-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); }
.medical-card { display:grid; gap:12px; align-content:start; }
.medical-card-head { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.medical-card-head h4 { margin:2px 0 0; font-size:17px; }
.medical-flag {
  margin:0; padding:9px 12px; border-radius:var(--radius-sm);
  background:var(--warn-bg); color:var(--text); font-size:12.5px;
}

.medical-privileges { width:100%; border-collapse:collapse; font-size:12.5px; }
.medical-privileges th, .medical-privileges td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--border); vertical-align:top; }
.medical-privileges thead th { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:600; }
.medical-privileges tbody th { font-weight:600; }
.medical-privileges tbody th small, .medical-privileges td small { display:block; font-weight:400; font-size:11px; color:var(--text-3); margin-top:2px; }
.medical-privileges td strong { font-variant-numeric:tabular-nums; }
/* A privilege the certificate does not cover is information, not an error. */
.medical-privileges tr.is-unsupported { opacity:.55; }
.medical-privileges .is-unknown { color:var(--unknown); font-style:italic; }

.medical-basis ul { margin:8px 0; padding-left:20px; font-size:12px; color:var(--text-2); }
.medical-basis li + li { margin-top:5px; }
.medical-review {
  padding:11px 14px; border-radius:var(--radius-sm);
  background:var(--unknown-bg); border:1px solid var(--unknown); display:grid; gap:7px;
}
.medical-review strong { font-size:12.5px; display:flex; gap:6px; align-items:center; }
.medical-review ul { margin:0; padding-left:18px; font-size:12px; }
.medical-review li + li { margin-top:4px; }
.medical-review .button { justify-self:start; }
.medical-form { display:grid; gap:12px; margin:0 0 16px; padding:14px 16px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); }
.medical-form .panel-head { margin:0; }
.field-hint { display:block; margin-top:3px; font-size:11px; color:var(--text-3); line-height:1.4; }

/* Currency rule cards adopt the same left-edge signal as the dashboard. */
.currency-rule.is-expired { border-left:3px solid var(--danger); }
.currency-rule.is-urgent  { border-left:3px solid var(--urgent); }
.currency-rule.is-warning { border-left:3px solid var(--warn); }
.currency-rule.is-review  { border-left:3px solid var(--unknown); }
.currency-rule.is-valid   { border-left:3px solid var(--ok); }

.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;
}

@media (max-width:620px) {
  .expiry-strip { grid-template-columns:repeat(2,1fr); }
  .expiry-strip-next { grid-column:span 2; }
  /* 1fr is minmax(auto,1fr), and that auto floor is a min-content floor — the
     same trap as the row grid above. One card's min-content was 736px inside a
     332px panel. */
  .expiry-cards, .medical-grid { grid-template-columns:minmax(0,1fr); }
  .currency-contextbar { flex-direction:column; align-items:stretch; }
  .currency-contextbar .button { align-self:flex-start; }
  /* The privilege table becomes stacked rows; three columns do not fit.
     Table layout has to be abandoned wholesale, not just the header: leaving
     the table element in table flow with its thead hidden left the columns
     sized from content and the page scrolled sideways at 375px. */
  .medical-privileges, .medical-privileges tbody { display:block; width:100%; }
  .medical-privileges thead, .medical-privileges caption { display:none; }
  /* minmax(0,1fr), not 1fr: an implicit auto track refuses to shrink below
     its items' min-content width, so the row grew past the card and the page
     scrolled sideways. The explicit zero floor is what lets it fit. */
  .medical-privileges tr {
    display:grid; grid-template-columns:minmax(0,1fr); width:100%;
    gap:3px; padding:9px 0; border-bottom:1px solid var(--border);
  }
  .medical-privileges th, .medical-privileges td {
    display:block; border:0; padding:0; width:auto; min-width:0; max-width:100%;
  }
  .medical-privileges th small, .medical-privileges td small { overflow-wrap:anywhere; }
}

/* A grid or flex item defaults to min-width:auto, so a child with a wide
   min-content width — a three-column table, a nowrap status pill — pushes the
   track past its share and the page scrolls sideways. These floors let the
   tracks shrink, and table-layout:fixed stops the privilege table demanding
   its content's intrinsic width. Found at exactly 1024px by the browser
   check; the symptom was a 5px horizontal scroll. */
.medical-grid > *, .expiry-cards > *, .medical-card > *, .expiry-card > * { min-width:0; }
.medical-card, .expiry-card { min-width:0; }
.medical-card-head, .expiry-card-head { min-width:0; }
.medical-card-head > div, .expiry-card-head > h4 { min-width:0; overflow-wrap:anywhere; }
.medical-privileges { table-layout:fixed; }
.medical-privileges th, .medical-privileges td { overflow-wrap:anywhere; }
/* The two value columns need less room than the label column. */
.medical-privileges thead th:nth-child(2) { width:30%; }
.medical-privileges thead th:nth-child(3) { width:27%; }

/* The global `th` rule sets white-space:nowrap, which is right for the short
   uppercase column headers of a data grid and wrong here: this table's row
   headers are sentences ("Operations requiring a private, recreational or
   student pilot certificate..."), and the nowrap was inherited by their
   nested <small>, holding one line at 695px inside a 248px card. */
.medical-privileges th,
.medical-privileges th small,
.medical-privileges td,
.medical-privileges td small { white-space:normal; }
/* Not a sticky data grid, so it should not inherit the sticky header either. */
.medical-privileges thead th { position:static; }

/* ==========================================================================
   MY AVIATION WORLD — the personal airports screen
   Two tabs, a stat band, the shared map, and ranked lists. The design job is
   to make a pilot's own history feel like the subject of the page while the
   worldwide directory stays one click away and clearly separate.
   ========================================================================== */

.airport-tabs { display:flex; gap:4px; margin:0 0 18px; border-bottom:1px solid var(--border); }
.airport-tab {
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; color:var(--text-3);
  background:none; border:0; border-bottom:2px solid transparent; padding:9px 16px;
  transition:color .12s ease, border-color .12s ease;
}
.airport-tab:hover { color:var(--text); }
.airport-tab:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.airport-tab.is-active { color:var(--accent); border-bottom-color:var(--accent); }

/* ---- the stat band ---- */
.airport-stats {
  display:grid; gap:1px; margin:0 0 14px;
  grid-template-columns:repeat(auto-fit,minmax(min(152px,100%),1fr));
  background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden;
}
.airport-stat { background:var(--surface); padding:12px 14px; display:grid; gap:2px; align-content:start; min-width:0; }
.airport-stat small { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }
.airport-stat strong { font-size:21px; line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.airport-stat span { font-size:11.5px; color:var(--text-3); }
.airport-stat .text-action { justify-self:start; font-size:11.5px; }

.airport-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.airport-filters label { min-width:0; flex:1 1 150px; }
.airport-filters p { flex-basis:100%; margin:0; }

/* ---- map ---- */
.airport-map-panel { margin:0 0 18px; }
.airport-map-head { flex-wrap:wrap; gap:12px; }
/* Shorter than the World screen's map: this one is a summary, not the subject. */
.airport-map { max-height:min(52vh,460px); }

.airport-columns { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); margin:0 0 18px; }
.airport-columns > * { min-width:0; }

/* ---- ranked lists ---- */
.airport-rank { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.airport-rank-row {
  display:grid; grid-template-columns:62px minmax(0,1fr) 72px 62px;
  gap:10px; align-items:center; width:100%; text-align:left;
  font:inherit; color:var(--text); background:none; border:0; cursor:pointer;
  padding:7px 8px; border-radius:var(--radius-sm);
}
.airport-rank-row:hover { background:var(--surface-2); }
.airport-rank-row:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
.airport-rank-code { font-weight:700; font-size:13px; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.airport-rank-name { min-width:0; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.airport-rank-name small { display:block; font-size:11px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; }
.airport-rank-bar { height:6px; border-radius:999px; background:var(--surface-sunk); overflow:hidden; }
.airport-rank-bar span { display:block; height:100%; background:var(--accent); border-radius:999px; }
.airport-rank-count { text-align:right; font-weight:650; font-variant-numeric:tabular-nums; font-size:13px; }
.airport-rank-count small { display:block; font-size:10px; font-weight:400; color:var(--text-3); }

/* ---- where I have flown ---- */
.airport-continents { display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); margin:0 0 12px; }
.airport-continent {
  padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); display:grid; gap:2px; min-width:0;
}
.airport-continent strong { font-size:13px; }
.airport-continent span { font-size:11.5px; color:var(--text-2); }
.airport-continent small { font-size:11px; color:var(--text-3); }

/* ---- milestones ---- */
.airport-milestones { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:11px; }
.airport-milestone { display:grid; gap:4px; }
.airport-milestone-head { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; flex-wrap:wrap; }
.airport-milestone-head span { color:var(--text-3); }
.airport-milestone.is-achieved .airport-milestone-head span { color:var(--ok); font-weight:600; }
.airport-milestone small { font-size:11px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.airport-progress { height:7px; border-radius:999px; background:var(--surface-sunk); overflow:hidden; }
.airport-progress span { display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .25s ease; }
.airport-milestone.is-achieved .airport-progress span { background:var(--ok); }

/* ---- detail card ---- */
.airport-detail { display:grid; gap:14px; }
.airport-detail h4 { margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }
.airport-detail-grid {
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));
  background:var(--border); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
}
.airport-detail-grid > div { background:var(--surface); padding:10px 12px; min-width:0; }
.airport-detail-grid small { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); }
.airport-detail-grid strong { font-size:15px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.airport-detail-lists { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }
.airport-detail-lists > div { display:grid; gap:7px; align-content:start; min-width:0; }
.airport-detail-total {
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:12px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.airport-detail-total > div { display:grid; gap:2px; min-width:0; flex:1 1 280px; }
.airport-detail-total small { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); }
.airport-detail-total strong { font-size:19px; font-variant-numeric:tabular-nums; }

.airport-directory-search { margin:0 0 14px; }

@media (max-width:620px) {
  .airport-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .airport-columns, .airport-continents, .airport-detail-lists { grid-template-columns:minmax(0,1fr); }
  /* The bar is the first thing to go when space is tight; the numbers stay. */
  .airport-rank-row { grid-template-columns:58px minmax(0,1fr) 56px; }
  .airport-rank-bar { display:none; }
  .airport-tab { padding:9px 12px; font-size:13px; }
}


/* ==========================================================================
   CAREER DASHBOARD — Analytics
   The hardest thing to get right here is that a column of overlapping
   figures must not read as a sum. The diamond marker, a distinct left edge on
   overlapping tiles, and a sentence under the grid all say the same thing
   three ways, because a pilot who adds PIC + night + cross-country together
   gets a career total several times too large.
   ========================================================================== */

.career-tabs { display:flex; gap:4px; margin:0 0 18px; border-bottom:1px solid var(--border); overflow-x:auto; }
.career-tab {
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; color:var(--text-3);
  background:none; border:0; border-bottom:2px solid transparent; padding:9px 15px; white-space:nowrap;
  transition:color .12s ease, border-color .12s ease;
}
.career-tab:hover { color:var(--text); }
.career-tab:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.career-tab.is-active { color:var(--accent); border-bottom-color:var(--accent); }

/* ---- filters ---- */
.career-filters { display:grid; gap:11px; margin:0 0 18px; }
.career-filter-row { display:flex; flex-wrap:wrap; gap:10px; }
.career-filter-row label, .career-filter-row > .dt { flex:1 1 138px; min-width:0; }
.career-active-filters {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding-top:10px; border-top:1px solid var(--border);
}
.career-active-filters strong { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }

/* ---- metric tiles ---- */
.career-metrics {
  display:grid; gap:1px; margin:0 0 10px;
  grid-template-columns:repeat(auto-fit,minmax(min(162px,100%),1fr));
  background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden;
}
.career-metric {
  background:var(--surface); padding:13px 15px; display:grid; gap:3px; align-content:start;
  text-align:left; font:inherit; color:var(--text); border:0; cursor:pointer; min-width:0;
  border-left:3px solid transparent; transition:background .12s ease;
}
.career-metric:hover:not(:disabled) { background:var(--surface-2); }
.career-metric:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.career-metric:disabled { cursor:default; }
/* An overlapping category gets its own edge; device time gets another. */
.career-metric.is-overlapping { border-left-color:var(--violet); }
.career-metric.is-separate { border-left-color:var(--unknown); }
.career-metric small { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); display:flex; gap:4px; align-items:center; }
.career-metric strong { font-size:23px; line-height:1.1; font-variant-numeric:tabular-nums; display:flex; gap:5px; align-items:baseline; }
.career-metric strong > span { font-size:11px; font-weight:400; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.career-metric-note { font-size:11px; color:var(--text-3); }
.career-unlogged { font-size:15px; font-weight:500; color:var(--unknown); font-style:italic; }
.career-overlap-mark { color:var(--violet); font-size:10px; }

.career-metric-options {
  display:grid; gap:7px; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  margin:0 0 14px;
}

.career-columns { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); margin:0 0 18px; }
.career-columns > * { min-width:0; }

.career-next { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:0 0 10px; }
.career-next > div { flex:1 1 180px; min-width:0; }
.career-next strong { font-size:14px; }

/* ---- the story ---- */
.career-story { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(206px,100%),1fr)); }
.career-story-card {
  display:grid; gap:3px; text-align:left; font:inherit; color:var(--text); cursor:pointer; min-width:0;
  padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); transition:border-color .12s ease;
}
.career-story-card:hover:not(:disabled) { border-color:var(--accent); }
.career-story-card:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.career-story-card:disabled { cursor:default; opacity:.7; }
.career-story-card small { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }
.career-story-card strong { font-size:17px; line-height:1.2; overflow-wrap:anywhere; }
.career-story-card > span { font-size:11.5px; color:var(--text-2); }

.career-up   { color:var(--ok);     font-variant-numeric:tabular-nums; }
.career-down { color:var(--urgent); font-variant-numeric:tabular-nums; }

.career-split {
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  background:var(--border); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
}
.career-split > div { background:var(--surface); padding:12px 14px; display:grid; gap:2px; min-width:0; }
.career-split small { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); }
.career-split strong { font-size:21px; font-variant-numeric:tabular-nums; }
.career-split span { font-size:11px; color:var(--text-3); }

/* ---- year in review ---- */
.career-review { display:grid; gap:14px; }
.career-review-year { margin:2px 0 0; font-size:40px; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.career-review h4 { margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }
.career-review-grid {
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr));
  background:var(--border); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
}
.career-review-grid > div { background:var(--surface); padding:13px 15px; display:grid; gap:2px; min-width:0; }
.career-review-grid small { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); }
.career-review-grid strong { font-size:22px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.career-review-grid strong > span { font-size:11px; font-weight:400; color:var(--text-3); }
.career-review-grid > div > span { font-size:11px; color:var(--text-3); }

@media (max-width:620px) {
  .career-metrics, .career-review-grid, .career-split { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .career-columns, .career-story { grid-template-columns:minmax(0,1fr); }
  .career-filter-row label, .career-filter-row > .dt { flex-basis:100%; }
  .career-tab { padding:9px 11px; font-size:12.5px; }
  .career-review-year { font-size:30px; }
}

/* ---- the printed Year in Review ---- */
.yir-sheet { display:none; }
@media print {
  .yir-sheet { display:block; padding:16mm 14mm; color:#000; background:#fff; font-family:var(--font); }
  .yir-sheet header { border-bottom:2px solid #000; padding-bottom:8mm; margin-bottom:8mm; }
  .yir-kicker { margin:0; font-size:9pt; letter-spacing:.14em; }
  .yir-sheet h1 { margin:2mm 0 1mm; font-size:34pt; line-height:1; }
  .yir-sheet h2 { font-size:11pt; text-transform:uppercase; letter-spacing:.08em; margin:7mm 0 2mm; }
  .yir-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4mm; }
  .yir-cell { border:1px solid #000; padding:3mm; }
  .yir-cell small { display:block; font-size:7.5pt; text-transform:uppercase; letter-spacing:.06em; }
  .yir-cell strong { display:block; font-size:15pt; }
  .yir-cell span { font-size:8pt; }
  .yir-compare { margin:6mm 0 0; font-size:10pt; }
  .yir-sheet footer { margin-top:10mm; border-top:1px solid #000; padding-top:4mm; font-size:8pt; }
}


/* The global .eyebrow is teal, which clears AA on --surface but measures
   3.87:1 on the --surface-2 ground this bar uses. Scoped to the slate that
   was chosen for small text, rather than changing the accent everywhere. */
.currency-contextbar-main .eyebrow { color:var(--text-3); }


/* ==========================================================================
   AIRPORT AUTOCOMPLETE
   The suggestion list has existed in the code since the original form but was
   never styled, so it rendered as unstyled buttons in the document flow and
   pushed the form around. It now floats over the field it belongs to.
   ========================================================================== */

/* The list is appended to the field's label, which therefore has to be the
   positioning context. */
label:has(> [data-airport-input]) { position:relative; }

.airport-suggest {
  position:absolute; z-index:40; top:100%; left:0; right:0; margin-top:3px;
  display:grid; max-height:232px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
}
.airport-suggest button {
  display:flex; gap:8px; align-items:baseline; text-align:left; width:100%;
  font:inherit; font-size:12.5px; color:var(--text); background:none;
  border:0; border-bottom:1px solid var(--border); padding:8px 11px; cursor:pointer;
}
.airport-suggest button:last-child { border-bottom:0; }
.airport-suggest button:hover,
.airport-suggest button:focus-visible { background:var(--surface-2); outline:none; }
.airport-suggest button:focus-visible { box-shadow:inset 2px 0 0 var(--accent); }
.airport-suggest small {
  color:var(--text-3); font-size:11.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

/* ---- aircraft identification: conflicts and the advanced affordance ---- */
.quick-aircraft.needs-confirmation { border-left-color:var(--warn); }
.quick-aircraft-conflict {
  padding:11px 13px; border-radius:var(--radius-sm);
  background:var(--warn-bg); border:1px solid var(--warn); display:grid; gap:7px;
}
.quick-aircraft-conflict strong { font-size:12.5px; }
.quick-aircraft-conflict ul { margin:0; padding-left:18px; display:grid; gap:3px; }
.quick-aircraft-conflict li { font-size:12px; }
.quick-aircraft-conflict li > span {
  display:inline-block; min-width:92px; color:var(--text-3);
  text-transform:uppercase; font-size:10.5px; letter-spacing:.05em;
}
.chip.caution-chip { background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn); }
.advanced-identify { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:0 0 11px; }
.advanced-identify .subtle { flex:1 1 240px; min-width:0; }
.advanced-identify p { flex-basis:100%; margin:0; }

/* ============================================================================
   PAIRINGS & TRIPS
   The screen's whole job is to keep three kinds of number visibly apart, so
   the styling does the same: scheduled figures read as plain data, actual
   figures carry the signal family, and anything read out of the logbook sits
   on its own emerald ground. "Not recorded" is always visibly not a zero.
   ========================================================================= */

.trip-kpis { margin-top: 14px; }

/* ---- the card wall ---- */
.trip-cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.trip-card {
  display: grid; gap: 9px; align-content: start;
  padding: 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; text-align: left;
  border-left: 3px solid var(--border-strong);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.trip-card:hover, .trip-card:focus-visible {
  border-color: var(--accent); box-shadow: 0 6px 20px rgba(13, 25, 44, .09);
  transform: translateY(-1px); outline: none;
}
.trip-card.is-active    { border-left-color: var(--geo); }
.trip-card.is-planned   { border-left-color: var(--blue-bright); }
.trip-card.is-done      { border-left-color: var(--emerald); }
.trip-card.is-cancelled { border-left-color: var(--unknown); opacity: .78; }
.trip-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.trip-card h4 { margin: 0; font-size: 17px; letter-spacing: .01em; }
.trip-when { margin: 0; color: var(--text-2); font-size: 12.5px; }
.trip-card-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.trip-card-facts > div { display: grid; gap: 1px; }
.trip-card-facts dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3);
}
.trip-card-facts dd { margin: 0; font-size: 13px; font-weight: 600; }
.trip-card-facts dd small { font-weight: 400; color: var(--text-3); }
.trip-route {
  margin: 0; font-size: 11.5px; letter-spacing: .04em; color: var(--text-3);
  font-variant-numeric: tabular-nums; word-break: break-word;
}
.trip-progress { display: grid; gap: 4px; }
.trip-progress-bar {
  height: 4px; border-radius: 99px; background: var(--surface-sunk); overflow: hidden;
}
.trip-progress-bar span { display: block; height: 100%; background: var(--emerald); border-radius: 99px; }
.trip-progress small { color: var(--text-3); font-size: 11px; }
.trip-flag {
  margin: 0; font-size: 12px; color: var(--text-2);
  padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface-sunk);
}
.trip-flag.is-warn { background: var(--warn-bg); color: var(--warn); }

/* ---- the strip of what is coming ---- */
.trip-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trip-strip li {
  display: grid; gap: 2px; padding: 11px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
  grid-template-columns: 110px minmax(0, 1fr); align-items: baseline;
}
.trip-strip li:hover, .trip-strip li:focus-visible { border-color: var(--accent); outline: none; }
.trip-strip li > * { grid-column: 2; }
.trip-strip-date {
  grid-column: 1; grid-row: 1 / span 3; align-self: center;
  font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .03em;
}

/* ---- tabs ---- */
.trip-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.trip-tab {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 13px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); background: transparent; color: var(--text-2);
}
.trip-tab span {
  font-size: 10.5px; padding: 1px 6px; border-radius: 99px;
  background: var(--surface-sunk); color: var(--text-3);
}
.trip-tab.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.trip-tab.is-on span { background: rgba(255, 255, 255, .22); color: inherit; }

/* ---- detail header ---- */
.trip-detail-head { border-left: 3px solid var(--border-strong); }
.trip-detail-head.is-active { border-left-color: var(--geo); }
.trip-detail-head.is-done   { border-left-color: var(--emerald); }
.trip-detail-head.is-cancelled { border-left-color: var(--unknown); }
.trip-detail-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.trip-bookends {
  display: grid; gap: 10px 26px; margin: 14px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.trip-bookends > div { display: grid; gap: 2px; }
.trip-bookends dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3);
}
.trip-bookends dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.trip-bookends dd small { display: block; font-size: 11px; color: var(--text-3); font-variant-numeric: normal; }
.trip-notes { margin-top: 12px; white-space: pre-wrap; }
.trip-problems {
  margin: 12px 0 0; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--warn-bg); border: 1px solid var(--warn); color: var(--warn);
}
.trip-problems ul { margin: 6px 0 0; padding-left: 18px; }
.trip-problems li { font-size: 12.5px; }

.trip-clock { font-variant-numeric: tabular-nums; font-weight: 600; }
.trip-clock small {
  display: block; font-weight: 400; font-size: 10.5px; color: var(--text-3);
  font-variant-numeric: normal; letter-spacing: .02em;
}
/* Never mistakable for a zero. */
.trip-none { color: var(--text-3); font-style: italic; font-size: 12px; }

/* ---- the three total groups ---- */
.trip-total-groups {
  display: grid; gap: 14px; margin-top: 4px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.trip-total-group {
  padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
}
.trip-total-group.is-logbook { background: var(--emerald-soft); border-color: var(--emerald); }
.trip-total-group h4 {
  margin: 0 0 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3);
}
.trip-total-group.is-logbook h4 { color: var(--emerald-ink); }
.trip-total-group dl { display: grid; gap: 5px; margin: 0 0 8px; }
.trip-total-group dl > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.trip-total-group dt { font-size: 12.5px; color: var(--text-2); }
.trip-total-group dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.trip-total-group p { margin: 0; }

/* ---- legs, by day ---- */
.trip-day + .trip-day { margin-top: 18px; }
.trip-day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 9px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
  font-size: 13px; letter-spacing: .02em;
}
.trip-leg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trip-leg {
  padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); border-left: 3px solid var(--border-strong);
  display: grid; gap: 8px;
}
.trip-leg.is-flown { border-left-color: var(--emerald); }
.trip-leg.is-cancelled { border-left-color: var(--unknown); opacity: .72; }
.trip-leg.is-broken { border-left-color: var(--warn); }
.trip-leg-grid {
  display: grid; gap: 12px 22px; align-items: start;
  grid-template-columns: minmax(130px, auto) minmax(150px, 1fr) minmax(200px, auto) minmax(230px, auto);
}
.trip-leg-id { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.trip-leg-no {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 99px;
  background: var(--surface-sunk); color: var(--text-3); font-size: 11px; font-weight: 700;
}
.chip.small-chip { font-size: 10px; padding: 2px 7px; }
.trip-leg-route { display: grid; gap: 2px; }
.trip-leg-route strong { font-size: 15px; letter-spacing: .03em; }
.trip-leg-route span[aria-hidden] { color: var(--text-3); margin: 0 5px; }
.trip-leg-route small { color: var(--text-3); font-size: 11.5px; }
.trip-leg-times { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.trip-leg-times > div { display: grid; gap: 1px; }
.trip-leg-times dt {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3);
}
.trip-leg-times dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
/* Actual readings carry the signal family; scheduled ones stay plain. */
.trip-leg-times.is-actual dt { color: var(--magenta); }
.trip-leg-notes { white-space: pre-wrap; }
.trip-leg-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.trip-leg-actions .text-action.is-primary { color: var(--accent); font-weight: 650; }

/* ---- link picker ---- */
.trip-candidates { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trip-candidates li {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.trip-candidates li > div { display: flex; flex-wrap: wrap; gap: 3px 14px; align-items: baseline; }
.trip-candidates li span { font-size: 13px; font-variant-numeric: tabular-nums; }
.trip-candidates li small { flex-basis: 100%; }

/* ---- duty, rest, layovers ---- */
.trip-sub { margin: 18px 0 9px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.trip-duty-list, .trip-layovers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trip-duty-list li, .trip-layovers li {
  display: flex; flex-wrap: wrap; gap: 3px 18px; align-items: baseline;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 13px; font-variant-numeric: tabular-nums;
}
.trip-duty-list li small, .trip-layovers li small { flex-basis: 100%; font-variant-numeric: normal; }

/* ---- forms ---- */
.trip-triple {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px 12px;
  margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  background: var(--surface-2);
}
.trip-triple legend {
  padding: 0 5px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-3); font-weight: 700;
}
.trip-triple label { margin: 0; }
.trip-triple > small { grid-column: 1 / -1; color: var(--text-3); font-size: 11.5px; }
.trip-empty { display: grid; gap: 11px; justify-items: start; max-width: 62ch; }
.trip-map { aspect-ratio: 2 / 1; }

@media (max-width: 1080px) {
  .trip-leg-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .trip-leg-grid { grid-template-columns: 1fr; }
  .trip-strip li { grid-template-columns: 1fr; }
  .trip-strip li > * { grid-column: 1; }
  .trip-strip-date { grid-row: auto; }
}

/* A recorded trip on the calendar: a band, in the signal family, that carries
   no minutes of its own. The flights flown on it appear as themselves. */
.cat-trip { --cal-colour: var(--magenta); }
.cal-trip.is-recorded { border-left: 3px solid var(--magenta); }
.cal-trip[data-cal-trip] { cursor: pointer; }
.cal-trip[data-cal-trip]:hover, .cal-trip[data-cal-trip]:focus-visible {
  border-color: var(--accent); outline: none;
}
.cal-trip .chip.small-chip { margin-left: 7px; }

/* ============================================================================
   CURRENCY — the statuses that used to all be "needs review"

   Three of them are neutral on purpose. "Not recorded", "insufficient
   evidence" and "needs review" are statements about the records, not verdicts
   about the pilot, so none of them is allowed to read as red. Only an
   established shortfall or a real expiry does. "Not applicable" is muted
   further still, because it is not pending at all.

   Every level carries an icon and a word as well as a colour, so the scale
   survives being read without colour.
   ========================================================================= */

.status-pill.is-not-recorded {
  background: var(--unknown-bg); color: var(--unknown); border-color: var(--border-strong);
  border-style: dashed;
}
.status-pill.is-insufficient { background: var(--unknown-bg); color: var(--unknown); border-color: var(--unknown); }
.status-pill.is-not-applicable {
  background: transparent; color: var(--text-3); border-color: var(--border);
  opacity: .8;
}

.expiry-card.is-not-recorded  { border-left-color: var(--border-strong); border-left-style: dashed; }
.expiry-card.is-insufficient  { border-left-color: var(--unknown); }
.expiry-card.is-not-applicable { border-left-color: var(--border); opacity: .7; }

.currency-rule.is-not-recorded  { border-left-color: var(--border-strong); }
.currency-rule.is-insufficient  { border-left-color: var(--unknown); }

.expiry-strip-cell.is-not-recorded strong { color: var(--text-3); }
.expiry-strip-cell.is-insufficient strong { color: var(--unknown); }

/* ---- what is missing, and where to fix it ---- */
.expiry-card-gaps {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-sunk); border: 1px solid var(--border);
}
.expiry-card-gaps > strong {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-3); margin-bottom: 6px;
}
.expiry-card-gaps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.expiry-card-gaps li { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline; }
.expiry-card-gaps li > span { flex: 1 1 100%; font-size: 12.5px; color: var(--text-2); }
.expiry-card-gaps li small { font-size: 11px; }

/* ---- the evidence behind a status ---- */
.expiry-evidence {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.expiry-evidence > ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.expiry-evidence li {
  display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: baseline;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.expiry-evidence li strong { min-width: 84px; }
.expiry-evidence li small { flex-basis: 100%; font-variant-numeric: normal; }

.expiry-card-rule-detail, .currency-rule-detail { margin-top: 10px; }
.expiry-card-rule-detail summary, .currency-rule-detail summary {
  cursor: pointer; font-size: 11.5px; color: var(--text-3);
}
.expiry-card-rule-detail p { margin: 6px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.55; }
.currency-rule-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; }

/* ---- requirements that do not apply ---- */
.expiry-aside { opacity: .92; }
.expiry-aside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.expiry-aside-list li {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.expiry-aside-list li strong { font-size: 13px; }
.expiry-aside-list li span { flex: 1 1 260px; }

/* ---- flight records one edit away ---- */
.currency-gap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.currency-gap-list li {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.currency-gap-list li > div { flex: 1 1 320px; min-width: 0; }
.currency-gap-list li strong { font-size: 13px; }
.currency-gap-list li ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.currency-gap-list li ul li {
  display: list-item; padding: 0; border: 0; background: none;
  font-size: 12px; color: var(--text-2);
}
.currency-evidence-list .chip.small-chip { margin-left: 5px; }

/* ====================================================================
   DEVICE ADAPTATION
   One interface, deliberately shaped for the device holding it.

   The rules above this section describe the desktop workspace. The rules
   below re-proportion it — they do not merely shrink it. Three ideas do
   most of the work:

     1. Fluid measures. Padding and display type interpolate with the
        viewport through clamp(), so an iPad mini and an iPad Pro each get
        a proportionate page instead of both landing on whichever
        breakpoint they happen to clear.
     2. Content-aware grids. Statistic grids are sized by how narrow a card
        may become before its number stops being readable, not by a column
        count guessed per breakpoint. A 420px phone lands on two columns and
        a 1100px tablet on four, from the same declaration.
     3. Safe areas and real viewport units. Notches, home indicators and
        the mobile keyboard all move the usable rectangle; env() and dvh
        follow it.

   Business logic is untouched by anything in this section.
   ==================================================================== */

/* ---- the page never scrolls sideways ------------------------------------
   Individual wide things (logbook tables, timelines) scroll inside their own
   container. The page itself must not, or every vertical swipe on a phone
   fights a horizontal one. `clip` rather than `hidden` because `hidden`
   on a scroll container ancestor silently breaks `position: sticky` for the
   topbar and table headers. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* ---- fluid shell -------------------------------------------------------- */

.content {
  padding:
    clamp(14px, 2.2vw, 26px)
    max(clamp(14px, 2.6vw, 32px), env(safe-area-inset-right))
    clamp(40px, 6vw, 60px)
    max(clamp(14px, 2.6vw, 32px), env(safe-area-inset-left));
}

.topbar {
  padding-left: max(clamp(14px, 2.6vw, 32px), env(safe-area-inset-left));
  padding-right: max(clamp(14px, 2.6vw, 32px), env(safe-area-inset-right));
  padding-top: clamp(10px, 1.2vw, 14px);
  padding-bottom: clamp(10px, 1.2vw, 14px);
  min-height: 0;
}

/* The drawer slides out from under the status bar on a notched phone. */
@media (max-width: 1024px) {
  .sidebar {
    padding-top: max(26px, calc(env(safe-area-inset-top) + 16px));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
    width: min(282px, 84vw); min-width: 0;
  }
}

/* A scrim behind the open drawer. Without it the sheet reads as part of the
   page rather than above it, and a tap meant to dismiss lands on a control. */
@media (max-width: 1024px) {
  .app-shell:has(.sidebar.open)::before {
    content: ''; position: fixed; inset: 0; z-index: 29;
    background: rgba(5, 12, 24, .52);
    backdrop-filter: blur(1.5px);
  }
}

/* ---- topbar on a narrow screen ------------------------------------------
   The title claims the first row; the controls claim the second as one tidy
   group, instead of wrapping one button at a time into a ragged stack. */
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .topbar-title { flex: 1 1 100%; min-width: 0; }
  .top-actions {
    flex: 1 1 100%; justify-content: flex-start; gap: 8px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* The row may scroll, but the focus ring of the first and last control
       must not be clipped by the container. */
    padding: 2px; margin: -2px;
  }
  .top-actions::-webkit-scrollbar { display: none; }
  .top-actions > * { flex: 0 0 auto; }
  .today-label { display: none; }
  .topbar-title h1 { font-size: clamp(18px, 4.6vw, 23px); }
}

/* The order the controls give way in as the bar narrows. Each step removes
   whichever costs least to lose, and nothing removed here is the only route
   to a feature. */
@media (max-width: 560px) {
  .top-actions .button { font-size: 11px; padding: 8px 11px; }
  /* Printing has a screen of its own (Reports & Printing) one tap away in
     the rail, so the shortcut is the first thing to go. */
  #topPrint { display: none; }
}
@media (max-width: 400px) {
  .topbar-title .eyebrow { display: none; }
  .theme-switch { padding: 2px; }
}

/* Words a narrow topbar cannot afford. They leave the *picture* but never
   the accessible name — `display: none` would shorten "Print logbook" to
   "Print" for a screen reader, which is a worse label, not a shorter one.
   Under ~560px the glyph plus verb is unambiguous on its own. */
@media (max-width: 560px) {
  .label-wide {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Under ~430px the written theme names cost more room than they earn: the
   two swatches plus the pressed state already say which is active, and the
   group is labelled "Colour theme". */
@media (max-width: 430px) {
  .theme-opt { padding: 9px 11px; }
  .theme-opt .theme-label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .theme-dot { width: 13px; height: 13px; }
}

/* ---- the overview hero --------------------------------------------------
   The desktop hero is a wide editorial band. On a phone the same markup had
   grown to most of a screen height before a single statistic appeared, so
   here it compresses: smaller display type, tighter padding, and the three
   figures sitting as one row of three rather than a vertical stack. */
.hero {
  padding: clamp(18px, 2.6vw, 30px) clamp(18px, 3vw, 36px);
  gap: clamp(18px, 2.6vw, 32px);
}
.hero h2 { font-size: clamp(21px, 3.4vw, 34px); margin: 8px 0 10px; }
.hero p { margin-bottom: clamp(14px, 1.8vw, 22px); }

@media (max-width: 1024px) {
  .hero { flex-direction: column; align-items: stretch; }
  .hero-figures {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(8px, 2vw, 20px);
    padding: 14px 0 0; margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .hero-figures > div { text-align: left; }
  .hero-figures strong { font-size: clamp(20px, 5vw, 28px); }
}

@media (max-width: 600px) {
  /* The standfirst explains the product to a first-time visitor on a wide
     screen. On a phone it cost six lines — a quarter of a 568px screen — of
     text the pilot has read before, and pushed the first career total below
     the fold. The headline, the two actions and the three figures say what
     the screen is for; the paragraph was the part that could go. */
  .hero p { display: none; }
  .hero h2 { margin-bottom: 14px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .hero-actions .button { width: 100%; }
}
/* Side by side as soon as two buttons fit on one line. */
@media (min-width: 430px) and (max-width: 600px) {
  .hero-actions { grid-template-columns: 1fr 1fr; }
}

/* ---- content-aware statistic grids -------------------------------------
   `auto-fit` + a readable minimum replaces four hand-tuned column counts.
   The minimum is the narrowest a card may be while its number, label and
   caption all still fit on their own lines. */
.kpis { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
.insight-grid { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }

/* Desktop keeps the deliberate six-across rhythm rather than letting
   auto-fit decide; the numbers line up with the insight row beneath them. */
@media (min-width: 1401px) {
  .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .insight-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* A compact statistics grid for phones: two dense columns, not six tall
   cards. Everything stays legible — only the spacing is spent differently. */
@media (max-width: 600px) {
  .kpis, .insight-grid, .milestone-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .kpi { padding: 12px 12px 11px; border-radius: 10px; }
  .kpi-label { margin-bottom: 7px; letter-spacing: .07em; }
  .kpi-num { font-size: clamp(19px, 6vw, 24px); }
  .insight { padding: 12px; }
  .insight small { margin-bottom: 5px; }
  .insight strong { font-size: 17px; }
  .panel { padding: 15px; border-radius: 11px; margin-bottom: 12px; }
  .section-heading { margin: 22px 0 11px; }
  .section-heading h2 { font-size: clamp(18px, 5.4vw, 24px); }
  .two-col { gap: 12px; margin-top: 12px; }
}

/* Very small Android phones (320–360px CSS px). One column is correct here —
   two would put four characters on a line — but the cards stay compact. */
@media (max-width: 374px) {
  .kpis, .insight-grid, .milestone-summary { grid-template-columns: minmax(0, 1fr); }
  .kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .kpi-label { margin-bottom: 0; }
  .kpi-desc { display: none; }
}

/* ---- wide tables: deliberate, discoverable sideways scrolling -----------
   A logbook row genuinely has more columns than a phone has width. Hiding
   columns would hide records, so the table scrolls — and says so. The fade
   on the right edge appears only while there is more table to reach. */
.table-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: none;
}
@media (max-width: 900px) {
  .table-scroll {
    /* Two background layers pinned to the scroller's own edges: a shadow
       that shows only when content is scrolled out of view on that side.
       Pure CSS, so it needs no scroll listener and cannot go stale. */
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(0, 0, 0, 0)) left center,
      linear-gradient(to left, var(--surface) 30%, rgba(0, 0, 0, 0)) right center,
      radial-gradient(farthest-side at 0 50%, rgba(10, 22, 44, .16), rgba(0, 0, 0, 0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(10, 22, 44, .16), rgba(0, 0, 0, 0)) right center;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 13px 100%, 13px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* The sideways-scrolling hint. On a pointer device it is noise — the
   scrollbar says the same thing — so it exists only on narrow screens. */
.scroll-hint { display: none; }
@media (max-width: 900px) {
  .scroll-hint { display: block; margin: 0 0 5px; color: var(--text-3); }
}

/* The virtualized logbook grid is its own horizontal scroller, with sticky
   pinned columns, so it cannot take the gradient treatment above — the
   gradients would scroll with the pinned cells. It gets the same message a
   different way: a shadow on the pinned edge, and more of the screen. */
@media (max-width: 900px) {
  /* 68vh of a 667px phone is 453px, most of which the sticky topbar and the
     filter panel have already spent. dvh follows the real viewport. */
  .fgrid { max-height: min(74dvh, 720px); }
}
@media (max-width: 560px) {
  .fgrid { max-height: min(78dvh, 720px); }
  .fgrid-scroll { min-height: 180px; }
}

/* ---- forms, dialogs and the mobile keyboard ----------------------------
   `dvh` tracks the viewport the keyboard actually leaves behind; `vh` does
   not, which is why a sheet's action row used to sit under the keyboard on
   iOS. The fallback line keeps older engines working. */
@media (max-width: 680px) {
  .modal { padding: 0; align-items: stretch; }
  /* The panel is already a flex column whose middle section scrolls, so the
     heading and action row stay put on their own. What they need is a height
     that follows the keyboard rather than the window. */
  .modal-panel {
    height: 100vh; max-height: 100vh;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0; width: 100%;
  }
  .modal-head { padding: 14px 16px; }
  .modal-content { padding: 16px; }
  .modal-actions {
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }
  .modal-actions .button { flex: 1 1 auto; }
}

/* iOS zooms the page when a focused field's text is under 16px. Keeping
   entry fields at 16px on touch-primary screens removes the zoom — and with
   it the stranded, half-scrolled layout it leaves behind. */
@media (pointer: coarse) and (max-width: 860px) {
  input, select, textarea { font-size: 16px; }
  input[type="date"], input[type="time"] { min-height: 44px; }
}

/* ---- touch targets -----------------------------------------------------
   Two rules, because width and pointer each catch cases the other misses.
   A 1366px iPad Pro is touch-operated at a desktop width, so the pointer
   query is the one that matters there; a browser that reports a fine pointer
   while running on a 390px screen (desktop engines in device emulation, and
   some Android browsers) still needs reachable controls, which is what the
   width query is for. */
@media (max-width: 860px) {
  .button, .icon-btn, .nav-btn, .theme-opt, .file-button { min-height: 40px; }
  .icon-btn { min-width: 40px; }
}
@media (pointer: coarse) {
  .button, .icon-btn, .nav-btn, .theme-opt, .text-action, .file-button {
    min-height: 44px;
  }
  .icon-btn { min-width: 44px; }
}
/* In either case a row's own affordances stay row-sized: the cell padding
   already separates them, and inflating them would double a dense table's
   height for no gain in reachability. */
@media (max-width: 860px), (pointer: coarse) {
  td .icon-btn, td .button, .fgrid-cell .icon-btn, .fgrid-cell .button {
    min-height: 32px; min-width: 32px;
  }
}

/* ---- tablet: the shape most often gets squeezed ------------------------- */

/* iPad portrait (768–834pt). Wide enough for two statistic columns and a
   two-up form, too narrow for the rail. */
@media (min-width: 601px) and (max-width: 1024px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .world-layout { grid-template-columns: minmax(0, 1fr); }
  /* Three across, not the four auto-fit would choose: the six career totals
     then fill two complete rows instead of leaving a ragged four-and-two. */
  .kpis, .insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* iPad landscape and Windows tablets (1025–1280). The rail returns, so the
   page gets narrower than its width suggests — grids must account for the
   244px the rail takes, which is why these counts are lower than the
   viewport alone would imply. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .content { padding-left: clamp(16px, 2vw, 24px); padding-right: clamp(16px, 2vw, 24px); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two-col { grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); }
}

/* A short landscape phone has no vertical room to spend on an editorial
   band, so the hero becomes a single compact line of context. */
@media (max-height: 460px) and (orientation: landscape) {
  .hero { padding: 14px 18px; }
  .hero h2 { font-size: 19px; margin: 4px 0 6px; }
  .hero p { display: none; }
  .topbar { position: static; }
}

/* ---- keyboard navigation survives all of the above ---------------------
   Every rule in this section moves things; none of them may make a focused
   control invisible. A sticky topbar covers whatever scrollIntoView brings
   to y=0, so anchored scrolling keeps clear of it. */
:root { scroll-padding-top: 92px; }
@media (max-width: 860px) { :root { scroll-padding-top: 132px; } }

/* ====================================================================
   DATE AND TIME ENTRY — src/views/dateTimeField.js

   One control, used everywhere a day or a clock time is asked for:

     [ 13 Nov 2026         ] [▦] [Today]
       13 November 2026

   a box you type into, the browser's own calendar behind the ▦, and a
   one-tap Today. The line underneath states what the typed text was taken
   to mean — it is the control's answer, not decoration, so it carries real
   colour when it reports a problem.
   ==================================================================== */

.dt { display: block; min-width: 0; }

.dt-label {
  display: block; font-size: 11px; font-weight: 600; color: var(--text-2);
  margin-bottom: 5px;
}

.dt-row {
  display: flex; align-items: stretch; gap: 6px; min-width: 0;
}

.dt-typed {
  flex: 1 1 auto; min-width: 0;
  font-variant-numeric: tabular-nums;
}

/* The calendar button. The native date input inside it is the control that
   actually opens the picker — it is laid over the button at zero opacity
   rather than hidden, because a `display: none` date input cannot be opened
   on any platform, and `showPicker()` is both newer and refused outside a
   user gesture in some engines. */
.dt-pick {
  position: relative; flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 38px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-2); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.dt-pick:hover { background: var(--surface-sunk); color: var(--text); }
.dt-pick:focus-within { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
.dt-pick > span { font-size: 15px; line-height: 1; pointer-events: none; }
.dt-pick input[type="date"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; padding: 0; border: 0; background: transparent;
  min-height: 0;
}

.dt-today {
  flex: 0 0 auto; padding: 0 11px; white-space: nowrap;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-2);
  font: 600 11px var(--font-body); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.dt-today:hover { background: var(--surface-sunk); color: var(--text); }
.dt-today:focus-visible { outline: none; box-shadow: var(--ring); }

.dt-zone {
  flex: 0 0 auto; align-self: center; padding: 0 8px;
  font: 700 10px var(--font-body); letter-spacing: .08em;
  color: var(--text-3);
}

/* The reading line. Neutral while it is only a hint, confident once it has
   resolved a value, and loud when the text cannot be read at all. */
.dt-note {
  display: block; margin-top: 5px; font-size: 11px; line-height: 1.45;
  color: var(--text-3);
}
.dt-note.is-ok { color: var(--text-2); }
.dt-note.is-error { color: var(--danger); font-weight: 600; }

/* A duration box says which of the two logbook conventions it read, and
   names the other one when the same keystrokes have a second meaning —
   8.30 is 8 h 18 min, and a pilot who meant 8 h 30 min needs to be told. */
.duration-reading {
  display: block; margin-top: 4px; font-size: 11px; color: var(--text-3);
}
.duration-reading .duration-alt { color: var(--warn); }

/* Inside a form grid the control replaces a bare <label>, so it has to carry
   the same vertical rhythm its neighbours do. */
.form-grid > .dt, .quick-grid > .dt, .trip-leg-grid > .dt { align-self: start; }

@media (max-width: 560px) {
  /* Today is a word worth its width on a phone — it is the one tap that
     replaces a scroll through a date wheel — but the row must still fit. */
  .dt-today { padding: 0 9px; }
  .dt-pick { width: 42px; }
}

/* The OUT/OFF/ON/IN grid is four rows of four fields, so the shared date and
   time boxes have to sit tighter there than they do in a form. The reading
   line stays — it is how a pilot confirms 2130 was understood — but the
   generic "type 2130" hint is suppressed once per row rather than shown
   sixteen times. */
.quick-oooi-point {
  grid-template-columns: 48px minmax(104px, 1fr) minmax(148px, 1.3fr) minmax(76px, .7fr);
  align-items: start;
}
.quick-oooi-label { align-self: center; }
.quick-oooi-point > input[type="text"] { align-self: center; }
.quick-oooi .dt-note { font-size: 10.5px; margin-top: 3px; }
.quick-oooi .dt-note:not(.is-ok):not(.is-error) { display: none; }
.quick-oooi .dt-zone { display: none; }

@media (max-width: 620px) {
  /* Four columns of 80px are four unreadable columns. One point per block,
     with its label across the top. */
  .quick-oooi-point { grid-template-columns: 1fr 1fr; }
  .quick-oooi-label { grid-column: 1 / -1; text-align: left; padding-left: 8px; }
  .quick-oooi-point > .dt-date { grid-column: 1 / -1; }
}

/* ====================================================================
   NATIVE CONTROLS FOLLOW THE THEME

   Without `color-scheme` the browser paints its own widgets — a select's
   closed face and its option list, a date picker's calendar, scrollbars,
   checkboxes — for a LIGHT page, whatever the page's own colours are. In
   Neon that produced light text on the browser's white select face: axe
   measured 1.12:1 on the career filters, which is text nobody can read.

   Declaring the scheme is the root fix, and it reaches every native widget
   at once, including the calendar behind the shared date control. The
   explicit per-theme declarations also mean the choice follows the pilot's
   toggle rather than only the operating system.
   ==================================================================== */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

/* Belt and braces for the one family of selects that had slipped past every
   styled selector in this file and was relying on the browser's defaults. */
.career-filter-row select,
.career-filter-row input[type="search"],
.career-filter-row input[type="text"] {
  display: block; width: 100%; min-height: 38px; margin-top: 5px;
  padding: 6px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 12px;
}
.career-filter-row label { font-size: 11px; font-weight: 600; color: var(--text-2); }

/* ====================================================================
   CUSTOMIZE PRINTED LOGBOOK — src/views/printCustomizer.js

   The screen where a pilot arranges the columns on their paper page. The
   budget bar is the heart of it: a printed ledger either fits the paper or
   it does not, and the pilot is shown which rather than discovering it on
   the sheet.
   ==================================================================== */

.print-customizer .print-sub {
  margin: 22px 0 8px; font: 600 13px var(--font-display);
  letter-spacing: -.01em; color: var(--text);
}

/* ---- the width budget ---- */
.print-budget { margin: 14px 0 4px; }
.print-budget-bar {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--surface-sunk); border: 1px solid var(--border);
}
.print-budget-bar span { display: block; height: 100%; background: var(--teal); transition: width .2s; }
.print-budget.is-tight .print-budget-bar span { background: var(--warn); }
.print-budget.is-over .print-budget-bar span { background: var(--danger); }
.print-budget-read { margin: 7px 0 0; font-size: 12px; color: var(--text-2); }
.print-budget.is-over .print-budget-read strong { color: var(--danger); }
.print-budget-advice {
  margin: 6px 0 0; padding-left: 18px; font-size: 12px;
  color: var(--text-2); line-height: 1.6;
}

/* ---- the chosen columns, in print order ---- */
.print-column-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px;
}
.print-column {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: minmax(76px, max-content) minmax(0, 1fr) 54px max-content;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2);
}
.print-column.is-required { border-style: dashed; }
.print-column-head {
  font: 700 11px var(--font-body); letter-spacing: .06em;
  color: var(--text); white-space: nowrap;
}
.print-column-name { font-size: 12px; color: var(--text-2); min-width: 0; }
.print-column-width {
  font-size: 11px; color: var(--text-3); text-align: right;
  font-variant-numeric: tabular-nums;
}
.print-column-moves { display: flex; align-items: center; gap: 2px; }
.print-column-moves .icon-btn { width: 30px; min-width: 30px; height: 30px; min-height: 30px; font-size: 15px; }
.print-column-lock {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-3); padding: 0 8px; white-space: nowrap;
}

/* ---- the picker ---- */
.print-picker { display: grid; gap: 6px; }
.print-picker-toggle {
  width: 100%; text-align: left; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-2); font: 600 12px var(--font-body); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.print-picker-toggle:hover { background: var(--surface-sunk); color: var(--text); }
.print-picker-toggle span {
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.print-picker-options {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 6px; padding: 8px 0 4px;
}
.print-picker-option {
  display: grid; gap: 2px; text-align: left; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); cursor: pointer;
}
.print-picker-option:hover { border-color: var(--accent); background: var(--surface-sunk); }
.print-picker-option strong { font: 700 11px var(--font-body); letter-spacing: .05em; color: var(--text); }
.print-picker-option small { font-size: 11px; color: var(--text-3); }

/* ---- saved layouts ---- */
.print-presets { display: grid; gap: 6px; }
.print-preset { display: flex; align-items: stretch; gap: 6px; }
.print-preset-apply {
  flex: 1 1 auto; display: grid; gap: 2px; text-align: left; min-width: 0;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); cursor: pointer;
}
.print-preset-apply:hover { border-color: var(--accent); }
.print-preset-apply strong { font-size: 12.5px; color: var(--text); }
.print-preset-apply small { font-size: 11px; color: var(--text-3); }
.print-preset-save {
  display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-top: 10px;
}
.print-preset-name { flex: 1 1 220px; min-width: 0; font-size: 11px; color: var(--text-2); }
.print-preset-name input {
  display: block; width: 100%; min-height: 38px; margin-top: 5px; padding: 6px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 12px;
}

/* ---- the summary strip on the print panel ---- */
.print-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px; margin: 14px 0;
}
.print-summary > div {
  padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); min-width: 0;
}
.print-summary small {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-3); margin-bottom: 5px;
}
.print-summary strong { display: block; font-size: 17px; letter-spacing: -.02em; color: var(--text); }
.print-summary span { display: block; font-size: 11px; color: var(--text-3); margin-top: 3px; }
.print-summary > div.is-over { border-color: var(--danger); }
.print-summary > div.is-over strong { color: var(--danger); }

/* ---- on-screen preview ----
   The real sheets, scaled to the panel. `zoom` rather than `transform:
   scale()` so the sheets still occupy their own height and the panel
   scrolls normally; a transform would leave the container the full paper
   size with the drawing shrunk inside it. */
.print-preview-scroll {
  overflow: auto; background: var(--surface-sunk);
  border: 1px solid var(--border); border-radius: 10px; padding: 12px;
  max-height: 72vh;
}
.print-preview-stage { width: var(--preview-width); zoom: .52; }
.print-preview-stage .print-sheet {
  background: #fff; margin: 0 auto 10px; box-shadow: var(--shadow-sm);
  page-break-after: auto; break-after: auto;
}

@media (max-width: 720px) {
  .print-column {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: 'head moves' 'name moves' 'width moves';
    row-gap: 2px;
  }
  .print-column-head { grid-area: head; }
  .print-column-name { grid-area: name; }
  .print-column-width { grid-area: width; text-align: left; }
  .print-column-moves { grid-area: moves; }
  .print-preview-stage { zoom: .3; }
}

/* ====================================================================
   A PRINTED SHEET IS PAPER, NOT A THEME

   The global `th`/`td` rules give every table the interface's surface
   colour and a sticky header. On a ledger sheet that is wrong twice over:
   in Neon the cover's totals table painted itself dark — which is what
   would have gone on the paper — and a sticky header has no meaning on a
   sheet that does not scroll. The ledger table sets its own ruled colours
   and keeps them; everything else on a sheet is black on white.
   ==================================================================== */
.print-sheet { background: #fff; color: #11250f; }
.print-sheet th, .print-sheet td { position: static; }
.print-sheet table:not(.ledger-table) th,
.print-sheet table:not(.ledger-table) td {
  background: #fff; color: #11250f; border-color: #c3d4c5;
}
.print-sheet table:not(.ledger-table) th { text-transform: none; letter-spacing: 0; }

/* ====================================================================
   PAPER LOGBOOK REVIEW — src/views/scanReview.js

   The page on the left, the drafts read from it on the right. Below about
   900px they become two tabs, because neither half is usable at half of a
   phone screen and showing both badly serves nobody.
   ==================================================================== */

.scan-busy {
  margin: 0 0 12px; padding: 12px 14px; font-size: 12.5px; color: var(--text-2);
}

.scan-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px; margin: 14px 0 8px;
}
.scan-tile {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); min-width: 0;
}
.scan-tile small {
  display: block; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-3); margin-bottom: 4px;
}
.scan-tile strong { display: block; font-size: 20px; letter-spacing: -.03em; color: var(--text); }
.scan-tile span { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.scan-tile.is-ok { border-color: var(--teal); }
.scan-tile.is-warn { border-color: var(--warn); }
.scan-tile.is-warn strong { color: var(--warn); }

.scan-dateorder {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  padding: 10px 12px; margin: 10px 0; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 12px; color: var(--text-2); line-height: 1.5;
}
.scan-dateorder label { display: flex; gap: 6px; align-items: center; font-size: 11px; }
.scan-dateorder select {
  min-height: 34px; padding: 4px 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 12px;
}

/* ---- pages ---- */
.scan-pagestrip {
  display: flex; gap: 7px; overflow-x: auto; padding: 4px 2px 10px;
  scrollbar-width: thin;
}
.scan-pagetab {
  flex: 0 0 auto; display: grid; gap: 2px; text-align: left; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
  color: var(--text-2); cursor: pointer; min-width: 150px;
}
.scan-pagetab.is-active { border-color: var(--accent); background: var(--surface-sunk); color: var(--text); }
.scan-pagetab strong { font-size: 12px; }
.scan-pagetab small { font-size: 10.5px; color: var(--text-3); }

.scan-pagebar {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.scan-pagebar-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.scan-source {
  font: 700 10px var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  color: var(--text-2);
}
.scan-source-pdf-text { border-color: var(--teal); color: var(--teal); }
.scan-source-ocr { border-color: var(--warn); color: var(--warn); }

/* ---- the two halves ---- */
.scan-halves {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 14px; margin-top: 14px; align-items: start;
}
.scan-half-tabs { display: none; }
.scan-half { min-width: 0; }
.scan-half-page {
  position: sticky; top: 92px; max-height: calc(100dvh - 140px); overflow: auto;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); padding: 10px;
}

.scan-page-image { position: relative; }
.scan-page-image img { display: block; width: 100%; height: auto; transform: rotate(var(--rot)); }
.scan-page-mark {
  position: absolute; border: 2px solid var(--accent);
  background: rgba(75, 127, 220, .16); border-radius: 3px; pointer-events: none;
}
.scan-page-empty { padding: 24px; color: var(--text-3); }

/* The page map stands in for a picture when a PDF was read from its own
   text: every line where it sat on the sheet, so pointing at a draft still
   points at something real. */
.scan-page-map { display: grid; gap: 2px; font-size: 11px; }
.scan-map-line {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: baseline;
  text-align: left; padding: 4px 7px; border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--text-2); cursor: pointer; font: inherit;
}
.scan-map-line:hover { background: var(--surface); }
.scan-map-line.is-selected { border-color: var(--accent); background: var(--surface); color: var(--text); }
.scan-map-kind {
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
}
.scan-map-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.scan-kind-balance .scan-map-kind, .scan-kind-unresolved .scan-map-kind { color: var(--warn); }
.scan-kind-balance, .scan-kind-furniture, .scan-kind-blank { opacity: .62; }

/* ---- filters and drafts ---- */
.scan-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.scan-filter {
  padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-3); font: 600 11px var(--font-body); cursor: pointer;
}
.scan-filter.is-active { border-color: var(--accent); color: var(--text); background: var(--surface-sunk); }
.scan-bulk { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }

.scan-draft {
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 7px;
  background: var(--surface); overflow: hidden;
}
.scan-draft.is-open { border-color: var(--accent); }
.scan-draft.scan-status-verified { border-left: 3px solid var(--teal); }
.scan-draft.scan-status-correct { border-left: 3px solid var(--warn); }
.scan-draft.scan-status-excluded { opacity: .62; }
.scan-draft-head {
  width: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  text-align: left; padding: 9px 12px; background: transparent; border: 0;
  color: var(--text); cursor: pointer; font: inherit;
}
.scan-draft-line { font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.scan-draft-summary {
  flex: 1 1 160px; min-width: 0; font-size: 11.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scan-chip {
  font: 700 9.5px var(--font-body); letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  color: var(--text-3); white-space: nowrap;
}
.scan-review { border-color: var(--border-strong); }
.scan-verified { border-color: var(--teal); color: var(--teal); }
.scan-correct, .scan-duplicate { border-color: var(--warn); color: var(--warn); }
.scan-excluded { opacity: .7; }
.scan-edited { border-color: var(--accent); color: var(--accent); }

.scan-draft-body { padding: 0 12px 12px; border-top: 1px solid var(--border); }
.scan-draft-why { margin: 10px 0; font-size: 12px; color: var(--text-2); }
.scan-cells {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 8px; margin: 11px 0;
}
.scan-cell { display: grid; gap: 3px; font-size: 10.5px; color: var(--text-3); min-width: 0; }
.scan-cell span { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.scan-cell input {
  min-height: 36px; padding: 5px 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text);
  font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 0;
}
.scan-cell.is-edited input { border-color: var(--accent); }
.scan-cell small { color: var(--text-3); font-size: 10px; }
.scan-draft-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.scan-draft-body code {
  font-size: 10.5px; background: var(--surface-sunk); padding: 1px 5px; border-radius: 3px;
  word-break: break-word;
}

.scan-dup {
  margin: 10px 0; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--warn); background: var(--warn-bg);
}
.scan-dup p { margin: 0 0 8px; font-size: 12px; color: var(--text); }
.scan-dup-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.scan-commit {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.scan-commit > div { flex: 1 1 280px; min-width: 0; }
.scan-confirm-list { margin: 10px 0; padding-left: 20px; line-height: 1.7; }

@media (max-width: 900px) {
  .scan-halves { grid-template-columns: minmax(0, 1fr); }
  .scan-half-tabs {
    display: flex; gap: 6px; grid-column: 1 / -1; margin-bottom: 4px;
  }
  .scan-half-tabs button {
    flex: 1 1 auto; padding: 9px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--text-3); font: 600 12px var(--font-body);
  }
  .scan-half-tabs button.is-active { border-color: var(--accent); color: var(--text); background: var(--surface-sunk); }
  .scan-half-page { position: static; max-height: 56dvh; }
  .scan-halves[data-half="drafts"] .scan-half-page { display: none; }
  .scan-halves[data-half="page"] .scan-half-drafts { display: none; }
}

/* ====================================================================
   WHO THIS PILOT IS — src/core/pilotRoles.js, src/views/currency.js

   The roles bar sits directly under the summary, above the operating
   context, because it is the thing that decides which cards appear at all.
   ==================================================================== */

.currency-roles {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
  justify-content: space-between; padding: 12px 14px; margin: 0 0 12px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2);
}
.currency-roles.is-incomplete { border-color: var(--warn); }
.currency-roles-main { flex: 1 1 320px; min-width: 0; }
/* The global eyebrow is teal, which clears AA on --surface but measures
   below it on the --surface-2 ground this bar uses — the same correction
   already applied to the operating-context bar beside it. */
.currency-roles-main .eyebrow { color: var(--text-3); }
.currency-roles-main p { margin: 3px 0 0; font-size: 13px; color: var(--text); }
.currency-roles-notes {
  margin: 8px 0 0; padding-left: 18px; font-size: 11.5px;
  color: var(--text-3); line-height: 1.6;
}

.currency-roles-form h4 {
  margin: 18px 0 4px; font: 600 13px var(--font-display); color: var(--text);
}
.currency-roles-form h4:first-child { margin-top: 0; }
.currency-role-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 8px; margin: 10px 0 4px;
}
.currency-role-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.currency-role-option {
  display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
  cursor: pointer; min-width: 0;
}
.currency-role-option:hover { border-color: var(--accent); }
.currency-role-option input { margin-top: 2px; flex: 0 0 auto; }
.currency-role-option span { display: grid; gap: 2px; min-width: 0; }
.currency-role-option strong { font-size: 12.5px; color: var(--text); }
.currency-role-option small { font-size: 11px; color: var(--text-3); line-height: 1.45; }

/* ---- one role at a time, or all of them ---- */
.currency-roleswitch {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px;
}
.currency-roleswitch-opt {
  padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-3); font: 600 11.5px var(--font-body);
}
.currency-roleswitch-opt.is-active {
  border-color: var(--accent); color: var(--text); background: var(--surface-sunk);
}
.currency-roleswitch .subtle { flex: 1 1 260px; min-width: 0; }

/* ---- named groups of rules ---- */
.currency-group { margin: 0 0 22px; }
.currency-group-head { margin: 0 0 10px; }
.currency-group-head h3 {
  margin: 0; font: 600 17px var(--font-display); letter-spacing: -.02em; color: var(--text);
}
.currency-group-head p { margin: 3px 0 0; }

@media (max-width: 620px) {
  .currency-roles { flex-direction: column; align-items: stretch; }
  .currency-role-grid, .currency-role-grid.is-compact { grid-template-columns: minmax(0, 1fr); }
}

/* ====================================================================
   IMPORT SCHEDULE — src/views/scheduleImport.js

   Sits above the trip list on Pairings & Trips. Closed it is one line and
   a button; open it is the review, which is the part that matters.
   ==================================================================== */

.sched-closed .panel-head { margin-bottom: 0; }

.sched-upload {
  display: grid; gap: 9px; justify-items: start;
  padding: 12px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.sched-upload p { margin: 0; max-width: 72ch; }

.sched-busy, .sched-parse {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 12px; color: var(--text-2); line-height: 1.6;
}
.sched-format {
  display: inline-block; margin-right: 8px; padding: 2px 8px;
  border-radius: var(--r-pill); border: 1px solid var(--teal);
  color: var(--teal); font: 700 9.5px var(--font-body);
  letter-spacing: .07em; text-transform: uppercase;
}

/* ---- what this roster changed ---- */
.sched-counts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 9px; margin: 0 0 16px;
}
.sched-count {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2);
}
.sched-count strong { display: block; font-size: 20px; letter-spacing: -.03em; color: var(--text); }
.sched-count span { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.sched-count.is-empty { opacity: .55; }
.sched-count.sched-new:not(.is-empty) { border-color: var(--teal); }
.sched-count.sched-changed:not(.is-empty) { border-color: var(--warn); }
.sched-count.sched-cancelled:not(.is-empty) { border-color: var(--danger); }

.sched-section {
  margin: 20px 0 8px; font: 600 14px var(--font-display); color: var(--text);
}

/* ---- one draft trip ---- */
.sched-draft {
  border: 1px solid var(--border); border-radius: 11px; margin-bottom: 9px;
  background: var(--surface); overflow: hidden;
}
.sched-draft.is-chosen { border-color: var(--accent); }
.sched-draft.is-cancelled { opacity: .78; border-style: dashed; }
.sched-draft-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex-wrap: wrap;
}
.sched-pick { margin: 0; flex: 0 0 auto; }
.sched-draft-title {
  flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; text-align: left;
  background: transparent; border: 0; color: var(--text); cursor: pointer; font: inherit;
}
.sched-draft-title strong { font-size: 13.5px; }
.sched-draft-title small { font-size: 11px; color: var(--text-3); }
.sched-badge {
  font: 700 9.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  color: var(--text-3); white-space: nowrap;
}
.sched-badge.sched-new { border-color: var(--teal); color: var(--teal); }
.sched-badge.sched-changed { border-color: var(--warn); color: var(--warn); }
.sched-badge.sched-cancelled { border-color: var(--danger); color: var(--danger); }

.sched-protected, .sched-note, .sched-gaps {
  margin: 0 12px 10px; padding: 9px 11px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.6; color: var(--text-2);
  border: 1px solid var(--border); background: var(--surface-2);
}
.sched-protected { border-color: var(--warn); background: var(--warn-bg); }

.sched-diff { margin: 0 12px 10px; }
.sched-diff h5 {
  margin: 0 0 5px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-3);
}
.sched-diff table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.sched-diff th {
  text-align: left; font-weight: 600; color: var(--text-3); padding: 3px 8px 3px 0;
  text-transform: none; letter-spacing: 0; font-size: 11.5px; border: 0; background: none;
}
.sched-diff td { padding: 3px 8px 3px 0; border: 0; }
.sched-was { color: var(--text-3); text-decoration: line-through; }
.sched-now { color: var(--text); font-weight: 600; }

.sched-draft-body { padding: 0 12px 12px; border-top: 1px solid var(--border); }

/* ---- the trip as days ---- */
.sched-timeline { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 7px; }
.sched-timeline li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center;
}
.sched-day {
  display: grid; gap: 1px; font: 700 11px var(--font-body); color: var(--text-2);
}
.sched-day small { font-size: 10px; color: var(--text-3); font-weight: 400; }
.sched-legs { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-leg {
  display: grid; gap: 1px; padding: 5px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.sched-leg strong { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sched-leg small { font-size: 10px; color: var(--text-3); }

.sched-legs-table { width: 100%; border-collapse: collapse; font-size: 11.5px; min-width: 580px; }

.sched-commit {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.sched-commit > div:first-child { flex: 1 1 280px; min-width: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 620px) {
  .sched-timeline li { grid-template-columns: minmax(0, 1fr); }
  .sched-draft-head { align-items: flex-start; }
}

/* ====================================================================
   WORLD CLOCKS — src/views/zulu.js, src/core/zoneSearch.js

   Search, reorder, save. The clocks themselves were already here; what was
   missing was any way to choose them.
   ==================================================================== */

.zone-search { margin: 0 0 14px; display: grid; gap: 8px; }
.zone-search .search-wrap { max-width: 460px; }

.zone-results {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 6px;
}
.zone-results button {
  width: 100%; display: grid; gap: 2px; text-align: left; padding: 8px 11px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--text); cursor: pointer; font: inherit; min-width: 0;
}
.zone-results button:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-sunk); }
.zone-results button:disabled { opacity: .5; cursor: not-allowed; }
.zone-results strong { font-size: 12.5px; }
.zone-results small {
  font-size: 10.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Each tile now carries its local date and its reordering controls, so it
   needs a little more room than the time alone did. */
.clock-tile { position: relative; }
.clock-date {
  display: block; font-size: 10.5px; color: var(--text-2);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.clock-controls {
  display: flex; gap: 2px; justify-content: center; margin-top: 7px;
}
.clock-controls .icon-btn {
  width: 28px; min-width: 28px; height: 28px; min-height: 28px; font-size: 14px;
}
/* The remove button used to float in the corner; it is now one of three
   controls that belong together. */
.clock-tile .clock-remove { position: static; opacity: 1; }

.clock-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}

/* ---- comparing two zones ---- */
.zone-compare {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.zone-compare h4 {
  margin: 0 0 8px; font: 600 13px var(--font-display); color: var(--text);
}
.zone-compare-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; margin-bottom: 10px;
}
.zone-compare-row label { font-size: 11px; color: var(--text-2); }
.zone-compare-row select {
  display: block; width: 100%; min-height: 38px; margin-top: 4px; padding: 6px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 12px;
}
.zone-compare-result {
  margin: 0; padding: 11px 13px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13px; line-height: 1.6; font-variant-numeric: tabular-nums;
}
.zone-compare-result .subtle { display: block; margin-top: 4px; font-variant-numeric: normal; }

@media (max-width: 560px) {
  .zone-results { grid-template-columns: minmax(0, 1fr); }
  .zone-compare-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Install on a Home Screen — src/views/installApp.js --------------
   Three platforms, three different answers. The steps are numbered because
   on iOS they are genuinely a procedure, not a button. */
.install-panel p { margin: 0 0 10px; line-height: 1.7; color: var(--text-2); }
.install-steps {
  margin: 0 0 10px; padding-left: 22px; line-height: 1.9; color: var(--text-2);
}
.install-steps strong { color: var(--text); }
.install-caution { margin-top: 14px; }
.install-caution p { margin: 0 0 8px; }
.install-caution .button { margin-top: 4px; }

/* ====================================================================
   THE PILOT ACCOUNT SCREENS — src/views/pilotAuth.js

   One card, one screen at a time, with a column beside it on a wide
   display saying the thing a pilot most needs to know: they do not need an
   account to fly. Below 900px the column moves underneath, because the
   form is what they came for.
   ==================================================================== */

.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 18px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}

.auth-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-sm);
  padding: clamp(18px, 3vw, 30px);
  min-width: 0;
}
.auth-head { margin-bottom: 18px; }
.auth-head h2 {
  margin: 6px 0 6px; font: 600 clamp(20px, 3vw, 27px)/1.2 var(--font-display);
  letter-spacing: -.025em; color: var(--text);
}
.auth-head p { margin: 0; max-width: 54ch; }

.auth-form { display: grid; gap: 14px; }
.auth-form h4 {
  margin: 8px 0 0; font: 600 14px var(--font-display); color: var(--text);
}
.auth-form .form-grid { gap: 12px; }

.auth-field { display: grid; gap: 5px; min-width: 0; }
.auth-field > span { font-size: 12px; font-weight: 600; color: var(--text-2); }
.auth-field input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font-size: 14px; min-width: 0;
}
.auth-field input:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
.auth-field small { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

/* Show/hide is a real button with a pressed state, not an icon that
   silently swaps an input type: somebody using a screen reader has to be
   able to tell whether their password is currently on display. */
.auth-password-row { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.auth-password-row input { flex: 1 1 auto; }
.auth-reveal {
  flex: 0 0 auto; padding: 0 13px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-2);
  font: 600 12px var(--font-body);
}
.auth-reveal:hover { background: var(--surface-sunk); color: var(--text); }
.auth-reveal[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.auth-reveal:focus-visible { outline: none; box-shadow: var(--ring); }

/* The meter encourages; it never refuses. A long passphrase of ordinary
   words is a good password and nothing here calls it a bad one. */
.auth-meter { display: grid; gap: 4px; }
.auth-meter-bar {
  height: 4px; border-radius: 99px; overflow: hidden;
  background: var(--surface-sunk); border: 1px solid var(--border);
}
.auth-meter-bar i { display: block; height: 100%; background: var(--danger); transition: width .18s; }
.auth-meter.is-2 .auth-meter-bar i { background: var(--warn); }
.auth-meter.is-3 .auth-meter-bar i,
.auth-meter.is-4 .auth-meter-bar i { background: var(--teal); }
.auth-meter small { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

.auth-remember { align-items: flex-start; gap: 9px; }
.auth-remember span { display: grid; gap: 2px; font-size: 12.5px; color: var(--text-2); }
.auth-remember small { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

.auth-submit { min-height: 46px; font-size: 13px; justify-self: stretch; }
.auth-spinner {
  width: 13px; height: 13px; margin-right: 8px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  display: inline-block; animation: auth-spin .7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .auth-spinner { animation: none; border-top-color: currentColor; opacity: .5; }
}

.auth-alts {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}

.auth-error, .auth-notice {
  margin: 0 0 16px; padding: 11px 13px; border-radius: 9px;
  font-size: 13px; line-height: 1.6;
}
.auth-error { border: 1px solid var(--danger); background: var(--danger-bg); color: var(--text); }
.auth-notice { border: 1px solid var(--teal); background: var(--surface-2); color: var(--text-2); }

.auth-wait p, .auth-done p { margin: 0 0 12px; line-height: 1.7; color: var(--text-2); }
.auth-hints {
  margin: 0 0 14px; padding-left: 20px; line-height: 1.8;
  font-size: 12.5px; color: var(--text-3);
}
.auth-done { text-align: center; }
.auth-tick {
  font-size: 40px; line-height: 1; color: var(--teal);
  margin: 0 0 10px !important;
}
.auth-done .auth-alts { justify-content: center; border-top: 0; }

.auth-identity {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.auth-identity h4 { margin: 4px 0 2px; font: 600 16px var(--font-display); color: var(--text); }

.auth-local { margin-top: 18px; }
.auth-local p { margin: 0 0 8px; }

.auth-aside {
  padding: 18px; border-radius: 14px; min-width: 0;
  border: 1px solid var(--border); background: var(--surface-2);
}
.auth-aside h3 {
  margin: 0 0 8px; font: 600 15px var(--font-display); color: var(--text);
}
.auth-aside p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.7; color: var(--text-2); }

@media (max-width: 900px) {
  .auth-page { grid-template-columns: minmax(0, 1fr); }
}

/* ====================================================================
   THE WELCOME AND FEATURES & HELP — src/views/onboarding.js

   The feature cards are the point of both screens, so they get the space:
   a responsive grid that goes to one column on a phone, and a state chip
   that is readable rather than decorative. A pilot has to be able to tell
   "working now" from "not switched on yet" at a glance and without relying
   on colour alone, so each chip carries its own words.
   ==================================================================== */

.onb-page { max-width: 1080px; margin: 0 auto; }
.onb-card { padding: clamp(18px, 3vw, 32px); }

/* The stepper is a progress indication, not navigation: it never clicks.
   Three short labels, and on a narrow screen only the numbers. */
.onb-steps {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  margin: 0 0 16px; padding: 0; list-style: none;
}
.onb-steps li {
  display: flex; gap: 7px; align-items: center;
  font-size: 12px; font-weight: 600; color: var(--text-3);
}
.onb-steps li + li::before {
  content: ''; width: 18px; height: 1px; background: var(--border-strong);
  margin-right: 3px;
}
.onb-steps li > span {
  display: grid; place-items: center; width: 21px; height: 21px;
  border-radius: 50%; font-size: 11px;
  border: 1px solid var(--border-strong); background: var(--surface);
}
.onb-steps li.is-current { color: var(--text); }
.onb-steps li.is-current > span { border-color: var(--accent); color: var(--accent); }
.onb-steps li.is-done > span {
  border-color: var(--teal); background: var(--teal); color: #fff;
}
@media (max-width: 560px) {
  .onb-steps li { font-size: 0; gap: 0; }
  .onb-steps li > span { font-size: 11px; }
}

.onb-head { margin-bottom: 22px; }
.onb-head h2 {
  margin: 6px 0 8px; font: 600 clamp(21px, 3.4vw, 30px)/1.18 var(--font-display);
  letter-spacing: -.025em; color: var(--text);
}
.onb-head p { margin: 0; max-width: 64ch; line-height: 1.7; color: var(--text-2); }

.onb-group { margin: 0 0 22px; }
.onb-group h3 {
  display: flex; gap: 8px; align-items: baseline;
  margin: 0 0 10px; font: 600 13px var(--font-display);
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-2);
}

.feat-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.feat-card {
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  padding: 14px 15px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.feat-card p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--text-2); }
.feat-head {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  align-items: baseline; justify-content: space-between;
}
.feat-head h4 { margin: 0; font: 600 14px var(--font-display); color: var(--text); }

/* Colour is the second signal. The words are the first. */
.feat-state {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 99px;
  font: 600 10.5px/1.5 var(--font-body);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-3);
}
.feat-state.is-ready { border-color: var(--teal); color: var(--geo-ink); }
.feat-state.is-limited { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.feat-state.is-off { border-color: var(--border-strong); color: var(--text-3); }

.feat-card.is-limited { border-left: 3px solid var(--warn); }
.feat-card.is-off { border-left: 3px solid var(--border-strong); }

/* A limit is the sentence that stops a pilot assuming. It is set apart so
   it cannot be read as part of the description. */
.feat-limit {
  margin-top: auto !important; padding-top: 7px;
  border-top: 1px dashed var(--border-strong);
  font-size: 12px !important; color: var(--text-3) !important;
}
.feat-limit strong { color: var(--text-2); }
.feat-card .text-action { align-self: flex-start; margin-top: 2px; }

.onb-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}
.onb-actions .button { min-height: 44px; }

.onb-form { display: grid; gap: 14px; }
.onb-form .subtle.small { margin: 0; }

/* The three first steps: big targets, because this is the one screen where
   a pilot is being asked to choose rather than to read. */
.onb-first {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.onb-first-card {
  display: grid; gap: 6px; text-align: left; cursor: pointer;
  padding: 17px 18px; border-radius: 13px; min-height: 108px;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); font: inherit; align-content: start;
  transition: border-color .15s, transform .15s, background .15s;
}
.onb-first-card strong { font: 600 15px var(--font-display); }
.onb-first-card small { font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.onb-first-card > span {
  justify-self: end; margin-top: auto; font-size: 16px; color: var(--accent);
}
.onb-first-card:hover {
  border-color: var(--accent); background: var(--surface); transform: translateY(-2px);
}
.onb-first-card:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .onb-first-card { transition: none; }
  .onb-first-card:hover { transform: none; }
}

/* The questions. Open one, read it, close it — no page of prose. */
.help-answers details {
  border-top: 1px solid var(--border); padding: 4px 0;
}
.help-answers details:first-of-type { border-top: 0; }
.help-answers summary {
  cursor: pointer; padding: 11px 2px; list-style: none;
  font: 600 13.5px var(--font-display); color: var(--text);
}
.help-answers summary::-webkit-details-marker { display: none; }
.help-answers summary::before {
  content: '+'; display: inline-block; width: 16px;
  color: var(--accent); font-weight: 700;
}
.help-answers details[open] summary::before { content: '\2212'; }
.help-answers summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
.help-answers details > p {
  margin: 0 0 11px; padding-left: 16px; max-width: 72ch;
  font-size: 13px; line-height: 1.75; color: var(--text-2);
}

/* ====================================================================
   THE SYNC CENTER — src/views/syncCenter.js

   Status is the whole point of this screen, so the words carry it and the
   colour only agrees with them. Every pill shows its own label; none of
   them relies on a legend, a hue, or a dot a colour-blind pilot cannot
   tell from the one beside it.

   The conflict panel puts both versions side by side on a wide display
   and stacks them on a phone — never truncates one, because the pilot is
   being asked to choose between them and cannot choose what they cannot
   read.
   ==================================================================== */

.sync-pill {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  font: 600 11px/1.6 var(--font-body); white-space: nowrap;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-3);
}
.sync-pill.is-synced   { border-color: var(--geo-ink);  color: var(--geo-ink); }
.sync-pill.is-waiting  { border-color: var(--border-strong); color: var(--text-2); }
.sync-pill.is-syncing  { border-color: var(--accent); color: var(--accent); }
.sync-pill.is-failed   { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.sync-pill.is-conflict { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }

.sync-tiles {
  display: grid; gap: 10px; margin-top: 4px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr));
}
.sync-tile {
  display: grid; gap: 3px; padding: 13px 14px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface-2);
  border-top: 3px solid var(--border-strong);
}
.sync-tile strong { font: 600 clamp(20px, 2.6vw, 26px)/1 var(--font-display); color: var(--text); }
.sync-tile span { font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.sync-tile.is-synced   { border-top-color: var(--geo-ink); }
.sync-tile.is-syncing  { border-top-color: var(--accent); }
.sync-tile.is-conflict { border-top-color: var(--warn); }
.sync-tile.is-failed   { border-top-color: var(--danger); }

/* What each word asserts, written out. A pilot should never have to infer
   what "Synced" is promising them. */
.sync-legend {
  display: grid; gap: 8px 14px; margin: 0;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
}
.sync-legend dt { margin: 0; }
.sync-legend dd { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--text-2); }
@media (max-width: 560px) {
  .sync-legend { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sync-legend dd { margin-bottom: 8px; }
}

.sync-conflicts { border-left: 3px solid var(--warn); }
.sync-conflict {
  padding: 15px 0; border-top: 1px solid var(--border); min-width: 0;
}
.sync-conflict:first-of-type { border-top: 0; }
.sync-conflict header { display: grid; gap: 3px; margin-bottom: 11px; }
.sync-conflict header strong { font: 600 14.5px var(--font-display); color: var(--text); }
.sync-conflict header small { font-size: 12px; color: var(--text-3); }

.sync-versions {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.sync-version {
  padding: 12px 13px; border-radius: 10px; min-width: 0;
  border: 1px solid var(--border); background: var(--surface-2);
}
.sync-version h4 {
  margin: 0 0 8px; font: 600 12px var(--font-display);
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-2);
}
.sync-version p { margin: 0; }

.sync-fields { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sync-fields th {
  width: 9ch; padding: 3px 8px 3px 0; text-align: left; vertical-align: top;
  font-weight: 600; color: var(--text-3); white-space: nowrap;
}
.sync-fields td {
  padding: 3px 0; color: var(--text); vertical-align: top;
  word-break: break-word; overflow-wrap: anywhere;
}

/* No pre-selected option and no "resolve all". Clicking through a bulk
   default is how a logbook quietly loses a flight, and the only reason a
   conflict exists is that no rule could decide it. */
.sync-choices {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.sync-choices .button { min-height: 42px; }

.sync-failures { margin: 0; padding: 0; list-style: none; }
.sync-failures li {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--border);
}
.sync-failures li:first-child { border-top: 0; }
.sync-failures strong { font: 600 13px var(--font-display); color: var(--text); }
.sync-failures span { flex: 1 1 14ch; min-width: 0; font-size: 12.5px; color: var(--text-3); }

.sync-promises { margin: 0; padding-left: 20px; }
.sync-promises li { margin-bottom: 9px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.sync-promises strong { color: var(--text); }


/* ====================================================================
   THE PUBLIC WELCOME AND THE DEMO — src/views/gate.js

   Built around real screenshots of the application, so the page has to
   carry images well at every width: the showcase alternates sides on a
   desktop, stacks on a phone, and every picture below the fold is
   lazy-loaded with an explicit aspect ratio so nothing jumps as it lands.

   A signed-out visitor sees this and nothing else — the rail is hidden by
   [data-mode="guest"] on the root, so there is no workspace to glimpse
   even for a frame. The demo keeps the rail, because the point is to walk
   round the real screens; it gains a bar at the top of each one instead.
   ==================================================================== */

:root[data-mode="guest"] .sidebar,
:root[data-mode="guest"] #drawerToggle { display: none !important; }
:root[data-mode="guest"] .app-shell { grid-template-columns: minmax(0, 1fr) !important; }

/* Sign in is top-right on every public and demo screen. */
.gate-header-actions {
  display: flex; gap: 8px; align-items: center; margin-left: auto;
}
.gate-header-actions .button { min-height: 40px; font-size: 12.5px; padding: 0 15px; }
.gate-header-tag {
  padding: 3px 9px; border-radius: 99px; white-space: nowrap;
  font: 700 10px var(--font-body); letter-spacing: .12em;
  border: 1px solid var(--warn); background: var(--warn-bg); color: var(--warn);
}
@media (max-width: 560px) {
  .gate-header-actions .button { padding: 0 11px; font-size: 11.5px; min-height: 38px; }
  .gate-header-tag { display: none; }
}

.gate { max-width: 1180px; margin: 0 auto; display: grid; gap: clamp(40px, 7vw, 92px); }
.gate img { max-width: 100%; height: auto; }

/* ---- hero ---- */

.gate-hero {
  display: grid; gap: clamp(26px, 4vw, 52px); align-items: center;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  padding-top: clamp(10px, 3vw, 30px);
}
.gate-logo { width: clamp(210px, 26vw, 290px); display: block; }
.gate-tagline {
  margin: 9px 0 0; font: 700 10px var(--font-body);
  letter-spacing: .32em; color: var(--geo-ink); text-transform: uppercase;
}
.gate-hero h1 {
  margin: 20px 0 14px; max-width: 20ch;
  font: 600 clamp(30px, 4.6vw, 52px)/1.08 var(--font-display);
  letter-spacing: -.035em; color: var(--text);
}
.gate-lede {
  margin: 0; max-width: 46ch; font-size: clamp(14.5px, 1.4vw, 17px);
  line-height: 1.62; color: var(--text-2);
}
.gate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 13px; }
.gate-primary { min-height: 54px; padding: 0 28px; font-size: 15px; }
.gate-secondary { min-height: 54px; padding: 0 22px; font-size: 14px; }
.gate-fineprint { margin: 0; max-width: 44ch; font-size: 12.5px; line-height: 1.6; color: var(--text-3); }

/* The hero screenshot is tilted a touch so it reads as a device rather than
   a flat rectangle, and squared up on a phone where the tilt only costs
   width. */
.gate-hero-shot figure { margin: 0; }
.gate-hero-shot img,
.gate-feature-shot img {
  display: block; width: 100%; aspect-ratio: 1280 / 860; object-fit: cover;
  object-position: top center; border-radius: 13px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 22px 48px -24px rgba(13, 25, 44, .34), 0 2px 8px -2px rgba(13, 25, 44, .12);
  background: var(--surface-2);
}
:root[data-theme="dark"] .gate-hero-shot img,
:root[data-theme="dark"] .gate-feature-shot img {
  box-shadow: 0 22px 52px -22px rgba(0, 0, 0, .66), 0 0 0 1px rgba(124, 244, 253, .07);
}
.gate-hero-shot img { transform: perspective(1400px) rotateY(-5deg) rotateX(1.5deg); }
.gate-hero-shot figcaption {
  margin-top: 11px; font: 700 9.5px var(--font-body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); text-align: center;
}
@media (max-width: 900px) {
  .gate-hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .gate-hero h1, .gate-lede, .gate-fineprint { max-width: 100%; margin-inline: auto; }
  .gate-logo { margin-inline: auto; }
  .gate-actions { justify-content: center; }
  .gate-hero-shot img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-hero-shot img { transform: none; }
}

/* ---- the four-fact strip ---- */

.gate-strip {
  display: grid; gap: 1px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  border: 1px solid var(--border); border-radius: 13px; background: var(--border);
}
.gate-strip > div {
  display: grid; gap: 3px; padding: 17px 18px; background: var(--surface-2);
}
.gate-strip strong {
  font: 600 clamp(19px, 2.3vw, 25px)/1 var(--font-display); color: var(--text);
}
.gate-strip span { font-size: 12px; line-height: 1.5; color: var(--text-3); }

/* ---- section headings ---- */

.gate-section-head { max-width: 62ch; margin-bottom: clamp(22px, 3vw, 38px); }
.gate-section-head h2 {
  margin: 7px 0 10px; font: 600 clamp(23px, 3.2vw, 34px)/1.16 var(--font-display);
  letter-spacing: -.028em; color: var(--text);
}
.gate-section-head p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.gate-limits-note {
  margin-top: 11px !important; padding: 10px 13px; border-radius: 9px;
  border: 1px solid var(--warn); background: var(--warn-bg);
  font-size: 13px !important; line-height: 1.6;
}

/* ---- the showcase ---- */

.gate-showcase { display: grid; gap: clamp(34px, 5vw, 70px); }
.gate-feature {
  display: grid; gap: clamp(20px, 3vw, 40px); align-items: center;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
}
.gate-feature.is-flipped .gate-feature-shot { order: 2; }
.gate-feature.is-wide { grid-template-columns: minmax(0, 1fr); }
.gate-feature.is-wide .gate-feature-copy { max-width: 64ch; }
.gate-feature.is-wide .gate-feature-shot { order: 0; }
.gate-feature-copy h3 {
  margin: 7px 0 11px; font: 600 clamp(19px, 2.4vw, 27px)/1.2 var(--font-display);
  letter-spacing: -.025em; color: var(--text);
}
.gate-feature-copy p { margin: 0; font-size: 13.8px; line-height: 1.7; color: var(--text-2); }
.gate-feature-limit {
  margin-top: 12px !important; padding-top: 10px;
  border-top: 1px dashed var(--border-strong);
  font-size: 12.8px !important; color: var(--text-3) !important;
}
.gate-feature-limit strong { color: var(--text-2); }
.gate-feature-shot { margin: 0; min-width: 0; }
@media (max-width: 860px) {
  .gate-feature, .gate-feature.is-flipped { grid-template-columns: minmax(0, 1fr); }
  .gate-feature.is-flipped .gate-feature-shot { order: 0; }
}

/* ---- the demo card ---- */

.gate-demo-card {
  display: grid; gap: 18px; align-items: center; padding: clamp(20px, 3.4vw, 34px);
  grid-template-columns: minmax(0, 1fr) max-content;
  border: 1px solid var(--border-strong); border-radius: 16px;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
}
.gate-demo-card h2 {
  margin: 7px 0 11px; font: 600 clamp(20px, 2.7vw, 28px)/1.18 var(--font-display);
  letter-spacing: -.025em; color: var(--text);
}
.gate-demo-card p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.7; color: var(--text-2); }
.gate-demo-card .button { min-height: 52px; padding: 0 24px; white-space: nowrap; }
@media (max-width: 720px) {
  .gate-demo-card { grid-template-columns: minmax(0, 1fr); }
  .gate-demo-card .button { width: 100%; }
}

/* ---- the full catalogue ---- */

.gate-group { margin-bottom: 22px; }
.gate-group h3 {
  display: flex; gap: 8px; align-items: baseline; margin: 0 0 11px;
  font: 600 12.5px var(--font-display); text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-2);
}
.gate-list {
  display: grid; gap: 10px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr));
}
.gate-list li {
  display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2); min-width: 0;
}
.gate-list strong { font: 600 14px var(--font-display); color: var(--text); }
.gate-list span { font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.gate-list em {
  font-size: 12px; line-height: 1.55; color: var(--text-3); font-style: normal;
  padding-top: 6px; border-top: 1px dashed var(--border-strong);
}

/* ---- the four promises ---- */

.gate-promise-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
}
.gate-promise-grid > div {
  padding: 18px 19px; border-radius: 13px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.gate-promise-grid h4 {
  margin: 0 0 8px; font: 600 14.5px var(--font-display); color: var(--text);
}
.gate-promise-grid p { margin: 0; font-size: 13px; line-height: 1.68; color: var(--text-2); }

/* ---- the closing call ---- */

.gate-footer {
  text-align: center; padding: clamp(26px, 4vw, 48px) 0 10px;
  border-top: 1px solid var(--border);
}
.gate-footer h2 {
  margin: 0 0 10px; font: 600 clamp(24px, 3.4vw, 36px)/1.14 var(--font-display);
  letter-spacing: -.03em; color: var(--text);
}
.gate-footer .gate-lede { margin-inline: auto; }
.gate-footer .gate-actions { justify-content: center; }
.gate-smallprint {
  margin: 10px auto 0; max-width: 58ch; font-size: 11.5px; line-height: 1.6;
  color: var(--text-3);
}
.gate-inline-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.gate-unclaimed { border-left: 3px solid var(--warn); }
.gate-unclaimed p { margin: 0 0 10px; line-height: 1.7; color: var(--text-2); }

/* ---- the demo bar, on every demo screen ---- */

.demo-bar {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  margin-bottom: 18px; padding: 11px 15px; border-radius: 11px;
  border: 1px solid var(--warn); background: var(--warn-bg);
}
.demo-bar strong {
  font: 700 11px var(--font-body); letter-spacing: .12em;
  text-transform: uppercase; color: var(--warn); white-space: nowrap;
}
.demo-bar > span:not(.demo-bar-actions) {
  flex: 1 1 22ch; min-width: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}
.demo-bar-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.demo-bar-actions .button { min-height: 38px; font-size: 12px; padding: 0 13px; }
@media print { .demo-bar, .gate-header-actions { display: none; } }

/* ---- the prompt a protected action opens ---- */

.gate-prompt {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 18px; padding: 19px 21px; border-radius: 14px;
  border: 1px solid var(--accent); background: var(--surface-2);
  box-shadow: 0 14px 34px -20px rgba(13, 25, 44, .3);
  animation: gate-prompt-in .22s ease-out;
}
@keyframes gate-prompt-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .gate-prompt { animation: none; } }
.gate-prompt-body { flex: 1 1 auto; min-width: 0; }
.gate-prompt-body h3 {
  margin: 6px 0 9px; font: 600 17px var(--font-display); color: var(--text);
}
.gate-prompt-body p { margin: 0 0 4px; font-size: 13.2px; line-height: 1.68; color: var(--text-2); }
.gate-prompt-close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-3); font-size: 13px; line-height: 1;
}
.gate-prompt-close:hover { color: var(--text); background: var(--surface-sunk); }
.gate-prompt-close:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- the auth aside's new list ---- */

.auth-aside-list { margin: 0 0 12px; padding-left: 18px; }
.auth-aside-list li {
  margin-bottom: 7px; font-size: 12.5px; line-height: 1.6; color: var(--text-2);
}
.auth-aside-list strong { color: var(--text); }

/* Public authentication gate: logbook actions exist only for a verified pilot. */
:root:not([data-mode="pilot"]) #topAdd,
:root:not([data-mode="pilot"]) #topPrint { display: none !important; }