/* one.css — the one page (index.html + one.html): a clean glowing terminal.
   Monospace, teal text with a soft glow, orange for what is yours or active,
   a near-black background with a teal cast. Dark only.

   Colour is three HUES and a LIGHTNESS the person picks in the ··· menu;
   palette.js turns them into every --ns-* token below (one.js sets them on
   :root — the values here are the defaults, for the first paint), and
   tests/hues.test.mjs proves text ≥ 7:1, dim text, the accent and the
   seats ≥ 4.5:1 (or the best any colour can reach on a mid grey), in sRGB,
   at every hue and lightness.

   The --ns-* tokens feed the two shared sheets below — the game boards
   (games.css) and the chat chips, their menu, the settings box and afterglow
   (roomtags.css), which app.js draws and which paint from tokens alone. */
@import url("themes/games.css");
@import url("themes/roomtags.css");

:root {
  --h-text: 195; --h-accent: 55; --h-bg: 200;
  --ns-bg: oklch(0.19 0.02 var(--h-bg));
  --ns-surface: oklch(0.22 0.02 var(--h-bg));
  --ns-sunk: oklch(0.16 0.02 var(--h-bg));
  --ns-fg: oklch(0.84 0.075 var(--h-text));
  --ns-muted: oklch(0.64 0.06 var(--h-text));
  --ns-line: oklch(0.40 0.05 var(--h-text));
  --ns-accent: oklch(0.76 0.12 var(--h-accent));
  --ns-accent-fg: var(--ns-bg);
  --ns-warn: #ff8080; --ns-line-warn: #7a3a3a; --ns-ok: #8ee39b;
  --glow: 0 0 8px oklch(0.84 0.075 var(--h-text) / .35);
  --glow-accent: 0 0 8px oklch(0.76 0.12 var(--h-accent) / .45);
  --seat-1: oklch(0.78 0.11 var(--h-text));
  --seat-2: oklch(0.78 0.11 calc(var(--h-text) + 90));
  --seat-3: oklch(0.78 0.11 calc(var(--h-text) + 180));
  --seat-4: oklch(0.78 0.11 calc(var(--h-text) + 270));
  --hue-track: linear-gradient(to right, oklch(0.7 0.11 0), oklch(0.7 0.11 30), oklch(0.7 0.11 60), oklch(0.7 0.11 90),
      oklch(0.7 0.11 120), oklch(0.7 0.11 150), oklch(0.7 0.11 180), oklch(0.7 0.11 210), oklch(0.7 0.11 240),
      oklch(0.7 0.11 270), oklch(0.7 0.11 300), oklch(0.7 0.11 330), oklch(0.7 0.11 360));
  --ns-border: 1px; --ns-radius: 0;
  --ns-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --ns-font-display: var(--ns-font-mono);
  /* one scale for every gap and inset; one control height; one small size */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
  --ctl: 32px; --small: 13px;
  color-scheme: dark;
}

