/* tools-common localweb/page — the family's galley-style page kit.

   This file is THE token source. Every --kit-* property is declared once, in
   the :root block below, with light-dark() holding both themes on one line,
   so there is no second block to keep in step. A Go test fails if any other
   file declares a --kit-* property. Tools never set --kit-* tokens; they set
   the inputs listed further down.

   ONE MEANING EACH, EXCLUSIVELY. Every rule below is written against this
   list rather than against how a colour looks:

     --kit-bg          the page
     --kit-panel       the list panel's ground
     --kit-card        cards, tables, the raised open row
     --kit-fg          text
     --kit-muted       secondary text, counts, gutters
     --kit-line        hairline rules and outlines
     --kit-signal      YOU: your selection, your pending confirmations, the
                       active place, the one filled primary button, links
     --kit-signal-soft the active chip's ground (a wash of the signal)
     --kit-signal-ink  text on a signal fill; the ink belongs to the fill
     --kit-agent       THE AGENT / WIRE: its name, its cards' edge, its progress
     --kit-agent-soft  the agent's wash
     --kit-wait        WAITING: queued messages, drafts
     --kit-danger      destructive verbs only
     --kit-ok          live, verified, active
     --kit-lift        the single elevation, used only by .kit-float surfaces
     --kit-mono        controls, labels, keys, status and counts
     --kit-sans        titles, prose and item titles

   TOOL INPUTS (all optional; defaults are tackle rust and tackle wire):
     --tool-signal-light / --tool-signal-dark          (#a4512a / #d98f66)
     --tool-agent-light  / --tool-agent-dark           (#b06f14 / #eba63f)
     --tool-signal-ink-light / --tool-signal-ink-dark  (#ffffff / #14161d)

   GALLEY'S RULES: mono only for controls, labels, keys and status; sans for
   titles and prose. 8px radius on cards and tables, 6px on controls. Hairline
   borders, no gradients, no shadow but --kit-lift. Keyboard focus draws a 1px
   signal ring; a mouse click draws none. Theme follows the system unless
   html[data-theme] overrides it (theme.js remembers the choice). */

/* The Share menu's own sheet: it also stands alone for a page without this one. */
@import url("share.css");

