/* ==========================================================================
   PATHASHALA — Components
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-2);
  color: var(--ink);
}
h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

a { color: var(--subj-maths); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------- */
/* Logo card — logo-full.png has an opaque white background baked into    */
/* the asset itself, so it floats as a stray white rectangle on the dark  */
/* theme's near-black page. Wrapping it in a matching white chip makes    */
/* the white read as intentional framing in both themes instead.         */
/* ---------------------------------------------------------------------- */
.ps-logo-card {
  display: inline-block;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-card);
}

.mono { font-family: var(--font-mono); }

/* ---------------------------------------------------------------------- */
/* App shell — logo bar + subject tab rail                                */
/* ---------------------------------------------------------------------- */

.ps-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.ps-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--ink);
}
.ps-logo svg { flex-shrink: 0; }

.ps-topbar-spacer { flex: 1; }

/* Signed-in identity block — top of the sidebar (both the desktop rail and the
   mobile offcanvas reuse _SidebarNav.cshtml, so this covers both for free). */
.ps-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.ps-sidebar-user-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 18px;
}
.ps-sidebar-user-info { min-width: 0; }
.ps-sidebar-user-name {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-sidebar-user-role {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

/* _LoginPartial/_NotificationBell render a Bootstrap .navbar-nav (built for a
   full .navbar's row/column responsive switch); outside that context it needs
   an explicit row layout to sit correctly in the topbar's flex row. */
.ps-topbar .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
}

.ps-streak {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--status-progress);
  background: var(--status-progress-tint);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.ps-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--subj-maths-tint);
  color: var(--subj-maths);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------- */
/* App shell — left sidebar + main content (Requirement_Styles.pdf §7)    */
/* ---------------------------------------------------------------------- */

.ps-shell {
  display: flex;
  align-items: stretch; /* sidebar and main both span ps-shell's real height —
    which body's flex column already sizes to exactly fill the gap between
    header and footer (see site.css) — instead of each independently guessing
    at 100vh. Guessing caused the sidebar's sticky box to reserve viewport
    height on top of what the footer also needed, so the footer either got
    pushed below the fold or visually met the sidebar's bottom edge. */
}

.ps-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-3);
  position: sticky;
  top: 61px;
  align-self: stretch;
  /* align-self: stretch still sizes this to ps-shell's real height on pages where that's
     shorter than the viewport — same as before, so the footer still lines up flush (see the
     history below). max-height + overflow-y additionally cap it at the visible viewport window
     the instant ps-shell (i.e. the page's own content) is taller than that: without this, a long
     nav list (Admin's, especially with the Account section) stays pinned via position: sticky
     but its lower items render below the fold with no way to reach them — the sticky box only
     "releases" and scrolls into view near the very bottom of the whole page. Scoping the cap to
     calc(100vh - 61px) — the sticky offset, not a flat 100vh — is what avoids the footer-gap
     regression an earlier flat max-height attempt caused: the sidebar's own box height no longer
     drives ps-shell's height at all (align-self: stretch still does that), so the footer keeps
     landing exactly where ps-shell's real (main-content-driven) bottom edge is. */
  max-height: calc(100vh - 61px);
  overflow-y: auto;
}

.ps-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Scoped to this inner, normal-flow element rather than .ps-sidebar itself — .ps-sidebar is
     position:sticky with align-self:stretch (see its own comment above), and giving a sticky/
     stretched element any non-"visible" overflow-x forces overflow-y to auto too (per the CSS
     spec's visible/non-visible pairing rule), which clips it to a scrolling sub-box instead of
     tracking the page normally. Putting the scroll capability here avoids that trap entirely:
     if a nav label or long user name/email ever runs wider than the column, only this element's
     content scrolls sideways — the sidebar's own sticky/vertical behavior is untouched, and the
     page itself never scrolls horizontally (see site.css's hard overflow-x:hidden on html/body). */
  overflow-x: auto;
}

.ps-sidebar-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
  padding: var(--sp-4) var(--sp-3) var(--sp-1);
  white-space: nowrap;
}

