/* gib.bz -- the ONE stylesheet. Mercury palette. Personality lives in the words.

   Rules (enforced by tools/validate.py):
   - Every colour is a token in :root below. Nothing outside :root (and the
     print/contrast overrides, which only reassign tokens) may use a literal
     colour. tools/cards.py, tools/assets/build.py and the theme-color meta
     read these same tokens, so changing one here changes everything.
   - No inline style= in templates and no page-specific stylesheets. A new
     look is a new component (or a modifier on one) in this file.

   Sections: tokens / base / layout / header + footer / components
   (page-head, hero, cards, tags, rows, facts, verdict, toc, end) / prose
   (incl. figures, callouts, references, corrections) / responsive / print.
   Component inventory with markup: README.md "Design system". */

@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-var.woff2") format("woff2-variations"); font-weight: 300 700; font-display: swap; }

:root {
  color-scheme: dark;

  --bg: #0b0f17;
  --surface-1: #101624;
  --surface-2: #151d2d;
  --surface-code: #131b2c;

  --text: #c9d6ee;
  --text-strong: #e2eafa;
  --text-secondary: #9fb0cc;
  --text-muted: #7684a0;

  --border: #2b3a59;
  --border-strong: #3a4d72;

  --accent: #8fb4ff;
  --accent-strong: #c4d6ff;
  --focus: #ffd166;
  --on-focus: #111111;

  --stage-bg: #3a2a05;
  --stage-text: #ffd166;
  --stage-border: #6b4f12;

  --logo-glow: rgba(143, 180, 255, .3);
  --link-underline: rgba(143, 180, 255, .45);

  /* Meaning only: callouts and status. Never decoration. */
  --danger: #ff7b7b;
  --warning: #f2bb5f;
  --success: #69d3a7;

  --mono: "Space Mono", ui-monospace, monospace;
  --sans: "Space Grotesk", system-ui, sans-serif;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem;

  --gutter: 40px;
  --measure: 70ch;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }
.print-only { display: none; }

time, .meta, .tag, .facts dd { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 10;
  background: var(--focus); color: var(--on-focus); padding: var(--space-2) var(--space-4);
  font-family: var(--mono); font-size: .9rem; text-decoration: none;
}
.skip:focus { top: var(--space-4); }

.stagebar {
  background: var(--stage-bg); color: var(--stage-text); text-align: center;
  font-family: var(--mono); font-size: .8rem; padding: var(--space-1) var(--space-4);
  border-bottom: 1px solid var(--stage-border);
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-6);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-7) 0 var(--space-8); }

/* utility: read by screen readers, not shown */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.meta { font-family: var(--mono); font-size: .85rem; color: var(--text-muted); margin: 0; }

/* header */
header.site { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4) var(--space-6); }
.logo {
  font-family: var(--mono); font-size: 1.75rem; font-weight: 700; color: var(--accent);
  text-decoration: none; text-shadow: 0 0 10px var(--logo-glow);
}
.logo:hover { color: var(--accent-strong); }
nav.primary { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-family: var(--mono); font-size: .95rem; }
nav.primary a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-2);
  text-decoration: none; border-bottom: 2px solid transparent;
}
nav.primary a:hover { color: var(--accent-strong); border-bottom-color: var(--border-strong); }
nav.primary a[aria-current="page"] { color: var(--text-strong); border-bottom-color: var(--accent); }

/* footer */
footer.site {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  font-family: var(--mono); font-size: .85rem; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: var(--space-4);
}
footer.site a { color: var(--text-secondary); text-decoration: none; }
footer.site a:hover { color: var(--accent-strong); text-decoration: underline; }
footer.site .links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

/* shared heading block */
.page-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); }
.page-head h1, .hero h1 {
  margin: 0; color: var(--text-strong); font-weight: 700; line-height: 1.08;
  font-size: clamp(2.25rem, 5vw, 3.5rem); text-wrap: balance; letter-spacing: -.01em;
}
.deck { margin: 0; font-size: 1.2rem; color: var(--text-secondary); }
.byline { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }

.section-label {
  margin: 0 0 var(--space-4); font-family: var(--mono); font-size: .9rem; font-weight: 400;
  color: var(--text-secondary); text-transform: lowercase; letter-spacing: .02em;
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--border);
}

/* homepage */
main:has(.hero) { gap: var(--space-7); }
.hero { display: flex; flex-direction: column; gap: var(--space-4); max-width: 820px; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; margin-bottom: var(--space-2); }
.hero p { margin: 0; font-size: 1.2rem; color: var(--text-secondary); max-width: 64ch; }

