/* ==========================================================================
   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; }

/* 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;
}
.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; }
@media (max-width: 880px) { .nav-main { display: none; } .burger { display: inline-flex; } }
@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; } }