.ps-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px var(--sp-3);
  border-radius: var(--radius-md);
  color: var(--ink-secondary);
  font-weight: 500;
  font-size: var(--fs-sm);
  white-space: nowrap;
  text-decoration: none !important;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ps-sidebar-link i { font-size: 18px; width: 20px; text-align: center; flex-shrink: 0; }
.ps-sidebar-link:hover { background: var(--bg-surface-muted); color: var(--ink); }
.ps-sidebar-link.active {
  background: var(--primary-tint);
  color: var(--primary);
  font-weight: 600;
}

.ps-sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-3) var(--sp-2);
}

/* Logout is a POST form (not a link), but its button should look and sit exactly like every
   other .ps-sidebar-link — this strips the native <button> chrome back down to that baseline. */
.ps-sidebar-logout-form { margin: 0; }
.ps-sidebar-link--button {
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ps-shell-main {
  flex: 1;
  min-width: 0;
}

@media (max-width: 991.98px) {
  .ps-sidebar { display: none; }
}

/* Off-canvas variant (mobile) reuses the same nav markup/classes inside a
   Bootstrap .offcanvas — see _Layout.cshtml. */
.offcanvas .ps-sidebar-nav { padding: 0 var(--sp-2); }

/* ---------------------------------------------------------------------- */
/* Chapter card — stamped roll-number badge + ruler progress              */
/* ---------------------------------------------------------------------- */

.ps-chapter-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ps-chapter-card {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ps-chapter-card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}

.ps-stamp {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
  transform: rotate(-4deg);
}
.ps-chapter-card.is-complete .ps-stamp {
  border-color: var(--status-success);
  color: var(--status-success);
}

.ps-chapter-body { flex: 1; min-width: 0; }

.ps-chapter-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-2);
}

.ps-chapter-title {
  font-weight: 500;
  font-size: var(--fs-base);
  margin: 0 0 6px;
  color: var(--ink);
}

.ps-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.ps-badge--complete { background: var(--status-success-tint); color: var(--status-success); }
.ps-badge--progress { background: var(--status-progress-tint); color: var(--status-progress); }
.ps-badge--idle      { background: var(--status-idle-tint); color: var(--ink-muted); }

/* Signature: ruler-style progress — ticks like a ruled notebook line */
.ps-ruler {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background-color: var(--bg-surface-muted);
  background-image: repeating-linear-gradient(
    90deg, var(--border) 0 1px, transparent 1px 10%
  );
  margin: var(--sp-2) 0 6px;
  overflow: hidden;
}
.ps-ruler-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  background: var(--status-success);
  width: var(--fill, 0%);
  animation: rulerFill var(--dur-slow) var(--ease-out) both;
}
@keyframes rulerFill {
  from { width: 0; }
}

.ps-chapter-meta {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.ps-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ps-btn:hover { background: var(--bg-surface-muted); }
.ps-btn:active { transform: scale(0.97); }

.ps-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.ps-btn--primary:hover { background: var(--primary-dark); }

.ps-btn--ghost { border-color: transparent; background: transparent; }

.ps-btn:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Read Aloud (text-to-speech)                                            */
/* ---------------------------------------------------------------------- */

.ps-readaloud {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.ps-readaloud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--ink-secondary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.ps-readaloud-btn:hover {
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--primary);
}

.ps-readaloud-btn:active {
  transform: scale(0.93);
}

.ps-readaloud-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ps-readaloud-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.ps-readaloud-btn[disabled]:hover {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--ink-secondary);
}

/* Reading — filled, elevated, with an animated "speaking" icon. */
.ps-readaloud.is-reading .ps-readaloud-btn[data-read-aloud-play] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-raised);
}
.ps-readaloud.is-reading .ps-readaloud-btn[data-read-aloud-play]:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}
.ps-readaloud.is-reading [data-read-aloud-icon] {
  animation: ps-readaloud-speak 1s ease-in-out infinite;
}

