/* The Seats page (spec 2026-10-02 §5.6). The colours are claude-manager's PWA
   tokens (web/src/styles/tokens.css in that repo), copied, not imported: hue is
   spent on state, never on chrome. Dark by default; a light set follows the
   system. */
:root {
  color-scheme: dark;
  --bg: #14161a; --surface: #1b1e24; --surface-raised: #23272f; --border: #ffffff1a;
  --fg: #e6e8ea; --fg-dim: #9aa0a8; --fg-faint: #6b7178;
  --action: #8ab4f8; --action-fg: #10141a; --focus: #8ab4f8;
  --ok: #5bc98d; --warn: #e0a92c; --hot: #e5534b;
  --ok-soft: #5bc98d29; --warn-soft: #e0a92c29; --hot-soft: #e5534b29;
  --scrim: #000000a6; --shadow: #00000073;
  --text-lg: 1.0625rem; --text-md: 0.9375rem; --text-sm: 0.8125rem; --text-xs: 0.75rem;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --radius: 8px; --radius-pill: 999px;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f6f7f9; --surface: #ffffff; --surface-raised: #eef0f3; --border: #0000001a;
    --fg: #1b1e24; --fg-dim: #5b616a; --fg-faint: #8a9099;
    --action: #1a62d6; --action-fg: #ffffff; --focus: #1a62d6;
    --ok: #1f8f55; --warn: #a8740b; --hot: #c4362f;
    --ok-soft: #1f8f5522; --warn-soft: #a8740b22; --hot-soft: #c4362f1f;
    --scrim: #00000059; --shadow: #00000033;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--fg);
  font: var(--text-md)/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cell { unicode-bidi: isolate; }
.mono { font-family: var(--mono); }

.screen { max-width: 640px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 1; background: var(--surface);
  border-bottom: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); }
.top h1 { margin: 0; font-size: var(--text-lg); }
.title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.who { color: var(--fg-dim); font-size: var(--text-xs); }
.banners { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-2); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--fg-dim);
  background: var(--surface-raised); border-radius: var(--radius-pill); padding: 2px var(--sp-2); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); }
.pill.ok i { background: var(--ok); }
.pill.warn { color: var(--warn); background: var(--warn-soft); }
.pill.warn i { background: var(--warn); }
.pill.hot { color: var(--hot); background: var(--hot-soft); }
.pill.hot i { background: var(--hot); }

.fresh { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 6px var(--sp-4);
  font-size: var(--text-xs); color: var(--fg-dim); border-bottom: 1px solid var(--border); }
.list-error { margin: 0; padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm);
  color: var(--hot); background: var(--hot-soft); }
.rows, .events, .pick { list-style: none; margin: 0; padding: 0; }
.row { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4); border: 0; border-bottom: 1px solid var(--border);
  background: transparent; text-align: left; }
button.row { cursor: pointer; }
button.row:hover, button.row:active { background: var(--surface); }
.member { display: flex; flex-direction: column; min-width: 0; }
.email { font-size: var(--text-sm); overflow-wrap: anywhere; }
.meta { font-size: var(--text-xs); color: var(--fg-dim); }
.tier { flex: none; font-size: var(--text-xs); padding: 2px var(--sp-2); border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-raised); }
.t-unassigned { background: transparent; color: var(--fg-faint); }
.t-unknown { color: var(--hot); background: var(--hot-soft); border-color: transparent; }
.counts { margin: 0; padding: var(--sp-3) var(--sp-4); font-size: var(--text-xs); color: var(--fg-dim); }

.foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) var(--sp-4); font-size: var(--text-xs); color: var(--fg-faint); }
.link { background: transparent; border: 0; padding: 0; color: var(--fg-dim); text-decoration: underline; }
.tabs { position: sticky; bottom: 0; display: flex; background: var(--surface);
  border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.tabs button { flex: 1; padding: var(--sp-3) 0; border: 0; background: transparent;
  color: var(--fg-dim); font-size: var(--text-sm); }
.tabs button.on { color: var(--action); font-weight: 600; box-shadow: inset 0 2px 0 var(--action); }

.panel { position: fixed; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center;
  background: var(--scrim); }
.panel-body { width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; display: flex;
  flex-direction: column; gap: var(--sp-2); background: var(--surface); border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 18px var(--shadow); padding: var(--sp-4);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); }
.panel-body h2 { margin: 0; font-size: var(--text-md); overflow-wrap: anywhere; }
.sub { margin: 0; font-size: var(--text-xs); color: var(--fg-dim); }
.sub.warn { color: var(--warn); }
.primary { width: 100%; padding: 10px; border: 0; border-radius: var(--radius);
  background: var(--action); color: var(--action-fg); font-weight: 600; }
.ghost { width: 100%; padding: 10px; border: 0; background: transparent; color: var(--fg-dim); }
.choice { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left;
  padding: 10px var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-raised); }
.pick { display: flex; flex-direction: column; gap: var(--sp-2); }
.plan { font-family: var(--mono); font-size: var(--text-xs); white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2); }
.dim { opacity: 0.7; }
.state { margin: 0; font-weight: 600; }
.verdict { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); padding: var(--sp-3); }
.v-done { border-color: var(--ok); background: var(--ok-soft); }
.v-unknown { border-color: var(--hot); background: var(--hot-soft); }
.verdict-title { margin: 0 0 var(--sp-1); font-weight: 700; }
.line { margin: 0; font-family: var(--mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.line.err { color: var(--fg-dim); }

.signin { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); }
.signin label { font-weight: 600; }
.signin input { padding: 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--fg); font-family: var(--mono); }
.hint { margin: 0; font-size: var(--text-xs); color: var(--fg-dim); }
.error { margin: 0; color: var(--hot); font-size: var(--text-sm); }

.toolbar { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border); font-size: var(--text-xs); color: var(--fg-dim); }
.toolbar button { padding: 4px var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-raised); }
.event { padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); }
.l1 { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--text-sm); }
.t { color: var(--fg-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.l2 { margin-top: 2px; font-family: var(--mono); font-size: var(--text-xs); color: var(--fg-dim); overflow-wrap: anywhere; }
.hot { color: var(--hot); }
.tag { flex: none; font-size: var(--text-xs); padding: 1px 6px; border-radius: 5px;
  background: var(--surface-raised); color: var(--fg-dim); }
.s-ok { background: var(--ok-soft); color: var(--ok); }
.s-hot { background: var(--hot-soft); color: var(--hot); }