/* ============================================================
   Essay Coach theme — aligned with landing page editorial palette
   Navy/teal/gold, off-white surfaces, Hanken Grotesk + JetBrains Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* neutrals / surfaces — landing page palette */
  --bg:            #f3f8fa;
  --surface:       #ffffff;
  --border:        #c9dce4;
  --border-light:  #e4edf0;
  --text:          #193244;
  --muted:         #637985;

  /* teal secondary accent (links, focus rings, secondary elements) */
  --accent:        #26758e;
  --accent-dark:   #17475d;
  --accent-light:  #f0f8fa;
  --accent-mid:    #bdd8e2;

  --border-focus:  #26758e;

  /* legacy aliases — primary CTA colour is navy; teal for links/badges */
  --teal:          #003b5c;   /* navy — used for btn-primary, brand */
  --teal-dark:     #075174;   /* navy hover */
  --teal-light:    #f2f8fb;
  --teal-mid:      #c9dce4;
  --text-muted:    var(--muted);
  --text-on-teal:  #ffffff;

  /* gold highlight (borrowed from landing illustration palette) */
  --gold:          #c08a2d;
  --gold-light:    #fef7e6;
  --gold-border:   #eabf68;

  --danger:        #991b1b;
  --danger-light:  #fee2e2;
  --warning:       #92400e;
  --warning-light: #fef9ee;

  --score-high:    #166534;
  --score-mid:     #92400e;
  --score-low:     #991b1b;

  /* feedback dimension colours (AA-audited — do not lighten) */
  --dim-coverage-accent:   #92400e;
  --dim-coverage-bg:       #fef9ee;
  --dim-coverage-border:   #fcd34d;
  --dim-depth-accent:      #1d4ed8;
  --dim-depth-bg:          #eff6ff;
  --dim-depth-border:      #93c5fd;
  --dim-structure-accent:  #6d28d9;
  --dim-structure-bg:      #f5f3ff;
  --dim-structure-border:  #c4b5fd;
  --dim-accuracy-accent:   #166534;
  --dim-accuracy-bg:       #f0fdf4;
  --dim-accuracy-border:   #86efac;
  --dim-progress-accent:   var(--accent-dark);
  --dim-progress-bg:       var(--accent-light);
  --dim-progress-border:   var(--accent-mid);

  /* semantic status (delta badges) */
  --pos-text:   #166534;
  --pos-bg:     #dcfce7;
  --pos-border: #86efac;
  --neg-text:   #991b1b;
  --neg-bg:     #fee2e2;
  --neg-border: #fca5a5;
  --neu-text:   var(--muted);
  --neu-bg:     var(--bg);
  --neu-border: var(--border-light);

  --font:         'Hanken Grotesk', sans-serif;
  --mono:         'JetBrains Mono', monospace;

  --radius:       7px;
  --radius-lg:    10px;
  --header-h:     58px;

  /* card shadow — soft, landing-page style */
  --shadow-card:  0 2px 10px rgba(0, 59, 92, 0.07);
  --shadow-panel: 0 4px 20px rgba(0, 59, 92, 0.09);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ── Full-screen body shell ────────────────────────────────── */
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────── */
header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 1px 4px rgba(0, 59, 92, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.75rem;
  flex-shrink: 0;
}

header h1 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #003b5c;
}

header h1 .badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15em 0.6em;
  background: var(--gold-light);
  color: var(--gold);
  border: 1px solid var(--gold-border);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px;
  vertical-align: middle;
}

header nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.username-display {
  color: var(--muted);
  font-size: 0.85rem;
  border-right: 1px solid var(--border-light);
  padding-right: 0.75rem;
  margin-right: 0.25rem;
}

/* ── Site header ─────────────────────────────────────────────── */
header.site-header {
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 1px 4px rgba(0, 59, 92, 0.06);
}

.header-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-mark {
  display: flex;
  align-items: center;
  gap: 7px;
}
.app-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-border);
  flex-shrink: 0;
}
.app-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #003b5c;
}

.app-mark-link {
  text-decoration: none;
}
.app-mark-link:hover .app-name {
  color: var(--accent);
  text-decoration: none;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.instructor-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.5rem;
}
.instructor-global-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.instructor-menu-toggle { display: none; }
.header-nav .nav-link {
  font-size: 0.85rem;
  color: var(--muted);
  transition: color 0.15s;
}
.header-nav .nav-link:hover { color: #003b5c; text-decoration: none; }
.header-nav .nav-link-active {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.header-nav .nav-link:focus-visible,
.class-context-nav a:focus-visible,
.instructor-menu-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.header-nav .nav-link-muted {
  color: var(--muted);
}
.nav-divider {
  width: 1px;
  height: 22px;
  background: var(--border-light);
}

@media (max-width: 640px) {
  .header-nav .nav-link-muted { display: none; }
  .header-lockup { gap: 8px; }
  .instructor-shell { padding: 0.7rem 1rem; }
  .instructor-menu-toggle { display: inline-flex; }
  .instructor-global-links {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 10;
    flex-direction: column;
    align-items: flex-start;
    min-width: 10rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 12px rgba(0, 59, 92, 0.12);
  }
  .instructor-global-links.is-open { display: flex; }
  .header-nav { position: relative; gap: 0.5rem; }
}

.class-context-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  padding: 0.55rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
  font-size: 0.85rem;
}
.class-context-nav span { color: var(--muted); }
.class-context-nav .nav-link-active {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
@media (max-width: 640px) {
  .class-context-nav { padding: 0.55rem 1rem; }
}

/* ── Class context bar (list mode) ───────────────────────────── */
.class-context-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.class-context-name { color: var(--muted); }
.class-context-switch { font-size: 0.85rem; }

/* ── Question preview banner ─────────────────────────────────── */
.preview-banner {
  flex-shrink: 0;
  padding: 0.6rem 1.5rem;
  background: var(--gold-light);
  border-bottom: 1px solid var(--gold-border);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
}
.preview-banner strong { color: var(--gold); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.48em 1.1em;
  border-radius: var(--radius);
  /* appearance: none resets the UA button background on macOS/Safari so that
     <button class="btn"> and <a class="btn"> look identical. Without it,
     <button> keeps a system gray background while <a> has none, so bare-btn
     anchors render as plain text while bare-btn buttons look styled.
     The explicit background and border below replace the UA styling for both
     element types; variant classes (btn-primary etc.) all set their own values
     and are unaffected. */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1.5px solid var(--border);
  cursor: pointer;
  line-height: 1.4;
  /* text-decoration: none so hovering over <a class="btn"> does not underline */
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
/* No a.btn overrides needed: .btn sets color and text-decoration directly,
   and its specificity (0,1,0) beats a/a:hover (0,0,1 / 0,1,0 — same
   specificity as .btn but .btn is later in the file). */

.btn-primary {
  background: #003b5c;
  color: #ffffff;
  border-color: #003b5c;
  box-shadow: 0 3px 8px rgba(0, 59, 92, 0.18);
}
.btn-primary:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  box-shadow: 0 4px 12px rgba(0, 59, 92, 0.24);
}

.btn-secondary {
  background: var(--surface);
  color: #003b5c;
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0, 59, 92, 0.06);
}
.btn-secondary:hover {
  background: var(--accent-light);
  border-color: var(--accent-mid);
}

.btn-small {
  font-size: 0.8rem;
  padding: 0.3em 0.8em;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  box-shadow: none;
}
.btn-danger:hover { background: #a93226; border-color: #a93226; }

.btn-warning {
  background: var(--warning);
  color: #fff;
  border-color: var(--warning);
  box-shadow: none;
}
.btn-warning:hover { background: #9a4607; border-color: #9a4607; }

/* ── Form fields ───────────────────────────────────────────── */
.field {
  margin-bottom: 0.8rem;
}
.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.field label .optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55em 0.8em;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 59, 92, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-mid);
}
textarea { resize: vertical; }

.form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.error {
  color: var(--danger);
  font-size: 0.85rem;
  padding: 0.55rem 0.85rem;
  background: var(--danger-light);
  border: 1px solid #fca5a5;
  border-radius: var(--radius);
}
.draft-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--accent-dark);
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--accent-light);
  border: 1px solid var(--accent-mid);
  border-radius: var(--radius);
}
.draft-notice-close {
  background: none;
  border: none;
  color: var(--accent-dark);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

/* ── Auth pages ────────────────────────────────────────────── */
.auth-layout {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #fbfcfd;
}

.auth-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2.5rem;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-panel);
}

