/* PowerAtlas shared chrome (UX batch J, Nov 2026). ONE stylesheet for what every page
   family shares: fonts, colour tokens, the type scale, the eyebrow, the header (with the
   place/node search), the Guide strip, the footer, buttons and back links. Linked first on
   every page; each family's own stylesheet (content.css, pricing/base.css, workspace.css,
   the state/guide inline CSS) keeps only its layout and must not redefine these rules.
   Square corners, borders, IBM Plex / Plex Mono. */

/* ---------- fonts: one declaration per file, under every family name the site uses ---------- */
@font-face{font-family:'IBM Plex Sans';src:url(/fonts/plex/IBMPlexSans-var.woff2) format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:Plex;src:url(/fonts/plex/IBMPlexSans-var.woff2) format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/plex/IBMPlexMono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Mono;src:url(/fonts/plex/IBMPlexMono-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:PlexMono;src:url(/fonts/plex/IBMPlexMono-400.woff2) format('woff2');font-display:swap}

/* ---------- tokens ---------- */
:root{
  --pa-canvas:#07090b;--pa-bar:#0b0e11;--pa-field:#10161d;--pa-ink:#e7ecf0;--pa-ink-2:#c3ccd4;--pa-muted:#9aa6b1;--pa-faint:#737f8a;
  --pa-accent:#7ea8c9;--pa-accent-2:#91b9d5;--pa-line:#25303a;--pa-line-2:#34414c;--pa-selected:#1a2630;
  --pa-sans:'IBM Plex Sans',Plex,system-ui,'Segoe UI',sans-serif;--pa-mono:'IBM Plex Mono',Mono,ui-monospace,Consolas,monospace;
  --pa-h1:34px;--pa-header-pad:12px 20px;
}
@media(max-width:760px){:root{--pa-h1:28px}}

/* ---------- type scale: one page title size per breakpoint ----------
   The workspace tool headers (the map's and History's selection title) keep their compact
   16 px h1 in workspace.css; every other page title takes this. */
h1{font-family:var(--pa-sans);font-size:var(--pa-h1);line-height:1.15;letter-spacing:-.02em;font-weight:500}
.eyebrow,.kicker{font:11px/1.4 var(--pa-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--pa-accent)}

/* ---------- header: identical on every family ----------
   Static pages carry <header class="site-header"> from analysis/site_nav.py; the workspace
   pages build the same classes in workspace.mjs (plus their workspace-* names). One row of
   65 px on a desktop; at 900 px the menu folds behind a button; at 600 px the search moves
   to its own row (107-109 px in all). */
header.site-header{position:relative;z-index:30;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:20px;box-sizing:border-box;width:100%;max-width:none;min-height:65px;margin:0;padding:var(--pa-header-pad);background:var(--pa-bar);border:0;border-bottom:1px solid var(--pa-line);color:var(--pa-ink);font:14px/1.4 var(--pa-sans);letter-spacing:0;text-transform:none}
header.site-header .site-brand{flex:none;color:var(--pa-ink);font-size:21px;font-weight:400;letter-spacing:-.7px;line-height:1.2;white-space:nowrap;text-decoration:none}
header.site-header .site-brand strong{font-weight:600}
header.site-header .site-brand span{font-family:var(--pa-mono);color:var(--pa-accent-2);font-size:14px;letter-spacing:0}
header.site-header .site-search{flex:1;width:auto;max-width:420px;min-width:100px;margin:0}
header.site-header .site-search>input{box-sizing:border-box;min-height:0;height:auto;margin:0;font:14px/1.3 var(--pa-sans);padding:9px 12px}
header.site-header nav.site-nav{display:flex;flex-wrap:nowrap;gap:2px;margin:0 0 0 auto;padding:0;border:0;background:none;font:inherit;letter-spacing:0;text-transform:none}
header.site-header nav.site-nav a{display:inline-flex;align-items:center;box-sizing:border-box;min-height:40px;margin:0;padding:8px 9px;border:0;background:none;color:var(--pa-muted);font:inherit;font-size:13px;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap}
header.site-header nav.site-nav a:hover{color:var(--pa-ink)}
header.site-header nav.site-nav a[aria-current=page]{color:var(--pa-ink);box-shadow:inset 0 -2px var(--pa-accent)}
header.site-header nav.site-nav a[data-nav=data]{color:var(--pa-accent-2)}
header.site-header .site-lang{display:flex;flex:none;gap:2px;margin:0}
header.site-header .site-lang a,header.site-header .site-lang button,header.site-header .site-lang span{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:36px;min-height:40px;margin:0;padding:8px;border:0;background:transparent;color:var(--pa-muted);font:12px/1 var(--pa-sans);text-decoration:none;cursor:pointer}
header.site-header .site-lang [aria-current=true],header.site-header .site-lang [aria-pressed=true]{background:var(--pa-selected);color:var(--pa-ink);cursor:default}
header.site-header .site-menu{display:none}
header.site-header a:focus-visible,header.site-header button:focus-visible{outline:2px solid var(--pa-accent-2);outline-offset:2px}
@media(max-width:1180px){header.site-header nav.site-nav a{padding:8px 6px;font-size:12px}}
@media(max-width:1100px){header.site-header{gap:12px}}
@media(max-width:900px){
  header.site-header{flex-wrap:wrap;gap:8px 9px;padding:10px 12px}
  header.site-header .site-brand{font-size:20px;margin-right:auto}
  header.site-header .site-search{order:3;flex:1 1 180px;max-width:none}
  header.site-header .site-menu{display:inline-flex;align-items:center;box-sizing:border-box;min-height:40px;margin:0;padding:7px 12px;border:1px solid var(--pa-line);background:transparent;color:var(--pa-ink);font:12px var(--pa-sans);cursor:pointer}
  header.site-header nav.site-nav{display:none;order:5;flex-basis:100%;margin:0}
  header.site-header.menu-open nav.site-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--pa-line)}
  header.site-header nav.site-nav a{justify-content:center;padding:8px 4px;font-size:12px}
  header.site-header .site-lang a,header.site-header .site-lang button,header.site-header .site-lang span{min-width:0;padding:7px 5px;font-size:11px}
}
@media(max-width:380px){header.site-header{gap:8px}header.site-header .site-brand{font-size:18px}header.site-header .site-brand span{font-size:11px}header.site-header .site-lang a,header.site-header .site-lang button,header.site-header .site-lang span{padding:7px 4px}}

