/* ============================================================
 * BEM3015DA Business Finance — shared.css
 * Used by every interactive case study. Per-case-study index.html
 * loads this via <link rel="stylesheet" href="../_shared/shared.css">.
 *
 * If you need to tweak a single case study only, override these
 * rules in a <style> block inside that case's index.html — do not
 * edit this file unless the change should propagate everywhere.
 * ============================================================ */

/* Brand typeface — Outfit (University of Exeter brand guidelines, free Google font) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* Primary palette — University of Exeter brand guidelines */
  --exeter-green: #003c3c;      /* Exeter Dark Green — lead colour */
  --exeter-dark: #022020;       /* Exeter Night Green — web-only, contrast surfaces */
  --exeter-highlight: #00dca5;  /* Exeter Highlight Green — lead accent (non-text/large text on dark) */
  --accent: #007d69;            /* Exeter Deep Green — text/links/borders on white ONLY, never blocks */
  --accent-light: #e0faf2;      /* Highlight Green tint for soft backgrounds */
  /* Secondary palette — sanctioned for charts, tables, data, navigation accents.
     Coral fails AA for small text: use for borders/large numbers only. */
  --sec-sky: #69b3e7;       /* Morning Sky */
  --sec-sky-tint: #d9ecf9;
  --sec-coral: #fc4c02;     /* Coral Orange — NON-TEXT accents only */
  --sec-coral-tint: #fee4d9;
  --sec-berry: #93272c;     /* Wood Brown — AA on white */
  --sec-purple: #702082;    /* Pure Purple — AA on white */
  --sec-deepsea: #250e62;   /* Deep Sea — AA on white */
  --sec-hay: #ffc72c;       /* Hay — backgrounds/borders with dark text */
  --correct: #0a7c42;
  --correct-bg: #e8f5ee;
  --incorrect: #c62828;
  --incorrect-bg: #fce8e8;
  --hint-bg: #fff8e1;
  --hint-border: #ffc72c;   /* Hay — brand secondary */
  --text: #1a1a1a;
  --text-light: #555;
  --bg: #f8f9fa;
  --card-bg: #fff;
  --border: #dee2e6;
  --group1: #1565c0;
  --group2: #c62828;
  --group3: #2e7d32;
  --group4: #bf5300; /* darkened from #ef6c00 for AA white-text contrast */
  --hint-strong: #8a6d00; /* hint icon/border — AA contrast on hint-bg and white */
  --group5: #6a1b9a;
  --group6: #00838f;
  --group7: #d81b60;
  --group8: #455a64;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* Keyboard focus indicator (visible everywhere without affecting mouse users) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Honour reduced-motion preferences (WCAG 2.3.3 / good practice for 2.2.2) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Horizontal-scroll wrapper for wide financial tables (added by shared.js) */
.table-scroll { overflow-x: auto; }

/* ===== LOGIN SCREEN ===== */
.login-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--exeter-green) 0%, var(--exeter-dark) 100%);
}
.login-card {
  background: white; border-radius: 12px; padding: 2.5rem; width: 100%;
  max-width: 440px; margin: 1rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-card h1 { font-size: 1.3rem; color: var(--exeter-green); margin-bottom: 0.25rem; }
.login-card .subtitle { color: var(--text-light); font-size: 0.9rem; margin-bottom: 1.5rem; }
.login-card label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; color: var(--text); }
.login-card input {
  width: 100%; padding: 0.6rem 0.75rem; border: 2px solid var(--border); border-radius: 6px;
  font-size: 0.95rem; margin-bottom: 1rem; transition: border-color 0.2s;
}
.login-card input:focus { outline: none; border-color: var(--accent); }

.role-buttons { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }
.role-btn {
  flex: 1; padding: 0.75rem; border: 2px solid var(--border); border-radius: 8px;
  background: white; cursor: pointer; text-align: center; transition: all 0.2s; font-size: 0.9rem;
}
.role-btn:hover { border-color: var(--accent); }
.role-btn.selected { border-color: var(--accent); background: var(--accent-light); font-weight: 600; }
.role-btn .role-icon { font-size: 1.5rem; display: block; margin-bottom: 0.25rem; }