.auth-form h2 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #003b5c;
  margin-bottom: 1.5rem;
}

.auth-link {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}
.auth-link a { color: var(--accent); font-weight: 500; }

/* ── Instructor home ───────────────────────────────────────── */
.instructor-home {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  padding-bottom: 20rem;
  width: 100%;
  /* Full-width scroll container, content centred inside it: the wheel must
     work over the margins, not only over the text column. */
  padding-inline: max(1.5rem, calc((100% - 860px) / 2));
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

#class-home-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.class-home-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s;
}
.class-home-card:hover { box-shadow: 0 4px 16px rgba(0, 59, 92, 0.1); }

.class-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.class-home-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #003b5c;
}

.class-home-figures {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.class-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.class-session-cost {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--accent-mid);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent-light);
}

.class-session-cost-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}

.class-session-cost-header h4 {
  color: var(--accent-dark);
  font-size: 0.85rem;
  font-weight: 700;
}

.session-cost-window {
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--accent-mid);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 600;
}

.session-cost-total {
  margin-bottom: 0.65rem;
  color: var(--text);
  font-size: 0.82rem;
}

.session-cost-total [data-session-metric="total"] {
  color: var(--accent-dark);
  font-size: 1.2rem;
  font-weight: 700;
}

.session-cost-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0.65rem;
  border: 1px solid var(--accent-mid);
  border-radius: var(--radius);
  background: var(--surface);
}

.session-cost-metrics p {
  margin: 0;
  padding: 0.65rem 0.75rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.session-cost-metrics p + p {
  border-left: 1px solid var(--accent-mid);
}

.session-cost-metrics strong {
  color: var(--text);
  font-size: 1rem;
}

.session-cost-range {
  border-top: 1px solid var(--accent-mid);
  padding-top: 0.55rem;
}

.session-cost-note {
  margin: -0.1rem 0 0.55rem;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.session-cost-range summary {
  width: fit-content;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.session-cost-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 0.65rem;
  align-items: end;
  margin-top: 0.7rem;
}

.session-cost-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.session-cost-form input {
  min-width: 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.session-cost-error {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 640px) {
  .session-cost-form {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .session-cost-metrics {
    grid-template-columns: 1fr;
  }

  .session-cost-metrics p + p {
    border-top: 1px solid var(--accent-mid);
    border-left: 0;
  }
}

/* ── Question library ─────────────────────────────────────── */
.questions-page {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  width: 100%;
  padding-inline: max(1.5rem, calc((100% - 1100px) / 2));
}

/* ── Question authoring form ──────────────────────────────── */
.question-form-page {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  width: 100%;
  padding-inline: max(1.5rem, calc((100% - 720px) / 2));
}

.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.4rem;
}

.form-section h2 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #003b5c;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-light);
}

.settings-section-page {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.4rem;
  margin-top: 1.25rem;
}

.settings-section-page h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #003b5c;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-light);
}

.questions-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.questions-section-header h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #003b5c;
}

select.class-filter {
  font-size: 0.8rem;
  padding: 0.3em 0.6em;
  width: auto;
  border: 1px solid var(--border);
}

/* ── Question Cards ────────────────────────────────────────── */
#questions-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.question-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.question-card:hover {
  border-color: var(--accent-mid);
  box-shadow: 0 4px 16px rgba(0, 59, 92, 0.1);
}

.question-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.question-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.question-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.class-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2em 0.65em;
  background: var(--accent-light);
  color: var(--accent-dark);
  border: 1px solid var(--accent-mid);
  border-radius: 9999px;
}

.attempt-badge {
  font-size: 0.72rem;
  padding: 0.2em 0.65em;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9999px;
}

/* Spend-cap warning: shown on class cards and /admin once a class reaches
   eighty percent of its cap, so it reads as a caution without competing with
   the error styling used for an actual refusal. */
.spend-cap-warning {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.15em 0.6em;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8a5a00;
  background: #fff4d6;
  border: 1px solid #e6c26a;
  border-radius: 9999px;
}

/* Question library: tags, draft status, reorder controls */

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.25rem 0 0.4rem;
}

.tag-chip {
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent-dark);
  border: 1px solid var(--accent-mid);
}

.draft-badge {
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: var(--warning-light);
  color: var(--warning);
  border: 1px solid var(--gold-border);
}