/* The search box itself (shared/search.mjs); search.css styles its results panel. */
header.site-header .location-search{width:auto;font:14px var(--pa-sans)}

/* ---------- Guide strip (batch I) ---------- */
nav.guide-strip{display:flex;flex-wrap:wrap;gap:0 2px;box-sizing:border-box;width:100%;max-width:none;margin:0;padding:0 20px;border:0;border-bottom:1px solid var(--pa-line);background:#0d1115;font:13px/1.4 var(--pa-sans);letter-spacing:0;text-transform:none}
nav.guide-strip a{display:inline-flex;align-items:center;box-sizing:border-box;min-height:40px;margin:0;padding:8px 10px;border:0;background:none;color:var(--pa-muted);font:inherit;font-size:13px;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap}
nav.guide-strip a:hover{color:var(--pa-ink)}
nav.guide-strip a[aria-current=page]{color:var(--pa-ink);box-shadow:inset 0 -2px var(--pa-accent)}
nav.guide-strip a:focus-visible{outline:2px solid var(--pa-accent);outline-offset:-2px}
@media(max-width:760px){nav.guide-strip{padding:0 6px}nav.guide-strip a{padding:8px 7px;font-size:12px}}
nav.guide-strip + .wrap{margin-top:36px}

/* ---------- footer (batch I) ---------- */
footer.site-footer{display:block;clear:both;box-sizing:border-box;width:100%;max-width:none;margin:48px 0 0;padding:16px 20px 22px;border:0;border-top:1px solid var(--pa-line);background:var(--pa-bar);color:var(--pa-muted);font:12px/1.5 var(--pa-sans);letter-spacing:0;text-transform:none;text-align:left}
footer.site-footer nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin:0 0 6px;padding:0;border:0;background:none;font:inherit}
footer.site-footer nav a{display:inline-flex;align-items:center;box-sizing:border-box;min-height:32px;margin:0;padding:4px 0;border:0;background:none;color:var(--pa-ink-2);font:inherit;font-size:13px;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap}
footer.site-footer nav a:hover{color:var(--pa-ink);text-decoration:underline}
footer.site-footer nav a:focus-visible{outline:2px solid var(--pa-accent);outline-offset:2px}
footer.site-footer p{margin:0;padding:0;max-width:none;color:var(--pa-muted);font:inherit;font-size:12px}
footer.site-footer-bilingual>div+div{margin-top:14px;padding-top:12px;border-top:1px solid #1c242b}
@media(max-width:760px){footer.site-footer{padding:12px 12px 20px}footer.site-footer nav{gap:0 14px}footer.site-footer nav a{min-height:40px;padding:8px 0}}

/* ---------- buttons ---------- */
.button{display:inline-block;box-sizing:border-box;border:1px solid var(--pa-line-2);padding:10px 14px;background:#121820;color:var(--pa-accent);font:14px/1.3 var(--pa-sans);text-decoration:none;border-radius:0;cursor:pointer}
.button:hover{border-color:var(--pa-accent)}
a.primary,button.primary,.button.primary{background:var(--pa-accent);border:1px solid var(--pa-accent);color:#07090b;font-weight:600;text-decoration:none;border-radius:0}
a.secondary,.button.secondary{background:transparent;border:1px solid var(--pa-accent);color:var(--pa-accent);text-decoration:none;border-radius:0}

/* ---------- back links ("← Back to map", "← Back to your exploration") ---------- */
.back-link,.workspace-back,.request-back{display:inline-block;color:var(--pa-accent-2);font:12px/1.5 var(--pa-sans);text-decoration:none}
.back-link:hover,.workspace-back:hover,.request-back:hover{text-decoration:underline}

/* Phone tap targets on static pages (Nov 2026). */
@media(max-width:760px){.breadcrumb a,main>p.muted:last-child a{display:inline-block;padding:10px 0;min-height:40px;box-sizing:border-box}}