/* ═══════════════════════════════════════════════════════════════
   ARIA NOTEBOOK — APP EXTRA CSS
   Load this LAST in index.html, right before </head>
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar: prevent horizontal overflow from admin panel ── */
.sidebar {
  overflow-x: hidden !important;
}
.quiz-section { text-align: left; }
#nav-container {
  overflow-x: hidden;
  width: 100%;
}

/* ── Subtopic number badges ── */
.nav-item {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.nav-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  border-radius: 4px;
  padding: 0.1rem 0.28rem;
  margin-right: 0.4rem;
  margin-top: 0.1rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  min-width: 1.9rem;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}

/* ── Per-unit color system ─────────────────────────────────────────
   Each unit sets --unit-c (in app-engine.js). Section headers and the
   number badges wear that color; labels stay white so the text a
   student reads stays high-contrast. The header is the only colored
   TEXT in its zone, so it clearly leads the group. */
.sidebar .nav-item:not(.nav-unit-exam) .nav-num,
.sidebar .nav-item:not(.nav-unit-exam) .nav-num * {
  color: var(--unit-c, var(--c-pink)) !important;
  background: color-mix(in srgb, var(--unit-c, var(--c-pink)) 9%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--unit-c, var(--c-pink)) 26%, transparent) !important;
}

.nav-chapter-title {
  color: var(--unit-c, var(--c-pink)) !important;
  font-weight: 400 !important;
}
.nav-chapter-title:hover {
  background: color-mix(in srgb, var(--unit-c, var(--c-pink)) 9%, transparent) !important;
}

/* Numberless rows (unit 3's clusters) keep the badge's width for
   alignment but drop the empty colored box. */
.sidebar .nav-item:not(.nav-unit-exam) .nav-num:empty {
  background: transparent !important;
  border-color: transparent !important;
}