.reorder-btn {
  min-width: 2rem;
  font-family: inherit;
  line-height: 1;
}

.question-prompt {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  line-height: 1.45;
}

.question-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.question-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.question-filter-input {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

.question-filter-input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.invite-code-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.invite-code-row code {
  font-family: var(--mono);
  font-size: 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.35em 0.75em;
  border-radius: var(--radius);
  letter-spacing: 0.06em;
  color: #003b5c;
}

/* ── Rubric advice / parsing check (instructor authoring aids) ─ */
.authoring-tool-btn { margin-left: 0.6rem; font-weight: 500; }
.authoring-tool-btn + .authoring-tool-btn { margin-left: 0.4rem; }
.advice-panel {
  margin-top: 0.6rem;
  padding: 0.6rem 0.85rem;
  background: var(--accent-light);
  border: 1px solid var(--accent-mid);
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--text);
}
.advice-panel + .advice-panel { margin-top: 0.4rem; }
.advice-panel-header {
  display: flex;
  justify-content: flex-end;
  margin: -0.3rem -0.5rem 0.1rem 0;
}
.advice-panel-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius);
}
.advice-panel-close:hover { color: var(--text); background: var(--accent-mid); }
.advice-panel-label {
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.advice-panel-label:not(:first-child) { margin-top: 0.6rem; }
.advice-panel ul { margin: 0; padding-left: 1.1rem; }
.advice-panel li { margin-bottom: 0.3rem; line-height: 1.45; }
.advice-panel li:last-child { margin-bottom: 0; }
.advice-panel-ok { color: var(--muted); }
.advice-panel-total {
  font-weight: 600;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--accent-mid);
}
.advice-panel-section {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.2rem 0;
}
.advice-panel-section-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.advice-panel-section-points { flex-shrink: 0; color: var(--muted); }

/* Tips lists are expected to grow over time as more guidance gets added, so
   they cap their height and scroll instead of pushing the rest of the form
   down indefinitely. */
.tips-panel {
  max-height: 16rem;
  overflow-y: auto;
}
.tips-panel ul { padding-left: 1.2rem; }
.tips-panel li { margin-bottom: 0.55rem; line-height: 1.5; }
.tips-panel li:last-child { margin-bottom: 0; }
.tips-panel code {
  background: var(--accent-mid);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  font-size: 0.92em;
}

/* ── Empty state ───────────────────────────────────────────── */
.empty-state {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 2rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* ── Classes page ──────────────────────────────────────────── */
.classes-page {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  width: 100%;
  padding-inline: max(1.5rem, calc((100% - 860px) / 2));
}

.classes-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.class-action-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: var(--shadow-card);
}

.class-action-form h2 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #003b5c;
  margin-bottom: 0.9rem;
}

#classes-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.class-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s;
}
.class-card:hover { box-shadow: 0 4px 16px rgba(0, 59, 92, 0.1); }

.class-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.class-card-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #003b5c;
}

.class-card-figures {
    margin: 0.65rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.class-card-badges {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* ── Student landing ───────────────────────────────────────── */
.question-list-view {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
  overflow-y: auto;
  background: #fbfcfd;
}

/* Auth/code panels are short — keep them vertically centred */
.question-list-view:has(#auth-panel),
.question-list-view:has(#class-code-panel) {
  align-items: center;
}

.class-entry-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-panel);
}

/* The sign-in form carries a longer field label than the class-code box beside
   it ("only required for account creation"), so it needs room the shared 380px
   does not give. Scoped rather than widening .class-entry-form, which
   landing.html also uses. */
#auth-panel .class-entry-form {
  max-width: 440px;
}

#auth-panel h2, #class-code-panel h2 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #003b5c;
  margin-bottom: 1.25rem;
}

/* The classes a signed-in student has already joined, offered in place of the
   class code they would otherwise have to find again. Card styling matches the
   forms beside it, so the two panels read as one choice. */
.student-class-list {
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.5rem;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-panel);
}

.student-class-list li + li {
  border-top: 1px solid var(--border);
}

.student-class-list a {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  color: #003b5c;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

.student-class-list a:hover,
.student-class-list a:focus-visible {
  background: #f2f8fb;
}

.question-list-inner {
  width: 100%;
  max-width: 920px;
}

.question-list-inner h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #003b5c;
  margin-bottom: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-light);
}

.question-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.question-link-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.3rem;
  color: var(--text);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.question-link-card:hover {
  border-color: var(--accent-mid);
  box-shadow: 0 4px 16px rgba(0, 59, 92, 0.1);
  text-decoration: none;
}
.question-link-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #003b5c;
  margin-bottom: 0.4rem;
}
.question-link-card p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Student workspace ─────────────────────────────────────── */
.workspace-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.workspace-left {
  min-height: 0;
  border-right: 1px solid var(--border-light);
  background: var(--surface);
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
}

.workspace-right {
  min-height: 0;
  background: var(--bg);
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}

.prompt-section {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}
.prompt-section h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #003b5c;
  margin-bottom: 0.65rem;
}
.essay-prompt {
  font-size: 0.9rem;
  line-height: 1.65;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  color: var(--text);
}

.answer-section { display: flex; flex-direction: column; flex: 1; }
.answer-section label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.answer-section textarea {
  flex: 1;
  min-height: 160px;
  resize: vertical;
}
.answer-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.attempt-counter {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ── Screen 3: Pre-submit empty state ─────────────────────────── */
.pre-submit-state {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.presubmit-encourage {
  text-align: center;
  padding: 8px 0 4px;
}
.presubmit-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--accent-light);
  border: 2px solid var(--accent-mid);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.presubmit-encourage h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.presubmit-encourage p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 320px;
  margin: 0 auto;
}
.presubmit-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
}
.presubmit-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.dimension-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dim-pill {
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 10px;
  padding: 3px 11px;
  border: 1.5px solid transparent;
}
.dim-pill--coverage  { color: var(--dim-coverage-accent);  background: var(--dim-coverage-bg);  border-color: var(--dim-coverage-border); }
.dim-pill--depth     { color: var(--dim-depth-accent);     background: var(--dim-depth-bg);     border-color: var(--dim-depth-border); }
.dim-pill--structure { color: var(--dim-structure-accent); background: var(--dim-structure-bg); border-color: var(--dim-structure-border); }
.dim-pill--accuracy  { color: var(--dim-accuracy-accent);  background: var(--dim-accuracy-bg);  border-color: var(--dim-accuracy-border); }
.dim-pill--progress  { color: var(--dim-progress-accent);  background: var(--dim-progress-bg);  border-color: var(--dim-progress-border); }

