/* Tag Out commons. Style: achromatic ledger, no-sidebar shell, soft corners (cards 18, controls 12) by request.
   Face: a stone ground (campus library sandstone), IBM Plex Sans with tabular figures, one data hue (#1d5fbf)
   that appears only on trades. Colour on chrome: none. The pets carry the colour.
   Grid (1440): canvas 1440 - 2 x 24 = 1392; main row 8fr + 5fr with a 16px gap. */

:root {
  --ground: #f3f2ef;
  --surface: #ffffff;
  --raised: #f7f6f4;
  --active: #ebe9e5;
  --border: #e4e2dd;
  --rule: #efeeea;
  --control: #cfccc6;
  --text: #121212;
  --muted: #5d5b57;
  --faint: #6b6965;
  --primary: #121212;
  --hue: #1d5fbf;
  --hue-soft: #e8eef8;
  --positive: #24753a;
  --negative: #c4242a;
  --neg-soft: #fbeceb;
  --warning: #92400e;
  --pill-pos-bg: #dcfae5; --pill-pos-ink: #04250e;
  --pill-neg-bg: #ffedea; --pill-neg-ink: #831c1e;
  --radius-card: 18px; --radius-control: 12px; --radius-chip: 6px; --radius-stage: 14px;
  --gap: 16px; --pad: 20px; --edge: 24px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font: 400 14px/20px var(--font); font-variant-numeric: tabular-nums;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--hue); outline-offset: 2px; }

/* debug banner: the one loud thing, and only in the judge view */
.debug-banner {
  background: var(--negative); color: #fff; font-weight: 500; padding: 8px var(--edge); font-size: 13px;
}