/* Paused — tinted to signal "waiting", distinct from both idle and reading so state never
   relies on color alone (the icon glyph itself also changes — see readaloud.js setState). */
.ps-readaloud.is-paused .ps-readaloud-btn[data-read-aloud-play] {
  background: var(--status-progress-tint);
  border-color: var(--status-progress);
  color: var(--status-progress);
}

.ps-readaloud-stop:hover {
  background: var(--status-danger-tint);
  border-color: var(--status-danger);
  color: var(--status-danger);
}

@keyframes ps-readaloud-speak {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-readaloud.is-reading [data-read-aloud-icon] { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* AI tutor chat panel                                                     */
/* ---------------------------------------------------------------------- */

.ps-chat {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.ps-chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--teal-tint);
  color: var(--teal);
  font-weight: 500;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border);
}

.ps-chat-body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-height: 280px;
  overflow-y: auto;
}

.ps-msg { display: flex; }
.ps-msg--student { justify-content: flex-end; }
.ps-msg-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.ps-msg--ai .ps-msg-bubble {
  background: var(--teal-tint);
  color: var(--ink);
  border-bottom-left-radius: 2px;
}
.ps-msg--student .ps-msg-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}

.ps-chat-input {
  display: flex;
  gap: 8px;
  padding: var(--sp-3);
  border-top: 1px solid var(--border);
}
.ps-chat-input input {
  flex: 1;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  background: var(--bg-surface-muted);
  color: var(--ink);
}
.ps-chat-input input:focus {
  outline: none;
  border-color: var(--teal);
}

/* ---------------------------------------------------------------------- */
/* Dashboard hero                                                         */
/* ---------------------------------------------------------------------- */

.ps-hero {
  padding: var(--sp-5) var(--sp-5);
  background: linear-gradient(135deg, var(--primary-tint), var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.ps-hero h2 { font-family: var(--font-display); }

/* A quieter cousin of the landing page's hero blobs (home.css) for the student dashboard's
   daily greeting — same idea, much smaller and slower, so it reads as a nice touch on a page
   visited every day rather than competing with the actual content below it. Scoped to this one
   modifier rather than the base .ps-hero, since Admin/Teacher/Platform reuse .ps-hero too and
   should stay plain and businesslike. */
.ps-hero--decorated {
  position: relative;
  overflow: hidden;
}
.ps-hero--decorated::before,
.ps-hero--decorated::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .35;
  z-index: 0;
  animation: psBlobFloat 16s ease-in-out infinite;
}
.ps-hero--decorated::before { width: 180px; height: 180px; top: -60px; right: 8%; background: var(--primary); }
.ps-hero--decorated::after { width: 140px; height: 140px; bottom: -50px; right: 22%; background: var(--gold); opacity: .25; animation-delay: -6s; }
.ps-hero--decorated > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .ps-hero--decorated::before, .ps-hero--decorated::after { animation: none; }
}

@media (max-width: 575.98px) {
  .ps-hero { padding: var(--sp-4); border-radius: var(--radius-lg); }
  .ps-hero h2 { font-size: var(--fs-lg); }
  .ps-stat-tile { padding: var(--sp-3) var(--sp-2); }
  .ps-stat-tile .ps-stat-number { font-size: var(--fs-xl); }
  .ps-stat-tile .ps-stat-icon { font-size: 1.4rem; }
}

/* ---------------------------------------------------------------------- */
/* Subject card — compact dashboard entry point into a subject's chapters */
/* ---------------------------------------------------------------------- */

.ps-subject-card {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  height: 100%;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ps-subject-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }

.ps-subject-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}

.ps-subject-body { flex: 1; min-width: 0; }
.ps-subject-body h5 { font-family: var(--font-display); }

/* ---------------------------------------------------------------------- */
/* Achievement card — tasteful, not a children's game badge               */
/* ---------------------------------------------------------------------- */

.ps-achievement-card {
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-2);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ps-achievement-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.ps-achievement-icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--sp-2);
  border-radius: 50%;
  background: var(--gold-tint);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.ps-achievement-name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