.word-count-value {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}
.word-count-caption {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.word-count-helper {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}
.word-count-track {
  height: 4px;
  border-radius: 2px;
  background: var(--border-light);
  overflow: hidden;
}
.word-count-fill {
  height: 100%;
  width: 0%;
  background: var(--border);
  transition: width 0.15s ease;
}

/* ── Concurrent student reflection ───────────────────────────── */
.self-assessment-section {
  max-width: 520px;
  margin: 0 auto 1rem;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.self-assessment-section h3 {
  margin-bottom: 6px;
  font-size: 1rem;
  color: var(--text);
}
.self-assessment-intro {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}
.self-assessment-confidence {
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.self-assessment-confidence legend,
.self-assessment-satisfaction legend,
.self-assessment-note-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}
.self-assessment-confidence-options,
.self-assessment-satisfaction-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.self-assessment-confidence-options input,
.self-assessment-satisfaction-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.self-assessment-confidence-options label,
.self-assessment-satisfaction-options label {
  padding: 9px 8px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.self-assessment-confidence-options input:focus-visible + label,
.self-assessment-satisfaction-options input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.self-assessment-confidence-options input:checked + label,
.self-assessment-satisfaction-options input:checked + label {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}
.self-assessment-satisfaction {
  min-width: 0;
  margin: 0 0 18px;
  padding: 15px;
  border: 2px solid var(--gold-border);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius-lg);
  background: var(--gold-light);
  box-shadow: 0 4px 14px rgba(146, 64, 14, 0.08);
}
.self-assessment-satisfaction legend {
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.satisfaction-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--warning);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.satisfaction-question {
  display: block;
}
.satisfaction-helper {
  margin-bottom: 12px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.45;
}
.self-assessment-satisfaction-options label {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-color: var(--gold-border);
  background: var(--surface);
  color: var(--text);
}
.self-assessment-satisfaction-options label:hover {
  border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(146, 64, 14, 0.1);
}
.self-assessment-satisfaction-options input:checked + label {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--text-on-teal);
}
.satisfaction-error {
  margin-top: 10px;
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 600;
}
.self-assessment-section textarea {
  width: 100%;
  min-height: 105px;
  resize: vertical;
}
.self-assessment-section .error {
  margin-top: 8px;
}
.self-assessment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.self-assessment-actions .btn {
  flex: 1 1 170px;
}

/* ── Screen 1: Structured feedback cards ─────────────────────── */
.feedback-section {
  margin-bottom: 1rem;
}
.feedback-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.feedback-header-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.feedback-header-summary {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

.feedback-duration,
.feedback-elapsed {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.fb-card {
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 7px;
  border: 1.5px solid var(--border-light);
}
.fb-card-stripe { width: 3px; flex-shrink: 0; }
.fb-card-content { flex: 1; min-width: 0; padding: 9px 12px; }
.fb-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.fb-card-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.fb-card-chip {
  font-size: 10px;
  font-weight: 600;
  background: var(--surface);
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
}
.fb-card-body {
  font-size: 12px;
  color: var(--text);
  line-height: 1.55;
}
.fb-card-body p { margin-bottom: 0.4em; }
.fb-card-body p:last-child { margin-bottom: 0; }

.answer-disclosure {
  margin-bottom: 7px;
  border: 1.5px solid var(--border-light);
  border-radius: 5px;
  background: var(--surface);
}
.answer-disclosure summary {
  padding: 8px 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text));
  cursor: pointer;
}
.answer-disclosure-body {
  padding: 0 12px 10px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.fb-card--coverage  { background: var(--dim-coverage-bg);  border-color: var(--dim-coverage-border); }
.fb-card--coverage  .fb-card-stripe { background: var(--dim-coverage-accent); }
.fb-card--coverage  .fb-card-name,
.fb-card--coverage  .fb-card-chip { color: var(--dim-coverage-accent); border: 1px solid var(--dim-coverage-border); }

.fb-card--depth  { background: var(--dim-depth-bg);  border-color: var(--dim-depth-border); }
.fb-card--depth  .fb-card-stripe { background: var(--dim-depth-accent); }
.fb-card--depth  .fb-card-name,
.fb-card--depth  .fb-card-chip { color: var(--dim-depth-accent); border: 1px solid var(--dim-depth-border); }

.fb-card--structure  { background: var(--dim-structure-bg);  border-color: var(--dim-structure-border); }
.fb-card--structure  .fb-card-stripe { background: var(--dim-structure-accent); }
.fb-card--structure  .fb-card-name,
.fb-card--structure  .fb-card-chip { color: var(--dim-structure-accent); border: 1px solid var(--dim-structure-border); }

.fb-card--accuracy  { background: var(--dim-accuracy-bg);  border-color: var(--dim-accuracy-border); }
.fb-card--accuracy  .fb-card-stripe { background: var(--dim-accuracy-accent); }
.fb-card--accuracy  .fb-card-name,
.fb-card--accuracy  .fb-card-chip { color: var(--dim-accuracy-accent); border: 1px solid var(--dim-accuracy-border); }

.fb-card--progress  { background: var(--dim-progress-bg);  border-color: var(--dim-progress-border); }
.fb-card--progress  .fb-card-stripe { background: var(--dim-progress-accent); }
.fb-card--progress  .fb-card-name,
.fb-card--progress  .fb-card-chip { color: var(--dim-progress-accent); border: 1px solid var(--dim-progress-border); }

.fb-card--withheld {
    border-left: 3px solid var(--text-muted);
}

/* Rephrase button + panel: a plain-language restatement of the whole
   feedback set, requested on demand. The panel deliberately does not use
   the fb-card treatment (left stripe, dimension-coloured label) -- it is
   not another card, and should read as secondary to the ones above it. Its
   background matches .advice-panel's, not any fb-card's. */
.rephrase-row {
  margin-top: 0.4rem;
}
.rephrase-btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3em 0.8em;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: #003b5c;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 59, 92, 0.06);
  transition: background 0.15s, border-color 0.15s;
}
.rephrase-btn:hover:not(:disabled) {
  background: var(--accent-light);
  border-color: var(--accent-mid);
}
.rephrase-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.rephrase-panel {
  margin-top: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: var(--accent-light);
  border: 1px solid var(--accent-mid);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text);
  line-height: 1.55;
}
.rephrase-panel p { margin-bottom: 0.4em; }
.rephrase-panel p:last-child { margin-bottom: 0; }
.rephrase-loading {
  color: var(--muted);
  font-style: italic;
}

