/* ==========================================================================
   Silicon Docket
   Ink & electric cyan. Dark by default, light on request, no build step.

   The visual language borrows from the logomark: docket entries are drawn as
   rounded bars, and cyan is reserved for one job — marking something the
   software has flagged. It is never decoration.
   ========================================================================== */

/* --- fonts --------------------------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --- tokens -------------------------------------------------------------- */
:root {
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --measure: 66ch;
  --page: 1140px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 14px;
  --radius-lg: 20px;
  --radius-sm: 9px;

  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem);
  --step-2:  clamp(1.375rem, 1.27rem + 0.52vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.55rem + 1vw, 2.5rem);
  --step-4:  clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);

  /* dark — the default */
  color-scheme: dark;
  --bg: #0A0F1A;
  --bg-sunken: #070B13;
  --surface: #111A2B;
  --surface-2: #162034;
  --border: #1E2A42;
  --border-strong: #2A3A58;
  --border-ui: #52658C;      /* 3.3:1 on --bg — interactive outlines (WCAG 1.4.11) */
  --text: #E6EDF6;
  --text-muted: #9BAAC4;
  --text-dim: #7D8EAB;
  --accent: #35D6E8;
  --accent-strong: #8AF0FA;
  --accent-ink: #06212A;
  --accent-soft: rgba(53, 214, 232, 0.12);
  --accent-line: rgba(53, 214, 232, 0.38);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .7);
  --grid-line: rgba(120, 150, 200, 0.055);
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #FBFCFE;
  --bg-sunken: #F1F4F9;
  --surface: #FFFFFF;
  --surface-2: #F5F8FC;
  --border: #DDE4EE;
  --border-strong: #C3CEDE;
  --border-ui: #7E8CA2;      /* 3.3:1 on --bg — interactive outlines (WCAG 1.4.11) */
  --text: #0D1524;
  --text-muted: #4A5871;
  --text-dim: #5E6D87;
  --accent: #0C7183;
  --accent-strong: #08525F;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(12, 113, 131, 0.09);
  --accent-line: rgba(12, 113, 131, 0.32);
  --shadow: 0 1px 2px rgba(16, 30, 54, .06), 0 12px 28px -14px rgba(16, 30, 54, .22);
  --grid-line: rgba(30, 60, 110, 0.05);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --bg: #FBFCFE;
    --bg-sunken: #F1F4F9;
    --surface: #FFFFFF;
    --surface-2: #F5F8FC;
    --border: #DDE4EE;
    --border-strong: #C3CEDE;
    --border-ui: #7E8CA2;
    --text: #0D1524;
    --text-muted: #4A5871;
    --text-dim: #5E6D87;
    --accent: #0C7183;
    --accent-strong: #08525F;
    --accent-ink: #FFFFFF;
    --accent-soft: rgba(12, 113, 131, 0.09);
    --accent-line: rgba(12, 113, 131, 0.32);
    --shadow: 0 1px 2px rgba(16, 30, 54, .06), 0 12px 28px -14px rgba(16, 30, 54, .22);
    --grid-line: rgba(30, 60, 110, 0.05);
  }
}

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  overflow-wrap: break-word;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

.skip {
  position: absolute; left: 50%; translate: -50% -140%;
  z-index: 100; padding: .7rem 1.15rem;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 0 0 10px 10px; font-weight: 600; text-decoration: none;
  transition: translate .18s ease;
}
.skip:focus { translate: -50% 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- layout -------------------------------------------------------------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--page)); margin-inline: auto; }

section { padding-block: clamp(4rem, 9vw, 7.5rem); }
section + section { border-top: 1px solid var(--border); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
/* :not(.eyebrow) — a bare `.section-head p` is (0,1,1) and silently beats the
   .eyebrow component at (0,1,0), which repainted every section label. */
.section-head > p:not(.eyebrow) { color: var(--text-muted); margin-top: .85rem; font-size: var(--step-1); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ''; width: 1.5rem; height: 2px; border-radius: 2px;
  background: var(--accent); opacity: .55;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); letter-spacing: -0.015em; }

/* --- header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.site-header[data-stuck='true'] { border-bottom-color: var(--border); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--bg); }
}

.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 68px; }

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand svg { height: 30px; width: auto; color: var(--text); }
.brand-mark { display: none; }
/* Below ~560px the full lockup, the toggle and the CTA cannot share a row
   without pushing the page sideways. Drop to the mark alone. */