/* Labels: always white, never take the unit color. */
.sidebar .nav-item .nav-item-text { color: #fff; }

/* The little "q" quiz marker used to take the unit colour, which put a
   bright dot on most rows in the sidebar and pulled the eye away from
   whatever the student had actually selected. It is a marker, not a
   destination, so it now sits at the same mid-grey as the subtitles. */
.sidebar .nav-item:not(.nav-unit-exam) .nav-exam-badge {
  color: rgba(255,255,255,.55) !important;
  opacity: 1;
}

/* The Unit Exam row while its exam is not built yet: still yellow, still
   plainly there, but reading as a signpost rather than a button. */
.sidebar .nav-item.nav-exam-pending { cursor: default; }
.sidebar .nav-item.nav-exam-pending .nav-item-text { opacity: .62; }
.sidebar .nav-item.nav-exam-pending:hover { background: transparent !important; }

/* Active / hover row: tinted in the unit color with a color left-edge
   bar. Label stays white — color shows up where you ARE, not everywhere. */
.sidebar .nav-item:hover {
  background: color-mix(in srgb, var(--unit-c, var(--c-pink)) 8%, transparent) !important;
}
.sidebar .nav-item.active {
  background: color-mix(in srgb, var(--unit-c, var(--c-pink)) 15%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--unit-c, var(--c-pink));
}

.nav-item-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Unit Exam row keeps its own gold "EXAM" chip. */
.sidebar .nav-unit-exam .nav-num {
  color: var(--c-gold) !important;
  background: rgba(var(--c-gold-rgb), 0.1) !important;
  border: 1px solid rgba(var(--c-gold-rgb), 0.3) !important;
}

.nav-unit-exam {
  color: var(--c-gold) !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding-top: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOOT OF THE MENU (owner, 30 Aug 2026)
   "Add the Exam page link at bottom of the menu bar so that it looks
   like an actual menu item — same as admin panel. Its just floating
   right now." The Exam row was a bare .nav-item on the nav container:
   subtopic indentation, but under no unit, so it read as a stray word.
   It now gets its own ruled block above Admin, the same pill geometry,
   and the gold every other exam row in the nav already wears — so it
   still reads as the student's door and not a second teacher control.
   ═══════════════════════════════════════════════════════════════ */

.nav-foot-wrap {
  padding: 0.75rem 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

/* Admin sits directly under it, so it must not draw a second rule. */
.nav-foot-wrap + .admin-section-wrap {
  border-top: 0;
  margin-top: 0;
  padding-top: 0.5rem;
}

.sidebar .nav-foot-wrap button.nav-foot-btn,
button.nav-foot-btn {
  display: block !important;
  width: 100% !important;
  background: rgba(var(--c-gold-rgb), 0.06) !important;
  border: 1px solid rgba(var(--c-gold-rgb), 0.28) !important;
  border-radius: 7px !important;
  color: rgba(var(--c-gold-rgb), 0.85) !important;
  padding: 0.4rem 0.75rem !important;
  cursor: pointer !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  transform: none !important;
}

.sidebar .nav-foot-wrap button.nav-foot-btn:hover,
button.nav-foot-btn:hover {
  background: rgba(var(--c-gold-rgb), 0.14) !important;
  color: var(--c-gold) !important;
  border-color: rgba(var(--c-gold-rgb), 0.5) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN SECTION
   High specificity on button rules to override style.css defaults
   ═══════════════════════════════════════════════════════════════ */

.admin-section-wrap {
  padding: 0.75rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Lock button — needs !important to override style.css button base */
.sidebar .admin-section-wrap button.admin-lock-btn,
button.admin-lock-btn {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 7px !important;
  color: rgba(255, 255, 255, 0.25) !important;
  padding: 0.4rem 0.75rem !important;
  cursor: pointer !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  transform: none !important;
}

.sidebar .admin-section-wrap button.admin-lock-btn:hover,
button.admin-lock-btn:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Admin panel container */
.admin-panel {
  font-size: 0.8rem;
  width: 100%;
  overflow: hidden;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.15rem;
  color: var(--c-cyan);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.8px;
}

.admin-subtitle {
  font-size: 0.63rem;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 0.55rem;
}

.admin-selectors {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

/* Small action buttons in admin (All / None / Lock) */
.sidebar .admin-section-wrap button.admin-action-btn,
button.admin-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  padding: 0.18rem 0.5rem !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: 'Outfit', sans-serif !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.15s !important;
  width: auto !important;
}

.sidebar .admin-section-wrap button.admin-action-btn:hover,
button.admin-action-btn:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Topics scroll area */
.admin-topics {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 0.6rem;
  width: 100%;
}

.admin-topics::-webkit-scrollbar { width: 3px; }
.admin-topics::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}

.admin-unit-label {
  font-size: 0.58rem;
  font-weight: 800;
  color: rgba(var(--c-pink-rgb), 0.65);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0.55rem 0 0.2rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid rgba(var(--c-pink-rgb), 0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-topic-check {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.22rem 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.15s;
  line-height: 1.35;
  width: 100%;
  overflow: hidden;
}

.admin-topic-check:hover { color: #fff; }
.admin-no-q { opacity: 0.28; cursor: default; }

.admin-topic-check input[type="checkbox"] {
  accent-color: var(--c-pink);
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  cursor: pointer;
}

.admin-num {
  font-size: 0.56rem;
  color: rgba(var(--c-pink-rgb), 0.45);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  min-width: 18px;
  line-height: 1.35;
}

.admin-topic-name {
  flex: 1;
  font-size: 0.7rem;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-q-count {
  font-size: 0.56rem;
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  margin-left: 0.2rem;
}

/* Label + count inputs */
.admin-label-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
}

.admin-label-row input[type="text"] {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: #fff;
  padding: 0.22rem 0.4rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  outline: none;
}

.admin-label-row input[type="text"]:focus {
  border-color: rgba(var(--c-cyan-rgb), 0.3);
}

.admin-controls {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.5rem;
}

.admin-count-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
}

.admin-count-row input[type="number"] {
  width: 52px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: #fff;
  padding: 0.22rem 0.35rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-align: center;
  outline: none;
}

.admin-count-row input[type="number"]:focus {
  border-color: rgba(var(--c-cyan-rgb), 0.3);
}

.admin-btn-row {
  display: flex;
  gap: 0.4rem;
}

/* Preview + Make Live buttons */
.sidebar .admin-section-wrap button.admin-preview-btn,
button.admin-preview-btn {
  flex: 1 !important;
  font-size: 0.7rem !important;
  padding: 0.4rem 0.3rem !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.7) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  text-align: center !important;
  box-shadow: none !important;
  transform: none !important;
}

.sidebar .admin-section-wrap button.admin-preview-btn:hover,
button.admin-preview-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  transform: none !important;
  box-shadow: none !important;
}

.sidebar .admin-section-wrap button.admin-live-btn,
button.admin-live-btn {
  flex: 1 !important;
  font-size: 0.7rem !important;
  padding: 0.4rem 0.3rem !important;
  background: linear-gradient(135deg, var(--c-pink), var(--c-pink)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: none !important;
  transform: none !important;
}

.sidebar .admin-section-wrap button.admin-live-btn:hover,
button.admin-live-btn:hover {
  filter: brightness(1.1) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   STUDENT NAME MODAL
   ═══════════════════════════════════════════════════════════════ */

.name-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.name-modal {
  background: rgba(14, 14, 24, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 2rem 2rem 1.75rem;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65);
  animation: nameModalIn 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes nameModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.name-modal h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.4rem;
}

.name-modal p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

#name-modal-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  margin-bottom: 1rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

#name-modal-input:focus {
  border-color: rgba(var(--c-pink-rgb), 0.5);
  background: rgba(255, 255, 255, 0.08);
}

#name-modal-input::placeholder { color: rgba(255, 255, 255, 0.25); }

.name-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* Name modal buttons */
.name-modal button.name-skip-btn {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.5) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SITE LOGIN (BPS ID)
   ═══════════════════════════════════════════════════════════════ */

/* .login-nav-item retired 30 Aug 2026 — the row it styled is gone from
   the foot of the menu; the person icon top right does that job now. */

#site-login-id {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  text-align: center;
  letter-spacing: 0.35em;
  margin-bottom: 0.8rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

#site-login-id:focus {
  border-color: rgba(var(--c-pink-rgb), 0.5);
  background: rgba(255, 255, 255, 0.08);
}

#site-login-id::placeholder { color: rgba(255, 255, 255, 0.25); letter-spacing: normal; }

.name-modal button.site-login-guest-btn {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.5) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   QUIZ REPORT
   ═══════════════════════════════════════════════════════════════ */

.report-header-box {
  text-align: center;
  padding: 1.5rem 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  margin-bottom: 1rem;
}

.report-student-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 0.2rem;
}

.report-quiz-label {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.15rem;
}

.report-date {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.25);
  margin-bottom: 1rem;
}

.report-name-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
}

.report-edit-name-btn {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,0.5) !important;
  padding: 0.2rem 0.6rem !important;
  font-size: 0.75rem !important;
  cursor: pointer !important;
  font-family: 'Outfit', sans-serif !important;
  box-shadow: none !important;
  transform: none !important;
}

