/* ============================================================ */
/* Theme: dark (default) + light                                */
/* ============================================================ */

:root, :root[data-theme="dark"] {
  /* Native form widgets (date/time pickers, select popups, scrollbars) follow
     the theme instead of rendering UA-default white-on-dark. */
  color-scheme: dark;
  /* Dark theme — Fred Astaire palette: near-black + champagne gold + warm cream.
     Gold sampled from the FA "DANCERS-blkgold" logo (~#c9aa79 / #bda568). */
  --bg: #121316;
  --bg-2: #1e2128;
  --bg-3: #282d36;
  --line: #3a414c;
  --line-soft: #2a2f37;
  --ink: #f0ece2;
  --ink-dim: #b0a795;
  --ink-faint: #7c7466;
  --accent: #c7a978;        /* FADS gold — PMS 466 (official) */
  --accent-bright: #ddc28d;
  --accent-deep: #2a2414;
  --accent-tint: rgba(199, 169, 120, 0.10);
  --warn: #ab192d;          /* FADS red — PMS 187 (official) */
  --warn-bright: #e2685a;
  --warn-deep: #2c0d12;
  --info: #8bb8c9;
  --info-tint: rgba(139, 184, 201, 0.12);
  --gold: #c7a978;
  /* FADS secondary brand colors (full-brand redesign) */
  --secondary: #3d1152;        /* purple — PMS 2627 (showcases / section accents) */
  --secondary-bright: #b98fd6; /* readable purple on dark */
  --secondary-tint: rgba(166, 120, 200, 0.13);
  --highlight: #ffd200;        /* yellow — PMS 109 (live "NOW" highlight) */
  --highlight-tint: rgba(255, 210, 0, 0.14);
  --highlight-ink: #1a140a;    /* dark text on yellow */
  --brown: #513629;            /* PMS 476 — warm deep neutral */
  --row-alt: rgba(255, 255, 255, 0.035); /* zebra lift for alternating heat rows */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 18px 50px -20px rgba(0, 0, 0, 0.85);
  /* theme-dependent: */
  --header-bg: linear-gradient(180deg, #17191d 0%, rgba(20, 22, 26, 0.97) 100%);
  --body-bg-image:
    radial-gradient(900px 500px at 80% -10%, rgba(201, 169, 111, 0.06), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(140, 150, 170, 0.03), transparent 60%);
  --grain-opacity: 0.03;
  --btn-primary-bg: linear-gradient(180deg, var(--accent) 0%, #b5893a 100%);
  --btn-primary-hover-bg: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 100%);
  --btn-primary-color: #1a140a;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #faf5e9;
  --bg-2: #f5efe0;
  --bg-3: #ebe2c8;
  --line: #d4be8a;
  --line-soft: #e2d5ad;
  --ink: #2a1f15;
  --ink-dim: #6b5638;
  --ink-faint: #8e7a55;
  --accent: #9a6f1c;        /* darkened FADS gold (PMS 466) for contrast on cream */
  --accent-bright: #b8862e;
  --accent-deep: #faf0c4;
  --accent-tint: rgba(154, 111, 28, 0.14);
  --warn: #ab192d;          /* FADS red — PMS 187 (official) */
  --warn-bright: #d35a36;
  --warn-deep: #fce1d6;
  --info: #3c7186;
  --info-tint: rgba(60, 113, 134, 0.12);
  --gold: #876016;
  /* FADS secondary brand colors */
  --secondary: #3d1152;        /* purple — PMS 2627 */
  --secondary-bright: #5a2a78; /* readable purple on cream */
  --secondary-tint: rgba(61, 17, 82, 0.10);
  --highlight: #ffd200;        /* yellow — PMS 109 */
  --highlight-tint: rgba(214, 170, 0, 0.20);
  --highlight-ink: #2a1f15;
  --brown: #513629;
  --row-alt: rgba(80, 60, 20, 0.05); /* zebra lift for alternating heat rows */
  --shadow: 0 8px 22px -10px rgba(80, 60, 20, 0.18);
  --shadow-lift: 0 18px 40px -16px rgba(80, 60, 20, 0.22);
  --header-bg: linear-gradient(180deg, #f5efe0 0%, rgba(245, 239, 224, 0.96) 100%);
  --body-bg-image:
    radial-gradient(900px 500px at 80% -10%, rgba(154, 111, 28, 0.06), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(181, 55, 26, 0.04), transparent 60%);
  --grain-opacity: 0;
  --btn-primary-bg: linear-gradient(180deg, var(--accent) 0%, #8a6118 100%);
  --btn-primary-hover-bg: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 100%);
  --btn-primary-color: #fdf6e3;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* No spinner arrows on ANY number input (per John — "remove arrows from time
   slots"; the judge score box got this earlier, now app-wide). */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Native date/time inputs follow the theme (they rendered UA-white on dark). */
input[type="date"], input[type="time"] {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; font-family: 'Jost', sans-serif; font-size: 15px; outline: none;
}
input[type="date"]:focus, input[type="time"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
html, body { margin: 0; padding: 0; }
/* Ensure the `hidden` HTML attribute wins over flex/grid display rules. */
[hidden] { display: none !important; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Jost', -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  background-image: var(--body-bg-image);
  background-attachment: fixed;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

h1, h2, h3, .display {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}

/* ---------- Header ---------- */
.ssk-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.brand {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px; max-width: min(95vw, 1200px); margin: 0 auto;
}
.brand-link { display: inline-flex; color: var(--ink); }
.brand-mark { height: 30px; width: auto; display: block; }

/* Sync pill */
.sync-pill {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-faint);
  background: var(--bg-3);
}
/* Neutral (not gold) so gold is reserved for primary actions / brand / active state. */
.sync-pill.sync-synced { color: var(--ink-dim); border-color: var(--line); background: var(--bg-3); }
.sync-pill.sync-saving { color: var(--ink-dim); }
.sync-pill.sync-offline { color: var(--warn-bright); border-color: var(--warn); background: var(--warn-deep); }

/* Brand actions (sync pill + theme toggle + per-view actions) */
.brand-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Per-view action slot — wizard injects Snapshots + Sign out here so they sit
   inline with the sync pill and theme toggle. Cleared by app.js on every route. */
.view-actions { display: inline-flex; align-items: center; gap: 6px; }
.view-actions:empty { display: none; }

.theme-toggle {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: 999px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  cursor: pointer; padding: 0;
  transition: 0.18s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }
.theme-toggle[data-theme="dark"] .icon-sun { display: block; }
.theme-toggle[data-theme="light"] .icon-moon { display: block; }

/* Report-a-bug button (global header). Pill with icon + label; collapses to an
   icon-only circle on phones (see the max-width:760px block). */
.bug-report-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: 999px;
  height: 34px; padding: 0 13px;
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer; transition: 0.18s ease;
}
.bug-report-btn:hover { border-color: var(--accent); color: var(--accent); }
.bug-report-btn:active { transform: translateY(1px); }
.bug-report-btn svg { width: 16px; height: 16px; display: block; flex: 0 0 auto; }

/* ---------- Layout ---------- */
.app-root {
  position: relative; z-index: 2;
  max-width: min(95vw, 1200px); margin: 0 auto;
  padding: 32px 18px 80px;
}

.boot {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 80px 0; color: var(--ink-faint);
}
.boot-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Landing ---------- */
.landing {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 32px; /* breathing room before the sign-in / create / dev panels */
}
.landing .display {
  font-size: clamp(34px, 6vw, 48px);
  color: var(--ink);
  margin-bottom: 12px;
}
.landing .display .accent { color: var(--gold); }
.landing .subtitle {
  color: var(--ink-dim); font-size: 17px; max-width: 480px;
  margin: 0 auto 36px; line-height: 1.55;
}
.cta-stack {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 360px; margin: 0 auto;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 500;
  letter-spacing: 0.04em;
  padding: 14px 22px; border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink);
  cursor: pointer; transition: 0.18s ease;
}
.btn:hover { border-color: var(--accent); background: var(--bg-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color); border-color: var(--accent);
  font-weight: 600; letter-spacing: 0.08em;
}
.btn-primary:hover { background: var(--btn-primary-hover-bg); }
.btn-ghost { background: transparent; }
.btn-danger {
  color: var(--warn-bright); border-color: var(--warn);
  background: var(--warn-deep);
}
.btn-small { padding: 8px 14px; font-size: 13px; }

/* Compact icon-only action button (edit / remove / close) used on the student
   card in place of bulky text buttons. Labels live in title + aria-label. */
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; padding: 0;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 8px; color: var(--ink-dim);
  cursor: pointer; transition: 0.15s ease;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.icon-btn-danger:hover { border-color: var(--warn); color: var(--warn-bright); background: var(--warn-deep); }
.icon-btn-svg { width: 16px; height: 16px; display: block; }

/* ---------- Cards / Panels ---------- */
.panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.panel-head {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  margin-bottom: 4px;
}
.panel-sub {
  color: var(--ink-faint); font-size: 13.5px; margin-bottom: 18px;
  letter-spacing: 0.02em;
}

/* ---------- Forms ---------- */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row label {
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
/* Only stack vertically when the label actually WRAPS a control (the modal
   pattern), so the control sits below the label text. A plain label whose
   input is a sibling keeps its inline "(optional)" hint on the same line —
   otherwise flex-column drops the hint to a second row and pushes the field
   down out of alignment with its neighbour (the EVENT DATE / START TIME row). */
.form-row label:has(> input, > select, > textarea) {
  display: flex; flex-direction: column; gap: 4px;
}
.form-row label > input,
.form-row label > select,
.form-row label > textarea { width: 100%; box-sizing: border-box; }
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row select,
.form-row textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: 'Jost', sans-serif; font-size: 16px;
  padding: 12px 14px;
  outline: none;
  transition: 0.18s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.form-row .hint {
  font-size: 12.5px; color: var(--ink-faint);
}
.form-row .error {
  font-size: 12.5px; color: var(--warn-bright); margin-top: 2px;
}

.form-actions {
  display: flex; gap: 10px; align-items: center; margin-top: 4px;
}
.form-actions .spacer { flex: 1; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 18px;
  font-size: 14px; color: var(--ink);
  box-shadow: var(--shadow-lift);
  opacity: 0; pointer-events: none;
  transition: 0.25s ease;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.toast-error { border-color: var(--warn); color: var(--warn-bright); }

/* ---------- Helpers ---------- */
.text-center { text-align: center; }
.text-faint { color: var(--ink-faint); }
.text-accent { color: var(--accent); }
.small { font-size: 12.5px; }
.mt-12 { margin-top: 12px; } .mt-24 { margin-top: 24px; }
.mb-12 { margin-bottom: 12px; } .mb-24 { margin-bottom: 24px; }
.divider { height: 1px; background: var(--line-soft); margin: 18px 0; }

code, .code {
  font-family: 'Consolas', 'Monaco', monospace;
  background: var(--bg-3); padding: 2px 8px; border-radius: 6px;
  color: var(--accent); font-size: 0.92em;
  border: 1px solid var(--line);
}

.dev-panel { border-color: var(--gold); }
.dev-panel .panel-head { color: var(--gold); }

/* ============================================================ */
/* Wizard shell                                                 */
/* ============================================================ */

.wizard-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  gap: 22px;
  align-items: start;
}
.wizard-header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 8px 4px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.wizard-event-name {
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: clamp(24px, 4.5vw, 32px);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.wizard-event-meta {
  font-size: 13px; color: var(--ink-faint); margin-top: 2px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.wizard-event-meta .dot { color: var(--line); }
.wizard-event-meta strong { color: var(--ink-dim); }

.wizard-sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 76px; }
.wizard-sidebar-mobile { display: none; grid-area: sidebar; align-items: center; gap: 8px; }
.wizard-sidebar-mobile-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.wizard-sidebar-mobile select {
  flex: 1; min-width: 0;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; font-family: 'Jost', sans-serif; font-size: 15px;
  outline: none;
}
.wizard-sidebar-mobile select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.wizard-main    { grid-area: main; min-width: 0; }

.step-pill {
  display: flex; align-items: stretch; gap: 10px;
  width: 100%; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: 'Jost', sans-serif; font-size: 14px;
  cursor: pointer; transition: 0.15s ease;
}
.step-pill:hover { border-color: var(--accent); color: var(--ink); }
.step-pill.is-active {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--accent-tint);
}
.step-pill .step-num {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600;
  color: var(--ink-faint);
}
.step-pill.is-active .step-num { background: var(--accent); color: #1a140a; border-color: var(--accent); }
.step-pill .step-text { flex: 1; min-width: 0; line-height: 1.25; display: block; }
.step-pill .step-title { display: block; font-weight: 500; }
.step-pill .step-summary {
  display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step-pill.is-active .step-summary { color: var(--ink-dim); }

/* Incomplete steps fade into the background — visual weight lands on what
   you've already done. Numbers + titles + summaries all dim; active step
   still pops via .is-active above. */
.step-pill.is-incomplete:not(.is-active) { opacity: 0.55; }
.step-pill.is-incomplete:not(.is-active) .step-title { color: var(--ink-faint); font-weight: 400; }
.step-pill.is-incomplete:not(.is-active) .step-num {
  background: transparent; border-color: var(--line-soft); color: var(--ink-faint);
}

/* Mobile dropdown — same greyed-out treatment for not-yet-complete options.
   <option> styling support is patchy across browsers but `color` is universal. */
.wizard-sidebar-mobile select option[data-complete="0"] { color: var(--ink-faint); }
.wizard-sidebar-mobile select option[data-complete="1"] { color: var(--ink); }

.wizard-step { padding-bottom: 24px; }
.step-header { margin-bottom: 20px; }
.step-header .display { font-size: 28px; margin-bottom: 4px; }
.step-sub { color: var(--ink-faint); font-size: 14px; }

.wizard-nav {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--line-soft);
  margin-top: 16px;
}
.wizard-nav-position { flex: 1; text-align: center; font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Form cards (used inside each step) ---------- */
.form-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.form-card-head {
  font-family: 'Cinzel', serif; font-size: 17px;
  margin: 0 0 4px;
}
.form-card-sub { color: var(--ink-faint); font-size: 13px; margin-bottom: 14px; }
.form-subhead { font-family: 'Cinzel', serif; font-size: 15px; margin: 0 0 6px; }

.radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radio-grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.radio-grid-compact { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-card,
.check-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg-3); cursor: pointer;
  transition: 0.15s ease;
}
.radio-card input,
.check-card input { margin-top: 3px; accent-color: var(--accent); }
.radio-card:hover,
.check-card:hover { border-color: var(--accent); }
.radio-card:has(input:checked),
.check-card:has(input:checked) {
  background: var(--accent-tint); border-color: var(--accent);
}
.radio-body, .check-body { flex: 1; }
.radio-title, .check-title {
  font-family: 'Cinzel', serif; font-size: 15px; font-weight: 600; color: var(--ink);
  margin-bottom: 2px;
}
.radio-desc, .check-desc { font-size: 12.5px; color: var(--ink-faint); line-height: 1.4; }
.radio-card-compact {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; font-size: 13px; background: var(--bg-3);
  transition: 0.15s ease;
}
.radio-card-compact:hover { border-color: var(--accent); }
.radio-card-compact:has(input:checked) { background: var(--accent-tint); border-color: var(--accent); color: var(--ink); }
.radio-card-compact input { accent-color: var(--accent); }

.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team-row { display: flex; gap: 8px; align-items: center; }
.team-row input.team-name { flex: 1; }
.stack-sm > * + * { margin-top: 8px; }

/* Disabled check-card state (e.g. Showcases in Team Match) */
.check-card.is-disabled { opacity: 0.55; cursor: not-allowed; }
.check-card.is-disabled:hover { border-color: var(--line); }
.check-disabled-note {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 6px;
}

/* Finale card rows (Team Match Step 1) */
.finale-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
}
.finale-row + .finale-row { border-top: 1px solid var(--line-soft); }
.finale-toggle {
  flex: 1; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-width: 0;
}
.finale-toggle input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); flex: none; }
.finale-toggle .finale-title { display: block; font-family: 'Cinzel', serif; font-weight: 600; font-size: 15px; color: var(--ink); }
.finale-toggle .finale-desc  { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.finale-multiplier {
  flex: none; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em;
}
.finale-multiplier label { white-space: nowrap; }
.finale-multiplier input {
  width: 60px; padding: 6px 8px; text-align: center;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif; font-size: 15px;
}
.finale-multiplier input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }

.duration-row { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); }
.duration-row input { width: 70px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.group-preview { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.group-chip {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 12px; min-width: 0;
}
.group-chip-head { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.group-chip-head-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.group-chip-styles { font-size: 13px; color: var(--ink-dim); }
.group-chip-dances { font-size: 12px; color: var(--ink-faint); margin-top: 4px; line-height: 1.45; }
.group-chip-arrows { display: inline-flex; gap: 2px; }
.reorder-btn {
  background: transparent; border: 1px solid var(--line); color: var(--ink-dim);
  padding: 2px 7px; border-radius: 4px; cursor: pointer; font-size: 11px; line-height: 1;
  min-width: 22px;
}
.reorder-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.reorder-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---------- Wizard header actions (snapshots + sign out) ---------- */
/* .wizard-header-actions removed — Snapshots + Sign out now live in the
   global header's #viewActions slot (see .view-actions above). */

/* ---------- Entries (Step 5, student-first) ---------- */
.stack-md > * + * { margin-top: 14px; }

/* Focus bar — shown on the Entries step while narrowed to a student; the
   event-wide banners collapse behind "Show all students". */
.entry-focus-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 4px; padding: 8px 14px;
  background: var(--accent-tint); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-dim);
}
.entry-focus-label strong { color: var(--ink); }

.entry-search { position: relative; }
.entry-search input[type="text"] {
  width: 100%;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: 'Jost', sans-serif; font-size: 15px;
  outline: none; transition: 0.18s ease;
}
.entry-search input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.entry-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  margin-top: 4px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  max-height: 280px; overflow: auto;
}
.entry-search-empty { padding: 10px 14px; color: var(--ink-faint); font-size: 13px; }
.entry-search-item {
  width: 100%; text-align: left; padding: 10px 14px; gap: 8px;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: none; color: var(--ink);
  font-family: 'Jost', sans-serif; font-size: 14px; cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}