/* ---------------------------------------------------------------------- */
/* Empty states — every empty page gets a meaningful illustration + CTA,  */
/* never a bare "No data found."                                          */
/* ---------------------------------------------------------------------- */

.ps-empty-state {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.ps-empty-icon {
  font-size: 2.5rem;
  color: var(--ink-muted);
  margin-bottom: var(--sp-3);
}
.ps-empty-state h5 { font-family: var(--font-display); margin-bottom: var(--sp-1); }

/* ---------------------------------------------------------------------- */
/* Lesson reader — comfortable reading width + adjustable text size       */
/* (Requirement_Styles.pdf §11: "distraction-free", "typography controls")*/
/* ---------------------------------------------------------------------- */

.ps-reader {
  max-width: 760px;
}

.ps-reader .lesson-content {
  font-size: calc(var(--fs-base) * var(--reader-scale, 1));
  line-height: 1.75;
}
.ps-reader .lesson-content h1,
.ps-reader .lesson-content h2,
.ps-reader .lesson-content h3 {
  margin-top: var(--sp-5);
}

.ps-type-controls {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ps-type-controls .ps-btn { border: none; border-radius: 0; }
.ps-type-controls .ps-btn:first-child { border-right: 1px solid var(--border); }

/* ---------------------------------------------------------------------- */
/* Quiz result — a focused celebration/feedback screen                    */
/* ---------------------------------------------------------------------- */

.ps-quiz-result-card {
  position: relative;
  overflow: hidden;
  max-width: 560px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-raised);
  padding: var(--sp-6) var(--sp-5);
}
.ps-quiz-result-icon { font-size: 3rem; margin-bottom: var(--sp-2); position: relative; z-index: 1; }
.ps-quiz-result-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.5rem;
  margin: var(--sp-2) 0;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
@media (max-width: 575.98px) {
  .ps-quiz-result-card { padding: var(--sp-4); }
  .ps-quiz-result-score { font-size: 2.5rem; }
}

/* A great score gets a quiet celebratory glow behind the icon/score — a soft radial burst in
   the success colour, not confetti or motion, so it reads as "well done" without being noisy
   on repeat visits (e.g. checking History). */
.ps-quiz-result-card--glow::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  width: 420px;
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--status-success-tint) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.ps-quiz-result-card--glow > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------- */
/* Exam grading queue — grouped by student, then by exam                  */
/* ---------------------------------------------------------------------- */

.ps-grading-student {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
/* Both headers double as the collapse/expand toggle (data-bs-toggle="collapse") — reset them
   back to plain block-level chrome from native <button> defaults, then layer the same visual
   design back on top, so "clickable" doesn't cost any of the existing look. */
.ps-grading-toggle {
  width: 100%;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.ps-grading-student-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  background: none;
  padding: 0;
}
.ps-grading-student-avatar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.ps-grading-exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
  transition: background var(--dur-fast) var(--ease-out);
}
.ps-grading-exam-header:hover { background: var(--bg-surface-muted); }
.ps-grading-student-header:hover .ps-grading-student-avatar { background: var(--primary); color: #fff; }

.ps-grading-chevron {
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
  color: var(--ink-muted);
}
.ps-grading-toggle.collapsed .ps-grading-chevron { transform: rotate(-90deg); }

/* ---------------------------------------------------------------------- */
/* Quiz answer options — large, touch-friendly cards instead of tiny      */
/* radio circles (Requirement_Styles.pdf §13)                             */
/* ---------------------------------------------------------------------- */

.ps-answer-option {
  display: block;
  position: relative;
  margin-bottom: var(--sp-2);
}
.ps-answer-option input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.ps-answer-option label {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ps-answer-option label:hover { border-color: var(--primary); background: var(--primary-tint); }
.ps-answer-option input:checked + label {
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-weight: 600;
}
.ps-answer-option input:focus-visible + label {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ps-quiz-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
}