/* ==========================================================================
   ZYRNTOPO — shared "map-sheet collar" shell.
   Loaded by every page so the site reads as one document set. Provides the
   design tokens, the sticky header + mobile drawer, the footer, buttons, the
   skip link and icon sizing. Page bodies keep their own layout CSS and inherit
   this palette through the legacy-token ALIASES below.
   Pairs with script.js (drawer) and theme.js (theme toggle).
   ========================================================================== */
:root {
  color-scheme: light;

  /* ── collar palette (canonical) ── */
  --paper:    #FCFBF8;
  --paper-2:  #F4F1EB;
  --ink:      #14161A;
  --ink-2:    #4C5158;
  --ink-3:    #63686F;
  --rule:     #CFC9BE;
  --rule-2:   #A8A198;

  --contour:  #8A5A2B;   /* USGS index-contour brown */
  --water:    #2E6F94;   /* USGS water blue */
  --veg:      #3F6B45;   /* USGS vegetation green */

  --action:       #EA580C;   /* brand hue — large type / icons / rules only */
  --action-text:  #B23C09;   /* passes AA for normal text on paper tints */
  --action-fill:  #C2410C;
  --action-hover: #9A3412;
  --on-action:    #FFFFFF;

  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --max: 1120px;
  --pad: clamp(16px, 4vw, 40px);
  --gap: clamp(44px, 6vw, 76px);

  /* ── legacy-token ALIASES ──────────────────────────────────────────────
     The content pages (compare/privacy/terms/docs/account) style their bodies
     against these older names. Aliasing them to collar values re-themes those
     pages without rewriting their body rules. Delete each page's own :root so
     these win. */
  --bg:          var(--paper);
  --bg-soft:     var(--paper-2);
  --bg-mute:     var(--paper-2);
  --surface:     var(--paper);
  --border:      var(--rule);
  --border-2:    var(--rule-2);
  --text:        var(--ink);
  --text-2:      var(--ink-2);
  --text-dim:    var(--ink-2);
  --muted:       var(--ink-2);
  --dim:         var(--ink-3);
  --accent:      var(--action-text);
  --accent-2:    var(--action-hover);
  --accent-dim:  color-mix(in srgb, var(--action) 12%, transparent);
  --accent-soft: color-mix(in srgb, var(--action) 10%, transparent);
  --accent-ring: color-mix(in srgb, var(--action) 22%, transparent);
  --success:     var(--veg);
  --no:          var(--ink-3);
  --font:        var(--sans);
  --r:           0px;
  --r-sm:        0px;
  --r-xs:        0px;
  --sh-sm:       none;
  --sh-md:       none;
  --sh-lg:       none;
  --ease:        cubic-bezier(.2,0,0,1);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper:    #101215;
  --paper-2:  #171A1E;
  --ink:      #E9E5DD;
  --ink-2:    #A8A49B;
  --ink-3:    #96928A;
  --rule:     #2E3339;
  --rule-2:   #464C54;
  --contour:  #C89A63;
  --water:    #74AECC;
  --veg:      #83AD89;
  --action:       #FB923C;
  --action-text:  #FB923C;
  --action-fill:  #FB923C;
  --action-hover: #FDBA74;
  --on-action:    #2A1200;
}

/* ── minimal reset used site-wide (pages may add their own) ── */
a { color: inherit; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--action); outline-offset: 2px;
}
::selection { background: var(--contour); color: var(--paper); }

.label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.micro { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ── skip link (WCAG 2.4.1) ── */
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 90;
  padding: 12px 18px; background: var(--action-fill); color: var(--on-action);
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  border: 1.5px solid var(--action-fill);
  transform: translateY(-160%); transition: transform .15s linear;
}
.skip:focus-visible { transform: none; outline-offset: 2px; }

/* ── icons ── */
.ic { width: 18px; height: 18px; flex: none; }
.ic--sm { width: 15px; height: 15px; }

