/* Up and Running — the site.
   The palette, typeface and radii are the app's, copied from src/global.css so
   the page and the window plainly belong to one thing. Two signal colours do
   real work and nothing else: amber means attention or active, green only ever
   means done. Nothing here uses green for decoration. */

@font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }

:root {
  --case: #17140f;
  --panel: #201c16;
  --panel-2: #262119;
  --rule: #35302a;
  --rule-strong: #4a4339;
  --paper: #f2ede3;
  --muted: #9a9186;
  --faint: #6f675d;
  --amber: #f0a73c;
  --amber-hover: #ffc061;
  --amber-dim: rgba(240, 167, 60, 0.14);
  --go: #57c98a;

  --radius: 3px;
  --radius-sm: 2px;

  --reading-max: 68ch;
  --frame-max: 1160px;
  --pad: clamp(1.4rem, 5vw, 3rem);

  /* The app's row anatomy: [number][title]. The number column and the gap after
     it are how far the text sits in, and everything that must line up with the
     numerals reads from these. */
  --num-col: 2.2rem;
  --num-gap: 0.85rem;
  --indent: calc(var(--num-col) + var(--num-gap));

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Barlow, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--paper);
  background: var(--case);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: "Barlow Condensed", Barlow, sans-serif;
  font-weight: 700;
  line-height: 1.02;
  margin: 0;
  letter-spacing: 0.005em;
}

p { margin: 0; }

a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--amber-hover); }

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

.shell { max-width: var(--frame-max); margin: 0 auto; padding-inline: var(--pad); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--amber); color: var(--case);
  padding: 0.6rem 1rem; font-weight: 600; z-index: 10;
}
.skip:focus { left: 0; }

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: 5;
  background: rgba(23, 20, 15, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead .shell {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 3.5rem;
}
.wordmark {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; font-size: 1.3rem;
  color: var(--paper); text-decoration: none;
  letter-spacing: 0.01em;
}
.wordmark img { width: 26px; height: 26px; border-radius: 5px; display: block; }
.masthead nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.masthead nav a {
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.97rem;
}
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--paper); }

/* ── Hero ─────────────────────────────────────────────────────────────── */

/* The headline runs the full measure, then the copy and the sheet share the
   row beneath it. Stacked, the page was a narrow strip of text down the left
   with the whole right half empty, and the sheet sat below the fold. */
.hero-lower {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: 2.4rem;
  align-items: start;
}
@media (min-width: 900px) {
  .hero-lower { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); gap: 3.2rem; }
}


/* The sheet below has to break the fold on a 1280x720 laptop, or the ticks play
   where nobody is looking. That budget is what caps the headline and the gaps
   here — at 6.2rem against a 14ch measure the headline alone ran four lines and
   put the sheet 850px down the page. */
.hero { padding-block: clamp(2.2rem, 5vw, 3.4rem) 0; }

.hero h1 {
  font-size: clamp(2.7rem, 7vw, 4.9rem);
  max-width: 24ch;
  text-wrap: balance;
}
.hero .subhead {
  margin-top: 0.7rem;
  font-family: "Barlow Condensed", Barlow, sans-serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  color: var(--amber);
}
.hero .lede {
  max-width: 46ch;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--muted);
}
.hero .lede strong { color: var(--paper); font-weight: 600; }

/* ── Download ─────────────────────────────────────────────────────────── */

.get { margin-top: 1.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem; }