.group-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1rem;
}
.group-btn {
  padding: 0.6rem; border: 2px solid var(--border); border-radius: 8px; background: white;
  cursor: pointer; font-size: 1rem; font-weight: 700; transition: all 0.2s; color: var(--g);
}
.group-btn:hover { border-color: var(--g); background: color-mix(in srgb, var(--g) 8%, white); }
.group-btn.selected { border-color: var(--g); background: var(--g); color: white; }

.join-btn {
  width: 100%; padding: 0.75rem; background: var(--exeter-green); color: white; border: none;
  border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.join-btn:hover { background: var(--exeter-highlight); color: var(--exeter-green); }
.join-btn:disabled { background: #aaa; color: white; cursor: not-allowed; }

.student-fields, .instructor-fields { display: none; }
.student-fields.visible, .instructor-fields.visible { display: block; }
.login-error { color: var(--incorrect); font-size: 0.85rem; margin-bottom: 0.75rem; display: none; }

.setup-notice {
  background: var(--hint-bg); border: 1px solid var(--hint-border); border-radius: 6px;
  padding: 0.75rem; margin-bottom: 1rem; font-size: 0.8rem; color: #5d4600;
}

/* ===== HEADER ===== */
header {
  background: linear-gradient(135deg, var(--exeter-green) 0%, var(--exeter-dark) 100%);
  color: white; padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 3px solid var(--exeter-highlight);
}
header .left h1 { font-size: 1.2rem; font-weight: 600; }
header .left p { font-size: 0.8rem; opacity: 0.8; }
header .right { display: flex; align-items: center; gap: 1rem; }
.user-badge {
  padding: 0.35rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; color: white;
}
.logout-btn {
  padding: 0.4rem 0.85rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; background: rgba(255,255,255,0.15); color: white;
  border: 1px solid rgba(255,255,255,0.3); transition: all 0.2s;
}
.logout-btn:hover { background: rgba(255,255,255,0.25); }
.home-btn {
  padding: 0.4rem 0.85rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600;
  background: rgba(255,255,255,0.15); color: white; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.3); transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
}
.home-btn:hover { background: rgba(255,255,255,0.25); }
header .home-btn { margin-right: 1rem; }
header .left { flex: 1; min-width: 0; }

/* Booking call-to-action — appears in the header on every page */
.book-btn {
  padding: 0.4rem 0.9rem; border-radius: 6px; font-size: 0.8rem; font-weight: 700;
  background: var(--exeter-highlight); color: var(--exeter-green); text-decoration: none;
  border: 1px solid var(--exeter-highlight); transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
}
.book-btn:hover { filter: brightness(1.08); }
.book-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Ask Me Anything call-to-action — sits next to the booking button (secondary style) */
.ask-btn {
  padding: 0.4rem 0.9rem; border-radius: 6px; font-size: 0.8rem; font-weight: 700;
  background: rgba(255,255,255,0.14); color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.55); transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
}
.ask-btn:hover { background: rgba(255,255,255,0.26); }
.ask-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* "Work on your own" route on the login screen (for absent students) */
.individual-divider {
  display: flex; align-items: center; text-align: center; gap: 0.6rem;
  margin: 1.1rem 0 0.85rem; color: var(--text-light); font-size: 0.8rem;
}
.individual-divider::before, .individual-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.individual-btn {
  width: 100%; padding: 0.6rem 0.85rem; border-radius: 8px; cursor: pointer;
  background: #fff; color: var(--exeter-green); border: 1.5px solid var(--exeter-green);
  font-family: inherit; font-size: 0.85rem; font-weight: 600; transition: all 0.2s;
}
.individual-btn:hover { background: var(--accent-light); }
.individual-btn:focus-visible { outline: 3px solid var(--exeter-highlight); outline-offset: 2px; }
.individual-note { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--text-light); line-height: 1.4; }
.login-screen { position: relative; }
.home-btn--floating { position: absolute; top: 1rem; left: 1rem; z-index: 10; }