.report-edit-name-btn:hover {
  background: rgba(255,255,255,0.09) !important;
  color: rgba(255,255,255,0.8) !important;
  transform: none !important;
  box-shadow: none !important;
}

.report-review-section { margin-bottom: 1.5rem; }

.report-review-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.75rem;
}

.report-item {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
}

.report-item.report-correct { border-left-color: var(--c-green); }
.report-item.report-wrong   { border-left-color: var(--c-orange); }

.report-q-num {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.3rem;
}

.report-correct .report-q-num { color: var(--c-green); }
.report-wrong   .report-q-num { color: var(--c-orange); }

.report-q-text {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.5rem;
  line-height: 1.45;
}

.report-q-context {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  margin-bottom: 0.4rem;
  font-style: italic;
  line-height: 1.4;
}

.report-answer-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.82rem;
  margin-top: 0.2rem;
  line-height: 1.4;
}

.report-label {
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
  min-width: 80px;
}

.report-answer-val { font-weight: 600; }
.ans-correct { color: var(--c-green); }
.ans-wrong   { color: var(--c-orange); }

.results-back-btn {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

.results-back-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   MAKE LIVE PANEL
   ═══════════════════════════════════════════════════════════════ */

.live-url-panel {
  max-width: 680px;
  margin: 3rem auto;
  text-align: center;
}

.live-url-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.live-url-title { font-size: 1.6rem; font-weight: 700; color: #fff; margin-bottom: 0.3rem; }
.live-url-meta  { font-size: 0.85rem; color: rgba(255,255,255,0.4); margin-bottom: 1.75rem; }

.live-url-box {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(var(--c-cyan-rgb),0.25);
  border-radius: 10px;
  padding: 0.85rem 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--c-cyan);
  word-break: break-all;
  text-align: left;
  line-height: 1.6;
  margin-bottom: 1.1rem;
  user-select: all;
  cursor: text;
}

.live-url-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.live-copy-btn { min-width: 140px; }

.live-preview-btn {
  min-width: 160px;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}

.live-url-instructions {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  text-align: left;
}

.live-url-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
}