.btn {
  display: inline-block;
  background: var(--amber); color: #17140f;
  font-weight: 600; font-size: 1.05rem;
  padding: 0.72rem 1.5rem;
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 120ms ease;
}
.btn:hover { background: var(--amber-hover); border-color: var(--amber-hover); color: #17140f; }
.btn[aria-disabled="true"] { background: var(--panel-2); border-color: var(--rule-strong); color: var(--muted); cursor: default; }

.btn-quiet {
  display: inline-block;
  background: none; color: var(--paper);
  font-weight: 500; font-size: 1rem;
  padding: 0.72rem 1.2rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  text-decoration: none;
}
.btn-quiet:hover { border-color: var(--muted); color: var(--paper); background: var(--panel); }

.get-meta {
  margin-top: 0.9rem;
  font-size: 0.92rem; color: var(--faint);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem;
}

/* ── The run sheet in the hero ────────────────────────────────────────── */

.sheet {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.sheet-bar {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--panel-2);
}
.sheet-bar h2 {
  font-size: 1.15rem; font-weight: 600; letter-spacing: 0.02em;
}
.sheet-bar .count { margin-left: auto; font-size: 0.9rem; color: var(--faint); font-variant-numeric: tabular-nums; }

/* A dash per step, the way the app's own strip does it — one segment each while
   they can still be told apart, a continuous bar only past forty steps, which
   nothing here reaches. Named .seg rather than .tick: the check glyph inside a
   numeral already owns that class. */
.strip { display: flex; align-items: center; gap: 2px; }
.seg {
  flex: 1; min-width: 2px; height: 5px;
  background: var(--rule);
  transition: background 320ms ease;
}
.seg.done { background: var(--go); }

.sheet ol { list-style: none; margin: 0; padding: 0.4rem 0; }
.sheet li {
  display: grid;
  /* The detail panel opens on a second row spanning both columns, so it lines
     up under the title rather than under the numeral. */
  grid-template-columns: var(--num-col) 1fr;
  gap: 0 var(--num-gap);
  align-items: baseline;
  padding: 0.5rem 1.1rem;
}
.sheet li + li { border-top: 1px solid rgba(53, 48, 42, 0.5); }

.sheet .n {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; font-size: 1.2rem;
  text-align: right; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.sheet .t { color: var(--paper); }
.sheet .note { display: block; font-size: 0.93rem; color: var(--muted); margin-top: 0.1rem; }

/* The numeral is the tick target — the app's own gesture, so it wants a real
   button under it without looking like one until you reach for it. */
/* `.sheet button.n`, not `button.n` — `.sheet .n` above is two classes and wins
   against one class plus an element, which left text-align: right in force and
   the glyph pinned to the right edge of its own box. */
.sheet button.n {
  /* The box hugs the glyph and sits at the end of the number column, so the
     numerals still line up with each other while the target looks like a
     target — stretched across the column, the digit ended up stranded. */
  justify-self: end;
  width: 1.7rem; padding: 0; margin: 0;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  line-height: inherit; font: inherit;
  /* Stated, not inherited: this rule outranks `.sheet .n`, so `color: inherit`
     here pulled the numerals up to paper and had them shouting over the titles. */
  color: var(--faint);
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.2rem;
  text-align: center; font-variant-numeric: tabular-nums;
}
.sheet li.done button.n { color: var(--go); }
.sheet li.here button.n { color: var(--amber); }
.sheet button.n:hover { border-color: var(--rule-strong); color: var(--paper); }
.sheet li.done button.n:hover { color: var(--go); }

/* A step that carries something opens; the whole title row is the control. */
button.t {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; text-align: left;
}
button.t .tt { grid-column: 1; }
button.t .note { grid-column: 1; }
button.t:hover .tt { color: var(--amber); }

.chev {
  grid-column: 2; grid-row: 1;
  width: 0.5rem; height: 0.5rem; align-self: center;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 140ms ease;
}
button.t:hover .chev { border-color: var(--amber); }
button.t[aria-expanded="true"] .chev { transform: rotate(225deg) translate(-1px, -1px); }

.detail {
  grid-column: 1 / -1;
  margin: 0.7rem 0 0.4rem;
  padding: 0.9rem 1rem;
  background: var(--case);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.detail p { color: var(--muted); font-size: 0.97rem; max-width: 62ch; }
.detail p + p, .detail figure + figure { margin-top: 0.8rem; }
.detail strong { color: var(--paper); }
.detail figure { margin: 0.9rem 0 0; }
.detail img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.detail figcaption { margin-top: 0.4rem; font-size: 0.88rem; color: var(--faint); }

.sheet-hint {
  padding: 0.7rem 1.1rem 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem; color: var(--faint);
}

.sheet li.done .n { color: var(--go); }
/* Struck and stood down, the way the app does it: the text drops to --faint and
   the line through it is drawn in green. A grey strike on grey text just reads
   as broken. */
.sheet li.done .t,
.sheet li.done .t .tt { color: var(--faint); }
/* Shrink the title to its text before striking it — as a stretched grid item it
   filled the whole column and the line ran on past the words. */
.sheet .tt, .sheet span.t { justify-self: start; }
.sheet li.done .tt, .sheet li.done span.t { position: relative; }
.sheet li.done .tt::after,
.sheet li.done span.t::after {
  content: ""; position: absolute;
  left: -0.1em; right: -0.1em; top: 0.62em;
  height: 1px; background: var(--go); opacity: 0.85;
}
.sheet li.done .note { color: var(--faint); }
.sheet li.here { background: var(--amber-dim); box-shadow: inset 2px 0 0 var(--amber); }
.sheet li.here .n { color: var(--amber); }

/* The tick replaces the numeral once a step is done — the app's own move. */
.sheet .n .tick { display: none; }
.sheet li.done .n .num { display: none; }
.sheet li.done .n .tick { display: inline; }

/* ── Sections ─────────────────────────────────────────────────────────── */

.band { padding-block: clamp(3.5rem, 8vw, 5.5rem); border-top: 1px solid var(--rule); }

.rail { display: grid; gap: 1.6rem 3.5rem; }
@media (min-width: 900px) {
  .rail { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}
.rail-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  text-wrap: balance;
}
.rail-head p {
  margin-top: 0.8rem; color: var(--muted); font-size: 1.02rem;
}
.rail-body > :first-child { margin-top: 0; }

/* Parts of a project: the app's sidebar, as a ruled list rather than cards. */
.parts { display: grid; gap: 0; }
@media (min-width: 620px) { .parts { grid-template-columns: 1fr 1fr; column-gap: 2.6rem; } }
.part { padding: 1.2rem 0; border-top: 1px solid var(--rule); }
.part h3 { font-size: 1.3rem; color: var(--amber); font-weight: 600; }
.part p { margin-top: 0.35rem; color: var(--muted); font-size: 0.99rem; }

/* Hand-off: what you do, what they get. */
.handoff { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 720px) { .handoff { grid-template-columns: 1fr 1fr; } }
.handoff > div { background: var(--panel); padding: 1.5rem 1.4rem; }
.handoff h3 { font-size: 1.25rem; font-weight: 600; }
.handoff p { margin-top: 0.6rem; color: var(--muted); }
.handoff .do { color: var(--paper); font-weight: 500; }

/* The editor demo: what you type, and what the crew ends up reading. */
.editor {
  margin-top: 2.6rem;
  display: grid; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 820px) { .editor { grid-template-columns: 1fr 1fr; } }
.editor .pane { background: var(--panel); display: flex; flex-direction: column; min-width: 0; }
.editor .pane-bar {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--panel-2);
  font-size: 0.9rem; font-weight: 600; color: var(--muted);
}
.editor textarea {
  flex: 1; min-height: 20rem;
  background: var(--case); color: var(--paper);
  border: 0; border-radius: 0; resize: vertical;
  padding: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92rem; line-height: 1.6;
}
.editor textarea:focus-visible { outline-offset: -2px; }

.preview { padding: 1rem; min-height: 20rem; overflow-x: auto; }
.preview > :first-child { margin-top: 0; }
.preview p, .preview ul, .preview ol, .preview pre { margin: 0 0 0.85rem; }
.preview h3, .preview h4, .preview h5 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  margin: 1.3rem 0 0.5rem; font-size: 1.25rem;
}
.preview ul, .preview ol { padding-left: 1.3rem; }
.preview li { margin-bottom: 0.3rem; }
.preview li::marker { color: var(--faint); }
.preview strong { color: var(--paper); font-weight: 600; }
.preview img { display: block; max-width: 100%; height: auto; margin: 0.9rem 0; border-radius: var(--radius-sm); }
.preview code {
  font-size: 0.9em; background: var(--case);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: 0.08rem 0.3rem;
}
.preview pre {
  background: var(--case); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 0.8rem 0.9rem; overflow-x: auto;
}
.preview pre code { background: none; border: 0; padding: 0; }
.preview blockquote {
  margin: 0 0 0.85rem; padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 2px solid var(--amber); color: var(--muted);
}
.preview blockquote p:last-child { margin-bottom: 0; }
.preview hr { border: 0; border-top: 1px solid var(--rule); margin: 1.2rem 0; }
/* A picture the page cannot fetch — an absolute URL typed into the demo. */
.preview .missing {
  display: inline-block; padding: 0.1rem 0.45rem;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius-sm);
  color: var(--faint); font-size: 0.9rem;
}

