/* ═══════════════════════════════════════════════════════════════════════════
   NaviaCAIR user guide — shared theme + print layer          (NAVIA-450)

   Before this file, every page in /guide carried its own copy of the theme
   scaffolding: 10 pages had the full light/dark layer, 12 were fixed navy,
   and 3 had no print rules at all. The palettes were byte-identical wherever
   they existed, so they are consolidated here rather than re-copied.

   Two archetypes share this sheet, and they use different variable names
   because they were built at different times:

     .guide          — a step-by-step guide page. Document tokens are scoped
                       to .guide as --g-bg / --g-surface / --g-ink / …
     .guide-section  — a hub or section index. Chrome tokens are read from
                       :root as --g-bg / --g-fg / --g-rule / …

   Both names are kept so neither archetype's component CSS has to change.
   They never collide: a page is one archetype or the other, and the guide
   document tokens are scoped inside .guide, which hub pages do not have.

   Page chrome (--g-page-*) is the single source of truth for both, and the
   hub aliases below point at it. All values come from assets/tokens.css
   where a token exists; the exceptions are called out in place.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. Page chrome — every /guide URL ─────────────────────────────────────
   Navy is the default and the dark answer. data-theme overrides either way.
   tokens.css is shared with the whole site and is not touched.            */
:root {
  color-scheme: dark;
  --g-page-bg:      var(--navy);
  --g-page-fg:      var(--navy-fg);
  --g-page-fg-soft: var(--navy-fg-soft);
  /* --navy-fg-mute is 4.03:1 on navy; nudged to 4.99:1 so meta lines,
     contents rows and the footer clear AA. (NAVIA-372) */
  --g-page-fg-mute: #9A8E77;
  --g-page-rule:    var(--rule-navy);
  --g-page-accent:  var(--amber-bright);
  --g-tag-bg:       rgba(197,117,24,0.12);
  --g-tag-line:     rgba(197,117,24,0.25);
  --g-grain-a:      rgba(242,235,220,0.025);
  --g-grain-b:      rgba(242,235,220,0.015);
  --g-nav-bg:       rgba(14,34,56,0.82);
  --g-nav-bg-solid: rgba(14,34,56,0.97);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --g-page-bg:      var(--cream);
    --g-page-fg:      var(--ink);
    --g-page-fg-soft: var(--ink-soft);
    --g-page-fg-mute: var(--ink-mute);
    --g-page-rule:    var(--rule);
    --g-page-accent:  var(--amber-deep);
    --g-tag-bg:       rgba(197,117,24,0.10);
    --g-tag-line:     rgba(142,83,16,0.30);
    --g-grain-a:      rgba(26,22,16,0.030);
    --g-grain-b:      rgba(26,22,16,0.018);
    /* The injected nav stays navy in both themes, so it needs more opacity
       over cream to keep its own text legible. */
    --g-nav-bg:       rgba(14,34,56,0.94);
    --g-nav-bg-solid: rgba(14,34,56,0.98);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --g-page-bg:      var(--cream);
  --g-page-fg:      var(--ink);
  --g-page-fg-soft: var(--ink-soft);
  --g-page-fg-mute: var(--ink-mute);
  --g-page-rule:    var(--rule);
  --g-page-accent:  var(--amber-deep);
  --g-tag-bg:       rgba(197,117,24,0.10);
  --g-tag-line:     rgba(142,83,16,0.30);
  --g-grain-a:      rgba(26,22,16,0.030);
  --g-grain-b:      rgba(26,22,16,0.018);
  --g-nav-bg:       rgba(14,34,56,0.94);
  --g-nav-bg-solid: rgba(14,34,56,0.98);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --g-page-bg:      var(--navy);
  --g-page-fg:      var(--navy-fg);
  --g-page-fg-soft: var(--navy-fg-soft);
  --g-page-fg-mute: #9A8E77;
  --g-page-rule:    var(--rule-navy);
  --g-page-accent:  var(--amber-bright);
  --g-tag-bg:       rgba(197,117,24,0.12);
  --g-tag-line:     rgba(197,117,24,0.25);
  --g-grain-a:      rgba(242,235,220,0.025);
  --g-grain-b:      rgba(242,235,220,0.015);
  --g-nav-bg:       rgba(14,34,56,0.82);
  --g-nav-bg-solid: rgba(14,34,56,0.97);
}


/* ── 2. Hub aliases — .guide-section pages ─────────────────────────────────
   The hub archetype's component CSS reads these shorter names. They are
   aliases, not a second palette: every one resolves to the chrome above. */
:root {
  --g-bg:      var(--g-page-bg);
  --g-fg:      var(--g-page-fg);
  --g-fg-soft: var(--g-page-fg-soft);
  --g-fg-mute: var(--g-page-fg-mute);
  --g-mute:    var(--g-page-fg-mute);   /* older section-index name */
  --g-rule:    var(--g-page-rule);
  --g-accent:  var(--g-page-accent);
}