/* ===== PROGRESS BAR ===== */
.progress-bar-container {
  background: white; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 1rem;
}
.progress-bar { flex: 1; height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--exeter-highlight)); border-radius: 4px; transition: width 0.3s; }
.progress-text { font-size: 0.8rem; color: var(--text-light); white-space: nowrap; }

/* ===== NAV TABS ===== */
.nav-tabs {
  display: flex; gap: 0; background: white; border-bottom: 2px solid var(--border);
  padding: 0 1rem; overflow-x: auto;
}
.nav-tab {
  padding: 0.75rem 1rem; border: none; background: none; cursor: pointer;
  font-size: 0.85rem; color: var(--text-light); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s;
}
.nav-tab:hover { color: var(--accent); }
.nav-tab.active { color: var(--accent); border-bottom-color: var(--exeter-highlight); font-weight: 600; }
.nav-tab.completed::after { content: ' \2713'; color: var(--correct); }

/* ===== CONTENT ===== */
.app-container { display: none; }
.app-container.visible { display: block; }
main { max-width: 900px; margin: 0 auto; padding: 1.5rem; }
.section { display: none; }
.section.active { display: block; }

.card {
  background: var(--card-bg); border-radius: 10px; padding: 1.75rem;
  border: 1px solid var(--border); margin-bottom: 1.25rem;
}
.card h2 { font-size: 1.25rem; color: var(--exeter-green); margin-bottom: 0.75rem; padding-bottom: 0.4rem; position: relative; }
.card h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; border-radius: 2px; background: var(--exeter-highlight); }

.context-box {
  background: var(--accent-light); border-left: 4px solid var(--accent); border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem; margin: 1rem 0; font-size: 0.9rem;
}

.exercise { margin-top: 0.5rem; }
.exercise-header {
  font-size: 1rem; font-weight: 700; color: var(--exeter-green); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.exercise-header .icon {
  background: var(--exeter-green); color: white; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
  box-shadow: 0 0 0 2px var(--exeter-highlight);
}

.question { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #eee; }
.question:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.question label { display: block; font-weight: 500; margin-bottom: 0.5rem; font-size: 0.9rem; }

.input-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.input-row input {
  flex: 1; max-width: 200px; padding: 0.5rem 0.75rem; border: 2px solid var(--border);
  border-radius: 6px; font-size: 0.95rem;
}
.input-row input:focus { outline: none; border-color: var(--accent); }
.input-row input.correct { border-color: var(--correct); background: var(--correct-bg); }
.input-row input.incorrect { border-color: var(--incorrect); background: var(--incorrect-bg); }
.unit { font-size: 0.85rem; color: var(--text-light); min-width: 20px; }
.check-btn {
  padding: 0.5rem 1rem; background: var(--exeter-green); color: white; border: none;
  border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: all 0.2s;
}
.check-btn:hover { background: var(--exeter-highlight); color: var(--exeter-green); }

.hint-toggle { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--hint-bg); border:1.5px solid var(--hint-strong); cursor:pointer; color:var(--hint-strong); transition:all 0.2s; flex-shrink:0; vertical-align:middle; }
.hint-toggle:hover { background:var(--hint-strong); color:#fff; }
.hint-toggle.nudge { animation: hintNudge 0.9s ease 2; }
@keyframes hintNudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 199, 44, 0); }
  50% { box-shadow: 0 0 0 7px rgba(255, 199, 44, 0.6); }
}
.hint-toggle svg { width:14px; height:14px; fill:currentColor; }
.hint {
  display: none; background: var(--hint-bg); border: 1px solid var(--hint-border);
  border-radius: 6px; padding: 0.75rem; font-size: 0.85rem; margin-bottom: 0.5rem;
}

/* Feedback stays in the accessibility tree when empty (display:block, zero
   footprint) so role="status" announcements fire reliably on first use. */
.feedback {
  border-radius: 6px; font-size: 0.85rem; display: block; padding: 0; margin-top: 0;
}
.feedback.correct, .feedback.incorrect { padding: 0.6rem 0.75rem; margin-top: 0.5rem; }
.feedback.correct { background: var(--correct-bg); color: var(--correct); }
.feedback.incorrect { background: var(--incorrect-bg); color: var(--incorrect); }

