/* Atlas · visual layer
   Loaded after app.css. app.css keeps structure and behaviour; this file
   owns the look: tokens, type, the shell and the main components.

   Idea: the committee room of a well-run company. A midnight shell holds
   the clock and who you are; the work sits on white; the company's own
   documents read as paper, in a serif, so evidence never looks like
   interface. One accent (cobalt) marks what you do next and what is yours. */

:root {
  --font-sans: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-read: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: var(--font-sans);

  --night: #13203a;
  --night-2: #1d2d4d;
  --night-ink: #e9eef8;
  --night-ink-2: #a9b6cf;

  --bg: #eceff4;
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --border: #d8dde6;
  --border-strong: #8b95a7;
  --ink: #16203a;
  --ink-2: #3b475e;
  --ink-3: #5b667c;

  --accent: #2c4fd6;
  --accent-hover: #2140b5;
  --accent-ink: #ffffff;
  --accent-soft: #e9eefc;
  --accent-border: #b3c2f2;

  --red: #bf3326;
  --red-soft: #fcecea;
  --red-border: #efb3ab;
  --amber: #9c5500;
  --amber-soft: #fdf3e3;
  --amber-border: #efcd94;
  --green: #1a7549;
  --green-soft: #e5f4ec;
  --green-border: #a6d8bc;

  --data: #2c4fd6;
  --data-muted: #9aa3b4;
  --critical: #bf3326;

  --radius: 10px;
  --radius-sm: 7px;
  --lift: 0 1px 2px rgba(19, 32, 58, 0.06), 0 8px 24px -12px rgba(19, 32, 58, 0.18);
}

html { font-size: 15.5px; }

body {
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; }

/* Tabular figures only where digits alone change in place: in this face
   they also widen the full stop and the comma. */
* { font-variant-numeric: normal !important; }

.card {
  border-color: var(--border);
  border-radius: var(--radius);
}

.stack { gap: 1.5rem; }

/* Buttons ---------------------------------------------------------------- */

.btn {
  border-radius: var(--radius-sm);
  border-color: var(--border);
  padding: 0.5rem 0.95rem;
  font-weight: 500;
  box-shadow: 0 1px 0 rgba(19, 32, 58, 0.04);
}

