/* =====================================================================
   Cyberstrata website — page layout on top of tokens.css + components.css
   Website grid: 1200px container = 12 columns of 78px, 24px gutters.
   Every dimension is a multiple of 4px. Lines 1px; 2px only for focus,
   the current nav item, chart lines and the key node.
   ===================================================================== */

html { scroll-padding-top: calc(var(--nav) + var(--space-6)); }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
img, svg { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
a { color: inherit; }
.em { font-weight: 500; color: var(--ink); }
.ink-2 { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: var(--space-4); top: -64px; z-index: 30;
  padding: var(--space-2) var(--space-3); background: var(--ink); color: var(--on-ink);
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; text-decoration: none;
}
.skip:focus { top: var(--space-3); outline: none; box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------------------
   Container
   --------------------------------------------------------------------- */
.container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--space-6));
  margin: 0 auto;
  padding: 0 var(--space-6);
}
@media (max-width: 640px) { .container { padding: 0 var(--space-4); } }

/* ---------------------------------------------------------------------
   Nav — sticky, solid ground, menu button below 960px
   --------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 20; }
.c-nav { padding: 0 max(var(--space-6), calc((100% - var(--container)) / 2)); gap: var(--space-8); }
.brand { display: inline-flex; align-items: center; height: var(--nav); text-decoration: none; color: var(--ink); }
.brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-toggle { display: none; }
.nav-panel { display: contents; }

@media (max-width: 960px) {
  .c-nav { gap: var(--space-4); padding: 0 var(--space-4); }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-panel {
    display: none;
    position: absolute; left: 0; right: 0; top: var(--nav);
    flex-direction: column; align-items: stretch;
    padding: var(--space-2) var(--space-4) var(--space-6);
    background: var(--ground);
    border-bottom: var(--stroke) solid var(--line-strong);
  }
  .site-header.is-open .nav-panel { display: flex; }
  .nav-panel .c-nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-panel .c-nav__link {
    height: var(--control-touch); width: 100%; padding-top: 0;
    border-bottom: var(--stroke) solid var(--line);
  }
  .nav-panel .c-nav__link[aria-current="page"] { color: var(--ink); border-bottom: var(--stroke-strong) solid var(--signal); }
  .nav-panel .c-nav__end { margin: var(--space-6) 0 0; }
}

/* ---------------------------------------------------------------------
   Hero and page heads
   --------------------------------------------------------------------- */
