/* NetRat — one stage, one world. Martian Mono for every word, in the chat and
   on the cards; Doto, a dot-matrix face, for the numbers that land — like the
   lights on a router. Night after 7pm, day before. */

/* ---------- fonts (was fonts/fonts.css: one render-blocking stylesheet instead of two) ---------- */
/* Martian Mono and Doto, served from our own site so a page load never calls a third party.
   Both are under the SIL Open Font License 1.1 (see /fonts/OFL-*.txt). */

/* Doto, latin-ext */
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/doto-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Doto, latin */
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/doto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Martian Mono, cyrillic-ext */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url(/fonts/martian-mono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Martian Mono, cyrillic */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url(/fonts/martian-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Martian Mono, latin-ext */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url(/fonts/martian-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Martian Mono, latin */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url(/fonts/martian-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --bg: #0b0d0c; --ink: #e8ebe6; --dim: #8e948f; --line: #2a2e2b;
  --good: #b8f05a; --warn: #ff9a4d;
  --mono: 'Martian Mono', ui-monospace, Menlo, monospace;
  --dots: 'Doto', ui-monospace, Menlo, monospace;
  /* large figures (card headlines, the chat's big finding): square dots, packed so they read as strokes.
     medium and small figures (thread numbers, room code, answers, grids, lists): round dots, like leds. */
  --dots-big: 'ROND' 0; --dots-big-track: -.05em;
  --dots-small: 'ROND' 100;
  --pad: clamp(18px, 5vw, 40px);
  --head: 58px;
  color-scheme: dark;
}
:root[data-theme="day"] {
  --bg: #f2f1ec; --ink: #141614; --dim: #595e5a; --line: #d2d1c9;
  --good: #3b7a10; --warn: #bf4d0c;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--mono); -webkit-font-smoothing: antialiased; transition: background .6s, color .6s; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--good); color: var(--bg); }
:focus-visible { outline: 2px solid var(--good); outline-offset: 3px; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 820px; margin: 0 auto; padding-inline: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 3; height: var(--head); background: var(--bg); border-bottom: 1px solid var(--line); transition: background .6s; }
.top-in { height: 100%; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; }
.me { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 0; }
.face { font-size: 20px; font-weight: 600; color: var(--good); width: 9ch; flex: none; white-space: pre; overflow: hidden; }
.face.warn { color: var(--warn); }
.id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.id b { font-size: 13px; font-weight: 700; font-stretch: 112.5%; }
.id span { font-size: 11px; color: var(--dim); font-stretch: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work { display: flex; align-items: center; gap: 10px; flex: none; }
.cells { display: flex; gap: 3px; }
.cell { display: block; width: 9px; height: 16px; border: 1px solid var(--line); position: relative; overflow: hidden; }
.cell i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--dim); }
.cell.run i { background: var(--good); }
.cell.done { border-color: var(--good); } .cell.done i { background: var(--good); }
.cell.flag { border-color: var(--warn); } .cell.flag i { background: var(--warn); }
/* a rat that stayed home (not on your list, a light run, a quick look, no key): a hollow dashed cell,
   legible on both themes. it stays in the row so you can see there's more the rat can do; the count never included it */
.cell.skip { border: 1px dashed var(--dim); opacity: .75; cursor: pointer; } .cell.skip i { height: 0 !important; }
.cell.skip:hover { border-color: var(--good); opacity: 1; }
.count { font-size: 11px; color: var(--dim); font-stretch: 75%; min-width: 5ch; }
.ctl { display: flex; gap: 16px; font-size: 11px; font-stretch: 75%; flex: 1 1 0; justify-content: flex-end; min-width: 0; }
.ctl button { color: var(--dim); padding: 6px 0; white-space: nowrap; }
.ctl button:hover { color: var(--ink); }
.ctl .go { color: var(--good); font-weight: 600; }

/* ---------- the stage ---------- */
.stage { position: fixed; top: var(--head); left: 0; right: 0; bottom: 0; }
.world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ---------- chat ---------- */
.chat-view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.msgs { padding-top: 40px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; justify-content: flex-start; }
.msg.you { justify-content: flex-end; }
.you-text { margin: 14px 0 4px; font-size: clamp(14px, 1.5vw, 16px); color: var(--dim); font-stretch: 75%; text-align: right; max-width: 40ch; }
.line { font-size: clamp(17px, 2.1vw, 24px); line-height: 1.5; max-width: 34ch; text-wrap: pretty; }
.line.good, .big.good { color: var(--good); }
.line.warn, .big.warn { color: var(--warn); }
.nerd { font-size: 12px; line-height: 1.6; max-width: 70ch; color: var(--dim); font-stretch: 75%; }
.untyped { visibility: hidden; }
.untyped::before { content: '▌'; color: var(--good); visibility: visible; position: absolute; } /* the cursor: takes no room, so nothing reflows */
mark.hl.cut { padding-right: 0; margin-right: 0; }
mark.hl.cont { padding-left: 0; margin-left: 0; }
/* what the rat sniffed out: a highlighter stroke, lime (or orange in a warning) */
mark.hl { color: inherit; background: linear-gradient(transparent 12%, color-mix(in srgb, var(--good) 30%, transparent) 12%, color-mix(in srgb, var(--good) 30%, transparent) 88%, transparent 88%); padding: 0 .12em; margin: 0 -.02em; font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.line.warn mark.hl { background: linear-gradient(transparent 12%, color-mix(in srgb, var(--warn) 28%, transparent) 12%, color-mix(in srgb, var(--warn) 28%, transparent) 88%, transparent 88%); }
.big { font-family: var(--dots); font-variation-settings: var(--dots-big); font-size: clamp(72px, 14vw, 180px); font-weight: 900; letter-spacing: var(--dots-big-track); line-height: .9; white-space: nowrap; max-width: 100%; animation: land .35s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes land { from { transform: translateY(8px) scale(.96); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .big { animation: none; } }

.code-card { border: 1px solid var(--good); padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--bg) 80%, transparent); }
/* the room check's card: scan, type, or open — the qr's white quiet zone is the tile */
.room-card { border: 1px solid var(--good); padding: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 24px; max-width: 100%; background: color-mix(in srgb, var(--bg) 80%, transparent); }
.room-qr { line-height: 0; }
.room-qr svg { display: block; max-width: 100%; height: auto; }
.room-words { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.room-label { font-size: 11px; color: var(--dim); font-stretch: 75%; letter-spacing: .02em; }
.room-words .code { font-size: clamp(56px, 9vw, 96px); margin-block: 2px 4px; }
.code-url.warn { color: var(--warn); word-break: normal; max-width: 34ch; }
/* stack before the words column gets too narrow for the link */
@media (max-width: 600px) {
  .room-card { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 16px; }
}
.code { font-family: var(--dots); font-variation-settings: var(--dots-small); font-size: clamp(64px, 14vw, 120px); font-weight: 900; letter-spacing: .06em; line-height: 1; color: var(--good); }
.code-url { font-size: 13px; color: var(--dim); font-stretch: 85%; word-break: break-all; }
.code-form { display: flex; gap: 8px; }
.cmd { flex-basis: 100%; margin: 0; font: inherit; font-size: 14px; color: var(--ink); white-space: pre-wrap; word-break: break-all; user-select: all; }
.paste-form { display: flex; flex-direction: column; gap: 8px; width: min(60ch, 100%); }
.paste-form textarea { font: inherit; font-size: 12px; background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 10px 12px; resize: vertical; min-height: 6em; }
.paste-form textarea:focus { border-color: var(--good); outline: none; }
.paste-form .ask { align-self: flex-start; }
.code-form input { font: inherit; font-size: 20px; width: 7ch; letter-spacing: .2em; text-transform: uppercase; background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 10px 12px; }
.code-form input:focus { border-color: var(--good); outline: none; }

.asks { flex: none; background: var(--bg); border-top: 1px solid var(--line); transition: background .6s; }
.asks .wrap { padding-top: 14px; padding-bottom: max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; min-height: 44px; }
.ask-label { font-size: 11px; color: var(--dim); font-stretch: 75%; min-height: 1.3em; }
/* the reply outgrew the screen: a quiet way down, at the edge of the chips */
.more-below { align-self: flex-start; font-size: 12px; color: var(--good); font-stretch: 85%; margin: -6px 0 -4px; padding: 2px 0; border-bottom: 1px solid var(--good); }
.more-below[hidden] { display: none; }
/* unread text above: the chips wait quietly, at full strength the moment you look at one */
.asks .wrap.unread .ask:not(:hover):not(:focus-visible) { opacity: .5; }
.asks .ask { transition: opacity .3s; }
.ask-box { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-box.grouped { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
.ask-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ask-note { font-size: 11px; line-height: 1.5; color: var(--dim); font-stretch: 85%; max-width: 70ch; }
/* the honest version's last word: two addresses, tappable */
.mail { display: flex; flex-direction: column; gap: 6px; }
.mail-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mail-to { font-size: clamp(15px, 1.8vw, 19px); font-weight: 700; color: var(--good); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.mail-to:hover { text-decoration-color: var(--good); }
.mail-what { font-size: 12px; color: var(--dim); font-stretch: 75%; }
.ask-note-more { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.ask-note-more:hover { text-decoration-color: var(--good); }
.ask-group-label { font-size: 11px; color: var(--dim); font-stretch: 75%; letter-spacing: .02em; }
/* each row scrolls sideways (wheel or swipe), so the picker stays three lines tall */
.ask-row { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.ask-row::-webkit-scrollbar { display: none; }
.ask-row .ask { flex: none; }
.ask-row.more { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.ask { padding: 12px 14px; border: 1px solid var(--line); font-size: clamp(12px, 1.3vw, 14px); font-stretch: 85%; color: var(--ink); text-align: left; transition: border-color .15s, color .15s, background .15s; }
.ask:hover { border-color: var(--good); }
.ask.primary { border-color: var(--good); color: var(--good); font-weight: 600; }
.ask.primary:hover { background: var(--good); color: var(--bg); }
.ask.on { border-color: var(--good); background: var(--good); color: var(--bg); }
.ask.toggle.on::before { content: '✓ '; }
.ask.off { opacity: .4; cursor: default; }

/* ---------- the deck ---------- */
.deck { position: absolute; inset: 0; animation: rise .3s ease-out both; }
.deck.away { visibility: hidden; pointer-events: none; animation: none; }
@keyframes rise { from { opacity: 0; } }
.deck-scroll { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; outline: none; }
.deck-scroll::-webkit-scrollbar { display: none; }
.card { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; }
.card-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; }
.card-body::-webkit-scrollbar { display: none; }
.card-in { margin-block: auto; display: flex; flex-direction: column; gap: clamp(10px, 1.6vw, 22px); padding-block: 36px 24px; position: relative; isolation: isolate; }
.card-in::before { content: ''; position: absolute; z-index: -1; inset: 8px calc(var(--pad) * -.5) 0; background: var(--bg); filter: blur(28px); opacity: .9; border-radius: 48px; pointer-events: none; }
.c-top { display: flex; flex-direction: column; gap: clamp(10px, 1.6vw, 22px); min-width: 0; }
/* the head (tag, figure, sentence) stays put while a tall card's rest scrolls under it */
.c-head { position: sticky; top: 0; z-index: 2; min-width: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.6vw, 22px); margin-top: -36px; padding-top: 36px; padding-bottom: 6px; background: var(--bg); transition: background .6s; }
.c-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; background: linear-gradient(to bottom, var(--bg), transparent); pointer-events: none; }
.c-tag { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--mono); font-size: 12px; font-stretch: 75%; letter-spacing: .02em; }
.c-n { color: var(--dim); }
.c-hit { color: var(--dim); }
.c-hit.good { color: var(--good); }
.c-big { font-family: var(--dots); font-variation-settings: var(--dots-big); font-size: clamp(72px, 14vw, 200px); font-weight: 900; line-height: .86; letter-spacing: var(--dots-big-track); white-space: nowrap; max-width: 100%; }
.c-big.pending { color: var(--dim); animation: blink 1.2s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .c-big.pending { animation: none; } }
.c-big.good { color: var(--good); }
.c-big.warn { color: var(--warn); }
.c-line { font-size: clamp(17px, 2.1vw, 24px); line-height: 1.45; max-width: 36ch; text-wrap: pretty; }
.c-line.dim { color: var(--dim); font-stretch: 85%; }
.c-bar { height: 3px; width: min(320px, 100%); background: var(--line); }
.c-bar i { display: block; height: 100%; width: 0; background: var(--good); transition: width .2s; }
.c-path { font-size: clamp(12px, 1.4vw, 15px); font-stretch: 85%; color: var(--dim); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.c-path .hit { color: var(--warn); font-weight: 700; }
.c-path .ok { color: var(--good); }
.c-path .dash { color: var(--line); }
.c-changes { display: flex; flex-direction: column; gap: 4px; font-size: clamp(13px, 1.4vw, 16px); }
.c-change.good { color: var(--good); } .c-change.warn { color: var(--warn); }
.c-row { display: flex; flex-wrap: wrap; gap: 10px 18px; font-family: var(--mono); }
.c-title { font-size: clamp(24px, 3.2vw, 44px); font-weight: 700; font-stretch: 112.5%; line-height: 1.1; letter-spacing: -.02em; max-width: 22ch; }
.b-jam { font-size: 14px; font-weight: 600; padding: 10px 16px; border: 1px solid var(--warn); color: var(--warn); font-stretch: 85%; }
.b-jam.on { background: var(--warn); color: var(--bg); }
/* each cell draws its own box and overlaps its neighbour's by a pixel: no line runs past the last cell */
.boring { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-width: 640px; padding: 1px 0 0 1px; }
.boring-cell { background: var(--bg); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 1px solid var(--line); margin: -1px 0 0 -1px; }
.boring-big { font-family: var(--dots); font-variation-settings: var(--dots-small); font-size: 26px; font-weight: 900; color: var(--good); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boring-cell.pending .boring-big { color: var(--dim); }
.boring-name { font-family: var(--mono); font-size: 13px; color: var(--dim); font-stretch: 75%; }
.verdicts { display: flex; flex-direction: column; max-width: 760px; border-top: 1px solid var(--line); }
.verdict { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; }
.verdict:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.verdict.off { cursor: default; } .verdict.off:hover { background: none; }
.v-q { font-family: var(--mono); font-size: clamp(13px, 1.4vw, 16px); font-stretch: 85%; }
.v-ans { display: flex; align-items: baseline; gap: 12px; }
.v-a { font-family: var(--dots); font-variation-settings: var(--dots-small); font-size: clamp(30px, 3.4vw, 44px); font-weight: 900; line-height: 1; }
.v-a.good { color: var(--good); } .v-a.warn { color: var(--warn); }
.v-arrow { font-size: 14px; color: var(--dim); }

/* what moved since the run before: a small table, then → now */
.c-was { color: var(--dim); }
.c-compare { display: grid; grid-template-columns: max-content max-content 2ch max-content; gap: 6px 14px; align-items: baseline; font-size: clamp(13px, 1.5vw, 16px); max-width: 100%; overflow-x: auto; }
.cmp-name { color: var(--dim); font-stretch: 85%; }
.cmp-was { color: var(--dim); text-align: right; }
.cmp-arrow { color: var(--line); text-align: center; }
.cmp-now.good { color: var(--good); font-weight: 700; } .cmp-now.warn { color: var(--warn); font-weight: 700; }

/* bars made of cells, like the rats' progress up top */
.c-bars { display: grid; grid-template-columns: max-content minmax(0, auto) max-content; gap: 6px 12px; align-items: center; font-size: clamp(12px, 1.3vw, 14px); width: fit-content; max-width: 100%; }
.bar-label { color: var(--dim); font-stretch: 85%; white-space: nowrap; }
.bar-cells { display: flex; gap: 2px; }
.bar-cells i { display: block; width: 8px; height: 14px; border: 1px solid var(--line); }
.bar-cells i.on { background: var(--dim); border-color: var(--dim); }
.bar-cells i.on.good { background: var(--good); border-color: var(--good); }
.bar-cells i.on.warn { background: var(--warn); border-color: var(--warn); }
.bar-text { white-space: nowrap; font-stretch: 85%; }
.bar-text.good { color: var(--good); } .bar-text.warn { color: var(--warn); }

/* your runs, in the chat: when · what turned up · why and where */
.runs { display: flex; flex-direction: column; width: min(560px, 100%); border-top: 1px solid var(--line); }
.run-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'when what' 'why what'; gap: 2px 16px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.run-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.run-row.here { box-shadow: inset 3px 0 0 var(--good); }
.run-row.on { background: color-mix(in srgb, var(--good) 18%, transparent); }
.run-row.off { cursor: default; opacity: .55; }
.run-row.off:hover { background: none; }
.run-when { grid-area: when; font-size: 13px; }
.run-why { grid-area: why; font-size: 11px; color: var(--dim); font-stretch: 75%; min-height: 1em; }
.run-what { grid-area: what; font-family: var(--dots); font-variation-settings: var(--dots-small); font-weight: 900; font-size: clamp(20px, 3vw, 26px); color: var(--dim); white-space: nowrap; }
.run-what.good { color: var(--good); } .run-what.warn { color: var(--warn); }

/* the thread continues the card, in the rat's own voice */
.thread { font-family: var(--mono); margin-top: clamp(8px, 2vh, 18px); display: flex; flex-direction: column; gap: 10px; }
.say { display: flex; gap: 14px; align-items: baseline; }
.say-face { font-size: 15px; font-weight: 600; color: var(--good); flex: none; white-space: pre; }
.say-face.warn { color: var(--warn); }
.say-text { font-size: clamp(14px, 1.5vw, 17px); line-height: 1.5; text-wrap: pretty; }
.thread-list { display: flex; flex-direction: column; gap: 10px; padding-left: calc(6ch + 14px); }
.thread-list:empty { display: none; }
.thread-list .line { font-size: clamp(14px, 1.5vw, 17px); max-width: 52ch; }
.thread-list .big { font-size: clamp(40px, 6vw, 72px); line-height: .9; font-variation-settings: var(--dots-small); letter-spacing: -.02em; }
.thread-list .you-text { margin: 4px 0 0; font-size: 13px; }
.thread-list .nerd { font-size: 12px; }
.card-chips { flex: none; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.card-chips .wrap { padding-top: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.card-chips .ask { padding: 11px 14px; }
.ticks { position: absolute; right: clamp(6px, 1.5vw, 24px); top: 40%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; font-stretch: 75%; }
.ticks .tick { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 28px; height: 18px; color: var(--dim); }
.tick-bar { display: block; height: 2px; width: 10px; background: var(--dim); transition: width .3s; flex: none; }
.tick.waiting .tick-bar { background: none; border-top: 2px dotted var(--dim); height: 0; }
.tick.warn .tick-bar { background: var(--warn); }
.tick.on .tick-bar { width: 24px; background: var(--good); }
.tick.on.warn .tick-bar { background: var(--warn); }
.tick-name { display: none; white-space: nowrap; }
.tick:hover { color: var(--ink); }
.tick.on { color: var(--ink); }
.ticks-map { width: 28px; height: 22px; text-align: right; color: var(--dim); font-size: 15px; margin-bottom: 4px; }
.ticks-map:hover { color: var(--good); }
@media (min-width: 1200px) { .tick-name { display: inline; } .ticks-map { display: none; } }
.ticks.open { background: var(--bg); border: 1px solid var(--line); padding: 10px 12px; z-index: 2; max-height: 80%; overflow-y: auto; }
.ticks.open .tick { height: 30px; }
.ticks.open .tick-name { display: inline; font-size: 13px; }

.nojs { padding-top: 40px; font-size: 18px; }

/* narrow windows: 22 cells must not push the count into the controls */
@media (max-width: 1000px) {
  .cell { width: 6px; }
  .cells { gap: 2px; }
  .count { display: none; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  :root { --head: 52px; }
  .face { font-size: 17px; width: 8.5ch; }
  .me { gap: 8px; }
  .id span { max-width: 34vw; }
  .count, .id { display: none; }
  .me { flex: none; }
  .cell { width: 5px; height: 14px; }
  .cells { gap: 1px; }
  body:not(.busy) .work { display: none; } /* the rats are home: the report has them now */
  .work { flex: 1 1 0; justify-content: center; min-width: 0; overflow: hidden; }
  .ctl { gap: 12px; flex: none; }
  .ctl #theme, .ctl #rerun { display: none; }
  .ctl #sound { font-size: 0; }
  .ctl #sound::after { content: attr(data-short); font-size: 11px; }
  .msgs { padding-top: 24px; gap: 14px; }
  .ask-box { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); }
  .ask-box::-webkit-scrollbar { display: none; }
  .ask { flex: none; }
  .ask-box.grouped { overflow: visible; margin-right: 0; padding-right: 0; }
  .ask-row { margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); }
  .big { font-size: clamp(56px, 18vw, 96px); }
  .c-big { font-size: clamp(56px, 18vw, 96px); }
  .c-line { font-size: 17px; }
  .card-in { padding-right: calc(var(--pad) + 18px); }
  .thread-list { padding-left: 0; }
  .ticks { right: 4px; }
}

/* ---------- the apps: one row per thing people do, the reason beside it ---------- */
.verdicts.apps .verdict { cursor: default; }
.verdicts.apps .verdict:hover { background: none; }
.v-q { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-why { font-size: clamp(11px, 1.2vw, 13px); color: var(--dim); font-stretch: 75%; }
.verdicts.apps .v-a { font-size: clamp(22px, 2.6vw, 34px); }

/* ---------- the night watch: ten minutes per cell ---------- */
.c-shot { display: block; width: min(420px, 100%); height: auto; border: 1px solid var(--line); background: var(--bg); }
.c-strip { display: flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
.c-strip i { display: block; width: 7px; height: 16px; border: 1px solid var(--line); background: var(--line); }
.c-strip i.good { background: var(--good); border-color: var(--good); }
.c-strip i.warn { background: var(--warn); border-color: var(--warn); }

/* ---------- the watch, live in the chat ---------- */
.watch-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, max-content)); gap: 8px 28px; border: 1px solid var(--line); padding: 14px 18px; background: color-mix(in srgb, var(--bg) 80%, transparent); }
.watch-cell { display: flex; flex-direction: column; gap: 2px; }
.watch-big { font-family: var(--dots); font-variation-settings: var(--dots-small); font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; line-height: 1; color: var(--good); white-space: nowrap; }
.watch-big.warn { color: var(--warn); }
.watch-name { font-size: 11px; color: var(--dim); font-stretch: 75%; }
.watch-log { grid-column: 1 / -1; font-size: 12px; color: var(--dim); font-stretch: 85%; max-width: 60ch; }

/* ---------- the house party board ---------- */
.board { display: flex; flex-direction: column; width: min(600px, 100%); border-top: 1px solid var(--line); }
.board-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 18px; align-items: baseline; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.board-row.me { box-shadow: inset 3px 0 0 var(--good); }
.board-place { font-size: 14px; }
.board-dev { font-size: 11px; color: var(--dim); font-stretch: 75%; }
.board-num { font-family: var(--dots); font-variation-settings: var(--dots-small); font-weight: 900; font-size: clamp(20px, 2.8vw, 28px); color: var(--good); white-space: nowrap; text-align: right; }
.board-num.warn { color: var(--warn); }
.board-num.dim { color: var(--dim); }
.board-ms { font-size: 12px; color: var(--dim); font-stretch: 85%; white-space: nowrap; }
.board-share { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--dim); font-stretch: 85%; }
.board-share .bar-cells i { width: 6px; height: 10px; }
.board-share.warn { color: var(--warn); }

.plan-form { align-items: center; flex-wrap: wrap; }
.site-form { flex-wrap: wrap; }
.site-form input { width: min(38ch, 100%); font-size: 16px; letter-spacing: 0; text-transform: none; }
.plan-label { font-size: 16px; color: var(--dim); }