/* ─────────────────────────────────────────────────────────────────────────
   DARKROOM — one prompt document, read as a document.

   Loaded after prompts.css, which supplies the page head this shares with the
   ledger (.bcrumb, .kick, h1, .deck, .pr-meta). Nothing here names a hex; every
   colour is one of cc.css's ink rungs, its rules or its signal, so light and
   dark both work without this sheet knowing which is on.

   Two rules here are load bearing rather than taste:

   No element in this sheet scrolls. The ledger's `.ptext` capped itself at 60vh
   and scrolled, and a capture page ended up with 58 scrollers inside the page's
   own scroller, which is the worst interaction on offer: a wheel event lands on
   whichever box the pointer happens to be over. Text is as tall as it is.

   The text column is measured in ch rather than filling the window. The prompt's
   own lines are mostly under 100 characters, so 92ch costs nothing and stops a
   1400px window rendering 200 character lines.
   ───────────────────────────────────────────────────────────────────────── */

.pdocpage{padding-bottom:80px}

/* ── the two switchers ──────────────────────────────────────────────── */
.pswitch{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:28px}
.pswitch .pswlbl{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-right:6px;
}
.pswitch a, .pview a, .pcopy{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.06em;
  color:var(--ink-2); border:1px solid var(--rule); background:none; padding:9px 13px; line-height:1.3;
  cursor:pointer; transition:.18s;
}
.pswitch a:hover, .pview a:hover, .pcopy:hover{color:var(--sig); border-color:var(--sig-dim)}
.pswitch a.on, .pview a.on{color:var(--sig); border-color:var(--sig-dim); background:var(--sig-ghost)}
.pswitch a b{display:block; margin-top:4px; font-weight:400; font-size:10.5px; color:var(--ink-3)}

.pview{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}

/* ── the document and its rail ──────────────────────────────────────── */
.pdoc{display:grid; grid-template-columns:minmax(0,1fr); gap:28px; margin-top:30px; padding-top:26px; border-top:1px solid var(--rule)}

@media (min-width:1000px){
  .pdoc{grid-template-columns:210px minmax(0,1fr); gap:44px}
  /* Sticky only where there is room beside the text; on a narrow viewport the
     rail is a plain list at the top and scrolls away with everything else. */
  .poutline{position:sticky; top:96px; align-self:start}
}

.poutline b{
  display:block; font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:400;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px;
}
.poutline ol{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.poutline a{color:var(--ink-2); font-size:13.5px; line-height:1.35; font-weight:300}
.poutline a:hover{color:var(--sig)}
.poutline .h2{padding-left:12px}
.poutline .h3{padding-left:24px}
.poutline .h4, .poutline .h5, .poutline .h6{padding-left:34px}

.pbody{max-width:92ch}

.pnote{
  margin-bottom:20px; padding:12px 14px; border-left:2px solid var(--sig-dim); background:var(--sig-ghost);
  color:var(--ink-2); font-weight:300; line-height:1.55; font-size:14px;
}
.pnote a{color:var(--sig)}

/* ── the raw view ───────────────────────────────────────────────────── */
.plines{
  border:1px solid var(--rule-2);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px; line-height:1.65;
}

.pl{display:grid; grid-template-columns:46px minmax(0,1fr); border-left:2px solid transparent}
.pl .pn{
  padding:1px 10px 1px 0; text-align:right; color:var(--ink-3); opacity:.55;
  user-select:none; font-size:11px; line-height:1.85;
}
.pl .pn:hover{color:var(--sig); opacity:1}
.pl .pt{white-space:pre-wrap; word-break:break-word; padding:1px 12px 1px 0; color:var(--ink-2)}

/* The line someone linked to. `:target` does this without a line of script,
   which matters because the permalink is the feature. */
.pl:target{background:var(--sig-ghost); border-left-color:var(--sig)}

/* Three things happen to a line on this page and they used to look identical,
   all three of them signal orange. They are not the same fact:
     a substitution  some models get a different value for this line
     an insertion    some models get a line that is not in this text at all
     an absence      some models do not get this line
   The model axis is not a version diff, so a substitution stays on the signal
   colour rather than borrowing green: nothing was added, the line just depends
   on who asked. The other two are a real add and a real remove, and they take
   the diff pair so a reader who has scrolled a release diff already knows what
   the colour means. */
details.pl{display:block; border-left:2px solid var(--sig-dim); background:var(--sig-ghost)}
details.pl > summary{display:grid; grid-template-columns:46px minmax(0,1fr) auto; cursor:pointer; list-style:none}
details.pl > summary::-webkit-details-marker{display:none}
details.pl > summary:hover .pt{color:var(--sig)}
details.pl .pmark{
  padding:1px 10px; color:var(--sig); font-size:10.5px; line-height:1.85; user-select:none;
}

.pvs{padding:6px 12px 12px 46px; display:grid; gap:8px}
.pv{display:grid; gap:2px; padding:8px 10px; border:1px solid var(--rule-2); border-left-width:3px; background:var(--bg)}
.pv .pvm{font-size:10.5px; letter-spacing:.06em; color:var(--ink-3); word-break:break-word}

.pv.is-extra{border-left-color:var(--add); background:var(--add-ghost)}
.pv.is-extra .pvm{color:var(--add)}

/* The line is in the canonical text and not in theirs, so the sentence saying
   so is set as an absence rather than as a value. */
.pv.is-gone{border-left-color:var(--del); background:var(--del-ghost)}
.pv.is-gone .pvm{color:var(--del)}
.pv.is-gone .pt{color:var(--ink-3); font-style:italic}

.pl.is-extra{border-left-color:var(--add); background:var(--add-ghost)}
.pl.is-extra .pn{color:var(--add); opacity:1}
.pl.is-extra .pvm{padding:1px 12px; font-size:10.5px; color:var(--ink-3)}

/* ── the reading view ───────────────────────────────────────────────── */
.preading{color:var(--ink-2); font-weight:300; line-height:1.65}
.preading h1, .preading h2, .preading h3, .preading h4{
  font-family:"Instrument Serif",serif; font-weight:400; line-height:1.2; margin:34px 0 12px; color:var(--ink);
}
.preading h1{font-size:30px}
.preading h2{font-size:24px}
.preading h3{font-size:19px}
.preading h4{font-size:16px}
.preading p{margin:0 0 14px}
.preading ul, .preading ol{margin:0 0 16px; padding-left:22px}
.preading li{margin:0 0 6px}
.preading code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.9em; color:var(--sig)}
.preading pre{
  padding:14px; border:1px solid var(--rule-2); background:var(--sig-ghost);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; margin:0 0 16px;
}
.preading pre code{color:var(--ink-2)}
.preading blockquote{margin:0 0 16px; padding-left:14px; border-left:2px solid var(--rule-2); color:var(--ink-3)}