/* SkillScan site. Paper and ink, as in the app (app/lib/theme/colors.dart):
   ink is the accent, vermilion is signal only, amber is the lost seconds.
   Archivo Black for display, a serif reading face for the column,
   Space Mono only for measured numbers and citations. */

@font-face {
  font-family: "Archivo Black";
  src: url("/assets/fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --ground: #f5f3ef;
  --surface: #ffffff;
  --surface-2: #edeae3;
  --rule: #e4e0d8;
  --rule-strong: #cdc8be;
  --ink: #0e0e10;
  --on-ink: #ffffff;
  --text: #0e0e10;
  --text-2: #5c5750;
  --text-3: #736d65;
  --signal: #c42b1f;
  --signal-mark: #e5372b;
  --leak: #c08a00;
  --leak-wash: rgba(192, 138, 0, 0.28);
  --masthead: rgba(245, 243, 239, 0.78);
  --shadow: 0 1px 2px rgba(14, 14, 16, 0.04), 0 10px 28px -12px rgba(14, 14, 16, 0.12);

  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-read: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 68ch;
  --gutter: 16px;
  --radius: 14px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0e0e10;
    --surface: #17171a;
    --surface-2: #222226;
    --rule: #2a2a2f;
    --rule-strong: #3a3a40;
    --ink: #f5f3ef;
    --on-ink: #0e0e10;
    --text: #efece6;
    --text-2: #aaa59c;
    --text-3: #959087;
    --signal: #ff7a6e;
    --signal-mark: #ff5a4c;
    --leak: #ffc94d;
    --leak-wash: rgba(255, 201, 77, 0.24);
    --masthead: rgba(14, 14, 16, 0.74);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -12px rgba(0, 0, 0, 0.5);
  }
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem) / 1.6 var(--font-read);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--leak-wash); color: inherit; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; height: auto; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--on-ink);
  font: 600 15px/1 var(--font-ui);
  border-radius: 10px;
  text-decoration: none;
}
.skip:focus { top: 10px; }

/* ------------------------------------------------------------ masthead */

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--masthead);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  padding-top: env(safe-area-inset-top);
}

.masthead-inner {
  max-width: 1180px;
  margin: 0 auto;
  height: 60px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  font: 400 19px/1 var(--font-display);
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  margin: 0;
}
.wordmark .wm-hot { color: var(--signal-mark); }
.wordmark-small { font-size: 16px; }

.masthead-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font: 500 15px/1 var(--font-ui);
}
.masthead-nav > a:not(.button) {
  text-decoration: none;
  color: var(--text-2);
  padding: 8px 2px;
}
.masthead-nav > a[aria-current="page"] { color: var(--text); }

/* -------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font: 600 16px/1 var(--font-ui);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.button:active { transform: scale(0.97); }
.button-small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.button-ink { background: var(--ink); color: var(--on-ink); }
.button-paper { background: var(--ground); color: var(--text); }

@media (hover: hover) and (pointer: fine) {
  .button-ink:hover { background: color-mix(in srgb, var(--ink) 86%, var(--ground)); }
  .button-paper:hover { background: color-mix(in srgb, var(--ground) 88%, var(--ink)); }
  .masthead-nav > a:not(.button):hover { color: var(--text); }
}

/* ----------------------------------------------------------- post frame */

.post, .index, .home {
  padding: clamp(28px, 6vw, 64px) var(--gutter) 0;
}

.post-header, .index-header, .home-header {
  max-width: 1000px;
  margin: 0 auto clamp(28px, 4vw, 44px);
}

.crumbs {
  display: flex;
  gap: 8px;
  font: 500 14px/1.4 var(--font-ui);
  color: var(--text-3);
  margin-bottom: 18px;
}
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1 {
  font: 400 clamp(2.15rem, 1.35rem + 3.6vw, 4rem) / 1.03 var(--font-display);
  letter-spacing: -0.022em;
  margin: 0 0 18px;
  max-width: 22ch;
  text-wrap: balance;
}

.dek {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem);
  line-height: 1.45;
  color: var(--text-2);
  max-width: 60ch;
  margin: 0 0 20px;
  text-wrap: pretty;
}

.byline {
  font: 400 14px/1.5 var(--font-ui);
  color: var(--text-3);
  margin: 0;
}
.byline a { color: var(--text-2); text-underline-offset: 3px; }
.byline time { font-variant-numeric: tabular-nums; }

/* Column + contents rail. One column on phones; on wide screens the contents
   sit in a sticky rail beside the reading column. */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--measure));
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 1120px) {
  .post-layout {
    grid-template-columns: minmax(0, var(--measure)) 230px;
    grid-template-areas: "answer toc" "prose toc";
    column-gap: 64px;
    justify-content: space-between;
  }
  .post-layout > .answer { grid-area: answer; }
  .post-layout > .prose { grid-area: prose; }
  .post-layout > .toc {
    grid-area: toc;
    align-self: start;
    position: sticky;
    top: 92px;
    margin: 0;
    padding: 4px 0 0 20px;
    border: 0;
    border-left: 1px solid var(--rule);
    background: none;
    box-shadow: none;
  }
}