.mcq-options { list-style: none; margin: 0.5rem 0; }
.mcq-options li {
  padding: 0.6rem 1rem; border: 2px solid var(--border); border-radius: 6px;
  margin-bottom: 0.5rem; cursor: pointer; transition: all 0.2s; font-size: 0.9rem;
}
.mcq-options li:hover { border-color: var(--accent); background: var(--accent-light); }
.mcq-options li.selected { border-color: var(--accent); background: var(--accent-light); font-weight: 600; }
.mcq-options li.correct-answer { border-color: var(--correct); background: var(--correct-bg); }
.mcq-options li.wrong-answer { border-color: var(--incorrect); background: var(--incorrect-bg); }

/* ===== NAV BUTTONS ===== */
.nav-buttons { display: flex; justify-content: space-between; margin-top: 1rem; }
.nav-btn {
  padding: 0.6rem 1.25rem; border-radius: 6px; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; border: none;
}
.nav-btn.next { background: var(--exeter-green); color: white; }
.nav-btn.next:hover { background: var(--exeter-highlight); color: var(--exeter-green); }
.nav-btn.prev { background: white; color: var(--accent); border: 2px solid var(--accent); }
.nav-btn.prev:hover { background: var(--accent-light); }

/* ===== SUMMARY ===== */
.score-summary { text-align: center; padding: 1.5rem 0; }
.score { font-size: 2.5rem; font-weight: 700; color: var(--exeter-green); }
.score-summary .label { font-size: 0.9rem; color: var(--text-light); }