/* top bar */
.topbar {
  display: flex; align-items: center; gap: 20px; height: 56px; padding: 0 var(--edge);
  background: var(--ground);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
/* the mark: a hand-drawn luggage tag in one ink, slightly wobbly on purpose */
.mark { width: 30px; height: 30px; overflow: visible; }
.mark path, .mark circle, .mgr-mark path, .mgr-mark circle {
  fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.mark path.tag, .mgr-mark path.tag { fill: var(--surface); }
.wordmark { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.scope { color: var(--muted); }
.scope .sep { color: var(--control); margin: 0 4px; }
.tabs { display: flex; gap: 4px; margin-left: 8px; }
.tabs a {
  color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: var(--radius-control);
}
.tabs a:hover { color: var(--text); background: var(--active); }
.tabs a[aria-current="page"] { color: var(--text); background: var(--active); font-weight: 500; }
.live { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--control); }
.live.on .dot { background: var(--positive); }
.live.off .dot { background: var(--negative); }

/* canvas */
.canvas { padding: 8px var(--edge) 40px; }
.titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 12px 0 18px; }
h1 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.finding { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 22px; max-width: 74ch; }
.finding b { color: var(--text); font-weight: 500; }
.actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn {
  height: 36px; padding: 0 14px; border-radius: var(--radius-control); border: 1px solid var(--control);
  background: var(--surface); cursor: pointer; white-space: nowrap; transition: background .12s, transform .06s;
}
.btn:hover { background: var(--raised); }
.btn:active { transform: translateY(1px); }
.btn:disabled { color: var(--faint); cursor: default; background: var(--surface); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: #2b2b2b; }
.btn.primary:disabled { background: #8c8a86; border-color: #8c8a86; }
.btn.danger { border-color: var(--negative); color: var(--negative); }
.btn.danger:hover { background: var(--neg-soft); }

/* KPI strip: one container split by hairlines */
.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: var(--gap);
}
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px var(--pad); }
.kpi + .kpi { border-left: 1px solid var(--border); }
.kpi .label { color: var(--muted); font-size: 13px; }
.kpi .value { font-size: 24px; line-height: 30px; font-weight: 500; }
.kpi .value small { font-size: 15px; color: var(--muted); font-weight: 400; }
.kpi.lead .value { font-size: 32px; line-height: 38px; font-weight: 600; }
.kpi .value.bad { color: var(--negative); }

/* panels */
.grid { display: grid; grid-template-columns: 8fr 5fr; gap: var(--gap); align-items: stretch; }
.grid.lower { grid-template-columns: 7fr 6fr; margin-top: var(--gap); align-items: stretch; }
.sim { margin-top: var(--gap); }
.sim #sim { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 16px var(--pad) var(--pad); min-width: 0;
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
h2 { font-size: 16px; line-height: 22px; font-weight: 600; }
.status { color: var(--muted); text-align: right; }
.status b { color: var(--text); font-weight: 500; }

/* arena */
.commons { display: flex; flex-direction: column; }
.stage { position: relative; flex: 1; min-height: 440px; border-radius: var(--radius-stage); overflow: hidden; background: #f6f4f0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.size { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.size input { width: 120px; accent-color: var(--text); }
.small-btn { height: 32px; padding: 0 12px; }
.panel-head .status { text-align: left; margin-top: 2px; font-size: 13px; }

/* assistant chat: one student's private thread with their mascot */
.assistant { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.assistant-head { padding: 14px var(--pad) 10px; border-bottom: 1px solid var(--rule); }
.who-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 6px; }
.who-tabs button {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 9px 0 2px; border: 0;
  border-radius: 999px; background: transparent; cursor: pointer; color: var(--muted); font-size: 13px;
}
.who-tabs button canvas { width: 24px; height: 26px; }
.who-tabs button:hover { background: var(--raised); color: var(--text); }
.who-tabs button[aria-selected="true"] { background: var(--active); color: var(--text); font-weight: 500; }
.who-tabs button.mgr { padding-left: 10px; }
.assistant .thread { min-height: 0; }
.assistant .compose { padding: 12px var(--pad); }
.assistant .compose input { height: 40px; border-radius: 999px; padding: 0 16px; }
.assistant .compose .btn { height: 40px; border-radius: 999px; }

/* pet gallery */
.pets-dialog {
  width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 64px); border: 1px solid var(--border);
  border-radius: 20px; padding: 20px 24px 24px; background: var(--surface); color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .14);
}
.pets-dialog::backdrop { background: rgba(18, 18, 18, .28); }
.pets-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pets-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.pets-controls label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pets-controls select, .pets-controls input {
  height: 36px; border: 1px solid var(--control); border-radius: var(--radius-control); padding: 0 12px;
  font: inherit; background: var(--surface);
}
.pets-controls input { flex: 1; min-width: 200px; }
.pets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.pet-card {
  display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border);
  border-radius: 16px; background: var(--surface); cursor: pointer; text-align: left; font: inherit;
  transition: background .12s, transform .08s;
}
.pet-card:hover { background: var(--raised); }
.pet-card:active { transform: translateY(1px); }
.pet-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #f6f4f0; border-radius: 12px; }
.pet-card .n { font-weight: 500; font-size: 13px; line-height: 17px; }
.pet-card .c { color: var(--muted); font-size: 12px; }
.pet-card[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.arena-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.arena-key span { display: inline-flex; align-items: center; gap: 6px; }
.k { display: inline-block; width: 22px; height: 0; border-top: 2px solid; }
.k.pick { border-color: #8c8a86; }
.k.ring { border-top-width: 3px; border-color: var(--hue); }
.k.chain { border-color: var(--hue); border-top-style: dashed; }

/* roster board: people down the left, days across */
.board { display: flex; flex-direction: column; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.m { display: inline-block; width: 14px; height: 10px; border-radius: 4px; background: var(--active); }
.m.req { background: var(--surface); border: 1.5px dashed var(--text); }
.m.moved { background: var(--hue); }
.m.covered { background: var(--surface); border: 1.5px solid var(--hue); }
.m.open { background: repeating-linear-gradient(135deg, var(--negative) 0 1.5px, var(--neg-soft) 1.5px 4px); }
.board-grid { display: grid; grid-template-columns: 92px repeat(7, 1fr); row-gap: 6px; column-gap: 4px; flex: 1; align-content: start; }
.board-grid .day { color: var(--muted); font-size: 12px; text-align: center; padding-bottom: 2px; }
.board-grid .who { display: flex; align-items: center; gap: 8px; height: 44px; font-weight: 500; }
.board-grid .who canvas { width: 32px; height: 35px; flex-shrink: 0; }
.board-grid .cell { display: flex; flex-direction: column; gap: 3px; justify-content: center; min-height: 44px; }
.chip {
  display: block; height: 20px; line-height: 20px; border-radius: var(--radius-chip); font-size: 11px; text-align: center;
  background: var(--active); color: var(--text); white-space: nowrap; overflow: hidden;
  transition: background .3s, color .3s;
}
.chip.req { background: var(--surface); outline: 1.5px dashed var(--text); outline-offset: -1.5px; }
.chip.moved { background: var(--hue); color: #fff; }
.chip.covered { background: var(--surface); outline: 1.5px solid var(--hue); outline-offset: -1.5px; color: var(--hue); }
.chip.open { background: repeating-linear-gradient(135deg, var(--negative) 0 1.5px, var(--neg-soft) 1.5px 4px); color: var(--pill-neg-ink); font-weight: 500; }
.board-note { margin-top: 12px; color: var(--muted); font-size: 13px; }

/* phones */
.phones-row { margin-top: calc(var(--gap) * 2); }
.section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.phone {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  display: flex; flex-direction: column; height: 360px; min-width: 0;
}
.phone-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.phone-head canvas { width: 30px; height: 33px; }
.phone-head .who { font-weight: 500; }
.phone-head .sub { color: var(--muted); font-size: 12px; line-height: 16px; }
.phone-head select {
  margin-left: auto; height: 30px; border: 1px solid var(--control); border-radius: var(--radius-control);
  background: var(--surface); font: inherit; font-size: 13px; padding: 0 6px;
}
.thread { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--raised); }
.msg { white-space: pre-line; max-width: 88%; padding: 9px 12px; border-radius: 16px; font-size: 13px; line-height: 18px; background: var(--surface); border: 1px solid var(--rule); align-self: flex-start; }
.msg.me { align-self: flex-end; background: var(--text); color: #fff; border-color: var(--text); }
.msg.reply { color: var(--muted); }
.msg .btns { display: flex; gap: 6px; margin-top: 8px; }
.msg .btns button {
  flex: 1; height: 30px; border-radius: var(--radius-control); border: 1px solid var(--control);
  background: var(--surface); cursor: pointer; font-size: 13px;
}
.msg .btns button:hover { background: var(--active); }
.msg .btns button:disabled { color: var(--faint); cursor: default; background: var(--raised); }
.msg.flash { animation: flash 1.2s ease-out 1; }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--hue-soft); } to { box-shadow: 0 0 0 0 transparent; } }
.compose { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--rule); }
.compose input {
  flex: 1; min-width: 0; height: 32px; border: 1px solid var(--control); border-radius: var(--radius-control);
  padding: 0 10px; font: inherit; font-size: 13px;
}
.compose button { height: 32px; padding: 0 12px; border-radius: var(--radius-control); border: 1px solid var(--control); background: var(--surface); cursor: pointer; }
.empty { color: var(--muted); font-size: 13px; margin: auto 0; text-align: center; }