/* Below the rail breakpoint the title block shares the reading column's
   left edge; with the rail, both start at the 1000px frame's edge. */
.post-header { max-width: var(--measure); }
@media (min-width: 1120px) {
  .post-header { max-width: 1000px; }
  .post-header h1, .post-header .dek { max-width: calc(var(--measure) + 6ch); }
}

/* ----------------------------------------------------------- short answer */

.answer {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px 6px;
  margin: 0 0 28px;
}
.answer h2 {
  font: 700 13px/1.2 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 10px;
}
.answer p, .answer li { font-size: 1.0625rem; }
.answer p { margin: 0 0 14px; }
.answer ul, .answer ol { margin: 0 0 14px; padding-left: 1.2em; }

/* ----------------------------------------------------------------- toc */

.toc {
  font: 400 15px/1.4 var(--font-ui);
  margin: 0 0 32px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.toc-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 10px;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { padding: 5px 0; }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- prose */

.prose { min-width: 0; }

.prose > p, .prose li { text-wrap: pretty; hanging-punctuation: first; }
.prose p { margin: 0 0 1.05em; }

.prose h2 {
  font: 400 clamp(1.5rem, 1.25rem + 1vw, 2rem) / 1.12 var(--font-display);
  letter-spacing: -0.015em;
  margin: 2.2em 0 0.6em;
  text-wrap: balance;
}
.prose h3 {
  font: 700 1.1875rem/1.3 var(--font-ui);
  letter-spacing: -0.01em;
  margin: 1.9em 0 0.45em;
  text-wrap: balance;
}
.prose h4 {
  font: 700 1rem/1.3 var(--font-ui);
  margin: 1.6em 0 0.4em;
}

.prose a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 160ms ease;
}
.prose a:hover { text-decoration-color: currentColor; }

.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.prose li { margin: 0 0 0.4em; }
.prose li::marker { color: var(--text-3); }
.prose ol li::marker { font: 400 0.85em var(--font-mono); }

.prose strong { font-weight: 700; }

.prose blockquote {
  margin: 1.4em 0;
  padding: 0 0 0 1.1em;
  border-left: 1px solid var(--rule-strong);
  color: var(--text-2);
  font-style: italic;
}

code {
  font: 400 0.86em/1 var(--font-mono);
  background: var(--surface-2);
  padding: 0.12em 0.36em;
  border-radius: 5px;
}

/* Citations: the rulebook appears as a small mono source, never in a headline. */
.src {
  font: 400 0.72em/1 var(--font-mono);
  letter-spacing: 0.01em;
  color: var(--text-3);
  white-space: nowrap;
  vertical-align: 0.08em;
  margin-left: 0.25em;
}
.prose a.src { text-decoration-color: color-mix(in srgb, var(--text-3) 40%, transparent); }

/* --------------------------------------------------------------- tables
   Set like a judge's sheet: a heavy top rule, hairlines between rows, mono
   numerals. The SkillScan column carries a faint ground so it can be found,
   nothing louder. */

figure.table { margin: 1.6em 0 1.9em; }

.table-caption {
  font: 600 14px/1.4 var(--font-ui);
  color: var(--text-2);
  margin: 0 0 10px;
}

/* Edge shadows appear only where there is more table to scroll to: the
   ground-coloured covers scroll with the content, the shadows stay put. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
  background:
    linear-gradient(to right, var(--ground) 40%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--ground) 40%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(14, 14, 16, 0.16), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(14, 14, 16, 0.16), transparent) right / 12px 100% no-repeat scroll;
}
.table-wrap:focus-visible { outline-offset: 4px; }

table {
  width: 100%;
  border-collapse: collapse;
  font: 400 15px/1.4 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.table-wide table { min-width: 600px; }
@media (max-width: 520px) {
  table { font-size: 14px; }
  tbody th, tbody td { padding: 10px 8px; }
  thead th { padding: 10px 8px 9px; }
}
thead th {
  font: 700 12px/1.3 var(--font-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  vertical-align: bottom;
  padding: 10px 12px 9px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule-strong);
}
tbody th, tbody td {
  text-align: left;
  vertical-align: top;
  padding: 11px 12px;
  border-bottom: 1px solid var(--rule);
}
tbody th { font-weight: 600; color: var(--text); }
tbody td { color: var(--text-2); }
th:first-child { padding-left: 0; }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-size: 14px; }
.is-us, .is-us-row > * { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); }
thead th.is-us { color: var(--text); }
.is-us-row > th:first-child { padding-left: 10px; }

.mark { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.mark-yes { color: var(--ink); }
.mark-no { color: var(--text-3); }
.mark-part { color: var(--leak); }

/* ------------------------------------------------------------- figures */

.shot { margin: 1.8em 0; }
.shot img { display: block; border-radius: 18px; border: 1px solid var(--rule); }
.shot figcaption, .holdbar figcaption {
  font: 400 14px/1.5 var(--font-ui);
  color: var(--text-3);
  margin-top: 10px;
}