@media (max-width: 560px) {
  .brand-lockup { display: none; }
  .brand-mark { display: block; height: 30px; }
  .header-inner { gap: .75rem; }
  .site-nav { gap: .3rem; }
  .site-nav .btn { padding: .6rem .9rem; }
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
/* The header CTA is two short words and must stay on one line. Longer button
   labels elsewhere have to stay wrappable — see .btn. */
.site-nav .btn { white-space: nowrap; }

/* Scoped to .nav-link, not to `a` — a bare `.site-nav a` would out-specify
   .btn-primary and repaint the header CTA's label in muted text. */
.site-nav .nav-link {
  padding: .5rem .8rem; border-radius: 8px; text-decoration: none;
  font-size: var(--step--1); font-weight: 500; color: var(--text-muted);
  transition: color .16s ease, background .16s ease;
}
.site-nav .nav-link:hover { color: var(--text); background: var(--surface); }
@media (max-width: 780px) { .site-nav .nav-link { display: none; } }

.header-actions { display: flex; align-items: center; gap: .6rem; }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .72rem 1.25rem; border-radius: 10px; border: 1px solid transparent;
  font-size: var(--step--1); font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, translate .16s ease;
}
.btn:hover { translate: 0 -1px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost { border-color: var(--border-ui); color: var(--text); background: transparent; }
.btn-ghost:hover { background: var(--surface); border-color: var(--accent-line); }
.btn-lg { padding: .95rem 1.6rem; font-size: var(--step-0); border-radius: 12px; }

.theme-toggle {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 9px; border: 1px solid var(--border);
  background: transparent; cursor: pointer; color: var(--text-muted);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme='light'] .theme-toggle .i-sun { display: block; }
:root[data-theme='light'] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme='dark']) .theme-toggle .i-moon { display: none; }
}

/* --- hero ---------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 8vw, 6.5rem); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
}
.hero::after {
  content: ''; position: absolute; z-index: -1;
  width: min(760px, 90vw); aspect-ratio: 1; left: 50%; top: -46%;
  translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
}

.hero-grid { display: grid; gap: clamp(2.75rem, 6vw, 4.5rem); align-items: center; }
.hero-grid > * { min-width: 0; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); } }

.status-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .38rem .85rem .38rem .6rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--text-muted); margin-bottom: 1.6rem;
}
.status-pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.hero h1 { text-wrap: balance; }
.hero-sub {
  margin-top: 1.5rem; font-size: var(--step-1); color: var(--text-muted);
  max-width: 54ch; text-wrap: pretty;
}
.hero-actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-note {
  margin-top: 1.5rem; font-size: var(--step--1); color: var(--text-dim);
  display: flex; align-items: center; gap: .5rem;
}

/* --- hero illustration: a document with one finding ---------------------- */
.doc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  overflow: hidden;
}
.doc-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim);
}
.doc-bar .dots { display: flex; gap: .32rem; }
.doc-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.doc-body { padding: 1.5rem 1.35rem 1.35rem; display: grid; gap: .95rem; }

/* redacted body text, drawn with the same rounded bars as the logomark */
.line { display: flex; gap: .5rem; align-items: center; }
.line i { height: 8px; border-radius: 4px; background: var(--border); display: block; }
.line.dim i { opacity: .62; }

.cite {
  font-family: var(--font-mono); font-size: clamp(.7rem, 1.7vw, .8rem);
  line-height: 1.55; color: var(--text-muted); word-break: break-word;
}
.cite em { font-style: italic; color: var(--text); }
.cite.flagged {
  color: var(--text); text-decoration: underline wavy var(--accent);
  text-underline-offset: 5px; text-decoration-thickness: 1.5px;
}

.finding {
  margin-top: .15rem; border-left: 2px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 10px 10px 0;
  padding: .7rem .9rem; display: grid; gap: .3rem;
}
.finding .rule {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.finding p { font-size: .82rem; line-height: 1.5; color: var(--text); }

.doc-foot {
  border-top: 1px solid var(--border); padding: .75rem 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: .68rem; color: var(--text-dim);
}
.doc-foot .ok { color: var(--accent); }
.figcap {
  margin-top: .85rem; font-size: .76rem; color: var(--text-dim);
  text-align: center; font-family: var(--font-mono);
}

/* --- cards --------------------------------------------------------------- */
.cards { display: grid; gap: 1.5rem; }
.cards > * { min-width: 0; }
@media (min-width: 900px) { .cards.two { grid-template-columns: 1fr 1fr; } }

/* Side by side, the two cards should start each of their four blocks on the
   same line, whatever length the titles happen to be. Subgrid makes the cards
   share the container's rows instead of each measuring its own. Without
   support the cards simply keep their own rhythm, which is the old behaviour. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .cards.two { grid-template-rows: repeat(4, auto); }
    .cards.two .card {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 1.1rem;
    }
    /* The auto margin exists to bottom-align the list in the flex fallback.
       Inside a shared row it would push the shorter list down instead, so the
       two lists would start at different heights — the very thing subgrid is
       here to prevent. */
    .cards.two .checklist { margin-top: 0; align-self: start; }
  }
}

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
/* Grid, not flex: with flex the chip stayed inline beside a short title and
   dropped below a long one, so two side-by-side cards started their bodies at
   different heights. A fixed `auto` track keeps the chip top-right always, and
   the title simply wraps within what is left. Below 480px there is no room for
   both, so the chip takes its own row — in every card at once. */
