:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e2e5ea;
  --text: #1b1f24;
  --muted: #6b7280;
  --accent: #2f6fed;
  --accent-soft: rgba(47, 111, 237, 0.12);
  --accent-text: #ffffff;
  --ok: #16a34a;
  --ok-soft: rgba(22, 163, 74, 0.12);
  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, 0.13);
  --danger: #dc2626;
  --focus: #9333ea;
  --focus-soft: rgba(147, 51, 234, 0.12);
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  --pop-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  --gutter: 16px;
  --nav-h: 0px;            /* height of the phone bottom navigation (0 on larger screens) */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #171a20;
    --surface-2: #1f232b;
    --border: #2a2f39;
    --text: #e8eaee;
    --muted: #9aa1ad;
    --accent: #5b8cff;
    --accent-soft: rgba(91, 140, 255, 0.18);
    --ok: #22c55e;
    --ok-soft: rgba(34, 197, 94, 0.15);
    --warn: #f59e0b;
    --warn-soft: rgba(245, 158, 11, 0.16);
    --danger: #f87171;
    --focus: #c084fc;
    --focus-soft: rgba(192, 132, 252, 0.18);
    --shadow: none;
    --pop-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }

/* ---------- Buttons & inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); cursor: pointer; white-space: nowrap; text-decoration: none; color: inherit;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { color: var(--danger); }
.btn.danger-solid { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn.danger-solid:hover { background: #b91c1c; }
textarea.input { height: auto; padding: 8px 10px; resize: none; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.input {
  height: 36px; padding: 0 10px; width: 100%; min-width: 0;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
select.input { appearance: auto; }
.input:focus, .btn:focus-visible, .ch button:focus-visible, .seg button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
label.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }

/* ---------- Auth screens ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.auth form {
  width: min(360px, 100%); display: grid; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px; box-shadow: var(--shadow);
}
.auth h1 { font-size: 20px; }
.auth .btn { height: 40px; }
.error { color: var(--danger); font-size: 13px; min-height: 1em; }

/* ---------- App shell ---------- */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding: 8px var(--gutter); padding-top: calc(8px + env(safe-area-inset-top));
  /* On very wide screens keep the bar's content lined up with the page content (max 1600px, centred) */
  padding-inline: max(var(--gutter), calc((100% - 1600px) / 2 + var(--gutter)));
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; display: flex; align-items: center; gap: 8px; letter-spacing: .3px; white-space: nowrap; }
.brand i {
  width: 26px; height: 26px; border-radius: 7px; background: var(--accent-soft); flex: none;
  display: inline-grid; place-items: center; font-style: normal; font-size: 16px; line-height: 1; letter-spacing: 0;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.brand.big { font-size: 18px; gap: 10px; }
.brand.big i { width: 40px; height: 40px; border-radius: 10px; font-size: 24px; }
.brand.big span { display: grid; line-height: 1.15; }
.brand.big small { font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }

.seg { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 3px; gap: 2px; max-width: 100%; }
.seg button {
  border: 0; background: transparent; padding: 5px 11px; border-radius: 7px; cursor: pointer; min-width: 0;
  color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }
.seg button:disabled { cursor: not-allowed; opacity: .55; }
.seg .sub { font-size: 11px; color: var(--muted); font-weight: 400; }
.seg .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Model tabs: as wide as their names when there is room, and they shrink (ending in …) as the window
   narrows. Everything else in the header keeps its size, so the tabs are what gives way. */
#models { flex: 0 1 auto; min-width: 0; }
#models button { flex: 0 1 auto; padding: 7px 16px; }
#models .sub, #models .lk, #models .dot { flex: none; }
.top > .brand, .top > #views, .top > .live, .top > .menu { flex: none; }
@media (min-width: 1001px) { .top { flex-wrap: nowrap; } }
/* On medium windows the question range gives way first, so the name itself stays readable. */
@media (min-width: 1001px) and (max-width: 1300px) { #models .sub { display: none; } }
.seg.scroll { overflow-x: auto; scrollbar-width: none; }
.seg.scroll::-webkit-scrollbar { display: none; }
.seg.scroll button { flex: none; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; flex: none; }
.spacer { flex: 1; }
.badge {
  font-size: 11px; padding: 1px 7px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.live { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.live .dot { background: var(--warn); }
.live.on .dot { background: var(--ok); }

/* User menu */
.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 8px 0 4px; border-radius: 99px; border: 1px solid var(--border); user-select: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--surface-2); }
.menu .uname { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.menu .caret { color: var(--muted); font-size: 10px; }
.av {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface-2); font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.menu .av { background: var(--accent); color: #fff; }
.menu .pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 12; min-width: 190px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--pop-shadow);
  padding: 4px; display: grid;
}
.menu .pop .me { padding: 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; overflow-wrap: anywhere; }
.menu .pop button {
  text-align: left; border: 0; background: none; padding: 10px; border-radius: 6px; cursor: pointer;
}
.menu .pop button:hover { background: var(--surface-2); }

main {
  padding: 12px var(--gutter) calc(24px + var(--nav-h));
  max-width: 1600px; margin: 0 auto;
}
.bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; min-height: 34px; }
.bar h2 { overflow-wrap: anywhere; }
.bar .actions { display: flex; gap: 8px; }
/* A page can show several merged models, one section each */
.msec + .msec { margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--border); }
.bar .legend { margin: 0; }
.merge { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.merge .input { max-width: 420px; }
.progress { width: 140px; height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; flex: none; }
.progress > div { height: 100%; background: var(--accent); transition: width .2s; }
.progress.done > div { background: var(--ok); }

/* ---------- Answer sheet ----------
   --n  = choices per question (set inline)
   --bw = room reserved per letter button; bigger on touch screens so buttons are easy to hit.
   Questions flow down each column like a paper sheet; the browser fits as many columns as there is room for. */
.sheet {
  --bw: 31px;
  columns: calc(52px + var(--n, 5) * var(--bw)); column-gap: 18px; column-rule: 1px solid var(--border);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; box-shadow: var(--shadow);
}
.qrow { display: flex; align-items: center; gap: 8px; padding: 2px 0; break-inside: avoid; border-radius: 8px; }
.qrow.flash { animation: flash 1.4s ease-out; }

/* "Show unanswered": answered questions fade back, the ones left are marked in orange.
   Rows keep their place, so nothing jumps while you answer. */
.sheet.find .qrow { transition: opacity .2s; }
.sheet.find .qrow.filled { opacity: .22; }
.sheet.find .qrow:not(.filled) { background: var(--warn-soft); box-shadow: 0 0 0 3px var(--warn-soft); }
.sheet.find .qrow:not(.filled) .qn { color: var(--warn); font-weight: 700; }
.sheet.find .qrow:not(.filled) .ch button { border-color: var(--warn); }
.left {
  font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 99px; white-space: nowrap;
  background: var(--warn-soft); color: var(--warn);
}
.left.zero { background: var(--ok-soft); color: var(--ok); }
.btn.active { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
@keyframes flash { 0%, 40% { background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); } 100% { background: transparent; box-shadow: 0 0 0 4px transparent; } }
.qn { width: 30px; flex: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.qrow.filled .qn { color: var(--text); font-weight: 600; }
.ch { display: flex; gap: 3px; flex: 1; min-width: 0; }
.ch button {
  flex: 1; min-width: 0; max-width: 44px; height: 28px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-weight: 600; font-size: 12px; color: var(--muted);
  padding: 0;
}
.ch button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
@media (hover: hover) {
  .ch button:not(.on):not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
}
/* Locked by the admin: answers stay readable but cannot be changed */
.sheet.locked .ch button { cursor: not-allowed; }
.sheet.locked .ch button:not(.on) { opacity: .45; }
.sheet.locked .ch button.on { background: var(--muted); border-color: var(--muted); }
.notice {
  display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; padding: 10px 12px;
  background: var(--warn-soft); border: 1px solid var(--warn); border-radius: var(--radius);
}
.seg .lk { font-size: 11px; }
@media (pointer: coarse) {
  .sheet { --bw: 44px; padding: 8px 10px; }
  .qrow { padding: 3px 0; }
  .ch { gap: 4px; }
  .ch button { height: 40px; max-width: none; font-size: 14px; border-radius: 8px; }
  .btn { height: 38px; }
  .btn.sm { height: 34px; }
  .input { height: 42px; font-size: 16px; }   /* 16px stops iOS zooming into fields */
  .seg button { padding: 8px 12px; }
}

/* ---------- Board ---------- */
.people { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.person {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; flex: none;
  border: 1px solid var(--border); border-radius: 99px; background: var(--surface); cursor: pointer;
  font-size: 13px; white-space: nowrap;
}
.person .num { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.person.done .num { color: var(--ok); font-weight: 600; }
.person.me .av { background: var(--accent); color: #fff; }
.person.focus { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus) inset; }
.person.focus .av { background: var(--focus); color: #fff; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin-bottom: 8px; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 2px solid transparent; flex: none; }
.sw.agree { border-color: var(--ok); }
.sw.split { border-color: var(--warn); }
.sw.minor { background: var(--warn-soft); border: 1px solid var(--warn); }
.sw.mine { background: var(--accent-soft); border: 1px solid var(--accent); }
.sw.foc { background: var(--focus-soft); border: 1px solid var(--focus); }

/* Names table: one row per question, one column per person.
   Questions are split into --b side-by-side blocks so a whole model fits on screen. */
.blocks { display: grid; grid-template-columns: repeat(var(--b, 1), minmax(0, 1fr)); gap: 12px; align-items: start; }
.blocks.wide { overflow-x: auto; }
.blocks.wide .nt { min-width: max-content; }
.nt {
  width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.nt th, .nt td {
  padding: 0 2px; height: 26px; text-align: center; border-top: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.nt tbody tr:first-child > * { border-top: 0; }
.nt thead th {
  position: sticky; top: var(--top-h, 0px); z-index: 2; height: 30px; cursor: pointer;
  background: var(--surface); border-top: 0; border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.blocks.wide thead th { position: static; }
.nt thead th:first-child { border-top-left-radius: var(--radius); cursor: default; }
.nt thead th:last-child { border-top-right-radius: var(--radius); }
.nt tbody tr:last-child > :first-child { border-bottom-left-radius: var(--radius); }
.nt tbody tr:last-child > :last-child { border-bottom-right-radius: var(--radius); }
.nt .q { width: 38px; color: var(--muted); font-size: 12px; font-weight: 500; }
.nt tr.agree .q { box-shadow: inset 3px 0 0 var(--ok); color: var(--text); }
.nt tr.split .q { box-shadow: inset 3px 0 0 var(--warn); color: var(--text); font-weight: 700; }
.nt td { font-weight: 600; font-size: 12px; letter-spacing: .3px; }
.nt td.none { color: var(--muted); font-weight: 400; opacity: .5; }
/* Column tints are layered over the surface colour so sticky headers stay opaque. */
.nt .me { background: linear-gradient(var(--accent-soft), var(--accent-soft)) var(--surface); }
.nt thead th.me { color: var(--accent); }
.nt .foc { background: linear-gradient(var(--focus-soft), var(--focus-soft)) var(--surface); }
.nt thead th.foc { color: var(--focus); }
.nt td.minor { background: var(--warn-soft); color: var(--warn); }
.nt td.diff { box-shadow: inset 0 0 0 2px var(--focus); }
.nt tr.dim { opacity: .22; }
@media (pointer: coarse) {
  .nt th, .nt td { height: 30px; }
  .nt thead th { height: 34px; }
}

.empty-state {
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 40px 20px; text-align: center; color: var(--muted); margin-bottom: 10px;
}

/* ---------- Switch ---------- */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 13px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  width: 34px; height: 20px; border-radius: 99px; background: var(--border); position: relative; transition: background .15s; flex: none;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Settings ---------- */
/* Two equal columns that always fill the width (the two half-width panels sit side by side and
   stretch to the same height); a single column once they would get too narrow. */
.settings { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.settings > .panel { align-content: start; }
@media (max-width: 860px) { .settings { grid-template-columns: minmax(0, 1fr); } }
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); display: grid; gap: 10px; min-width: 0;
}
.panel.wide { grid-column: 1 / -1; }
.panel.first { order: -1; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > .input { flex: 1; min-width: 140px; }

/* Models editor: a table-like grid on wide screens, one block per model on phones */
.mgrid { display: grid; gap: 8px; }
.mhead, .mrow {
  display: grid; gap: 10px; align-items: center;
  grid-template-columns: minmax(140px, 2fr) minmax(70px, 1fr) minmax(70px, 1fr) minmax(110px, 1.2fr) minmax(130px, 1.3fr) 96px;
}
.mhead { font-size: 12px; color: var(--muted); }
.mf { display: grid; gap: 3px; min-width: 0; }
.mf > span { display: none; font-size: 12px; color: var(--muted); }
.msum { white-space: nowrap; }
@media (max-width: 860px) {
  /* One block per model: name on its own line, the four settings below it, each with its own
     label (the shared header row no longer fits). */
  .mhead { display: none; }
  .mrow { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 10px; border-top: 1px solid var(--border); }
  .mhead + .mrow { border-top: 0; padding-top: 0; }
  .mf > span { display: block; }
  .mf.name { grid-column: 1 / -1; }
  .msum { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .mrow { grid-template-columns: 1fr 1fr; } }

.list { display: grid; }
.list .item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.list .item:first-child { border-top: 0; }
.link-box {
  flex: 1; min-width: 160px; font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  background: var(--surface-2); padding: 6px 8px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 500; font-size: 12px; border-top: 0; }
td.actions { text-align: right; }
.table-wrap { overflow-x: auto; }
.mini { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-size: 12px; }
.mini .progress { width: 50px; height: 5px; }
.pill { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }

/* ---------- Modal & toast ---------- */
dialog {
  border: 1px solid var(--border); border-radius: 14px; padding: 20px; width: min(380px, calc(100% - 24px));
  background: var(--surface); color: var(--text); max-height: calc(100dvh - 24px); overflow: auto;
}
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog form { display: grid; gap: 12px; }
.cred {
  background: var(--surface-2); border-radius: 8px; padding: 10px 12px;
  font-family: ui-monospace, Consolas, monospace; display: grid; gap: 4px; user-select: all; overflow-wrap: anywhere;
}
#toast {
  position: fixed; left: 50%; bottom: calc(20px + var(--nav-h)); transform: translateX(-50%) translateY(20px);
  background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: all .2s; z-index: 20; max-width: calc(100% - 24px); text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =====================================================================
   Tablets and small laptops
   ===================================================================== */
@media (max-width: 1000px) {
  .hint { display: none !important; }
  /* Not enough room beside the other controls: the model tabs get their own full-width row,
     each tab sized in proportion to its name. */
  #models { order: 5; flex: 1 1 100%; display: flex; }
  #models button { flex: 1 1 auto; }
}

/* =====================================================================
   Phones: model tabs span the width, page navigation moves to a bottom bar
   ===================================================================== */
@media (max-width: 700px) {
  :root { --gutter: 10px; --nav-h: calc(58px + env(safe-area-inset-bottom)); }

  .top { gap: 8px; }
  .top .badge, .seg .sub { display: none; }
  .live.on .txt { display: none; }
  .menu .uname { max-width: 90px; }

  #models button { padding: 8px 8px; }

  #views {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; max-width: none;
    border-radius: 0; background: var(--surface); border-top: 1px solid var(--border);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 6px;
  }
  #views button { flex: 1 1 0; height: 46px; font-size: 13px; border-radius: 10px; }
  #views button.on { background: var(--accent-soft); color: var(--accent); box-shadow: none; }

  .bar { gap: 8px; }
  .bar h2 { flex: 1 1 100%; }
  .bar .progress { flex: 1; width: auto; }
  .bar .spacer { display: none; }
  .bar .actions { flex: 1 1 100%; flex-wrap: wrap; }
  .bar .actions .btn { flex: 1 1 auto; }
  .bar .seg, .bar .legend { flex: 1 1 100%; }

  .people { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .people::-webkit-scrollbar { display: none; }
  .blocks { gap: 8px; }
  .nt .q { width: 32px; }

  /* Settings */
  .panel { padding: 12px; }
  .list .item .link-box { flex: 1 1 100%; order: 5; }

  /* Member table becomes one block per member */
  .members table, .members tbody { display: block; }
  .members thead { display: none; }
  .members tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; padding: 12px 0; border-top: 1px solid var(--border); }
  .members tr:first-child { border-top: 0; padding-top: 0; }
  .members td { border: 0; padding: 0; white-space: normal; min-width: 0; }
  .members td[data-label] { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .members td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .members td.actions { grid-column: 1 / -1; display: flex; gap: 8px; }
  .members td.actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}