/* ─────────────────────────────────────────────────────────────────────────
   DARKROOM — the Discord bot page's own furniture. Loaded after cc.css.

   Every colour is one of cc.css's ink rungs, the two rules, the signal or the
   add/del pair. Nothing here invents a hex, which is the whole reason the page
   works in both themes without a single second rule: the tokens flip on
   `html[data-theme]` and this sheet never mentions a value.

   The one deliberate exception is the sample Discord embed's left bar, which
   carries the colour the bot really sends (embeds.ts:46-57) so the mock is not
   quietly a different product from the post. It is a border on a small element
   and never a text background, so it needs no contrast pairing.

   The kicker, the h1 and the deck repeat the blog's and the archive's on
   purpose. A page head that is nearly the same reads as a different site.
   ───────────────────────────────────────────────────────────────────────── */

/* padding-top only. The shorthand here zeroed .shell's own `0 40px`, so every
   section on this page ran flush to the window edge while the rest of the site
   kept its gutter. */
.bot{padding-top:62px}

/* ── shared page furniture ──────────────────────────────────────────── */
.bot .kick,.bot .sechead{display:flex; align-items:center; gap:14px; margin-bottom:24px}
.bot .kick .lbl,.bot .sechead .lbl{color:var(--sig); white-space:nowrap}
.bot .kick .ln,.bot .sechead .ln{flex:1; height:1px; background:var(--rule-2); max-width:180px}

.bot h1{
  font-family:"Instrument Serif",serif; font-weight:400;
  font-size:clamp(32px,5.4vw,62px); line-height:1.03; letter-spacing:-.014em;
  max-width:18ch;
}
.bot h1 em{font-style:italic; color:var(--sig)}

.bot h2{
  font-family:"Instrument Serif",serif; font-weight:400;
  font-size:clamp(26px,3.4vw,40px); line-height:1.1; letter-spacing:-.008em;
  max-width:22ch;
}

.bot .deck{margin-top:20px; max-width:62ch; font-size:17.5px; line-height:1.6; color:var(--ink-2); font-weight:300}
.bot .lede{margin-top:16px; max-width:62ch; color:var(--ink-2); font-weight:300; line-height:1.6}
.bot .fine{margin-top:22px; max-width:62ch; color:var(--ink-3); font-weight:300; font-size:15px; line-height:1.55}

.bot code{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.86em;
  color:var(--ink); background:var(--sig-ghost); padding:1px 4px;
}

/* Every section after the hero is separated by a hairline, never a card. */
.bot-sec{margin-top:78px; padding-top:56px; border-top:1px solid var(--rule)}
.bot-sec.close{padding-bottom:16px}

/* ── hero ───────────────────────────────────────────────────────────── */
.bot-hero{padding-bottom:4px}

.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--rule-2); color:var(--ink-2);
  padding:14px 22px; transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.btn:hover{color:var(--ink); border-color:var(--ink-3)}
.btn.primary{border-color:var(--sig); color:var(--sig); background:var(--sig-ghost)}
.btn.primary:hover{background:var(--sig); color:var(--bg)}

.cta-note{margin-top:18px; max-width:60ch; color:var(--ink-3); font-weight:300; font-size:15px; line-height:1.55}
.cta-note .lbl.t{display:block; margin-bottom:4px}

/* ── the mock Discord surface ───────────────────────────────────────── */
/* A hand-built embed rather than a screenshot: it flips with the theme, it is
   read aloud, and it cannot silently go stale against the bot it depicts. */
.mock{margin-top:38px; max-width:660px}

.mock-ping{
  font-size:15.5px; color:var(--ink-2); font-weight:300; margin-bottom:10px;
}
.mock-ping .ping{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px;
  color:var(--sig); background:var(--sig-ghost); padding:2px 5px; margin-right:7px;
}