.entry-search-item:hover { background: var(--bg-3); }
.entry-search-item:last-child { border-bottom: none; }
.entry-search-name { color: var(--ink); }
.entry-search-meta { color: var(--ink-faint); font-size: 12px; letter-spacing: 0.04em; }
.entry-search-add { background: var(--accent-tint); }
.entry-search-add:hover { background: var(--accent-tint); border-color: var(--accent); }

.inline-form {
  margin-top: 12px; padding: 14px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.inline-form-compact { padding: 10px 12px; }
.inline-form-head {
  font-family: 'Cinzel', serif; font-size: 15px; color: var(--ink);
  margin-bottom: 10px;
}
.stacked-checks { display: flex; gap: 14px; flex-wrap: wrap; }
.lf-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--ink-dim); cursor: pointer;
}
.lf-toggle input { accent-color: var(--accent); }

/* Student sections */
.student-section {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.student-section-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px;
  /* Wrap so the action buttons (incl. the ✕) drop below the title on narrow
     screens instead of the ✕ overflowing past the card's right edge. */
  flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 10px;
}
.student-section-title { min-width: 0; flex: 1 1 auto; }
.student-section-title strong {
  font-family: 'Cinzel', serif; font-size: 17px; color: var(--ink);
}
.student-section-meta {
  display: block; margin-top: 3px;
  font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em;
}
.student-section-close { flex: none; }
.student-section-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.student-subsection { margin-top: 10px; }
.student-subsection + .student-subsection { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
.student-subsection-head {
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px; font-weight: 500;
}
.student-subsection-empty { padding: 4px 0 8px; }

.entry-line {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.entry-line + .entry-line { margin-top: 6px; }
.entry-line-text { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); }
.entry-line-text strong { color: var(--ink); }
.entry-line-tag {
  display: inline-block; margin-left: 6px;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-faint);
}
.entry-line-oc { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.entry-line-meta { color: var(--ink-faint); font-size: 13px; margin-left: 6px; }
/* Inline note showing which combined heat a dance is merged into (e.g. when
   organizer turned on the East-Coast-Swing + Jive combine, a Jive entry shows
   "Jive (in East Coast Swing & Jive)"). Subtle so the actual dance stays
   primary. */
.entry-line-combined-hint {
  margin-left: 6px;
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}
.entry-line-actions { display: flex; gap: 6px; flex: none; }
/* Wizard-side right-aligned heat reference. Same purpose as .te-heat-ref:
   reference data so the organizer can see "this dance lands in Heat 17"
   without it driving the syllabus sort. */
.entry-line-heat-ref {
  flex: none;
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
  white-space: nowrap;
  margin-left: auto;
  padding: 0 8px;
}
.entry-line-remove { flex: none; }
.entry-line.showcase-line { border-left: 3px solid var(--secondary-bright); }

/* On phones the entry row can't fit description + heat-ref + Edit/Remove on one
   line — the description was getting squished to a ~25px sliver with the buttons
   floating in the middle of it. Let the row wrap: the description takes the full
   first line, then the heat-ref + actions sit on their own line below it. */
@media (max-width: 640px) {
  .entry-line { flex-wrap: wrap; align-items: flex-start; row-gap: 4px; column-gap: 8px; }
  .entry-line-text { flex: 1 1 0; min-width: 0; }            /* shrink so the icons fit beside the description (top-right) */
  .entry-line-actions { order: 1; }
  .entry-line-heat-ref { order: 2; flex: 1 1 100%; margin-left: 0; padding-left: 0; } /* heat # drops to its own line below */
}

.add-entry-btn, .add-showcase-btn { margin-top: 8px; }

/* Compact form fields inside inline-form */
.inline-form .form-row { margin-bottom: 10px; }
.inline-form .form-row:last-child { margin-bottom: 0; }
.inline-form select,
.inline-form input[type="text"] {
  width: 100%;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-family: 'Jost', sans-serif; font-size: 14.5px;
  outline: none; transition: 0.18s ease;
}
.inline-form select:focus,
.inline-form input[type="text"]:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Performer chip locked state */
.performer-chip.is-locked { opacity: 0.8; cursor: not-allowed; }

/* ---------- Heat schedule (Step 5) ---------- */
.heat-toolbar { padding: 14px 18px; }
.heat-filter { padding: 12px 18px; margin-top: 14px; }
.heat-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.heat-filter-row label {
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
.heat-filter-row select {
  flex: 1; min-width: 0; max-width: 480px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; font-family: 'Jost', sans-serif; font-size: 14.5px;
  outline: none;
}
.heat-filter-row select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.heat-section-row td {
  background: var(--bg-3);
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600;
  color: var(--gold); letter-spacing: 0.06em;
  padding: 12px 14px !important;
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--line) !important;
}
@media print {
  .heat-section-row td { background: #f5ecd6 !important; color: #8a6118 !important; border-top: 2px solid #8a6118 !important; }
  .heat-filter, .heat-controls, .heat-conflict-chip, .heat-best-place { display: none !important; }
}
.heat-toolbar-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.heat-toolbar-stats { color: var(--ink-dim); font-size: 14px; }
.heat-toolbar-stats strong { color: var(--ink); }
.heat-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Keep each toolbar button's label on one line (no "Re-/generate" break); the
   container wraps whole buttons instead of breaking text inside them. */
.heat-toolbar-actions .btn { white-space: nowrap; }
.heat-conflict-count { color: var(--warn-bright); font-weight: 600; }
.heat-over-banner { margin-top: 10px; background: var(--warn-deep); border-color: var(--warn); color: var(--ink); }

/* Conflict cycler chip — clickable next-conflict button */
.heat-conflict-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px;
  background: var(--warn-deep); color: var(--warn-bright);
  border: 1px solid var(--warn); border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: 0.15s ease;
  font-family: 'Jost', sans-serif;
}
.heat-conflict-chip:hover { filter: brightness(1.15); }
.heat-conflict-chip-clear {
  background: var(--accent-tint); color: var(--accent);
  border-color: var(--accent);
  cursor: default;
}
.heat-conflict-chip-next { color: var(--ink-faint); font-weight: 400; font-size: 11.5px; }

/* Heat controls row (jump-to + collapse-all/expand-all) */
.heat-controls { padding: 12px 18px; margin-top: 10px; }
.heat-jump-row { position: relative; }
.heat-jump {
  width: 100%;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: 'Jost', sans-serif; font-size: 14px;
  outline: none; transition: 0.18s ease;
}
.heat-jump:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.heat-jump-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  max-height: 300px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.heat-jump-empty { padding: 12px 14px; color: var(--ink-faint); font-size: 13px; }
.heat-jump-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: transparent; color: var(--ink); text-align: left;
  border: none; border-bottom: 1px solid var(--line-soft);
  font-family: 'Jost', sans-serif; font-size: 13.5px;
  cursor: pointer; transition: 0.12s ease;
}
.heat-jump-row:last-child { border-bottom: none; }
.heat-jump-row:hover { background: var(--bg-3); }
.heat-jump-kind {
  flex: none; min-width: 70px;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.heat-jump-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat-collapse-row { display: flex; gap: 6px; margin-top: 10px; }

/* Heat group section header (collapsible) */
.heat-group-header td { padding: 0 !important; background: var(--bg-3); }
.heat-group-toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent; color: var(--ink); text-align: left;
  border: none;
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: 0.12s ease;
}
.heat-group-toggle:hover { background: var(--bg); }
.heat-group-chevron { flex: none; color: var(--accent); width: 14px; text-align: center; }
.heat-group-title { flex: 1; min-width: 0; }
.heat-group-count {
  flex: none;
  font-family: 'Jost', sans-serif; font-size: 11.5px; font-weight: 400;
  color: var(--ink-faint); letter-spacing: 0.05em; text-transform: none;
}

/* Flash highlight (used by jump-to and conflict cycler when scrolling to a row) */
@keyframes heat-flash {
  0%, 100% { background-color: var(--accent-tint); box-shadow: inset 4px 0 0 var(--accent); }
  50%      { background-color: transparent; box-shadow: inset 0 0 0 transparent; }
}
.heat-row.is-flashing td,
.heat-group-header.is-flashing td {
  animation: heat-flash 0.6s ease-in-out 0s 3;
}

/* Best-place modal — vertical list of placement options.
   Replaces the older 2×2 card grid that had uneven heights and heavy buttons.
   Each row is a horizontal list-item: title+description on the left, the
   action button on the right. Lighter borders, smaller buttons, consistent
   alignment regardless of how much explanation each option needs. */