/* ── the floor ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ns-bg); color: var(--ns-fg); font: 15px/1.5 var(--ns-font-mono); text-shadow: var(--glow); }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-shadow: inherit; }
button:not(:disabled) { cursor: pointer; }
a { color: inherit; }
p, fieldset, legend { margin: 0; padding: 0; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
small { font-size: var(--small); }
:focus-visible { outline: 1px dashed var(--ns-accent); outline-offset: 2px; }
::selection { background: var(--ns-fg); color: var(--ns-bg); text-shadow: none; }
input[type="checkbox"] { accent-color: var(--ns-accent); width: 16px; height: 16px; }
.ns-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.dim, .meta, .just, .src, .label { color: var(--ns-muted); }
.hot, .ns-em, .ns-phrase, .ns-tag__sizes, .brand, .say::before, .ns-line[data-kind="me"] .ns-line__who { color: var(--ns-accent); text-shadow: var(--glow-accent); }

#ns-layout { height: 100dvh; display: flex; flex-direction: column; padding: 0 var(--s4); }
@media (min-width: 720px) { #ns-layout { padding: 0 var(--s6); } }

/* ── top: the room, never anything of yours; ember · tend · stop · ··· ── */
.top { position: relative; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); min-height: calc(var(--ctl) + var(--s4)); padding: var(--s2) 0; border-bottom: 1px solid var(--ns-line); }
.room { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
.ctl { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }
.room [data-one="roomtags"] { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.meta { font-size: var(--small); white-space: nowrap; }
.meta:empty, .roomname:empty { display: none; }
.roomname { flex-basis: 100%; margin-top: calc(-1 * var(--s1)); color: var(--ns-muted); font-size: var(--small); line-height: 1.2; text-shadow: none; }   /* its own small line under the tags */
.ember { color: var(--ns-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ember::before { content: "ember "; }
body[data-ember="low"] .ember { color: var(--ns-warn); }
.quiet { color: var(--ns-muted); text-decoration: underline dotted; min-height: var(--ctl); padding: 0; }
.quiet:hover, .quiet[aria-expanded="true"] { color: var(--ns-fg); }
.quiet:disabled { display: none; }
.fuse { flex: none; height: 2px; margin-top: -1px; background: var(--ns-line); }
.fuse > span { display: block; height: 100%; background: var(--ns-accent); box-shadow: var(--glow-accent); width: calc(var(--ns-ember-left, 1) * 100%); transition: width 1s linear; }

.more { color: var(--ns-muted); }
.more > summary { list-style: none; cursor: pointer; min-height: var(--ctl); display: flex; align-items: center; letter-spacing: .15em; }
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary { color: var(--ns-fg); }
.menu { position: absolute; right: 0; top: 100%; z-index: 5; width: min(30rem, 100%); max-height: calc(100dvh - 64px); overflow-y: auto; padding: var(--s4);
        display: grid; gap: var(--s4); color: var(--ns-fg); background: var(--ns-surface); border: 1px solid var(--ns-line); box-shadow: 0 0 24px oklch(0 0 0 / .5); }
.menu small { display: block; color: var(--ns-muted); }
.menu #foot { color: var(--ns-muted); font-size: var(--small); overflow-wrap: anywhere; }
.menu #foot:empty { display: none; }
body[data-client="broken"] .menu #foot { color: var(--ns-warn); }
/* the three lists (app.js) on the same scale: a head line, a note, the entries */
.ns-lists { display: grid; gap: var(--s4); padding: 0; border: 0; }
.ns-list { display: grid; gap: var(--s2); }
.ns-list__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-height: var(--ctl); }
.ns-list__title { color: var(--ns-fg); }
.ns-list__count { color: var(--ns-muted); font-size: var(--small); }
.ns-list__acts { margin-left: auto; display: inline-flex; gap: var(--s3); }
.ns-list__acts > .ns-button { height: var(--ctl); }
.ns-list__note, .ns-lists__rule { color: var(--ns-muted); font-size: var(--small); }
.ns-list__entries { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ns-entry { height: var(--ctl); padding: 0 var(--s2); color: var(--ns-muted); border: 1px dotted var(--ns-line); border-radius: 0; }
.ns-entry[aria-pressed="true"] { color: var(--ns-fg); border-style: solid; }
.ns-entry:hover { border-color: var(--ns-accent); }
.ns-people { display: grid; gap: var(--s2); }
.ns-person { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.ns-person__who { flex: 1 1 12em; color: var(--ns-muted); }
.ns-person__choice { display: inline-flex; gap: var(--s2); }
.ns-choice { color: var(--ns-muted); }
.ns-choice[aria-pressed="true"] { color: var(--ns-accent); text-shadow: var(--glow-accent); outline: 0; }
/* the four knobs: a swatch, a name, a slider (three hues, then the background's lightness) */
.hues { display: grid; gap: var(--s2); }
.hues > legend { margin-bottom: var(--s1); color: var(--ns-muted); }
.hue { display: grid; grid-template-columns: 16px 7em 1fr; gap: var(--s2); align-items: center; cursor: pointer; }
.sw { width: 16px; height: 16px; border: 1px solid var(--ns-line); }
.sw[data-sw="text"] { background: var(--ns-fg); }
.sw[data-sw="accent"] { background: var(--ns-accent); }
.sw[data-sw="bg"] { background: var(--ns-bg); }
.sw[data-sw="light"] { background: var(--ns-bg); border-color: var(--ns-fg); }
.hue > [data-hue="light"]::-webkit-slider-runnable-track { background: linear-gradient(to right, #000, #fff); }
.hue > [data-hue="light"]::-moz-range-track { background: linear-gradient(to right, #000, #fff); }
.hue > input { appearance: none; width: 100%; height: 16px; margin: 0; background: none; }
.hue > input::-webkit-slider-runnable-track { height: 6px; background: var(--hue-track); }
.hue > input::-moz-range-track { height: 6px; background: var(--hue-track); }
.hue > input::-webkit-slider-thumb { appearance: none; width: 10px; height: 16px; margin-top: -5px; background: var(--ns-fg); border: 1px solid var(--ns-bg); }
.hue > input::-moz-range-thumb { width: 10px; height: 16px; border-radius: 0; background: var(--ns-fg); border: 1px solid var(--ns-bg); }
.hues > .quiet { justify-self: start; }

/* ── the conversation ───────────────────────────────────────────────────── */
main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hush, .wait { margin: auto; max-width: 36rem; padding: var(--s8) 0; text-align: center; color: var(--ns-muted); display: grid; gap: var(--s2); }
.hush b { font-weight: 400; color: var(--ns-fg); }
#waitline { color: var(--ns-fg); }
#waitline::after { content: "· · ·"; display: block; letter-spacing: .25em; margin-top: var(--s2); animation: pulse 1.6s ease-in-out infinite alternate; }
body[data-state="error"] #waitline::after, body[data-state="ended"] #waitline::after { content: none; }
@keyframes pulse { from { opacity: .25; } to { opacity: 1; } }
#waitdetail { display: grid; gap: var(--s1); font-size: var(--small); }
.ns-identity[data-identity="changed"] { color: var(--ns-fg); border: 1px solid var(--ns-warn); padding: var(--s2) var(--s3); text-align: left; }
.ns-hash { color: var(--ns-muted); }
.ns-warn { color: var(--ns-warn); }
.ns-phrase { quotes: "\"" "\""; }
.ns-key { display: block; margin: var(--s1) 0; padding: var(--s1) var(--s2); border: 1px solid var(--ns-warn); word-break: break-all; }

.log { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s3) 0; scrollbar-color: var(--ns-line) transparent; }
body[data-view="compose"] .log, body[data-view="waiting"] .log:empty { display: none; }
.ns-line { display: grid; grid-template-columns: 7ch 1fr; gap: var(--s2); }
.ns-line__who { text-align: right; color: var(--seat-1); }
.ns-line__text { overflow-wrap: anywhere; }
.ns-line[data-seat="2"] .ns-line__who { color: var(--seat-2); }
.ns-line[data-seat="3"] .ns-line__who { color: var(--seat-3); }
.ns-line[data-seat="4"] .ns-line__who { color: var(--seat-4); }
.ns-line[data-kind="sys"], .ns-line[data-kind="sys"] .ns-line__who { color: var(--ns-muted); }
.ns-line[data-kind="warn"], .ns-line[data-kind="fork"], .ns-line[data-kind="warn"] .ns-line__who, .ns-line[data-kind="fork"] .ns-line__who { color: var(--ns-warn); }
.ns-line[data-relayed="true"] .ns-line__text { color: var(--ns-muted); }
.ns-line__flag { color: var(--ns-muted); }
.ns-line[data-receipt="match"], .ns-line[data-receipt="world"] { display: none; }
.ns-tag__brace { color: var(--ns-muted); }
.ns-litmenu, .ns-games { flex: none; margin: 0 0 var(--s3); }
.ns-afterglow { flex: none; margin: 0; padding: var(--s3) 0; border-top: 1px solid var(--ns-line); max-height: 45%; overflow-y: auto; gap: var(--s2); }
.ns-afterglow__who { display: grid; grid-template-columns: minmax(7ch, auto) auto auto auto; justify-content: start; gap: var(--s1) var(--s3); }
.ns-afterglow__met { display: block; font-size: var(--small); white-space: nowrap; }

/* ── the dock: your tags (or your room tags), then the one line ─────────── */
.dock { flex: none; display: grid; gap: var(--s2); padding: var(--s3) 0 calc(var(--s4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ns-line); }
.dock > * { min-width: 0; }     /* an <input>'s intrinsic width must not widen the column */
.ticket { display: grid; gap: var(--s2); }
.ticket:empty, .mine:empty { display: none; }
.tags, .mine, .grp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.tags > .quiet { margin-left: auto; }
.added { display: grid; gap: var(--s2); }
.tok { display: inline-flex; align-items: stretch; min-height: var(--ctl); max-width: 100%; border: 1px solid var(--ns-line); }
.tok[data-quiet="true"], .tok[data-just="true"] { border-style: dashed; }
.tok[data-avoid="true"] { border-color: var(--ns-line-warn); }
.tok[data-dim="true"] { color: var(--ns-muted); border-style: dotted; }
.tok > button, .tok > .txt { padding: var(--s1) var(--s2); display: inline-flex; align-items: center; text-align: left; overflow-wrap: anywhere; }
.tok > .x { color: var(--ns-muted); padding: 0 var(--s2) 0 var(--s1); }
.tok > .x:hover:not(:disabled) { color: var(--ns-warn); }
.just { font-size: var(--small); }
.note { color: var(--ns-warn); }
.note:empty { display: none; }

.line { display: flex; align-items: center; gap: var(--s3); min-height: var(--ctl); }
.say::before { content: "you>"; }
.say > [data-one="skip"] { order: -1; }
.input { flex: 1; min-width: 0; height: var(--ctl); border-bottom: 1px solid var(--ns-line); caret-color: var(--ns-accent); }
.input:focus { outline: none; border-bottom-color: var(--ns-accent); box-shadow: 0 1px 0 oklch(0.76 0.12 var(--h-accent) / .5); }
.input::placeholder { color: var(--ns-muted); opacity: 1; }
.input:disabled { color: var(--ns-muted); }
.key, .ns-button { flex: none; height: var(--ctl); display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; }
.key::before, .ns-button::before { content: "["; color: var(--ns-muted); }
.key::after, .ns-button::after { content: "]"; color: var(--ns-muted); }
.key small { color: var(--ns-accent); text-shadow: var(--glow-accent); }
.key:disabled, .ns-button:disabled { color: var(--ns-muted); cursor: not-allowed; }
.key:disabled small { color: var(--ns-muted); text-shadow: inherit; }
.key:hover:not(:disabled), .ns-button:hover:not(:disabled), .ns-button[aria-pressed="true"] { color: var(--ns-accent); text-shadow: var(--glow-accent); outline: 0; }
@media (max-width: 480px) { .key small { display: none; } .line { gap: var(--s2); } }