.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--c-pink-rgb),0.2);
  border: 1px solid rgba(var(--c-pink-rgb),0.35);
  color: var(--c-pink);
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.live-url-note { font-size: 0.78rem; color: rgba(255,255,255,0.3); line-height: 1.5; text-align: left; }

/* ═══════════════════════════════════════════════════════════════
   EXAM LAUNCH + PREVIEW BANNER
   ═══════════════════════════════════════════════════════════════ */

.exam-launch-screen { max-width: 700px; margin: 0 auto; padding: 2rem 1rem; text-align: center; }
.exam-launch-title  { font-size: 1.75rem; font-weight: 700; color: #fff; text-align: center; margin-bottom: 0.35rem; }
.exam-launch-meta   { font-size: 0.85rem; color: rgba(255,255,255,0.4); text-align: center; margin-bottom: 2rem; }

.exam-preview-banner {
  background: rgba(var(--c-gold-rgb),0.1);
  border: 1px solid rgba(var(--c-gold-rgb),0.3);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  color: var(--c-gold);
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   THE ACCOUNT BUTTON — top right (owner, 22 Aug 2026)

   "restore the person icon top right button for login". A door to a
   place rather than a setting, so it gets its own handle instead of a
   row in the menu. Translucent at rest because it floats over the page
   and must not compete with it; the ring and the icon come up under the
   pointer. Top RIGHT: the menu owns the left edge, the aria bubble owns
   the bottom right.
   ═══════════════════════════════════════════════════════════════ */
#acct-btn{
  position:fixed;top:1rem;right:1.15rem;z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:.12rem;
  width:auto;min-width:2.9rem;padding:.42rem .5rem;
  /* borderless at rest (owner, 23 Aug 2026) — just the icon floating;
     the ring only appears under the pointer */
  border:1px solid transparent;border-radius:14px;
  background:transparent;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:rgba(255,255,255,.5);cursor:pointer;
  font-family:Outfit,system-ui,sans-serif;line-height:1;
  transition:color .16s,background .16s,border-color .16s}
#acct-btn svg{width:1.45rem;height:1.45rem;display:block}
#acct-btn .acct-id{
  font-size:.58rem;font-weight:800;letter-spacing:.09em;
  color:rgba(255,255,255,.42)}
#acct-btn .acct-id:empty{display:none}
#acct-btn:hover,#acct-btn:focus-visible{
  color:var(--c-cyan);border-color:rgba(var(--c-cyan-rgb),.45);
  background:rgba(var(--c-cyan-rgb),.1);outline:none}
#acct-btn:hover .acct-id{color:rgba(255,255,255,.8)}
/* signed in: the ring is lit, so "am I logged in" is answered without
   clicking anything */
#acct-btn.is-in{
  color:var(--c-cyan)}