/* Column count follows the number of cards, so a short list never looks like
   a longer one with pieces missing: 1 card = one readable column, 2 = two
   columns, 3+ = three. Tablet caps at two, phone at one (see responsive). */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.cards:has(> .card:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards:not(:has(> .card:nth-child(2))) { grid-template-columns: minmax(0, 36rem); }
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); background: var(--surface-1); border: 1px solid var(--border);
  transition: border-color .12s, background-color .12s;
}
.card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.card:focus-within { border-color: var(--focus); }
.card-title { margin: 0; font-size: 1.3rem; line-height: 1.25; }
.card-title a { color: var(--text-strong); text-decoration: none; }
.card:hover .card-title a { color: var(--accent-strong); }
.stretched::after { content: ""; position: absolute; inset: 0; }
.stretched:focus-visible { outline: none; }
.card-sum { margin: 0; font-size: 1rem; color: var(--text-secondary); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }

.latest .aside { margin: var(--space-6) 0 0; max-width: 64ch; color: var(--text-secondary); }
.browse ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--mono); }
.browse a { display: inline-flex; min-height: 36px; align-items: center; }

/* tags */
.tag {
  font-family: var(--mono); font-size: .75rem; line-height: 1.6; align-self: flex-start;
  padding: 0 .45rem; color: var(--accent); border: 1px solid var(--border-strong); white-space: nowrap;
}
.tag.solid { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.tag.draft { color: var(--text-muted); border-style: dashed; }

/* section index rows */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.row {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: var(--space-2) var(--space-5);
  align-items: baseline; padding: var(--space-5) 0; border-bottom: 1px solid var(--border);
}
.row > .tag { justify-self: start; }
.rows.plain .row { grid-template-columns: minmax(0, 1fr) auto; }
.row-main { display: flex; flex-direction: column; gap: var(--space-1); }
.row-title { margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
.row-title a { color: var(--text-strong); text-decoration: none; }
.row-title a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: .2em; }
.row-sum { margin: 0; color: var(--text-secondary); font-size: 1rem; }
.row-tags { margin: 0; font-size: .8rem; }
.ident { font-family: var(--mono); font-size: .9em; color: var(--accent); }

/* article */
.article { display: flex; flex-direction: column; gap: var(--space-6); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-family: var(--mono); font-size: .85rem; color: var(--text-muted); }
.crumbs li + li::before { content: "/"; margin: 0 var(--space-2); color: var(--border-strong); }
.crumbs a { color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--accent-strong); text-decoration: underline; }
.crumbs ol { flex-wrap: nowrap; }
.crumbs li { white-space: nowrap; }
.crumbs [aria-current] { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.facts {
  margin: 0; max-width: var(--measure); display: grid; grid-template-columns: max-content minmax(0, 1fr);
  border: 1px solid var(--border); background: var(--surface-1);
}
.facts > div { display: contents; }
.facts dt, .facts dd { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }
.facts > div:last-child dt, .facts > div:last-child dd { border-bottom: 0; }
.facts dt { font-family: var(--mono); font-size: .85rem; color: var(--text-muted); }
.facts dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
.facts dd.mono { font-family: var(--mono); font-size: .9rem; }
.page-head h1.long { font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.12; }

.verdict { margin: 0; max-width: var(--measure); font-family: var(--mono); font-size: 1rem; color: var(--text-strong); border-left: 3px solid var(--accent); padding: var(--space-2) var(--space-4); background: var(--surface-1); }

.toc { max-width: var(--measure); border: 1px solid var(--border); padding: var(--space-3) var(--space-4); }
.toc summary { font-family: var(--mono); font-size: .9rem; color: var(--text-secondary); cursor: pointer; min-height: 24px; }
.toc ol { margin: var(--space-3) 0 0; padding-left: 1.4em; }

.end { max-width: var(--measure); border-top: 1px solid var(--border); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* long-form */
.prose { max-width: var(--measure); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol, .prose dl, .prose table, .prose figure, .prose details { margin: 0 0 1.2em; }
.prose a.ext::after { content: "\2197" / ""; font-size: .75em; margin-left: .15em; text-decoration: none; display: inline-block; }
.prose a { text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose h2 { margin: 2.9rem 0 1rem; font-size: 1.35rem; line-height: 1.3; color: var(--text-strong); }
.prose h3 { margin: 2rem 0 .75rem; font-size: 1.1rem; line-height: 1.35; color: var(--text-strong); }
.prose h2, .prose h3 { scroll-margin-top: var(--space-5); break-after: avoid; }
.prose .anchor { margin-left: .35em; font-family: var(--mono); font-weight: 400; color: var(--text-muted); text-decoration: none; opacity: 0; }
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose .anchor:focus-visible { opacity: 1; }
.prose li { margin-bottom: .35em; }
.prose strong { color: var(--text-strong); }
.prose code {
  font-family: var(--mono); font-size: .875em; color: var(--text-strong);
  background: var(--surface-code); border: 1px solid var(--border); padding: .05em .35em; overflow-wrap: anywhere;
}
.prose pre { background: var(--surface-code); border: 1px solid var(--border); padding: var(--space-4); overflow-x: auto; margin: 0 0 1.2em; }
.prose pre code { border: 0; padding: 0; background: none; font-size: .875rem; overflow-wrap: normal; }
.prose blockquote { margin: 0 0 1.2em; padding-left: var(--space-4); border-left: 2px solid var(--border-strong); color: var(--text-secondary); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-7) 0; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 1rem; }
.prose th, .prose td { border: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.prose th { background: var(--surface-1); color: var(--text-strong); font-weight: 600; }
.prose caption, .prose figcaption { font-family: var(--mono); font-size: .85rem; color: var(--text-muted); text-align: left; padding-top: var(--space-2); }
.prose img { max-width: 100%; height: auto; }
.prose figure { margin: 0 0 1.5em; }
.prose .figure-link { display: block; text-decoration: none; }
.prose figure img { display: block; border: 1px solid var(--border); background: var(--surface-code); }

.prose .callout { margin: 0 0 1.2em; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); background: var(--surface-1); color: var(--text); }
.prose .callout p:last-child { margin-bottom: 0; }
.callout-label { font-family: var(--mono); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-right: .4em; color: var(--accent); }
.prose .callout-warning { border-left-color: var(--warning); }
.prose .callout-warning .callout-label { color: var(--warning); }
.prose .callout-finding { border-left-color: var(--success); }
.prose .callout-finding .callout-label { color: var(--success); }
.prose .callout-limitation { border-left-color: var(--text-muted); }
.prose .callout-limitation .callout-label { color: var(--text-secondary); }
.prose details { border: 1px solid var(--border); padding: var(--space-3) var(--space-4); }
.prose details summary { cursor: pointer; color: var(--text-secondary); min-height: 24px; }
.prose details[open] summary { margin-bottom: var(--space-3); }
.prose details pre { margin: 0; }
.intro p { color: var(--text-secondary); }

/* references: numbered, anchored, cited inline as [n] */
.prose sup.cite { font-family: var(--mono); font-size: .7em; line-height: 0; margin-left: .1em; }
.prose sup.cite a { text-decoration: none; }
.prose ol.references { padding-left: 2.2em; font-size: 1rem; color: var(--text-secondary); }
.prose ol.references li { padding-left: .25em; margin-bottom: .6em; overflow-wrap: anywhere; scroll-margin-top: var(--space-5); }
.prose ol.references li::marker { font-family: var(--mono); color: var(--text-muted); }
.prose ol.references li:target { color: var(--text-strong); background: var(--surface-1); outline: 1px solid var(--border-strong); outline-offset: 4px; }

/* corrections: dated log, newest first */
.prose ol.corrections { list-style: none; padding: 0; border-left: 2px solid var(--warning); }
.prose ol.corrections li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) var(--space-4); margin: 0; }
.prose ol.corrections time { font-family: var(--mono); font-size: .9rem; color: var(--warning); padding-top: .1em; }
@media (max-width: 600px) {
  .prose ol.corrections li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 900px) {
  .cards, .cards:has(> .card:nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --gutter: 24px; }
}

@media (max-width: 560px) {
  .cards, .cards:has(> .card:nth-child(3)), .cards:not(:has(> .card:nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; }
  body { font-size: 1.0625rem; }
  .wrap { padding-top: var(--space-5); }
  main { padding: var(--space-6) 0 var(--space-7); gap: var(--space-7); }
  header.site { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  /* Two intentional rows on phones: cves intel notes / off-topic about */
  nav.primary { display: grid; grid-template-columns: repeat(3, max-content); gap: 0 var(--space-3); margin-left: calc(var(--space-2) * -1); }
  /* Get the writing onto the first phone screen. */
  main:has(.hero) { padding-top: var(--space-5); gap: var(--space-5); }
  .hero { gap: var(--space-3); }
  .hero h1 { font-size: 1.6rem; line-height: 1.15; margin-bottom: 0; }
  .hero p { font-size: .975rem; line-height: 1.5; }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .facts dt, .facts dd { padding: var(--space-2) var(--space-3); }
  .facts dt { font-size: .75rem; }
  .facts dd { font-size: .95rem; }
  .facts dd.mono { font-size: .8rem; }
}

@media (max-width: 359px) {
  :root { --gutter: 16px; }
}

@media (prefers-contrast: more) {
  :root { --border: #4a5f88; --text-muted: #9aa8c4; }
  .prose a { text-decoration-color: currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  :root { --bg: #fff; --text: #000; --text-strong: #000; --text-secondary: #222; --text-muted: #444; --border: #999; --surface-1: #fff; --surface-code: #f4f4f4; --accent: #000; }
  body { background: var(--bg); color: var(--text); font-size: 11pt; }
  .skip, .stagebar, nav.primary, footer.site .links, .browse, .toc, .anchor { display: none !important; }
  .logo { text-shadow: none; color: var(--text); }
  .print-only { display: inline; }
  .wrap { max-width: none; padding: 0; }
  main { padding: 1rem 0; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  .prose pre, .prose table, .facts { break-inside: avoid; }
  .prose details { border: 0; padding: 0; }
  h1, h2, h3 { break-after: avoid; }
}