/* ─────────────────────────────────────────────────────────────────────────
   DARKROOM — the documentation ledger's own furniture.

   Loaded after prompts.css, never instead of it. The diff itself (`.pdiff`,
   `.phunk`, `.phead`, `.ptext` and the word marks inside them) is the prompt
   ledger's, rendered by the same builder, so copying those rules here would be
   two stylesheets to keep level for one appearance. This file is only the parts
   the docs pages have that the prompt pages do not: the corpus listing, the
   filter, and the per change block around a diff.

   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 filter ─────────────────────────────────────────────────────── */
.dfilter{display:flex; align-items:center; gap:12px; margin-top:34px}
.dfilter span{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.dfilter input{
  flex:1; max-width:420px; background:var(--bg-2); border:1px solid var(--rule); color:var(--ink);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; padding:9px 12px;
}
.dfilter input:focus{outline:none; border-color:var(--sig-dim)}

/* ── the corpus ─────────────────────────────────────────────────────── */
.dgroup{margin-top:40px}
.dgroup[hidden]{display:none}
.dgroup h2{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sig); display:flex; align-items:baseline; gap:10px;
}
.dgroup h2 .cnt{color:var(--ink-4); letter-spacing:.1em}

/* Upstream's own weekly digests, above the corpus rather than inside it. */
.ddigests{margin-top:28px; padding:18px 20px 22px; border:1px solid var(--sig-dim); background:var(--sig-ghost)}
.ddigests h2{color:var(--sig)}
.ddigests .dnote{margin-top:8px}

.dpages{list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--rule)}
.dpages li{padding:12px 0; border-bottom:1px solid var(--rule)}
.dpages li[hidden]{display:none}
.dpages a{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; color:var(--ink)}
.dpages a:hover{color:var(--sig)}

.dmeta{display:block; margin-top:4px; color:var(--ink-3); font-weight:300; font-size:14px; line-height:1.5}

/* ── recent activity, and one page's history ────────────────────────── */
.drecent, .dhistory{margin-top:56px}
.drecent h2, .dhistory h2{
  font-family:"Instrument Serif",serif; font-weight:400; font-size:26px; letter-spacing:-.01em;
}

/* ── the change ledger ──────────────────────────────────────────────────
   One line per change, the same treatment `.rr` gives one line per release in
   cc.css. The whole row is the anchor: a reader aiming at a link inside a row
   is a reader the row failed. */