@media(max-width:700px){
  #acct-btn{top:.6rem;right:.6rem;padding:.36rem .42rem}
  #acct-btn svg{width:1.25rem;height:1.25rem}}

/* ═══════════════════════════════════════════════════════════════
   THE SIGN-IN SHEET (9 Sep 2026)

   The old login was one field, so it borrowed #name-modal-input and
   needed nothing else. This one is a small form - ID, password, and on
   a first visit a name and a grade - so it gets labels, a row, and one
   input rule that every field in it obeys. Scoped to .sgn so nothing
   here can reach the other modals that share .name-modal.
   ═══════════════════════════════════════════════════════════════ */
.name-modal.sgn { text-align: left; }
.name-modal.sgn p { margin-bottom: 1rem; }

.sgn-l {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin: 0 0 0.3rem;
}

.name-modal.sgn input,
.name-modal.sgn select {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 0.85rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.name-modal.sgn input:focus,
.name-modal.sgn select:focus {
  border-color: rgba(var(--c-pink-rgb), 0.55);
  background: rgba(255, 255, 255, 0.08);
}
.name-modal.sgn input::placeholder { color: rgba(255, 255, 255, 0.25); }
/* the option list is drawn by the OS, so it needs a ground of its own
   or it renders white-on-white on some machines */
.name-modal.sgn select option { background: #14141e; color: #fff; }

.sgn-row { display: flex; gap: 0.7rem; }
.sgn-col { flex: 1; min-width: 0; }
.sgn-col.sgn-init { flex: 0 0 4.6rem; }
/* labels must not wrap, or the two fields in a row stop lining up */
.sgn-l { white-space: nowrap; }

.sgn-newnote {
  border-left: 2px solid var(--c-gold, #F7CA3E);
  padding: 0.55rem 0 0.55rem 0.75rem;
  margin: 0.2rem 0 1rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.sgn-err {
  color: #EF722A;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0 0 0.85rem;
}

/* "Not now" is a way out, not a second offer - it must not read as the
   same weight as the button that actually signs you in. */
.name-modal.sgn .sgn-quiet {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.5);
}
.name-modal.sgn .sgn-quiet:hover { color: rgba(255, 255, 255, 0.8); }

/* ═══════════════════════════════════════════════════════════════
   PRESENT MODE — the classroom TV (Robin, 10 Sep 2026)

   "a button that switches any page to full screen without the nav."
   Chrome, so it is on every page and survives navigating between them.

   The A- / A+ pair walks the font-size of <html>, so everything rem-
   based on the site scales together. They are hidden until present
   mode is on: text size is a decision about a projector, and it has no
   business sitting on a student's laptop screen.
   ═══════════════════════════════════════════════════════════════ */
#pres-bar{
  position:fixed;top:1rem;right:4.6rem;z-index:60;
  display:flex;align-items:center;gap:.25rem;
  font-family:Outfit,system-ui,sans-serif;line-height:1}
#pres-btn{
  display:flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;padding:0;
  border:1px solid transparent;border-radius:14px;background:transparent;
  color:rgba(255,255,255,.5);cursor:pointer;
  transition:color .16s,background .16s,border-color .16s}
#pres-btn svg{width:1.32rem;height:1.32rem;display:block}
#pres-btn:hover,#pres-btn:focus-visible{
  color:var(--c-cyan);border-color:rgba(var(--c-cyan-rgb),.45);
  background:rgba(var(--c-cyan-rgb),.1);outline:none}

/* The steppers only exist while presenting. */
#pres-bar .pres-step,#pres-bar #pres-size{display:none}
#pres-bar.is-on .pres-step,#pres-bar.is-on #pres-size{display:block}
#pres-bar .pres-step{
  border:1px solid rgba(255,255,255,.16);border-radius:10px;
  background:transparent;color:rgba(255,255,255,.55);
  font:inherit;font-size:.82rem;font-weight:800;
  padding:.34rem .5rem;cursor:pointer;transition:.16s}