/* log */
.events { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.events li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 13px; line-height: 18px; }
.events li:first-child { border-top: 0; }
.events time { color: var(--muted); }
.events .ok { color: var(--positive); font-weight: 500; }
.events .bad { color: var(--negative); font-weight: 500; }
.events .tr { color: var(--hue); font-weight: 500; }

/* simulation */
.sim-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px; }
.sim-figs > div { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.sim-figs > div + div { border-left: 1px solid var(--border); }
.sim-figs .label { color: var(--muted); font-size: 13px; }
.sim-figs .value { font-size: 22px; line-height: 28px; font-weight: 500; }
.sim-figs .value small { color: var(--muted); font-size: 13px; font-weight: 400; }
.bars { display: grid; grid-template-columns: 110px 1fr 56px; gap: 8px 10px; align-items: center; font-size: 13px; }
.bars .track { height: 14px; background: var(--rule); border-radius: 999px; position: relative; }
.bars .fill { position: absolute; inset: 0 auto 0 0; background: #8c8a86; border-radius: 999px; }
.bars .fill.hue { background: var(--hue); }
.bars .v { text-align: right; }
.sim-note { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 19px; }
.sim-note a { color: var(--text); }

/* judge */
.judge { margin-top: var(--gap); }
.judge-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: start; }
.limits { width: 100%; border-collapse: collapse; font-size: 13px; }
.limits th { text-align: left; color: var(--muted); font-weight: 400; font-size: 12px; padding: 0 8px 8px 0; }
.limits th.num, .limits td.num { text-align: right; }
.limits td { padding: 8px 8px 8px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.limits td .sub { display: block; color: var(--muted); font-size: 12px; }
.limits .over { color: var(--negative); font-weight: 500; }
.forecast h3, .baseline h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.baseline { margin-top: 24px; }
.baseline .limits { margin-top: 10px; }
.board-note a { color: var(--text); }
.forecast ul { margin: 0; padding: 0; list-style: none; }
.forecast li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 13px; }

/* footer */
.site-foot { padding: 20px var(--edge) 32px; color: var(--muted); font-size: 13px; line-height: 19px; display: grid; gap: 6px; }
.site-foot strong { color: var(--text); font-weight: 500; }
.site-foot a { color: var(--muted); }

/* tablet */
@media (max-width: 1100px) {
  .grid, .grid.lower, .judge-grid { grid-template-columns: 1fr; }
  .assistant { min-height: 520px; }
  .phones { grid-template-columns: repeat(2, 1fr); }
  .scope { display: none; }
}
/* phone */
@media (max-width: 640px) {
  :root { --edge: 16px; --pad: 16px; }
  .topbar { gap: 12px; height: 52px; }
  .tabs a { padding: 6px 8px; }
  .live #liveText { display: none; }
  .titlerow { flex-direction: column; align-items: stretch; }
  .actions { flex-wrap: wrap; }
  .actions .btn { flex: 1; min-height: 44px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--border); }
  .stage { min-height: 440px; }
  .tools { width: 100%; justify-content: space-between; }
  .sim #sim { grid-template-columns: 1fr; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .status { text-align: left; }
  .legend { gap: 8px; }
  .phones { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: 64px repeat(7, 1fr); column-gap: 2px; }
  .board-grid .who span { display: none; }
  .chip { font-size: 9.5px; }
  h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.bars.wide { grid-template-columns: minmax(150px, 46%) 1fr 56px; }
.bars.wide > span:first-child { font-weight: 500; }

/* ---------- role pages: sign in, student, manager, how it works ---------- */
.view[hidden] { display: none !important; }
.who-pill {
  margin-left: auto; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 6px 12px; font: 500 13px/18px var(--font); cursor: pointer; white-space: nowrap;
}
.who-pill:hover { background: var(--active); }
.topbar .live { margin-left: 0; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.people button {
  display: grid; justify-items: center; gap: 6px; padding: 14px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-control); background: var(--surface); cursor: pointer; font: 500 14px/18px var(--font);
}
.people button:hover { background: var(--raised); border-color: var(--control); }
.people button .sub { color: var(--muted); font-weight: 400; font-size: 12px; text-align: center; }
.people canvas { width: 56px; height: 61px; image-rendering: pixelated; }
.people .mgr-mark { width: 44px; height: 44px; margin: 8px 0 9px; }

.me-head { display: flex; align-items: center; gap: 18px; margin: 8px 0 18px; }
.me-head canvas { width: 72px; height: 78px; image-rendering: pixelated; flex: none; }
.me-head h1 { margin: 0 0 4px; }
.mgr-mark { width: 56px; height: 56px; flex: none; }

.me-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.25fr) minmax(240px, 0.9fr); gap: var(--gap); align-items: start; }
.mgr-grid { display: grid; grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 1fr) minmax(260px, 1fr); gap: var(--gap); align-items: start; margin-bottom: var(--gap); }