.hero { padding: var(--space-24) 0 0; }
.hero__title {
  margin: var(--space-4) 0 0;
  max-width: 894px;
  font-size: 64px; line-height: 64px; font-weight: 500; letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero__lead { margin: var(--space-6) 0 0; max-width: var(--measure); font-size: 20px; line-height: 28px; color: var(--ink-2); text-wrap: pretty; }
.hero .c-metrics { margin-top: var(--space-16); }
.hero__facts { margin-top: var(--space-6); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

@media (max-width: 720px) {
  .hero { padding-top: var(--space-16); }
  .hero__title { font-size: 40px; line-height: 44px; letter-spacing: -0.02em; }
  .hero__lead { font-size: 16px; line-height: 24px; }
  .c-section__title { font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }
  .c-section__lead { font-size: 16px; line-height: 24px; }
  .c-section__bar { flex-wrap: wrap; row-gap: var(--space-1); }
  .c-section__aside { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* ---------------------------------------------------------------------
   Sections and blocks
   --------------------------------------------------------------------- */
.section { padding-top: var(--space-24); }
.section--tight { padding-top: var(--space-16); }
.block { margin-top: var(--space-12); }
.block--s { margin-top: var(--space-6); }
.note { margin-top: var(--space-4); max-width: var(--measure); }
.c-section__aside a { color: var(--ink-2); text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.c-section__aside a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* Reading text */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose p { font-size: 16px; line-height: 24px; color: var(--ink); }
.prose .lead { font-size: 20px; line-height: 28px; color: var(--ink-2); }

/* 12-column split */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-12); align-items: start; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; } .span-12 { grid-column: 1 / -1; }
@media (max-width: 960px) {
  .split > [class*="span-"] { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   Cells — hairline grid of text cells (the Document layer's "cards")
   --------------------------------------------------------------------- */
.cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--stroke);
  border: var(--stroke) solid var(--line);
  background: var(--line);
}
.cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cells, .cells--2, .cells--4 { grid-template-columns: minmax(0, 1fr); } }
.cell {
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--space-2);
  min-width: 0;
  padding: var(--space-6);
  background: var(--ground-raised);
}
.cell.is-key { box-shadow: inset 0 0 0 2px var(--signal); }
.cell__k { font-family: var(--l-label-font); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: var(--l-label-track); text-transform: var(--l-label-case); color: var(--ink-3); }
.cell.is-key .cell__k { color: var(--signal); }
.cell__title { margin-top: var(--space-2); font-size: 20px; line-height: 28px; font-weight: 500; color: var(--ink); }
.cell__text { font-size: 16px; line-height: 24px; color: var(--ink-2); }
.cell__text + .cell__text { margin-top: var(--space-2); }
.cell__foot { margin-top: auto; padding-top: var(--space-4); }
.cell .c-meta { margin-top: var(--space-2); }
.cell .actions { margin-top: auto; padding-top: var(--space-6); }

/* Numbered rule list */
.rules { margin: 0; padding: 0; list-style: none; border-top: var(--stroke) solid var(--ink); }
.rules > li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--stroke) solid var(--line);
}
.rules__n { font-family: var(--font-mono); font-size: 12px; line-height: 24px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-3); }
.rules__t { max-width: var(--measure); font-size: 16px; line-height: 24px; color: var(--ink); }
.rules__t .ink-2 { display: block; margin-top: var(--space-1); }

/* ---------------------------------------------------------------------
   Tables on small screens: scroll inside, never the page
   --------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > .c-table { min-width: 720px; }
.table-wrap--s > .c-table { min-width: 0; }
.c-table td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.c-table td.wrap, .c-table th.wrap { white-space: normal; }
.c-table th[scope="row"] { font-weight: 500; }
.c-table .c-ev { vertical-align: middle; }
.c-table__src a { color: var(--ink-3); text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.c-table__src a:hover { color: var(--ink); }
.c-table__src { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* ---------------------------------------------------------------------
   Evidence grades used on this site, beyond the four in the spec.
   Keys are shapes, never colour, and always sit beside the word.
   Reported ═ (double rule) · Estimate ▭ (box) · Assumption | | (bracket)
   --------------------------------------------------------------------- */
