/*
 * dashboard.css
 *
 * Visual baseline for the Polydoxa instructor dashboard. Matches the
 * public index.html: Century Schoolbook serif body, oxblood accent, hard
 * horizontal rules, no rounded pills, no gradients. Slightly more
 * utilitarian since this is a tool, not marketing.
 */

/* ----------------------------------------------------------------
   TeX Gyre Schola: the free, faithful Century Schoolbook clone from
   GUST (the Polish TeX users group), self-hosted so every machine
   renders the same face rather than falling back to Georgia. GUST
   Font License (a LaTeX Project Public License variant) permits this
   use; the license text ships beside the files.
   ---------------------------------------------------------------- */
@font-face {
  font-family: "TeX Gyre Schola";
  src: url("/static/fonts/texgyreschola-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Schola";
  src: url("/static/fonts/texgyreschola-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Schola";
  src: url("/static/fonts/texgyreschola-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Schola";
  src: url("/static/fonts/texgyreschola-bolditalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  --bg:        #fcfcfc;
  --paper:     #ffffff;
  --ink:       #15161a;
  --ink-mid:   #3a3b40;
  --ink-soft:  #5e5f64;
  --ink-faint: #8a8b90;
  --rule:      #d8d6d0;
  --rule-soft: #ececea;
  --accent:    #6b1d1d;
  --accent-mid: #8a2828;

  /* Century Schoolbook lineage. The name matches the real face where
     it is installed (Windows/Office); "TeX Gyre Schola" is the free,
     faithful clone once self-hosted; Georgia is the warm rounded
     schoolbook fallback everywhere else (macOS lands here). Charter
     is gone by request. */
  --serif: "TeX Gyre Schola", "Century Schoolbook", "Century Schoolbook L",
           Georgia, "Times New Roman", Times, serif;
  --sans: "Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.qa-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.5rem 1rem;
  border-bottom: 2px solid #4b2500;
  background: #ffd98a;
  color: #2e1800;
  font: 700 0.82rem/1.2 var(--sans);
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

code { font-family: var(--mono); font-size: 0.86em; background: var(--rule-soft); padding: 0.05em 0.35em; border-radius: 1px; }

em { font-style: italic; color: var(--ink-mid); }
strong { font-weight: 600; color: var(--ink); }

/* ---------- header ---------- */

/* Two tiers. Row one carries identity, the course you are inside,
   and your account; row two carries navigation across the full
   width. Eight tabs, a selector, and an account block cannot share
   one line without crushing each other, and the nav is the thing
   that grows as the product does. */
.dash-header {
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}
.dash-header-top {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem 2rem 0.75rem;
}

.brand {
  display: flex; align-items: center; gap: 0.85rem;
  text-decoration: none; color: inherit;
}
.brand:hover { text-decoration: none; }
.brand-logo { width: 44px; height: 44px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; }
.brand-subtitle {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.06em; font-size: 0.78rem; color: var(--ink-faint);
}

.user-nav {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--serif); font-size: 0.92rem;
  white-space: nowrap;
}
.user-tag {
  font-variant: small-caps; letter-spacing: 0.04em;
  color: var(--ink-mid);
}

/* ---------- main ---------- */

.dash-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.kicker {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.06em; font-size: 0.84rem;
  color: var(--ink-soft); margin: 0 0 0.6rem;
}
.kicker, h1, p.lede { overflow-wrap: anywhere; }

h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.015em; line-height: 1.1;
  margin: 0 0 1rem;
}

h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.3rem; margin: 2.5rem 0 1rem;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.4rem;
}

p.lede { font-size: 1.08rem; color: var(--ink-mid); max-width: 38em; }

p { margin: 0 0 1rem; max-width: 36em; }

ul { padding-left: 1.4rem; margin: 0 0 1rem; }
li { margin-bottom: 0.4rem; }

/* ---------- login card ---------- */

.login-card {
  max-width: 440px;
  margin: 4rem auto;
  padding: 2.25rem 2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
}

.login-card h1 { font-size: 1.7rem; margin-bottom: 0.5rem; }

.login-actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.login-actions .btn-primary,
.login-actions .btn-secondary {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 0;
  text-align: center;
}

.auth-switch {
  margin-top: 1.35rem;
  font-size: 0.92rem;
  color: var(--ink-mid);
}

.auth-switch a { color: var(--accent); }

.login-card .course-form {
  margin-top: 1.25rem;
}
.login-card .course-form form {
  display: grid;
  gap: 0.4rem;
  margin-top: 1rem;
}
.login-card .course-form form:first-child { margin-top: 0; }
.login-card .course-form input {
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.login-card .course-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.qa-access-form,
.qa-persona-form {
  min-width: 0;
}
.qa-access-form input,
.qa-persona-form select,
.qa-persona-form input,
.qa-access-form .btn-primary,
.qa-persona-form .btn-primary {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
}
.qa-access-form .btn-primary:focus-visible,
.qa-persona-form .btn-primary:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

.btn-primary {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--accent);
  color: var(--paper);
  padding: 0.7rem 1.2rem;
  text-decoration: none;
  margin-top: 1rem;
  border: 1px solid var(--accent);
  transition: background 80ms;
}
.btn-primary:hover { background: var(--accent-mid); border-color: var(--accent-mid); text-decoration: none; }

.fine-print {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-style: italic;
}

.notice {
  background: #fff7e6;
  border-left: 3px solid #c87f0a;
  padding: 0.6rem 0.85rem;
  margin: 1rem 0;
  font-size: 0.92rem;
  color: var(--ink-mid);
}

/* ---------- forbidden card ---------- */

.forbidden-card {
  max-width: 520px;
  margin: 4rem auto;
  padding: 2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
}

/* ---------- status grid (home stub) ---------- */

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.stat .stat-num {
  font-family: var(--serif); font-weight: 700;
  font-size: 2.1rem; color: var(--accent);
  font-variant-numeric: lining-nums; line-height: 1;
}
.stat .stat-label {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.06em; font-size: 0.82rem;
  color: var(--ink-faint); margin-top: 0.4rem;
}

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

/* ---------- footer ---------- */

.dash-footer {
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 0.8rem;
  color: var(--ink-faint);
  line-height: 1.55;
  /* Centered so the footer reads as part of the page no matter how
     wide or narrow the content above it runs (the welcome screen is
     660px centered, data pages run the full column). */
  text-align: center;
}
.dash-footer p { margin: 0.3rem 0; max-width: none; }

/* ---------- primary nav ---------- */

.primary-nav {
  display: flex;
  gap: 1.75rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  padding: 0 2rem;
  border-top: 1px solid var(--rule-soft);
  /* Narrow windows scroll the tabs instead of wrapping them into a
     ragged second line. */
  overflow-x: auto;
  scrollbar-width: thin;
}
.primary-nav a { white-space: nowrap; padding: 0.55rem 0; }
.primary-nav a {
  color: var(--ink-mid);
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color 80ms, border-color 80ms;
}
.primary-nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.primary-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }



/* ---------- page head ---------- */

.page-head { margin-bottom: 2rem; }

/* widen main on data-heavy pages; the footer must track the same
   column or its hairline and text sit visibly off the content grid */
.dash-main { max-width: 1080px; }
.dash-footer { max-width: 1080px; }

/* ---------- stat row ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 700px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- sections ---------- */

.section { margin: 2.5rem 0; }
.section h2 { margin-bottom: 1rem; }
.section h3.muted {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.06em; font-weight: 600;
  font-size: 0.85rem; color: var(--ink-faint);
  margin: 1.4rem 0 0.5rem; border: 0; padding: 0;
}

.section.two-col {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 2.5rem;
}
.section.two-col > * { min-width: 0; }
@media (max-width: 800px) {
  .section.two-col { grid-template-columns: 1fr; }
}

.row-foot { margin-top: 0.6rem; font-size: 0.9rem; }
.row-foot.dim { color: var(--ink-faint); }

/* ---------- data tables ---------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--serif);
  font-size: 0.95rem;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 0.65rem 0.6rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.data-table th {
  font-variant: small-caps; letter-spacing: 0.06em;
  font-weight: 600; font-size: 0.85rem;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
}
.data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.data-table tbody tr:hover { background: var(--rule-soft); }
.data-table td.empty { color: var(--ink-faint); text-align: center; padding: 1.2rem; font-style: italic; }
.data-table.small { font-size: 0.88rem; }
.data-table .dim { color: var(--ink-faint); }
.data-table a { color: var(--accent); text-decoration: none; font-weight: 600; }
.data-table a:hover { text-decoration: underline; }
.course-name { overflow-wrap: anywhere; }
.table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.table-scroll .data-table { min-width: 36rem; }
.table-scroll:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.table-scroll-hint { display: none; }
.wrap-text,
.claim-text,
.claim-text-cell,
.pressure-reasons,
.draft-title,
.draft-position-text,
.draft-positions > div,
.topic-card h3,
.topic-positions p {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .table-scroll-hint {
    display: block;
    margin: -0.4rem 0 0.5rem;
    color: var(--ink-soft);
    font-size: 0.85rem;
  }
}

/* ---------- key-value grid ---------- */

.kv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 700px) { .kv-grid { grid-template-columns: 1fr 1fr; } }
.kv {
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.kv-label {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.06em; font-size: 0.78rem;
  color: var(--ink-faint); margin-bottom: 0.3rem;
}
.kv-value {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.15rem; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- badges ---------- */

.badge {
  display: inline-block;
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.06em; font-size: 0.76rem;
  padding: 0.1em 0.55em;
  border: 1px solid var(--rule-strong, var(--rule));
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink-mid);
}
/* Status colours. In progress wears the brand oxblood (it is the
   state the product is proudest of), finished stays green, and both
   failure and warning live in the amber family, separated by depth:
   a failure is the darker, heavier burnt amber. No blue anywhere in
   the instructor room. */
.badge.b-ok      { border-color: #3a7a3a; color: #3a7a3a; background: #f1f7f1; }
.badge.b-info    { border-color: var(--accent); color: var(--accent); background: #f9eaea; }
.badge.b-warn    { border-color: #c08030; color: #8a5418; background: #fcf3e8; }
.badge.b-bad     { border-color: #a8481a; color: #8a3a10; background: #fbe9dc; font-weight: 600; }
.badge.b-err     { border-color: #a8481a; color: #8a3a10; background: #fbe9dc; font-weight: 600; }
.badge.b-pending { border-color: var(--rule); color: var(--ink-faint); background: var(--bg); }
.badge.b-neutral { color: var(--ink-faint); }

/* ---------- positions block ---------- */

.positions { margin: 1rem 0; }
.positions dt {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.06em; font-weight: 600;
  font-size: 0.84rem; color: var(--ink-faint);
  margin-top: 0.85rem;
}
.positions dd {
  min-width: 0;
  margin: 0.25rem 0 0 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ---------- transcript ---------- */

.transcript { margin: 1rem 0; }
.msg {
  padding: 1rem 1.1rem;
  margin-bottom: 0.9rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
}
.msg.msg-user { border-left-color: var(--accent); }
.msg.msg-assistant { border-left-color: var(--ink-mid); }
.msg-head {
  display: flex; gap: 0.85rem; align-items: baseline;
  font-family: var(--serif); font-size: 0.82rem;
  margin-bottom: 0.55rem;
}
.msg-role {
  font-variant: small-caps; letter-spacing: 0.08em;
  font-weight: 700; color: var(--accent);
}
.msg-assistant .msg-role { color: var(--ink); }
.msg-turn {
  font-variant: small-caps; letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.message-text {
  font-family: var(--serif); line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.claim-chips {
  list-style: none; padding: 0; margin: 0.7rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.claim-chip {
  display: inline-flex; gap: 0.5rem; align-items: baseline;
  padding: 0.25rem 0.6rem;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  font-size: 0.86rem;
  max-width: 100%;
}
.claim-chip .claim-scheme {
  font-family: var(--mono); font-size: 0.78rem;
  color: var(--accent); white-space: nowrap;
}
.claim-chip .claim-text { color: var(--ink-mid); }
.claim-chip .claim-thesis {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.06em; font-size: 0.7rem;
  color: var(--accent); font-weight: 700;
}

/* ---------- scheme counts ---------- */

.scheme-counts { list-style: none; padding: 0; margin: 0.5rem 0; }
.scheme-counts li {
  display: flex; justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--rule-soft);
  font-family: var(--serif); font-size: 0.92rem;
}
.scheme-counts .scheme-name { color: var(--ink); }
.scheme-counts .scheme-num {
  color: var(--accent); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- claim id rendering ---------- */

.claim-id {
  font-family: var(--mono); font-size: 0.84em;
  color: var(--ink-faint);
}
.claim-text-cell { max-width: 30em; }

/* ---------- graph canvas ---------- */

.graph-canvas {
  position: relative;
  width: 100%;
  height: 480px;
  border: 1px solid var(--rule);
  background: var(--paper);
  margin: 1rem 0;
}
/* Cytoscape normally injects this rule through an inline style element. The
   graph head provides its sentinel id and this self-hosted sheet supplies the
   rule, keeping the live demo compatible with a self-only CSP. */
.__________cytoscape_container { position: relative; }

/* ---------- play landing ---------- */

.staff-preview-banner {
  border: 1px solid #c87f0a;
  border-left: 4px solid #c87f0a;
  background: #fff7e6;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.play-course-context {
  min-width: 0;
  border-left: 4px solid var(--accent);
  padding: 0.85rem 1rem;
  margin-bottom: 1.75rem;
  background: var(--paper);
}
.play-course-context h1 { margin-bottom: 0.35rem; }
.play-course-context .kicker { margin-bottom: 0.3rem; }
.course-meta { color: var(--ink-mid); margin-bottom: 0.75rem; }
.course-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.8rem;
  font-family: var(--serif);
  font-size: 0.92rem;
}
.course-switcher span { color: var(--ink-mid); }
.course-switcher a { overflow-wrap: anywhere; }
.course-switcher a.is-current {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.play-action-title { margin-top: 0; }

@media (max-width: 480px) {
  .play-course-context { padding: 0.75rem; }
  .course-switcher { align-items: flex-start; flex-direction: column; }
}

.week-group { margin: 2.5rem 0; }
.week-head {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.25rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.4rem;
  margin-bottom: 1.25rem;
}

.topic-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 760px) {
  .topic-list { grid-template-columns: 1fr 1fr; }
}

.topic-card {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 1.2rem 1.3rem;
}
.topic-card h3 {
  font-family: var(--serif); font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.65rem;
  letter-spacing: -0.005em;
}
.topic-positions p {
  margin: 0 0 0.45rem;
  font-size: 0.94rem;
  color: var(--ink-mid);
  line-height: 1.55;
}
.pos-label {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.05em; font-weight: 700;
  color: var(--accent); font-size: 0.85rem;
  margin-right: 0.3em;
}
.topic-begin { margin-top: 1rem; }

/* ---------- debate topic header ---------- */

.debate-topic {
  margin: 2.5rem auto 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--ink);
  text-align: center;
  max-width: 740px;
}
.debate-topic .kicker { text-align: center; }
.debate-topic h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  letter-spacing: -0.018em;
  margin: 0.4rem auto 0.8rem;
  max-width: 22em;
}
.room-positions {
  margin: 1.2rem auto 0;
  padding-left: 1rem;
  border-left: 2px solid var(--rule-soft);
  text-align: left;       /* keep the position list readable */
  max-width: 38em;
}
.small-text { font-size: 0.88rem; }

/* ---------- paste warning ---------- */

.paste-warning {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent);
  background: #f9eaea;
  border-left: 3px solid var(--accent);
  padding: 0.55rem 0.85rem;
  margin: 0 0 1rem;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.paste-warning.is-visible {
  opacity: 1;
}

/* ---------- debate room ---------- */

.debate-room {
  max-width: 740px;
  margin: 0 auto;
}
.conversation { margin: 1rem 0; }
.turn-prose { min-width: 0; overflow-wrap: anywhere; }

.turn {
  margin: 2.2rem 0;
  padding-left: 1.3rem;
  border-left: 2px solid var(--ink);
}
.turn-student { border-left-color: var(--accent); }
.turn-ai      { border-left-color: var(--ink); }

.turn-head {
  display: flex; align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 0.55rem;
}
.turn-speaker {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--ink);
}
.turn-student .turn-speaker { color: var(--accent); }
.turn-meta {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.74rem;
  color: var(--ink-faint);
}
.turn-prose {
  font-family: var(--serif);
  font-size: 1.04rem;
  line-height: 1.68;
  color: var(--ink);
  max-width: 38em;
}
.turn-prose p { margin: 0 0 0.85rem; }
.turn-prose p:last-child { margin-bottom: 0; }

/* ---------- composer ---------- */

.composer {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.composer label {
  display: block;
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.08em; font-weight: 700;
  font-size: 0.86rem;
  color: var(--ink);
  margin-bottom: 0.55rem;
}
.composer textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.04rem;
  line-height: 1.65;
  padding: 0.55rem 0;
  border: none;
  border-bottom: 1.5px solid var(--rule-strong, var(--ink));
  background: transparent;
  color: var(--ink);
  resize: vertical;
  min-height: 110px;
  outline: none;
  box-sizing: border-box;
  display: block;
}
.composer textarea::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
.composer textarea:focus {
  border-bottom: 2px solid var(--accent);
}
.composer-actions {
  display: flex; gap: 1rem; align-items: center;
  margin-top: 1rem;
}
.btn-secondary {
  font-family: var(--serif);
  font-size: 0.95rem;
  background: transparent;
  border: 1px solid var(--rule-strong, var(--rule));
  color: var(--ink-mid);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.composer-help { margin-top: 1rem; }

/* ---------- composing placeholder ---------- */

.composing {
  margin: 2.2rem 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-faint);
  text-align: center;
}
.composing-elapsed {
  margin-left: 0.4em;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.composing-error {
  color: var(--accent);
  margin: 0;
}

/* ---------- session expired ---------- */

.session-expired {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
}
.session-expired p { margin: 0; color: var(--ink-mid); }

/* ---------- review claim list ---------- */

.claim-list { list-style: none; padding: 0; margin: 1.2rem 0; }
.claim-list li {
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--rule-soft);
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem;
  align-items: baseline;
}
.claim-list .claim-scheme {
  font-family: var(--mono); font-size: 0.82rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.claim-list .claim-text {
  font-family: var(--serif); color: var(--ink);
  line-height: 1.55;
}

.muted-h2 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }

/* ---------- charts ---------- */

.chart-svg { width: 100%; max-width: 720px; height: auto; margin: 1rem 0; display: block; }
.sparkline { vertical-align: middle; }

/* ---------- linguistic profile ---------- */

.linguistic-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 800px) { .linguistic-grid { grid-template-columns: repeat(2, 1fr); } }

.tag-student, .tag-ai {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.06em; font-size: 0.78rem;
  padding: 0.05em 0.45em;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.tag-student { color: var(--accent); border-color: var(--accent); }
.tag-ai { color: var(--ink-mid); }

.role-assistant { background: var(--rule-soft); }
.role-assistant td { color: var(--ink-soft); }

/* ---------- empty / dim ---------- */

.dim { color: var(--ink-faint); }
.empty { color: var(--ink-faint); font-style: italic; }

/* ---------- /play/enter (public UID landing) ---------- */

.enter-card {
  max-width: 36rem;
  margin: 3rem auto;
  padding: 2.5rem 2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.enter-card h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0 0 0.75rem;
}
.enter-card .lede {
  font-family: var(--serif);
  color: var(--ink-mid);
  line-height: 1.5;
  margin: 0 0 1.25rem;
}
.enter-form {
  display: grid;
  gap: 0.4rem;
  margin: 1.25rem 0 1rem;
}
.enter-form label {
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--ink-mid);
  margin-top: 0.65rem;
}
.enter-form input[type="text"] {
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.enter-form input[type="text"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.enter-form button {
  margin-top: 1rem;
  justify-self: start;
}
.enter-card .fine-print { margin-top: 1.25rem; }

.notice {
  font-family: var(--serif);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  margin: 0 0 1rem;
}
.notice-error {
  border-color: var(--accent);
  color: var(--accent);
  background: #fdf6f6;
}

/* ---------- room: positions block + recommended turns ---------- */

.room-positions { margin: 0.75rem 0 1.5rem; }
.room-positions p { margin: 0 0 0.4rem; }
.pos-label {
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--ink-mid);
  margin-right: 0.35rem;
}
.recommended-turns {
  margin-top: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-left: 2px solid var(--accent);
  background: #fbf8f8;
}

/* ---------- opening-statement page ---------- */

/* Pre-debate reading passage. Sits above the opening-statement
   instructions on /play/d/:id/pre. Collapsible so a student who has
   already read it can fold it away and get to the composer. */
.reading-passage {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: #fcfcfa;
  border-left: 2px solid var(--ink-mid);
}
.reading-passage > summary {
  cursor: pointer;
  list-style: none;
}
.reading-passage > summary::-webkit-details-marker { display: none; }
.reading-passage > summary h2 {
  display: inline;
  margin: 0;
}
.reading-passage > summary::after {
  content: " \2014 hide";
  font-size: 0.85rem;
  color: var(--ink-mid);
}
.reading-passage:not([open]) > summary::after { content: " \2014 show"; }
.reading-passage > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.reading-passage-body {
  margin-top: 0.75rem;
  font-family: var(--serif);
  color: var(--ink-mid);
  line-height: 1.6;
  max-width: 62ch;
}
.reading-passage-body p { margin: 0 0 0.8rem; }
.reading-passage-body p:last-child { margin-bottom: 0; }
.reading-passage-body strong { color: var(--ink); }

.pre-instructions {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: #fbf8f8;
  border-left: 2px solid var(--accent);
}
.pre-instructions h2 { margin-top: 0; }
.pre-instructions p { margin: 0 0 0.6rem; }
.role-callout {
  font-family: var(--serif);
  color: var(--ink-mid);
  margin-top: 0.8rem !important;
}
.role-list {
  margin: 0.35rem 0 0.6rem;
  padding-left: 1.25rem;
  font-family: var(--serif);
  color: var(--ink-mid);
  line-height: 1.5;
}
.role-list li { margin-bottom: 0.35rem; }
.role-list li strong { color: var(--ink); }

.submitting-overlay {
  margin: 1.5rem 0;
  padding: 1.25rem 1.25rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--paper);
  font-family: var(--serif);
  color: var(--ink-mid);
  font-style: italic;
  text-align: center;
}
.submitting-overlay p { margin: 0; }

/* ---------- closing-statement page ---------- */

.first-turn {
  margin: 1rem 0 1.25rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.first-turn summary {
  cursor: pointer;
  padding: 0.55rem 0.75rem;
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  color: var(--ink-mid);
}
.first-turn summary:hover { color: var(--accent); }
.first-turn-body {
  padding: 0.5rem 0.85rem 0.85rem;
  font-family: var(--serif);
  color: var(--ink-mid);
  white-space: pre-wrap;
  line-height: 1.5;
  border-top: 1px solid var(--rule-soft);
}

/* ---------- review: pre / post position evolution ---------- */

.pre-post { margin-top: 2rem; }
.pre-post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}
@media (max-width: 800px) {
  .pre-post-grid { grid-template-columns: 1fr; }
}
.pre-post-block {
  min-width: 0;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--paper);
  padding: 0.75rem 0.9rem;
}
.pre-post-block header { margin-bottom: 0.4rem; }
.pre-post-label {
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--ink-mid);
}
.pre-post-body {
  min-width: 0;
  font-family: var(--serif);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
  color: var(--ink-mid);
}

/* ---------- claim list (review) ---------- */

.claim-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.4rem;
}
.claim-list li {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.claim-scheme {
  font-family: var(--mono, monospace);
  font-size: 0.82rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.claim-text {
  font-family: var(--serif);
  color: var(--ink-mid);
  line-height: 1.5;
}

/* ---------- course management ---------- */

.role-badge {
  display: inline-block;
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  padding: 0.05em 0.5em;
  border: 1px solid var(--rule);
}
.role-owner       { border-color: var(--accent); color: var(--accent); background: #fdf6f6; }
.role-instructor  { border-color: var(--accent); color: var(--accent); }
.role-ta          { border-color: var(--ink-mid); color: var(--ink-mid); }
.role-read_only   { border-color: var(--ink-faint); color: var(--ink-faint); }

.course-form {
  display: grid;
  gap: 0.4rem;
  max-width: 36rem;
}
.course-form label {
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--ink-mid);
  margin-top: 0.75rem;
}
.course-form input[type="text"],
.course-form input[type="number"],
.course-form textarea,
.course-form select {
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.course-form input[disabled] {
  background: var(--rule-soft);
  color: var(--ink-faint);
}
.course-form input:focus,
.course-form textarea:focus,
.course-form select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.course-form .field-hint { margin: -0.15rem 0 0; }
.course-form label.checkbox {
  font-variant: normal;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.course-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.course-actions .btn-primary { margin-top: 0; }
.course-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.course-hub .hub-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: grid;
  gap: 0.6rem;
}
.course-hub .hub-list li {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.course-hub .hub-list li a { display: inline-block; margin-right: 0.6rem; }
.course-hub .hub-list li span { display: inline; }

/* Instructor pages lead with debates and transcripts; the computed
   measures wait behind one "Show more analytics" control. */
.more-analytics {
  margin: 2.5rem 0;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}
.more-analytics > summary {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--paper);
  font-family: var(--serif); font-size: 0.95rem; font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.more-analytics > summary::-webkit-details-marker { display: none; }
.more-analytics > summary::before { content: "+\00a0"; }
.more-analytics[open] > summary::before { content: "\2212\00a0"; }
.more-analytics > summary:hover { background: var(--rule-soft); }
.more-analytics > summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.more-analytics .when-open { display: none; }
.more-analytics[open] .when-open { display: inline; }
.more-analytics[open] .when-closed { display: none; }
.more-analytics-intro { margin: 1rem 0 0; max-width: 46rem; }
.stat-hint,
.kv-hint {
  margin-top: 0.3rem;
  font-size: 0.8rem; line-height: 1.4;
  color: var(--ink-soft);
}
.message-claims { margin-top: 0.6rem; font-size: 0.86rem; }
.message-claims > summary {
  cursor: pointer;
  color: var(--ink-soft);
  min-height: 44px;
  display: flex; align-items: center;
  list-style: none;
}
.message-claims > summary::-webkit-details-marker { display: none; }
.message-claims > summary::before { content: "+\00a0"; }
.message-claims[open] > summary::before { content: "\2212\00a0"; }
.message-claims > summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.add-instructor-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem) auto;
  gap: 0.5rem;
  align-items: end;
  max-width: 36rem;
  min-width: 0;
}
.staff-form-field {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}
.staff-form-field label {
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--ink-mid);
}
.add-instructor-form input,
.add-instructor-form select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.add-instructor-form button { min-height: 44px; }
.staff-identity { overflow-wrap: anywhere; }
.staff-action-button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
}
@media (max-width: 700px) {
  .add-instructor-form { grid-template-columns: minmax(0, 1fr); }
  .add-instructor-form button { width: 100%; }
}

.inline-form { display: inline; margin: 0; padding: 0; }
.course-restore-form { margin: 0; }
.course-restore-form .btn-secondary {
  min-height: 44px;
  margin: 0;
}
.forbidden-card .btn-secondary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  box-sizing: border-box;
}

.checkbox-grid {
  display: grid;
  gap: 0.25rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  max-height: 14rem;
  overflow-y: auto;
}
.checkbox-grid label {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink);
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.4rem;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-variant: normal;
}
.checkbox-grid input[type="checkbox"] { margin-top: 0.2rem; }
.checkbox-grid .src-title { font-weight: 500; }
.checkbox-grid .dim { display: block; margin-top: 0.1rem; }

