/* themes.css — SHEET 3 OF 4, finish schedule.
   The frame, lettering, tables, legend, code block, title block, ink weights
   and the whole idle layer come from blueprint.css. Everything here is either
   (a) a header control the shared sheet does not have — the language toggle
   and the star count — or (b) a specimen painter.

   Specimen painters are written once and paint all thirteen finishes. Every
   colour they use arrives as a custom property set on the row or the card,
   because on this page a hex value IS the content: it is the slot value read
   out of that finish's own JSON. No rule below names a colour; they name
   `--t-*` (a card) or `--sp-*` (a schedule row). The sheet's own ink stays on
   the blueprint tokens. */

/* ── header controls ─────────────────────────────────────────────────── */
.lang-btn{
  background:transparent;border:1px solid var(--rule);color:var(--ink-2);cursor:pointer;
  font-family:var(--font-tech);text-transform:uppercase;letter-spacing:.16em;
  font-weight:600;font-size:10.5px;padding:4px 9px;
}
.lang-btn:hover{border-color:var(--accent-line);color:var(--accent-text)}
.gh-link{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule);
  padding:3px 9px 3px 8px;color:var(--ink-2);
  font-family:var(--font-tech);text-transform:uppercase;letter-spacing:.16em;
  font-weight:600;font-size:10.5px;
}
.gh-link:hover{border-color:var(--accent-line);color:var(--accent-text)}
.gh-stars{display:inline-flex;align-items:center;gap:4px;border-left:1px solid var(--rule);padding-left:7px}
.gh-stars #starCount{font-family:var(--font-mono);letter-spacing:0;font-size:11px}

/* ── inherited prose ─────────────────────────────────────────────────── */
/* The page's sentences come from the site dictionary and carry <code> and
   <b>; the drawing has to letter them. */
.lede code,.txt-col code,.gnotes code,.t-note code{
  font-family:var(--font-mono);font-size:.88em;color:var(--accent-text);overflow-wrap:anywhere;
}
.txt-col b,.gnotes b{font-weight:600;color:var(--ink)}
h1{max-width:13ch}
h1 .acc{font-weight:400;color:var(--ink-2)}
.kicker{display:block;margin:0 0 14px}
.lead-line{
  font-family:var(--font-tech);text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;font-size:15px;margin:0 0 10px;
}
/* long unbroken mono strings (raw URLs, paths) must not push the sheet wider */
.txt-col .mono,.gnotes .mono{overflow-wrap:anywhere}

/* ── a note whose figure needs the full sheet width ──────────────────── */
.note.wide{grid-template-columns:minmax(0,1fr)}
.note.wide .fig-col{padding:8px 0 18px}
.note.wide .txt-col{
  border-left:0;border-top:1px solid var(--rule);padding:18px 0 34px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:0 30px;
}
.note.wide .txt-col>*{max-width:60ch}

/* ── schedule: the specimen column ───────────────────────────────────── */
.sched th,.sched td{padding-right:14px;white-space:nowrap}
.sched .t-hex,.sched .t-src{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2)}
.sched .t-n{width:52px;font-family:var(--font-mono);font-size:12px;text-align:right;padding-right:18px}
.sched thead th.t-n{text-align:right}
.sched tbody th{font-family:var(--font-mono);font-weight:400;font-size:12.5px}
.sp{display:inline-flex;border:1px solid var(--rule);vertical-align:-5px}
.sp i{display:block;width:15px;height:18px}
.c-bg{background:var(--sp-bg)}
.c-panel{background:var(--sp-panel)}
.c-bd{background:var(--sp-bd)}
.c-txt{background:var(--sp-txt)}
.c-pri{background:var(--sp-pri)}
.c-acc{background:var(--sp-acc)}
.c-ok{background:var(--sp-ok)}
.c-wrn{background:var(--sp-wrn)}
.c-err{background:var(--sp-err)}

