/* Load-Bearing notes. Tokens match the home page. */
:root {
  --bg: #f7f8f6;
  --bg-raised: #eef1ef;
  --ink: #14201f;
  --ink-2: #3c4b49;
  --muted: #66746f;
  --rule: #d8dfdc;
  --accent: #0e6b6b;
  --accent-ink: #0a5252;
  --accent-soft: #dbebe9;
  --code-bg: #e9eeec;
  --warm: #b8641a;
  --warm-ink: #8f4c10;
  --warm-soft: #f6e6d3;
  --adopt: #0e6b6b;
  --trial: #b8641a;
  --watch: #5d6a8a;
  --max: 68ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1514; --bg-raised: #161e1d; --ink: #e7ecea; --ink-2: #c1cbc8; --muted: #8e9d99;
    --rule: #263230; --accent: #4fbdb5; --accent-ink: #7fd3cc; --accent-soft: #163331;
    --code-bg: #1b2523; --warm: #e39a4a; --warm-ink: #f0b56f; --warm-soft: #33241a;
    --adopt: #4fbdb5; --trial: #e39a4a; --watch: #9aa8cc;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1514; --bg-raised: #161e1d; --ink: #e7ecea; --ink-2: #c1cbc8; --muted: #8e9d99;
  --rule: #263230; --accent: #4fbdb5; --accent-ink: #7fd3cc; --accent-soft: #163331;
  --code-bg: #1b2523; --warm: #e39a4a; --warm-ink: #f0b56f; --warm-soft: #33241a;
  --adopt: #4fbdb5; --trial: #e39a4a; --watch: #9aa8cc;
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
a:hover { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-bottom-color: transparent; }
h1, h2, h3 { font-family: "Schibsted Grotesk", "Hanken Grotesk", system-ui, sans-serif; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.1rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: 1.32rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.2; }
h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; }
p, ul, ol { margin: 0; }
code, .mono, .eyebrow, .plate, .crumbs, .issue .meta, .stack { font-family: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 500; }

.wrap { max-width: 760px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem) 4rem; display: flex; flex-direction: column; gap: 2.5rem; }
.crumbs { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--muted); border: 0; display: inline-flex; align-items: center; gap: 0.5rem; }
.crumbs a:hover { color: var(--ink); }
.crumbs img { width: 22px; height: 22px; image-rendering: pixelated; border-radius: 3px; }

header.masthead { display: flex; flex-direction: column; gap: 0.9rem; padding-bottom: 1.4rem; background: linear-gradient(90deg, var(--accent) 0 3.5rem, var(--rule) 3.5rem) bottom / 100% 1px no-repeat; }
.dek { font-size: 1.15rem; line-height: 1.5; color: var(--ink-2); max-width: var(--max); }
.series-note { font-size: 0.85rem; line-height: 1.5; color: var(--muted); max-width: var(--max); margin-top: 0.75rem; }
.series-note a { color: var(--muted); }
.draft-banner { padding: 0.5rem 0.8rem; border: 1px dashed var(--warm); color: var(--warm-ink); background: var(--warm-soft); border-radius: 4px; font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace; font-size: 0.8rem; }