/* ── store badges ──────────────────────────────────────────────────────────
   Two-line store lockup: qualifier over store name, mark on the left. Built in
   CSS rather than using the supplied artwork so it inherits the collar's type
   and matches the control height — the official PNGs ship in three aspect
   ratios, none of which match this grid. Mark and wording are theirs. */
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 16px 8px 13px;
  border: 1.5px solid var(--ink); border-radius: 6px;
  background: var(--ink); color: var(--paper);
  text-decoration: none; line-height: 1.15;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.badge:hover { background: var(--paper); color: var(--ink); }
.badge__mark {
  width: 26px; height: 26px; flex: none; object-fit: contain;
  background: #F4F1EB; border-radius: 3px; padding: 2px; box-sizing: content-box;
}
.badge:hover .badge__mark { background: transparent; }
.badge__txt { display: flex; flex-direction: column; text-align: left; }
.badge__pre { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; opacity: .82; }
.badge__name { font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.badge--wide { width: 100%; }
/* Footer/collar rows sit on a 44px rhythm; the full badge would break it. */
.badge--sm { min-height: 44px; padding: 6px 13px 6px 10px; gap: 8px; }
.badge--sm .badge__mark { width: 20px; height: 20px; }
.badge--sm .badge__pre { font-size: 9px; }
.badge--sm .badge__name { font-size: 14px; }
@media (max-width: 560px) { .badge:not(.badge--sm) { width: 100%; } }


/* ── raster platform marks ── */
/* Real brand marks (Windows, Linux, Android, Amazon, Google Play) in their own
   colours, so unlike the line icons above they take no currentColor. */
.ic--img { object-fit: contain; }
/* Amazon's wordmark is near-black (measured luminance ~45) and all but vanishes
   on the night sheet's #171A1E card. A thin light chip restores it without
   recolouring anyone's trademark. */
html[data-theme="dark"] .ic--img,
html[data-theme="dark"] .dl-mark--img {
  background: #F4F1EB;
  border-radius: 3px;
  padding: 1px;
  box-sizing: content-box;
}


/* Theme toggle carries BOTH icons; CSS shows the one you'd switch TO. Swapping
   a <use> href by JS is unreliable against an external sprite (Firefox won't
   re-render it), so the icon state is pure CSS and theme.js only sets the label. */
#themeToggle .ic-sun { display: none; }
html[data-theme="dark"] #themeToggle .ic-moon { display: none; }
html[data-theme="dark"] #themeToggle .ic-sun { display: block; }

/* ══ BUTTONS — flat, squared, no shadow, no radius ══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 22px; max-width: 100%;
  border: 1.5px solid var(--ink); border-radius: 0;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none;
  transition: background-color .12s linear, color .12s linear, border-color .12s linear;
}
.btn--go { background: var(--action-fill); border-color: var(--action-fill); color: var(--on-action); }
.btn--go:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn--out { background: transparent; color: var(--ink); }
.btn--out:hover { background: var(--ink); color: var(--paper); }
.btn--sm { min-height: 44px; padding: 9px 15px; font-size: 13px; }
.btn--wide { width: 100%; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border: 1.5px solid var(--rule-2); color: var(--ink-2); }
.iconbtn:hover { border-color: var(--ink); color: var(--ink); }

/* ══ TOP COLLAR (sticky header) ══ */
.collar-top { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--ink); }
.collar-in { max-width: var(--max); margin-inline: auto; display: flex; align-items: center; gap: 14px; padding: 9px var(--pad); min-height: 58px; }
.sheetname { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; text-decoration: none; }
.sheetname img { width: 25px; height: 25px; }
.sheetname b { font-family: var(--cond); font-size: 19px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.collar-badge { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule-2); padding: 2px 6px; margin-left: 2px; }
.nav-main { display: flex; align-items: center; gap: 0; margin-left: 20px; }
.nav-main a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 2px solid transparent; text-decoration: none;
  /* Never break a label mid-phrase, never shrink below its own text. */
  white-space: nowrap; flex: none;
}
.nav-main a:hover { color: var(--ink); border-bottom-color: var(--action); }
.nav-main a[aria-current="page"] { color: var(--action-text); border-bottom-color: var(--action); }
.collar-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
/* Sign in as a header text link rather than a third button, so the account route
   is always one click away without competing with Get Pro. Mirrors the rule
   inlined in index.html — keep the two in step. */