/* ── specimen cards ──────────────────────────────────────────────────── */
/* Pinned-up samples on a ruled board: the lattice is one hairline shared
   between neighbours, so the cards read as schedule entries, not as web
   cards. Square corners, no shadow, no hover lift. */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(304px,100%),1fr));
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
  /* A short last row leaves blank cells. The inset pair closes the board's
     right and bottom edges so those blanks are ruled like any other entry
     instead of trailing off. */
  box-shadow:inset -1px 0 0 var(--rule),inset 0 -1px 0 var(--rule);
}
.tcard{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;min-width:0;
}
.tc-head{display:flex;align-items:baseline;gap:10px;padding:9px 12px 8px;border-bottom:1px solid var(--rule)}
.tc-code{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);flex:none}
.tc-name{font-family:var(--font-tech);text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:13.5px;min-width:0;overflow-wrap:anywhere}
.tc-tag{
  margin-left:auto;flex:none;
  font-family:var(--font-tech);text-transform:uppercase;letter-spacing:.2em;
  font-weight:600;font-size:9.5px;color:var(--ink-3);white-space:nowrap;
}
/* Reserve three lines so the specimens line up across a row no matter how
   long each blurb runs — a ragged schedule reads as broken, not as variety. */
.tc-note{margin:0;padding:10px 12px 12px;font-size:12.5px;line-height:1.5;color:var(--ink-2);min-height:74px}
@media (max-width:700px){.tc-note{min-height:0}}

/* The mini-interface. Every colour comes from the card's own custom
   properties, which are that finish's real slot values. One rule set,
   thirteen finishes. */
.mock{
  font-family:var(--font-mono);font-size:10.5px;line-height:1.55;
  background:var(--t-bg);border-top:1px solid var(--rule);display:flex;min-height:158px;margin-top:auto;
}
.mock-side{width:40%;flex:none;background:var(--t-panel);border-right:1px solid var(--t-border);padding:8px 0}
.mock-main{flex:1;padding:8px 10px;min-width:0}
.m-hdr{color:var(--t-muted);font-weight:700;letter-spacing:.09em;padding:0 9px;margin-bottom:3px}
.m-hdr+.m-hdr{margin-top:9px}
.m-row{padding:1px 9px;color:var(--t-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-row.dim{color:var(--t-muted)}
.m-row.sel{background:var(--t-primary);color:var(--t-seltext);font-weight:700}
.m-dot{color:var(--t-accent)}
.m-top{display:flex;align-items:center;gap:6px;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--t-bordersub);color:var(--t-text)}
.m-branch{color:var(--t-accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-state{margin-left:auto;color:var(--t-success);white-space:nowrap}
.m-add{color:var(--t-success)}
.m-del{color:var(--t-error)}
.m-ctx{color:var(--t-muted)}
.m-warn{color:var(--t-warning)}
.m-chip{display:inline-block;background:var(--t-element);color:var(--t-text);padding:0 5px}

/* The swatch band: primary · secondary · success · warning · error · info,
   flush under the specimen like a colour key struck on the sample itself. */
.sw{display:flex;border-top:1px solid var(--rule)}
.sw i{flex:1;height:13px}

.tc-cmd{
  display:flex;align-items:flex-start;gap:8px;width:100%;
  background:transparent;border:0;border-top:1px solid var(--rule);
  color:var(--ink-2);font-family:var(--font-mono);font-size:11px;line-height:1.45;
  padding:8px 12px;text-align:left;cursor:pointer;
}
.tc-cmd .ps{color:var(--ink-3);flex:none}
/* A trailing ellipsis cut the finish NAME, so every card read
   `rove theme add https://rove…`. Wrap instead — a command you cannot read
   whole is a command you cannot trust you copied. */
.tc-cmd-t{flex:1;min-width:0;overflow-wrap:break-word;word-break:normal}
.tc-copy{
  flex:none;font-family:var(--font-tech);text-transform:uppercase;letter-spacing:.16em;
  font-weight:600;font-size:9.5px;color:var(--ink-3);
  border-left:1px solid var(--rule);padding-left:8px;align-self:stretch;display:flex;align-items:center;
}
.tc-cmd:hover{color:var(--ink)}
.tc-cmd:hover .tc-copy{color:var(--accent-text)}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width:620px){
  .sp i{width:12px;height:16px}
  .sched th,.sched td{padding-right:10px}
  .head nav{gap:12px}
  .lead-line{font-size:14px}
}

/* The command is the same for all ten; only the filename changes. Stating it
   once above the grid lets each card carry just its own filename instead of
   ten near-identical lines competing for the same attention. */
.cmd-template{
  display:flex;gap:7px;align-items:baseline;margin:0 0 14px;padding:8px 10px;
  border:1px solid var(--rule);font-size:12.5px;color:var(--ink-2);
  overflow-wrap:anywhere;
}
.cmd-template .ps{color:var(--ink-3);flex:none}
.cmd-template b{color:var(--accent-text);font-weight:400}