.week-day { padding: 10px 0; border-top: 1px solid var(--rule); }
.week-day:first-child { border-top: 0; padding-top: 0; }
.week-day h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.week-item { display: grid; grid-template-columns: 92px 1fr; gap: 10px; font-size: 13px; line-height: 18px; padding: 3px 0; }
.week-item time { color: var(--muted); white-space: nowrap; }
.week-item .what b { font-weight: 500; }
.week-item.shift .what b { color: var(--hue); }
.week-item.clash .what b { color: var(--negative); }
.week-item .src { color: var(--muted); font-size: 12px; }
.week-empty { color: var(--muted); font-size: 13px; }

.priv { display: grid; gap: 14px; }
.meter { display: grid; gap: 6px; }
.meter .top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.meter .top b { font-weight: 600; white-space: nowrap; }
.meter .track { height: 8px; border-radius: 999px; background: var(--active); overflow: hidden; }
.meter .fill { display: block; height: 100%; border-radius: 999px; background: var(--hue); }
.meter .fill.tight { background: var(--negative); }
.meter .note { color: var(--muted); font-size: 12px; line-height: 16px; }
.seen-box { border: 1px solid var(--border); border-radius: var(--radius-control); padding: 12px; background: var(--raised); font-size: 13px; line-height: 19px; }
.seen-box h3 { margin: 0 0 6px; font-size: 13px; }
.seen-box ul { margin: 0; padding-left: 18px; }