:root {
  color-scheme: light dark;
  --kit-bg: light-dark(#f4f5f8, #14161d);
  --kit-panel: light-dark(#eef0f4, #1a1d27);
  --kit-card: light-dark(#ffffff, #1a1d27);
  --kit-fg: light-dark(#1a1d27, #e8eaf1);
  --kit-muted: light-dark(#59606f, #969cae);
  --kit-line: light-dark(#e3e5ec, #2b2f3b);
  --kit-signal: light-dark(var(--tool-signal-light, #a4512a), var(--tool-signal-dark, #d98f66));
  --kit-signal-soft: light-dark(color-mix(in srgb, var(--kit-signal) 10%, transparent), color-mix(in srgb, var(--kit-signal) 14%, transparent));
  --kit-signal-ink: light-dark(var(--tool-signal-ink-light, #ffffff), var(--tool-signal-ink-dark, #14161d));
  --kit-agent: light-dark(var(--tool-agent-light, #b06f14), var(--tool-agent-dark, #eba63f));
  --kit-agent-soft: light-dark(color-mix(in srgb, var(--kit-agent) 10%, transparent), color-mix(in srgb, var(--kit-agent) 12%, transparent));
  --kit-wait: light-dark(#5661b8, #98a3ec);
  --kit-danger: light-dark(#c22a2a, #e5484d);
  --kit-ok: light-dark(#1f7d52, #6fc79a);
  --kit-lift: 0 6px 22px rgba(0, 0, 0, .16);
  --kit-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --kit-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--kit-bg);
  color: var(--kit-fg);
  font: 16px/1.7 var(--kit-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--kit-signal); }
code { font: .88em var(--kit-mono); }
:focus-visible { outline: 1px solid var(--kit-signal); outline-offset: 1px; }
:focus:not(:focus-visible) { outline: none; }

/* floating surfaces: the only users of --kit-lift */
.kit-float {
  position: fixed;
  z-index: 100;
  background: var(--kit-card);
  border: 1px solid var(--kit-line);
  border-radius: 8px;
  box-shadow: var(--kit-lift);
}

/* sheets: small modal dialogs over a backdrop (sheet.js); the ? overlay is one */
.kit-backdrop { position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, .28); }
.kit-sheet {
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 92vw);
  max-height: 76vh;
  overflow: auto;
  padding: 14px 20px 18px;
}
.kit-sheet-head { margin: 0 0 10px; }
.kit-sheet-body { font-size: 15px; margin: 0 0 14px; }
.kit-sheet-body:last-child { margin-bottom: 0; }

/* the ? overlay */
.kit-keys { width: min(440px, 92vw); font: 13px var(--kit-mono); }
.kit-keys .kit-label { margin: 14px 0 6px; }
.kit-keys-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 3px 0; }
.kit-keys-k { display: flex; gap: 4px; }
.kit-keys kbd {
  font: 12px var(--kit-mono);
  border: 1px solid var(--kit-line);
  border-radius: 6px;
  padding: 0 6px;
  color: var(--kit-fg);
}

/* ---------------------------------------------------------------- the shell
   The page is a column: the bar, then .kit-main (list | reading column). */
.kit-page { display: flex; flex-direction: column; height: 100%; }
.kit-main { flex: 1; display: flex; min-height: 0; }

/* The app grid: the bar across the top, then list | reading column | an
   optional rail (a tool's dock, e.g. casebook's agent). Children in order:
   .kit-bar, .kit-list, .kit-read, [.kit-rail]. */
.kit-app {
  display: grid; height: 100%; min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: auto minmax(320px, 1fr) auto;
  overflow-x: auto; /* desktop layout: below ~1080px it scrolls sideways */
}
.kit-app > .kit-bar { grid-column: 1 / -1; }
.kit-app > .kit-list, .kit-app > .kit-read, .kit-app > .kit-rail { min-height: 0; }
.kit-rail {
  width: 360px; display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--kit-line);
}

/* the bar: galley's shape */
.kit-bar {
  display: flex; align-items: center; gap: 10px; flex: none;
  height: 52px; padding: 0 20px;
  border-bottom: 1px solid var(--kit-line);
  font: 13px var(--kit-mono);
}
.kit-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-right: 6px; }
.kit-brand svg { width: 18px; height: 18px; }
a.kit-brand { color: inherit; text-decoration: none; }
a.kit-brand:hover, a.kit-brand:focus-visible { text-decoration: underline; }
.kit-ctl {
  font: 13px var(--kit-mono); color: var(--kit-fg); background: transparent;
  border: 1px solid var(--kit-line); border-radius: 6px; padding: 4px 14px; cursor: pointer;
}
.kit-ctl[hidden] { display: none; }
.kit-ctl.on { background: var(--kit-card); border-color: var(--kit-muted); }
.kit-ctl .kit-n { color: var(--kit-muted); margin-left: 6px; }
.kit-status { color: var(--kit-muted); margin-left: 6px; }
.kit-status[data-tone="signal"] { color: var(--kit-signal); }
.kit-status[data-tone="danger"] { color: var(--kit-danger); }
.kit-sp { flex: 1; }
.kit-live { display: flex; align-items: center; gap: 8px; border: 1px solid var(--kit-line); border-radius: 6px; padding: 4px 12px; }
.kit-live[hidden] { display: none; }
.kit-live i { width: 9px; height: 9px; border-radius: 50%; background: var(--kit-ok); }
.kit-live[data-state="polling"] i { background: var(--kit-wait); }
.kit-live[data-state="down"] i { background: var(--kit-danger); }
.kit-live[data-state="stale"] { color: var(--kit-muted); }
.kit-live[data-state="stale"] i { background: var(--kit-muted); }
.kit-primary {
  font: 700 13px var(--kit-mono); background: var(--kit-signal); color: var(--kit-signal-ink);
  border: 0; border-radius: 6px; padding: 7px 26px; cursor: pointer;
}
.kit-primary[hidden] { display: none; }
/* the bar's "also open" area: other work a click away, before the live pill.
   Chips keep their size; what doesn't fit folds into "+N more" (dom.js).
   The dot says who it waits on: you (signal), the agent (agent), nobody. */
.kit-also { display: flex; align-items: center; flex: none; }
.kit-also[hidden] { display: none; }
/* One fixed width, so the bar never moves as the count changes. */
.kit-also-btn {
  display: inline-flex; align-items: center; gap: 7px; width: 27ch; white-space: nowrap; overflow: hidden;
  font: 12.5px var(--kit-mono); color: var(--kit-muted); background: transparent;
  border: 1px solid var(--kit-line); border-radius: 6px; padding: 4px 10px; cursor: pointer;
}
.kit-also-btn[data-tone="you"] { color: var(--kit-fg); border-color: var(--kit-signal); }
.kit-also-btn[aria-expanded="true"] { background: var(--kit-card); }
.kit-also-text { overflow: hidden; text-overflow: ellipsis; }
.kit-also-btn i, .kit-also-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--kit-muted); flex: none; }
.kit-also-btn[data-tone="you"] i, .kit-also-row[data-tone="you"] i { background: var(--kit-signal); }
.kit-also-row[data-tone="working"] i { background: var(--kit-agent); }
.kit-also-menu { display: flex; flex-direction: column; gap: 2px; padding: 6px; width: min(460px, 92vw); }
.kit-also-row {
  display: grid; grid-template-columns: 8px 1fr; column-gap: 9px; row-gap: 2px; align-items: center; text-align: left;
  font: 13px var(--kit-sans); color: var(--kit-fg); background: transparent; border: 0; border-radius: 6px; padding: 7px 9px; cursor: pointer;
}
.kit-also-row:hover, .kit-also-row:focus-visible { background: var(--kit-card); }
.kit-also-name { grid-column: 2; font-weight: 600; overflow-wrap: anywhere; }
.kit-also-row[aria-current="page"] { background: var(--kit-card); cursor: default; }
.kit-also-here { margin-left: 8px; font: 11px var(--kit-mono); font-weight: 400; color: var(--kit-muted); border: 1px solid var(--kit-line); border-radius: 6px; padding: 0 6px; }
.kit-also-detail { grid-column: 2; font: 12px var(--kit-mono); color: var(--kit-muted); }

/* the list panel: a quiet ground */
.kit-list {
  width: 400px; flex: none; display: flex; flex-direction: column; min-height: 0;
  background: var(--kit-panel); border-right: 1px solid var(--kit-line);
}
.kit-lh { padding: 18px 20px 10px; }
.kit-eyebrow, .kit-label {
  font: 10.5px var(--kit-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--kit-muted);
}
.kit-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.kit-chips:empty { display: none; }
.kit-chip {
  font: 12.5px var(--kit-mono); color: var(--kit-muted); background: transparent;
  border: 1px solid var(--kit-line); border-radius: 6px; padding: 2px 9px; cursor: pointer;
}
.kit-chip.on { color: var(--kit-fg); background: var(--kit-signal-soft); border-color: transparent; }
.kit-chip .kit-n { margin-left: 5px; opacity: .8; }
.kit-search {
  display: block; width: 100%; margin-top: 10px;
  font: 12.5px var(--kit-mono); color: var(--kit-fg); background: var(--kit-card);
  border: 1px solid var(--kit-line); border-radius: 6px; padding: 5px 10px;
}
.kit-search::placeholder { color: var(--kit-muted); }
.kit-rows { overflow: auto; flex: 1; min-height: 0; padding: 4px 12px 12px; }
.kit-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  padding: 10px; border-radius: 8px; margin-bottom: 2px; cursor: pointer;
}
.kit-row.has-box { grid-template-columns: 16px minmax(0, 1fr) auto; }
.kit-row:hover, .kit-row.cur { background: var(--kit-card); }
.kit-row.open { background: var(--kit-card); box-shadow: inset 3px 0 0 var(--kit-signal); }
.kit-box { width: 14px; height: 14px; border: 1.5px solid var(--kit-muted); border-radius: 4px; margin-top: 5px; }
.kit-row.sel .kit-box { background: var(--kit-signal); border-color: var(--kit-signal); }
.kit-kicker { font: 11.5px var(--kit-mono); color: var(--kit-muted); }
.kit-title { font-size: 14.5px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-sub { font-size: 12.5px; color: var(--kit-agent); margin-top: 2px; }
.kit-meta { font: 11.5px var(--kit-mono); color: var(--kit-muted); padding-top: 2px; }
.kit-foot {
  display: flex; align-items: center; gap: 8px; padding: 10px 20px;
  border-top: 1px solid var(--kit-line); font: 12.5px var(--kit-mono);
}
.kit-foot .kit-n { color: var(--kit-signal); font-weight: 600; }

/* the reading column: galley's document */
.kit-read { flex: 1; overflow: auto; min-width: 0; }
.kit-doc { max-width: 640px; margin: 0 auto; padding: 44px 32px 60px; }
.kit-doc p { margin: 0 0 16px; }
.kit-kick { font: 12px var(--kit-mono); color: var(--kit-muted); }
.kit-h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; margin: 10px 0 18px; }
.kit-facts { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--kit-muted); margin-bottom: 26px; }
.kit-facts b { color: var(--kit-fg); font-weight: 600; }
.kit-doc .kit-label { margin: 30px 0 10px; }

/* hairline tables */
.kit-table { background: var(--kit-card); border: 1px solid var(--kit-line); border-radius: 8px; overflow: hidden; margin: 0 0 8px; }
.kit-tr {
  display: grid; grid-template-columns: 120px 70px 1fr; gap: 10px; align-items: center;
  padding: 9px 14px; border-top: 1px solid var(--kit-line); font-size: 14.5px;
}
.kit-tr:first-child { border-top: 0; }

/* cards with a coloured edge; the card holds its own actions */
.kit-card {
  background: var(--kit-card); border: 1px solid var(--kit-line); border-radius: 8px;
  padding: 14px 16px; margin: 0 0 14px;
}
.kit-card.edge-signal { border-left: 3px solid var(--kit-signal); }
.kit-card.edge-agent { border-left: 3px solid var(--kit-agent); }
.kit-card.edge-wait { border-left: 3px solid var(--kit-wait); }
/* the header is one line at a fixed height, with or without a pill: its parts
   sit centred on it and nothing wraps. The key (pushed right) gives way first,
   then the crumb, each with an ellipsis; a pill never shrinks. */
.kit-card-head {
  font: 10.5px var(--kit-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--kit-muted); margin-bottom: 6px;
  display: flex; align-items: center; height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kit-card-head > * { flex-shrink: 0; }
.kit-card-head > .kit-card-crumb, .kit-card-head > .kit-card-key {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.kit-card-head > .kit-card-crumb { flex-shrink: 1; }
.kit-card-head > .kit-card-key { margin-left: auto; flex-shrink: 1000; }
.kit-card-head .kit-pill { line-height: 14px; padding-top: 1px; padding-bottom: 1px; }
.kit-card.edge-signal .kit-card-head { color: var(--kit-signal); }
.kit-card.edge-agent .kit-card-head { color: var(--kit-agent); }
.kit-card.edge-wait .kit-card-head { color: var(--kit-wait); }
.kit-card-body { font-size: 15px; margin: 0 0 12px; }
.kit-card-body:last-child { margin-bottom: 0; }

/* buttons: lowercase mono, outlined; one fill per card; red text destroys */
.kit-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.kit-btn {
  font: 13px var(--kit-mono); color: var(--kit-fg); background: transparent;
  border: 1px solid var(--kit-line); border-radius: 6px; padding: 4px 12px; cursor: pointer;
}
.kit-btn.fill { background: var(--kit-signal); border-color: var(--kit-signal); color: var(--kit-signal-ink); font-weight: 700; }
.kit-btn.danger { color: var(--kit-danger); }
.kit-btn:disabled { opacity: .45; cursor: default; }

/* pills */
.kit-pill { font: 11px var(--kit-mono); border-radius: 6px; padding: 1px 7px; }
.kit-pill.wait { color: var(--kit-wait); background: color-mix(in srgb, var(--kit-wait) 10%, transparent); }
.kit-pill.ok { color: var(--kit-ok); background: color-mix(in srgb, var(--kit-ok) 10%, transparent); }

/* a message's state (tools-common/msgstate; messagePill). Waiting is the wait
   colour, the agent's two states the agent's, settled-well ok, settled-badly
   danger; a quiet ending (declined, no reply) is muted, no reply dashed so it
   reads as unfinished. The line under the pill is muted prose. */
.kit-msg { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.kit-msg-line { font: 12.5px/1.5 var(--kit-sans); color: var(--kit-muted); }
.kit-pill[data-state] { border: 1px solid transparent; }
.kit-pill[data-state="sent"] { color: var(--kit-wait); background: color-mix(in srgb, var(--kit-wait) 10%, transparent); }
.kit-pill[data-state="with_agent"] { color: var(--kit-agent); border-color: var(--kit-agent); }
.kit-pill[data-state="working"] { color: var(--kit-agent); background: var(--kit-agent-soft); }
.kit-pill[data-state="answered"] { color: var(--kit-ok); background: color-mix(in srgb, var(--kit-ok) 10%, transparent); }
.kit-pill[data-state="declined"] { color: var(--kit-muted); background: color-mix(in srgb, var(--kit-muted) 12%, transparent); }
.kit-pill[data-state="failed"] { color: var(--kit-danger); background: color-mix(in srgb, var(--kit-danger) 10%, transparent); }
.kit-pill[data-state="no_reply"] { color: var(--kit-muted); border-color: var(--kit-muted); border-style: dashed; }

/* code: a gutter and the source, side by side; scrolls, never wraps */
.kit-code {
  display: grid; grid-template-columns: auto 1fr; overflow-x: auto;
  background: var(--kit-card); border: 1px solid var(--kit-line); border-radius: 8px;
  margin: 0 0 16px;
}
.kit-code pre { margin: 0; padding: 10px 14px; font: 12.5px/1.6 var(--kit-mono); white-space: pre; tab-size: 4; }
.kit-gutter { color: var(--kit-muted); text-align: right; user-select: none; border-right: 1px solid var(--kit-line); }

/* collapsible sections */
.kit-fold { margin: 0 0 8px; }
.kit-fold > summary { cursor: pointer; list-style: none; margin: 22px 0 10px; }
.kit-fold > summary::-webkit-details-marker { display: none; }
.kit-fold > summary::before { content: "▸"; display: inline-block; width: 1.4em; }
.kit-fold[open] > summary::before { content: "▾"; }

/* the inline note */
.kit-note {
  width: 100%; font: 14.5px var(--kit-sans); color: var(--kit-fg); background: var(--kit-card);
  border: 1px solid var(--kit-line); border-radius: 6px; padding: 6px 10px;
}
.kit-note:focus-visible { outline: 1px solid var(--kit-signal); outline-offset: 0; }

/* the frame: index | centre | thread in the app grid; each side folds to a
   thin strip (frame.js). The toggle stays pinned while its column scrolls, and
   each body rises under it. */
.kit-col { overflow: auto; scrollbar-gutter: stable; }
.kit-left-col { width: 288px; padding: 0 0 32px; }
.kit-right-col { width: 384px; }
.kit-left-col, .kit-right-col { position: relative; transition: width .15s; }
.kit-mid { padding: 24px 24px 32px; }
.kit-col-toggle {
  position: sticky; top: 8px; z-index: 3; display: block;
  margin: 8px 12px 0 auto; width: 25px; min-height: 25px; padding: 0;
  border: 1px solid var(--kit-line); border-radius: 6px;
  background: var(--kit-card); color: var(--kit-muted);
  font: 14px/1 var(--kit-mono); cursor: pointer;
}
.kit-left-col > .kit-col-body, .kit-right-col > .kit-col-body { margin-top: -33px; }
.kit-col-toggle:hover { color: var(--kit-signal); border-color: var(--kit-signal); }
.kit-col.kit-collapsed { width: 40px; overflow: hidden; }
.kit-col.kit-collapsed > .kit-col-body { display: none; }
.kit-col.kit-collapsed > .kit-col-toggle { margin: 8px auto; }

/* narrow mode (frame.js narrowMode): one thing at a time at 1080 wide or less.
   Closed sides are strips whatever kit-collapsed says. An open side covers the
   centre's track and the centre keeps its size under it, hidden, so its scroll
   and what it measures survive. The fold's rules stay for the wide page, and
   a page prints as if wide. */
.kit-col-count { display: none; }
@media screen {
  .kit-app.kit-narrow { grid-template-columns: auto minmax(0, 1fr) auto; overflow-x: hidden; }
  .kit-narrow > .kit-col { grid-row: -2; transition: none; }
  .kit-narrow > .kit-mid { grid-column: 2; min-width: 0; }
  .kit-narrow > .kit-left-col { grid-column: 1; }
  .kit-narrow > .kit-right-col { grid-column: 3; }
  .kit-narrow > .kit-left-col, .kit-narrow > .kit-right-col { width: 40px; overflow: hidden; padding: 0; }
  .kit-narrow > .kit-col > .kit-col-body { display: none; }
  .kit-narrow > .kit-col > .kit-col-toggle { margin: 8px auto; }
  .kit-narrow > .kit-col > .kit-col-count, .kit-right-col.kit-collapsed > .kit-col-count {
    display: block; box-sizing: border-box; width: fit-content; min-width: 22px; margin: 0 auto;
    padding: 2px 5px; border-radius: 10px; text-align: center;
    background: var(--kit-signal); color: var(--kit-signal-ink); font: 700 11px/16px var(--kit-mono);
  }
  .kit-narrow-left > .kit-left-col, .kit-narrow-right > .kit-right-col {
    display: grid; width: auto; min-width: 0; grid-template-rows: minmax(0, 1fr);
  }
  .kit-narrow-left > .kit-left-col {
    grid-column: 1 / 3; grid-template-columns: 40px minmax(0, 1fr);
    background: linear-gradient(to right, color-mix(in srgb, var(--kit-signal) 14%, transparent) 40px, transparent 40px);
  }
  .kit-narrow-right > .kit-right-col {
    grid-column: 2 / 4; grid-template-columns: minmax(0, 1fr) 40px;
    background: linear-gradient(to left, color-mix(in srgb, var(--kit-signal) 14%, transparent) 40px, transparent 40px);
  }
  .kit-narrow-left > .kit-mid, .kit-narrow-right > .kit-mid { visibility: hidden; }
  .kit-narrow-left > .kit-left-col > .kit-col-toggle { grid-area: 1 / 1; align-self: start; }
  .kit-narrow-right > .kit-right-col > .kit-col-toggle { grid-area: 1 / 2; align-self: start; }
  .kit-narrow-left > .kit-left-col > .kit-col-body,
  .kit-narrow-right > .kit-right-col > .kit-col-body {
    display: block; grid-row: 1; min-width: 0; margin-top: 0; overflow: auto;
  }
  .kit-narrow-left > .kit-left-col > .kit-col-body { grid-column: 2; border-left: 1px solid var(--kit-line); }
  .kit-narrow-right > .kit-right-col > .kit-col-body { grid-column: 1; border-right: 1px solid var(--kit-line); }
  .kit-narrow-left > .kit-left-col > .kit-col-count, .kit-narrow-right > .kit-right-col > .kit-col-count { display: none; }
}

/* the page's one pop-out (tip.js): fixed, so nothing that scrolls clips it */
.kit-tip-at { display: inline-flex; }
.kit-tip {
  display: none; position: fixed; z-index: 40; pointer-events: none;
  width: max-content; max-width: min(420px, calc(100vw - 16px));
  padding: 8px 12px; border-radius: 8px;
  background: var(--kit-panel); color: var(--kit-fg); border: 1px solid var(--kit-line);
  box-shadow: 0 6px 20px rgb(0 0 0 / 15%);
  font: 13px/1.5 var(--kit-sans); white-space: normal;
}
.kit-tip-at:hover > .kit-tip, .kit-tip-at.show > .kit-tip { display: block; }

/* words where something has nothing to show yet */
.kit-empty { color: var(--kit-muted); font-size: 13px; margin: 4px 0 8px; }
/* a label, or a key, that does something when pressed */
.kit-label-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--kit-signal); }

/* the left index (index.js): a row is its button, then the dot. Draft is the
   wait colour, the row in front of you the signal. */
.kit-index-section { padding: 4px 12px 8px; }
.kit-index-section > .kit-label { margin: 12px 8px 8px; }
.kit-index-section > .kit-empty { margin: 0 8px; }
.kit-index-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.kit-index-row {
  display: flex; align-items: flex-start; gap: 4px;
  border-radius: 6px; border-left: 3px solid transparent;
}
.kit-index-row.on { background: color-mix(in srgb, var(--kit-signal) 14%, var(--kit-card)); }
.kit-index-row.on .kit-index-title { color: var(--kit-signal); }
.kit-index-row.on .kit-index-main:hover { background: none; }
.kit-index-main {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr; text-align: left;
  background: none; border: 0; padding: 8px; cursor: pointer; color: var(--kit-fg); font: inherit;
}
.kit-index-main:hover { background: var(--kit-card); border-radius: 6px; }
.kit-index-title {
  font-size: 14px; line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.kit-index-row .kit-meta { grid-column: 1; font: 11.5px var(--kit-mono); color: var(--kit-muted); }
.kit-index-row.attn .kit-meta { color: var(--kit-signal); font-weight: 700; }
.kit-index-row.waits .kit-meta { color: var(--kit-wait); }
.kit-index-row.draft { border-left-color: var(--kit-wait); }
.kit-index-row.draft .kit-meta { color: var(--kit-wait); font-weight: 700; }
.kit-attn-at { flex: none; align-self: center; }
.kit-attn-dot {
  box-sizing: content-box; width: 7px; height: 7px; margin: 0 4px;
  border: 4px solid transparent; border-radius: 50%; background: var(--kit-signal) padding-box;
}

/* a key: a card's address, in mono and never shouted */
.kit-key {
  overflow-wrap: anywhere; font: 11.5px var(--kit-mono); color: var(--kit-muted);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

/* a note box and its button */
.kit-note-line { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; }
.kit-note-line .kit-btns { flex: none; }

/* the thread column (thread.js): each message edged by who wrote it */
.kit-thread { padding: 16px; }
/* the label sits on the toggle's line, centred on it */
.kit-right-col > .kit-col-body .kit-thread { padding-top: 14px; }
.kit-thread > .kit-label { margin-bottom: 8px; }
.kit-thread-name {
  font-weight: 600; margin: 0 0 12px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.kit-thread-key { margin: -8px 0 12px; }
.kit-thread-key .kit-label-link { font: inherit; color: inherit; text-align: left; }
.kit-thread-key .kit-label-link:hover { color: var(--kit-signal); }
.kit-thread-msgs { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kit-thread-msg { border: 1px solid var(--kit-line); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.kit-thread-msg.agent { border-left: 3px solid var(--kit-agent); }
.kit-thread-msg.user { border-left: 3px solid var(--kit-signal); }
.kit-thread-msg-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.kit-thread-msg-head .kit-meta { font: 11px var(--kit-mono); color: var(--kit-muted); }
.kit-thread-msg-text { margin: 4px 0 0; white-space: pre-wrap; }
/* a caller's rendered text (thread's render) lays out its own blocks */
.kit-thread-msg-md { white-space: normal; }
.kit-thread-ref { font-family: var(--kit-mono); font-size: 13px; }
.kit-thread .kit-note-line { flex-direction: column; align-items: stretch; }

/* tabs in the right column (tabs.js): the row sits under the fold toggle's line */
.kit-rail-tabs { padding-top: 41px; }
.kit-rail-tabrow { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.kit-rail-panel { padding: 0 16px 16px; }
.kit-right-col > .kit-col-body .kit-rail-panel .kit-thread { padding: 0; }

/* the drafts list (draftlist.js): the words read as text until they're edited */
.kit-draft-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kit-draft-row {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--kit-line); border-left: 3px solid var(--kit-wait); border-radius: 8px;
}
.kit-draft-row.on { border-color: var(--kit-signal); }
.kit-draft-quote {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--kit-fg);
  font: 600 14px var(--kit-sans); overflow-wrap: anywhere;
}
.kit-draft-quote:hover { color: var(--kit-signal); }
.kit-draft-words {
  box-sizing: border-box; resize: none; field-sizing: content; max-height: 360px;
  margin: 0 -5px; width: calc(100% + 10px); padding: 2px 4px;
  background: none; border: 1px solid transparent; border-radius: 4px; color: var(--kit-fg);
  font: 14px var(--kit-sans);
}
.kit-draft-words:hover { border-color: var(--kit-line); }
.kit-draft-words:focus { border-color: var(--kit-signal); background: var(--kit-card); outline: none; }
.kit-draft-row > .kit-meta { font: 11.5px var(--kit-mono); color: var(--kit-muted); }

/* the stage track (track.js): where it stands, and who it waits on */
@keyframes kit-pulse { 50% { opacity: .25; } }
.kit-stages {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; font: 12px var(--kit-mono);
}
.kit-stage {
  box-sizing: border-box; display: inline-block; height: 20px; white-space: nowrap;
  font: 12px/18px var(--kit-mono); padding: 0 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--kit-line); background: var(--kit-bg); color: var(--kit-muted);
}
.kit-stage.done { color: var(--kit-ok); border-color: var(--kit-ok); background: transparent; }
.kit-stage.now { color: var(--kit-signal-ink); background: var(--kit-signal); border-color: var(--kit-signal); }
.kit-stage.flagged {
  color: var(--kit-agent); border-color: var(--kit-agent);
  background: color-mix(in srgb, var(--kit-agent) 14%, transparent);
}
.kit-stage.live::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: var(--kit-ok); animation: kit-pulse 1.2s infinite;
}
.kit-stage.now.live::before { background: var(--kit-signal-ink); }
.kit-stage.plain { cursor: default; }
.kit-arrow { color: var(--kit-muted); }
.kit-stages.parked :is(.kit-stage, .kit-arrow) { opacity: .55; filter: grayscale(1); }
.kit-stages.parked .kit-stage.live::before { animation: none; }
.kit-more {
  display: inline-block; margin-left: 6px; width: 14px; height: 14px; line-height: 12px;
  text-align: center; border-radius: 50%; border: 1px solid currentColor;
  font: italic 600 10px var(--kit-sans); cursor: help;
}
.kit-more::before { content: "i"; }
.kit-tip > b { display: block; font-weight: 600; }
.kit-tip-rows { display: grid; grid-template-columns: auto 1fr auto; }
.kit-tip-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.kit-tip-id { color: var(--kit-muted); font-variant-numeric: tabular-nums; }
.kit-tip-id:not(:empty) { padding-right: 8px; }
.kit-tip-meta { padding-left: 12px; text-align: right; white-space: nowrap; }
.kit-tip-meta, .kit-tip-note { color: var(--kit-muted); }
.kit-tip-note { display: block; margin-top: 4px; contain: inline-size; }
.kit-pill.kit-badge {
  box-sizing: border-box; display: inline-block; vertical-align: middle; height: 20px;
  padding: 0 8px; border: 1px solid transparent; border-radius: 999px;
  font-size: 12px; line-height: 18px; white-space: nowrap;
  background: var(--kit-line); color: var(--kit-muted);
}
.kit-pill.kit-badge.t-you {
  background: color-mix(in srgb, var(--kit-signal) 14%, transparent); color: var(--kit-signal); font-weight: 600;
}
.kit-pill.kit-badge.t-wait {
  background: color-mix(in srgb, var(--kit-wait) 14%, transparent); color: var(--kit-wait); font-weight: 600;
}
.kit-stages .kit-badge { margin-left: 8px; }
.kit-stages .kit-badge + .kit-badge { margin-left: 0; }
.kit-waits-at { margin-left: 8px; }
.kit-more-waits { color: var(--kit-muted); cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

/* the agent's one line; in a slot it holds its height with or without one */
.kit-working {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; vertical-align: middle;
  max-width: 100%; min-width: 0; height: 20px; margin: 8px 0 0; padding: 0 8px;
  border: 1px solid transparent; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--kit-signal) 14%, transparent); color: var(--kit-wait);
  font: 12px var(--kit-mono);
}
.kit-working i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--kit-wait);
  animation: kit-pulse 1.2s infinite; flex: none;
}
.kit-working.kit-pending { background: var(--kit-panel); border: 1px solid var(--kit-line); color: var(--kit-muted); }
.kit-working.kit-pending i { background: var(--kit-muted); }
.kit-agent-slot { height: 28px; margin: 8px 0 0; display: flex; align-items: center; min-width: 0; }
.kit-agent-slot .kit-working { margin: 0; max-width: 100%; min-width: 0; }
.kit-agent-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* a draft's box (drafts.js): it grows with its text */
.kit-draft { width: 100%; resize: vertical; font: 14px var(--kit-sans); }
textarea.kit-draft { min-height: 72px; field-sizing: content; max-height: 360px; }
.kit-draft.attn { border-color: var(--kit-signal); outline: 1px solid var(--kit-signal); }
.kit-draft-box { flex: 1; min-width: 0; width: 100%; }
.kit-note-line .kit-draft { flex: 1; }

/* the bar at the foot of a page of drafts */
.kit-sendbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px;
  border: 1px solid var(--kit-line); border-radius: 8px; background: var(--kit-card);
}
.kit-sendbar-count { font: 12px var(--kit-mono); white-space: nowrap; margin-right: auto; }
.kit-sendbar-hint { color: var(--kit-muted); font-size: 13px; flex: 1 1 100%; order: 3; }
.kit-sendbar .kit-btns { flex: 0 1 auto; gap: 8px; }

/* the front page's list (frontpage.js): filter rows of one line with the count
   at the right, chips on a phone; status pills with their count; groups that
   fold. */
.kit-filter {
  grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  column-gap: 8px; padding: 5px 8px;
}
.kit-filter > .kit-meta { grid-column: 2; }
.kit-pill-n { margin-left: 6px; }
.kit-group.kit-card { max-width: 1100px; margin: 0 0 24px; }
.kit-group-head {
  display: block; margin: 0 0 12px; padding: 0; border: 0; background: none;
  cursor: pointer; text-align: left;
}
.kit-group-head::before { content: '▾ '; }
.kit-group-head:hover { color: var(--kit-signal); }
.kit-group.kit-folded > .kit-group-head::before { content: '▸ '; }
.kit-group.kit-folded > :not(.kit-group-head) { display: none; }
.kit-group.kit-folded > .kit-group-head { margin-bottom: 0; }
.kit-group-rows { list-style: none; margin: 0; padding: 0; }
@media (width <= 640px) {
  .kit-filter-row { padding: 0 12px; }
  .kit-filter-row > .kit-label { margin: 0 0 4px; }
  .kit-filter-row .kit-index-rows { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .kit-filter-row .kit-index-row { border: 1px solid var(--kit-line); background: var(--kit-card); }
  .kit-filter-row .kit-index-row.on { background: color-mix(in srgb, var(--kit-signal) 14%, var(--kit-card)); }
  .kit-filter { grid-template-columns: auto auto; padding: 2px 8px; }
  .kit-filter > .kit-index-title { font-size: 13px; }
}

/* getting to what needs the reader (needs.js): the count as a button, the same
   button on the line after an answer. */
.kit-needs {
  box-sizing: border-box; height: 22px; padding: 0 10px; border: 0; border-radius: 999px;
  font: 600 12px var(--kit-mono); white-space: nowrap; cursor: pointer;
  background: var(--kit-signal); color: var(--kit-signal-ink);
}
.kit-needs[hidden] { display: none; }
.kit-needs:hover { filter: brightness(1.08); }
.kit-stages .kit-needs { margin-left: 8px; }
.kit-needs-row { grid-template-columns: 1fr; }
.kit-needs-row > * { grid-column: 1; }
.kit-next { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.kit-next-words { font: 12px var(--kit-mono); color: var(--kit-muted); }