/* The pages beside the viewer.
 *
 * Same ground, same ink, same accent as diagrams/how-it-works.svg and
 * viewer/model.js's default finish, because they are the same object seen
 * three ways and a reader should not have to be told that.
 *
 * --blood is NOT --accent. Green is the finish; red means a drop of blood was
 * spent. viewer/model.js makes the same split for the same reason.
 */
:root {
  --bg:      #0c0c0b;
  --panel:   #101010;
  --edge:    #2a2926;
  /* Three steps of grey, and every one of them clears WCAG AA (4.5:1) on
     every ground this sheet paints -- the page, a card, a blood card, a flow
     step and a code block. Upstream's --mut was #6f7178, which is 3.75:1 on
     a flow step: legible on a bright desk and not on a phone outdoors, and
     used for exactly the small print that most needs to be read. The hierarchy
     is kept by lifting --dim with it rather than by letting the bottom step
     fall out of contrast. tools/overlap.mjs measures this on every page at
     every width, so it cannot drift back. */
  --ink:     #d8d2c8;   /* 12.2:1 */
  --dim:     #a6a7ac;   /*  7.6:1 */
  --mut:     #83858d;   /*  5.0:1 */
  --accent:  #2f9c4d;
  --accent-2:#3fb260;
  --blood:   #b23a48;
  --blood-2: #c9707a;
  --blood-bg:#141010;
  --blood-edge:#4a1219;
  --mono: ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 14px/1.65 var(--sans);
}
.wrap { max-width: 960px; margin: 0 auto; padding: 48px 24px 96px; }

/* ---- masthead ---------------------------------------------------------- */
.mast { margin-bottom: 40px; }
.mast h1 {
  margin: 0; font-size: 26px; font-weight: 200; letter-spacing: 0.42em;
}
.mast h1 a { color: inherit; text-decoration: none; }
.rule { width: 30px; height: 2px; background: var(--accent); margin: 10px 0 18px; }
.mast p { margin: 0 0 4px; font-size: 13px; }
.mast .sub { color: var(--dim); font-style: italic; font-size: 12px; }
.mast .chain { color: var(--mut); font-size: 12px; }
.mast .chain b { color: var(--accent); font-weight: 400; }

/* ---- navigation -------------------------------------------------------- */
.nav {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 22px; font-size: 12px;
}
.nav a {
  color: var(--mut); text-decoration: none;
  padding: 4px 0; min-height: 24px; display: inline-flex; align-items: center;
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }

/* ---- sections ---------------------------------------------------------- */
h2 {
  margin: 44px 0 14px; font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.28em; color: var(--mut); text-transform: uppercase;
}
h3 { margin: 0 0 10px; font-size: 13px; font-weight: 500; }
p { margin: 0 0 12px; color: var(--dim); }
p strong, li strong { color: var(--ink); font-weight: 500; }
a { color: var(--accent-2); }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
/* Three cards in a two-column grid leaves one stranded on its own row. */
.grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid.three { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--edge); border-radius: 5px;
  background: var(--panel); padding: 18px 20px;
}
.card p:last-child { margin-bottom: 0; }
.card.blood { background: var(--blood-bg); border-color: var(--blood-edge); }
.card.blood h3 { color: var(--blood-2); }
.card .note { color: var(--mut); font-size: 12px; }

/* ---- the flow strip ---------------------------------------------------- */
.flow {
  display: flex; align-items: stretch; gap: 10px;
  overflow-x: auto; padding-bottom: 6px;
}
.flow .step {
  flex: 1 0 132px; border: 1px solid var(--edge); border-radius: 4px;
  background: #151513; padding: 12px 14px;
}
.flow .step b { display: block; font-size: 12px; font-weight: 500; }
.flow .step span { display: block; color: var(--mut); font-size: 10.5px; }
.flow .step.gate {
  background: #101a13; border-color: var(--accent); border-width: 1.6px;
}
.flow .step.gate b { color: var(--accent-2); }
.flow .step.gate span { color: #5f8e6c; }
.flow .arrow {
  align-self: center; color: var(--dim); flex: 0 0 auto; font-size: 13px;
}
/* The glyph lives here, not in the markup, so that the direction can follow
   the layout instead of being hidden and redrawn. */
.flow .arrow::before { content: '\2192'; }      /* right */

/* Five steps and four arrows do not fit across a phone, and a strip that
   scrolls sideways hides the last two steps behind a gesture nobody is told
   about. Below 640px it becomes a column and the arrows turn to point down. */
@media (max-width: 640px) {
  .flow { flex-direction: column; overflow-x: visible; gap: 6px; }
  .flow .step { flex: none; }
  .flow .arrow { align-self: flex-start; margin-left: 22px; line-height: 1; }
  .flow .arrow::before { content: '\2193'; }      /* down, not right */
}

/* ---- key / value ------------------------------------------------------- */
dl.kv { margin: 0; display: grid; grid-template-columns: 200px 1fr; gap: 8px 20px; }
@media (max-width: 720px) { dl.kv { grid-template-columns: 1fr; gap: 2px 0; } }
dl.kv dt { color: var(--mut); font-size: 12px; }
dl.kv dd {
  margin: 0; font-family: var(--mono); font-size: 12px;
  overflow-wrap: anywhere;
}
dl.kv dd.ok { color: var(--accent-2); }
dl.kv dd.bad { color: var(--blood-2); }
dl.kv dd.wait { color: var(--mut); }

code, .mono { font-family: var(--mono); font-size: 12.5px; }
/* A terminal transcript keeps its columns, so it scrolls sideways rather than
   wrapping. On a phone that is invisible: the text is simply cut at the right
   edge and reads as broken rather than as scrollable. The two `local`
   gradients are the ground, and the two `scroll` ones are shadows that sit on
   top of it only while there is more to see in that direction -- so the block
   says "there is more this way" without a scrollbar and without a caption. */
pre {
  --pre-bg: #0a0a09;
  margin: 0 0 12px; padding: 14px 16px; overflow-x: auto;
  border: 1px solid var(--edge); border-radius: 4px;
  background:
    linear-gradient(90deg, var(--pre-bg) 40%, rgba(10,10,9,0)) left / 36px 100% no-repeat local,
    linear-gradient(90deg, rgba(10,10,9,0), var(--pre-bg) 60%) right / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.65), rgba(0,0,0,0)) left / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.65), rgba(0,0,0,0)) right / 16px 100% no-repeat scroll,
    var(--pre-bg);
  font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--dim);
  overscroll-behavior-x: contain;
}
@media (max-width: 640px) {
  /* Eleven pixels of a monospaced face still clears AA and puts a dozen more
     columns on screen before anything has to be scrolled to. */
  pre { font-size: 11px; padding: 12px 14px; }
}
pre b { color: var(--ink); font-weight: 400; }

figure { margin: 0 0 12px; }
figure img { display: block; width: 100%; height: auto; border-radius: 5px; }
figcaption { margin-top: 8px; color: var(--mut); font-size: 11.5px; }

.banner {
  margin: 28px 0 0; padding: 12px 18px; border-radius: 5px;
  border: 1.6px solid var(--blood); background: #1a1013; font-size: 12.5px;
}
.banner.calm { border-color: var(--edge); background: var(--panel); color: var(--dim); }

footer {
  margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--edge);
  color: var(--mut); font-size: 11.5px;
}
footer a { color: var(--mut); }
footer a:hover { color: var(--ink); }