#pres-bar .pres-step:hover:not(:disabled){
  color:var(--c-cyan);border-color:rgba(var(--c-cyan-rgb),.45)}
#pres-bar .pres-step:disabled{opacity:.3;cursor:default}
#pres-bar #pres-size{
  font-size:.6rem;font-weight:800;letter-spacing:.06em;
  color:rgba(255,255,255,.38);min-width:2.4rem;text-align:center;
  font-variant-numeric:tabular-nums}

/* ── what present mode actually does ─────────────────────────────── */
body.present-mode #sidebar,
body.present-mode #hamburger,
body.present-mode #acct-btn{display:none!important}

/* The bar slides into the space the person icon just left — and puts a
   ground under itself. Presenting, it is the only control on screen and
   it has to stay readable over whatever the page or the theme happens
   to put behind it: the 90s theme's yellow construction banner runs
   right under this corner and swallowed the size label whole. */
body.present-mode #pres-bar{
  right:1.15rem;z-index:80;
  padding:.25rem .3rem;border-radius:16px;
  background:rgba(8,10,15,.82);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.present-mode #pres-size{color:rgba(255,255,255,.6)}

/* ── AND THEN IT GETS OUT OF THE WAY (Robin, 10 Sep 2026) ─────────
   "Can you make the controls disappear after a few secs and show on
   hover?" Presenting, the page is the only thing that should be on the
   screen; a floating control in the corner of a projected page is the
   one bit of furniture the room can see and the teacher cannot.

   It fades rather than displays away, and it keeps its pointer events,
   so it is still THERE — reaching for the corner brings it back even
   if the mousemove that should have woken it never fired. Hover is held
   in CSS rather than in the idle timer, so the bar cannot fade out from
   under a click.

   :has(:focus-visible), NOT :focus-within — and that distinction is the
   whole bug this rule was written twice for. Clicking the button leaves
   DOM focus inside the bar for as long as nothing else is clicked, so
   :focus-within stayed true forever and the controls never faded at
   all. :focus-visible is only set when the browser decides focus should
   be SHOWN, which a mouse click does not do and a Tab key does — which
   is exactly the case this rule exists to protect. */
#pres-bar{transition:opacity .45s ease}
body.present-mode.pres-idle #pres-bar{opacity:0}
body.present-mode #pres-bar:hover,
body.present-mode #pres-bar:has(:focus-visible){opacity:1}

/* ── THE WIDTH (Robin, 10 Sep 2026) ──────────────────────────────
   "make the content wider on pres mode. Right now it scales taller with
   the zoom button, but width is largely the same."

   He is right and the reason is one number. Every page is capped by
   --content-w, which is 908px set on :root — so taking the 252px menu
   away gave the page more ROOM and it went on using the same rail,
   putting the extra space in the margins. Present mode redeclares that
   one property on body, which every page inherits, so the hero, the
   sections and the section headers all widen together and nothing had
   to be found and overridden one at a time.

   IN REM, NOT PIXELS, so it grows with A+ — bigger text needs a wider
   rail to hold the same number of words on a line — and capped at 100%
   so it can never push past the screen it is on.

   Long lines are not a risk here: pageContent caps prose at 72ch
   separately, so paragraphs keep their reading measure and it is the
   card grids and code panels that take the new space, which is the part
   a room reads from twenty feet. */
body.present-mode{--content-w:min(92rem,100%)}
body.present-mode .main-content{padding:2.2rem clamp(1rem,3vw,3rem)}

/* THE 90s SPRITES ARE POSITIONED OFF THE NAV. The hamster sits at
   `left: calc(var(--nav-w) + 1.4rem)`, so with the menu gone it lands
   on top of the first paragraph. They are decoration and they animate,
   which is the last thing wanted on a screen the whole room is reading,
   so present mode takes them off. */
body.present-mode .n90-sprites{display:none!important}

@media(max-width:700px){
  #pres-bar{top:.6rem;right:3.4rem;gap:.2rem}
  #pres-btn{width:2rem;height:2rem}
  #pres-btn svg{width:1.15rem;height:1.15rem}
  body.present-mode #pres-bar{right:.6rem}
  body.present-mode .main-content{padding:1.2rem .9rem}}