.drel{margin-top:18px; border-top:1px solid var(--rule)}
.dr{
  display:grid; grid-template-columns:1fr 108px 96px 150px 96px; gap:22px; align-items:baseline;
  padding:11px 12px 11px 0; border-bottom:1px solid var(--rule); transition:background .18s;
}
.dr:hover{background:var(--bg-2)}
.dr .pp{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dr:hover .pp{color:var(--sig)}
.dr .ww,.dr .tt,.dr .ss{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; color:var(--ink-4); letter-spacing:.06em; white-space:nowrap}
.dr .ss{text-align:right}
.dr .nn{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; white-space:nowrap}
.dr .nn .ad,.dr .nn .dl,.ddr .nn .ad,.ddr .nn .dl,.deck .ad,.deck .dl{font-weight:500}
.dr .nn .ad,.ddr .nn .ad,.deck .ad{color:var(--add)}
.dr .nn .dl,.ddr .nn .dl,.deck .dl{color:var(--del)}
/* A minor change is dimmed rather than dropped. The whole point of a ledger is
   that it also records the edits nobody would have bothered to announce. */
.dr.is-minor .pp{color:var(--ink-2)}

/* ── the day ledger ─────────────────────────────────────────────────── */
.ddays{margin-top:56px}
.ddays h2{font-family:"Instrument Serif",serif; font-weight:400; font-size:26px; letter-spacing:-.01em}
.ddrel{margin-top:16px; border-top:1px solid var(--rule)}
.ddr{
  display:grid; grid-template-columns:150px 1fr 120px; gap:22px; align-items:baseline;
  padding:11px 12px 11px 0; border-bottom:1px solid var(--rule); transition:background .18s;
}
.ddr:hover{background:var(--bg-2)}
.ddr .dt{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; color:var(--ink)}
.ddr:hover .dt{color:var(--sig)}
.ddr .pg{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; color:var(--ink-4); letter-spacing:.06em}
.ddr .nn{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; text-align:right; white-space:nowrap}

/* ── a day, by corpus ────────────────────────────────────────────────────
   The per-source summary is the day ledger's row under another heading: same
   three facts, same widths, so the eye reads down one column across both. The
   sections below it are the same rows the ungrouped page had, under a kick
   apiece. */
.dsum{margin-top:22px}
/* A corpus name is a good deal longer than the date this row's twin carries,
   so the first column is wide enough for one to sit on a single line. */
.dsum .ddr{grid-template-columns:240px 1fr 120px}
.dsum .ddr .dt{font-size:12px; letter-spacing:.04em}
.dgrp{margin-top:52px}
.dgrp .kick{margin-bottom:0}
.dgrp .dnote{margin-top:6px}
.dgrp .dnote .ad{color:var(--add); font-weight:500}
.dgrp .dnote .dl{color:var(--del); font-weight:500}

/* The counts and the source take a line of their own rather than being
   squeezed to nothing, and the path keeps the row it leads. */
@media(max-width:1080px){
  .dr{grid-template-columns:1fr 96px; gap:4px 16px}
  .dr .ww{grid-column:2; text-align:right}
  .dr .nn,.dr .tt,.dr .ss{grid-column:1 / -1; text-align:left}
  .ddr{grid-template-columns:1fr 120px; gap:4px 16px}
  .ddr .pg{grid-column:1 / -1}
  /* The wide first column above is more specific than this rule, so the
     summary has to give it back by name or it keeps three columns on a phone. */
  .dsum .ddr{grid-template-columns:1fr 120px}
}

@media(max-width:860px){
  .dr,.ddr{padding-right:0}
  .dr .ww{grid-column:1 / -1; text-align:left}
}

/* ── one change ─────────────────────────────────────────────────────── */
.dchg{margin-top:34px; padding-top:22px; border-top:1px solid var(--rule)}
.dchg.is-minor{opacity:.82}
.dchg h3{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; font-weight:500;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.dchg h3 a{color:var(--ink)}
.dchg h3 a:hover{color:var(--sig)}
.dchg h3 .cnt{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4)}

.dheads{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.dheads span{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; padding:4px 8px;
  border:1px solid var(--rule);
}
.dheads .hadd{color:var(--add); border-color:var(--add-dim)}
.dheads .hdel{color:var(--del); border-color:var(--del-dim); text-decoration:line-through}

.dnote{margin-top:12px; color:var(--ink-3); font-weight:300; line-height:1.55; max-width:70ch}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* ── paging ─────────────────────────────────────────────────────────────
   A corpus listing and a page's history are both served a screen at a time,
   so both need somewhere to go next. */
.dpager{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  margin-top:34px; padding-top:18px; border-top:1px solid var(--rule);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px;
}
.dpager span{color:var(--ink-4)}
.dpager a{color:var(--ink)}
.dpager a:hover{color:var(--sig)}

/* ── the poller went quiet ──────────────────────────────────────────────
   Every date on the page still reads as fact when the differ dies, so the only
   honest thing to do is say so above them. */
.dstale{
  margin:26px 0 0; padding:14px 16px;
  border:1px solid var(--del-dim); color:var(--ink-2);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; line-height:1.6;
}
.dstale b{color:var(--del); font-weight:500}

/* ── searching the corpus ───────────────────────────────────────────────
   The box, and the rows it returns. The masthead's input searches releases and
   this one searches documentation, so it carries its own label rather than
   looking like a second copy of that one. Same register: hairline border,
   JetBrains Mono, an uppercase micro-label. */
.dsearch{display:flex; align-items:center; gap:12px; margin-top:34px; flex-wrap:wrap}
.dsearch .lbl{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.dsearch input{
  flex:1; min-width:180px; max-width:420px; background:var(--bg-2); border:1px solid var(--rule); color:var(--ink);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; padding:9px 12px;
  border-radius:0; -webkit-appearance:none; appearance:none;
}
.dsearch input:focus{outline:none; border-color:var(--sig-dim)}
.dsearch input::placeholder{color:var(--ink-4); letter-spacing:.06em}
.dsearch button{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); background:none; border:1px solid var(--rule-2);
  padding:9px 14px; cursor:pointer; transition:color .18s, border-color .18s;
}
.dsearch button:hover{color:var(--ink); border-color:var(--sig)}

.dsearch-empty{
  margin-top:38px; padding-top:20px; border-top:1px solid var(--rule);
  color:var(--ink-3); font-size:16px; max-width:60ch;
}

/* One row per page, and the whole row is the link. The path and the snippet sit
   under the title rather than beside it: a snippet is a line of prose and a
   column narrow enough to fit beside a title is too narrow to read one in. */
.dhits{margin-top:30px; border-top:1px solid var(--rule)}
.dhit{
  display:grid; grid-template-columns:1fr auto; gap:5px 20px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--rule); color:var(--ink);
  transition:background .16s, padding-left .16s;
}
.dhit:hover{background:var(--bg-2); padding-left:8px}
.dhit .tt{font-size:17px; line-height:1.35}
.dhit:hover .tt{color:var(--sig)}
.dhit .ss{
  grid-column:2; grid-row:1;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4); white-space:nowrap;
}
.dhit .pp{
  grid-column:1; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px;
  color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dhit .sn{grid-column:1 / -1; font-size:14.5px; line-height:1.55; color:var(--ink-3); font-weight:300; max-width:88ch}
.dhit .sn mark{background:var(--sig-ghost); color:var(--sig); padding:0 1px}

/* A hit quotes documentation, which is full of flag names and endpoints with
   nothing in them to break at. Left alone one of them runs past the edge of a
   phone and gives the results page a horizontal scroll. */
.dhit .tt,.dhit .sn{overflow-wrap:anywhere}

@media(max-width:860px){
  .dhit{grid-template-columns:1fr}
  /* Down here the source label is a line rather than a corner label, and the
     `nowrap` it carries above would hold the column open wider than the
     phone. */
  .dhit .ss{grid-column:1; grid-row:auto; white-space:normal}
}

/* ── the release a change sits next to ──────────────────────────────────
   A sentence rather than a card: it is one fact about when this edit happened,
   and the whole of the sentence is the caveat that it is a temporal join. */
.nearrel{
  margin-top:16px; padding:11px 14px; border-left:2px solid var(--rule-2); background:var(--bg-2);
  color:var(--ink-3); font-size:13px; font-weight:300; line-height:1.55; max-width:74ch;
}
.nearrel a{color:var(--sig)}

/* ── a history that is partly borrowed ──────────────────────────────────
   Three and a half months of this ledger were imported from the tool that
   watched these pages before this one, and that history has holes nothing in
   the rows themselves shows. Dashed rules rather than the solid one every real
   change carries: a break in the line, read as a break. */
.dpartial{
  margin:26px 0 0; padding:16px 18px;
  border:1px dashed var(--rule-2); color:var(--ink-2);
  font-weight:300; line-height:1.6; max-width:72ch;
}
.dpartial h2{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 8px;
}
.dpartial p{margin:0 0 8px}
.dpartial p:last-child{margin-bottom:0}
.dpartial .mono{color:var(--ink)}

.dgap{
  margin:34px 0 0; padding:14px 16px;
  border-top:1px dashed var(--rule-2); border-bottom:1px dashed var(--rule-2);
  color:var(--ink-3); font-weight:300; line-height:1.6; max-width:72ch;
}
.dgap-l{
  display:block;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:6px;
}