/* Companion PWA. Tokens first; components use only tokens. */
:root {
  color-scheme: light dark;

  /* type scale (px): 13 / 15 / 17 / 22 */
  --fs-meta: 0.8125rem;
  --fs-body: 0.9375rem;
  --fs-title: 1.0625rem;
  --fs-screen: 1.375rem;
  --lh: 1.4;

  /* spacing scale: 4 8 12 16 24 32 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  --tap: 44px;
  --radius: 8px;
  --rail: 208px;
  --nav-h: 56px;

  --dur: 120ms;

  /* light */
  --bg: #f6f5f2;
  --surface: #ffffff;
  --text: #1b1d21;
  --muted: #5e6168;
  --line: #d9d7d1;
  --accent: #1f5f8b;
  --on-accent: #ffffff;
  --danger: #b3261e;
  --warn: #8a5a00;
  --focus: #1f5f8b;
  --tint: #ebe9e4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141518;
    --surface: #1d1f24;
    --text: #e8e6e1;
    --muted: #9a9ea6;
    --line: #34373d;
    --accent: #7cb7e6;
    --on-accent: #0b1a26;
    --danger: #ff8a80;
    --warn: #e0b05a;
    --focus: #7cb7e6;
    --tint: #23262b;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--fs-body)/var(--lh) system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* shell */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: var(--bg); border-top: 1px solid var(--line);
}
.nav a {
  flex: 1; min-height: var(--tap); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none; color: var(--muted); font-size: var(--fs-meta); position: relative;
}
.nav a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 25%; right: 25%; height: 2px; background: var(--accent); }
.nav .count { position: absolute; top: 4px; margin-left: 22px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 0.6875rem; line-height: 18px; text-align: center; font-weight: 600; }
.main { flex: 1; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--s4)); min-width: 0; }

.bar { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); position: sticky; top: 0; background: var(--bg); z-index: 5; min-height: 56px; }
.bar h1 { font-size: var(--fs-screen); line-height: 1.2; font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back { min-width: var(--tap); min-height: var(--tap); margin-left: calc(var(--s2) * -1); display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--accent); cursor: pointer; text-decoration: none; }
.back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 900px) {
  .app { flex-direction: row; }
  .nav { position: sticky; top: 0; height: 100dvh; width: var(--rail); flex: none; flex-direction: column; justify-content: flex-start; padding: var(--s5) var(--s3); gap: var(--s1); border-top: 0; border-right: 1px solid var(--line); }
  .nav a { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--s3); padding: 0 var(--s3); font-size: var(--fs-body); border-radius: var(--radius); }
  .nav a[aria-current="page"] { background: var(--tint); }
  .nav a[aria-current="page"]::before { display: none; }
  .nav .count { position: static; margin: 0 0 0 auto; }
  .main { padding-bottom: var(--s5); height: 100dvh; overflow: auto; }
}

/* controls */
.btn {
  min-height: var(--tap); padding: 0 var(--s4); border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; font-weight: 600; transition: background var(--dur);
}
.btn:hover { background: var(--tint); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.quiet { border-color: transparent; background: transparent; color: var(--accent); }
.btn[disabled] { opacity: 0.55; cursor: default; }
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field label { font-size: var(--fs-meta); color: var(--muted); }
input[type=text], input[type=time], input[type=number], select, textarea {
  min-height: var(--tap); padding: var(--s2) var(--s3); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); width: 100%;
}
textarea { resize: none; }