/* Never during an exam. The page is locked to fullscreen already, and a
   second control that also leaves fullscreen is one misclick away from
   ending somebody's paper. */
body.exam-mode #pres-bar{display:none!important}
/* Same rule the person icon follows: the open phone menu owns the
   screen, and a floating button over it is just something to hit by
   accident while scrolling the nav. */
body:has(#sidebar.open) #pres-bar{display:none}

/* ═══════════════════════════════════════════════════════════════
   TURN IN YOUR WORK (10 Sep 2026)

   The panel is designed to be PHOTOGRAPHED — a phone pointed at a
   Chromebook, or the Chromebook's own screenshot key. So it is one
   block with a hard edge, nothing that scrolls inside it, a name at
   the top and the numbers big enough to read back off a picture.

   It keeps a light ground and a solid border on every theme rather
   than the site's usual translucency: a screenshot loses whatever was
   behind it, and a panel that borrowed its contrast from the page
   underneath photographs as grey mush.
   ═══════════════════════════════════════════════════════════════ */
.ti-section .ti-box{display:flex;flex-direction:column;gap:.4rem;margin:.4rem 0 1rem}
.ti-row{display:flex;align-items:center;gap:.6rem;font-size:.95rem;
  color:rgba(255,255,255,.55)}
.ti-row.is-done{color:#fff}
.ti-tick{width:1.1rem;text-align:center;color:rgba(255,255,255,.35);font-weight:800}
.ti-row.is-done .ti-tick{color:var(--c-ok,#16B364)}
.ti-lab{min-width:8rem;font-weight:700}
.ti-val{color:rgba(255,255,255,.6)}
.ti-go{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}

.ti-panel{
  margin:1.4rem auto 0;max-width:640px;
  background:#0f1017;border:2px solid var(--c-green,#39FF14);border-radius:16px;
  overflow:hidden;color:#fff}
.ti-p-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  flex-wrap:wrap;padding:.9rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.14);
  background:rgba(var(--c-green-rgb,57,255,20),.08)}
.ti-p-who{display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:11rem}
.ti-p-who label{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.ti-p-who input{
  font:inherit;font-size:1.15rem;font-weight:800;color:#fff;
  background:transparent;border:0;border-bottom:1px dashed rgba(255,255,255,.3);
  padding:.1rem 0;width:100%}
.ti-p-who input:focus{outline:none;border-bottom-color:var(--c-green,#39FF14)}
.ti-p-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;
  font-size:.72rem;color:rgba(255,255,255,.55);text-align:right}
.ti-p-topic{font-weight:700;color:rgba(255,255,255,.8)}

.ti-p-body{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:1.1rem}
.ti-p-block h4{margin:0 0 .4rem;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-green,#39FF14)}
.ti-p-score{display:flex;align-items:baseline;gap:.6rem}
.ti-p-big{font-size:2rem;font-weight:900;line-height:1}
.ti-p-pct{font-size:1rem;font-weight:700;color:rgba(255,255,255,.6)}
.ti-p-missed{margin:.3rem 0 0;font-size:.88rem;color:rgba(255,255,255,.7)}
.ti-p-none{margin:0;font-size:.88rem;color:rgba(255,255,255,.45)}
.ti-p-task{margin:0 0 .35rem;font-size:.95rem;font-weight:700}
.ti-p-steps{margin:0;padding-left:1.3rem;font-size:.95rem;line-height:1.65}
.ti-p-foot{margin:0;padding:.6rem 1.1rem .8rem;font-size:.78rem;
  color:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.1)}

/* On the results screen it is the first thing under the score, so it
   carries its own top margin rather than relying on the review block. */
.results-screen .ti-panel{margin-top:1.2rem}
@media(max-width:600px){
  .ti-p-head{flex-direction:column;align-items:stretch}
  .ti-p-meta{align-items:flex-start;text-align:left}
  .ti-lab{min-width:6.5rem}}