.embed{border-left:3px solid var(--rule-2); background:var(--bg-2)}
.embed.published{border-left-color:#d97757}
.embed.panel{border-left-color:var(--ink-4)}
.embed .ebody{padding:18px 20px 20px}

.eauthor{
  display:flex; align-items:center; gap:9px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:12px;
}
.eauthor .eav{
  font-size:9.5px; font-weight:700; letter-spacing:.08em;
  border:1px solid var(--sig); color:var(--sig); padding:3px 4px; line-height:1;
}

.etitle{font-family:"Instrument Serif",serif; font-size:25px; line-height:1.2; color:var(--sig)}

.edesc{margin-top:12px}
.edesc p{color:var(--ink-2); font-weight:300; font-size:16px; line-height:1.55; margin-bottom:11px}
.edesc p b{color:var(--ink); font-weight:600}

.ehl{list-style:none; margin-top:14px; border-top:1px solid var(--rule)}
.ehl li{padding:11px 0; border-bottom:1px solid var(--rule)}
.ehl li b{display:block; color:var(--sig); font-weight:400; font-family:"Instrument Serif",serif; font-size:18.5px; line-height:1.25}
.ehl li span{display:block; margin-top:3px; color:var(--ink-3); font-weight:300; font-size:15px; line-height:1.5}

.efields{display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:18px}
.ef{
  display:block; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px;
}
.ev{display:block; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px; color:var(--ink-2)}

.efoot{
  margin-top:16px; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4);
}

/* Not buttons. They depict Discord's, and a real <button> here would be a
   control that does nothing, which is worse than a label that looks like one. */
.ebtns{display:flex; gap:9px; margin-top:16px}
.ebtns.wrap{flex-wrap:wrap; gap:8px}
.dbtn{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.1em;
  border:1px solid var(--sig-dim); color:var(--sig); background:var(--sig-ghost); padding:9px 13px;
}
.dbtn.ghost{border-color:var(--rule-2); color:var(--ink-3); background:none}
.dbtn.ok{border-color:var(--add-dim); color:var(--add); background:var(--add-ghost)}
.dbtn.neutral{border-color:var(--rule-2); color:var(--ink-3); background:none}
.dbtn.danger{border-color:var(--del-dim); color:var(--del); background:var(--del-ghost)}

.mock-thread{
  display:flex; align-items:baseline; gap:10px; margin-top:12px; padding-left:3px;
  color:var(--ink-3); font-weight:300; font-size:15px;
}
.mock-thread .tw{width:22px; height:1px; background:var(--rule-2); flex:none; transform:translateY(-4px)}
.mock-thread b{color:var(--ink-2); font-weight:500; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px}

/* ── annotations under the mock ─────────────────────────────────────── */
.notes{list-style:none; margin-top:34px; max-width:660px; border-top:1px solid var(--rule)}
.notes li{
  display:grid; grid-template-columns:170px minmax(0,1fr); gap:4px 22px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--rule);
  color:var(--ink-2); font-weight:300; font-size:15.5px; line-height:1.5;
}
.notes .lbl.t{color:var(--ink-3)}

/* ── the six kinds ──────────────────────────────────────────────────── */
.kinds{margin-top:38px; border-top:1px solid var(--rule)}
.kind{
  display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:5px 28px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--rule); transition:background .18s;
}
.kind:hover{background:var(--sig-ghost)}
/* Every cell here names its own column. Grid places the items locked to a row
   before it auto-places anything else, so a `.kt` that only pinned its row
   took column 1 out from under the name and pushed the whole row backwards:
   description left, chip middle, title hard right. It rendered that way live
   on 2026-08-14 and read as a direction change rather than a bug. */
.kind .kn{grid-column:1; font-family:"Instrument Serif",serif; font-size:23px; line-height:1.2}
.kind .kd{grid-column:1; color:var(--ink-2); font-weight:300; font-size:15.5px; line-height:1.55; max-width:62ch}
.kind .kt{
  grid-column:2; grid-row:1 / span 2; justify-self:end; white-space:nowrap;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; padding:4px 7px; border:1px solid var(--rule-2); color:var(--ink-3);
}
.kind .kt.on{border-color:var(--add-dim); color:var(--add)}
.kind .kt.always{border-color:var(--sig-dim); color:var(--sig)}
.kind .kt.off{border-color:var(--rule-2); color:var(--ink-4)}
.kind .kt.owner{border-color:var(--rule-2); color:var(--ink-4)}

/* ── the config panel mock ──────────────────────────────────────────── */
.ptitle{font-family:"Instrument Serif",serif; font-size:22px; line-height:1.25}

.pstate{margin-top:14px; border-top:1px solid var(--rule)}
.pstate > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:9px 0; border-bottom:1px solid var(--rule);
}
.pstate dt{color:var(--ink-2); font-weight:300; font-size:15.5px}
.pstate dd{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px; color:var(--add); white-space:nowrap}
.pstate dd.set{color:var(--sig)}
.pstate dd.dim{color:var(--ink-4)}

