* { box-sizing: border-box; }
html, body, #app { min-height: 100%; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { color: inherit; font: inherit; }
button { border: 0; }
button, [role="button"] { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
::selection { background: var(--line-strong); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.icon { width: 18px; height: 18px; stroke-width: 1.75; flex: 0 0 auto; }
.muted { color: var(--muted); }
.soft { color: var(--text-soft); }
.mono, code, pre { font-family: var(--mono); }

/* Shared public navigation. Landing, Knowledge, and policy pages use this exact shell. */
.skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:9px 12px; border-radius:7px; background:var(--text); color:var(--bg); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.landing-nav { position:sticky; top:0; z-index:40; height:60px; background:var(--topbar-bg); backdrop-filter:blur(18px); border-bottom:1px solid transparent; transition:border-color .2s ease; }
.landing-nav.is-scrolled { border-bottom-color:var(--line); }
.site-nav-wrap { width:var(--site-width); margin:0 auto; }
.landing-nav-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.landing-brand { display:flex; align-items:center; font-family:var(--headline); font-size:13px; font-weight:650; letter-spacing:.045em; }
.landing-nav nav { display:flex; align-items:center; gap:4px; }
.landing-nav nav > a:not(.landing-button) { padding:7px 11px; border-radius:7px; color:var(--muted); font-size:13px; transition:color .16s ease,background .16s ease; }
.landing-nav nav > a:not(.landing-button):hover,.landing-nav nav > a[aria-current="page"] { color:var(--text); background:var(--panel); }
.landing-icon-button { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:transparent; color:var(--muted); transition:color .16s ease,background .16s ease; }
.landing-icon-button:hover { background:var(--panel); color:var(--text); }
.landing-button { min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 14px; white-space:nowrap; border:1px solid var(--line); border-radius:8px; font-size:13px; font-weight:470; letter-spacing:.004em; transition:background .16s ease,border-color .16s ease,color .16s ease,filter .16s ease; }
.landing-button .icon { width:14px; height:14px; transition:transform .18s cubic-bezier(.32,.72,0,1); }
.landing-button:hover .icon { transform:translateX(2px); }
.landing-button.secondary { background:var(--panel); color:var(--text); }
.landing-button.secondary:hover { background:var(--panel-hover); border-color:var(--line-strong); }
.landing-button.primary { background:var(--text); border-color:var(--text); color:var(--bg); font-weight:520; }
.landing-button.primary:hover { filter:brightness(1.06); }
.landing-button.large { min-height:42px; padding:0 18px; font-size:14px; }

@media (max-width:600px) {

  .landing-nav nav > a:not(.landing-button) { display:none; }
  .nav-cta span { display:none; }
}

/* Theme toggle. Instant swap by default; where :has() is available the two icons
   stack in one grid cell and trade places instead of cutting. */
.theme-dark-icon { display:none; }
:root[data-theme="light"] .theme-dark-icon { display:block; }
:root[data-theme="light"] .theme-light-icon { display:none; }

/* The :root prefix is load bearing. The light fallback above is specificity (0,3,0),
   so these must outrank it or light mode silently keeps the instant swap. */
@supports selector(:has(*)) {
  :root :is(button,a):has(> .theme-dark-icon) { display:grid; place-items:center; }
  :root :is(button,a):has(> .theme-dark-icon) > .theme-dark-icon,
  :root :is(button,a):has(> .theme-dark-icon) > .theme-light-icon {
    display:grid; place-items:center; grid-area:1/1;
    transition:opacity .2s ease,transform .36s cubic-bezier(.32,.72,0,1);
  }
  :root :is(button,a):has(> .theme-dark-icon) > .theme-dark-icon { opacity:0; transform:rotate(-45deg) scale(.7); }
  :root :is(button,a):has(> .theme-dark-icon) > .theme-light-icon { opacity:1; transform:none; }
  :root[data-theme="light"] :is(button,a):has(> .theme-dark-icon) > .theme-dark-icon { opacity:1; transform:none; }
  :root[data-theme="light"] :is(button,a):has(> .theme-dark-icon) > .theme-light-icon { opacity:0; transform:rotate(45deg) scale(.7); }
}

/* One shared footer and an accessible compact navigation at smaller widths. */
.site-footer { border-top:1px solid var(--line); }
.site-footer-inner { width:var(--site-width); margin-inline:auto; min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:24px; color:var(--muted); font-size:12px; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:12px 22px; }
.site-footer a:hover,.site-footer a[aria-current="page"] { color:var(--text); }
.site-mobile-menu { display:none; position:relative; }
.site-mobile-menu summary { cursor:pointer; padding:7px 10px; border:1px solid var(--line-strong); border-radius:7px; list-style:none; font-size:12px; }
.site-mobile-menu summary::-webkit-details-marker { display:none; }
.site-mobile-menu[open] summary { background:var(--panel); }
.site-mobile-menu>div { position:fixed; top:64px; right:var(--site-gutter); width:min(320px, calc(100% - 2 * var(--site-gutter))); display:grid; padding:8px; background:var(--bg-raised); border:1px solid var(--line-strong); border-radius:10px; box-shadow:var(--shadow-menu); }
.site-mobile-menu a { padding:10px 12px; border-radius:6px; }
.site-mobile-menu a:hover,.site-mobile-menu a[aria-current="page"] { background:var(--panel); }
@media(max-width:900px) {
  .landing-nav nav>a:not(.landing-button) { display:none; }
  .site-mobile-menu { display:block; }
}
@media(max-width:600px) {
  .landing-nav-inner { gap:8px; }
  .landing-nav nav { gap:3px; }
  .landing-button.nav-cta { padding-inline:10px; }
  .site-footer-inner { flex-direction:column; align-items:flex-start; }
}

section[id] { scroll-margin-top:80px; }