/* lab10yr-theme.css — canonical Lab10YR amber theme + shared app launcher.
   One source of truth for color across the public app/map site, matching the
   DESIGN-SPEC token set (Fraunces / IBM Plex on #08080c near-black, amber
   accent). Link this on every page; per-page :root accents should reference
   these values. Legacy --l10-* names are kept as aliases of the new tokens so
   nothing that consumed the old variables breaks. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,520;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  /* ── DESIGN-SPEC canonical tokens (namespaced so page-local --bg etc. on
     the hand-authored tool pages are never clobbered) ── */
  --l10-bg:#08080c;                       /* sole background black */
  --l10-panel:#101018;                    /* card/panel surface */
  --l10-panel-2:#15151f;                  /* raised surface */
  --l10-border:rgba(255,255,255,.10);
  --l10-border-strong:rgba(255,255,255,.18);
  --l10-text:#c4c4cc;                     /* body (11.5:1) — was #d8ddf0 */
  --l10-text-hi:#f4f4f5;                  /* headings (18.2:1) */
  --l10-muted:#a1a1aa;                    /* captions/labels (7.8:1) — the floor */
  --l10-dim:#a1a1aa;                      /* legacy alias — AA-safe now, was #6870a0 */
  --l10-amber:#f59e0b;
  --l10-amber-bright:#fcd34d;
  --l10-amber-deep:#d97706;
  --l10-gold-brand:#d9a83a;               /* wordmark only */
  --l10-cream:#f0ead8;                    /* wordmark only */
  --l10-ok:#22c55e;
  --l10-warn:#f97316;
  --l10-danger:#ef4444;
  --l10-focus-ring:0 0 0 2px rgba(245,158,11,.65);
  --l10-font-sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --l10-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --l10-font-serif:"Fraunces",Georgia,'Times New Roman',serif;
  /* ── legacy names (keep working; values remapped to spec) ── */
  --l10-acc:var(--l10-amber);             /* primary accent */
  --l10-acc2:var(--l10-amber-bright);     /* light accent / highlight */
  --l10-acc-deep:var(--l10-amber-deep);   /* deep amber */
  --l10-accgrad:linear-gradient(135deg,#d97706,#fbbf24);
  --l10-acc-glow:rgba(245,158,11,.30);
}

/* Global accessible focus: amber ring on every interactive element (replaces
   every blue default ring, per spec). */
:focus-visible{outline:none;box-shadow:var(--l10-focus-ring, 0 0 0 2px rgba(245,158,11,.65))}

/* ───────── shared app launcher (the cross-app "hook up") ─────────
   Fixed, unobtrusive corner control. Sits above map canvases without
   disturbing each app's own header/toolbar. Injected by js/lab10yr-nav.js. */
.l10-launch{position:fixed;top:12px;right:12px;z-index:99999;font:500 14px/1.2 var(--l10-font-sans)}
.l10-launch *{box-sizing:border-box}
.l10-launch-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  min-height:44px;padding:9px 16px;border-radius:10px;color:#1a1206;background:var(--l10-accgrad);
  border:0;box-shadow:0 4px 16px rgba(245,158,11,.28);font:700 14px/1.2 var(--l10-font-sans);
  letter-spacing:.02em;transition:transform .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}
.l10-launch-btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(245,158,11,.4)}
.l10-launch-btn .l10-dot{width:8px;height:8px;border-radius:50%;background:#1a1206;
  box-shadow:0 0 0 3px rgba(26,18,6,.25)}
.l10-launch-btn .l10-caret{font-size:10px;opacity:.8}
.l10-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:300px;
  background:rgba(16,16,24,.97);border:1px solid var(--l10-border);
  border-radius:12px;padding:8px;backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.6);display:none;
  max-height:calc(100vh - 92px);overflow-y:auto}
.l10-menu.open{display:block}
.l10-menu a{display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 12px;
  border-radius:8px;color:var(--l10-text);text-decoration:none;font-weight:500}