/* Tutorial index, shared by the hub and the strip on the landing page. */
.toc { border-top: 1px solid var(--rule); }
.toc a {
  display: grid;
  grid-template-columns: var(--num-col) 1fr auto;
  gap: var(--num-gap);
  align-items: baseline;
  padding: 1rem 0.2rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--paper);
}
.toc a:hover { background: var(--panel); }
.toc .n {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.2rem;
  text-align: right; color: var(--faint); font-variant-numeric: tabular-nums;
}
.toc a:hover .n { color: var(--amber); }
.toc .title { font-weight: 500; }
.toc .blurb { display: block; color: var(--muted); font-size: 0.95rem; font-weight: 400; margin-top: 0.1rem; }
.toc .len { color: var(--faint); font-size: 0.9rem; }
.toc a[aria-disabled="true"] { pointer-events: none; }
.toc a[aria-disabled="true"] .title { color: var(--muted); }

/* ── Download band ────────────────────────────────────────────────────── */

.also { margin-top: 2.2rem; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.also h3 { font-family: Barlow, sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; }
.also ul { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.also li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; color: var(--muted); font-size: 0.97rem; }
.also .tag {
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  padding: 0.05rem 0.4rem; font-size: 0.8rem; color: var(--faint);
}

.notice {
  margin-top: 2rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--rule-strong); border-left: 2px solid var(--amber);
  border-radius: var(--radius);
  background: var(--panel);
  max-width: var(--reading-max);
}
.notice h3 { font-family: Barlow, sans-serif; font-size: 1rem; font-weight: 600; }
.notice p { margin-top: 0.5rem; color: var(--muted); font-size: 0.97rem; }
.notice code {
  font-size: 0.9em; background: var(--case); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 0.1rem 0.35rem;
}

