/* ─────────────────────────────────────────────────────────────────────────
   DARKROOM — the prompt ledger's own furniture. Loaded after cc.css.

   Both pages, index and capture, for the reason blog.css holds both of its:
   thirty rules between them, and a second file is a second cache entry for
   nothing.

   Every colour is one of cc.css's ink rungs, its rules or its signal. Nothing
   here names a hex, which is what keeps light and dark working: the tokens
   flip on `html[data-theme]` and this sheet never sees them.

   The kicker, the h1 and the deck repeat the blog's for the same reason the
   blog repeats the archive's: a page head that is nearly the same reads as a
   different site.
   ───────────────────────────────────────────────────────────────────────── */

/* padding-top, not the `padding` shorthand: this element also carries `.shell`,
   whose `padding:0 var(--pad)` is what gives every other page its side gutter.
   The shorthand loaded after it and zeroed both sides, so the ledger shipped
   with prompt text running edge to edge at 1265px. */
.prompts{padding-top:62px}

/* The release page's `.crumb`/`.step` pair, restated here rather than reused:
   those rules live in cc-detail.css, which this page does not load, and a page
   whose breadcrumb links butt together with no gap is what shipped without it. */
.bcrumb{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:28px}
.bcrumb a{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--rule); padding:9px 13px; line-height:1; transition:.18s;
}
.bcrumb a:hover{color:var(--sig); border-color:var(--sig-dim)}

.prompts .kick{display:flex; align-items:center; gap:14px; margin-bottom:24px}
.prompts .kick .lbl{color:var(--sig); white-space:nowrap}
.prompts .kick .ln{flex:1; height:1px; background:var(--rule-2); max-width:180px}

.prompts h1{
  font-family:"Instrument Serif",serif; font-weight:400;
  font-size:clamp(32px,5vw,58px); line-height:1.04; letter-spacing:-.012em;
}
.prompts h1 em{font-style:italic; color:var(--sig)}
.prompts .deck{margin-top:20px; max-width:64ch; font-size:17.5px; line-height:1.6; color:var(--ink-2); font-weight:300}
.prompts .sub{margin-top:10px; max-width:72ch; color:var(--ink-2); font-weight:300; line-height:1.55}

/* ── the ledger ─────────────────────────────────────────────────────── */
/* Hairline rows, like the archive. A no-change row is dimmed rather than
   dropped: it is the row that makes the changed ones mean anything. */
/* Said once, above the ledger, instead of on all 112 rows. */
.pr-corpus{
  margin-top:22px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}

.pr-rows{margin-top:24px; border-top:1px solid var(--rule)}

.pr-row{
  display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:4px 24px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--rule);
  transition:background .18s;
}
.pr-row:hover{background:var(--sig-ghost)}
.pr-row .vv{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; color:var(--ink-3)}
.pr-row.is-changed .vv{color:var(--sig)}
.pr-row .ww{color:var(--ink-2); font-weight:300; line-height:1.5}
.pr-row .dd{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}

.pr-empty{margin-top:38px; padding:44px 0; border-top:1px solid var(--rule); color:var(--ink-2); font-weight:300}

/* A run of releases where nothing moved, folded into one row. The fold reads
   as a row of the same ledger rather than as a widget: same grid, same rules,
   one rung dimmer, and the releases themselves are still in the document,
   still in order, one click down. */
.pr-run{display:block; border-bottom:1px solid var(--rule)}
.pr-run > summary{
  display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:4px 24px; align-items:baseline;
  padding:11px 0; cursor:pointer; list-style:none;
  transition:background .18s;
}
.pr-run > summary::-webkit-details-marker{display:none}
.pr-run > summary:hover{background:var(--sig-ghost)}
.pr-run > summary .vv{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; color:var(--ink-3);
}
/* The range is two lines on purpose: the version column is 110px because every
   other row in the ledger is one version wide, and a range that wraps wherever
   it happens to run out reads like a mistake. */