.card-top { display: grid; align-items: start; gap: .75rem 1rem; }
@media (min-width: 480px) {
  .card-top { grid-template-columns: minmax(0, 1fr) auto; }
}
.card h3 { text-wrap: balance; }
.card .lede { color: var(--text); font-weight: 500; }
.card p { color: var(--text-muted); }

.tag {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .32rem .6rem; border-radius: 999px;
  border: 1px solid var(--accent-line); color: var(--accent);
  background: var(--accent-soft); white-space: nowrap;
}

.checklist { list-style: none; padding: 0; display: grid; gap: .8rem; margin-top: auto; }
/* Marker is positioned, not a grid/flex track — inline <em> in the text must
   stay part of the same flow, not become a sibling box. */
.checklist li {
  position: relative; padding-left: 1.85rem;
  font-size: var(--step--1); color: var(--text-muted); line-height: 1.55;
}
.checklist li::before {
  content: ''; position: absolute; left: 0; top: .32em;
  width: 1.1rem; height: 1.1rem;
  border-radius: 4px; background-color: var(--accent-soft);
  border: 1px solid var(--accent-line);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 7px 2px; background-position: center; background-repeat: no-repeat;
}
.checklist em { font-style: italic; color: var(--text); }

/* --- steps --------------------------------------------------------------- */
.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid; gap: .35rem 1.5rem; padding: 1.75rem 0;
  border-top: 1px solid var(--border);
}
.step:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 760px) { .step { grid-template-columns: 4.5rem 20ch 1fr; align-items: start; } }
.step > * { min-width: 0; }
.step .num {
  font-family: var(--font-mono); font-size: .8rem; color: var(--accent);
  padding-top: .18rem; letter-spacing: .05em;
}
.step h3 { font-size: var(--step-1); }
.step p { color: var(--text-muted); max-width: var(--measure); }

/* --- principles ---------------------------------------------------------- */
.principles { display: grid; gap: 1.25rem; }
.principles > * { min-width: 0; }
@media (min-width: 820px) { .principles { grid-template-columns: 1fr 1fr; } }
.principle {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.6rem; background: var(--surface); display: grid; gap: .6rem;
}
.principle h3 { font-size: var(--step-1); text-wrap: balance; }
.principle p { color: var(--text-muted); font-size: var(--step--1); }

/* --- faq ----------------------------------------------------------------- */
.faq { display: grid; max-width: 78ch; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.3rem 3rem 1.3rem 0;
  position: relative; font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-1); letter-spacing: -0.015em; line-height: 1.35;
  transition: color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: ''; position: absolute; right: .35rem; top: 1.75rem;
  width: 13px; height: 13px; flex: none;
  border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
  rotate: 45deg; translate: 0 -25%; transition: rotate .2s ease, border-color .16s ease;
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 25%; border-color: var(--accent); }
.faq details > div { padding: 0 3rem 1.5rem 0; }
.faq details p { color: var(--text-muted); max-width: var(--measure); }

/* --- closing cta --------------------------------------------------------- */
.cta-panel {
  position: relative; overflow: hidden;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface); padding: clamp(2.25rem, 5vw, 3.75rem);
  text-align: center;
}
.cta-panel::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 130% at 50% -20%, var(--accent-soft), transparent 60%);
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { text-wrap: balance; }
.cta-lede { color: var(--text-muted); max-width: 58ch; margin: 1.1rem auto 0; text-wrap: pretty; }
.cta-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.cta-fine { margin-top: 1.5rem; font-size: var(--step--1); color: var(--text-dim); }
.cta-fine a { color: var(--accent); text-underline-offset: 3px; }

/* --- footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-sunken); padding-block: 3.5rem 2.75rem; }
.footer-top > * { min-width: 0; }
.footer-top { display: grid; gap: 2.25rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--border); }
@media (min-width: 800px) { .footer-top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 3rem; } }
.footer-brand svg { height: 28px; width: auto; color: var(--text); }
.footer-brand p { margin-top: 1rem; color: var(--text-dim); font-size: var(--step--1); max-width: 40ch; }
.footer-col h2 {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-dim); font-weight: 400; margin-bottom: 1rem;
  font-family: var(--font-mono); line-height: 1.4; letter-spacing: .16em;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer-col a {
  text-decoration: none; color: var(--text-muted); font-size: var(--step--1);
  transition: color .16s ease;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  padding-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
}
.disclaimer { font-size: .78rem; color: var(--text-dim); max-width: 82ch; line-height: 1.6; }
.copyright { font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim); white-space: nowrap; }

/* --- 404 ----------------------------------------------------------------- */
main:focus { outline: none; }

.center-page {
  min-height: 100svh; display: grid; place-items: center;
  text-align: center; padding: var(--gutter);
}
.center-page .code {
  font-family: var(--font-mono); color: var(--accent); font-size: .8rem;
  letter-spacing: .2em; margin-bottom: 1.25rem;
}
.center-page p { color: var(--text-muted); margin: 1rem auto 2rem; max-width: 46ch; }