/* Rekindle Training — palette from the Rekindle Training LLC brand package
   (Donnie Hurd): Rekindle Red primary; Flame Orange, Fire Gold and Steel Silver
   accents; Charcoal Black chrome; white surfaces. Type per the package: Cinzel
   stands in for Trajan Pro (licensed), Bebas Neue for subheads/labels,
   Montserrat for body. */
:root {
  /* The six swatches on the brand board. */
  --brand-red: #B30000;
  --flame-orange: #FF6600;
  --fire-gold: #FFC300;
  --steel: #C0C0C0;
  --charcoal: #111111;
  --white: #FFFFFF;

  /* Role tokens. The ember names are kept so the rest of the sheet reads
     unchanged; they now resolve to the brand colors above. */
  --ember: var(--brand-red);         /* primary accent */
  --ember-deep: #8A0000;             /* hover states, gradient top */
  --ember-low: var(--flame-orange);  /* gradient base */
  --gold: var(--fire-gold);          /* highlights — sparingly */
  --ink: var(--charcoal);
  --ink-soft: #3a3a3a;
  --muted: #6b6b6b;
  --bg: #F3F3F3;                     /* neutral light grey */
  --card: var(--white);
  --line: #dcdcdc;                   /* hairlines — a light cousin of Steel Silver */
  --pass: #15803d;                   /* semantic green: not on the board, kept for pass/fail */
  --pass-bg: #e8f5ee;
  --fail: var(--brand-red);
  --fail-bg: #fbe9e9;
  --progress-bg: #fff3c4;            /* Fire Gold tint */
  --warn-text: #7a5600;              /* Fire Gold, deepened until it reads as text */
  --radius: 10px;
  --shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 1px 3px rgba(17, 17, 17, .08);
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-label: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }
/* Author display rules (flex/grid) would otherwise beat the UA's [hidden]. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg); color: var(--ink);
  min-height: 100vh; display: flex; flex-direction: column;
  font-size: 14.5px; line-height: 1.5; /* Montserrat sets wider than Inter did at 15px */
}
a { color: var(--ember); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: .02em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
.muted { color: var(--muted); }
small { color: var(--muted); }

/* ---------- Nav ---------- */
.topnav { background: var(--charcoal); border-bottom: 3px solid var(--brand-red); box-shadow: var(--shadow); color: #fff; }
.topnav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 10px 20px; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; }
.brand:hover { text-decoration: none; }
.brand-lockup { height: 34px; display: block; } /* legacy vector lockups (recolored), not used by default */
/* Emblem + live-text lockup. The round flame mark is lifted from the brand board;
   the wordmark is set in Cinzel (Trajan stand-in) so it stays crisp at any size. */
.brand-mark { width: 42px; height: 42px; display: block; flex: none; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .07em; color: #fff; white-space: nowrap; }
.brand-tag { font-family: var(--font-label); font-size: .76rem; letter-spacing: .2em; color: var(--steel); margin-top: 4px; white-space: nowrap; }
.brand-tag .sep { color: var(--brand-red); padding: 0 .3em; }
.brand-on-light .brand-name { color: var(--charcoal); }
.brand-on-light .brand-tag { color: var(--muted); }
.brand-sm { gap: 8px; }
.brand-sm .brand-mark { width: 30px; height: 30px; }
.brand-sm .brand-name { font-size: .92rem; }
.brand-sm .brand-tag { display: none; }
.brand-stacked { flex-direction: column; align-items: center; gap: 14px; }
.brand-stacked .brand-text { align-items: center; }
.brand-stacked .brand-mark { width: 132px; height: 132px; }
.brand-stacked .brand-name { font-size: 1.85rem; letter-spacing: .09em; }
.brand-stacked .brand-llc { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .34em; color: var(--muted); margin-top: 7px; }
.brand-stacked .brand-tag { font-size: .9rem; letter-spacing: .24em; margin-top: 8px; padding-top: 9px; border-top: 2px solid var(--brand-red); }
.navlinks { display: flex; align-items: center; gap: 4px 16px; flex: 1; }
.navlinks > a, .navlinks summary { color: var(--steel); font-weight: 600; padding: 6px 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.navlinks > a:hover, .navlinks summary:hover { color: #fff; text-decoration: none; border-bottom-color: var(--brand-red); }
.navlinks > a.active { color: #fff; border-bottom-color: var(--brand-red); }
.nav-user { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-user-name { font-weight: 600; font-size: .88rem; white-space: nowrap; }

/* Dropdown menus: native <details>, styled. */
.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .8; }
.nav-menu[open] > summary { color: #fff; }
.nav-menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-menu-list { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: 200px; background: #1d1d1d; border: 1px solid #333; border-top: 2px solid var(--brand-red); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); padding: 6px; display: flex; flex-direction: column; }
.nav-menu-list.nav-menu-right { left: auto; right: 0; }
.nav-menu-list a, .nav-menu-list button { display: block; width: 100%; text-align: left; color: var(--steel); font: inherit; font-weight: 600; padding: 8px 10px; border-radius: 6px; background: none; border: none; cursor: pointer; white-space: nowrap; }
.nav-menu-list a:hover, .nav-menu-list button:hover, .nav-menu-list a.active { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.nav-menu-list a.active { box-shadow: inset 3px 0 0 var(--brand-red); }
.nav-menu-list form { margin: 0; border-top: 1px solid #333; padding-top: 4px; margin-top: 4px; }
.nav-menu-who { padding: 6px 10px 8px; display: flex; flex-direction: column; color: #fff; line-height: 1.25; border-bottom: 1px solid #333; margin-bottom: 4px; }
.nav-menu-who small { color: var(--steel); }
.nav-user > summary.nav-user-link { padding: 3px 8px 3px 4px; border-bottom: none; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; font-size: .78rem;
  flex: none;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.15rem; }
.avatar-xl { width: 72px; height: 72px; font-size: 1.5rem; }
.nav-user-link { display: flex; align-items: center; gap: 10px; color: #fff; border-radius: 8px; padding: 3px 6px; }
.nav-user-link:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.nav-user-name small { color: var(--steel); }
.topnav .btn-ghost { color: var(--steel); }
.topnav .btn-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---------- Layout ---------- */
.page { flex: 1; }
.container { max-width: 1080px; margin: 0 auto; padding: 26px 20px 40px; }
.container.narrow { max-width: 760px; }
.container.wide { max-width: 1280px; }
.footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 18px; }
.page-title { margin-bottom: 18px; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.page-title-row .page-title { margin-bottom: 0; }
.page-title-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumbs { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.section-title { margin: 4px 0 12px; }
.section-sub { margin-top: 20px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px;
}
.empty-state { text-align: center; color: var(--muted); padding: 34px; }
.error-card { text-align: center; padding: 40px; }
.error-card h1 { color: var(--ember); }

/* ---------- Buttons, forms, badges ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 14px; font-size: .9rem; font-weight: 600;
  cursor: pointer; text-decoration: none !important; transition: background .12s, border-color .12s;
}
.btn:hover { background: #ececec; }
.btn-primary { background: var(--ember); border-color: var(--ember); color: #fff; }
.btn-primary:hover { background: var(--ember-deep); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #3a2b00; }
.btn-pass { background: var(--pass); border-color: var(--pass); color: #fff; }
.btn-danger { background: var(--fail-bg); border-color: #f3c1c1; color: var(--fail); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-sm { padding: 5px 10px; font-size: .8rem; }
.btn-icon { padding: 5px 9px; font-size: .85rem; }
/* Inline SVG icons (src/icons.js) — size with the text around them, colour from currentColor. */
.icon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.2em; }
.btn-icon .icon, .modal-close .icon { vertical-align: middle; }
.badge .icon { width: 1.05em; height: 1.05em; vertical-align: 0; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.input {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
  font: inherit; color: var(--ink); background: #fff;
}
.input:focus { outline: 2px solid rgba(179, 0, 0, .25); border-color: var(--ember); }
.stack-form { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.field-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.field-row { display: flex; gap: 12px; }
.check-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 3px 10px; font-size: .76rem; font-weight: 700;
  background: #ebebeb; color: var(--ink-soft); white-space: nowrap;
}
.badge-pass { background: var(--pass-bg); color: var(--pass); }
.badge-fail { background: var(--fail-bg); color: var(--fail); }
.badge-progress { background: var(--progress-bg); color: var(--warn-text); }
.badge-locked { background: #ebebeb; color: var(--muted); }
.badge-time { background: #e6e6e6; color: #333; font-variant-numeric: tabular-nums; }

/* ---------- Progress bars ---------- */
.progress-row { display: flex; align-items: center; gap: 10px; }
.progressbar { flex: 1; height: 8px; border-radius: 999px; background: #e3e3e3; overflow: hidden; }
.progressbar-fill { height: 100%; background: linear-gradient(90deg, var(--ember-deep), var(--ember-low)); border-radius: 999px; }
.progress-label { font-size: .82rem; font-weight: 700; color: var(--ink-soft); min-width: 38px; text-align: right; }

/* ---------- Login ---------- */
.login-wrap { max-width: 900px; margin: 0 auto; padding: 48px 20px; flex: 1; }
.login-hero { text-align: center; margin-bottom: 34px; }
.login-lockup { width: 230px; max-width: 70vw; margin-bottom: 4px; }
.auth-card { max-width: 460px; margin: 0 auto 18px; }
.auth-card h2 { margin-bottom: 14px; }
.auth-alt { margin: 14px 0 0; color: var(--muted); font-size: .9rem; }
.form-error {
  background: var(--fail-bg); color: var(--fail); border: 1px solid #f3c1c1;
  border-radius: 8px; padding: 9px 12px; font-size: .88rem; font-weight: 600; margin-bottom: 12px;
}
.demo-hint { max-width: 460px; margin: 0 auto; font-size: .84rem; color: var(--ink-soft); }
.demo-hint ul { margin: 8px 0 0; padding-left: 18px; }
.demo-hint li { margin: 2px 0; }
.demo-hint code { background: #ececec; border-radius: 4px; padding: 1px 5px; }

/* ---------- Course cards ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 18px; }
.course-card { display: flex; flex-direction: column; gap: 10px; }
/* Title keeps at least ~200px; a long status badge drops under it instead of
   squeezing the title to one word per line. */
.course-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.course-card-head h2 { flex: 1 1 200px; margin-bottom: 0; }
.course-card-head h2 a { color: var(--ink); }
.course-card-head h2 a:hover { color: var(--ember); text-decoration: none; }
.course-card p { margin: 0; }
.course-card-meta { display: flex; gap: 16px; color: var(--muted); font-size: .84rem; }
.course-card .btn { align-self: flex-start; }
.new-course-card { border-style: dashed; }

/* ---------- Course detail / module list ---------- */
.course-header { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 18px; }
.course-header h1 { margin-bottom: 4px; }
.course-header p { margin: 0; }
.course-header-stats { min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.module-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.module-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.module-locked { opacity: .62; }
.module-icon {
  width: 38px; height: 38px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 700;
  background: #ececec; color: var(--ink-soft);
}
.module-icon-lesson { background: var(--fail-bg); color: var(--brand-red); }
.module-icon-quiz { background: var(--progress-bg); color: var(--warn-text); }
.module-icon-assignment { background: #e4e4e4; color: #333; }
.module-icon-page { background: #e7eef7; color: #1f4e79; }
.module-icon .icon { width: 21px; height: 21px; }
.module-main { flex: 1; min-width: 0; }
.module-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.module-title { font-weight: 700; color: var(--ink); }
a.module-title:hover { color: var(--ember); text-decoration: none; }
.module-kind { color: var(--muted); font-size: .8rem; }
.module-sub { font-size: .8rem; margin-top: 2px; }
.module-status { flex: none; }
.module-actions { display: flex; gap: 6px; flex: none; }

/* ---------- Viewer ---------- */
.viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.viewer-head h1 { margin: 0; }
.viewer-head-right { display: flex; gap: 8px; }
.viewer { padding: 0; overflow: hidden; }
.viewer-stage { position: relative; background: #1a1a1a; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.viewer-stage img, .viewer-stage canvas { max-width: 100%; display: block; }
.viewer-stage img { width: 100%; height: auto; }
.viewer-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 64px; border: none; border-radius: 10px;
  background: rgba(20, 22, 25, .45); color: #fff; font-size: 1.9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .12s;
}
.viewer-nav:hover { background: rgba(179, 0, 0, .85); }
.viewer-nav[disabled] { opacity: .25; cursor: default; }
.viewer-nav[disabled]:hover { background: rgba(20, 22, 25, .45); }
.viewer-prev { left: 12px; }
.viewer-next { right: 12px; }
.viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; }
.viewer-units { display: flex; gap: 6px; flex-wrap: wrap; }
.unit-dot {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--steel); background: #fff; cursor: pointer; padding: 0;
}
.unit-dot.viewed { background: var(--gold); border-color: var(--gold); }
.unit-dot.current { border-color: var(--ember); background: var(--ember); }
.viewer-counter { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer-footer { display: flex; align-items: center; gap: 16px; margin-top: 14px; }

/* ---------- Quiz ---------- */
.quiz-form .quiz-q { border: none; border-top: 1px solid var(--line); margin: 0; padding: 16px 0 6px; }
.quiz-form .quiz-q:first-child { border-top: none; padding-top: 4px; }
.quiz-q legend { font-weight: 700; padding: 0 0 8px; }
.quiz-opt { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.quiz-opt:hover { background: #f2f2f2; }
.quiz-result h2 { margin-bottom: 2px; }
.quiz-pass h2 { color: var(--pass); }
.quiz-fail h2 { color: var(--fail); }
.quiz-score { font-size: 1.6rem; font-weight: 800; margin: 0 0 14px; }
.quiz-review { display: flex; flex-direction: column; gap: 12px; }
.quiz-review-q { display: flex; gap: 12px; align-items: flex-start; }
.quiz-review-mark { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; }
.quiz-review-mark.ok { background: var(--pass-bg); color: var(--pass); }
.quiz-review-mark.bad { background: var(--fail-bg); color: var(--fail); }
.quiz-q-text { font-weight: 600; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th { text-align: left; color: var(--ink-soft); font-family: var(--font-label); font-weight: 400; font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; padding: 8px 10px; border-bottom: 2px solid var(--line); }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
/* Wide tables (People row actions) scroll inside the card instead of
   clipping at the card edge. */
.table-card { margin-bottom: 18px; overflow-x: auto; }
.table-scroll { overflow-x: auto; }

/* ---------- Instructor editor ---------- */
.editor-cols { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.editor-side { display: flex; flex-direction: column; gap: 14px; }
.side-card h3 { margin-bottom: 6px; }
.side-card .muted { font-size: .82rem; margin-top: 0; }

/* ---------- Quiz builder ---------- */
.qb-question { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0 0 6px; display: flex; flex-direction: column; gap: 10px; }
.qb-q-head { display: flex; justify-content: space-between; align-items: center; }
.qb-options { display: flex; flex-direction: column; gap: 8px; }
.qb-opt-row { display: flex; gap: 10px; align-items: center; }
.qb-opt-row .input { flex: 1; }

/* ---------- Submissions ---------- */
.submission-row { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.submission-main { display: flex; flex-direction: column; gap: 8px; min-width: 280px; }
.submission-title { display: flex; align-items: center; gap: 10px; }
.submission-file { font-size: .9rem; }
.submission-grade { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.grade-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grade-form .input { width: 260px; }
.submission-feedback { max-width: 340px; text-align: right; }

/* ---------- Reports ---------- */
.report-table th.report-mod-head { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-cell { min-width: 92px; }
.report-cell.cell-done { background: var(--pass-bg); }
.cell-top { font-weight: 700; font-variant-numeric: tabular-nums; }
.cell-detail { font-size: .74rem; }
.report-user { white-space: nowrap; font-weight: 600; }
.report-user .avatar { width: 24px; height: 24px; font-size: .62rem; vertical-align: middle; margin-right: 4px; }
.unit-bars { display: flex; gap: 10px; align-items: flex-end; padding: 10px 4px 0; overflow-x: auto; }
.unit-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 46px; }
.unit-bar-col .unit-bar { width: 26px; min-height: 3px; height: 60px; background: linear-gradient(180deg, var(--ember-deep), var(--ember-low)); border-radius: 4px 4px 0 0; align-self: center; }
.unit-bar-col { height: 130px; justify-content: flex-end; }
.unit-bar-label { font-size: .74rem; font-weight: 700; color: var(--ink-soft); }
.unit-bar-secs { font-size: .68rem; white-space: nowrap; }

/* ---------- Profile ---------- */
.profile-cols { display: grid; grid-template-columns: 400px 1fr; gap: 22px; align-items: start; }
.profile-identity { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.profile-name { margin: 0 0 2px; }
.swatch-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.swatch { cursor: pointer; position: relative; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-dot { display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line); }
.swatch input:checked + .swatch-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ember); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat-tile { text-align: center; padding: 16px 10px; }
.stat-value { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-denom { color: var(--muted); font-size: 1rem; font-weight: 600; }
.stat-label { color: var(--muted); font-family: var(--font-label); font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.profile-course-row { padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.profile-course-row:first-of-type { border-top: none; padding-top: 0; }
.profile-course-row a { font-weight: 600; }

/* ---------- Admin & compliance ---------- */
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; }
.notice { border-radius: 8px; padding: 10px 14px; font-size: .9rem; font-weight: 600; margin-bottom: 16px; }
.notice-ok { background: var(--pass-bg); color: var(--pass); border: 1px solid #bfe3cd; }
.notice-warn { background: var(--progress-bg); color: var(--warn-text); border: 1px solid #ecd27a; font-size: .82rem; font-weight: 500; margin-bottom: 10px; }
.stat-link { text-decoration: none !important; color: inherit; transition: border-color .12s; }
.stat-link:hover { border-color: var(--ember); }
.stat-bad .stat-value { color: var(--fail); }
.stat-warn .stat-value { color: var(--warn-text); }
.row-inactive { opacity: .55; }
.input-sm { padding: 5px 8px; font-size: .84rem; width: auto; }
.people-table td { vertical-align: middle; }
.people-actions { white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.audit-table .audit-action { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.cell-behind { background: var(--fail-bg); }
.assignment-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.course-overdue { border-color: #f3c1c1; }
.transcript-total { margin-left: auto; text-align: right; }
.transcript-footer { margin-top: 6px; font-size: .78rem; }

@media print {
  .topnav, .no-print, .footer { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .container { max-width: 100%; padding: 0; }
}

/* ---------- Assignment ---------- */
.assignment-instructions { white-space: pre-wrap; }
.upload-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.upload-form .btn { align-self: flex-start; }

/* ---------- Marketing site ---------- */
.mkt-nav { background: var(--charcoal); border-bottom: 3px solid var(--brand-red); }
.mkt-nav-in { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; }
.mkt-nav-links { display: flex; align-items: center; gap: 18px; }
.mkt-nav-links a { font-weight: 600; color: var(--steel); }
.mkt-nav-links a:hover { color: #fff; text-decoration: none; }
.mkt-nav-links a.btn { color: #fff; }
.mkt-in { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.mkt-hero {
  background:
    radial-gradient(ellipse 60% 90% at 12% 0%, rgba(179, 0, 0, .55), transparent 65%),
    radial-gradient(ellipse 45% 70% at 100% 100%, rgba(255, 102, 0, .16), transparent 65%),
    var(--charcoal);
  color: #fff; padding: 84px 0 76px;
}
.mkt-kicker { color: var(--fire-gold); font-family: var(--font-label); font-size: 1.05rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 400; margin-bottom: 22px; }
.mkt-hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: .02em; line-height: 1.12; margin: 0 0 16px; color: #fff; }
.mkt-hero-sub { color: var(--steel); max-width: 580px; font-size: 1.06rem; margin: 0 0 30px; }
.mkt-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-lg { padding: 13px 22px; font-size: 1rem; }
.btn-dark-ghost { background: transparent; border-color: var(--steel); color: #fff; }
.btn-dark-ghost:hover { background: rgba(255, 255, 255, .1); }
.mkt-band { padding: 64px 0; }
.mkt-band-alt { background: #E9E9E9; }
.mkt-h2 { font-family: var(--font-label); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); margin: 0 0 22px; font-weight: 400; }
.mkt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mkt-stat .n { font-size: 2rem; font-weight: 800; color: var(--brand-red); letter-spacing: -.02em; }
.mkt-stat p { color: var(--ink-soft); font-size: .92rem; margin: 6px 0 0; }
.mkt-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mkt-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px; }
.mkt-card p { font-size: .95rem; color: #2a2a2a; margin: 8px 0 0; }
.mkt-card-n { color: var(--brand-red); font-family: var(--font-label); font-weight: 400; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; }
.mkt-proof { font-size: .84rem !important; color: var(--muted) !important; font-style: italic; margin-top: 12px !important; }
.mkt-step { padding: 4px 8px; }
.mkt-step-n { width: 34px; height: 34px; border-radius: 50%; background: var(--ember); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.mkt-step h3 { margin: 0 0 6px; }
.mkt-step p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.mkt-final {
  background: radial-gradient(ellipse 55% 100% at 50% 100%, rgba(179, 0, 0, .5), transparent 70%), var(--charcoal);
  color: #fff; padding: 72px 0; text-align: center;
}
.mkt-final h2 { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: .03em; margin: 0 0 10px; }
.mkt-final p { color: var(--steel); margin: 0 0 26px; }
.mkt-final .mkt-cta-row { justify-content: center; }
.mkt-foot { padding: 34px 0 44px; text-align: center; }
.mkt-foot .mkt-in { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.mkt-foot-links a { color: var(--ink-soft); font-weight: 600; }

/* ---------- Contact / join / onboarding ---------- */
.contact-cols { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.contact-aside { display: flex; flex-direction: column; gap: 14px; }
.contact-list li { margin-bottom: 8px; }
/* Honeypot field on the contact form — off-screen for people, present for bots. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.tight-list { margin: 8px 0 0; padding-left: 18px; font-size: .92rem; color: var(--ink-soft); }
.tight-list li { margin-bottom: 6px; }
.onboarding-card { border-left: 5px solid var(--ember); margin-bottom: 18px; }
.onboarding-steps { margin: 8px 0 0; padding-left: 20px; }
.onboarding-steps li { margin-bottom: 10px; }

/* ---------- Trainees roster & invitations ---------- */
.roster-table td { vertical-align: top; }
.roster-courses { min-width: 320px; }
.course-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 6px 3px 10px;
  font-size: .78rem; font-weight: 600; background: #ebebeb; color: var(--ink-soft); white-space: nowrap; line-height: 1.3;
}
.chip-complete { background: var(--pass-bg); color: var(--pass); }
.chip-overdue { background: var(--fail-bg); color: var(--fail); }
.chip-due { background: var(--progress-bg); color: var(--warn-text); }
.chip-mark { font-family: var(--font-label); font-weight: 400; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.chip-remove { display: inline; margin: 0; }
.chip-remove button { border: none; background: transparent; color: inherit; opacity: .55; cursor: pointer; font-size: .8rem; padding: 0 2px; line-height: 1; }
.chip-remove button:hover { opacity: 1; }
.assign-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.assign-inline .input-sm { width: auto; max-width: 220px; }
.invite-link-cell { min-width: 300px; }
.invite-link-cell .invite-link { width: 100%; max-width: 340px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; }
.invite-people { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }

/* ---------- Trainee detail modal (native <dialog>) ---------- */
dialog.modal {
  border: none; border-radius: 12px; padding: 0;
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  background: var(--card); color: var(--ink); box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}
dialog.modal::backdrop { background: rgba(17, 17, 17, .55); }
.modal-inner { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.modal-head {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px; flex: none;
  background: var(--charcoal); color: #fff; border-bottom: 3px solid var(--brand-red); border-radius: 12px 12px 0 0;
}
.modal-head .muted { color: var(--steel); font-size: .88rem; }
.modal-title-block { min-width: 0; }
.modal-title { margin: 0 0 2px; font-family: var(--font-display); font-size: 1.25rem; color: #fff; }
.modal-title .badge { vertical-align: middle; }
.modal-head form { margin-left: auto; }
.modal-close { background: transparent; border: none; color: var(--steel); font-size: 1.1rem; cursor: pointer; padding: 6px 10px; border-radius: 6px; line-height: 1; }
.modal-close:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.modal-body { overflow: auto; padding: 4px 22px 20px; }
.modal-body .notice { margin: 14px 0 0; }
.modal-section { padding: 16px 0; border-top: 1px solid var(--line); }
.modal-body > .modal-section:first-child, .modal-body > .notice + .modal-section { border-top: none; }
.modal-section h3 { font-family: var(--font-label); font-weight: 400; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.modal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.modal-form-grid .modal-span { grid-column: 1 / -1; }
@media (max-width: 600px) { .modal-form-grid { grid-template-columns: 1fr; } }

/* ---------- Chapters & assignment materials ---------- */
.chapter-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 8px; }
.chapter-title { margin: 0; font-family: var(--font-label); font-weight: 400; font-size: 1rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); }
.chapter-divider { list-style: none; margin: 16px 0 2px; }
.assignment-video { width: 100%; max-height: 420px; background: #000; border-radius: 10px; }
/* Download chips share the message-attachment look (.msg-files / .msg-file, defined further down — hence the compound selector). */
.msg-files.material-files { margin: 8px 0 14px; max-width: 560px; }
.material-edit-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.material-edit-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.material-edit-list .qb-opt-row { gap: 6px; }

@media (max-width: 860px) {
  .mkt-stats, .mkt-grid3 { grid-template-columns: 1fr; }
  .contact-cols { grid-template-columns: 1fr; }
}

/* Authoring vs. previewing. The editor's per-item Edit button opens the item
   editor; Preview deliberately opens the learner view, and that view then carries
   the banner below so staff always have a way back. */
.module-author-actions { display: flex; gap: 6px; flex: none; align-items: center; }
.preview-banner {
  background: var(--ink); color: #fff; font-size: .86rem;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 9px 16px; flex-wrap: wrap;
}
.preview-banner .btn { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.preview-banner .btn:hover { background: rgba(255,255,255,.12); }

/* Quiz builder: per-question numbering and reorder controls. */
.qb-q-num { font-family: var(--font-label); font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.qb-q-tools { display: flex; gap: 4px; }
.qb-final-flag {
  display: flex; align-items: center; gap: 7px;
  font-size: .82rem; color: var(--ink-soft); cursor: pointer; user-select: none;
}

/* Course that cannot be credited because an item failed to prepare. */
.course-blocked {
  border-left: 4px solid var(--ember-deep); background: var(--progress-bg);
  margin-bottom: 16px; font-size: .92rem; color: var(--ink-soft);
}

/* ---------- Legal pages (/privacy, /terms) ---------- */
.legal { max-width: 820px; }
.legal h1 { font-size: 1.7rem; }
.legal h2 {
  font-size: 1.06rem; margin: 34px 0 10px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.legal h3 { font-size: .95rem; margin: 22px 0 6px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal li { margin-bottom: 7px; }
.legal ul, .legal ol { padding-left: 20px; }
.legal section a, .legal .legal-summary a, .legal-draft a { text-decoration: underline; }
.legal code { background: #ececec; border-radius: 4px; padding: 1px 5px; font-size: .85em; }
.legal-meta { color: var(--muted); font-size: .85rem; margin: -10px 0 20px; }
.legal .table { font-size: .85rem; }
.legal .table td { color: var(--ink-soft); }

.legal-summary { border-left: 4px solid var(--ember); margin-bottom: 16px; }
.legal-summary h2 { margin: 0 0 10px; padding-top: 0; border-top: none; }
.legal-summary .tight-list li { margin-bottom: 8px; }

.legal-toc { margin-bottom: 8px; }
.legal-toc h2 {
  margin: 0 0 8px; padding-top: 0; border-top: none;
  font-family: var(--font-label); font-size: .98rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.legal-toc ol { margin: 0; columns: 2; column-gap: 28px; font-size: .88rem; }
.legal-toc li { margin-bottom: 5px; break-inside: avoid; }

.legal-draft {
  border-left: 4px solid var(--ember-deep); background: var(--progress-bg);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-size: .9rem;
}
.legal-todo { display: block; margin-top: 8px; color: var(--muted); font-size: .88rem; font-style: italic; }
.legal-foot-note { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }

/* Terms acceptance gate (/terms/accept) */
.consent-card { max-width: 560px; }
.consent-points { border-left: 4px solid var(--ember); background: #faf7f5; border-radius: var(--radius); padding: 12px 16px; margin: 14px 0; }
.consent-points h3 {
  margin: 0 0 8px; font-family: var(--font-label); font-size: .95rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.consent-points li { color: var(--ink-soft); font-size: .9rem; margin-bottom: 8px; }
.consent-points .muted { font-size: .82rem; margin: 6px 0 0; }
.consent-docs { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 16px; font-size: .9rem; font-weight: 600; }
.consent-docs a { text-decoration: underline; }
.consent-check { align-items: flex-start; font-size: .9rem; line-height: 1.45; }
.consent-check input { margin-top: 3px; flex: none; }
.consent-check a { text-decoration: underline; }

/* Footer + signup consent links */
.footer-links { margin-bottom: 5px; }
.footer-links a { color: var(--ink-soft); font-weight: 600; }
.mkt-foot-legal a { font-weight: 500; font-size: .88rem; }
.form-consent { color: var(--muted); font-size: .82rem; margin: 2px 0 4px; }
.form-consent a { text-decoration: underline; }

/* ---------- Responsive ---------- */
/* Grid and flex children default to min-width:auto, so one wide row — a
   module's button cluster, a long title — can push a whole column past the
   viewport and make the phone zoom the page out. Let columns shrink, and let
   the rows that hold several controls wrap instead. */
.editor-main, .editor-side, .profile-card, .profile-stats, .admin-cols > *, .contact-cols > *, .module-main { min-width: 0; }
.page-title-row, .field-row, .chapter-head, .viewer-head, .viewer-controls, .profile-identity, .course-card-meta, .course-header-stats { flex-wrap: wrap; }
.field-row > .field { flex: 1 1 180px; }
.grade-form .input { max-width: 100%; }
.viewer-footer { flex-wrap: wrap; }

@media (max-width: 860px) {
  .legal-toc ol { columns: 1; }
  .editor-cols, .profile-cols, .admin-cols { grid-template-columns: 1fr; }
  .course-header { flex-direction: column; align-items: stretch; }
  .course-header-stats { min-width: 0; }
  .container { padding: 20px 16px 32px; }
  /* Nav: brand and account share the first row; the links wrap beneath. */
  .topnav-inner { flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; }
  .topnav .brand { order: 1; }
  .topnav .nav-user { order: 2; margin-left: auto; }
  .topnav .navlinks { order: 3; flex: 1 1 100%; flex-wrap: wrap; gap: 2px 14px; }
  .topnav .navlinks > a, .topnav .navlinks summary { padding: 4px 2px; font-size: .9rem; }
  .nav-user-name { display: none; }
  .navlinks .nav-menu-list { left: 0; }
  .brand-tag { display: none; }
  .brand-name { font-size: .95rem; }
  .mkt-nav-in { flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; }
  .mkt-nav-links { gap: 12px; flex-wrap: wrap; }
  /* Module rows: the title first, the button clusters wrap beneath it. */
  .module-row { flex-wrap: wrap; }
  .module-main { flex: 1 1 200px; }
  .module-author-actions, .module-actions { flex-wrap: wrap; }
  .submission-grade { align-items: flex-start; }
  .submission-feedback { text-align: left; }
}
/* Phones: the emblem alone carries the brand; the wordmark would crowd the links. */
@media (max-width: 600px) {
  .topnav .brand-text, .mkt-nav .brand-text { display: none; }
  .mkt-hero { padding: 56px 0 52px; }
  .mkt-band { padding: 44px 0; }
  .mkt-final { padding: 52px 0; }
  .login-wrap { padding: 28px 14px; }
}

/* ---------- Nav badge (unread messages) ---------- */
.nav-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--brand-red); color: #fff; font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }

/* ---------- Messaging ---------- */
.thread-card { padding: 0; overflow: hidden; }
.thread-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #fafafa; flex-wrap: wrap; }
.thread-head .muted { font-size: .88rem; }
.thread { display: flex; flex-direction: column; gap: 10px; padding: 18px; max-height: 60vh; overflow: auto; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 14px; background: #f0f0f0; align-self: flex-start; }
.msg-mine { background: #fbe9e9; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg:not(.msg-mine) { border-bottom-left-radius: 4px; }
.msg-meta { display: flex; gap: 8px; font-size: .76rem; color: var(--muted); margin-bottom: 3px; }
.msg-meta strong { color: var(--ink-soft); }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-unread .msg-meta::after { content: 'new'; color: var(--brand-red); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
.compose { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); }
.compose textarea { width: 100%; min-height: 84px; resize: vertical; }
.compose-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.inbox-row td { vertical-align: middle; }
.inbox-unread td { font-weight: 600; }
.inbox-excerpt { color: var(--muted); font-weight: 400; max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-empty { padding: 30px 18px; text-align: center; color: var(--muted); }

/* ---------- Calendar ---------- */
.cal-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-toolbar h1 { margin: 0; }
.cal-toolbar .cal-month { font-family: var(--font-display); font-size: 1.15rem; min-width: 190px; text-align: center; }
.cal-toolbar .spacer { flex: 1; }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { font-family: var(--font-label); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-size: .8rem; padding: 6px 4px; text-align: left; border-bottom: 1px solid var(--line); }
.cal-grid td { vertical-align: top; height: 104px; padding: 4px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.cal-grid td:last-child { border-right: none; }
.cal-grid td.cal-out { background: #f7f7f7; color: var(--muted); }
.cal-day { font-size: .8rem; font-weight: 600; color: var(--ink-soft); display: inline-block; min-width: 22px; padding: 1px 4px; border-radius: 6px; }
.cal-today .cal-day { background: var(--brand-red); color: #fff; }
.cal-items { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.cal-item { display: block; font-size: .76rem; line-height: 1.3; padding: 2px 6px; border-radius: 5px; border-left: 3px solid var(--brand-red); background: #fbe9e9; color: var(--ink); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.cal-item:hover { text-decoration: none; filter: brightness(.97); }
.cal-item-class { border-left-color: #0E7490; background: #e6f4f7; }
.cal-item-exam { border-left-color: var(--warn-text); background: var(--progress-bg); }
.cal-item-other { border-left-color: var(--steel); background: #f0f0f0; }
.cal-item-deadline { border-left-color: var(--muted); background: #fff; border: 1px dashed var(--line); border-left: 3px solid var(--muted); }
.cal-item-deadline.cal-overdue { border-left-color: var(--brand-red); color: var(--brand-red); }
.cal-more { font-size: .72rem; color: var(--muted); padding-left: 6px; }
.agenda { display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px; align-items: start; }
.agenda-date { font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.agenda-date small { display: block; font-weight: 400; color: var(--muted); }
.agenda-item { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--line); }
.agenda-item:last-child { border-bottom: none; }
.agenda-item .agenda-time { color: var(--muted); font-size: .86rem; min-width: 130px; }
.agenda-item .agenda-title { font-weight: 600; }
.agenda-item .agenda-where { color: var(--muted); font-size: .88rem; }
.kind-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-red); margin-right: 6px; vertical-align: 1px; }
.kind-dot.kind-class { background: #0E7490; }
.kind-dot.kind-exam { background: var(--fire-gold); }
.kind-dot.kind-other { background: var(--steel); }
.kind-dot.kind-deadline { background: transparent; border: 2px solid var(--muted); width: 7px; height: 7px; }
.event-detail dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; margin: 0; }
.event-detail dt { color: var(--muted); font-size: .86rem; }
.event-detail dd { margin: 0; }
.audience-pick { display: none; }
.audience-pick.on { display: block; }
.trainee-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; max-height: 180px; overflow: auto; padding: 6px 0; }
.trainee-checks label { font-size: .9rem; }
.form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.form-cols .span2 { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .cal-grid td { height: auto; min-height: 56px; }
  .cal-item { white-space: normal; }
  .agenda { grid-template-columns: 1fr; gap: 2px; }
  .agenda-date { margin-top: 10px; }
  .form-cols { grid-template-columns: 1fr; }
}

/* ---------- Documents ---------- */
.doc-title { font-weight: 600; }
.doc-versions { margin: 6px 0 0; padding-left: 16px; font-size: .86rem; color: var(--muted); }
.doc-versions li { margin: 2px 0; }
.doc-current { color: var(--ink); }
.doc-upload { display: flex; flex-direction: column; gap: 10px; }
.doc-upload input[type=file] { font-size: .9rem; }
.badge-cat { background: #eee; color: var(--ink-soft); }
details.version-form summary { cursor: pointer; color: var(--ember); font-weight: 600; font-size: .88rem; }
details.version-form .stack-form { margin-top: 8px; }

/* ---------- Instructor home ---------- */
.home-tiles { margin-bottom: 18px; }
.home-tiles .stat-tile { text-decoration: none; color: inherit; }
.home-tiles .stat-tile:hover { box-shadow: 0 2px 8px rgba(17, 17, 17, .12); text-decoration: none; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.home-grid > .card { min-width: 0; }
.home-thread { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); color: inherit; }
.home-thread:last-child { border-bottom: none; }
.home-thread:hover { text-decoration: none; background: #fafafa; }
.home-thread-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.home-thread-head { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.home-thread-head .muted { margin-left: auto; font-size: .8rem; white-space: nowrap; }
.simple-list { list-style: none; margin: 0; padding: 0; }
.simple-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: center; }
.simple-list li:last-child { border-bottom: none; }
.simple-list li > a:first-child { font-weight: 600; }
.simple-meta { grid-column: 1; color: var(--muted); font-size: .86rem; }
.simple-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; white-space: nowrap; }
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .simple-list li { grid-template-columns: 1fr; } .simple-actions { grid-column: 1; grid-row: auto; margin-top: 4px; } }
.home-tiles .stat-tile { display: block; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.home-tiles .stat-value, .home-tiles .stat-label { display: block; }

/* ---------- Instructor course list ---------- */
.course-list td { vertical-align: middle; }
.course-list-title { font-weight: 600; font-size: .95rem; }
.course-list th:nth-child(2), .course-list th:nth-child(3), .course-list th:nth-child(4) { text-align: right; }
.add-toolbar { margin: -4px 0 14px; }

/* ---------- Roster filters ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 12px; }
.filter-bar input[type=search] { flex: 1 1 240px; min-width: 200px; }
.filter-bar select { flex: 0 1 auto; max-width: 260px; }
.sort-link { color: inherit; }
.sort-link:hover { color: var(--ember); text-decoration: none; }

/* ---------- Course editor: drag and drop ---------- */
.drag-handle { cursor: grab; color: var(--steel); user-select: none; font-size: .95rem; padding: 0 4px; flex: none; display: inline-flex; align-items: center; }
.drag-handle:hover { color: var(--ink-soft); }
.chapter-handle { margin-right: 6px; font-size: .9rem; vertical-align: 1px; }
.module-row.dragging, .chapter-block.dragging { opacity: .45; }
.chapter-block.dragging { outline: 2px dashed var(--brand-red); border-radius: 10px; }
.module-list:empty { min-height: 44px; border: 2px dashed var(--line); border-radius: 10px; }
.reorder-status { margin: -8px 0 14px; }

/* ---------- Quiz: one question per page ---------- */
.q-progress { margin: 6px 0 14px; }
.q-progress-text { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.q-card .quiz-q { border: none; margin: 0; padding: 4px 0 10px; }
.q-card .quiz-q legend { font-size: 1.1rem; line-height: 1.4; padding-bottom: 12px; }
.q-card .quiz-opt { border: 1px solid var(--line); margin-bottom: 8px; padding: 10px 12px; }
.q-card .quiz-opt:has(input:checked) { border-color: var(--brand-red); background: #fbe9e9; }
.q-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.q-nav-mid { flex: 1; text-align: center; }
.q-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.q-pill { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.q-pill:hover { border-color: var(--ink-soft); }
.q-pill-done { background: var(--pass-bg); border-color: #b7dfc6; color: var(--pass); }
.q-pill-current { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.q-pill-locked { display: inline-flex; align-items: center; justify-content: center; color: var(--steel); border-style: dashed; cursor: default; }
.q-nav-mid.muted { font-size: .8rem; }
.review-list { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.review-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; counter-increment: q; }
.review-item:last-child { border-bottom: none; }
.review-item::before { content: counter(q) "."; color: var(--muted); font-weight: 600; grid-row: 1 / span 2; }
.review-q { font-weight: 600; grid-column: 2; }
.review-a { grid-column: 2; color: var(--ink-soft); }
.review-blank .review-a { color: var(--fail); font-weight: 600; }
.review-item .btn { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.q-submit { margin-top: 16px; }
@media (max-width: 600px) { .q-nav-mid { order: 3; flex-basis: 100%; } }

/* ---------- Course editor: enrollment dialog ---------- */
.count-pill { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; background: rgba(255, 255, 255, .25); font-size: .78rem; line-height: 20px; text-align: center; }
.enroll-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.enroll-tools input[type=search] { flex: 1 1 220px; }
.enroll-list { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.enroll-row { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.enroll-row:last-child { border-bottom: none; }
.enroll-name small { display: block; }

/* ---------- Knowledge checks: a question pinned to a slide ---------- */
.check-panel { border-top: 3px solid var(--gold); background: #fffaf0; padding: 16px 18px 6px; }
.check-panel-nudge { animation: check-nudge .5s ease; }
@keyframes check-nudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.check { padding: 0 0 14px; }
.check + .check { border-top: 1px solid #eadfc0; padding-top: 14px; }
.check-kicker { font-family: var(--font-label); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ember-deep); }
.check-text { font-weight: 700; font-size: 1.05rem; margin: 4px 0 10px; line-height: 1.4; }
.check-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.check-opt {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; color: var(--ink); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.check-opt:hover:not([disabled]) { border-color: var(--ember); background: #fff5f5; }
.check-opt[disabled] { cursor: default; opacity: .7; }
.check-opt.is-correct { border-color: var(--pass); background: var(--pass-bg); opacity: 1; }
.check-opt.is-wrong { border-color: var(--fail); background: var(--fail-bg); opacity: 1; }
.check-letter {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--charcoal); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem;
}
.check-opt.is-correct .check-letter { background: var(--pass); }
.check-opt.is-wrong .check-letter { background: var(--fail); }
.check-feedback { margin-top: 10px; font-size: .92rem; line-height: 1.45; }
.check-correct .check-feedback strong { color: var(--pass); }
.check-wrong .check-feedback strong { color: var(--fail); }
.check-busy { opacity: .6; pointer-events: none; }
.unit-dot.has-check { border-radius: 3px; }
.viewer-next.blocked { background: rgba(179, 0, 0, .5); }

/* The instructor's checks editor: viewer beside the per-slide panel. */
.checks-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.checks-side { padding: 16px; }
.checks-side-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.checks-side-head h3 { margin: 0; }
.cap-label { text-transform: capitalize; }
.ck-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.ck-item-text { font-weight: 700; margin-bottom: 6px; }
.ck-item-opts { margin: 0 0 6px 20px; padding: 0; font-size: .9rem; }
.ck-item-opts li { margin: 2px 0; }
.ck-item-opts li.is-correct { color: var(--pass); font-weight: 600; }
.ck-key { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.ck-item-expl { font-size: .84rem; margin: 0 0 8px; }
.ck-item-actions { display: flex; gap: 8px; align-items: center; }
.ck-item-actions form { margin: 0; }
.ck-type-row { display: flex; gap: 16px; flex-wrap: wrap; }
.ck-type-row label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.checks-callout { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ck-report-title { font-family: var(--font-label); font-weight: 400; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 8px; }
@media (max-width: 900px) { .checks-cols { grid-template-columns: 1fr; } }

/* Auditor seat: a standing reminder that this view changes nothing, and write
   controls left visible but inert so their VALUES stay readable — what a
   course is set to is what the auditor came to look at. */
.auditor-strip {
  background: var(--progress-bg); color: var(--warn-text);
  border-bottom: 1px solid #ecd27a;
  padding: 8px 20px; font-size: .84rem; text-align: center;
}
.is-readonly { opacity: .62; }
.is-readonly button, .is-readonly input, .is-readonly select, .is-readonly textarea { cursor: not-allowed; }

/* ---------- Formatting bar on course-page text (public/js/md-toolbar.js) ---------- */
.md-editor { display: flex; flex-direction: column; border-radius: 8px; }
.md-editor:focus-within { outline: 2px solid rgba(179, 0, 0, .25); }
.md-editor > .input { border-top-left-radius: 0; border-top-right-radius: 0; }
.md-editor > .input:focus { outline: none; }
.md-editor:focus-within .md-toolbar { border-color: var(--ember); }
.md-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 4px; background: #f7f7f7;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0;
}
.md-btn {
  min-height: 30px; padding: 4px 9px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--ink-soft); font: inherit; font-size: .8rem; font-weight: 600;
  line-height: 1; cursor: pointer;
}
.md-btn:hover { background: #e9e9e9; }
.md-btn:focus-visible { outline: 2px solid rgba(179, 0, 0, .35); outline-offset: 1px; }
.md-btn[disabled] { opacity: .4; cursor: not-allowed; }
.md-btn b, .md-btn i { font-size: .95rem; }
.md-glyph { font-size: 1.25em; line-height: 0; vertical-align: -.08em; }
.md-sep { width: 1px; align-self: stretch; margin: 4px; background: var(--line); }

/* ---------- Live page preview (md-toolbar.js livePreview) ----------
   Stacked by default; side by side once the field is wide enough (the page
   editor, not the Add page dialog). In that layout the frame is absolutely
   placed, so the row takes the text box's height and the preview scrolls. */
.md-live { container: mdlive / inline-size; }
.md-live-grid { display: flex; flex-direction: column; gap: 10px; }
.md-preview-frame {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.md-preview-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px;
  padding: 8px 12px; background: #f7f7f7; border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0; font-size: .8rem; color: var(--ink-soft);
}
.md-preview-status { flex-basis: 100%; color: var(--warn-text); }
.md-preview-status:empty { display: none; }
.md-preview { padding: 12px 16px; min-height: 0; max-height: 300px; overflow: auto; }
.md-preview:empty::before { content: 'Start typing — the formatted page appears here.'; color: var(--muted); font-size: .9rem; }
/* The trainee page's look, not the container's: a dialog restyles its h3s. */
.md-preview h3 {
  font-family: inherit; font-weight: 700; font-size: 1rem; letter-spacing: normal;
  text-transform: none; color: inherit; margin: 0 0 .4em;
}
@container mdlive (min-width: 720px) {
  .md-live-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .md-preview-pane { position: relative; min-height: 220px; }
  .md-preview-frame { position: absolute; inset: 0; }
  .md-preview { flex: 1; max-height: none; }
}

/* ---------- Message attachments (routes/messages.js) ---------- */
.msg-files { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.msg-file {
  display: flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 6px 10px; border: 1px solid rgba(17, 17, 17, .12); border-radius: 8px;
  background: rgba(255, 255, 255, .75); color: var(--ink); font-size: .86rem;
}
.msg-file:hover { background: #fff; text-decoration: none; border-color: var(--ember); }
.msg-file-kind {
  flex: none; min-width: 38px; padding: 2px 5px; border-radius: 4px; text-align: center;
  background: var(--charcoal); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .04em;
}
.msg-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.msg-file-size { flex: none; margin-left: auto; color: var(--muted); font-size: .76rem; }
.compose-attach { display: flex; flex-direction: column; gap: 4px; }
.compose-file-input { font: inherit; font-size: .86rem; max-width: 100%; }
.compose-files-problem { color: var(--fail); font-weight: 600; }

/* Calendar items for instructors only (audience type 'staff'): trainees never get them. */
.staff-only { color: var(--muted); margin-right: 3px; }
.staff-only .icon { width: .95em; height: .95em; vertical-align: -.12em; }

/* ---------- Course surveys (routes/surveys.js) ---------- */
.survey-card { padding: 22px 24px; }
.survey-course { margin: 0 0 4px; font-family: var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ember); font-size: .95rem; }
.survey-intro { white-space: pre-wrap; margin: 0 0 8px; }
.survey-note { font-size: .86rem; margin: 0 0 14px; }
.survey-form { gap: 18px; }
.survey-q { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.survey-q legend { font-weight: 600; padding: 0; margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; }
.survey-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--charcoal); color: #fff;
  font-size: .78rem; font-weight: 700; margin-right: 6px;
}
.scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.scale-opt { position: relative; cursor: pointer; }
.scale-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scale-opt span {
  display: flex; align-items: center; justify-content: center; min-height: 38px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 700; font-variant-numeric: tabular-nums;
}
.scale-opt:hover span { border-color: var(--ember); }
.scale-opt input:focus-visible + span { outline: 2px solid rgba(179, 0, 0, .35); outline-offset: 2px; }
.scale-opt input:checked + span { background: var(--ember); border-color: var(--ember); color: #fff; }
.scale-ends { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; }
.survey-comment { margin-top: 4px; }

.survey-q-edit { padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.survey-q-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.survey-q-head .js-type { max-width: 180px; }
.survey-q-moves { margin-left: auto; display: flex; gap: 4px; }
.survey-q-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: end; }
.survey-q-opts .check-row { grid-column: 1 / -1; }
@media (max-width: 560px) { .survey-q-opts { grid-template-columns: 1fr; } }

.survey-people td { vertical-align: middle; }
.survey-summary { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.survey-big { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.survey-bar { height: 8px; border-radius: 4px; background: #ececec; overflow: hidden; }
.survey-bar span { display: block; height: 100%; background: var(--pass); }
.survey-avg { margin: 0 0 10px; }
.survey-avg strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.spread { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; align-items: end; max-width: 460px; }
.spread-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.spread-n { font-size: .75rem; color: var(--muted); min-height: 1em; font-variant-numeric: tabular-nums; }
.spread-bar { width: 100%; min-height: 2px; background: var(--ember); border-radius: 3px 3px 0 0; }
.spread-k { font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.survey-comments { margin: 12px 0 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; }
.survey-comment-text { white-space: pre-wrap; }
.survey-recipients { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.survey-recipients li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.survey-recipients li > span:first-child { flex: 1 1 8em; }
/* On a phone, two rows of five: ten boxes on one line are too narrow to tap. */
@media (max-width: 420px) { .scale { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .scale-opt span { min-height: 44px; } }

/* ---------- Slide narration: the lesson viewer's player ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.narration-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 10px 16px; border-top: 1px solid var(--line); }
.narr-opt { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.narr-opt select { font: inherit; padding: 2px 4px; }
.narr-voice { font-size: .8rem; }
.narr-draft { margin-left: auto; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--warn-text); background: var(--progress-bg); border: 1px solid #f0d58a; border-radius: 999px; padding: 3px 10px; }
.narration-text { white-space: pre-wrap; padding: 14px 18px; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.55; background: #fafafa; }

/* ---------- Slide narration: the instructor's editor ---------- */
.np-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; padding: 12px 16px; margin-bottom: 16px; }
.np-strip-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.np-strip-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.np-strip-actions form { margin: 0; }
.np-pub { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; background: var(--progress-bg); color: var(--warn-text); }
.np-pub.is-on { background: var(--pass-bg); color: var(--pass); }
.np-counts { font-size: .88rem; color: var(--ink-soft); }
.np-cols { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .np-cols { grid-template-columns: 1fr; } }
.np-panel { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.np-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.np-panel-head h2 { margin: 0; font-size: 1.1rem; }
.np-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.np-chip { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.np-chip-ok { background: var(--pass-bg); color: var(--pass); }
.np-chip-warn { background: var(--progress-bg); color: var(--warn-text); border-color: #f0d58a; }
.np-chip-busy { background: #eef2ff; color: #3730a3; }
.np-chip-muted { background: #f1f1f1; color: var(--muted); }
.np-state { margin: 0; }
.np-notes { margin: 0; padding: 10px 14px 10px 30px; background: #fffaf0; border: 1px solid #f0d58a; border-radius: 8px; font-size: .86rem; }
.np-notes li { margin: 2px 0; }
.np-panel .field { margin: 0; }
.np-panel textarea { width: 100%; resize: vertical; font: inherit; line-height: 1.5; }
.np-script { min-height: 11em; }
.np-help { display: block; font-size: .8rem; margin-top: 4px; }
.np-text-actions { align-items: center; margin: 0; }
.np-saved { font-size: .82rem; }
.np-saved.is-error { color: var(--fail); font-weight: 600; }
.np-audio { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.np-audio legend { padding: 0 6px; }
.np-source-row { display: flex; gap: 16px; flex-wrap: wrap; }
.np-source-row label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: .92rem; }
.np-source-panel { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.np-source-panel audio, .np-take audio { width: 100%; }
.np-audio-line { font-size: .82rem; color: var(--muted); }
.np-audio-line.is-warn { color: var(--warn-text); font-weight: 600; }
.np-recorder { display: flex; flex-direction: column; gap: 8px; width: 100%; align-items: flex-start; }
.np-rec-timer { font-size: .85rem; color: var(--ember); font-weight: 600; min-height: 1.2em; }
.np-take { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; }
.np-upload { font-size: .8rem; display: flex; flex-direction: column; gap: 4px; }
.np-none-note { margin: 0; font-size: .86rem; }
.np-meta { font-size: .78rem; }
.np-table tbody tr { cursor: pointer; }
.np-table tbody tr:hover { background: #fafafa; }
.np-table tbody tr.is-current { background: #fff6e0; }
.np-table td { vertical-align: top; }
.np-cell-alt { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-dot.np-dot-attention { border-color: var(--gold); background: #fff3c4; }
.unit-dot.np-dot-done { border-color: var(--pass); background: var(--pass-bg); }
.unit-dot.current { border-color: var(--ember); background: var(--ember); }
.np-course-table td, .np-course-table th { white-space: nowrap; }
.np-course-table td:first-child { white-space: normal; }
.np-callout-meta { font-size: .85rem; }
.np-budget { font-size: .8rem; color: var(--muted); }
.np-budget.is-low { color: var(--warn-text); }
.np-budget.is-out { color: var(--warn-text); font-weight: 600; }
.np-pub.is-muted { background: #f1f1f1; color: var(--muted); }

/* ---------- Classes (routes/classes.js) ---------- */
.class-meta strong { color: var(--ink); }
.class-line { margin: 6px 0 0; font-size: .9rem; }
.class-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.class-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.class-items li { display: flex; align-items: center; gap: 8px; }
.class-events { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.class-addable { max-height: 320px; overflow-y: auto; border: 1px solid rgba(17, 17, 17, .08); border-radius: 8px; padding: 4px 8px; }
.class-roster td { vertical-align: top; }
.row-actions summary { list-style: none; cursor: pointer; }
.row-actions summary::-webkit-details-marker { display: none; }
.row-actions[open] summary { margin-bottom: 6px; }
.row-actions-body { min-width: 220px; }
.row-actions-body .input-sm { width: 100%; max-width: none; }
.text-fail { color: var(--fail); }
.chip-class { font-weight: 400; opacity: .8; }
.invite-course { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.invite-course .input-sm { max-width: 260px; }
.class-item-card { margin-top: 16px; }
.report-cell.cell-na { text-align: center; }
/* A class placeholder in a staff preview of a course page ({{class dates}} …). */
.page-var { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--progress-bg); color: var(--warn-text); font-size: .85em; font-weight: 600; }
.page-var::before { content: '{{'; opacity: .6; }
.page-var::after { content: '}}'; opacity: .6; }

/* ---------- Proctored finals (views/partials/proctor-step.ejs) ---------- */
.proctor-step { border: 1px solid var(--line); border-left: 4px solid var(--ember); border-radius: 8px; padding: 14px 16px; margin-top: 14px; }
.proctor-step-title { margin: 0 0 8px; }
.proctor-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.proctor-form .field { flex: 1 1 220px; max-width: 320px; }
.proctor-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.3rem; letter-spacing: .18em; text-transform: uppercase; }
.proctor-code-input::placeholder { letter-spacing: .12em; }
.proctor-help { font-size: .82rem; margin: 6px 0 0; }
.proctor-resend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: .88rem; }