.best-place-intro { margin: 0 0 12px; }
.best-place-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.best-place-option {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.best-place-option:hover { border-color: var(--line); }
.best-place-option.bpo-is-current {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.bpo-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bpo-title { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600; margin: 0; color: var(--ink); letter-spacing: 0.04em; }
.bpo-desc { margin: 0; font-size: 13px; color: var(--ink-faint); line-height: 1.4; }
.bpo-meta { margin: 0; font-size: 12.5px; color: var(--ink-dim); }
.bpo-control { margin-top: 4px; }
.bpo-control select,
.bpo-control input[type="number"] {
  width: 100%; max-width: 320px;
  padding: 6px 10px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif; font-size: 13px;
}
.bpo-action { display: flex; align-items: center; flex: 0 0 auto; }
.heat-best-place { margin-top: 6px; }

@media (max-width: 600px) {
  .best-place-option { grid-template-columns: 1fr; }
  .bpo-action { justify-content: flex-start; margin-top: 4px; }
}

/* Remove dialog options layout */
.remove-options {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 14px;
}
.remove-option {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.remove-option h4 { font-family: 'Cinzel', serif; font-size: 14px; margin: 0; }
.remove-option select { width: 100%; max-width: 320px; }

/* Warn-style button (destructive secondary action) */
.btn-warn {
  background: var(--warn-deep); border-color: var(--warn); color: var(--warn-bright);
}
.btn-warn:hover { filter: brightness(1.18); }

/* ---------- Person-filter banner on the heat sheet ---------- */
.heat-person-filter-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 12px;
  background: var(--accent-tint); border-color: var(--accent);
  color: var(--ink);
  flex-wrap: wrap;
}
@media print {
  .heat-person-filter-banner button { display: none !important; }
}

/* ============================================================ */
/* Judge view (Phase 1C.1)                                       */
/* ============================================================ */

.judge-shell {
  display: flex; flex-direction: column; gap: 16px;
}
.judge-header {
  text-align: center;
  padding: 8px 4px 14px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.judge-event-name {
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.1;
}
.judge-event-meta {
  font-size: 13px; color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center;
}
.judge-event-meta strong { color: var(--ink-dim); }
.judge-event-meta .dot { color: var(--line); }
.judge-preview-tag {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--warn-deep); color: var(--warn-bright);
  border: 1px solid var(--warn);
  padding: 2px 8px; border-radius: 999px;
}

.judge-main { display: flex; flex-direction: column; gap: 16px; }

.judge-nav-top,
.judge-nav-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 6px 0;
}
.judge-position {
  font-size: 13.5px; letter-spacing: 0.05em; color: var(--ink-dim);
  text-align: center; flex: 1;
}
.judge-position-of { color: var(--ink-faint); font-size: 12px; }

.judge-heat-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 18px 20px;
  box-shadow: var(--shadow);
}
.judge-heat-head { margin-bottom: 14px; }
.judge-heat-title {
  font-family: 'Cinzel', serif; font-size: 22px; font-weight: 600;
}
.judge-heat-variant { font-size: 15px; color: var(--accent); font-weight: 500; }
.judge-heat-subtitle { color: var(--ink-faint); font-size: 13px; margin-top: 2px; }

.judge-couples {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.judge-couple {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.judge-couple-lead {
  display: flex; align-items: center; gap: 14px;
  flex: 1; min-width: 0;
}
.judge-couple-num {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-tint); border: 1px solid var(--accent);
  color: var(--accent); font-weight: 600; font-size: 15px;
}
.judge-couple-meta { flex: 1; min-width: 0; }
.judge-couple-names {
  font-size: 16px; color: var(--ink); font-weight: 500;
  overflow-wrap: anywhere; line-height: 1.3;
}
.judge-couple-sub {
  font-size: 12.5px; color: var(--ink-faint); margin-top: 2px;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.judge-couple-sub .dot { color: var(--line); }

.judge-score-cluster { flex: none; }
.judge-score-input {
  width: 96px; padding: 12px 14px;
  background: var(--bg); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif; font-size: 22px; font-weight: 600;
  text-align: center; font-variant-numeric: tabular-nums;
  outline: none; transition: 0.18s ease;
}
.judge-score-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.judge-score-input.is-invalid { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-deep); }

.judge-status {
  text-align: center; font-size: 12.5px; padding: 8px 0;
}
.judge-status-saving { color: var(--ink-faint); }
.judge-status-ok { color: var(--accent); }
.judge-status-error { color: var(--warn-bright); }

.judge-empty {
  text-align: center; padding: 60px 20px;
  color: var(--ink-faint);
}
.judge-empty h2 { font-family: 'Cinzel', serif; color: var(--ink); }
.judge-empty p { max-width: 480px; margin: 12px auto; line-height: 1.5; }

/* Showcase heat in judge view — single per-routine score. */
.judge-showcase-card { background: var(--bg-3); }
.judge-performers {
  list-style: none; padding: 0; margin: 12px 0 18px;
  display: flex; flex-wrap: wrap; gap: 6px 12px;
}
.judge-performers li {
  background: var(--bg-2); border: 1px solid var(--line-soft);
  padding: 4px 10px; border-radius: 999px;
  font-size: 13px; color: var(--ink);
}
.judge-showcase-score {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  margin-top: 14px;
}
.judge-showcase-score label {
  font-family: 'Cinzel', serif; font-size: 14px;
  color: var(--ink-dim); letter-spacing: 0.06em;
}
.judge-score-input-large {
  font-size: 28px !important; min-width: 150px; text-align: center;
}
/* Shrink the "1–100" hint so it fits the box — the typed score stays big.
   (Fixes the clipped "1–10|" placeholder report.) */
.judge-score-input::placeholder { font-size: 13px; font-weight: 400; letter-spacing: 0.02em; opacity: 0.7; }
/* Hide the number-stepper arrows — they ate the field's width and clipped the
   "1–100" hint / the typed value. Judges type the number directly. */
.judge-score-input::-webkit-outer-spin-button,
.judge-score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.judge-score-input { -moz-appearance: textfield; appearance: textfield; }

/* Judge view — jump-to-heat row */
.judge-jump-row { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 2px 0 8px; }
.judge-jump-label { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em; }
.judge-jump-box { position: relative; display: inline-block; }
.judge-heat-jump {
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-family: 'Jost', sans-serif;
  width: 220px; max-width: 62vw; box-sizing: border-box;
}
.judge-heat-jump:focus { outline: none; border-color: var(--accent); }
/* Custom jump dropdown (replaces the native <datalist>, whose popup positioned
   itself inconsistently / detached from the field on some browsers). Anchored
   directly under the input. */
.judge-jump-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  max-height: 280px; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift); text-align: left;
}
.judge-jump-result {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; background: transparent; border: none;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink); font-family: 'Jost', sans-serif; font-size: 13.5px; cursor: pointer;
}
.judge-jump-result:last-child { border-bottom: none; }
.judge-jump-result:hover, .judge-jump-result:focus { background: var(--bg-3); color: var(--accent); outline: none; }
.judge-jump-empty { padding: 9px 12px; color: var(--ink-faint); font-size: 13px; }

/* ---------- Results / report cards (Phase 3) ---------- */
.results-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.results-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.result-published-tag { color: var(--accent); font-weight: 600; }
.results-status { margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; }
.results-status-ok { background: var(--accent-tint); border: 1px solid var(--accent); color: var(--ink); }
.results-status-err { background: var(--warn-deep); border: 1px solid var(--warn); color: var(--warn-bright); }

.result-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 16px; }
.result-legend-item { display: inline-flex; align-items: center; gap: 6px; }

.results-list { display: flex; flex-direction: column; gap: 14px; }
.result-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.results-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.result-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.result-card-print { margin-left: auto; flex: none; align-self: center; }
.result-card-name { font-family: 'Cinzel', serif; font-size: 16px; color: var(--ink); font-weight: 600; }
.result-card-level { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em; }