.c-ev--reported::before { box-sizing: border-box; height: 6px; background: transparent; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.c-ev--estimate::before { box-sizing: border-box; height: 6px; background: transparent; border: 1px solid currentColor; }
.c-ev--assumption::before { box-sizing: border-box; height: 8px; background: transparent; border-left: 1px solid currentColor; border-right: 1px solid currentColor; }

/* ---------------------------------------------------------------------
   Lineage on small screens: stack, arrow points down
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .c-lineage { flex-direction: column; }
  .c-lineage__link { flex: 0 0 32px; }
  .c-lineage__link::before { left: 50%; right: auto; top: 0; bottom: 4px; border-top: 0; border-left: var(--stroke) solid var(--line-strong); }
  .c-lineage__link::after { left: calc(50% - 4px); right: auto; top: auto; bottom: 0; width: 9px; height: 8px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
}

/* TRL rows on small screens */
@media (max-width: 860px) {
  .c-trl__row { grid-template-columns: minmax(0, 1fr) auto 24px; row-gap: var(--space-1); padding: var(--space-2) 0; }
  .c-trl__row--head > :last-child { display: none; }
  .c-trl__desc { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   Figures
   --------------------------------------------------------------------- */
.c-figure__head .c-btn { margin-left: auto; height: 32px; }
.c-figure__basis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.fig-svg text { font-family: var(--font-mono); font-size: 12px; }
.fig-svg .c-chart-label { font-family: var(--font-sans); font-size: 14px; }
.bar-clean { stroke: none; }
.bar-lift { fill: var(--ground-raised); stroke-width: 1; shape-rendering: crispEdges; }
.bar-text { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-2); }
.bar-total { font-family: var(--font-sans); font-size: 14px; fill: var(--ink); }
.c-figure__plot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.key-shape { display: inline-flex; align-items: center; gap: var(--space-2); }
.key-shape::before { content: ""; flex: none; box-sizing: border-box; width: 16px; height: 8px; }
.key-shape--solid::before { background: var(--ink-2); }
.key-shape--outline::before { border: 1px solid var(--ink-2); }

/* ---------------------------------------------------------------------
   Planner
   --------------------------------------------------------------------- */
.planner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-12); }
.planner__inputs { grid-column: span 4; display: flex; flex-direction: column; gap: var(--space-8); }
.planner__out { grid-column: span 8; display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
@media (max-width: 1080px) { .planner__inputs, .planner__out { grid-column: 1 / -1; } }
.fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fieldset__legend { display: block; width: 100%; padding: 0 0 var(--space-3); margin-bottom: var(--space-4); border-bottom: var(--stroke) solid var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.fields .c-field--wide { grid-column: 1 / -1; }
@media (max-width: 1080px) { .fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c-field__input[type="number"] { -moz-appearance: textfield; }
.c-field__input::-webkit-outer-spin-button, .c-field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.range { display: flex; flex-direction: column; gap: var(--space-2); }
.range__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.range__value { font-family: var(--font-sans); font-size: 32px; line-height: 40px; letter-spacing: -0.01em; color: var(--ink); }
.range__value .c-metric__unit { margin-left: var(--space-1); }
.range input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.range input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); }
.range input[type="range"]::-moz-range-track { height: 2px; background: var(--line-strong); }
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; background: var(--ink); border: 0; border-radius: var(--l-radius); }
.range input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--ink); border: 0; border-radius: var(--l-radius); }
.range input[type="range"]:focus-visible { outline: none; }
.range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }
.range__limits { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.planner__finding { max-width: 894px; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.planner__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }

/* ---------------------------------------------------------------------
   Founder
   --------------------------------------------------------------------- */
.person__name { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; }
.person__role { margin-top: var(--space-1); }
.person .c-facts { margin-top: var(--space-4); }

/* Source list */
.sources { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: var(--space-6); }
@media (max-width: 860px) { .sources { columns: 1; } }
.sources li { break-inside: avoid; padding: var(--space-2) 0; border-bottom: var(--stroke) solid var(--line); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.sources a { color: var(--ink-2); text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.sources a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* Formula */
.formula { display: inline-block; padding: var(--space-3) var(--space-4); background: var(--ground-alt); font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }

/* Document tiles as buttons */
.c-docs { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.c-doc__req { margin-top: auto; padding-top: var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }

/* ---------------------------------------------------------------------
   Footer — the opposite theme, wordmark and a facts line
   --------------------------------------------------------------------- */
.site-footer { margin-top: var(--space-24); padding: var(--space-12) 0; }
.site-footer .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-8); }
.site-footer .c-facts { margin: 0 0 0 auto; }
.site-footer a { color: var(--ink-2); text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.site-footer a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.site-footer .slogan { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }
@media (max-width: 860px) { .site-footer .c-facts { margin-left: 0; flex-basis: 100%; } }

/* Legal page */
.legal h2 { margin-top: var(--space-12); font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }
.legal h3 { margin-top: var(--space-8); font-size: 16px; line-height: 24px; }
.legal address { font-style: normal; }

/* Series swatch for bar charts (bars carry no line type) */
.key-swatch { display: inline-flex; align-items: center; gap: var(--space-2); }
.key-swatch::before { content: ""; flex: none; width: 16px; height: 8px; background: var(--key, var(--ink)); }

/* A fact longer than a phone line may wrap inside itself rather than push the page wide */
@media (max-width: 640px) { .c-facts > * { white-space: normal; } }