.pselects{display:flex; flex-direction:column; gap:8px; margin-top:16px}
.sel{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--rule-2); padding:11px 13px; color:var(--ink-3);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.06em;
}
.sel i{width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--ink-4)}

/* ── commands ───────────────────────────────────────────────────────── */
.cmds{margin-top:44px; border-top:1px solid var(--rule)}
.cmd{
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:6px 28px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--rule);
}
.cmd code{background:none; padding:0; font-size:13.5px; color:var(--sig); letter-spacing:.02em}
.cmd span{color:var(--ink-2); font-weight:300; font-size:15.5px; line-height:1.55}

/* ── reliability facts ──────────────────────────────────────────────── */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:40px; border-top:1px solid var(--rule); border-left:1px solid var(--rule);
}
.fact{padding:22px 24px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.fh{
  display:block; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--sig); margin-bottom:9px;
}
.fd{display:block; color:var(--ink-2); font-weight:300; font-size:15.5px; line-height:1.55}

/* ── what it cannot do ──────────────────────────────────────────────── */
.cant{margin-top:40px; border-top:1px solid var(--rule)}
.cant .row{
  display:grid; grid-template-columns:52px minmax(0,1fr); gap:6px 22px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--rule);
}
.cant .x,.cant .y{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-align:center;
  border:1px solid var(--del-dim); color:var(--del); background:var(--del-ghost); padding:4px 0;
}
.cant .y{border-color:var(--add-dim); color:var(--add); background:var(--add-ghost)}
.cant .t{font-family:"Instrument Serif",serif; font-size:22px; line-height:1.25}
.cant .d{grid-column:2; color:var(--ink-2); font-weight:300; font-size:15.5px; line-height:1.55; max-width:62ch}

/* ── steps ──────────────────────────────────────────────────────────── */
.steps{list-style:none; counter-reset:s; margin-top:36px; border-top:1px solid var(--rule); max-width:74ch}
.steps li{
  counter-increment:s; position:relative; padding:18px 0 18px 52px; border-bottom:1px solid var(--rule);
  color:var(--ink-2); font-weight:300; font-size:16px; line-height:1.6;
}
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:20px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.14em; color:var(--sig);
}
.steps li b{color:var(--ink); font-weight:500}

/* ── the screenshot gallery ─────────────────────────────────────────── */
/* Six captures of unequal height, so this is a multi-column flow rather than a
   grid: the browser balances the columns itself and nothing has to be sorted
   by height in the template. `break-inside:avoid` is what keeps a caption with
   its image; without it a figure splits across a column boundary.

   Three columns is a deliberate cost. At this measure a capture renders around
   380px wide, which is legible but smaller than Discord drew it, so every one
   links to the file at full size. The alternative was two columns and roughly
   400px more page, which is the thing this section was asked not to be. */
.shots{margin-top:44px; columns:3; column-gap:26px}
.shots figure{break-inside:avoid; margin:0 0 26px}
.shots a{display:block; border:1px solid var(--rule-2); transition:border-color .18s}
.shots a:hover{border-color:var(--sig-dim)}
/* The captures are Discord's own dark chrome and the page is not, so they keep
   a hairline of their own in both themes rather than bleeding into the paper. */
.shots img{display:block; width:100%; height:auto}
.shots figcaption{
  margin-top:9px; color:var(--ink-3); font-weight:300; font-size:13.5px; line-height:1.5;
}
.shots figcaption b{color:var(--ink-2); font-weight:500}

@media (max-width:1180px){ .shots{columns:2} }

/* ── narrow ─────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .shots{columns:1}
  .bot{padding-top:44px}
  .bot-sec{margin-top:56px; padding-top:40px}
  .notes li,.cmd,.cant .row{grid-template-columns:minmax(0,1fr)}
  .notes li .lbl.t{margin-bottom:2px}
  .cant .x,.cant .y{justify-self:start; padding:4px 9px}
  .cant .d{grid-column:1}
  .kind{grid-template-columns:minmax(0,1fr)}
  /* grid-column too: the wide rule pins the chip to column 2, and a column 2
     that the template no longer declares is created implicitly off to the
     right rather than ignored. */
  .kind .kt{grid-column:1; grid-row:auto; justify-self:start; margin-top:6px}
  .cta .btn{flex:1 1 auto; text-align:center}
}