/* ── Screen 2: Score ring + bars ──────────────────────────────── */
.score-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.score-header {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 14px;
  margin-bottom: 12px;
}
.score-ring-wrap { position: relative; width: 76px; height: 76px; flex-shrink: 0; }
.score-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.score-ring-value {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--accent-dark);
  line-height: 1.1;
}
.score-ring-max {
  font-size: 9.5px;
  color: var(--muted);
}
.score-header-text { display: flex; flex-direction: column; gap: 6px; }
.score-header-title { display: flex; flex-direction: column; gap: 2px; }
.score-title-main { font-size: 13.5px; font-weight: 700; color: var(--text); }
.score-unavailable-copy { font-size: 12px; color: var(--muted); }
.score-bars-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.delta-pill {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 3px 9px;
}
.delta-pos { color: var(--pos-text); background: var(--pos-bg); border: 1px solid var(--pos-border); }
.delta-neg { color: var(--neg-text); background: var(--neg-bg); border: 1px solid var(--neg-border); }
.delta-neu { color: var(--neu-text); background: var(--neu-bg); border: 1px solid var(--neu-border); }

.score-bar-row + .score-bar-row { margin-top: 8px; }
.score-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}
.score-bar-label { font-size: 12px; font-weight: 600; color: var(--text); }
.score-bar-right { display: flex; align-items: center; gap: 6px; }
.score-bar-fraction { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text); }
.score-bar-status {
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  padding: 1px 8px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  white-space: nowrap;
}
.score-bar-status--coverage  { color: var(--dim-coverage-accent);  border-color: var(--dim-coverage-border); }
.score-bar-status--depth     { color: var(--dim-depth-accent);     border-color: var(--dim-depth-border); }
.score-bar-status--structure { color: var(--dim-structure-accent); border-color: var(--dim-structure-border); }
.score-bar-status--accuracy  { color: var(--dim-accuracy-accent);  border-color: var(--dim-accuracy-border); }
.score-bar-status--progress  { color: var(--dim-progress-accent);  border-color: var(--dim-progress-border); }
.score-bar-delta {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 8px;
  padding: 0 5px;
}
.badge-pos { color: var(--pos-text); background: var(--pos-bg); }
.badge-neg { color: var(--neg-text); background: var(--neg-bg); }
.badge-neu { color: var(--neu-text); background: var(--neu-bg); }
.score-bar-track { background: var(--border-light); height: 7px; border-radius: 3px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 3px; }
.score-bar-fill--coverage  { background: var(--dim-coverage-accent); }
.score-bar-fill--depth     { background: var(--dim-depth-accent); }
.score-bar-fill--structure { background: var(--dim-structure-accent); }
.score-bar-fill--accuracy  { background: var(--dim-accuracy-accent); }
.score-bar-fill--progress  { background: var(--dim-progress-accent); }

/* Streaming */
.streaming-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  font-size: 0.85rem;
  color: var(--muted);
  box-shadow: var(--shadow-card);
}
.dot-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--teal);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .dot-pulse { animation: none; }
}