/* The signature: held against clean. Ink for the clean seconds, amber for
   the seconds that were held but did not count. */
.holdbar {
  margin: 1.9em 0;
  padding: 20px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.holdbar-readout {
  display: flex;
  gap: 28px;
  margin-bottom: 14px;
}
.hb-num {
  margin: 0;
  font: 700 clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem) / 1 var(--font-mono);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--leak);
}
.hb-num-clean { color: var(--ink); }
.hb-unit { font-size: 0.55em; margin-left: 2px; letter-spacing: 0; }
.hb-label {
  display: block;
  font: 500 13px/1.2 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 6px;
}
.holdbar-track {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--surface-2);
  overflow: hidden;
}
.hb-bar {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  border-radius: 7px;
}
.hb-bar-held { background: var(--leak); }
.hb-bar-clean { background: var(--ink); }
.holdbar-scale {
  display: flex;
  justify-content: space-between;
  font: 400 11px/1 var(--font-mono);
  color: var(--text-3);
  margin-top: 8px;
}

/* ---------------------------------------------------------------- notes */

.note {
  margin: 1.6em 0;
  padding: 16px 18px 2px;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 0.97em;
}
.note p { margin: 0 0 14px; }

/* ------------------------------------------------------------------ cta */

.cta {
  margin: 2.6em 0 2.2em;
  padding: 26px 24px 22px;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 20px;
}
.cta .cta-title {
  font: 400 clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem) / 1.12 var(--font-display);
  letter-spacing: -0.012em;
  margin: 0 0 10px;
}
.cta p { margin: 0 0 16px; color: color-mix(in srgb, var(--on-ink) 82%, transparent); }
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0;
}
.cta-small {
  font: 400 13px/1.3 var(--font-ui);
  color: color-mix(in srgb, currentColor 70%, transparent);
}
.cta .cta-row { margin-bottom: 4px; }

/* --------------------------------------------------------------- author */

.author {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 3em 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--rule);
}
.author img { border-radius: 13px; flex: none; border: 1px solid var(--rule); }
.author-name { font: 700 16px/1.3 var(--font-ui); margin: 0 0 4px; }
.author-bio { font: 400 15px/1.55 var(--font-ui); color: var(--text-2); margin: 0; }

/* -------------------------------------------------------------- related */

.related {
  max-width: 1000px;
  margin: 56px auto 0;
  padding: 28px 0 0;
  border-top: 2px solid var(--ink);
}
.related h2 {
  font: 400 1.4rem/1.15 var(--font-display);
  margin: 0 0 14px;
}
.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 32px;
}
@media (min-width: 760px) { .related ul { grid-template-columns: repeat(3, 1fr); } }
.related li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.related a {
  display: block;
  font: 600 16px/1.35 var(--font-ui);
  text-decoration: none;
  margin-bottom: 6px;
}
.related a:hover { text-decoration: underline; text-underline-offset: 3px; }

.meta-line {
  display: block;
  font: 400 13px/1.4 var(--font-ui);
  color: var(--text-3);
}

/* ------------------------------------------------------- index and home */

.index, .home { max-width: 1000px; margin: 0 auto; }
.index-header, .home-header { margin-left: 0; }
.index .author { max-width: var(--measure); }

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
  max-width: 780px;
}
.post-item {
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--rule);
}
.post-item h2 {
  font: 400 clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem) / 1.15 var(--font-display);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.post-item h2 a { text-decoration: none; }
.post-item h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post-item p { margin: 0 0 8px; color: var(--text-2); max-width: 62ch; }

.home .prose { max-width: var(--measure); }
.home-header .cta-row { margin-top: 8px; }
.home-header .cta-small { color: var(--text-3); }
.home-posts { margin-top: 56px; }
.home-posts > h2 { font: 400 1.6rem/1.1 var(--font-display); margin: 0 0 16px; }

/* --------------------------------------------------------------- footer */

.footer {
  margin-top: 88px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  padding: 36px var(--gutter) calc(40px + env(safe-area-inset-bottom));
}
.footer-inner { max-width: 1000px; margin: 0 auto; }
.footer-line { font: 400 15px/1.5 var(--font-ui); color: var(--text-2); max-width: 52ch; margin: 12px 0 18px; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font: 500 14px/1 var(--font-ui);
  margin-bottom: 20px;
}
.footer-nav a { color: var(--text-2); text-decoration: none; padding: 6px 0; }
.footer-nav a:hover { color: var(--text); }
.footer-small { font: 400 12px/1.5 var(--font-ui); color: var(--text-3); margin: 0; }

/* -------------------------------------------------------- accessibility */

@media (prefers-reduced-transparency: reduce) {
  .masthead { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --text-2: var(--text); --text-3: var(--text); --rule: var(--rule-strong); }
  .masthead { background: var(--ground); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: background-color 160ms ease; }
  .button:active { transform: none; }
}

@media print {
  .masthead, .footer, .toc, .cta, .related, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}