.pr-run > summary .vv b{display:block; margin-top:3px; font-weight:400; color:var(--ink-3); opacity:.7}
.pr-run > summary .ww{color:var(--ink-3); font-weight:300; line-height:1.5}
.pr-run > summary .dd{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
/* The affordance: a caret in the version column's own gutter, turned down when
   the run is open. */
.pr-run > summary .vv::before{
  content:"›"; display:inline-block; width:14px; margin-left:-14px;
  color:var(--ink-3); transition:transform .18s;
}
.pr-run[open] > summary .vv::before{transform:rotate(90deg)}
.pr-run[open] > summary{background:var(--sig-ghost)}

/* The folded releases sit inside the run's own rule, so an open fold reads as
   a block rather than as more of the ledger. */
.pr-nest{margin-left:14px; padding-left:16px; border-left:1px solid var(--rule)}
.pr-nest .pr-row{padding:9px 0}
.pr-nest .pr-row:last-child{border-bottom:0}

/* On a phone the sentence takes a line of its own rather than being squeezed
   into a hundred pixels between the version and the date, which is where "no
   change to the injected prompts" wraps five times. */
@media(max-width:720px){
  .pr-row,.pr-run > summary{grid-template-columns:minmax(0,1fr) auto; gap:3px 18px}
  .pr-row .ww,.pr-run > summary .ww{grid-column:1 / -1}
}

/* On the narrowest phones the date is `white-space:nowrap` and "last change
   16 Aug 2026 21:04 UTC" is wider than the column left over beside a source
   name, so it pushed the document sideways: 10px of horizontal scroll on
   /docs at 320px, measured 2026-08-16. It takes a line of its own instead. */
@media(max-width:420px){
  .pr-row,.pr-run > summary{grid-template-columns:minmax(0,1fr)}
  .pr-row .dd,.pr-run > summary .dd{grid-column:1 / -1; text-align:left; white-space:normal}
}

/* ── one capture ────────────────────────────────────────────────────── */
.pr-meta{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.pr-meta a{color:var(--sig)}

.pfam{margin-top:44px; padding-top:24px; border-top:1px solid var(--rule)}
.pfam h2, .ptools h2, .prig h2{font-family:"Instrument Serif",serif; font-weight:400; font-size:28px; line-height:1.2}
.pfam h2 .hash{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; color:var(--ink-3); margin-left:10px}

.pmodels{
  margin-top:8px; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11.5px; line-height:1.7; color:var(--ink-3); word-break:break-word;
}

/* The copies of one prompt that moved the same way. Prose rather than the
   monospace of .pmodels, because it is this site talking about the corpus and
   not a fragment of the corpus. */
.pvariants{margin-top:8px; max-width:72ch; font-size:13px; line-height:1.6; color:var(--ink-2)}

/* Prompt text is bytes from someone else's product, so it is shown as it was
   sent: no wrapping decisions, no markdown, no highlighting.

   No max-height and no overflow. A scroll box inside a scrolling page is the
   worst reading surface there is, and 58 of them on one page (the tallest
   holding 6,532px of text in a 357px window) is what the ledger shipped with.
   Text is as tall as it is; the release page shows hunks, which are short by
   construction, and a whole document gets a page to itself. */
.ptext, .pdiff{
  margin-top:14px;
  border:1px solid var(--rule-2);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word;
}

/* A measure, not the window. 92ch of monospace is about as wide as prose stays
   readable, and the shell is 1265px. */
.ptext{max-width:92ch; padding:16px; background:var(--sig-ghost)}

/* ── one change ─────────────────────────────────────────────────────── */
.pchg{margin-top:44px; padding-top:24px; border-top:1px solid var(--rule)}
.pchg h2{font-family:"Instrument Serif",serif; font-weight:400; font-size:28px; line-height:1.2}
.pchg h2 .cnt{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.1em;
  color:var(--ink-3); margin-left:10px;
}
.pchg h2 .cnt b{font-weight:500}
.pchg h2 .cnt .cadd{color:var(--add)}
.pchg h2 .cnt .cdel{color:var(--del)}

.phunk{margin-top:22px}
.phead{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
/* The rig label rides in the hunk head rather than beside the lines: the lines
   are byte-exact and must stay so, and a per-line badge would be four words of
   chrome on every one of them. */
.phead .prig{text-transform:none; letter-spacing:0; color:var(--ink-2); font-style:italic}

/* ── the diff itself ────────────────────────────────────────────────── */
/* Four signals per changed line, because one is never enough: the sign in the
   gutter, the bar down the edge, the tint behind it, and the word marks inside.
   The sign and the bar survive a monochrome print and a reader who cannot tell
   the two hues apart; the tint is what makes a change findable while scrolling,
   which is the thing that was actually missing. `.dl.add` used to set
   `var(--ink-1)`, a token that has never existed, so an added line was styled
   exactly like the context around it.
   The negative indent hangs the sign in the gutter, so a line that wraps lines
   its continuation up under its own text instead of under the sign. */
/* No padding on the block: a changed row's tint has to run edge to edge or it
   reads as a highlighted phrase rather than a changed line. */
.pdiff{background:var(--bg-2); padding:0}
.pdiff .dl{
  display:block; padding:2px 14px 2px calc(11px + 1ch);
  border-left:3px solid transparent; text-indent:-1ch;
}
.pdiff .dl.add{background:var(--add-ghost); border-left-color:var(--add); color:var(--ink)}
.pdiff .dl.del{background:var(--del-ghost); border-left-color:var(--del); color:var(--ink-2)}

/* Selectable on purpose: people copy a hunk out of here to paste into a diff,
   and a `+` that will not come with it makes the paste worthless. */
.pdiff .dsg{font-weight:500; color:var(--ink-4)}
.pdiff .dl.add .dsg{color:var(--add)}
.pdiff .dl.del .dsg{color:var(--del)}

/* The word marks are the point of the whole hunk: they say which characters of
   a 200 character line actually moved. */
.pdiff mark{background:var(--sig-ghost); color:var(--sig); padding:0 1px}
.pdiff .dl.add mark{background:var(--add-dim); color:var(--ink)}
.pdiff .dl.del mark{background:var(--del-dim); color:var(--ink); text-decoration:line-through}

.pnote{margin-top:28px; max-width:72ch; color:var(--ink-2); font-weight:300; line-height:1.6}

.pfulltext{margin-top:56px; padding-top:24px; border-top:1px solid var(--rule)}
.pfulltext h2{font-family:"Instrument Serif",serif; font-weight:400; font-size:28px; line-height:1.2}
.plinks{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:16px}
.plinks a{
  color:var(--sig); font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px; letter-spacing:.06em;
}

/* The second line of a ledger or tool row: the counts that make it scannable. */
.pr-row .nn{
  display:block; margin-top:6px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
/* The quoted changed line, under the summary it belongs to. It is secondary to
   that sentence and it is prompt text of unbounded length, so it stays on one
   line and gets clipped rather than reflowing the row it sits in. */
.pr-row .xx, .pr-excerpt{
  display:block; margin-top:6px; max-width:80ch;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; line-height:1.5;
  color:var(--ink-3);
}
.pr-excerpt{margin-top:14px}

/* The tool name is this row's subject, so it takes the brightest rung rather
   than the ledger's dimmed version number. `--ink-1` is not a token and never
   was, so this said nothing at all and every tool name rendered at `--ink-3`. */
.ptrow .vv{color:var(--ink)}

.pvar, .pfull, .ptool{margin-top:16px; border-top:1px solid var(--rule)}
.pvar > summary, .pfull > summary, .ptool > summary{
  padding:12px 0; cursor:pointer;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.06em; color:var(--ink-2);
}
.pvar > summary:hover, .pfull > summary:hover, .ptool > summary:hover{color:var(--sig)}
.ptool > summary b{margin-left:10px; color:var(--ink-3); font-weight:400}

.ptools, .prig{margin-top:56px; padding-top:24px; border-top:1px solid var(--rule)}

.prig dl{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 20px; margin-top:20px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; line-height:1.6;
}
.prig dt{color:var(--ink-3); white-space:nowrap}
.prig dd{color:var(--ink-2); margin:0; word-break:break-word}

/* ── the injected ledger ────────────────────────────── */
/* One section per kind of surface. Same rows, same rules, sliced: a compaction
   instruction and a reminder scenario are different prompts, and one stream of
   versions mixing them says nothing about either. */
.pr-sect{margin-top:44px}
.pr-sect h2{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sig); font-weight:400;
}
.pr-sect .pr-corpus{margin-top:8px}

/* What the rig does not capture yet. Inside `.pr-empty`, so it inherits the
   dimmed weight: it is a statement about a gap, not a list of features. */
.pr-await{margin-top:14px; padding-left:18px; line-height:1.6}
.pr-await li{margin-top:6px}
.pr-empty p + .sub{margin-top:14px}