/* ── Prose, for tutorial pages ────────────────────────────────────────── */

.prose { max-width: var(--reading-max); }
.prose h2 { font-size: 1.9rem; margin-top: 2.6rem; }
.prose h3 { font-size: 1.3rem; font-weight: 600; margin-top: 1.9rem; }
.prose p, .prose ul, .prose ol { margin-top: 1rem; color: var(--paper); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-top: 0.4rem; }
.prose li::marker { color: var(--faint); }
.prose strong { font-weight: 600; }
.prose code {
  font-size: 0.9em; background: var(--case); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 0.1rem 0.35rem;
}

/* ── Release notes ────────────────────────────────────────────────────── */

.release + .release { margin-top: 3.2rem; padding-top: 2.6rem; border-top: 1px solid var(--rule); }
.release > h2 { margin-top: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; }
.release > h2 time { font-family: Barlow, sans-serif; font-size: 1rem; font-weight: 400; color: var(--faint); }
.release-get { list-style: none; padding: 0 !important; display: grid; gap: 0.45rem; }
.release-get li { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.release-get a { color: var(--amber); }
.release-get span { color: var(--faint); font-size: 0.9rem; }

/* ── Footer ───────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--rule);
  margin-top: clamp(3.5rem, 8vw, 5.5rem);
  padding-block: 2.2rem 3rem;
  color: var(--faint); font-size: 0.93rem;
}
footer .shell { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; align-items: baseline; }
footer nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1.4rem; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}