.result-perf-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
/* Each dance is its own inset card so performances are clearly separated. */
.result-perf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.result-perf-main { flex: 1 1 220px; min-width: 0; }
.result-perf-title { color: var(--ink); font-weight: 500; }
.result-perf-kind { color: var(--ink-faint); font-weight: 400; font-size: 12px; }
.result-perf-partner { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.result-perf-scores { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; color: var(--ink-dim); }
.result-judge strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.result-avg strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.result-unscored { color: var(--ink-faint); font-style: italic; }

.result-band {
  display: inline-block; flex: none; white-space: nowrap;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-dim);
}
.result-band.band-with-honors { background: var(--accent); color: #1a140a; border-color: var(--accent); }
.result-band.band-highly-commended { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.result-band.band-commended { color: var(--info); border-color: var(--info); background: var(--info-tint); }
.result-band.band-participant { color: var(--ink-dim); border-color: var(--line); }
.result-band.band-none { color: var(--ink-faint); border-style: dashed; font-weight: 400; }

@media (max-width: 640px) {
  .result-perf { align-items: flex-start; }
  .result-perf-main { flex: 1 1 100%; }
}

/* View-as selector in the wizard header meta line */
.view-as-select {
  margin-left: 6px;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 8px;
  font-family: 'Jost', sans-serif; font-size: 12px;
  cursor: pointer;
}

/* ============================================================ */
/* Teacher dashboard (Phase 1C.2)                                */
/* ============================================================ */

.teacher-shell { display: flex; flex-direction: column; gap: 16px; }
.teacher-header {
  text-align: center;
  padding: 8px 4px 14px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.teacher-event-name {
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.1;
}
.teacher-event-meta {
  font-size: 13px; color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center;
}
.teacher-event-meta strong { color: var(--ink-dim); }
.teacher-event-meta .dot { color: var(--line); }
.teacher-preview-tag {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--warn-deep); color: var(--warn-bright);
  border: 1px solid var(--warn);
  padding: 2px 8px; border-radius: 999px;
}
.teacher-notice-chip {
  margin-top: 4px;
  background: var(--bg-2); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px;
  font-family: 'Jost', sans-serif; font-size: 12.5px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.teacher-notice-chip:hover { background: var(--bg-3); }
.tn-approved { color: var(--accent); }
.tn-rejected { color: var(--warn-bright); }

/* Inbox bell (Phase 1C.2-C) — same shape on the teacher dashboard header
   AND the wizard header. Single source of styling so both surfaces agree. */
.inbox-bell {
  position: relative;
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  color: var(--ink-dim);
  font-family: 'Jost', sans-serif; font-size: 13px;
  transition: background 120ms ease, border-color 120ms ease;
}
.inbox-bell:hover { background: var(--bg-2); border-color: var(--accent); color: var(--ink); }
.inbox-bell-icon { font-size: 16px; line-height: 1; }
.inbox-bell-count {
  min-width: 18px; padding: 1px 6px;
  background: var(--warn); color: #fff;
  border-radius: 999px;
  font-weight: 700; font-size: 11.5px;
  text-align: center; line-height: 1.4;
}
.inbox-bell-count-empty {
  background: var(--bg-3); color: var(--ink-faint);
  font-weight: 500;
}

/* Section-level flash so the notifications panel highlights when the bell
   is clicked. Same animation used on heat rows + wizard fields. */
@keyframes section-flash {
  0%   { box-shadow: 0 0 0 0 var(--accent), 0 0 0 0 transparent; }
  60%  { box-shadow: 0 0 0 4px var(--accent-tint), 0 0 18px 4px var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
.teacher-notifications-section.is-flashing,
.teacher-section.is-flashing {
  animation: section-flash 1700ms ease-out;
}

.teacher-main { display: flex; flex-direction: column; gap: 24px; }

/* Teacher dashboard tab strip — Schedule / My Students / Notifications.
   Sits below the header, above the active panel. Active tab gets the
   accent underline; counts render as badges on the right side of each tab.
   flex-wrap instead of overflow-x:auto — the latter renders permanent
   scroll-arrows on Windows browsers even when the 3 tabs fit; wrapping
   to a second line on a tiny window is the graceful degradation. */
.teacher-tabs {
  display: flex; gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding: 0 4px;
  margin-bottom: 4px;
}
.teacher-tab {
  background: transparent; border: none;
  padding: 10px 18px 12px;
  margin-bottom: -1px;
  font-family: 'Cinzel', serif;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.teacher-tab:hover { color: var(--ink-dim); }
.teacher-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.teacher-tab-count {
  min-width: 22px; padding: 1px 7px;
  background: var(--bg-3); color: var(--ink-dim);
  border-radius: 999px;
  font-family: 'Jost', sans-serif; font-size: 11.5px; font-weight: 600;
  text-align: center; line-height: 1.5;
  letter-spacing: 0;
}
.teacher-tab-count-empty { display: none; }
.teacher-tab-count-warn { background: var(--warn); color: #fff; }

/* Notifications sub-section selector (Issues / Messages / Awaiting approval) —
   one section shown at a time instead of all three stacked. */
.teacher-notif-selector { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.teacher-notif-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
  font-family: 'Jost', sans-serif; font-size: 13px; color: var(--ink-dim);
  cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.teacher-notif-pill:hover { border-color: var(--accent); color: var(--ink); }
.teacher-notif-pill.is-active {
  background: var(--accent-tint); border-color: var(--accent);
  color: var(--ink); font-weight: 600;
}
.teacher-notif-pill-count {
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--bg); color: var(--ink-faint);
  border-radius: 999px; padding: 0 7px; min-width: 18px; text-align: center;
}
.teacher-notif-pill.is-active .teacher-notif-pill-count { background: var(--bg-2); color: var(--ink-dim); }
.teacher-notif-pill-count.is-warn { background: var(--warn); color: #fff; }
.teacher-notif-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* Panel container — only one panel renders at a time. Flash animation
   reuses the section-flash keyframes when bell-click switches tabs. */
.teacher-panel {
  border-radius: var(--radius-sm);
  padding: 4px;
}
.teacher-panel.is-flashing { animation: section-flash 1700ms ease-out; }
.teacher-panel-empty { padding: 32px 0; text-align: center; }

/* Make the clickable student name in the missing-entries notification
   read as a real link, not as plain bold text. */
.tm-student-name-link {
  background: transparent; border: none; padding: 0;
  font: inherit; cursor: pointer;
  color: var(--accent);
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px;
  text-align: left;
}
.tm-student-name-link:hover { color: var(--accent-hot); }
.tm-student-name-link strong { color: inherit; font-weight: 600; }

.teacher-section {
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.teacher-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.teacher-section-head h2 {
  font-family: 'Cinzel', serif; font-size: 18px; font-weight: 600;
  margin: 0; display: flex; align-items: baseline; gap: 8px;
}
.teacher-section-head h2 .count {
  color: var(--ink-faint); font-family: 'Jost', sans-serif;
  font-size: 13px; font-weight: 500;
}
.checkline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-dim);
  cursor: pointer;
}
/* Schedule highlight toggles — a wrapping row of checklines that sits opposite
   the section title and stacks under it on narrow screens. */
.teacher-schedule-toggles {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
}

/* Student cards — accordion. Collapsed by default, only one expanded
   at a time. The header is clickable to toggle. */
.teacher-students { display: flex; flex-direction: column; gap: 8px; }
.teacher-student-card {
  background: var(--bg-3);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: border-color 0.15s ease;
}
.teacher-student-card.is-expanded {
  border-color: var(--accent);
  background: var(--bg-2);
}
/* Pending student card (add-student item not yet approved): yellow tinted
   so the teacher can see at a glance which students are still tentative.
   Teacher can still add entries — those land in pending too. */
.teacher-student-card.is-pending-student {
  border-color: var(--warn);
  background: var(--warn-deep);
}
.teacher-student-card.is-pending-student.is-expanded {
  border-color: var(--warn);
  background: var(--warn-deep);
}
.ts-pending-tag {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--warn-bright); font-weight: 600;
  background: var(--bg-2); border: 1px solid var(--warn);
  padding: 1px 8px; border-radius: 999px;
}
.ts-pending-note {
  margin: 4px 0 6px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--ink-dim);
}
.ts-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.teacher-student-card.is-expanded .ts-head { margin-bottom: 8px; }
.ts-head-clickable { cursor: pointer; }
.ts-head-clickable:hover .ts-name { color: var(--accent); }
.ts-chevron {
  color: var(--ink-faint); font-size: 11px; min-width: 12px;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.ts-name {
  font-family: 'Cinzel', serif; font-size: 15px; font-weight: 600;
  color: var(--ink);
}
.ts-level { color: var(--ink-faint); font-size: 12.5px; }
.ts-with-me-wrap {
  margin-left: auto;
  display: flex; align-items: baseline; gap: 8px;
}
.ts-with-me {
  font-size: 12px; color: var(--accent); font-weight: 500;
  background: var(--accent-tint); padding: 1px 8px; border-radius: 999px;
}
.ts-with-me-zero {
  font-size: 12px; color: var(--ink-faint);
}
.ts-head .student-add-entry { flex: 0 0 auto; }
.ts-body { font-size: 13px; }
.ts-count-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.ts-count { color: var(--ink-faint); font-size: 12px; }
.ts-toggle-all { font-size: 11.5px; padding: 2px 8px; }

/* Add Student modal — tighter / better spaced layout. The original used
   the standard .form-row patterns which left a lot of vertical air. */
.add-stu-body { padding: 14px 18px 16px; }
.add-stu-body .form-row { margin-bottom: 12px; }
.add-stu-body input[type="text"],
.add-stu-body select {
  padding: 7px 10px; font-size: 14px;
}
.add-stu-body .form-row-pair label > input,
.add-stu-body .form-row-pair label > select {
  width: 100%;
}

/* Lead/Follow radio group inline */
.role-radio-group {
  display: flex; gap: 4px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 3px;
}
.role-radio {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px; gap: 0;
  font-size: 13px; color: var(--ink-dim);
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer; user-select: none;
  transition: 0.12s ease;
}
.role-radio input { position: absolute; opacity: 0; pointer-events: none; }
.role-radio:has(input:checked) {
  background: var(--accent); color: white; font-weight: 600;
}
.role-radio:not(:has(input:checked)):hover { background: var(--bg-2); color: var(--ink); }

/* Quick-add button when search returns nothing */
.add-stu-empty {
  padding: 12px;
  display: flex; justify-content: center; align-items: center;
}

.teacher-entry-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.teacher-entry-list li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13px; line-height: 1.4;
}
.te-heat {
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim); font-weight: 600;
  min-width: 60px;
}
.te-token { color: var(--accent); }
.te-partner { color: var(--ink-faint); }

/* Schedule */
.teacher-heat-list { display: flex; flex-direction: column; gap: 8px; }
.teacher-heat {
  background: var(--bg-3);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.teacher-heat.is-other { opacity: 0.55; }
.teacher-heat.is-showcase { border-color: var(--accent); }
.teacher-heat .th-head {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 4px;
}
.th-n {
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim); font-weight: 600;
  font-size: 13.5px;
}
.th-sep { color: var(--line); }
.th-title { color: var(--ink); font-weight: 500; font-size: 13.5px; }

.th-couples { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.th-couples li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13px; line-height: 1.4;
}
.thc-names { color: var(--ink); }
.thc-level, .thc-token {
  font-size: 13px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.thc-level::before, .thc-token::before {
  content: "· "; color: var(--line); margin-right: 2px;
}
.thc-token { color: var(--accent); }
/* Heat-couple highlights. Two distinct categories the teacher can toggle:
   - .thc-my-dance  : the teacher is dancing in this couple (GOLD, most prominent).
   - .thc-my-student: one of the teacher's students dances here as an amateur
                      couple with another student (TEAL, quieter — a heads-up, not
                      the teacher's own floor time). */
.th-couples li.thc-my-dance {
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  border-radius: 4px; padding: 4px 8px;
}
.th-couples li.thc-my-dance .thc-names { font-weight: 700; color: var(--ink); }
.th-couples li.thc-my-student {
  background: var(--info-tint);
  border-left: 3px solid var(--info);
  border-radius: 4px; padding: 4px 8px;
}
.th-couples li.thc-my-student .thc-names { font-weight: 600; }
/* "you" — filled gold pill: the loudest marker on the page. */
.thc-you {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-deep); border: 1px solid var(--accent);
  border-radius: 999px; padding: 0 7px; line-height: 1.7;
}
/* "my student" — outlined teal pill: present but secondary. */
.thc-tag-student {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--info); border: 1px solid var(--info); border-radius: 999px;
  padding: 0 7px; line-height: 1.6;
}
.th-performers { font-size: 13px; color: var(--ink); }
.th-performers-mine {
  background: var(--accent-tint); border-left: 3px solid var(--accent);
  border-radius: 4px; padding: 4px 8px; font-weight: 700;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ============================================================ */
/* Approvals step (Phase 1C.2-B / Deploy B2)                     */
/* ============================================================ */

.approvals-panel { padding-bottom: 16px; }
.approvals-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.approvals-head h3 {
  margin: 0; font-family: 'Cinzel', serif; font-size: 18px; font-weight: 600;
  display: flex; align-items: baseline; gap: 8px;
}
.approvals-head h3 .count {
  color: var(--ink-faint); font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
}
.approvals-empty { padding: 16px 0; }
.approvals-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.approvals-batch-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px; margin-bottom: 8px;
  border: 1px dashed var(--line-soft); border-radius: var(--radius-sm);
}
.approvals-selall { font-size: 13.5px; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.approvals-selall input, .approval-check { accent-color: var(--accent); width: 16px; height: 16px; }
.approval-pick { display: flex; align-items: flex-start; padding-top: 3px; cursor: pointer; }
.approval-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px 14px;
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.approval-main { min-width: 0; }
.approval-line-top {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
}
.approval-kind {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.approval-desc { color: var(--ink); font-size: 14px; }
.approval-line-bottom { margin-top: 3px; }
.approval-actions {
  display: flex; gap: 6px; align-items: center;
}
.approval-reject-reason {
  grid-column: 1 / -1;
  display: none;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
  margin-top: 4px;
}
.approval-reject-reason.show { display: block; }
.approval-reject-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; color: var(--ink-dim);
}
.approval-reject-input {
  padding: 6px 10px;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif; font-size: 13.5px;
}
.approval-reject-actions {
  display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px;
}

.approvals-history { margin-top: 14px; }
.approvals-history summary {
  cursor: pointer;
  padding: 4px 0;
}
.approvals-history-list {
  list-style: none; padding: 10px 0 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.approvals-history-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 6px 10px;
  background: var(--bg-3);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.ah-verb {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600;
}
.ah-verb-approve { color: var(--accent); }
.ah-verb-reject  { color: var(--warn-bright); }
.ah-desc { color: var(--ink); }
.ah-reason { flex: 1 1 100%; }

/* Entry-line audit metadata (Deploy B2 audit display, option A) */
.entry-line-audit,
.te-audit {
  display: block;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 4px;
  line-height: 1.4;
}
.entry-line-audit strong,
.te-audit strong { color: var(--ink-dim); font-weight: 500; }
.teacher-entry-list li { display: flex; flex-direction: column; gap: 2px; }
.te-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* Right-aligned heat reference on syllabus-sorted entry rows.
   Reads "danced in Heat 17" — natural language, not a primary identifier
   here since the list is sorted by syllabus order. Pushed to the right
   with margin-left:auto. */
.te-heat-ref {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
  white-space: nowrap;
}
.te-row-actions { margin-left: 0; }  /* heat-ref already takes margin-left:auto */

/* Sub-section headers inside a student card — "Awaiting approval" and
   "Approved" labels keep the two states visually distinct and let the
   teacher scan the live schedule quickly. */
.te-section-head {
  font-family: 'Cinzel', serif;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 10px 0 4px;
  display: flex; align-items: baseline; gap: 6px;
}
.te-section-head:first-child { margin-top: 0; }
.te-section-head-pending  { color: var(--warn-bright); }
.te-section-head-approved { color: var(--accent); }
.te-section-head .count {
  font-family: 'Jost', sans-serif;
  font-size: 11px; font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0;
}

/* Pending-entry rows on a student card: tinted with the warn (yellow)
   palette so they're visually distinct from approved/live entries. */
.te-pending-item {
  background: var(--warn-deep);
  border-left: 3px solid var(--warn);
  padding: 4px 8px 5px;
  border-radius: var(--radius-sm);
  margin: 2px 0;
}
.te-heat-pending {
  color: var(--warn-bright) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-width: 60px;
}
.text-pending { color: var(--warn-bright); font-weight: 500; }

/* Entries the signed-in teacher is NOT a partner in — visually quieter
   so the teacher's own entries pop. Left border + dim background + the
   "with <pro name>" line goes italic and faded. */
.teacher-entry-list li.te-other-teacher {
  border-left: 3px solid var(--line);
  background: var(--bg-3);
  padding: 4px 8px 5px;
  border-radius: var(--radius-sm);
  margin: 2px 0;
  opacity: 0.78;
}
.teacher-entry-list li.te-other-teacher .te-partner {
  font-style: italic;
  color: var(--ink-faint);
}
/* Pending + other-teacher: keep the warn tint stronger than the muted
   treatment (the pending state is the higher-priority signal). */
.teacher-entry-list li.te-pending-item.te-other-teacher {
  background: var(--warn-deep);
  border-left-color: var(--warn);
  opacity: 0.85;
}

/* Subtle per-entry row actions: small lowercase "edit"/"remove" links at
   the end of each entry row. Same font size as the row so they read as
   inline actions rather than chunky buttons. */
.te-row-actions {
  margin-left: auto;
  display: inline-flex; gap: 8px; align-items: baseline;
  opacity: 0.6;
}
.teacher-entry-list li:hover .te-row-actions { opacity: 1; }
.te-row-btn {
  background: transparent; border: none; padding: 0;
  color: var(--ink-faint);
  font-family: inherit; font-size: inherit;
  cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.te-row-btn:hover { color: var(--accent); }
.te-remove-entry:hover { color: var(--warn-bright); }

/* Pending-change indicator on a teacher entry row. Surfaces on all 3
   surfaces (Issues to resolve / Messages from organizer / Student cards)
   so the teacher knows a remove/edit request is in flight and isn't lost.
   Reads from event.pending, persists across reloads. */
.te-pending-badge {
  display: inline-block; margin-left: 6px;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  vertical-align: baseline;
}
.te-pending-badge-remove {
  background: var(--warn-deep); color: var(--warn-bright);
  border: 1px solid var(--warn);
}
.te-pending-badge-edit {
  background: var(--bg-3); color: var(--accent);
  border: 1px solid var(--accent);
}
.te-row-pending-status {
  color: var(--warn-bright); font-style: italic;
  font-size: inherit;
}
.te-row-cancel-pending { color: var(--ink-faint); }
.te-row-cancel-pending:hover { color: var(--accent); }
/* Dim the dance text on rows that have a pending change so the eye lands
   on the badge first. Action area stays full opacity (it has the cancel). */
.te-row-is-pending .te-token,
.te-row-is-pending .tm-entry-token,
.te-row-is-pending .issue-entry-token,
.te-row-is-pending .te-partner,
.te-row-is-pending .tm-entry-partner,
.te-row-is-pending .issue-entry-partner {
  opacity: 0.55;
}
.te-row-is-pending .te-pending-badge { opacity: 1; }
.te-row-is-pending .te-row-actions,
.te-row-is-pending .tm-entry-actions,
.te-row-is-pending .issue-entry-actions { opacity: 1; }

/* Pending-edit diff line — small italic "→ Closed-Standard-Waltz with John
   Smith" under an entry row when the teacher has a pending edit. Lets the
   teacher see WHAT change is in flight without opening the request modal. */
.te-pending-diff {
  font-size: 12px;
  color: var(--accent);
  font-style: italic;
  margin: 2px 0 0 16px;
  line-height: 1.4;
}
.te-pending-diff .te-pending-note {
  color: var(--ink-faint);
  font-style: normal;
  margin-left: 6px;
}
.te-pending-diff .te-pending-note em { font-style: italic; color: var(--ink-dim); }

/* "Recently removed" expandable section on student cards. */
.ts-removed {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
}
.ts-removed > summary {
  cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.ts-removed[open] > summary { color: var(--ink-dim); }
.teacher-removed-list {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.teacher-removed-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-size: 12.5px;
  padding: 4px 8px;
  background: var(--bg-3);
  border-left: 2px solid var(--line);
  border-radius: var(--radius-sm);
  opacity: 0.78;
}
.trm-token { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: var(--line); }
.trm-partner { color: var(--ink-faint); font-style: italic; }
.trm-when { flex: 1 1 100%; }

/* Pending submissions panel — items the teacher has submitted that are
   waiting for organizer approval. Yellow-tinted so it reads as "in flight". */
.teacher-pending-section {
  background: var(--warn-deep);
  border-color: var(--warn);
}
.teacher-pending-section .teacher-section-head h2 { color: var(--warn-bright); }
.teacher-pending-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.teacher-pending-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-2); border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.tpi-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.tpi-kind {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warn-bright); font-weight: 600;
}
.tpi-desc { color: var(--ink); }
.tpi-when { flex: 1 1 100%; margin-top: -2px; }

/* Recent rejections — read-only history of organizer rejections so the
   teacher can see what was sent back + why. */
.teacher-rejections-section {
  background: var(--bg-3);
  border-color: var(--line);
}
.teacher-rejections-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.teacher-rejection-item {
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-size: 13px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.trj-kind {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.trj-desc { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: var(--line); }
.trj-reason { flex: 1 1 100%; color: var(--warn-bright); }
.trj-when { flex: 1 1 100%; }

/* Notifications inbox (Phase 1C.2-C) — replaces the old Messages + Recent
   Rejections sections. Combined chronological list with New / Earlier split. */
.teacher-notifications-section {
  background: var(--bg-3);
  border-color: var(--line);
}
.teacher-notifications-section .teacher-section-head h2 { color: var(--ink); }
.count-unread {
  background: var(--warn); color: #fff;
  padding: 1px 8px; border-radius: 999px;
  font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.04em;
}
.count-empty { color: var(--ink-faint); font-style: italic; font-weight: 400; }
.tn-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.tn-empty {
  padding: 12px 0;
  text-align: center;
}
.tn-subhead {
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 600;
  margin: 2px 0 8px; display: flex; align-items: baseline; gap: 8px;
}
.tn-subhead-unread { color: var(--warn-bright); }
.tn-read-details {
  margin-top: 10px;
  border-top: 1px dashed var(--line); padding-top: 8px;
}
.tn-read-details > summary {
  cursor: pointer; font-size: 12.5px; color: var(--ink-faint);
  padding: 4px 0;
  letter-spacing: 0.04em;
}
.tn-read-details > summary:hover { color: var(--ink-dim); }
.tn-read-summary-label { font-weight: 600; }
.tn-list-read { margin-top: 6px; opacity: 0.75; }

/* Per-row shell — wraps the message body or rejection body. Read rows
   render dimmer so the eye lands on unread items first. */
.tn-row {
  position: relative;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-size: 13px;
}
.tn-row-unread { border-left: 3px solid var(--warn); padding-left: 9px; }
.tn-row-read { opacity: 0.78; }
.tn-row .tn-mark-read { margin-top: 6px; }

/* Rejection-row internals: head (kind + when), description, reason from
   organizer, optional teacher's original note, reply thread, action buttons. */
.tn-row-rejection { display: flex; flex-direction: column; gap: 4px; }
.tn-rej-head { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.tn-kind-rejection {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warn-bright); font-weight: 600;
}
.tn-when { color: var(--ink-faint); }
.tn-rej-desc {
  color: var(--ink-dim);
  text-decoration: line-through; text-decoration-color: var(--line-soft);
}
.tn-rej-reason { color: var(--ink); }
.tn-rej-reason strong { color: var(--warn-bright); }
.tn-rej-note { margin-top: 4px; }
.tn-rej-actions { margin-top: 6px; display: flex; gap: 8px; align-items: baseline; }

/* Reply thread — chat-bubble feel. Organizer + teacher get different
   alignment + color so the back-and-forth is easy to follow. */
.tn-rej-replies {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 6px; border-top: 1px dashed var(--line-soft);
}
.tn-rej-reply {
  padding: 6px 10px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  max-width: 92%;
}
.tn-rej-reply-organizer {
  align-self: flex-start;
  border-left: 3px solid var(--accent);
}
.tn-rej-reply-teacher {
  align-self: flex-end;
  border-right: 3px solid var(--warn);
}
.tn-rej-reply-head {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.tn-rej-reply-head strong { color: var(--ink); }
.tn-rej-reply-role { letter-spacing: 0.04em; }
.tn-rej-reply-body { color: var(--ink-dim); white-space: pre-wrap; }

/* Awaiting Approval row — surface the optional submitter note inline. */
.tpi-note { width: 100%; margin-top: 2px; }

/* Approval-item teacher note — surfaces inline in the organizer Approvals
   step so they read the submitter's reasoning before approve/reject. */
.approval-note {
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--bg-3);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--ink-dim);
}
.approval-note em { color: var(--ink); }
.approval-item-has-note { border-left: 3px solid var(--accent); padding-left: 9px; }

/* ============================================================ */
/* Organizer Notifications step (Phase 1C.2-C)                   */
/* ============================================================ */

.notif-section-head {
  font-family: 'Cinzel', serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 10px;
}
.notif-status-panel { margin-bottom: 16px; }

/* Event Status tile grid — derived conditions, clickable, jump-to-step. */
.notif-status-tiles {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.notif-tile {
  cursor: pointer;
  padding: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.notif-tile:hover { border-color: var(--accent); transform: translateY(-1px); background: var(--bg-3); }
.notif-tile:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.notif-tile-count { font-size: 26px; font-weight: 700; line-height: 1; color: var(--ink); font-family: 'Cinzel', serif; }
.notif-tile-label { font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
.notif-tile-detail { line-height: 1.3; }
.notif-tile-ok .notif-tile-count { color: var(--ink-faint); }
.notif-tile-warn { border-left: 3px solid var(--warn); padding-left: 9px; }
.notif-tile-warn .notif-tile-count { color: var(--warn-bright); }
.notif-tile-info { border-left: 3px solid var(--accent); padding-left: 9px; }
.notif-tile-info .notif-tile-count { color: var(--accent); }
.notif-status-foot { margin-top: 8px; margin-bottom: 0; }

/* Inbox panel — thread list + pending-with-notes list. */
.notif-inbox-panel {}
.notif-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.notif-subhead {
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 600;
  margin: 14px 0 6px;
  display: flex; align-items: baseline; gap: 8px;
}
.notif-subhead-unread { color: var(--warn-bright); }
.notif-empty { padding: 12px 0; text-align: center; }

/* Reply thread — message bubble pattern, organizer left / teacher right. */
.notif-thread-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.notif-thread {
  padding: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.notif-thread-unread {
  border-left: 3px solid var(--warn);
  padding-left: 9px;
}
.notif-thread-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.notif-thread-kind {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warn-bright); font-weight: 600;
}
.notif-thread-unread-badge {
  margin-left: auto;
  background: var(--warn); color: #fff;
  padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.notif-thread-desc {
  color: var(--ink-dim);
  text-decoration: line-through; text-decoration-color: var(--line-soft);
  margin: 4px 0;
}
.notif-thread-reason { color: var(--ink); margin: 4px 0; }
.notif-thread-reason strong { color: var(--warn-bright); }
.notif-thread-note { margin: 4px 0; }

.notif-thread-replies {
  list-style: none; padding: 8px 0 0; margin: 4px 0 0;
  border-top: 1px dashed var(--line-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.notif-reply {
  padding: 6px 10px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  max-width: 92%;
}
.notif-reply-organizer { align-self: flex-start; border-left: 3px solid var(--accent); }
.notif-reply-teacher   { align-self: flex-end;   border-right: 3px solid var(--warn); }
.notif-reply-unread { background: var(--bg-2); }
.notif-reply-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.notif-reply-head strong { color: var(--ink); }
.notif-reply-when { margin-left: auto; }
.notif-reply-dot { color: var(--warn-bright); margin-left: 4px; }
.notif-reply-body { color: var(--ink-dim); white-space: pre-wrap; }
.notif-thread-actions { margin-top: 8px; display: flex; gap: 8px; }

.notif-thread-list-read { opacity: 0.78; }
.notif-earlier-details { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 8px; }
.notif-earlier-details > summary { cursor: pointer; padding: 4px 0; color: var(--ink-dim); }

/* Pending-with-notes — compact list with a deep-link button. */
.notif-note-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.notif-pending-note {
  padding: 8px 12px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.notif-pending-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.notif-pending-kind {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.notif-pending-when { margin-left: auto; }
.notif-pending-note-body { color: var(--ink); margin: 4px 0; }
.notif-pending-actions { margin-top: 4px; }

/* Teacher Reply modal — context box at top, optional thread, reply textarea. */
.trep-context {
  padding: 8px 12px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 10px;
}
.trep-context strong { color: var(--ink); }
.trep-reason { color: var(--warn-bright); margin-top: 4px; }
.trep-thread {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px; overflow-y: auto;
}
.trep-thread li {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  font-size: 12.5px;
}
.trep-organizer { border-left: 3px solid var(--accent); }
.trep-teacher { border-right: 3px solid var(--warn); align-self: flex-end; max-width: 90%; }
.trep-body { color: var(--ink-dim); white-space: pre-wrap; margin-top: 2px; }

/* Teachers line under each student card */
.ts-teachers {
  margin: 2px 0 6px;
  font-size: 12.5px; color: var(--ink-faint);
  line-height: 1.4;
}
.ts-teachers .label {
  color: var(--ink-dim); font-weight: 500;
  letter-spacing: 0.04em;
}

/* Search-first Add Student modal */
.form-row.form-row-pair {
  flex-direction: row;
  gap: 10px;
}
.form-row.form-row-pair label { flex: 1 1 0; }

.add-stu-results {
  list-style: none; padding: 0; margin: 0 0 8px;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--bg-3);
}
.add-stu-results > li + li { border-top: 1px solid var(--line-soft); }
.add-stu-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
}
.add-stu-info {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.add-stu-info strong { font-size: 14px; color: var(--ink); }
.add-stu-yours {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12.5px; letter-spacing: 0.04em;
}
.add-stu-claim { flex: 0 0 auto; }
.add-stu-empty {
  padding: 10px 12px; text-align: center;
}
.add-stu-divider {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 10px;
  color: var(--ink-faint); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.add-stu-divider::before,
.add-stu-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line-soft);
}

/* Step 1 "Numbers" subgroup headers — visually separate Event duration,
   Participation limits, Dance capacity limits, and Judging within the
   same card. */
.form-subgroup-head {
  font-family: 'Cinzel', serif;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 18px 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.form-subgroup-head:first-of-type { margin-top: 0; }

/* Live "Available heats" readout under Event duration. */
.available-heats {
  margin: 8px 0 4px;
  padding: 10px 14px;
  background: var(--bg-3);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.available-heats .ah-line strong { font-size: 14px; color: var(--ink); }
.available-heats .ah-sub {
  display: block; margin-top: 2px;
  font-size: 12px; color: var(--ink-faint);
}

/* Rule-based limits: an "active rules" list + an add dropdown.
   Each active rule is a self-contained card with label, description,
   number input, Unlimited toggle, and × remove link. */
.limits-block {
  display: flex; flex-direction: column; gap: 10px;
  margin: 8px 0 10px;
}
.limits-empty {
  padding: 10px 12px;
  background: var(--bg-3);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
}
.limits-rule {
  padding: 10px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.limits-rule.is-muted { opacity: 0.65; }
.limits-rule-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.limits-rule-label {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600;
  color: var(--ink);
}
.limits-rule-remove {
  background: transparent; border: none;
  color: var(--ink-faint); font-size: 12px;
  cursor: pointer; padding: 0;
  text-decoration: underline; text-decoration-style: dotted;
}
.limits-rule-remove:hover { color: var(--warn-bright); }
.limits-rule-desc {
  margin: 4px 0 8px;
  font-size: 12.5px; color: var(--ink-faint); line-height: 1.4;
}
.limits-rule-grey {
  margin: 0 0 8px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--ink-dim);
}
.limits-rule-grouping {
  margin: 0 0 8px;
  padding: 6px 10px;
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--ink-dim);
}
.limits-rule-input {
  display: flex; align-items: center; gap: 14px;
}
.limits-rule-input input[type="number"] {
  width: 100px; padding: 6px 10px;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif; font-size: 14px;
}
.limits-rule-input input[type="number"]:disabled { opacity: 0.4; }
.limits-unlimited {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-dim);
  cursor: pointer;
}
.limits-add-row { margin-top: 6px; }
.limits-add-select {
  padding: 6px 10px;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif; font-size: 13px;
  cursor: pointer;
}
.limits-suggest { margin: 6px 0 12px; }
.limits-suggest-btn { font-size: 12.5px; }

/* Limit-conflict warnings banner on the Heat schedule step (warn, not block). */
.limit-warnings-banner {
  margin-bottom: 14px;
  background: var(--warn-deep);
  border-color: var(--warn);
}
.limit-warnings-head {
  font-size: 15px; font-weight: 600; color: var(--warn-bright); margin-bottom: 4px;
}
.limit-warnings-list {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.limit-warnings-list .lw-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.lw-body { flex: 1 1 auto; min-width: 0; }
.lw-notify-btn { flex: 0 0 auto; }
.lw-student-link {
  background: transparent; border: none; padding: 0;
  font: inherit; color: var(--accent); cursor: pointer; font-weight: 600;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px;
}
.lw-student-link:hover { color: var(--accent-hot); }

/* Scope picker inside multi-instance limit rules. */
.limits-scope-picker {
  margin-left: 14px;
  padding: 4px 8px;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 999px;
  font-family: 'Jost', sans-serif; font-size: 12.5px;
  cursor: pointer;
}

/* "⚠ Over limit" tags shown on student cards in three locations. */
.ts-limit-tag,
.student-section-limit-tag,
.student-section-missing-tag,
.add-stu-limit-tag {
  display: inline-flex; align-items: center;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600;
  background: var(--bg-2); color: var(--warn-bright);
  border: 1px solid var(--warn);
  padding: 2px 8px; border-radius: 999px;
  cursor: help;
}
.student-section-limit-tag { margin-left: 6px; }
.student-section-missing-tag { margin-left: 6px; }
.add-stu-limit-tag { flex: 0 0 auto; }

/* Organizer-sent messages on the teacher dashboard. */
.teacher-messages-section {
  background: var(--warn-deep);
  border-color: var(--warn);
}
.teacher-messages-section .teacher-section-head h2 { color: var(--warn-bright); }
.teacher-messages-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.teacher-message-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "kind body dismiss"
    "kind student dismiss"
    "kind when dismiss";
  gap: 2px 12px;
  padding: 8px 12px;
  background: var(--bg-2); border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.tm-kind {
  grid-area: kind;
  align-self: start;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warn-bright); font-weight: 600;
  padding-top: 2px;
}
.tm-body { grid-area: body; color: var(--ink); }
.tm-student { grid-area: student; }
.tm-when { grid-area: when; }
.tm-live-hint {
  font-size: 11px; color: var(--accent);
  font-style: italic; letter-spacing: 0.04em;
}
.teacher-message-item .teacher-dismiss-msg { grid-area: dismiss; align-self: start; }

/* "Issues to resolve" — consolidated limit-conflict list at the top of
   the teacher dashboard. Each issue carries an interactive entry list
   so the teacher can clear the conflict in place. */
.teacher-issues-section {
  background: var(--warn-deep);
  border-color: var(--warn);
}
.teacher-issues-section .teacher-section-head h2 { color: var(--warn-bright); }
.teacher-issues-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.teacher-issue-item {
  padding: 10px 12px;
  background: var(--bg-2); border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.issue-body { color: var(--ink); margin-bottom: 4px; }
.issue-prompt { margin: 0 0 6px; }
/* Collapsible conflict entry list — keeps a big over-limit student from turning
   the whole "Issues to resolve" panel into an endless scroll. */
.issue-entries { margin: 0; }
.issue-entries > summary.issue-prompt {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.issue-entries > summary.issue-prompt::-webkit-details-marker { display: none; }
.issue-entries > summary.issue-prompt::before {
  content: "\25B8"; color: var(--ink-faint); font-size: 11px;
}
.issue-entries[open] > summary.issue-prompt::before { content: "\25BE"; }
.issue-entries > summary:hover { color: var(--ink-dim); }
.issue-student-link {
  background: transparent; border: none; padding: 0;
  font: inherit; color: var(--accent); cursor: pointer; font-weight: 600;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px;
}
.issue-student-link:hover { color: var(--accent-hot); }
.issue-entry-list {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 3px;
}
.issue-entry {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px;
  padding: 4px 8px;
  background: var(--bg-3);
  border-left: 2px solid var(--warn);
  border-radius: var(--radius-sm);
}
.issue-entry-heat { font-variant-numeric: tabular-nums; color: var(--ink-dim); font-weight: 600; min-width: 60px; }
.issue-entry-token { color: var(--accent); }
.issue-entry-partner { color: var(--ink-faint); }
.issue-entry-actions { margin-left: auto; display: inline-flex; gap: 8px; }

/* Heat-schedule warning header — split row so "Notify all" sits on the right. */
.limit-warnings-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}

/* Notify teacher button on wizard student-section header. */
.student-section-notify { margin-left: 6px; }
.student-section-notify-missing,
.student-section-assign-teacher-missing { margin-left: 6px; }

/* "Students missing entries" banner at the top of the Entries step.
   Same warning palette as the validation banner but with its own row
   layout (one student per row, action button on the right). */
.missing-entries-banner {
  background: var(--warn-deep);
  border-color: var(--warn);
}
.me-banner-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 2px;
}
.me-banner-title {
  font-weight: 600; color: var(--warn-bright);
  font-size: 14px;
}
.me-banner-sub { margin: 2px 0 8px; }
.me-row-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.me-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  background: var(--bg-2); border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.me-row-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.me-row-name-link {
  background: transparent; border: none; padding: 0;
  font: inherit; font-weight: 600;
  color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px;
  /* Let a very long unbroken name break and shrink instead of overflowing the
     row (and the page) on narrow screens — the button's min-content was the
     full name width otherwise. */
  min-width: 0; overflow-wrap: anywhere; text-align: left;
}
.me-row-name-link:hover { color: var(--accent-hot); }
.me-row-level { color: var(--ink-faint); }
.me-row-teacher { color: var(--ink-faint); }
.me-row-noteacher {
  color: var(--warn-bright); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.05em;
}
.me-row-actions { flex: 0 0 auto; display: flex; gap: 6px; }

/* "Students need entries" message body — list of student rows with
   per-row "Add entries now ▸" button (mirrors limit-conflict entry list). */
.tm-student-list {
  grid-column: 2 / 3;
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 3px;
}
.tm-student-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px;
  padding: 4px 8px;
  background: var(--bg-3);
  border-left: 2px solid var(--warn);
  border-radius: var(--radius-sm);
}
.tm-student-name { color: var(--ink); }
.tm-student-row .te-row-btn { margin-left: auto; }

/* Interactive entry list inside a teacher message (limit-conflict body). */
.tm-entry-list {
  grid-column: 2 / 3;
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 3px;
}
.tm-entry {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px;
  padding: 4px 8px;
  background: var(--bg-3);
  border-left: 2px solid var(--warn);
  border-radius: var(--radius-sm);
}
.tm-entry-heat { font-variant-numeric: tabular-nums; color: var(--ink-dim); font-weight: 600; min-width: 60px; }
.tm-entry-token { color: var(--accent); }
.tm-entry-partner { color: var(--ink-faint); }
.tm-entry-actions { margin-left: auto; display: inline-flex; gap: 8px; }

/* "(pro)" mark on teacher-targeted warning rows. */
.lw-pro-tag {
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--accent);
  margin-left: 2px;
}

/* Sidebar pill ⚠ glyph (limit conflicts on Heats step, etc.). */
.step-pill.has-warning .step-warn-glyph {
  color: var(--warn-bright);
  font-size: 13px;
  margin-left: 4px;
}
.step-pill.has-warning .step-title { color: var(--warn-bright); }

/* Placement toast (after an entry is approved and slotted into a heat). */
.toast-placement {
  display: flex; align-items: center; gap: 12px;
}
.placement-jump {
  background: transparent;
  border: 1px solid currentColor; border-radius: var(--radius-sm);
  color: inherit; padding: 2px 8px;
  font-family: inherit; font-size: 12px; cursor: pointer;
}
.placement-jump:hover { background: rgba(255,255,255,0.1); }

/* Activity-row links (student name + heat link) */
.ah-student-link, .ah-heat-link {
  background: transparent; border: none; padding: 0;
  font: inherit; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px;
}
.ah-heat-link {
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 1px 8px;
  font-size: 11.5px; text-decoration: none;
}
.ah-student-link:hover, .ah-heat-link:hover { color: var(--accent-hot); }

/* Mobile tweaks */
@media (max-width: 540px) {
  .teacher-section { padding: 10px 12px; }
  .ts-head .student-add-entry { margin-left: 0; }
  .ts-head { flex-direction: column; align-items: flex-start; }
  .te-heat { min-width: 0; }
  .form-row.form-row-pair { flex-direction: column; }
  .add-stu-row { flex-direction: column; align-items: flex-start; }
  .add-stu-row .add-stu-claim,
  .add-stu-row .add-stu-yours { align-self: flex-end; }
}

/* ---------- Unscheduled-entries banner on the heat screen ---------- */
.heat-unscheduled-banner {
  margin-top: 10px;
  background: var(--warn-deep); border-color: var(--warn);
  color: var(--ink);
}
.heat-unscheduled-head {
  font-size: 14.5px; font-weight: 600; color: var(--warn-bright); margin-bottom: 4px;
}
.heat-unscheduled-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}

/* ---------- Acknowledged showcase warnings (muted styling) ---------- */
.heat-warnings-acknowledged {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.heat-warnings-acknowledged .heat-warn {
  color: var(--ink-faint);
  font-style: italic;
}
.heat-acknowledge {
  margin-top: 6px;
}
.heat-unacknowledge {
  margin-top: 6px;
  font-size: 11.5px;
}
/* When acknowledged, the heat row should NOT show the red warn highlight.
   The row's .heat-row-warn class is conditional on hasIssues already (heat
   builder code drops it when acknowledged). */

/* ---------- Best-place warning under a candidate card ---------- */
.best-place-warn {
  margin-top: 8px; padding: 8px 10px;
  background: var(--warn-deep); color: var(--warn-bright);
  border: 1px solid var(--warn); border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.4;
}

/* ---------- Teacher chips (multi-pick on student form) ---------- */
.teacher-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.teacher-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 13px;
  cursor: pointer; transition: 0.15s ease;
}
.teacher-chip:hover { border-color: var(--accent); color: var(--ink); }
.teacher-chip.is-on {
  background: var(--accent-tint); border-color: var(--accent);
  color: var(--ink);
}
.teacher-chip.is-primary { box-shadow: inset 4px 0 0 var(--accent); }
.teacher-chip input { accent-color: var(--accent); }
.teacher-chip-pick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.teacher-chip-star {
  border: none; background: transparent; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 6px;
  color: var(--ink-faint); transition: 0.15s ease;
}
.teacher-chip-star:hover { color: var(--accent); background: var(--accent-tint); }
.teacher-chip-star.is-on { color: var(--accent); }

/* ---------- Per-couple styleVariant tag on heat sheet (combined heats) ---------- */
.heat-couple-variant {
  display: inline-block;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; margin-left: 6px;
  background: var(--accent-tint); color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: 500;
}

/* ---------- Group edit modal (Deploy H bug-fix: per-group ✎ button) ---------- */
.group-edit { font-size: 13px; padding: 2px 8px; }
.group-edit-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 6px;
}
.group-edit-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif; font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.group-edit-row:hover { border-color: var(--accent); }
.group-edit-row input { accent-color: var(--accent); }
.group-edit-cw .group-edit-row { background: var(--bg-3); }

/* ---------- Pair chips (Step 1 group section: revisit-modal indicators) ---------- */
.pair-chip-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.pair-chip {
  background: var(--bg-3); color: var(--ink-dim);
  border: 1px dashed var(--line);
  border-radius: 999px; padding: 4px 12px;
  font-family: 'Jost', sans-serif; font-size: 12px;
  cursor: pointer; transition: 0.15s ease;
}
.pair-chip:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
.pair-chip strong { color: var(--ink); font-weight: 500; }
.pair-chip.cw-chip { border-color: var(--accent); color: var(--accent); }

/* ---------- Country Western "ask" prompt modal cards ---------- */
.cw-mode-choices {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 16px;
}
.cw-mode-card {
  display: block; text-align: left;
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: 'Jost', sans-serif;
  cursor: pointer; transition: 0.15s ease;
  width: 100%;
}
.cw-mode-card:hover { border-color: var(--accent); background: var(--accent-tint); }
.cw-mode-card.is-current {
  border-color: var(--accent); background: var(--accent-tint);
  box-shadow: inset 4px 0 0 var(--accent);
}
.cw-mode-card.is-current .cw-mode-title { color: var(--accent); font-weight: 600; }

/* Modal close button (X) */
.modal-close {
  background: transparent; border: none; color: var(--ink-faint);
  font-size: 22px; line-height: 1; padding: 4px 10px;
  cursor: pointer; transition: 0.15s ease;
  font-family: 'Jost', sans-serif;
}
.modal-close:hover { color: var(--accent); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Step container flash (used on undo/redo to draw attention) */
#wzStep.is-flashing {
  animation: heat-flash 0.6s ease-in-out 0s 2;
}

/* Field-level flash on undo/redo — applies to inputs and small containers
   the user actually changed (heat length, name, etc.). Heat rows + the wzStep
   container have their own more-specific animations above. */
input.is-flashing,
select.is-flashing,
textarea.is-flashing {
  animation: ssk-field-flash 0.6s ease-in-out 0s 3;
}
.form-row.is-flashing,
.form-card.is-flashing,
#groupPreview.is-flashing,
#organizersList.is-flashing,
#judgesList.is-flashing,
#teachersList.is-flashing,
#stylesList.is-flashing,
#combineList.is-flashing,
#excludeList.is-flashing,
#teamsList.is-flashing,
#studentSections.is-flashing,
#heatSheet.is-flashing,
#finaleBlock.is-flashing {
  animation: ssk-field-flash 0.6s ease-in-out 0s 3;
}
@keyframes ssk-field-flash {
  0%, 100% { outline: 2px solid var(--accent); outline-offset: 2px; }
  50%      { outline: 2px solid transparent; outline-offset: 2px; }
}
.cw-mode-title {
  font-family: 'Cinzel', serif; font-size: 15px; font-weight: 600;
  margin-bottom: 6px; color: var(--ink);
}
.cw-mode-desc {
  font-size: 13px; color: var(--ink-dim); line-height: 1.45;
}

/* ---------- Variant migration banner (top of Entries step) ---------- */
.variant-migration-banner {
  margin-bottom: 14px;
  background: var(--accent-tint); border-color: var(--accent);
  color: var(--ink);
}
.variant-migration-banner-head {
  font-size: 14.5px; margin-bottom: 4px; color: var(--ink);
}
.variant-migration-options {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.variant-migration-options .variant-pick {
  font-family: 'Jost', sans-serif;
}

/* ---------- Invalid entries (validation) ---------- */
.entry-line-invalid {
  border-left: 3px solid var(--warn);
  padding-left: 9px;
  background: var(--warn-deep);
}
.entry-line-invalid-tag {
  background: var(--warn-deep); color: var(--warn-bright);
  border: 1px solid var(--warn);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; margin-left: 8px;
  cursor: help;
}

/* ---------- Validation banner at top of Step 4 ---------- */
.validation-banner {
  background: var(--warn-deep); border-color: var(--warn);
  color: var(--ink);
  margin-bottom: 14px;
}
.validation-banner-head {
  font-size: 15px; font-weight: 600; color: var(--warn-bright); margin-bottom: 4px;
}
.validation-banner-list {
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
}
.validation-banner-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif; font-size: 13.5px; color: var(--ink);
  cursor: pointer; text-align: left; transition: 0.15s ease;
}
.validation-banner-row:hover { border-color: var(--accent); background: var(--bg-3); }
.validation-banner-name { font-weight: 500; }
.validation-banner-count { color: var(--warn-bright); font-size: 12px; }

/* Per-entry actionable rows inside the validation banner — surface each
   invalid entry (including orphans not rendered in any student section)
   with its reason and a Remove button so they can be cleaned up directly. */
.validation-banner-entries {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.validation-banner-entry {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif; font-size: 13px; color: var(--ink);
}
.vbe-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.vbe-student { color: var(--accent); font-weight: 600; font-size: 13px; }
.vbe-label { color: var(--ink); }
.vbe-reason {
  color: var(--warn-bright); font-size: 12.5px;
  flex: 1 1 100%;
  margin-top: -2px;
}
.vbe-remove { flex: 0 0 auto; }
.vbe-actions { display: flex; gap: 6px; flex: 0 0 auto; align-items: center; }
.validation-banner-actions {
  margin-top: 10px; display: flex; justify-content: flex-end;
}

/* Canceled (soft-deleted) entries on the student page */
.entry-line-canceled {
  opacity: 0.55;
  text-decoration: line-through;
}
.entry-line-canceled .entry-line-canceled-tag {
  text-decoration: none;
  background: var(--warn-deep); color: var(--warn-bright);
  border: 1px solid var(--warn);
}
.entry-line-canceled-tag {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; margin-left: 8px;
}

/* Floating Undo/Redo cluster (bottom-right of viewport, wizard only) */
.floating-undo {
  position: fixed; bottom: 16px; right: 16px; z-index: 40;
  display: flex; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px;
  box-shadow: var(--shadow);
}
.floating-undo-btn {
  width: 36px; height: 36px;
  background: transparent; color: var(--ink);
  border: none; border-radius: 999px;
  font-size: 18px; line-height: 1;
  cursor: pointer; transition: 0.15s ease;
}
.floating-undo-btn:hover:not(:disabled) { background: var(--accent-tint); color: var(--accent); }
.floating-undo-btn:disabled { color: var(--ink-faint); opacity: 0.45; cursor: not-allowed; }
@media print {
  .floating-undo { display: none !important; }
}

.heat-sheet {
  margin-top: 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.heat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.heat-table td {
  padding: 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.heat-table tr:last-child td { border-bottom: none; }

/* Block-per-heat layout — each heat row is a single full-width td containing
   a self-describing card: a header strip (Heat N · Type · Dance + actions)
   and a body with the couples list. Replaces the old 5-column table because
   on narrow screens the fixed column widths pushed the right-side
   Open-Style-Dance token and reorder controls off the page entirely. */
.heat-block-cell { padding: 0 !important; }
.heat-block {
  display: flex; flex-direction: column;
  padding: 12px 14px;
}
.heat-block-header {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}
.heat-block-title {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.hb-n {
  font-variant-numeric: tabular-nums;
  color: var(--accent); font-weight: 600;
  font-size: 13px;
  background: var(--accent-tint);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 1px 9px;
}
.hb-type {
  color: var(--ink-faint);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em;
}
.hb-dance {
  font-family: 'Cinzel', serif;
  font-size: 15px; color: var(--ink); font-weight: 600;
}
.hb-sep { color: var(--line); }
/* hb-meta groups Heat # + Type so on mobile we can swap their visual order
   with the dance name (dance becomes the prominent line, meta as subtitle).
   Stays inline-flex on desktop so the bullet between #/Type still renders. */
.hb-meta { display: inline-flex; align-items: baseline; gap: 6px; }
.heat-block .heat-actions { flex: 0 0 auto; margin-left: auto; align-items: center; }
.heat-block-body { padding-top: 2px; }

/* Zebra: alternate heats get a subtle lift so the eye can track block
   boundaries down a long schedule (John: "alternating colors heat to heat").
   Showcase purple below still wins — it's declared after. */
.heat-row-alt .heat-block { background: var(--row-alt); }
.heat-row-showcase .heat-block { background: var(--secondary-tint); }
.heat-row-showcase .hb-type,
.heat-row-showcase .hb-dance { color: var(--secondary-bright); }
.heat-row-warn .hb-dance { color: var(--ink); }
.heat-warnings { margin-top: 4px; font-size: 12px; color: var(--warn-bright); }
.heat-warn + .heat-warn { margin-top: 2px; }

.heat-couple-text { flex: 1; min-width: 0; }
.heat-couple-oc { color: var(--accent); font-size: 11.5px; margin-left: 4px; }
.heat-entry-remove { padding: 2px 7px; font-size: 11px; }

/* Couples list — CSS Grid with display:contents on each row so the four
   per-couple cells (names | level | token | ✕) align in vertical columns
   across every row within a heat. Replaces the previous per-row flex
   layout, which let each row size its own cells independently and pushed
   levels/tokens to different x-positions per row. */
.heat-couples {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: baseline;
  row-gap: 4px;
  column-gap: 16px;
}
.heat-couple-line { display: contents; }
.heat-couple-names {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px; line-height: 1.4;
  color: var(--ink);
}
.heat-couple-level,
.heat-couple-token {
  font-size: 13.5px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.heat-couple-level::before,
.heat-couple-token::before {
  content: "· ";
  color: var(--line);
  margin-right: 2px;
}
.heat-couple-line .heat-entry-remove {
  align-self: center;
}

.heat-performers { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.heat-performer { color: var(--ink); font-size: 13px; }

.heat-actions { display: flex; gap: 4px; align-items: center; }

/* On-screen: only the full level shows; the abbrev twin is hidden until print. */
.heat-couple-level .lvl-abbrev { display: none; }

/* Narrow-screen / mobile: nothing should clip or scroll off the right edge.
   - The header strip reorders so the dance name reads as the prominent line
     and "Heat N · Regular" becomes a small subtitle underneath.
   - The couples grid drops back to per-row flex so names get a full-width
     line and level/token/✕ flow on the next.
   - Heat actions (↑ ↓ ✕) wrap to their own row below the title.
   - Full names are always preserved (never abbreviated to "First L.") so
     ambiguity between students with shared first names doesn't arise. */
@media (max-width: 540px) {
  .heat-block { padding: 10px 12px; }
  .heat-block-header { gap: 6px; padding-bottom: 6px; margin-bottom: 6px; }

  /* Header strip reorder: dance name becomes line 1; meta strip line 2. */
  .heat-block-title { flex-direction: column; align-items: baseline; gap: 2px; }
  .hb-dance { order: 1; font-size: 17px; line-height: 1.2; }
  .hb-meta  { order: 2; font-size: 11.5px; }
  .hb-sep-meta-dance { display: none; }

  .heat-block .heat-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  /* Couples: per-row flex, names on their own line, level+token+✕ below. */
  .heat-couples {
    display: block;
  }
  .heat-couple-line {
    display: flex; flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    padding: 6px 0;
    border-bottom: 1px dotted var(--line-soft);
  }
  .heat-couple-line:last-child {
    border-bottom: none;
  }
  .heat-couple-names {
    flex: 1 1 100%;
    white-space: normal;
    overflow: visible; text-overflow: clip;
  }
  .heat-couple-line .heat-entry-remove {
    margin-left: auto;
  }
}

/* Print layout */
@media print {
  /* Tighter page margins — default is ~0.75in which leaves the right-side
     Open-Style-Dance token getting cut off. 0.35in fits comfortably on
     letter without bleeding off the page. */
  @page { size: letter portrait; margin: 0.35in; }
  body { background: white !important; color: black !important; }
  .ssk-header, .ssk-footer, .wizard-sidebar, .wizard-header, .wizard-nav, .heat-toolbar, .heat-controls, .step-header, .grain, .toast { display: none !important; }
  .heat-group-toggle .heat-group-chevron { display: none; }
  .heat-group-toggle { background: #f0f0f0; cursor: default; pointer-events: none; }
  .wizard-shell, .wizard-main, .app-root { display: block !important; max-width: 100% !important; padding: 0 !important; }
  .heat-sheet { background: white; border: 1px solid #888; box-shadow: none; }
  /* Shrink: smaller header strip + tighter block padding so we fit more heats
     per page. Couple lines use 9pt to match. */
  .heat-table { font-size: 9pt; }
  .heat-table td { border-bottom-color: #ccc; }
  .heat-block { padding: 4pt 6pt; }
  .heat-block-header { padding-bottom: 3pt; margin-bottom: 3pt; gap: 6pt; }
  .hb-n { font-size: 10pt; }
  .hb-type { font-size: 8.5pt; }
  .hb-dance { font-size: 11pt; }
  /* Override the on-screen CSS Grid (display: contents on rows) for print —
     grid cells from different couples otherwise wrap into the same page
     row when the paper is narrower than 4 columns of content, mixing
     people across rows. Revert to per-row flex so each couple prints
     cleanly. (The in-app Print button opens a separate clean tab; this
     handles browser Ctrl+P / system-print fallbacks.) */
  .heat-couples { display: block; gap: 2px; }
  .heat-couple-line {
    display: flex; align-items: baseline;
    flex-wrap: wrap;
    font-size: 9pt; gap: 4px 8px;
    padding: 2pt 0;
  }
  .heat-couple-names {
    flex: 1 1 auto;
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  .heat-row-showcase .heat-block { background: #f7f3fa !important; }
  .heat-row-showcase .hb-type,
  .heat-row-showcase .hb-dance { color: #3d1152 !important; } /* FADS purple — match screen */
  .heat-warnings, .heat-warn { color: #b5371a !important; }
  .heat-couple-oc { color: #8a6118 !important; }
  /* Print-friendly couple-line text: keep elements legible on white paper. */
  .heat-couple-level { color: #555 !important; }
  .heat-couple-token { color: #8a6118 !important; }
  .heat-couple-level::before, .heat-couple-token::before { color: #b89a4f !important; }
  /* Swap full level name for the short code (e.g. "Bronze Senior" → "Brz-Snr"). */
  .heat-couple-level .lvl-full   { display: none; }
  .heat-couple-level .lvl-abbrev { display: inline; }
  .heat-entry-remove { display: none !important; }
  .heat-actions { display: none !important; }
  /* page breaks: try to keep heats together */
  .heat-row { page-break-inside: avoid; }
}

/* ---------- (legacy) Entry rows (Step 5) ---------- */
.entry-row {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; background: var(--bg-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.entry-row-pair {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
}
.entry-row-meta {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
}
.entry-row-meta > .entry-field { flex: 1 1 160px; min-width: 0; }
.entry-row-meta > .entry-remove { flex: 0 0 auto; margin-left: auto; }
.entry-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.entry-field-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
.entry-field-narrow { flex: 0 0 140px !important; }
.entry-row input,
.entry-row select {
  width: 100%;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-family: 'Jost', sans-serif; font-size: 14.5px;
  outline: none; transition: 0.18s ease;
}
.entry-row input:focus,
.entry-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.entry-row.entry-showcase {
  border-left: 3px solid var(--secondary-bright);
}

/* Performer chips for showcase routines */
.performer-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.performer-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  cursor: pointer; font-size: 12.5px; color: var(--ink-dim);
  transition: 0.15s ease;
}
.performer-chip input { accent-color: var(--accent); margin: 0; }
.performer-chip:hover { border-color: var(--accent); }
.performer-chip.is-on { background: var(--accent-tint); border-color: var(--accent); color: var(--ink); }

/* ---------- Student rows (Step 4) — three-line layout ---------- */
.student-row {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; background: var(--bg-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.student-row-names {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
}
.student-row-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.student-row-meta > select { flex: 1 1 140px; min-width: 0; }
.student-row input,
.student-row select {
  width: 100%;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: 'Jost', sans-serif; font-size: 15px;
  outline: none; transition: 0.18s ease;
}
.student-row select option { padding: 6px 8px; }
.student-row select optgroup { font-weight: 600; padding: 4px 0; }
.student-row input:focus,
.student-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.student-row-bottom {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.student-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--ink-dim); cursor: pointer;
}
.student-toggle input { accent-color: var(--accent); }
.student-row-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }

/* ---------- Teacher rows (Step 3) — two-line layout ---------- */
.teacher-row {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; background: var(--bg-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.teacher-row-fields {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
}
.teacher-row-fields input,
.teacher-row-pin input {
  width: 100%;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: 'Jost', sans-serif; font-size: 15px;
  outline: none; transition: 0.18s ease;
}
.teacher-row-fields input:focus,
.teacher-row-pin input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.teacher-row-bottom {
  display: flex; align-items: center; gap: 8px;
}
.teacher-row-pin {
  display: flex; gap: 6px; align-items: center;
}
.teacher-row-pin input {
  width: 90px; text-align: center; font-variant-numeric: tabular-nums; padding: 10px 8px;
}
.teacher-row-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }

/* ---------- Organizer rows (Step 2) — two-line layout ---------- */
.org-row {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; background: var(--bg-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.org-row-fields {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
}
.org-row-fields input,
.org-row-bottom input.org-pin {
  width: 100%;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: 'Jost', sans-serif; font-size: 15px;
  outline: none; transition: 0.18s ease;
}
.org-row-fields input:focus,
.org-row-bottom input.org-pin:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.org-row-bottom {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.org-row-bottom input.org-pin {
  width: 110px; padding: 8px 12px; text-align: center; font-variant-numeric: tabular-nums;
}
.org-also-teacher {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--ink-dim); cursor: pointer;
}
.org-also-teacher input { accent-color: var(--accent); }
.org-row-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex: none; }
.org-tag {
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent-tint);
  white-space: nowrap;
}

/* ---------- Judge rows (Step 2) — reuse teacher-row styles, single-column name ---------- */
.judge-row .teacher-row-fields {
  grid-template-columns: 1fr;
}

/* ---------- Results PIN (Step 2) ---------- */
.results-pin-row {
  display: flex; flex-direction: column; gap: 10px;
}
.results-pin-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; color: var(--ink-dim); cursor: pointer;
}
.results-pin-toggle input { accent-color: var(--accent); }
.results-pin-cluster {
  display: flex; gap: 6px; align-items: center;
}
.results-pin-cluster input {
  width: 110px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: 'Jost', sans-serif; font-size: 15px;
  outline: none; text-align: center; font-variant-numeric: tabular-nums;
  transition: 0.18s ease;
}
.results-pin-cluster input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Info banner (e.g. "+ N organizers also teaching") */
.info-banner {
  margin-bottom: 12px; padding: 10px 12px;
  background: var(--accent-tint); border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--ink-dim); font-size: 13.5px; line-height: 1.45;
}
.info-banner strong { color: var(--ink); }

/* ============================================================ */
/* Running order — live "now dancing" (Feature ①)              */
/* ============================================================ */
.run-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.run-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.run-status { font-weight: 600; letter-spacing: 0.04em; }
.run-status-live { color: var(--highlight); }
.run-status-off { color: var(--ink-faint); }

.run-cards { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 640px) { .run-cards { grid-template-columns: 1fr; } }
.run-card {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; min-height: 120px;
}
.run-now { border: 1px solid var(--accent); background: var(--bg-3); margin-bottom: 16px; }
.run-now-live {
  border: 2px solid var(--highlight);
  background: linear-gradient(160deg, var(--highlight-tint), var(--bg-3) 62%);
  box-shadow: 0 0 0 4px var(--highlight-tint);
}
.run-card-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--ink-faint); }
.run-card-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
.run-now .run-card-label { color: var(--highlight); }
.run-card-title {
  font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.02em;
  font-size: 28px; line-height: 1.12; margin: 4px 0 2px; color: var(--ink);
}
.run-card-showcase .run-card-title { color: var(--secondary-bright); }
.run-card-sub {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 12px;
}
.run-next .run-card-title { font-size: 22px; }
.run-style { font-family: 'Jost', sans-serif; font-size: 0.6em; color: var(--ink-faint); font-weight: 400; }
.run-card-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.run-card-people li { font-size: 15px; color: var(--ink-dim); }
.run-now .run-card-people li { color: var(--ink); }

.run-controls { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 10px; }
.run-btn-big { font-size: 17px; padding: 14px 22px; min-width: 110px; }
.run-jump-wrap { display: flex; align-items: center; gap: 6px; }
.run-jump {
  width: 72px; text-align: center; font-variant-numeric: tabular-nums; font-size: 18px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px;
}
.run-jump:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.run-jump-of { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.run-hint { text-align: center; margin: 0 0 12px; }
.run-advanced-by { text-align: center; font-size: 12.5px; color: var(--accent); margin: -2px 0 10px; }
.run-progress {
  text-align: center; color: var(--ink-dim); font-size: 13px;
  font-variant-numeric: tabular-nums; margin-bottom: 14px;
  padding-top: 12px; border-top: 1px solid var(--line-soft);
}

.run-upnext-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); margin: 2px 0 8px;
}
.run-upnext-done { text-align: center; padding: 18px; font-size: 15px; }
.run-ondeck-tag {
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: 1px 7px; margin-left: 8px;
  vertical-align: middle;
}
.run-list-item.is-ondeck { border-color: var(--accent); background: var(--accent-tint); }
.run-add-couple {
  flex: none; font-size: 12px; color: var(--accent); background: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; cursor: pointer; white-space: nowrap;
}
.run-add-couple:hover { border-color: var(--accent); background: var(--accent-tint); }
.run-modal-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6); padding: 20px;
}
.run-modal {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; width: min(420px, 100%); box-shadow: var(--shadow-lift);
}
.run-modal-field { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; font-size: 13px; color: var(--ink-dim); }
.run-modal-field select {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; font-family: 'Jost', sans-serif; font-size: 15px; outline: none;
}
.run-modal-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.run-modal-err { color: var(--warn-bright); font-size: 13px; margin: 6px 0 0; }
.run-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Event settings modal (② archive / ③ delete) + teacher archived banner */
.evt-modal { width: min(460px, 100%); }
.evt-section { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.evt-section:first-of-type { border-top: none; }
.evt-section h4 { margin: 0 0 4px; font-family: 'Jost', sans-serif; font-size: 14px; color: var(--ink); }
.evt-section p { margin: 0 0 10px; }
.evt-danger h4 { color: var(--warn-bright); }
.evt-danger code { background: var(--bg-3); padding: 1px 5px; border-radius: 4px; }
.evt-delete-btn { border-color: var(--warn); color: var(--warn-bright); }
.evt-delete-btn:not(:disabled):hover { background: var(--warn-deep); border-color: var(--warn); }
.evt-delete-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.teacher-archived-banner {
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-3);
  color: var(--ink-dim); font-size: 14px; text-align: center;
}
/* ⑤ My-settings modal + ⑥ landing quick-resume */
.settings-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-name-grid > .run-modal-field { min-width: 0; }
@media (max-width: 480px) { .settings-name-grid { grid-template-columns: 1fr; } }
/* One uniform field style for every input/select in these modals. */
.evt-modal .run-modal-field { gap: 4px; margin: 8px 0; }
.evt-modal .run-modal-field input,
.evt-modal .run-modal-field select {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-family: 'Jost', sans-serif; font-size: 15px; outline: none; transition: 0.15s ease;
  box-sizing: border-box; width: 100%;
}
.evt-modal .run-modal-field input:focus,
.evt-modal .run-modal-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
/* Browser password-manager / autofill highlights (Firefox gold border + pale
   yellow fill, Chrome blue fill) fight the theme — pin them to our colors. */
.evt-modal input:autofill,
.evt-modal input:autofill:hover,
.evt-modal input:autofill:focus {
  border: 1px solid var(--line);
  -webkit-text-fill-color: var(--ink);
  box-shadow: inset 0 0 0 100px var(--bg);
}
.evt-modal input:-webkit-autofill,
.evt-modal input:-webkit-autofill:hover,
.evt-modal input:-webkit-autofill:focus {
  border: 1px solid var(--line);
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: inset 0 0 0 100px var(--bg);
}
/* Each section's action button hugs its content, aligned with the fields. */
.evt-section > .btn { margin-top: 4px; }
.settings-preview-note {
  margin: 0 0 14px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px dashed var(--line); background: var(--bg-3);
  color: var(--ink-dim); font-size: 13px;
}
.evt-modal input:disabled, .evt-modal select:disabled, .evt-modal .btn:disabled:not(#meClose) { opacity: 0.55; cursor: not-allowed; }
.settings-dj-badge {
  margin: 0 0 14px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent-tint);
  color: var(--ink-dim); font-size: 13.5px;
}
.settings-ok { color: var(--accent); font-size: 13px; margin: 6px 0 0; }
.settings-tab-pref { max-width: 240px; }
.evt-section .checkline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-dim); margin: 8px 0; cursor: pointer; }
.evt-section .checkline input { accent-color: var(--accent); }
.evt-section h4 { letter-spacing: 0.04em; }
.teacher-header-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.teacher-header-actions .teacher-runorder-btn { margin-top: 0; }
.ah-verb-neutral { color: var(--ink-dim); }

/* Bug-report modal: What's-new shortcut + this-device report history */
.bug-quick-row { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 0 0 14px; }
.bug-my-reports { width: 100%; font-size: 13px; color: var(--ink-dim); }
.bug-my-reports summary { cursor: pointer; color: var(--ink-faint); }
.bug-my-reports ul { list-style: none; margin: 6px 0 0; padding: 8px 10px; background: var(--bg-3); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 4px; }
.bug-my-reports li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmr-when { color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-right: 6px; }

.resume-card {
  margin: 18px auto 6px; max-width: 460px; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
}
.resume-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center;
}
.resume-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--accent-tint); color: var(--ink); cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 15px; transition: 0.15s ease;
}
.resume-chip:hover { background: var(--bg-3); box-shadow: var(--shadow); }
.resume-chip-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume-chip-go { flex: none; color: var(--accent); font-size: 13.5px; }

/* Teacher pick lists (add-student "Teachers" + edit-teachers modal) */
.ts-teacher-picks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 6px; }
.ts-teacher-pick { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-dim); cursor: pointer; }
.ts-teacher-pick input { accent-color: var(--accent); }
.ts-teacher-pick.is-locked { opacity: 0.75; cursor: default; }
.ts-edit-teachers {
  background: none; border: none; padding: 0 2px; margin-left: 6px;
  color: var(--accent); cursor: pointer; font-size: 12.5px; font-family: 'Jost', sans-serif;
}
.ts-edit-teachers:hover { text-decoration: underline; }

.teacher-live-now-banner {
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--highlight); background: var(--highlight-tint);
  color: var(--ink); font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.teacher-live-goschedule {
  margin-left: auto; background: none; border: none; padding: 0;
  color: var(--accent); cursor: pointer; font-size: 13.5px; text-decoration: underline; white-space: nowrap;
}
.run-list { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.run-list-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--bg-2); cursor: pointer; transition: 0.12s ease;
}
.run-list-item:hover { border-color: var(--accent); }
.run-list-item.is-done { opacity: 0.5; }
.run-list-item.is-current {
  border-color: var(--highlight); background: var(--highlight-tint);
  box-shadow: inset 3px 0 0 var(--highlight);
}
.run-list-item.is-showcase { border-color: var(--accent); }
.run-list-item.is-showcase .run-list-title { color: var(--secondary-bright); }
.run-list-n {
  font-family: 'Cinzel', serif; font-size: 14px; color: var(--ink-faint);
  min-width: 28px; text-align: center; font-variant-numeric: tabular-nums;
}
.run-list-item.is-current .run-list-n { color: var(--highlight); }
.run-list-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.run-list-title { font-weight: 600; color: var(--ink); }
.run-list-sub { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* One couple per row (Up Next + public live view): override the single-line clamp. */
.run-list-sub.run-list-couples { display: block; white-space: normal; overflow: visible; text-overflow: clip; }
.couple-row { line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.couple-row.text-faint { font-style: italic; }
/* Public, audience-facing running order: center it like a program sheet. */
.run-public { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Teacher Schedule — live "now dancing" (Feature ①) */
.teacher-live-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid var(--highlight); border-radius: var(--radius-sm);
  background: var(--highlight-tint);
}
.teacher-live-banner .tlb-main { font-size: 14.5px; color: var(--ink); }
.teacher-live-banner strong { color: var(--ink); }
.tlb-dot { color: var(--warn); animation: tlb-pulse 1.6s ease-in-out infinite; }
@keyframes tlb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.tlb-toggle { font-size: 13px; color: var(--ink-dim); white-space: nowrap; }
.teacher-heat.is-now {
  border-color: var(--highlight) !important;
  box-shadow: inset 3px 0 0 var(--highlight);
  background: var(--highlight-tint);
}
.th-now-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--highlight-ink); background: var(--highlight); border-radius: 999px;
  padding: 1px 8px; margin-right: 8px;
}
.teacher-dj-toggle { font-size: 13px; color: var(--ink-dim); white-space: nowrap; }
.teacher-dj-toggle input { accent-color: var(--accent); }
.teacher-runorder-btn { border-color: var(--accent); color: var(--accent); margin-top: 8px; }

/* ---------- Modal (used for snapshots, future modals) ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  display: grid; place-items: center;
  padding: 16px;
  animation: fadeIn 0.18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  width: 100%; max-width: 520px;
  max-height: 86vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.modal-head h2 {
  font-family: 'Cinzel', serif; font-size: 20px; margin: 0;
}
.modal-close {
  background: transparent; border: none; color: var(--ink-faint);
  font-size: 26px; line-height: 1; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
}
.modal-close:hover { background: var(--bg-3); color: var(--ink); }
.modal-body { padding: 14px 18px 18px; overflow: auto; }

/* ---------- Bug report modal ---------- */
.bugshot-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bugshot-preview {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 4px;
  /* Without this, the column flexbox stretches the <img> to full width while
     max-height caps the height — distorting the aspect ratio (squished). */
  align-items: flex-start;
}
.bugshot-preview img {
  display: block; max-width: 100%; max-height: 220px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg);
}
.bugshot-meta { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.02em; }
.bug-context { margin: 14px 0 4px; }
.bug-context > summary {
  cursor: pointer; font-size: 12.5px; color: var(--ink-dim);
  letter-spacing: 0.04em; user-select: none;
}
.bug-context > summary:hover { color: var(--accent); }
.bug-context-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  margin: 10px 0 0; padding: 12px 14px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.5;
}
.bug-context-grid dt { color: var(--ink-faint); letter-spacing: 0.04em; }
.bug-context-grid dd { margin: 0; color: var(--ink-dim); word-break: break-word; min-width: 0; }

/* ---------- Footer ---------- */
.ssk-footer {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line-soft);
  margin-top: 32px;
}
.ssk-footer-inner {
  max-width: min(95vw, 1200px); margin: 0 auto;
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.04em;
}
.ssk-footer-brand { font-family: 'Cinzel', serif; }
.ssk-footer-link {
  color: var(--ink-dim); text-decoration: none;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 1px;
}
.ssk-footer-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Modal (wide variant for changelog) ---------- */
.modal-card-wide { max-width: 720px; }

/* ---------- Changelog entries ---------- */
.changelog-list { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.changelog-entry {
  padding: 12px 14px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.changelog-entry-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 6px;
}
.changelog-entry-title {
  font-family: 'Cinzel', serif; font-size: 15px; color: var(--ink); font-weight: 600;
}
.changelog-entry-date {
  font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.changelog-entry-items {
  margin: 0; padding-left: 18px;
  font-size: 13.5px; color: var(--ink-dim); line-height: 1.55;
}
.changelog-entry-items li { margin-bottom: 4px; }

/* ---------- Snapshot list ---------- */
.snap-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.snap-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.snap-row-meta { flex: 1; min-width: 0; }
.snap-row-when { font-size: 14px; color: var(--ink); }
.snap-row-source { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; letter-spacing: 0.02em; }
.snap-restore { flex: none; }

/* ---------- Wizard responsive ---------- */
@media (max-width: 760px) {
  .app-root { padding: 16px 12px 80px; max-width: 100%; }
  .wizard-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "header" "sidebar" "main";
    gap: 14px;
  }
  /* Hide the desktop pill sidebar; show the compact dropdown instead.
     min-width:0 (with the minmax(0,1fr) column above) lets the step <select>
     shrink to the screen instead of its longest option forcing the grid
     column — and the whole page — wider than the viewport. */
  .wizard-sidebar { display: none; }
  .wizard-sidebar-mobile { display: flex; min-width: 0; }
  .radio-grid, .check-grid, .form-grid-2 { grid-template-columns: 1fr; }
  /* On a phone the brand/header actions (Snapshots, bell, Sign out) don't fit
     beside the logo — let them wrap below it instead of pushing the page wide. */
  .brand { flex-wrap: wrap; justify-content: center; }
  .brand-actions { min-width: 0; justify-content: center; gap: 6px; }
  /* Flatten the per-view action group so ALL header buttons wrap together as a
     single set — packs them into ~2 tidy rows instead of 3+. */
  .view-actions { display: contents; }
  .brand-actions .btn-small { padding: 7px 10px; font-size: 12.5px; }
  /* Collapse the bug button to its icon on phones so the header stays tidy. */
  .bug-report-btn-label { display: none; }
  .bug-report-btn { padding: 0; width: 34px; height: 34px; justify-content: center; }
}