/* ── 3. Shared chrome ──────────────────────────────────────────────────────
   tokens.css hard-wires this chrome to the navy foreground tokens, so it is
   re-pointed at the themed vars here for the whole library at once.       */
body {
  background: var(--g-page-bg);
  color: var(--g-page-fg);
  background-image:
    radial-gradient(var(--g-grain-a) 1px, transparent 1px),
    radial-gradient(var(--g-grain-b) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
}

.eyebrow       { color: var(--g-page-fg-mute); }
.folio         { color: var(--g-page-fg-mute); }
.folio em      { color: var(--g-page-fg); }
.folio__rule   { border-top-color: var(--g-page-rule); }
.foot          { border-top-color: var(--g-page-rule); }
.foot__disc    { color: var(--g-page-fg-soft); }
.foot__row     { color: var(--g-page-fg-mute); }
.foot__row a   { color: var(--g-page-fg); }
.foot__row a:hover { color: var(--g-page-accent); }
body .site-social-links a { color: var(--g-page-fg-soft); }
body .site-social-links a:hover { color: var(--g-page-accent); }

:focus-visible { outline: 2px solid var(--g-page-accent); outline-offset: 3px; border-radius: 4px; }

/* The injected nav (/nav.html) is shared with the public site and is not
   ours to edit, so it is re-skinned by id. */
#site-nav .nav { background: var(--g-nav-bg); }
#site-nav .nav.is-scrolled { background: var(--g-nav-bg-solid); }
#site-nav .nav__group-menu-inner { background: var(--g-nav-bg-solid); }

.breadcrumb            { padding: 22px 0 0; font-size: 14px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumb a          { color: var(--g-page-fg-soft); display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.breadcrumb a:hover    { color: var(--g-page-fg); }
.breadcrumb .sep,
.breadcrumb span       { color: var(--g-page-fg-mute); }


/* ── 4. Guide document tokens — .guide pages ───────────────────────────────
   Scoped to .guide so hub pages are unaffected. Dark is the default; the
   light answer below wins on specificity wherever a page still carries its
   own legacy .guide{…} block.                                            */
.guide {
  --g-bg:          #0A1A2B;
  --g-surface:     #15304B;
  --g-surface-alt: #1A3956;

  --g-ink:         #F2EBDC;
  --g-ink-soft:    #B7C3D1;
  --g-ink-muted:   #8493A4;

  --g-accent:      #48C0AC;   /* the app's teal — the guide is about the app */
  --g-accent-ink:  #0A1A2B;
  --g-accent-soft: rgba(72, 192, 172, 0.16);
  --g-accent-line: rgba(72, 192, 172, 0.34);

  --g-amber:       #E59A3A;
  --g-amber-soft:  rgba(229, 154, 58, 0.14);
  --g-amber-line:  rgba(229, 154, 58, 0.34);

  --g-line:        rgba(242, 235, 220, 0.16);
  --g-line-soft:   rgba(242, 235, 220, 0.09);

  --g-radius:      14px;

  --g-font-sans: var(--body);
  --g-font-ui:   var(--mono);

  /* App tokens. The screen mockups reproduce the real app, which always
     renders dark navy + teal. These are FIXED in both themes and in print:
     a screenshot doesn't restyle itself to match the reader or the printer.
     Never override them below. */
  --g-app-bg:          #0E2238;
  --g-app-surface:     #15304B;
  --g-app-surface-alt: #1A3956;
  --g-app-ink:         #F2EBDC;
  --g-app-ink-soft:    #B7C3D1;
  --g-app-ink-muted:   #8493A4;
  --g-app-accent:      #48C0AC;
  --g-app-accent-ink:  #0A1A2B;
  --g-app-divider:     rgba(242, 235, 220, 0.11);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .guide {
    --g-bg: #F1E9D7; --g-surface: #E9DFC7; --g-surface-alt: #E2D6B9;
    --g-ink: #1A1610; --g-ink-soft: #4A4136; --g-ink-muted: #6E6555;
    --g-accent: #0F5A4C; --g-accent-ink: #FFFFFF;
    --g-accent-soft: rgba(15, 90, 76, 0.12); --g-accent-line: rgba(15, 90, 76, 0.40);
    --g-amber: #7A4409; --g-amber-soft: rgba(122, 68, 9, 0.11); --g-amber-line: rgba(122, 68, 9, 0.40);
    --g-line: rgba(26, 22, 16, 0.18); --g-line-soft: rgba(26, 22, 16, 0.10);
  }
}
:root[data-theme="light"] .guide {
  --g-bg: #F1E9D7; --g-surface: #E9DFC7; --g-surface-alt: #E2D6B9;
  --g-ink: #1A1610; --g-ink-soft: #4A4136; --g-ink-muted: #6E6555;
  --g-accent: #0F5A4C; --g-accent-ink: #FFFFFF;
  --g-accent-soft: rgba(15, 90, 76, 0.12); --g-accent-line: rgba(15, 90, 76, 0.40);
  --g-amber: #7A4409; --g-amber-soft: rgba(122, 68, 9, 0.11); --g-amber-line: rgba(122, 68, 9, 0.40);
  --g-line: rgba(26, 22, 16, 0.18); --g-line-soft: rgba(26, 22, 16, 0.10);
}
/* Explicit dark override has to beat a light *preference*, so it needs the
   same specificity as the media-query block above. */
:root[data-theme="dark"] .guide {
  --g-bg: #0A1A2B; --g-surface: #15304B; --g-surface-alt: #1A3956;
  --g-ink: #F2EBDC; --g-ink-soft: #B7C3D1; --g-ink-muted: #8493A4;
  --g-accent: #48C0AC; --g-accent-ink: #0A1A2B;
  --g-accent-soft: rgba(72, 192, 172, 0.16); --g-accent-line: rgba(72, 192, 172, 0.34);
  --g-amber: #E59A3A; --g-amber-soft: rgba(229, 154, 58, 0.14); --g-amber-line: rgba(229, 154, 58, 0.34);
  --g-line: rgba(242, 235, 220, 0.16); --g-line-soft: rgba(242, 235, 220, 0.09);
}

.guide { color: var(--g-ink); }


/* ── 4b. Narrow-viewport safety ────────────────────────────────────────────
   The app mockups contain deliberately unwrappable chips (.lbl, status pills),
   so their min-content can exceed a 390px column. The step grid is declared
   `36px minmax(0, 1fr)` per page so the text column may shrink; this lets a
   mockup that is still genuinely too wide scroll inside its own card rather
   than pushing the whole document sideways. No page declares overflow on
   .screen, so this does not fight page-local CSS. */
.guide .screen { overflow-x: auto; }


/* ── 5. Print — every /guide URL ───────────────────────────────────────────
   Pages may add their own component sizing on top; this is the floor that
   guarantees a readable sheet of paper from any page in the library.     */
@page { margin: 14mm 12mm; }

@media print {
  /* Step numbers, teal buttons and the navy app screens ARE the wayfinding.
     Without this the browser drops every background and the mockups print
     as empty outlines. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* `:root:root` matches the specificity of the light-preference blocks
     above; because this comes later it wins, so printing from a
     light-preference browser still lands on a white ground. (NAVIA-373) */
  :root:root {
    color-scheme: light;
    --g-page-bg: #FFFFFF; --g-page-fg: #000000;
    --g-page-fg-soft: #1A1610; --g-page-fg-mute: #4A4136;
    --g-page-rule: rgba(0,0,0,0.28); --g-page-accent: #6B3F0C;
    --g-tag-bg: transparent; --g-tag-line: rgba(0,0,0,0.35);
    --g-grain-a: transparent; --g-grain-b: transparent;
  }

  html, body {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #000 !important;
  }

  :root:root .guide {
    --g-bg: #FFFFFF; --g-surface: #FFFFFF; --g-surface-alt: #F7F9FB;
    --g-ink: #0E2238; --g-ink-soft: #33455A; --g-ink-muted: #6B7A8B;
    --g-accent: #1B6355; --g-accent-ink: #FFFFFF;
    --g-accent-soft: rgba(63,167,150,0.12); --g-accent-line: rgba(27,99,85,0.4);
    --g-amber: #8A5010; --g-amber-soft: rgba(197,117,24,0.09); --g-amber-line: rgba(197,117,24,0.4);
    --g-line: rgba(14,34,56,0.22); --g-line-soft: rgba(14,34,56,0.12);
    padding: 0;
    font-size: 10.5pt;
  }

  /* Navigational chrome only — never instructional content. */
  #site-nav,
  .breadcrumb,
  .foot__links,
  .site-social-links,
  .no-print { display: none !important; }

  .wrap { max-width: 100%; padding-left: 0; padding-right: 0; }
  .guide .sheet { max-width: 100%; }

  /* Hub / section-index archetype. */
  .guide-section { padding: 0; }
  .guide-card { break-inside: avoid; page-break-inside: avoid; }
  .guide-card-summary { color: #1A1610; }
  .head { padding: 0 0 24px; }
  .head__indicator { margin-bottom: 24px; }

  /* Keep a heading with what it introduces, and never strand a sign-off. */
  h1, h2, h3, .step-h, .guide-card-title {
    break-after: avoid; page-break-after: avoid;
  }
  .guide .step, .guide .panel, .guide .screen, .guide .note {
    break-inside: avoid; page-break-inside: avoid;
  }
  .guide .guide-signoff { break-before: avoid; page-break-before: avoid; }

  /* Nothing may bleed off the side of the paper. */
  img, svg, pre, table { max-width: 100% !important; }

  /* On paper there is no scrolling, so let a wide mockup print in full. */
  .guide .screen { overflow: visible; }

  a { text-decoration: underline; }
  /* On paper a bare "Get in touch" is a dead end — spell the URL out. */
  a.inline-link[href^="/"]::after {
    content: " (naviacair.com" attr(href) ")";
    font-weight: 400;
  }
}