/* The spec plate: the facts a builder checks before reading further. */
.plate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; font-size: 0.78rem; }
.plate div { background: var(--bg-raised); padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; }
.plate dt { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem; }
.plate dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.plate dd a { border: 0; }
@media (max-width: 560px) { .plate { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plate > div:nth-child(9) { grid-column: 1 / -1; } }
.plate .asof { grid-column: 1 / -1; color: var(--muted); font-size: 0.7rem; padding: 0.4rem 0.75rem; }

.verdict { display: inline-flex; align-items: center; gap: 0.45rem; font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; padding: 0.2rem 0.55rem; border: 1.5px solid currentColor; border-radius: 3px; }
.verdict.adopt { color: var(--adopt); }
.verdict.trial { color: var(--trial); }
.verdict.watch { color: var(--watch); }

article.post { display: flex; flex-direction: column; gap: 2.2rem; }
article.post section { display: flex; flex-direction: column; gap: 0.9rem; max-width: var(--max); }
article.post section h2 { padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); }
article.post p, article.post li { color: var(--ink-2); }
article.post ul, article.post ol { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
article.post strong { color: var(--ink); font-weight: 600; }
article.post code { background: var(--code-bg); padding: 0.08rem 0.3rem; border-radius: 3px; font-size: 0.86em; }
article.post pre { background: var(--code-bg); border: 1px solid var(--rule); border-radius: 6px; padding: 0.9rem 1rem; overflow-x: auto; font-size: 0.84rem; line-height: 1.5; margin: 0; }
article.post pre code { background: none; padding: 0; }
article.post blockquote { margin: 0; padding-left: 1rem; border-left: 3px solid var(--warm); color: var(--ink-2); }
article.post table { border-collapse: collapse; font-size: 0.92rem; width: 100%; }
article.post .table { overflow-x: auto; }
article.post th, article.post td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
article.post th { font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* The reference stack, with this issue's layer lit. */
.stack { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; gap: 4px; font-size: 0.74rem; letter-spacing: 0.04em; }
.stack .layers { display: flex; flex-direction: column; gap: 4px; }
.stack .l, .stack .side { padding: 0.5rem 0.7rem; border-radius: 4px; background: var(--bg-raised); color: var(--muted); border: 1px solid var(--rule); }
.stack .side { display: flex; align-items: center; justify-content: center; text-align: center; writing-mode: horizontal-tb; }
.stack .on { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); font-weight: 500; }
.stack .on::after { content: "  \2190 this issue"; color: var(--accent); }
@media (max-width: 520px) { .stack { grid-template-columns: 1fr; } .stack .side { justify-content: flex-start; } }

/* Series index */
.rules { display: flex; flex-direction: column; gap: 0.7rem; padding-left: 1.2rem; color: var(--ink-2); max-width: var(--max); }
.rules strong { color: var(--ink); }
.issues { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.issue { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: 0.3rem 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.issue .no { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.issue h3 a { color: var(--ink); border: 0; }
.issue h3 a:hover { color: var(--accent-ink); }
.issue p { grid-column: 2 / -1; color: var(--ink-2); font-size: 0.95rem; }
.issue .meta { grid-column: 2 / -1; font-size: 0.74rem; color: var(--muted); }
.empty { color: var(--muted); font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace; font-size: 0.85rem; padding: 1rem 0; }
.section-block { display: flex; flex-direction: column; gap: 1rem; }
.legend { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; color: var(--ink-2); font-size: 0.95rem; }
.legend > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; max-width: 20rem; }

footer { color: var(--muted); font-size: 0.85rem; padding-top: 1rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
footer a { color: var(--muted); }

/* The decision leads, set larger: it is what a reader who stops early takes away. */
article.post p.lead { font-size: 1.12rem; line-height: 1.55; color: var(--ink); }
#the-decision { padding: 1rem 1.2rem; border-left: 3px solid var(--warm); background: var(--warm-soft); border-radius: 0 6px 6px 0; }
#the-decision h2 { border-bottom: 0; padding-bottom: 0; font-size: 0.78rem; font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm-ink); font-weight: 500; }

/* Engineering notes: present for whoever inherits the decision, closed by default. */
details.appendix { border: 1px solid var(--rule); border-radius: 6px; background: var(--bg-raised); max-width: var(--max); }
details.appendix summary { cursor: pointer; padding: 0.8rem 1rem; font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
details.appendix summary:hover { color: var(--ink); }
details.appendix summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details.appendix[open] summary { border-bottom: 1px solid var(--rule); }
details.appendix > :not(summary) { margin: 0.9rem 1rem; }
details.appendix p, details.appendix li { color: var(--ink-2); }