/* segmented */
.seg { display: flex; margin: 0 var(--s4) var(--s2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg button { flex: 1; min-height: var(--tap); background: none; border: 0; border-right: 1px solid var(--line); cursor: pointer; color: var(--muted); font-size: var(--fs-meta); padding: 0 var(--s1); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--tint); color: var(--text); font-weight: 650; }
.seg .n { color: var(--muted); font-weight: 400; margin-left: var(--s1); }

/* lists: hairlines, no cards */
.list { list-style: none; margin: 0; padding: 0; }
.row { display: block; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); text-decoration: none; color: inherit; min-height: var(--tap); cursor: pointer; }
.list > li:last-child .row { border-bottom: 1px solid var(--line); }
.row:hover { background: var(--tint); }
.row[aria-current="true"] { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.row .t { font-size: var(--fs-title); font-weight: 600; line-height: 1.3; }
.row .m { color: var(--muted); font-size: var(--fs-meta); margin-top: var(--s1); }
.row .m.next { color: var(--text); font-size: var(--fs-body); }
.row .m .over { color: var(--danger); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); align-items: center; }
.chip { font-size: var(--fs-meta); padding: 1px var(--s2); border: 1px solid var(--line); border-radius: 4px; color: var(--muted); white-space: nowrap; }
.chip.ball { color: var(--text); border-color: var(--muted); }
.chip.ball.nick { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.chip.warn { color: var(--warn); border-color: var(--warn); }
.chip.bad { color: var(--danger); border-color: var(--danger); font-weight: 600; }
.row.remembered { border-left: 3px dashed var(--muted); padding-left: calc(var(--s4) - 3px); }
.chip.notsched { border-style: dashed; border-color: var(--warn); color: var(--warn); font-weight: 600; }
.empty { padding: var(--s6) var(--s4); color: var(--muted); }
.empty strong { display: block; color: var(--text); margin-bottom: var(--s1); }
.section-h { padding: var(--s4) var(--s4) var(--s2); font-size: var(--fs-meta); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.legend { margin: 0 var(--s4) var(--s2); color: var(--muted); font-size: var(--fs-meta); }

/* split layout */
.split { display: block; }
.split .pane-detail { display: none; }
.split.has-detail .pane-list { display: none; }
.split.has-detail .pane-detail { display: block; }
@media (min-width: 900px) {
  .split { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; height: 100%; }
  .split .pane-list, .split.has-detail .pane-list { display: block; overflow: auto; border-right: 1px solid var(--line); height: 100dvh; }
  .split .pane-detail, .split.has-detail .pane-detail { display: block; overflow: auto; height: 100dvh; }
  .split .pane-detail .back { display: none; }
  .split .pane-list .bar, .split .pane-detail .bar { position: sticky; }
  .main.tab-tasks { overflow: hidden; }
}

/* detail */
.detail { padding: 0 var(--s4) var(--s5); max-width: 720px; }
.detail h2 { font-size: var(--fs-screen); line-height: 1.25; font-weight: 650; }
.detail .chips { margin-bottom: var(--s3); }
.kv { margin-top: var(--s4); }
.kv h3 { font-size: var(--fs-meta); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: var(--s1); }
.kv p, .kv li { white-space: pre-wrap; }
.kv ul { margin: 0; padding-left: var(--s4); }
.kv li { margin-bottom: var(--s1); }
.times { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4); margin-top: var(--s4); font-size: var(--fs-body); }
.times dt { color: var(--muted); }
.times dd { margin: 0; }
.ev { list-style: none; padding: 0 !important; }
.ev li { border-left: 2px solid var(--line); padding-left: var(--s3); }
.ev time { display: block; color: var(--muted); font-size: var(--fs-meta); }

/* approval */
.approval { border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--s4); margin: var(--s4) 0; background: var(--surface); }
.list-wrap .approval { margin: var(--s2) var(--s4) var(--s3); }
.approval.t2 { border-width: 2px; }
.approval header { display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; margin-bottom: var(--s2); }
.approval header strong { font-size: var(--fs-title); }
.approval .prompt { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-meta); background: var(--tint); padding: var(--s3); border-radius: var(--radius); overflow-wrap: anywhere; margin: var(--s2) 0 var(--s3); }
.approval .acts { display: flex; gap: var(--s3); }
.approval .acts .btn { flex: 1; }
.approval .err { color: var(--danger); margin-top: var(--s2); font-size: var(--fs-meta); }
.approval .done { color: var(--muted); font-weight: 600; }

/* board */
.filters { display: flex; gap: var(--s2); padding: 0 var(--s4) var(--s3); overflow-x: auto; }
.filters button { flex: none; min-height: var(--tap); padding: 0 var(--s3); background: none; border: 1px solid var(--line); border-radius: 22px; cursor: pointer; color: var(--muted); }
.filters button[aria-pressed="true"] { color: var(--text); background: var(--tint); border-color: var(--muted); font-weight: 600; }
.board { display: grid; grid-template-columns: 1fr; gap: var(--s4); padding: 0 var(--s4); }
@media (min-width: 900px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; } }
.col h2 { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding-bottom: var(--s2); border-bottom: 2px solid var(--line); font-weight: 600; }
.col.over h2 { border-color: var(--accent); }
.col .drop { min-height: 64px; }
.card { padding: var(--s3) 0; border-bottom: 1px solid var(--line); display: flex; gap: var(--s2); align-items: flex-start; }
.card .body { flex: 1; min-width: 0; }
.card .t { font-weight: 600; }
.card .m { color: var(--muted); font-size: var(--fs-meta); }
.card[draggable="true"] { cursor: grab; }
.card.dragging { opacity: 0.4; }
.move { position: relative; flex: none; }
.move select { width: auto; min-height: var(--tap); padding: 0 var(--s2); font-size: var(--fs-meta); color: var(--muted); }
@media (min-width: 900px) { .move { display: none; } }