/* ===== SCENARIO TABLE ===== */
.scenario-table {
  width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem;
}
.scenario-table th, .scenario-table td {
  padding: 0.5rem 0.75rem; border: 1px solid var(--border); text-align: left;
}
.scenario-table th { background: var(--exeter-green); color: white; font-weight: 600; }
.scenario-table tr:nth-child(even) { background: #f8f9fa; }

/* ===== INSTRUCTOR DASHBOARD ===== */
.dashboard { max-width: 1000px; margin: 0 auto; padding: 1.5rem; }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card {
  background: var(--card-bg); border-radius: 8px; padding: 1.25rem; text-align: center;
  border: 1px solid var(--border);
}
.stat-value { font-size: 2rem; font-weight: 700; color: var(--exeter-green); }
.stat-label { font-size: 0.8rem; color: var(--text-light); margin-top: 0.25rem; }

.refresh-indicator { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.75rem; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf50; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.export-btn {
  padding: 0.4rem 0.85rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; background: white; color: var(--exeter-green); border: none; transition: all 0.2s;
}
.export-btn:hover { background: var(--accent-light); }

.group-panel { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); margin-bottom: 1rem; overflow: hidden; }
.group-header { padding: 0.75rem 1.25rem; color: white; font-weight: 600; font-size: 0.9rem; display: flex; justify-content: space-between; }
.group-body { padding: 0.75rem 1.25rem; }

.student-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 1rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid #eee; }
.student-row:last-child { border-bottom: none; }
.student-name { font-size: 0.85rem; font-weight: 500; }
.student-progress-bar { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.student-progress-fill { height: 100%; border-radius: 3px; }
.student-score { font-size: 0.8rem; color: var(--text-light); white-space: nowrap; }

.toggle-detail { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.75rem; text-decoration: underline; margin: 0.25rem 0; }
.detail-panel { display: none; margin-bottom: 0.5rem; }
.detail-panel.open { display: block; }
.answer-detail-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; margin-top: 0.25rem; }
.answer-detail-table th, .answer-detail-table td { padding: 0.3rem 0.5rem; border: 1px solid #eee; }
.answer-detail-table th { background: #f5f5f5; text-align: left; }
.answer-correct { color: var(--correct); }
.answer-incorrect { color: var(--incorrect); }
.answer-pending { color: #767676; font-style: italic; }

/* ===== SCENARIO SIDE PANEL (optional — for cases with a persistent scenario reference) ===== */
.scenario-banner {
  display: none;
  background: var(--exeter-green);
  padding: 0.65rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.scenario-banner.visible { display: flex; }
.scenario-banner-text { font-size: 0.9rem; color: white; font-weight: 500; }
.scenario-banner-btn {
  background: white;
  color: var(--exeter-green);
  border: none;
  border-radius: 6px;
  padding: 0.55rem 1.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  transition: all 0.2s;
  white-space: nowrap;
}
.scenario-banner-btn:hover { background: var(--accent-light); }
.scenario-banner-btn.active { background: #fee; color: var(--incorrect); }
.scenario-banner-btn.active:hover { background: #fdd; }

.scenario-panel {
  position: fixed; top: 0; right: 0; width: 420px; height: 100vh;
  background: white; z-index: 1001;
  transform: translateX(100%); transition: transform 0.3s ease;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}
.scenario-panel.open { transform: translateX(0); }
body.scenario-open main { margin-right: 430px; max-width: none; transition: margin-right 0.3s ease; }
.scenario-panel-header {
  background: var(--exeter-green); color: white;
  padding: 1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.scenario-panel-header h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.scenario-close-btn {
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
  color: white; border-radius: 6px; padding: 0.3rem 0.7rem;
  cursor: pointer; font-size: 0.85rem; transition: background 0.2s;
}
.scenario-close-btn:hover { background: rgba(255,255,255,0.25); }
.scenario-panel-body {
  flex: 1; overflow-y: auto; padding: 1.25rem;
  font-size: 0.9rem; line-height: 1.6;
}
.scenario-panel-body .context-box { margin: 0.75rem 0; }
.scenario-panel-body h4 { color: var(--exeter-green); margin: 1rem 0 0.5rem 0; font-size: 0.95rem; }
.scenario-panel-body p { margin-bottom: 0.5rem; }

@media (max-width: 768px) {
  .student-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  body.scenario-open main { margin-right: 0; }
  .scenario-panel { width: 100%; }
}

/* Narrow screens: header buttons wrap onto their own row, title gets full width */
@media (max-width: 640px) {
  header { flex-wrap: wrap; gap: 0.5rem 0.75rem; }
  header .left { flex-basis: 100%; order: 2; min-width: 0; }
  header .right { order: 1; margin-left: auto; }
}

/* ============================================================
 * PRINT / PDF — lets students print a completed case study as
 * revision notes. Hides app chrome and interactive controls,
 * reveals every section and hint, and keeps feedback legible
 * in black and white.
 * ============================================================ */
@media print {
  body { background: #fff; }

  /* App chrome and interactive controls — no use on paper */
  .nav-tabs, .progress-bar-container, .scenario-banner, .scenario-panel,
  header .right, .check-btn, .nav-btn, .nav-buttons, .hint-toggle, .export-btn,
  .toggle-detail, .refresh-indicator,
  .note-tooltip,                          /* torbay note tooltips */
  .plenary-controls, .dash-plenary-btn { display: none !important; }

  /* The login screen is hidden by inline style once logged in; this guard
     covers any other hiding mechanism while still letting a logged-out
     page print its login card rather than a blank sheet. We deliberately
     do NOT force the hidden .app-container visible. */
  body:has(.app-container.visible) .login-screen { display: none !important; }

  /* Print every section, not just the active tab */
  .section { display: block !important; }
  .section + .section { margin-top: 1.5rem; }
  .card, .question { break-inside: avoid; }

  /* Reveal all hints — they are revision content */
  .hint { display: block !important; }

  /* Header: dark gradient becomes plain white with green text */
  header { background: #fff !important; color: var(--exeter-green); border-bottom: 2px solid var(--exeter-green); }
  header .left h1, header .left p { color: var(--exeter-green); }

  main { max-width: none; padding: 0; }
  body.scenario-open main { margin-right: 0; }

  /* Feedback prints as shown (students keep their results); left borders
     keep correct/incorrect distinguishable in black and white */
  .feedback.correct { border-left: 4px solid var(--correct); }
  .feedback.incorrect { border-left: 4px dashed var(--incorrect); }

  /* Tables: keep rows together and never clip wide tables */
  tr { break-inside: avoid; }
  .table-scroll { overflow: visible; }

  /* Torbay note references print as plain note numbers (no button chrome) */
  .note-ref { text-decoration: none; color: var(--text); background: none; }
}