.row-archived td { color: var(--ink-faint); }

.upload-form {
  display: grid;
  gap: 0.4rem;
  max-width: 36rem;
  min-width: 0;
}
.upload-form input,
.upload-form select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.upload-form label {
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--ink-mid);
  margin-top: 0.75rem;
}
.upload-form input[type="text"],
.upload-form input[type="number"],
.upload-form input[type="file"],
.upload-form select {
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.upload-form input[type="file"] { padding: 0.45rem 0.3rem; }

.material-processing-status p { margin: 0; }
.material-status-refresh {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
}
.material-action-button {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
}

/* Materials-page processing chips, same semantics as the status
   badges above: in-progress amber, failure the deeper burnt amber. */
.b-pending  { color: var(--ink-faint); border-color: var(--rule); background: var(--bg); }
.b-warn     { color: #8a5418; border-color: #c08030; background: #fcf3e8; }
.b-err      { color: #8a3a10; border-color: #a8481a; background: #fbe9dc; font-weight: 600; }

.error-detail {
  margin-top: 0.3rem;
  font-size: 0.85rem;
}
.error-detail summary {
  cursor: pointer;
  color: var(--accent);
}
.error-detail pre {
  white-space: pre-wrap;
  /* A provider message can carry a signed URL with no wrap opportunity
     in it. Without this, one such word widens the materials table past
     the scroll region and pushes the action buttons out of reach. */
  overflow-wrap: anywhere;
  background: var(--rule-soft);
  padding: 0.4rem 0.6rem;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  border-left: 2px solid var(--accent);
}

/* ---------- argumentation graph legend + node detail ---------- */

.graph-legend {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  font-family: var(--serif);
  font-size: 0.88rem;
  color: var(--ink-mid);
}
.graph-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.lg-dot {
  display: inline-block;
  width: 1.5rem;
  height: 0;
  border-top-width: 3px;
  border-top-style: solid;
}
.lg-supports    { border-top-color: #2f8a3e; }
.lg-challenges  { border-top-color: #c98b1d; border-top-style: dashed; }
.lg-undercuts   { border-top-color: #d96e1f; }
.lg-rebuts      { border-top-color: #b32424; border-top-width: 4px; }
.lg-elaborates  { border-top-color: #2c5aa0; }
.lg-other       { border-top-color: #8a8b90; }

.node-detail {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  min-height: 4rem;
}
.node-detail .nd-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}
.node-detail .nd-speaker {
  padding: 0.05em 0.4em;
  border: 1px solid var(--rule);
}
.node-detail .nd-speaker.is-student { color: var(--accent); border-color: var(--accent); }
.node-detail .nd-speaker.is-ai      { color: var(--ink-mid); }
.node-detail .nd-turn  { color: var(--ink-mid); }
.node-detail .nd-thesis {
  padding: 0.05em 0.4em;
  border: 1px solid var(--accent);
  background: #fdf6f6;
  color: var(--accent);
}
.node-detail .nd-scheme {
  font-family: var(--serif);
  color: var(--ink-mid);
  font-size: 0.9rem;
  margin-bottom: 0.45rem;
}
.node-detail .nd-text {
  font-family: var(--serif);
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
}

.notice-ok {
  border-color: #1f6f3e;
  color: #1f6f3e;
  background: #f3faf5;
}

/* ---------- sign-out as button (UID student) ---------- */

.signout-form {
  display: inline;
  margin: 0;
  padding: 0;
}
.link-button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-button:hover { color: var(--accent-mid); }

/* ---------- W6 clarity pass: welcome, checklist, share, help ---------- */

/* First-run welcome (courses list with no courses) */
.welcome-first { max-width: 660px; margin: 3rem auto 0; text-align: center; }
.welcome-first h1 { margin-bottom: 0.5rem; }
.welcome-first .lede { margin: 0 auto 1.25rem; max-width: 34rem; }
/* The global p rule caps paragraphs at 36em and anchors them left;
   inside this centered layout every paragraph box must center too,
   or its inline content (the create button, notices) sits off-axis. */
.welcome-first p { margin-left: auto; margin-right: auto; }
.welcome-action { margin: 0 auto 2rem; }
.setup-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.75rem;
  text-align: left;
}
.setup-step-hint { display: flex; flex-direction: column; gap: 0.35rem; }
.setup-step-hint strong { font-size: 0.97rem; }
.setup-step-hint span { font-size: 0.9rem; color: var(--ink-soft); }
@media (max-width: 720px) {
  .setup-steps-grid { grid-template-columns: 1fr; }
}

/* Course setup checklist (course overview until setup is done) */
.setup-checklist {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0;
}
.setup-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.75rem;
  border-bottom: 1px solid var(--rule);
}
.setup-title {
  font-variant: small-caps; letter-spacing: 0.06em;
  font-size: 0.85rem; color: var(--ink-mid);
}
.setup-step {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.25rem 1.75rem;
}
.setup-step + .setup-step { border-top: 1px solid var(--rule-soft); }
.step-marker {
  width: 1.65rem; height: 1.65rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 0.88rem;
  margin-top: 0.1rem;
}
.step-done    { border: 1px solid #3a7a3a; color: #3a7a3a; }
.step-current { background: var(--accent); border: 1px solid var(--accent); color: var(--paper); }
.step-todo    { border: 1px solid var(--rule); color: var(--ink-faint); }
.setup-step-body { display: flex; flex-direction: column; gap: 0.4rem; }
.setup-step-body strong { font-size: 1.03rem; }
.setup-step-body .dim { font-size: 0.92rem; }
.setup-step-body .btn-primary { align-self: flex-start; margin-top: 0.25rem; }

/* Share page */
.share-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.75rem 2rem;
  max-width: 640px;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.share-label {
  font-variant: small-caps; letter-spacing: 0.06em;
  font-size: 0.85rem; color: var(--ink-mid);
}
.share-row { display: flex; gap: 0.65rem; align-items: stretch; }
.share-link {
  flex-grow: 1;
  font-family: var(--mono); font-size: 0.92rem;
  background: var(--bg); border: 1px solid var(--rule);
  padding: 0.7rem 0.85rem;
  overflow-wrap: anywhere;
}
.share-explain { margin: 0; }

/* Materials upload drop area. The label wraps the native file input,
   so clicking anywhere in the panel opens the picker and dropping a
   file onto the input inside works without any script. */
.upload-drop {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  border: 1px dashed var(--rule);
  background: var(--paper);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  margin-bottom: 1.25rem;
}
.upload-drop:hover { border-color: var(--ink-soft); }
.upload-drop-title { font-size: 1rem; }
.upload-drop input[type="file"] { margin-top: 0.5rem; }

/* Login refinements */
.auth-divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.1rem 0;
  color: var(--ink-faint);
  font-variant: small-caps; letter-spacing: 0.06em; font-size: 0.8rem;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex-grow: 1; height: 1px; background: var(--rule-soft);
}
.auth-code-details { margin-top: 0.9rem; }
.auth-code-details summary {
  cursor: pointer; font-size: 0.92rem; color: var(--ink-soft);
}
.auth-code-details form { margin-top: 0.75rem; }

/* Help / FAQ */
.faq h3 { margin: 1.4rem 0 0.35rem; font-size: 1.05rem; }
.faq p { margin: 0 0 0.9rem; max-width: 44rem; color: var(--ink-mid); }

/* Two-doors debates screen */
.two-doors { display: flex; gap: 0.75rem; align-items: center; margin: 1rem 0 0.5rem; }
.two-doors .btn-primary[disabled] { opacity: 0.45; cursor: not-allowed; }
.draft-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.draft-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.draft-title { font-size: 1.06rem; line-height: 1.35; }
.draft-head .badge { flex-shrink: 0; margin-top: 0.15rem; }
.draft-positions { display: flex; flex-direction: column; gap: 0.3rem; }
.draft-positions > div { font-size: 0.95rem; color: var(--ink-mid); display: flex; gap: 0.6rem; }
.draft-position-text { flex: 1 1 auto; }
.draft-positions .pos-label {
  font-variant: small-caps; letter-spacing: 0.06em;
  color: var(--ink-soft); flex-shrink: 0; width: 0.9rem;
}
.draft-actions { display: flex; gap: 1rem; align-items: center; }

/* Material selection for a draft run. Closed by default, so the
   one-click path is unchanged; opening it narrows the run. */

/* The drafting form's own controls clear the 44px touch target. The
   shared button styles land at 43px, which is the regression the
   faculty-demo passcode form already hit once. */
.draft-scope-form .btn-primary,
.draft-scope-form .btn-secondary {
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* A run's scope line names reading titles, which are instructor text
   and can be one unbroken token. */
.run-scope { overflow-wrap: anywhere; }
.scope-picker { margin: 1rem 0 0; }
.scope-picker > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex; align-items: center; gap: 0.4rem;
  flex-wrap: wrap;
}
.scope-groups {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin: 0.5rem 0;
}
/* A group label is instructor free text. It is length-capped on the way
   in, but stored or seeded values are not, so the button wraps instead
   of widening the document. */
.scope-group-button {
  min-height: 44px; min-width: 44px;
  max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.4rem 0.75rem;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.scope-list {
  list-style: none; margin: 0.5rem 0; padding: 0;
  border: 1px solid var(--rule);
  max-height: 22rem; overflow-y: auto;
}
.scope-item + .scope-item { border-top: 1px solid var(--rule); }
.scope-label {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
}
.scope-label input[type="checkbox"] {
  flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin: 0;
}
/* min-width:0 keeps a long reading title inside the row instead of
   widening the document at 320px. */
.scope-text {
  display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto;
  overflow-wrap: anywhere;
}
.scope-count { flex-shrink: 0; white-space: nowrap; }
.scope-total { margin: 0.4rem 0 0; }
.scope-total-warn { color: #8a5418; }

/* Material grouping labels on the Materials page. */
.material-tags { margin-top: 0.3rem; display: flex; flex-wrap: wrap; gap: 0.3rem; min-width: 0; }
.material-tags .badge { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.material-tag-edit { margin-top: 0.35rem; font-size: 0.85rem; }
.material-tag-edit > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.material-tag-edit .inline-form {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.35rem;
}
.material-tag-edit input[type="text"] { min-height: 44px; box-sizing: border-box; flex: 1 1 12rem; min-width: 0; }
.b-pending { border-color: var(--rule); color: var(--ink-faint); background: var(--bg); }
.upload-drop-active { border-color: var(--accent); background: var(--bg); }

/* Queued uploads (material-upload.js). Without the script these stay
   hidden and the form keeps its single Title field. */
.upload-form [hidden] { display: none !important; }
.upload-title-field { display: grid; gap: 0.4rem; min-width: 0; }
.upload-queue {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}
.upload-queue-item {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.upload-queue-item[data-state="done"] { border-color: #1f6f3e; }
.upload-queue-item[data-state="failed"] { border-color: var(--accent); }
.upload-queue-item label { margin-top: 0.25rem; }
.upload-queue-name { margin: 0; overflow-wrap: anywhere; }
.upload-queue-state { margin: 0; color: var(--ink-mid); overflow-wrap: anywhere; }
.upload-queue-item[data-state="failed"] .upload-queue-state { color: var(--accent); }
.upload-queue-item progress { width: 100%; }
.upload-queue-remove { justify-self: start; min-height: 44px; }
.upload-queue-status { font-family: var(--serif); }
/* Empty, the status region takes no space but stays in the accessibility
   tree (display: none would drop it), so its first update is announced. */
.upload-queue-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.upload-queue-status .material-status-refresh { margin-top: 0.5rem; }

/* Single-form pages: a narrow centered column instead of a wide one
   the form half-fills. Set through layout({ narrow: true }). */
.dash-main.dash-main-narrow { max-width: 720px; }

/* Course filter chips on the cross-course list pages */
.course-filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule-soft);
}
.course-chip {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.05em; font-size: 0.85rem;
  color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.15rem 0.7rem;
  text-decoration: none;
}
.course-chip:hover { border-color: var(--ink-soft); color: var(--ink); text-decoration: none; }
.course-chip.is-active {
  border-color: var(--accent); color: var(--accent);
  background: #f9eaea; font-weight: 600;
}

/* ================================================================
   Two rooms, two instruments.

   The instructor room is a course record: warm paper, oxblood, the
   schoolbook serif, generous spacing, made to be read and printed.
   The developer room is an instrument panel: cooler ground, slate
   accent, tighter rhythm, tabular figures for scanning columns of
   numbers. Same components, same tokens, different dial settings, so
   a glance tells you which room you are in before you read a word.
   ================================================================ */

:root[data-room="developer"] {
  /* One brand red across both rooms. The developer room is told
     apart by DENSITY and structure, not by hue: a tighter rhythm,
     tabular figures, and the doubled masthead rule below. An earlier
     slate accent here was a second brand colour, which is exactly
     what the identity is not. Neutrals sit a shade cooler than the
     instructor room's paper so the room still feels like an
     instrument, without introducing blue. */
  --bg:         #f8f8f7;
  --paper:      #ffffff;
  --ink:        #15161a;
  --ink-mid:    #3a3b40;
  --ink-soft:   #5e5f64;
  --ink-faint:  #8a8b90;
  --rule:       #d5d3cd;
  --rule-soft:  #eae8e3;
}

/* Denser rhythm: the developer reads tables, not paragraphs. */
:root[data-room="developer"] .dash-main { padding-top: 1.75rem; }
:root[data-room="developer"] h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
:root[data-room="developer"] h2 { margin-top: 1.9rem; }
:root[data-room="developer"] .page-head { margin-bottom: 1.4rem; }
:root[data-room="developer"] .data-table { font-size: 0.9rem; }
:root[data-room="developer"] .data-table td,
:root[data-room="developer"] .data-table th { padding-top: 0.45rem; padding-bottom: 0.45rem; }

/* Figures line up in columns, so they get tabular figures and the
   mono face wherever a number is the content. */
:root[data-room="developer"] .data-table td.num,
:root[data-room="developer"] .stat-num {
  font-variant-numeric: tabular-nums lining-nums;
}
:root[data-room="developer"] .data-table td.num { font-family: var(--mono); font-size: 0.86em; }

/* The masthead rule states the room: solid ink for the record view,
   a doubled slate rule for the instrument panel. */
:root[data-room="developer"] .dash-header {
  border-bottom: 3px double var(--ink);
}
:root[data-room="developer"] .dash-header-top { padding-top: 0.75rem; padding-bottom: 0.6rem; }
:root[data-room="developer"] .primary-nav a { padding: 0.45rem 0; }


/* Course context selector in the header. The dashboard's answer to
   "which course am I in?": pick once, every page follows. */
.course-switch {
  display: flex; align-items: center; gap: 0.5rem;
  margin-left: auto;
}
.course-switch-label {
  font-family: var(--serif); font-variant: small-caps;
  letter-spacing: 0.06em; font-size: 0.78rem; color: var(--ink-faint);
}
.course-switch select {
  font-family: var(--serif); font-size: 0.92rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.25rem 0.5rem; max-width: 16rem;
}
.course-switch select:hover { border-color: var(--ink-soft); }
.course-switch select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
@media (max-width: 840px) {
  .dash-header-top { flex-wrap: wrap; gap: 0.75rem; padding: 0.8rem 1rem 0.6rem; }
  .course-switch { margin-left: 0; order: 3; width: 100%; }
  .primary-nav { padding: 0 1rem; gap: 1.25rem; }
}
.course-switch select { font-variant: normal; }

/* ================================================================
   Live faculty demonstration

   This room intentionally resembles the instructor dashboard while
   carrying a persistent privacy boundary and a smaller, guided nav.
   ================================================================ */
:root[data-room="demo"] {
  --bg: #fbfaf7;
  --paper: #ffffff;
}

.faculty-demo-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.55rem 1rem;
  border-bottom: 2px solid #5f3a00;
  background: #ffe3a3;
  color: #321d00;
  font: 600 0.82rem/1.35 var(--sans);
  letter-spacing: 0.02em;
  text-align: center;
}
.faculty-demo-banner strong { color: inherit; }
.demo-header { border-bottom: 3px double var(--ink); }
.demo-header .brand { flex: 0 0 auto; }
.demo-header .user-nav {
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  white-space: normal;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.demo-header .user-tag { min-width: 0; overflow-wrap: anywhere; }
.demo-primary-nav { max-width: 880px; width: 100%; margin: 0 auto; }
.demo-footer { border-top-style: double; border-top-width: 3px; }

.demo-access-card { max-width: 620px; }
.demo-access-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 1.5rem 0 1rem;
}
.demo-access-form input { width: 100%; min-height: 44px; }
.demo-access-form .btn-primary { align-self: flex-start; min-height: 44px; }

.demo-journey-grid,
.demo-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.demo-journey-card {
  min-width: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 1.5rem;
}
.demo-journey-card h2 { margin: 0 0 0.75rem; }
.demo-journey-card p:not(.kicker) { color: var(--ink-mid); }
.demo-journey-card .btn-primary { display: inline-block; margin-top: 0.5rem; }
.demo-boundary-note,
.demo-review-callout {
  border-left: 4px solid var(--accent);
  padding-left: 1.25rem;
}

.demo-analytics-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.35rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
}
.demo-analytics-card:hover { border-color: var(--accent); text-decoration: none; }
.demo-analytics-card span { color: var(--ink-soft); font-size: 0.92rem; }

.demo-topic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-topic-card { min-width: 0; }
.demo-topic-card h2,
.demo-review-callout h2 { min-width: 0; overflow-wrap: anywhere; }
.demo-topic-card .badge { align-self: flex-start; margin-top: 0.75rem; }
.demo-next-step { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 720px) {
  .demo-journey-grid,
  .demo-analytics-grid,
  .demo-topic-list { grid-template-columns: 1fr; }
  .demo-primary-nav { padding-left: 1rem; padding-right: 1rem; }
  .demo-header .user-nav { width: 100%; justify-content: space-between; }
}

@media print {
  :root[data-room="demo"] body { display: none !important; }
}

/* The same, for the one-line summary of a re-read that did not finish. */
.last-attempt {
  overflow-wrap: anywhere;
}