.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-primary:disabled { background: #b9c3de; border-color: #b9c3de; opacity: 1; }

.btn-lg { padding: 0.8rem 1.4rem; font-size: 1.05rem; }

.btn-sm { padding: 0.32rem 0.7rem; }

.btn-quiet { box-shadow: none; }

.input, .textarea, .select {
  border-color: var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
}

.input:hover, .textarea:hover, .select:hover { border-color: var(--border-strong); }

.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

/* Shell: midnight bar with brand, steps, who you are and the clock -------- */

.topbar {
  background: var(--night);
  color: var(--night-ink);
  border-bottom: 0;
}

.topbar-main {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.5rem;
  min-height: 4.2rem;
  padding-block: 0;
  max-width: 1320px;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  color: var(--night-ink);
  overflow: visible;
}

.brand-mark {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.brand-sub {
  font-size: 0.8rem;
  color: var(--night-ink-2);
}

.tabs {
  border-top: 0;
  gap: 0.25rem;
  align-self: stretch;
  align-items: stretch;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.95rem;
  color: var(--night-ink-2);
  border-bottom: 3px solid transparent;
  margin-bottom: 0;
  font-weight: 500;
  border-radius: 0;
}

.tab:hover { color: #fff; }

.tab[aria-selected="true"] {
  color: #fff;
  border-bottom-color: #8ea5ff;
}

.tab-n {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.78rem;
  font-weight: 600;
}

.tab[aria-selected="true"] .tab-n {
  background: #fff;
  border-color: #fff;
  color: var(--night);
}

.identity {
  justify-content: flex-end;
  gap: 0.7rem;
  font-weight: 400;
  text-align: left;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: #8ea5ff;
  color: var(--night);
  font-weight: 700;
  font-size: 0.9rem;
  flex: none;
}

.who { display: flex; flex-direction: column; line-height: 1.2; }
.who-name { font-weight: 600; color: #fff; }
.who-role { font-size: 0.82rem; color: var(--night-ink-2); }

.identity .change {
  align-self: flex-start;
  padding: 0;
  margin-top: 0.1rem;
  border: 0;
  background: none;
  color: #8ea5ff;
  font-size: 0.78rem;
  cursor: pointer;
}

.identity .change:hover { text-decoration: underline; }

.clock {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--night-2);
  color: var(--night-ink-2);
  min-width: 7.5rem;
}

.clock .lbl { font-size: 0.72rem; }

.clock .num {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
}

.clock.is-waiting .num {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--night-ink);
  padding-block: 0.25rem;
}

.clock.is-late { background: #5c1d17; }
.clock.is-late .num { color: #ffd0ca; }

.timebar {
  height: 4px;
  background: var(--night-2);
}

.timebar span {
  display: block;
  height: 100%;
  width: 0;
  background: #8ea5ff;
  transition: width 1s linear;
}

.timebar span.is-late { background: #ff8a7a; }

.panel { padding-block: 2rem 4rem; }

main.wrap { max-width: 1320px; }

/* Selector: a table with eight seats ------------------------------------- */

.selector {
  max-width: 980px;
  margin: 0 auto;
  padding: 3rem 24px 4rem;
  background: none;
  border: 0;
}

body:has(.selector) { background: var(--night); }

.selector-intro { color: var(--night-ink); margin-bottom: 2rem; }

.brand-line {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  color: var(--night-ink-2);
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
}

.brand-line .brand-mark { color: #fff; }

.selector h1 {
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 0.6rem;
}

.selector .lead { color: var(--night-ink-2); font-size: 1.1rem; margin: 0; }

.selector-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 2rem 2.2rem 2.2rem;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

.pick-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 0.9rem;
}

.pick-step + * + .pick-step, .pick-tables + .pick-step { margin-top: 2rem; }

.pick-step-n {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--night);
  color: #fff;
  font-size: 0.82rem;
}

.pick-tables {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}

.pick-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem 0.5rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.pick-table:hover { border-color: var(--accent-border); }
.pick-table-word { font-size: 0.8rem; color: var(--ink-3); }
.pick-table-n { font-size: 2rem; font-weight: 700; line-height: 1.1; }

.pick-table[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.pick-table[aria-pressed="true"] .pick-table-word { color: #dbe3ff; }

.seats { display: grid; gap: 0.75rem; }

.seat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.tabletop {
  display: grid;
  place-items: center;
  min-height: 4.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1.5px dashed var(--border);
  color: var(--ink-3);
  font-weight: 500;
}

.tabletop.is-set {
  background: var(--night);
  border: 0;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
}

.seat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
  min-height: 4.4rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.seat:hover:not(:disabled) { border-color: var(--accent-border); background: var(--accent-soft); }
.seat:disabled { cursor: not-allowed; color: var(--ink-3); background: var(--surface-2); }
.seat-role { font-weight: 600; line-height: 1.25; }
.seat-person { font-size: 0.88rem; color: var(--ink-3); }

.seat[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.seat[aria-pressed="true"] .seat-person { color: #dbe3ff; }

.selector .actions { margin-top: 2rem; gap: 1.2rem; }
.pick-status { color: var(--ink-2); }

/* Context -------------------------------------------------------------- */

.ctx-card { padding: 1.8rem 2rem 2rem; }

.ctx-card h3 {
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.ctx-role {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 2.5rem;
  border: 0;
  border-top: 5px solid var(--accent);
  box-shadow: var(--lift);
}

.ctx-role h2 {
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1rem;
}

.ctx-kicker { color: var(--accent); font-weight: 600; margin-bottom: 0.3rem !important; }

.ctx-card p { font-size: 1.05rem; }

.ctx-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem !important; }

.ctx-seats h3 { margin-bottom: 0.8rem; }

.seatmap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.seatmap-seat {
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  line-height: 1.3;
}

.seatmap-role { font-weight: 600; font-size: 0.9rem; }
.seatmap-person { font-size: 0.82rem; color: var(--ink-3); }
.seatmap-seat.is-me { background: var(--accent); color: #fff; }
.seatmap-seat.is-me .seatmap-person { color: #dbe3ff; }

.steps .n { background: var(--night); color: #fff; border: 0; }

.ctx-card .callout { border-radius: var(--radius-sm); }

@media (max-width: 900px) {
  .ctx-role { grid-template-columns: 1fr; }
}

/* My data: who you are and where to start -------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  padding: 2rem;
  background: var(--surface);
  border-radius: var(--radius);
  border-top: 5px solid var(--accent);
  box-shadow: var(--lift);
}

.hero-kicker { color: var(--accent); font-weight: 600; }

.hero h1 {
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0.2rem 0 0.8rem;
}

.hero .who { font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }

.hero-next {
  align-self: start;
  padding: 1.2rem 1.3rem 1.3rem;
  border-radius: var(--radius);
  background: var(--night);
  color: var(--night-ink);
}

.hero-next-lbl { color: #8ea5ff; font-weight: 600; margin-bottom: 0.4rem; }
.hero-next-q { color: #fff; font-size: 1.15rem; line-height: 1.4; font-weight: 500; margin-bottom: 0.6rem; }
.hero-next-note { font-size: 0.88rem; color: var(--night-ink-2); margin-bottom: 1rem; }
.hero-next .btn-primary { background: #8ea5ff; border-color: #8ea5ff; color: var(--night); }
.hero-next .btn-primary:hover:not(:disabled) { background: #fff; border-color: #fff; }

.hero-tip {
  grid-column: 1 / -1;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--ink-3);
  font-size: 0.93rem;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}

/* Sections, tables and documents ---------------------------------------- */

.section { padding: 1.5rem 1.7rem; }

.section-head h2 { font-size: 1.25rem; }

table.data th {
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 600;
}

.prompt { border-radius: var(--radius-sm); }

.docs { border-radius: var(--radius-sm); }

/* Evidence reads as paper: the company's own words in a serif */
.reader .body,
.reader .transcript p,
.reader .item p,
.chat .msg p {
  font-family: var(--font-read);
  font-size: 1.04rem;
  line-height: 1.65;
}

.reader-head h3 { font-size: 1.2rem; line-height: 1.3; }

/* Team answers: a rail of levels, the questions beside it ---------------- */

.answers-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.answers-rail {
  position: sticky;
  top: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.rail-title { font-weight: 600; font-size: 1.15rem; }

.answers-rail .progress { display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; }
.answers-rail .progress .label { font-size: 0.88rem; color: var(--ink-2); }
.answers-rail .progress .bar { display: block; width: 100%; height: 6px; flex: none; border-radius: 999px; background: var(--border); overflow: hidden; }
.answers-rail .progress .bar > span { display: block; height: 100%; background: var(--green); border-radius: 999px; }

.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rail-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 0.5rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.rail-item:hover { border-color: var(--accent-border); }
.rail-item-title { font-weight: 600; }
.rail-item-sub { grid-column: 1; font-size: 0.82rem; color: var(--ink-3); }
.rail-item-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.85rem; color: var(--ink-2); }
.rail-item.is-complete { border-color: var(--green-border); background: var(--green-soft); }
.rail-item.is-complete .rail-item-count { color: var(--green); font-weight: 600; }
.rail-decision { border-color: var(--night); }
.rail-decision.is-complete { background: var(--night); color: #fff; }
.rail-decision.is-complete .rail-item-sub, .rail-decision.is-complete .rail-item-count { color: #dbe3ff; }

.dash-fold {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.2rem 1.2rem;
}

.dash-fold[open] { padding-bottom: 1.2rem; }

.dash-fold summary {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.8rem 0;
  cursor: pointer;
  font-weight: 600;
}

.dash-fold-hint { font-weight: 400; color: var(--accent); font-size: 0.9rem; }


.level {
  border: 0;
  background: none;
}

.level-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0 0 0.8rem;
  background: none;
  border: 0;
  scroll-margin-top: 7rem;
}

.level-head h2 { font-size: 1.35rem; }
.level-head .count { color: var(--ink-3); }

.qlist { display: flex; flex-direction: column; gap: 0.8rem; }

.question {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.2rem 1.4rem 1.3rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 5px solid var(--border);
  scroll-margin-top: 7rem;
}

.question.is-mine { border-left-color: var(--accent); }
.question.is-done { border-left-color: var(--green); }

.question .qnum {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink-3);
  font-family: var(--font-sans);
  padding-top: 0.05rem;
}

.question.is-mine .qnum { color: var(--accent); }
.question.is-done .qnum { color: var(--green); }

.question .qtext { font-size: 1.1rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.6rem; }

.question.is-hilite { box-shadow: 0 0 0 3px var(--accent-soft), var(--lift); border-color: var(--accent); }

.qanswer .help { font-size: 0.88rem; color: var(--ink-3); }

.answer-view {
  border-radius: var(--radius-sm);
  background: var(--green-soft);
  border: 1px solid var(--green-border);
}

.hint-box { border-radius: var(--radius-sm); }

.chip-you { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 980px) {
  .answers-layout { grid-template-columns: 1fr; }
  .answers-rail { position: static; }
  .rail-list { flex-direction: row; flex-wrap: wrap; }
  .rail-list li { flex: 1 1 10rem; }
}

/* Decision: the moment the table commits -------------------------------- */

.decision {
  background: var(--night);
  color: var(--night-ink);
  border: 0;
  border-radius: 14px;
  padding: 2rem 2.2rem;
  scroll-margin-top: 7rem;
}

.decision h2 { color: #fff; font-size: 1.6rem; }
.decision .lead { color: var(--night-ink-2); }

.decision .option {
  background: var(--night-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  color: var(--night-ink);
}

.decision .option:hover { border-color: #8ea5ff; }
.decision .option.is-checked { background: #fff; color: var(--ink); border-color: #fff; }
.decision .option .letter { color: #8ea5ff; font-weight: 700; }
.decision .option.is-checked .letter { color: var(--accent); }

.decision label.field > span { color: #fff; }
.decision .textarea, .decision .input { background: #fff; }
.decision .muted { color: var(--night-ink-2); }
.decision .btn-primary { background: #8ea5ff; border-color: #8ea5ff; color: var(--night); }
.decision .btn-primary:hover:not(:disabled) { background: #fff; border-color: #fff; }
.decision .btn-primary:disabled { background: #3a4a6b; border-color: #3a4a6b; color: #8e9bb6; }

.consequence {
  border: 0;
  border-top: 5px solid var(--night);
  box-shadow: var(--lift);
  border-radius: 14px;
}

/* Toast ------------------------------------------------------------------ */

.toast {
  background: var(--night);
  color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--lift);
}

/* Narrow screens --------------------------------------------------------- */

@media (max-width: 1180px) {
  .topbar-main { grid-template-columns: auto minmax(0, 1fr) auto; }
  .identity { display: none; }
}

@media (max-width: 760px) {
  .topbar-main { grid-template-columns: 1fr auto; gap: 0.5rem 1rem; padding-block: 0.5rem; }
  .tabs { grid-column: 1 / -1; order: 3; overflow-x: auto; }
  .tab { padding: 0.6rem 0.7rem; }
  .selector h1 { font-size: 2rem; }
  .pick-tables { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
  .seat-row { grid-template-columns: 1fr 1fr; }
  .selector-card { padding: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .timebar span { transition: none; }
}

/* Block 2 pages and control: same shell, their own bar ------------------ */

.topbar + main:not(:has(.panel)) { padding-top: 2rem; padding-bottom: 3rem; }

.brand:not(:has(.brand-mark)) { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.01em; }

.topbar .identity > span:first-child { color: #fff; font-weight: 600; }

.topbar a.change, a.btn { text-decoration: none; }

.topbar .bar-right { display: flex; align-items: center; gap: 1rem; justify-content: flex-end; color: var(--night-ink-2); }
.topbar .bar-right .muted, .topbar .bar-right .small { color: var(--night-ink-2); }
.topbar .name-field { display: flex; align-items: center; gap: 0.6rem; }
.topbar .name-field > span { color: var(--night-ink-2); font-size: 0.85rem; white-space: nowrap; }
.topbar .name-field .input { background: var(--night-2); border-color: #34466b; color: #fff; min-width: 11rem; }
.topbar .name-field .input::placeholder { color: var(--night-ink-2); }

.spark .lbl { font-size: 7.5px; }

/* Radar: the source document reads as paper too */
.rd-doc-body,
.rd-doc-body p,
.rd-items li,
.rd-docbox .rd-line { font-family: var(--font-read); font-size: 1rem; line-height: 1.6; }
.rd-docbox { border-radius: var(--radius-sm); }
.rd-row { transition: background-color var(--dur) var(--ease); }

/* Radar review: the two verdicts carry their meaning */
.rd-review { background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; }
.rd-actions .mark { font-weight: 600; }
.rd-actions .mark-correct { color: var(--green); border-color: var(--green-border); }
.rd-actions .mark-correct:hover, .rd-actions .mark-correct.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.rd-actions .mark-wrong { color: var(--red); border-color: var(--red-border); }
.rd-actions .mark-wrong:hover, .rd-actions .mark-wrong.is-on { background: var(--red); border-color: var(--red); color: #fff; }

/* No clock anywhere: the room keeps time */
.clock, .timebar { display: none !important; }

/* Each level opens with this person's own questions -------------------- */
.qgroup { display: flex; flex-direction: column; gap: 0.8rem; }
.qgroup + .qgroup { margin-top: 1.2rem; }
.qgroup-title { font-size: 0.95rem; color: var(--ink-2); }
.qgroup-mine {
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
}
.qgroup-mine .qgroup-title { color: var(--accent); font-size: 1.1rem; }

/* Dashboard bars: neutral. Only the two rated numbers carry colour (red). */
:root { --data: #3b475e; --data-muted: #a3acbd; }

/* Dashboard: tiles wrap before they squeeze, and open large -------------- */
.kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (min-width: 1380px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.tile { min-width: 0; }
.tile-status { flex-wrap: wrap; }
.tile.is-zoomable { cursor: zoom-in; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tile.is-zoomable:hover { border-color: var(--accent); box-shadow: var(--lift); }

dialog.zoom {
  width: min(560px, 92vw);
  padding: 1.6rem;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
  color: var(--ink);
}
dialog.zoom::backdrop { background: rgba(19, 32, 58, 0.6); }
.zoom-tile { zoom: 1.9; }
.zoom-tile .tile { border: 0; padding: 0; box-shadow: none; cursor: default; }
.zoom-months { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.zoom-months li { display: flex; flex-direction: column; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 1.05rem; }
.zoom-months li span { color: var(--ink-3); font-size: 0.9rem; }
.zoom-months li strong { font-size: 1.4rem; }
.zoom-def { margin-top: 1rem; font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); }
.zoom-actions { margin-top: 1.2rem; display: flex; justify-content: flex-end; }

/* Documents: the reader grows with the text; only the list scrolls, and
   its scrollbar is always visible */
.docs .reader { max-height: none !important; overflow: visible !important; }
.docs .doclist {
  position: sticky;
  top: 5.5rem;
  align-self: start;
  max-height: calc(100vh - 7rem) !important;
  overflow-y: auto !important;
  scrollbar-width: auto;
  scrollbar-color: var(--border-strong) var(--surface-2);
}
.docs .doclist::-webkit-scrollbar { width: 12px; }
.docs .doclist::-webkit-scrollbar-track { background: var(--surface-2); }
.docs .doclist::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--surface-2); }
.docs { overflow: visible !important; align-items: start; }

/* Context, shorter ------------------------------------------------------- */
.ctx-how h2, .ctx-card > h2 { margin-bottom: 1rem; }
.steps-row { flex-direction: row !important; gap: 1rem 2rem; flex-wrap: wrap; }
.steps-row li { flex: 1 1 15rem; font-size: 1.05rem; }
.ctx-how .tips { margin-top: 1.2rem; color: var(--ink-2); }
.facts-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.8rem; }
.fact-cell { padding: 0.8rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.fact-cell dt { color: var(--ink-3); font-size: 0.9rem; }
.fact-cell dd { margin: 0.2rem 0 0; font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.ctx-more summary { display: flex; align-items: baseline; gap: 0.8rem; cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.ctx-more-hint { font-weight: 400; color: var(--ink-3); font-size: 0.9rem; }
.ctx-more-body { margin-top: 1rem; }
.ctx-more-body h3 { margin-top: 1.2rem; }

/* One line under each material saying what it is */
.about { color: var(--ink-2); font-size: 1rem; line-height: 1.55; margin: -0.4rem 0 1.1rem; max-width: 85ch; }

/* Every box that scrolls shows its scrollbar, always (macOS hides them) */
.chat, .transcript, .table-scroll, .docs .doclist, .rd-doc, .rd-rows {
  scrollbar-width: auto;
  scrollbar-color: var(--border-strong) var(--surface-2);
}
.chat::-webkit-scrollbar, .transcript::-webkit-scrollbar, .table-scroll::-webkit-scrollbar,
.rd-doc::-webkit-scrollbar, .rd-rows::-webkit-scrollbar { width: 12px; height: 12px; }
.chat::-webkit-scrollbar-track, .transcript::-webkit-scrollbar-track, .table-scroll::-webkit-scrollbar-track,
.rd-doc::-webkit-scrollbar-track, .rd-rows::-webkit-scrollbar-track { background: var(--surface-2); }
.chat::-webkit-scrollbar-thumb, .transcript::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb,
.rd-doc::-webkit-scrollbar-thumb, .rd-rows::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--surface-2); }

/* Role after a name inside a document: readable, quieter than the text */
.role-tag { font-family: var(--font-sans); font-size: 0.82em; color: var(--accent); font-weight: 500; }

.table-more { margin-top: 0.8rem; }

/* Decision: say what is being decided, and who can press the button */
.decision-ask { margin: 1rem 0 1.2rem; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--night-2); }
.decision-ask-q { font-size: 1.3rem; font-weight: 600; color: #fff; margin-bottom: 0.4rem; }
.decision-ask p:not(.decision-ask-q) { color: var(--night-ink); line-height: 1.55; }
.decision-lock { margin-bottom: 1rem; padding: 0.7rem 1rem; border-radius: var(--radius-sm); border: 1px dashed #8ea5ff; color: #dbe3ff; }
.decision .option:has(input:disabled) { cursor: default; opacity: 0.85; }
.decision .option:has(input:disabled):hover { border-color: transparent; }

/* Debrief: five tables side by side, readable from the back of the room */
.db { padding-top: 1.5rem; }
.db-title { font-size: 1.8rem; letter-spacing: -0.02em; }
.db-toggle { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--night-ink); cursor: pointer; }
.db-decisions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.9rem; }
.db-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.2rem 1.3rem; border-radius: 14px; background: var(--surface); border-top: 5px solid var(--accent); box-shadow: var(--lift); }
.db-card.is-empty { border-top-color: var(--border); box-shadow: none; border: 1px dashed var(--border); }
.db-card-table { font-weight: 600; color: var(--ink-2); }
.db-card-letter { font-size: 3.2rem; font-weight: 700; line-height: 1; color: var(--accent); }
.db-card-none { font-size: 1.2rem; color: var(--ink-3); padding-block: 0.8rem; }
.db-card-text { font-weight: 600; line-height: 1.4; }
.db-card-diag { font-family: var(--font-read); line-height: 1.55; color: var(--ink-2); white-space: pre-line; }
.db-card-meta { font-size: 0.85rem; color: var(--ink-3); }
.db-card-cons { margin-top: 0.4rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.92rem; }
.db-summary { display: flex; flex-direction: column; gap: 0.4rem; }
.db-opt { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.7rem 1rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.db-opt.is-correct { border: 2px solid var(--green); background: var(--green-soft); }
.db-opt-letter { font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.db-opt-count { font-weight: 600; }
.db-q-head { display: flex; gap: 1rem; align-items: baseline; }
.db-q-n { font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.db-q-text { font-size: 1.15rem; font-weight: 600; line-height: 1.4; }
.db-q-roles { color: var(--ink-3); margin: 0.2rem 0 0.9rem 3.2rem; font-size: 0.92rem; }
.db-expected { margin-bottom: 0.9rem; padding: 0.8rem 1rem; border-radius: var(--radius-sm); background: var(--green-soft); border: 1px solid var(--green-border); }
.db-expected-lbl { display: block; font-weight: 700; color: var(--green); margin-bottom: 0.3rem; }
.db-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }
.db-cell { padding: 0.7rem 0.8rem; border-radius: var(--radius-sm); background: var(--surface-2); min-height: 5rem; }
.db-cell.is-empty { background: none; border: 1px dashed var(--border); }
.db-cell-table { font-weight: 600; font-size: 0.85rem; color: var(--ink-3); margin-bottom: 0.3rem; }
.db-cell-text { line-height: 1.45; white-space: pre-line; }
.db-cell-none { color: var(--ink-3); }
.db-cell-meta { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.4rem; }
.db-list { margin: 0; padding-left: 1.1rem; line-height: 1.45; }
@media (max-width: 1100px) { .db-decisions, .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Questions the final decision depends on */
.chip-key { background: var(--key-bg, #fff4d6); border-color: var(--key-line, #e0b84a); color: var(--key-ink, #6b4a00); font-weight: 600; }
.question.is-key .qnum::after { content: " ★"; color: var(--key-line, #e0b84a); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-key { background: #3a2f10; border-color: #b8912e; color: #f3d98a; } }

/* Facilitator control */
.ctl { padding-top: 1.75rem; padding-bottom: 3rem; gap: 2.25rem; }
.ctl-bar { display: flex; align-items: center; gap: 0.75rem; }
.ctl-updated { color: var(--night-ink-2); font-size: 0.85rem; }
.ctl-refresh { background: transparent; color: var(--night-ink); border-color: var(--night-2); }
.ctl-refresh:hover { background: var(--night-2); }
.ctl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ctl-head h1, .ctl-head h2 { margin: 0 0 0.2rem; }
.ctl-head p { margin: 0; }
.ctl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.ctl-card { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.1rem 1.15rem; }
.ctl-card-head h3 { margin: 0; font-size: 1.15rem; }
.ctl-card-head .muted { font-size: 0.85rem; }
.ctl-levels { display: grid; gap: 0.45rem; }
.ctl-level { display: grid; grid-template-columns: 4.2rem 1fr 3.4rem; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.ctl-level-n { text-align: right; color: var(--ink-2); }
.ctl-bar-track { height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.ctl-bar-fill { display: block; height: 100%; background: var(--accent); }
.ctl-last { margin: 0; font-size: 0.88rem; color: var(--ink-3); }
.ctl-last.is-idle { color: var(--amber); font-weight: 600; }
.ctl-decision { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-3); font-size: 0.88rem; }
.ctl-decision.is-sent { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-border); }
.ctl-letter { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.ctl-reset { align-self: flex-start; margin-top: auto; color: var(--ink-3); }
.ctl-b2 td { vertical-align: middle; }
.ctl-links { gap: 0.35rem; flex-wrap: nowrap; }
.db-opt-why { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--ink-2); }
/* Dashboard inside Team answers: open, three per row so the pills fit */
.dash-fold .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 640px) { .dash-fold .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.tile-status { justify-content: flex-start; }
.tile .status-pill { max-width: 100%; }

/* Atlas Radar: wider, and the right panel says it scrolls */
main.wrap.rd { max-width: 1600px; }
.rd-grid { grid-template-columns: 230px minmax(0, 1fr) minmax(420px, 36%) !important; }
@media (max-width: 1180px) { .rd-grid { grid-template-columns: 200px minmax(0, 1fr) 360px !important; } }
@media (max-width: 900px) { .rd-grid { grid-template-columns: 1fr !important; } }
.rd-detail { scrollbar-gutter: stable; }
.rd-doc-label { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0.2rem 0 -0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.rd-scroll-hint { font-weight: 500; color: var(--accent); }
.rd-detail::after { content: ""; position: sticky; bottom: -1rem; display: block; height: 28px; margin-top: -28px; flex: none; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
.rd-open-line { margin: 0.6rem 0 0.3rem; font-size: 0.9rem; }
.rd-open-line b { font-size: 1rem; }
textarea.rule::placeholder, #missing textarea::placeholder { font-style: italic; }
.rd-name-form { display: flex; align-items: flex-end; gap: 0.8rem; flex-wrap: wrap; }
.rd-name-form .field { flex: 1 1 240px; display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; color: var(--ink); }
body:has(main.rd) .topbar .wrap { max-width: 1600px; }
#note .rules { max-width: none; }
#note .rules .textarea.rule { display: block; }
#note .help, #missing .help { max-width: none; }
.rd-source-label { display: flex; flex-direction: column; gap: 0.1rem; }
.rd-source-read { font-size: 0.78rem; font-weight: 400; color: var(--ink-3); }
.rd-source-meta { white-space: nowrap; font-size: 0.8rem; color: var(--ink-3); }
.rd-source-meta b { font-size: 0.95rem; color: var(--ink); }
.rd-source.is-selected .rd-source-meta b { color: var(--accent); }

/* ======================================================================
   Phones (24 Sep). Desktop is untouched: everything below only applies
   under 640px. The aim: one hand, one column, nothing cut, big targets.
   ====================================================================== */
@media (max-width: 640px) {
  html { font-size: 15px; }
  body { -webkit-text-size-adjust: 100%; }

  /* Exercise 1 shell: compact bar on top, the four steps as a bottom tab bar */
  .topbar-main { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding-block: 0.55rem; gap: 0.2rem 0.8rem; }
  .brand-mark { font-size: 1.05rem; }
  .brand-sub { font-size: 0.72rem; }
  .identity { display: flex !important; gap: 0.45rem; }
  .identity .avatar { width: 2rem; height: 2rem; font-size: 0.75rem; }
  .identity .who-name { display: none; }
  .identity .who-role { font-size: 0.72rem; color: var(--night-ink); max-width: 9.5rem; }
  .identity .change { font-size: 0.7rem; }
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0;
    background: var(--night); border-top: 1px solid var(--night-2);
    padding-bottom: env(safe-area-inset-bottom); overflow: visible !important; order: 0 !important;
  }
  .tab {
    flex-direction: column; justify-content: center; gap: 0.2rem;
    padding: 0.45rem 0.2rem 0.5rem !important; min-height: 3.6rem;
    font-size: 0.72rem; line-height: 1.1; text-align: center; white-space: nowrap;
    border-bottom: 0; border-top: 3px solid transparent;
  }
  .tab[aria-selected="true"] { border-top-color: #8ea5ff; }
  .tab-n { width: 1.35rem; height: 1.35rem; font-size: 0.7rem; }
  body:has(.tabs) { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }

  /* Cards and sections breathe less */
  .wrap { padding-inline: 12px !important; }
  .card, .section, .ctx-card { border-radius: 12px; }
  .section, .ctx-card, .hero { padding: 1rem !important; }

  /* Questions: number above the text, full width for the answer */
  .question { grid-template-columns: 1fr !important; gap: 0.35rem; padding: 0.9rem 0.9rem 1rem !important; scroll-margin-top: 5rem; }
  .question .qnum { font-size: 1rem; }
  .question .qtext { font-size: 1.02rem; }
  .qmeta { flex-wrap: wrap; row-gap: 0.4rem; }
  .qmeta .spacer { display: none; }
  .textarea, .input, .select { font-size: 16px; } /* no zoom-on-focus on iPhone */
  .btn { min-height: 2.6rem; }
  .btn-sm { min-height: 2.3rem; }

  /* Tables: swipe sideways, with a shadow on the edge that has more */
  .table-scroll {
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat local,
      linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(19,32,58,.18), transparent) left center / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(19,32,58,.18), transparent) right center / 10px 100% no-repeat scroll;
  }
  .table-scroll table { font-size: 0.85rem; }

  /* Documents: the reader header no longer floats over the list */
  .reader .reader-head { position: static !important; }
  .docs .doclist { max-height: 45vh; }

  /* Dashboard tiles: two per row, pills never spill */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; }
  .tile { padding: 0.7rem !important; }
  .tile .status-pill { font-size: 0.68rem; }

  /* Decision: options stacked, big touch targets */
  .decision .option, .decision label.opt { padding: 0.8rem; }

  /* Exercise 2: one column, actions side by side and full width */
  .rd-intro h1 { font-size: 1.5rem; }
  .rd-grid { grid-template-columns: 1fr !important; }
  .rd-rail { order: 2; }
  .rd-detail { position: static !important; max-height: none !important; overflow: visible !important; }
  .rd-detail::after { display: none; }
  .rd-scroll-hint { display: none !important; }
  .rd-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .rd-actions-q { grid-column: 1 / -1; }
  .rd-actions .mark { width: 100%; justify-content: center; min-height: 2.8rem; }
  .rd-row { grid-template-columns: 44px minmax(0, 1fr) 12px !important; row-gap: 0.25rem; }
  .rd-row .pill-label { grid-column: 2; grid-row: 1; }
  .rd-row .rd-row-text { grid-column: 2; grid-row: 2; }
  .rd-row .rd-row-src { display: none; }
  .rd-row .rd-dot { grid-column: 3; grid-row: 1 / span 2; }
  .rd-pipeline { flex-wrap: wrap; gap: 0.4rem; }
  .rd-pipeline i { display: none; }
  .rd-pipeline-note { width: 100%; }
  .rd-name-form .btn { width: 100%; }

  /* Block 2 bar: name field shrinks, table stays visible */
  .topbar .bar-right .name-field span { display: none; }
  .topbar .bar-right .name-field .input { width: 7.5rem; }

  /* Exercise 3 builder: step tabs in a 2 x 2 grid, preview under the form */
  .bd-grid { grid-template-columns: 1fr !important; }
  .bd-steps { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .bd-panel { position: static !important; max-height: none !important; }

  /* Selector pages */
  .selector { padding: 1.6rem 12px 2.5rem; }
  .selector h1 { font-size: 1.8rem; }
}
.rd-mobile-nav { display: none; }
@media (max-width: 640px) {
  .rd-mobile-nav { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.2rem; }
  .rd-sources { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .rd-sources li:first-child { grid-column: 1 / -1; }
  .rd-source { height: 100%; }
  .tab:not(:has(.tab-n))::before { content: ""; display: block; height: 1.35rem; }
  .rd-detail { scroll-margin-top: 6rem; }
}