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

   The ledger row is cc.css's: this page and the front door show the same rows,
   so only the page head and the filter toolbar live here. The front door's
   hero, panel and scale strip are in cc-home.css and this page does not load
   it, which is why the heading and deck are restated rather than reused.
   ───────────────────────────────────────────────────────────────────────── */

/* Top padding only. `.arch` sits on the same element as `.shell`, and a
   padding shorthand here has equal specificity and loads second, so it wipes
   `.shell`'s `padding:0 var(--pad)` and the page runs 80px wider than the
   masthead above it. Same bug as blog.css's `.blog`, found with it. */
.arch{padding-top:62px}

.kick{display:flex; align-items:center; gap:14px; margin-bottom:24px}
.kick .lbl{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sig); white-space:nowrap;
}
.kick .ln{flex:1; height:1px; background:var(--rule-2); max-width:180px}

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

/* ── the filter toolbar ─────────────────────────────────────────────── */
/* It wraps rather than shrinking, because a filter box narrow enough to fit a
   version number and a count on one 360px line is too narrow to read what you
   typed into it. */
.tools{
  display:flex; align-items:center; gap:18px 24px; flex-wrap:wrap;
  margin-top:38px; padding:18px 0 20px; border-top:1px solid var(--rule);
}

.fbox{position:relative; flex:1 1 260px; min-width:0}
.fbox input{
  width:100%; background:var(--bg-2); color:var(--ink);
  border:1px solid var(--rule-2); border-radius:0;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; letter-spacing:.02em;
  padding:11px 46px 11px 14px;
  transition:border-color .18s, background .18s;
  -webkit-appearance:none; appearance:none;
}
.fbox input::placeholder{color:var(--ink-4)}
.fbox input:focus{outline:none; border-color:var(--sig); background:var(--sig-ghost)}
.fbox input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}

.fbox .kbd{
  position:absolute; right:10px; top:50%; transform:translateY(-50%); pointer-events:none;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; color:var(--ink-4);
  border:1px solid var(--rule-2); padding:2px 7px; line-height:1.4;
  transition:opacity .18s;
}
.fbox input:focus~.kbd{opacity:0}

.tools .ct{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.tools .ct b{color:var(--sig); font-weight:500}

/* ── filtered state ─────────────────────────────────────────────────── */
/* The filter runs over 457 rows on every keystroke, so it toggles one class
   and never touches layout or the DOM's shape. */
.rr.off{display:none}

.arch-empty{
  display:none; padding:44px 0; border-bottom:1px solid var(--rule);
  font-size:17px; color:var(--ink-2); font-weight:300;
}
.arch-empty.on{display:block}
.arch-empty b{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:14px; color:var(--ink)}

@media(max-width:860px){
  .arch{padding-top:38px}
  .kick{margin-bottom:18px}
  .arch .deck{font-size:16.5px; margin-top:16px}
  .tools{margin-top:26px; gap:14px 18px; padding:14px 0 16px}
  .fbox{flex:1 1 100%}
  .fbox input{font-size:16px} /* under 16px iOS zooms the whole page on focus */
  .fbox .kbd{display:none}    /* a phone has no slash key to advertise */
}