.l10-menu a:hover{background:rgba(245,158,11,.12);color:#fff}
.l10-menu a.cur{color:var(--l10-acc2);background:rgba(245,158,11,.08)}
.l10-menu a .l10-i{font-size:15px;width:20px;text-align:center;opacity:.9}
.l10-menu .l10-sep{height:1px;background:var(--l10-border);margin:5px 8px}
.l10-menu .l10-hd{padding:9px 12px 4px;color:var(--l10-muted);font:700 11.5px/1.3 var(--l10-font-mono);
  text-transform:uppercase;letter-spacing:.12em}
@media print{.l10-launch{display:none}}

/* ── Landing header (the lab10yr.com nav) applied on every page ──────────────
   Injected into the page's existing #nav by lab10yr-nav.js so the content
   offset below the bar is preserved. Matches innovation-prototype Nav.tsx.
   Pages without a legacy #nav get a standalone .l10-sitebar injected as the
   first body element instead (lab10yr-nav.js injectSiteBar). */
#nav.l10-themed{background:rgba(8,8,12,.82)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  backdrop-filter:blur(14px);display:flex!important;align-items:center;
  padding:0!important;gap:0!important}
.l10-sitebar{position:sticky;top:0;z-index:9998;display:flex;align-items:center;
  min-height:64px;background:rgba(8,8,12,.92);
  border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(14px);
  font:500 14px/1.2 var(--l10-font-sans);
  box-sizing:border-box}
.l10-sitebar *{box-sizing:border-box}
.l10-top-inner{display:flex;align-items:center;justify-content:space-between;
  gap:24px;width:100%;max-width:1440px;margin:0 auto;padding:0 28px}
.l10-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;
  min-height:44px}
/* Soil-horizon glyph: same bar widths and descending heights as the marketing
   Wordmark (ui/Wordmark.tsx): 5px bars, 26px down to 12px. */
.l10-brand-bars{display:flex;align-items:flex-start;gap:2px;height:26px}
.l10-brand-bars i{width:5px;border-radius:1px;display:block}
.l10-brand-bars i:nth-child(1){height:26px}.l10-brand-bars i:nth-child(2){height:24px}
.l10-brand-bars i:nth-child(3){height:22px}.l10-brand-bars i:nth-child(4){height:20px}
.l10-brand-bars i:nth-child(5){height:18px}.l10-brand-bars i:nth-child(6){height:16px}
.l10-brand-bars i:nth-child(7){height:14px}.l10-brand-bars i:nth-child(8){height:12px}
.l10-brand-word{font-family:var(--l10-font-serif);font-size:22px;
  font-weight:600;color:var(--l10-cream);letter-spacing:-.01em;line-height:1}
.l10-brand-word span{color:var(--l10-gold-brand)}
.l10-top-links{display:flex;gap:24px;min-width:0}
.l10-top-links a{display:inline-flex;align-items:center;min-height:44px;color:#c4c4cc;
  text-decoration:none;font-size:14px;font-weight:500;
  white-space:nowrap;transition:color .15s cubic-bezier(.4,0,.2,1)}
.l10-top-links a:hover{color:#fff}
.l10-top-cta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.l10-getstarted{display:inline-flex;align-items:center;gap:6px;color:#fff;
  text-decoration:none;font-size:15px;font-weight:600;min-height:44px;padding:9px 16px;
  border-radius:10px;white-space:nowrap;border:1px solid rgba(245,158,11,.45);
  background:linear-gradient(180deg,rgba(245,158,11,.18),rgba(245,158,11,.06));
  transition:border-color .15s cubic-bezier(.4,0,.2,1),background .15s cubic-bezier(.4,0,.2,1)}
.l10-getstarted:hover{border-color:rgba(245,158,11,.8);
  background:linear-gradient(180deg,rgba(245,158,11,.30),rgba(245,158,11,.12))}
/* At 14px the seven links need more room than at 13px; hide below the same
   lg breakpoint the marketing nav uses (Nav.tsx hidden lg:flex). */
@media(max-width:1024px){.l10-top-links{display:none}}
/* On phones the fixed "Lab10YR apps" launcher occupies the bar's right side —
   the Get-started CTA collides with it; the launcher wins (it carries Home). */
@media(max-width:640px){.l10-top-cta{display:none}}