/* Telegram, light theme, so the phone matches the page */
.tg { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tg-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.tg-head h2 { margin: 0; font-size: 15px; }
.tg-head .sub { margin: 0; color: var(--muted); font-size: 12px; }
.tg-head canvas { width: 36px; height: 39px; image-rendering: pixelated; }
.tg-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--text); color: #fff; display: grid; place-items: center; font: 600 12px/1 var(--font); }
.tg-thread { background: #e7ece4; padding: 14px; min-height: 360px; max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.tg-thread .msg { background: #fff; border: 0; border-radius: 14px 14px 14px 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); }
.tg-thread .msg.me { background: #e3f6cf; color: var(--text); border-radius: 14px 14px 4px 14px; }
.tg-thread .msg.reply { color: var(--text); background: #fff; }
.tg-thread .msg .btns { flex-wrap: wrap; }
.tg-thread .msg .btns button { flex: 1 1 auto; border-radius: 10px; }
.tg-thread .empty { color: var(--muted); font-size: 13px; text-align: center; margin: auto 0; }
.tg .compose { padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); margin: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px 0; background: var(--surface); border-top: 1px solid var(--border); }
.chips button { border: 1px solid var(--border); background: var(--raised); border-radius: 999px; padding: 5px 10px; font: 400 12px/16px var(--font); cursor: pointer; }
.chips button:hover { background: var(--active); }

.mgr-actions .act { padding: 12px 0; border-top: 1px solid var(--rule); }
.mgr-actions .act:first-of-type { border-top: 0; padding-top: 0; }
.mgr-actions h3 { margin: 0 0 4px; font-size: 14px; }
.mgr-actions .row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mgr-actions select { border: 1px solid var(--border); border-radius: var(--radius-control); padding: 7px 8px; font: 400 13px/18px var(--font); background: var(--surface); }
.toggle { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 18px; cursor: pointer; }
.toggle input { margin-top: 2px; }
.mgr-list { margin: 0 0 14px; padding: 0; list-style: none; }
.mgr-list h3 { font-size: 13px; margin: 0 0 6px; }
.mgr-list li { padding: 7px 0; border-top: 1px solid var(--rule); font-size: 13px; line-height: 18px; }
.mgr-list .sub { display: block; color: var(--muted); font-size: 12px; }

/* activity log: a plain table, like Workday's process history */
.log-wrap { max-height: 330px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-control); }
.log-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.log-table th { position: sticky; top: 0; background: var(--raised); text-align: left; font: 500 12px/16px var(--font); color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.log-table td { padding: 8px 12px; border-top: 1px solid var(--rule); vertical-align: top; }
.log-table tr:first-child td { border-top: 0; }
.log-table .t { width: 76px; color: var(--muted); white-space: nowrap; }
.log-table .who { width: 120px; color: var(--muted); }
.log-table .st { width: 96px; white-space: nowrap; }
.log-table .st.ok { color: var(--positive); font-weight: 500; }
.log-table .st.bad { color: var(--negative); font-weight: 500; }
.log-table .tr { color: var(--hue); font-weight: 500; }
.log-table .ok { color: var(--positive); font-weight: 500; }
.log-table .bad { color: var(--negative); font-weight: 500; }

/* how it works */
#flow { margin: var(--gap) 0; }
.snoop-note { border: 1px solid var(--negative); background: var(--neg-soft); color: var(--text); border-radius: var(--radius-control); padding: 10px 14px; font-size: 13px; line-height: 19px; margin: var(--gap) 0 0; }
.claims { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.ledger th { text-align: left; color: var(--muted); font: 400 12px/16px var(--font); padding: 0 12px 8px 0; }
.ledger td { padding: 10px 12px 10px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.ledger .fig { font-size: 15px; font-weight: 600; white-space: nowrap; }
.ledger .sub { display: block; color: var(--muted); font-size: 12px; }
.ledger .src { font-weight: 500; margin-right: 4px; }
.ledger code { font-size: 12px; background: var(--raised); padding: 1px 5px; border-radius: var(--radius-chip); }
.ledger blockquote { margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--control); color: var(--muted); }

@media (max-width: 1100px) {
  .me-grid, .mgr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .log-table .who { display: none; }
  .who-pill { padding: 5px 9px; }
  .tabs { overflow-x: auto; }
}

/* hosted replay */
.static-banner { background: var(--hue-soft); color: var(--text); padding: 9px var(--edge); font-size: 13px; line-height: 19px; }
.static-banner a { color: var(--hue); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(560px, calc(100% - 32px));
  background: var(--text); color: #fff; padding: 10px 16px; border-radius: var(--radius-control); font-size: 13px; line-height: 19px; z-index: 50; }
.toast[hidden] { display: none; }

/* judge view: a way back out */
.debug-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.debug-banner .exit {
  flex: none; color: #fff; font-weight: 600; text-decoration: none; padding: 4px 12px;
  border: 1.5px solid #fff; border-radius: var(--radius-control);
}
.debug-banner .exit:hover { background: rgba(255, 255, 255, .15); }

/* why Telegram */
.why-tg { margin-top: var(--gap); }
.why-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.why-list b { font-weight: 600; }
.why-tg-mini { padding: 8px 2px 0; }
.why-tg-mini summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.why-tg-mini p { margin-top: 4px; }

/* org chart: the campus hierarchy */
.org-panel { padding: 16px; }
.org-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.org-clock { display: flex; align-items: baseline; gap: 10px; }
.org-clock b { font-size: 20px; font-weight: 600; }
.org-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); }
.org-viewport { position: relative; overflow: hidden; border-radius: var(--radius-stage); background: var(--raised); border: 1px solid var(--rule); }
.org-stage { position: absolute; left: 0; top: 0; width: 1200px; height: 632px; transform-origin: 0 0; }
.org-wires { position: absolute; inset: 0; width: 1200px; height: 632px; pointer-events: none; }
.org-edge { fill: none; stroke: var(--control); stroke-width: 1.6; }
.org-edge.also { stroke-dasharray: 5 5; }
.org-packet { fill: var(--hue); }
.org-packet.up { fill: var(--warning); }
.org-node {
  position: absolute; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; cursor: grab; user-select: none;
  touch-action: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .03); transition: box-shadow .2s, border-color .2s;
}
.org-node.dragging { cursor: grabbing; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); z-index: 5; }
.org-node.selected { border-color: var(--text); }
.org-node.holding { border-color: var(--warning); box-shadow: 0 0 0 3px rgba(146, 64, 14, .15); }
.org-node.ping { box-shadow: 0 0 0 4px var(--hue-soft); }
.org-node .org-pet { width: 40px; height: 43px; flex: none; }
.org-node.org-student .org-pet { width: 34px; height: 37px; }
.org-text { display: flex; flex-direction: column; min-width: 0; line-height: 16px; }
.org-text b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-sub, .org-status { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-status:empty { display: none; }
.org-status[data-tone="ok"] { color: var(--positive); }
.org-status[data-tone="bad"] { color: var(--negative); }
.org-status[data-tone="wait"] { color: var(--warning); }
.org-timer {
  position: absolute; right: -8px; top: -13px; white-space: nowrap; font-size: 11px; z-index: 2;
  font-weight: 600; background: var(--warning); color: #fff; padding: 1px 8px; border-radius: 999px;
}
.org-timer.late { background: var(--negative); }
.org-side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.org-side h3 { font-size: 14px; margin-bottom: 6px; }
.org-cases > div { display: grid; gap: 10px; max-height: 420px; overflow: auto; }
.org-case { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.org-case header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.org-case header b { font-size: 13px; }
.org-case ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.org-case li { display: grid; grid-template-columns: 62px 1fr; gap: 6px; font-size: 12px; line-height: 16px; }
.org-case time { color: var(--muted); }
.pill { font-size: 11px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; background: var(--active); }
.pill.ok { background: var(--pill-pos-bg); color: var(--pill-pos-ink); }
.pill.bad { background: var(--pill-neg-bg); color: var(--pill-neg-ink); }
.pill.wait { background: #fdf0e1; color: var(--warning); }
.org-inbox .thread { max-height: 260px; min-height: 0; overflow: auto; }
.org-inbox .thread:empty { display: none; }
@media (max-width: 1100px) { .org-body { grid-template-columns: 1fr; } }

/* where the week is: five steps above the numbers */
.rail { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rail li {
  display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface);
  color: var(--muted); font-weight: 500; font-size: 13px; transition: background .25s, color .25s, border-color .25s;
}
.rail li b {
  grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--control); font-size: 12px; color: var(--muted);
}
.rail li span { font-weight: 400; font-size: 11px; line-height: 14px; color: var(--faint); }
.rail li[data-state="now"] { border-color: var(--text); color: var(--text); }
.rail li[data-state="now"] b { background: var(--text); border-color: var(--text); color: #fff; }
.rail li[data-state="done"] { color: var(--text); }
.rail li[data-state="done"] b { background: var(--hue); border-color: var(--hue); color: #fff; }
.static-banner .honest { color: var(--muted); }
@media (max-width: 900px) { .rail { grid-template-columns: repeat(2, 1fr); } .rail li span { display: none; } }

/* Ben's case, above the fold: what a Library-only scheduler does vs what his mascot does */
.hero-case {
  display: grid; grid-template-columns: minmax(240px, 1.2fr) 1fr 1fr auto; gap: 0; align-items: stretch; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden;
}
.hero-case > * { padding: 12px 18px; }
.hero-case > * + * { border-left: 1px solid var(--border); }
.hc-who { display: flex; align-items: center; gap: 12px; }
.hc-who canvas { width: 52px; height: 56px; flex: none; }
.hc-who b, .hc-col b { display: block; }
.hc-who span, .hc-col span { color: var(--muted); font-size: 12px; line-height: 16px; }
.hc-col .hc-k { display: block; font-size: 12px; color: var(--muted); }
.hc-col b { font-size: 26px; line-height: 32px; font-weight: 600; }
.hc-col.bad b { color: var(--negative); }
.hc-col.good b { color: var(--positive); }
.hc-src { align-self: center; font-size: 12px; color: var(--muted); }
.sim-fold > summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
.sim-fold > summary::-webkit-details-marker { display: none; }
.sim-fold > summary h2 { margin: 0; }
.sim-fold .sim-open { margin-left: auto; text-decoration: underline; }
.sim-fold[open] .sim-open { display: none; }
.sim-fold[open] > summary { margin-bottom: 12px; }
@media (max-width: 900px) { .hero-case { grid-template-columns: 1fr; } .hero-case > * + * { border-left: 0; border-top: 1px solid var(--border); } }

/* phone and tablet: the tabs get their own scrolling row under the brand */
@media (max-width: 960px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 8px 16px; gap: 6px 12px; }
  .scope { display: none; }
  .tabs { order: 3; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: none; }
  .who-pill { margin-left: auto; }
  .static-banner, .debug-banner { font-size: 12px; }
}

/* the week's numbers now sit under the mascots */
#viewCommons > .kpis { margin-top: var(--gap); }
/* the org chart: centered in its column when it's scaled to fit the window */
.org-stage { left: 50%; margin-left: -600px; transform-origin: 50% 0; }
/* the commons and the chat fill the rest of the first screen under the title, so every mascot and the whole
   chat are in view as soon as the page opens. --screen is the window's height in the page's own pixels and
   --grid-top where the commons starts (app.js sets both; the demo video zooms the page). */
@media (min-width: 1101px) {
  #viewCommons > .grid:not(.lower) { height: clamp(430px, calc(var(--screen, 100vh) - var(--grid-top, 72px) - 16px), 900px); grid-template-rows: minmax(0, 1fr); }
  #viewCommons > .grid:not(.lower) > .panel { min-height: 0; }
  #viewCommons .stage { min-height: 0; }
}
#viewCommons > .grid, .org-panel, .tof-viewport { scroll-margin: 16px; }
/* a typed message on its way: a thinking bubble in the chat and a spinner on Send */
.msg.typing { color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.msg.typing .dots { display: inline-flex; gap: 3px; }
.msg.typing .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1.1s ease-in-out infinite; }
.msg.typing .dots i:nth-child(2) { animation-delay: .15s; }
.msg.typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.msg.error { background: var(--neg-soft); border-color: var(--negative); color: var(--pill-neg-ink); }
.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .msg.typing .dots i, .btn.busy::after { animation: none; } }
/* the org chart: a short intro with the details folded away, and a box to text as anyone on the chart */
details.more { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 19px; max-width: 760px; }
details.more summary { cursor: pointer; color: var(--text); width: max-content; max-width: 100%; }
details.more p { margin-top: 6px; }
.org-head { flex-wrap: wrap; }
.org-compose { display: flex; gap: 8px; align-items: center; flex: 1; max-width: 620px; padding: 0; border-top: 0; }
.org-compose select { height: 32px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); font: inherit; font-size: 13px; padding: 0 6px; }
.org-compose input { flex: 1; min-width: 0; height: 32px; border-radius: 999px; padding: 0 14px; font-size: 13px; }
@media (max-width: 640px) { .org-compose { order: 3; flex-basis: 100%; max-width: none; } }
/* a student's and the manager's chat fill the rest of the first screen too; the thread scrolls inside */
@media (min-width: 1101px) {
  #viewStudent .me-grid > .tg { height: clamp(420px, calc(var(--screen, 100vh) - var(--me-top, 170px) - 16px), 820px); }
  #viewManager .mgr-grid > .tg { height: clamp(420px, calc(var(--screen, 100vh) - var(--mgr-top, 192px) - 16px), 820px); }
  #viewStudent .me-grid > .tg .tg-thread, #viewManager .mgr-grid > .tg .tg-thread { flex: 1; min-height: 0; max-height: none; }
}