/* ── Screen 4: Revision history strip ─────────────────────────── */
.history-strip-section {
  flex-shrink: 0;
  border-top: 1px solid var(--border-light);
  background: var(--surface);
  padding: 0.75rem 1.5rem 1rem;
}
.history-strip-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.history-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.history-attempt-card {
  position: relative;
  flex-shrink: 0;
  min-width: 130px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  font-family: var(--font);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.history-attempt-card:hover { border-color: var(--accent-mid); box-shadow: 0 4px 12px rgba(0,59,92,0.1); }
.history-attempt-card.is-latest,
.history-attempt-card.is-selected { border-color: var(--accent); }
.history-latest-tab {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 0 0 0 4px;
}
.history-attempt-score {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.history-attempt-card.is-latest .history-attempt-score-num { color: var(--accent-dark); }
.history-attempt-score-max { font-size: 13px; color: var(--muted); }
.history-attempt-score-unavailable {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin: 8px 0;
}
.history-attempt-label {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  margin-bottom: 12px;
}
.history-bar-chart {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 28px;
  margin-bottom: 6px;
}
.history-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.history-bar-track {
  width: 100%;
  height: 28px;
  background: var(--border-light);
  border-radius: 2px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.history-bar-fill { width: 100%; border-radius: 2px; }
.history-bar-fill--coverage  { background: var(--dim-coverage-accent); }
.history-bar-fill--depth     { background: var(--dim-depth-accent); }
.history-bar-fill--structure { background: var(--dim-structure-accent); }
.history-bar-fill--accuracy  { background: var(--dim-accuracy-accent); }
.history-bar-fill--progress  { background: var(--dim-progress-accent); }
.history-bar-tag { font-size: 8px; color: var(--muted); text-transform: uppercase; }
.history-attempt-summary {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

.score-high { color: var(--score-high); font-weight: 600; }
.score-mid  { color: var(--score-mid);  font-weight: 600; }
.score-low  { color: var(--score-low);  font-weight: 600; }

/* ── Analytics pages ───────────────────────────────────────── */
.analytics-page {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  width: 100%;
  padding-inline: max(1.5rem, calc((100% - 1000px) / 2));
}

.analytics-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}

.analytics-header h2 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #003b5c;
}

.breadcrumb { font-size: 0.85rem; white-space: nowrap; color: var(--accent); }
.breadcrumb:hover { color: var(--accent-dark); text-decoration: none; }

.export-links {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.export-links a { color: var(--accent); }

.analytics-cost {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.analytics-cost h4 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.35rem;
}
.analytics-cost-figure {
  font-family: var(--mono);
  font-size: 1.65rem;
  font-weight: 600;
  color: #003b5c;
  line-height: 1.2;
  margin: 0 0 0.4rem;
}
.analytics-cost-note {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
  max-width: 42rem;
}

/* Tiles */
.analytics-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.analytics-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.tile-value {
  font-family: var(--mono);
  font-size: 1.65rem;
  font-weight: 600;
  color: #003b5c;
  line-height: 1.2;
  margin-bottom: 0.3rem;
}
.tile-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.tile-value-empty {
  /* var(--font), not inherit: inherit takes .tile-value's monospace, and a
     sentence in a mono face sized for a number is what made the empty state
     read as breakage in the first place. */
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.3;
}
.tile-note {
  margin-top: 0.3rem;
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.3;
}

.self-assessment-summary,
.satisfaction-summary {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.self-assessment-summary h3,
.satisfaction-summary h3 {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
}
.self-assessment-summary-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.25rem;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Table */
.analytics-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 0.875rem;
  box-shadow: var(--shadow-card);
}
.analytics-table thead {
  background: #f3f8fa;
  border-bottom: 1px solid var(--border);
}
.analytics-table th {
  text-align: left;
  padding: 0.7rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.analytics-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.analytics-table tr:last-child td { border-bottom: none; }
.analytics-table tr:hover td { background: var(--accent-light); }

.col-center { text-align: center; }
.analytics-muted { color: var(--text-muted); }
.analytics-question-title { font-weight: 600; }
.analytics-link { font-size: 0.85rem; white-space: nowrap; }

/* Score dist */
.score-dist-bar {
  display: flex;
  height: 10px;
  border-radius: 3px;
  overflow: hidden;
  gap: 2px;
  margin-bottom: 0.3rem;
  border: 1px solid var(--border-light);
}
.score-dist-seg { border-radius: 2px; }
.score-dist-low  { background: #ef9090; }
.score-dist-mid  { background: #f0c070; }
.score-dist-high { background: #7dd3b0; }
.score-dist-label { font-size: 0.75rem; color: var(--text-muted); }

/* Answers expand */
.answers-cell {
  background: var(--bg);
  padding: 1rem 1.25rem !important;
}
.attempt-block {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}
.attempt-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.attempt-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.attempt-answer {
  font-size: 0.875rem;
  line-height: 1.65;
  white-space: pre-wrap;
  border: 1px solid var(--border-light);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.5rem;
}
.attempt-confidence {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}
.attempt-reflection-label {
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.attempt-reflection {
  margin-bottom: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.65;
  white-space: pre-wrap;
}
.attempt-feedback-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-dark);
  margin-bottom: 0.3rem;
}
.attempt-feedback {
  font-size: 0.875rem;
  line-height: 1.65;
  white-space: pre-wrap;
  border: 1px solid var(--accent-mid);
  background: var(--accent-light);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
}

/* Feedback disclosure review */
.backlog-line {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.review-queue {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.1rem 1.25rem;
}
.review-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-light);
}
.verdict-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  white-space: nowrap;
}
.verdict-badge--released { color: var(--pos-text); background: var(--pos-bg); border: 1px solid var(--pos-border); }
.verdict-badge--released_unreviewed { color: var(--muted); background: var(--bg); border: 1px solid var(--border); }
.verdict-badge--vetoed_reviewer,
.verdict-badge--vetoed_verbatim { color: var(--danger); background: var(--danger-light); border: 1px solid #f3b4b4; }

/* The withheld draft is the one place this page renders content a student
   must never see. It is styled to be unmistakable next to the feedback the
   student actually received, not merely captioned, so a skim can never read
   it as the same thing. */
.withheld-label {
  margin: 0.9rem 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--danger);
}
.withheld-draft {
  font-size: 0.875rem;
  line-height: 1.65;
  white-space: pre-wrap;
  border: 2px solid var(--danger);
  background: var(--danger-light);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
}

.judgement-control {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
}
.judgement-question {
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.judgement-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.judgement-btn-selected {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.judgement-btn-selected::after {
  content: " \2713";
}
.judgement-note {
  display: block;
  width: 100%;
  max-width: 32rem;
  min-height: 2.4rem;
  font-family: var(--font);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.5rem;
  resize: vertical;
}
.judgement-hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin: -0.25rem 0 0.4rem;
}
.judgement-status {
  font-size: 0.8rem;
  color: var(--muted);
  min-height: 1.1em;
}
.judgement-status-error { color: var(--danger); }
/* Answered cases sit below the queue. Muted rather than boxed differently, so
   the eye lands on outstanding work first without the two reading as
   different kinds of card. */
.review-judged-heading {
  margin: 2rem 0 0.25rem;
  font-size: 1rem;
}
.review-judged-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.review-card-judged {
  border-left: 3px solid var(--border);
  opacity: 0.92;
}

/* Misc */
#student-identity {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
#new-session-btn { align-self: flex-start; margin-bottom: 0.75rem; }

/* Roster (student management) */
.roster-page {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  padding: 2rem max(1.5rem, calc((100% - 1000px) / 2)) 1.5rem;
}
.roster-page > h2 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #003b5c;
  margin-bottom: 0.5rem;
}
.roster-table { width: 100%; border-collapse: collapse; margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.roster-table th, .roster-table td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border-light); }
.roster-table thead th { background: #f3f8fa; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.roster-table tr:hover td { background: var(--accent-light); }
.roster-table tr:last-child td { border-bottom: none; }
.roster-link { font-size: 0.85rem; color: var(--accent); font-weight: 500; }

/* Roster (instructor member management) */
.members-section { margin-bottom: 2.5rem; }
.members-section h2 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #003b5c;
  margin-bottom: 0.5rem;
}
.members-table { width: 100%; border-collapse: collapse; margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.members-table th, .members-table td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border-light); }
.members-table thead th { background: #f3f8fa; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.members-table tr:hover td { background: var(--accent-light); }
.members-table tr:last-child td { border-bottom: none; }
.members-table select.member-role { width: auto; padding: 0.35em 0.6em; font-size: 0.85rem; }
.role-badge { display: inline-block; padding: 0.2em 0.65em; border-radius: 999px; background: var(--accent-light); color: #003b5c; border: 1px solid var(--accent-mid); font-size: 0.78rem; font-weight: 600; }
.role-badge.role-owner { background: var(--accent-light); color: #003b5c; border-color: var(--accent-mid); }
.role-badge.role-editor { background: var(--warning-light); color: var(--warning); border-color: var(--warning); }
.role-badge.role-viewer { background: var(--border-light); color: var(--muted); border-color: var(--border); }

/* ── Administration shell ────────────────────────────────────────────────── */
.app-role {
  display: inline-block;
  margin-left: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.admin-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
}

.admin-wrap { max-width: 1180px; padding-top: 2rem; padding-bottom: 3rem; }
.admin-heading h1 { margin-bottom: 0.2rem; }
.admin-eyebrow {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}
.admin-scope-name { color: var(--muted); margin: 0; }
.admin-intro { color: var(--muted); margin: 1.5rem 0 1rem; max-width: 760px; }

.admin-context-nav {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 1.25rem;
  margin-top: 1.5rem;
  overflow-x: auto;
  white-space: nowrap;
}
.admin-context-nav a {
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.65rem 0;
  text-decoration: none;
}
.admin-context-nav a:hover,
.admin-context-nav a.admin-context-active { border-color: var(--accent); color: var(--text); }

.admin-table-scroll {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-table { border-collapse: collapse; min-width: 680px; width: 100%; }
.admin-table-wide { min-width: 940px; }
.admin-table th,
.admin-table td { border-bottom: 1px solid var(--border-light); padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; }
.admin-table th {
  background: #f3f8fa;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table td { font-size: 0.88rem; }
.admin-table code { font-size: 0.78rem; }
.admin-empty { color: var(--muted); padding: 1.5rem !important; text-align: center !important; }
.admin-workflows { min-width: 150px; }
.admin-workflows a { display: inline-block; margin: 0 0.45rem 0.25rem 0; }
.admin-cap-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.admin-cap-controls input { min-width: 6.5rem; width: 6.5rem; }

.admin-pagination { display: flex; justify-content: flex-end; margin-top: 1rem; }
.admin-pagination a { font-weight: 600; }
.admin-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-top: 1.5rem;
  padding: 1.25rem;
}
.admin-summary h2 { margin-top: 0; }
.admin-summary-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.admin-summary-grid p { margin: 0; }
.admin-summary-grid strong { color: var(--text); display: block; font-size: 1.35rem; }
.admin-callout { border-top: 1px solid var(--border-light); margin: 1rem 0 0; padding-top: 1rem; }
.admin-message { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 1rem; padding: 0.9rem 1rem; }
.admin-message-success { background: #eef8f0; border-color: #b8dfc0; color: #1c6b3e; }
.admin-message-error { background: #fbeceb; border-color: #e4b3ae; color: #a3341f; }
.admin-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; padding: 1.5rem 0; }

@media (max-width: 640px) {
  .admin-wrap { padding-left: 1rem; padding-right: 1rem; padding-top: 1.25rem; }
  .admin-context-nav { gap: 1rem; margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
  .admin-table-scroll { border-radius: var(--radius); }
  .admin-summary { padding: 1rem; }
}
.members-note { margin-top: 0.75rem; font-size: 0.82rem; color: var(--muted); }

/* ── Administration refinement ─────────────────────────────────────────────
   A quieter, more deliberate workspace treatment: generous page gutters,
   clear section rhythm, and controls that read as actions rather than browser
   defaults. Kept scoped so instructor and student workflows are unchanged. */
.admin-page {
  background:
    linear-gradient(180deg, rgba(228, 241, 245, 0.55) 0, rgba(243, 248, 250, 0) 17rem),
    var(--bg);
}
.admin-wrap {
  width: min(100% - 3rem, 1240px);
  margin-inline: auto;
  padding: 2.75rem 0 4rem;
}
.admin-heading {
  padding-left: 0.25rem;
  border-left: 3px solid var(--gold-border);
  padding-inline-start: 1rem;
}
.admin-heading h1 {
  color: #003b5c;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.admin-scope-name { font-size: 0.92rem; }
.admin-context-nav {
  gap: 0.35rem;
  margin: 2rem 0 0;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.74);
  box-shadow: var(--shadow-card);
}
.admin-context-nav a {
  border: 0;
  border-radius: 5px;
  min-height: 2.5rem;
  padding: 0.58rem 0.9rem;
  display: inline-flex;
  align-items: center;
}
.admin-context-nav a:hover,
.admin-context-nav a.admin-context-active {
  border: 0;
  background: var(--accent-light);
  color: var(--accent-dark);
  text-decoration: none;
}
.admin-context-nav a.admin-context-active {
  box-shadow: inset 0 -2px 0 var(--accent);
}
.admin-intro { margin: 1.75rem 0 1.15rem; }
.admin-page button.btn,
.admin-page button.btn-secondary,
.admin-page button.btn-primary {
  min-height: 2.6rem;
  border-radius: 5px;
  padding: 0.58rem 0.95rem;
  font-size: 0.84rem;
  letter-spacing: 0.005em;
  box-shadow: 0 1px 2px rgba(0, 59, 92, 0.08);
}
.admin-page button.btn,
.admin-page button.btn-primary {
  background: #003b5c;
  border-color: #003b5c;
  color: #fff;
}
.admin-page button.btn:hover,
.admin-page button.btn-primary:hover {
  background: #075174;
  border-color: #075174;
}
.admin-page button.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: #17475d;
}
.admin-page button.btn-secondary:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: #003b5c;
}
.admin-page button:disabled { cursor: wait; opacity: 0.58; }
.admin-page button:focus-visible,
.admin-page a:focus-visible,
.admin-page summary:focus-visible,
.admin-page input:focus-visible,
.admin-page select:focus-visible,
.admin-page textarea:focus-visible {
  outline: 3px solid rgba(38, 117, 142, 0.34);
  outline-offset: 2px;
}
#institution-create-form {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  max-width: 44rem;
  margin: 1.5rem 0 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.72);
}
#institution-create-form label { flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
#institution-create-form input { display: block; margin-top: 0.35rem; }
.admin-page input[type="number"],
.admin-page input[type="text"],
.admin-page textarea,
.admin-page select {
  min-height: 2.55rem;
}
.admin-page input[type="number"] {
  width: 100%;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55em 0.8em;
  outline: none;
}
.admin-table-scroll {
  margin-top: 1.25rem;
  background: var(--surface);
  box-shadow: 0 5px 22px rgba(0, 59, 92, 0.08);
}
.admin-table th { padding-top: 0.85rem; padding-bottom: 0.85rem; background: #eaf3f6; color: #42616e; }
.admin-table td { padding-top: 0.82rem; padding-bottom: 0.82rem; }
.admin-table tbody tr:hover td { background: #f5fafb; }
.admin-table td strong { color: #003b5c; }
.admin-pagination { margin-top: 1.25rem; }
.admin-pagination a {
  display: inline-flex;
  align-items: center;
  min-height: 2.55rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.admin-summary {
  margin-top: 1.75rem;
  padding: 1.5rem;
  border-top: 3px solid var(--accent-mid);
}
.admin-summary-grid { gap: 0.85rem; margin-top: 1rem; }
.admin-summary-grid p {
  padding: 0.85rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: #f8fbfc;
}
.admin-summary-grid strong { color: #003b5c; }
.admin-message, .admin-callout {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.admin-page details {
  margin: 1.25rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.72);
}
.admin-page details summary {
  cursor: pointer;
  color: #003b5c;
  font-weight: 600;
  min-height: 2rem;
}
.admin-page details p { margin: 0.7rem 0; max-width: 60rem; }
.admin-page details label { display: block; margin-top: 0.8rem; max-width: 30rem; }
.admin-page details select { margin-top: 0.35rem; }
.admin-footer { background: #eaf3f6; padding: 1.25rem 0; }

@media (max-width: 640px) {
  .admin-wrap { width: min(100% - 2rem, 1240px); padding-top: 1.5rem; }
  .admin-context-nav { margin-top: 1.5rem; margin-inline: 0; }
  #institution-create-form { align-items: stretch; flex-direction: column; }
  #institution-create-form button { width: 100%; }
  .admin-summary { padding: 1rem; }
}

/* Account widget (avatar + name, with a dropdown panel). Shared by the student
   header and the instructor header — only one exists on any given page, so the
   inner #account-panel / #account-gear ids are unambiguous. */
#account-widget, #instructor-account-widget { position: relative; display: inline-block; }
.anonymous-session-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.anonymous-session-reminder {
  max-width: 15rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: right;
}
.account-gear {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font);
}
.account-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent-dark);
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.account-name {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
}
.account-panel { position: absolute; right: 0; top: 110%; z-index: 20; width: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-panel); }
.account-panel h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.account-panel label { display: block; font-size: 0.8rem; margin-bottom: 0.5rem; }
.account-panel input { display: block; width: 100%; margin-top: 0.2rem; }
.account-panel hr { border: none; border-top: 1px solid var(--border); margin: 0.8rem 0; }
.acct-msg { display: block; margin-top: 0.4rem; font-size: 0.8rem; }
.acct-msg.ok { color: var(--teal-dark); }
.acct-msg.err { color: #b3402f; }

/* ── Responsive: tablet / narrow windows (≤ 768 px) ─────────── */
@media (max-width: 768px) {

  .anonymous-session-reminder { display: none; }

  /* Allow the page to scroll naturally when content is stacked */
  body {
    overflow: auto;
  }

  /* ── Writing workspace ─────────────────────────────────────── */
  .workspace-page {
    overflow: auto;
    flex: none;
  }

  .workspace {
    grid-template-columns: 1fr;
    overflow: visible;
    min-height: auto;
    flex: none;
  }

  .workspace-left {
    min-height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .workspace-right {
    min-height: auto;
    overflow: visible;
  }

  /* Give the textarea a sensible fixed height instead of flex-fill */
  .answer-section {
    flex: none;
  }
  .answer-section textarea {
    flex: none;
    min-height: 220px;
  }

  /* History strip can stay horizontal-scroll as-is */

  /* ── Question grid (list view) ─────────────────────────────── */
  .question-grid {
    grid-template-columns: 1fr;
  }

  /* Classes-page two-up action forms */
  .classes-actions {
    grid-template-columns: 1fr;
  }
}

/* ── Extra-narrow phones (≤ 480 px) ─────────────────────────── */
@media (max-width: 480px) {
  header {
    padding: 0 1rem;
  }

  .workspace-left,
  .workspace-right {
    padding: 1rem;
  }

  .question-list-view {
    padding: 1rem;
  }

  .class-entry-form {
    padding: 1.5rem 1.25rem;
  }
}

/* Figures attached to a question, shown beside the prompt in the student
   workspace, the instructor preview, and the edit form's figure list. */
.question-figure {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.5rem 0;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.figure-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.figure-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.figure-item .question-figure {
    max-width: 200px;
    margin: 0;
}

.figure-filename {
    font-size: 0.85rem;
    color: var(--text-muted);
    word-break: break-all;
}

.self-assessment-summary-note {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--muted);
    max-width: 46ch;
}

/* ---- worked example questions (instructor question library) ---- */
/* Visually a different kind of thing from the real cards below it: dashed
   border, tinted ground, and a warning in the header, so it cannot be mistaken
   for a question that exists. It sits at the top of the library, so the dashed
   rule separates it from the list under it. */
.example-questions {
  margin-bottom: 1.25rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 1rem;
}

.example-questions-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.example-questions-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.example-questions-toggle:hover .example-questions-summary {
  text-decoration: underline;
}

.example-questions-caret {
  display: inline-block;
  transition: transform 0.15s;
  color: var(--muted);
}

.example-questions-toggle.is-open .example-questions-caret {
  transform: rotate(90deg);
}

.example-questions-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.example-questions-summary {
  font-size: 0.92rem;
}

.example-questions-warning {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

.example-questions-intro {
  max-width: 62ch;
  margin: 0.75rem 0 1.25rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.example-question-card {
  background: var(--accent-light);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}

.example-question-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.example-question-head h3 {
  margin: 0;
  font-size: 1.02rem;
}

.example-kind-badge {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
  background: var(--surface);
  border: 1px solid var(--accent-mid);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

.example-question-note {
  margin: 0.5rem 0 1rem;
  font-size: 0.86rem;
  color: var(--muted);
}

.example-field {
  margin-bottom: 0.9rem;
}

.example-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.example-field-body {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm, 6px);
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* The model answer is the one field whose paragraph breaks carry meaning: the
   point parser splits on blank lines, so the [n] markers have to stay attached
   to the paragraph they score. */
.example-model-answer {
  white-space: pre-wrap;
}

.example-guidance-list {
  padding-left: 1.4rem;
  list-style: disc;
}

.example-guidance-list li + li {
  margin-top: 0.35rem;
}

.example-question-actions {
  margin-top: 0.75rem;
}

@media (max-width: 640px) {
  .example-questions-warning {
    flex-basis: 100%;
  }
}

/* A short piece of prose under a form field, for advice that should be read
   without opening the Tips panel. */
.field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 68ch;
}

.field-hint code {
  font-size: 0.95em;
}