.collar-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap;
}
.collar-link:hover { color: var(--ink); border-bottom-color: var(--action); }
/* Header degradation — mirrors index.html, keep the two in step. .collar-in is a
   nowrap flex row, so overflow is absorbed by SQUEEZING children: the nav links
   lose their padding and the labels run together. Shed in priority order and
   collapse the nav to the burger at 1060px (was 880px, which only worked before
   the Sign in / Get Pro actions were added). The drawer keeps everything. */
/* Pages on this stylesheet cap .collar-in at var(--max) (1120px), so their header
   must fit ~1040px at ANY viewport — viewport queries cannot rescue an overflow
   here. That is why no Play link lives in these headers: it is in the drawer and
   footer instead. The header carries logo + nav + theme + Sign in + Get Pro only,
   which fits with room to spare above the burger breakpoint. */
@media (max-width: 1100px) { .nav-main { display: none; } .burger { display: inline-flex; } }
@media (max-width: 560px) { .collar-link { display: none; } }
@media (max-width: 430px) { .collar-cta { display: none; } }

/* ══ MOBILE DRAWER ══ */
.burger { display: none; }
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(10,12,15,.5); opacity: 0; visibility: hidden; transition: opacity .2s linear, visibility .2s linear; }
.scrim.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; z-index: 80; inset: 0 0 0 auto; width: min(340px, 86vw);
  display: flex; flex-direction: column; background: var(--paper); border-left: 2px solid var(--ink);
  padding: 12px var(--pad) calc(24px + env(safe-area-inset-bottom));
  padding-top: max(12px, env(safe-area-inset-top));
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(101%); visibility: hidden;
  transition: transform .22s ease-out, visibility .22s ease-out;
}
.drawer.open { transform: none; visibility: visible; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.drawer nav a:hover { color: var(--action-text); }
.drawer-cta { margin-top: auto; padding-top: 22px; display: grid; gap: 8px; }

/* ══ BOTTOM COLLAR (footer) ══ */
.collar-bot { margin-top: var(--gap); border-top: 2px solid var(--ink); }
.collar-bot .foot-grid { max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: clamp(20px,3vw,40px); padding: 30px var(--pad); }
.collar-bot .foot-grid h2 { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.collar-bot .foot-grid ul { list-style: none; margin: 0; padding: 0; }
.collar-bot .foot-grid a { display: flex; align-items: center; min-height: 40px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.collar-bot .foot-grid a:hover { color: var(--action-text); }
.collar-bot .foot-brand p { margin-top: 10px; max-width: 38ch; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.collar-bot .foot-acts { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.collar-bot .foot-legal { padding: 20px var(--pad) 28px; border-top: 1px solid var(--rule); text-align: center; }
.collar-bot .foot-legal p { max-width: 84ch; margin: 8px auto 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
@media (max-width: 820px) { .collar-bot .foot-grid { grid-template-columns: 1fr 1fr; } .collar-bot .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 440px) { .collar-bot .foot-grid { grid-template-columns: 1fr; } }

body.locked { overflow: hidden; padding-right: var(--sbw, 0px); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

/* .foot-grid a sets colour and display at (0,1,1), which outranks .badge at
   (0,1,0): the label inherited --ink-2 — white text on the white plate in dark
   mode, so the footer badges rendered as blank white boxes — and display:flex
   stretched them full width. Scope the badge's own rules above it. */
.foot-grid a.badge { display: inline-flex; color: var(--paper); min-height: 44px; }
.foot-grid a.badge:hover { color: var(--ink); }