/* rooms */
.chat { display: flex; flex-direction: column; height: calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .chat { height: 100dvh; } }
.presence { padding: 0 var(--s4) var(--s2); color: var(--muted); font-size: var(--fs-meta); min-height: 24px; }
.presence.working { color: var(--accent); }
.msgs { flex: 1; overflow-y: auto; padding: var(--s2) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.msg { max-width: 640px; }
.msg .who { font-size: var(--fs-meta); color: var(--muted); display: flex; gap: var(--s2); }
.msg .who b { color: var(--text); }
.msg .txt { overflow-wrap: anywhere; }
.msg .txt p { margin: 0 0 var(--s2); }
.msg .txt p:last-child { margin: 0; }
.msg .txt pre { background: var(--tint); padding: var(--s3); border-radius: var(--radius); overflow-x: auto; font-size: var(--fs-meta); margin: var(--s1) 0; }
.msg .txt code { background: var(--tint); padding: 0 4px; border-radius: 4px; font-size: 0.9em; }
.msg .txt pre code { background: none; padding: 0; }
.msg .txt ul { margin: 0 0 var(--s2); padding-left: var(--s5); }
.msg .txt .mention { color: var(--accent); font-weight: 600; }
.msg.mine { align-self: flex-end; }
.msg.mine .txt { background: var(--tint); padding: var(--s2) var(--s3); border-radius: var(--radius); }
.msg.mine .who { justify-content: flex-end; }
.msg.failed .txt { border: 1px solid var(--danger); background: transparent; }
.status { font-size: var(--fs-meta); }
.status.failed { color: var(--danger); font-weight: 700; }
.retry { margin-top: var(--s1); }
.composer { border-top: 1px solid var(--line); padding: var(--s2) var(--s4); display: flex; gap: var(--s2); position: relative; background: var(--bg); align-items: flex-end; }
.composer textarea { flex: 1; max-height: 160px; }
.ac { position: absolute; bottom: 100%; left: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 160px; z-index: 6; overflow: hidden; }
.ac button { display: block; width: 100%; min-height: var(--tap); text-align: left; padding: 0 var(--s3); background: none; border: 0; cursor: pointer; }
.ac button[aria-selected="true"], .ac button:hover { background: var(--tint); }
.rooms-split { display: block; }
.rooms-split.has-detail .pane-list { display: none; }
.rooms-split .pane-detail { display: none; }
.rooms-split.has-detail .pane-detail { display: block; }
@media (min-width: 900px) {
  .rooms-split { display: grid; grid-template-columns: 300px 1fr; height: 100dvh; }
  .rooms-split .pane-list, .rooms-split.has-detail .pane-list { display: block; overflow: auto; border-right: 1px solid var(--line); }
  .rooms-split .pane-detail, .rooms-split.has-detail .pane-detail { display: block; }
  .rooms-split .back { display: none; }
}
.unread { background: var(--accent); color: var(--on-accent); border-radius: 9px; padding: 0 6px; font-size: 0.6875rem; font-weight: 700; margin-left: var(--s2); }
.row.flex { display: flex; align-items: center; gap: var(--s2); }
.row.flex .grow { flex: 1; min-width: 0; }

/* settings */
.form { padding: 0 var(--s4) var(--s5); max-width: 560px; display: flex; flex-direction: column; gap: var(--s4); }
.form .pair { display: flex; gap: var(--s3); align-items: center; }
.form .pair > * { flex: 1; }
.hint { color: var(--muted); font-size: var(--fs-meta); }
.devices { list-style: none; margin: 0; padding: 0; }
.devices li { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.saved { color: var(--muted); font-size: var(--fs-meta); min-height: 20px; }

/* login */
.login { max-width: 360px; margin: 0 auto; padding: 20vh var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.login h1 { font-size: var(--fs-screen); }
.err-line { color: var(--danger); min-height: 20px; }
.toast { position: fixed; left: var(--s4); right: var(--s4); bottom: calc(var(--nav-h) + var(--s4) + env(safe-area-inset-bottom)); background: var(--text); color: var(--bg); padding: var(--s3) var(--s4); border-radius: var(--radius); z-index: 20; max-width: 480px; margin: 0 auto; }
.offline { background: var(--warn); color: var(--bg); text-align: center; padding: var(--s1); font-size: var(--fs-meta); }

.main.tab-rooms { padding-bottom: 0; }
.rooms-split .pane-list { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .rooms-split .pane-list { padding-bottom: 0; } }

.sysnote { align-self: center; max-width: 560px; text-align: center; color: var(--muted); font-size: var(--fs-meta); border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); padding: var(--s1) var(--s3); }
.sysnote.breaker { color: var(--warn); border-color: var(--warn); border-style: solid; font-weight: 600; }
.hint code { font-family: ui-monospace, Menlo, monospace; }
.msg .who b { text-transform: capitalize; }

/* checkbox: 44px hit area, drawn by us so the visible box matches the target */
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: var(--tap); height: var(--tap); min-height: var(--tap); margin: 0; flex: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; display: inline-grid; place-content: center; }
input[type=checkbox]::after { content: ""; width: 14px; height: 8px; border-left: 3px solid var(--on-accent); border-bottom: 3px solid var(--on-accent); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::after { opacity: 1; }
.form .pair > input[type=checkbox] { flex: none; }

.approval .warnmsg { color: var(--warn); }