style: refinement pass for admin + student SPAs

Targeted fixes on top of the editorial-lecture-hall pass:

- Leaderboard rank columns now align across all rows; medal stripes
  reserve their 3px width on every row (no more 6px shift between
  podium and chasers). Silver bumps to higher-contrast values in both
  light and dark modes.
- Student leaderboard gains a visible "you" highlight (blue stripe,
  blue name + score, small "you" eyebrow under the name). Matches by
  display name since the server's student-facing top5 doesn't include
  student_id.
- Lobby and Finished states share an editorial state-cta treatment:
  display-serif "Ready to start." / "That's a wrap." with a numeric
  cta-stats strip that anchors the right column on a projector.
- "02 PRE-FLIGHT" eyebrow continues the "01 JOIN" sequence on the
  side panel, giving the page a magazine-spread rhythm.
- Live distribution suppresses empty bars when zero submissions and
  shows a calm italic "Bars appear once the first answer comes in."
  line instead.
- Roster orders newest-first; the top three rows light their dot
  green and the freshest row gets a soft pulsing halo, so the
  operator sees the room filling up at a glance.
- Student reveal "Your pick" tag moves to a top-edge ribbon above the
  option text so it stops colliding with the count column on phones.

static/admin.js

@@ -178,12 +178,16 @@ function renderJoinPanel() {
 
 function renderRosterPanel() {
   const r = store.roster || [];
+  // Newest-first so late joiners are visible at the top of the list. The
+  // first three are tagged so the CSS can warm their dot — gives the
+  // operator a quick "yes the room is live" cue without an explicit log.
+  const ordered = r.slice().reverse();
   return `
     <div class="card panel">
       <h2>Joined <span class="count">${r.length}</span></h2>
-      ${r.length
+      ${ordered.length
-        ? `<ul class="roster">${r.map((p) =>
+        ? `<ul class="roster">${ordered.map((p, i) =>
-            `<li><span class="dot"></span><span class="who"><b>${escapeText(p.name)}</b><small>${escapeText(p.student_id)}</small></span></li>`
+            `<li class="${i < 3 ? "is-fresh" : ""}"><span class="dot"></span><span class="who"><b>${escapeText(p.name)}</b><small>${escapeText(p.student_id)}</small></span></li>`
           ).join("")}</ul>`
         : `<p class="muted">No students have joined yet. Share the QR or URL.</p>`}
     </div>
@@ -200,11 +204,18 @@ function renderStatePanel(state) {
 
 function renderLobby() {
   const total = store.session.pool_meta.question_count;
+  const joined = (store.roster || []).length;
   return `
-    <div class="card panel">
+    <div class="card panel state-cta-card">
       <div class="state-cta">
-        <h2>Ready to start</h2>
+        <p class="cta-eyebrow"><span class="cta-num">02</span> Pre-flight</p>
-        <p>When you start, question 1 of ${total} opens for everyone in the room. Late joiners can still join after a question opens; they get whatever time remains.</p>
+        <h2>Ready to start.</h2>
+        <p>When you start, question&nbsp;1 of&nbsp;${total} opens for everyone in the room. Late joiners can still hop in mid-question; they get whatever time remains on the clock.</p>
+        <div class="cta-stats">
+          <div class="cta-stat"><span class="muted">Joined</span><b>${joined}</b></div>
+          <div class="cta-stat"><span class="muted">Questions</span><b>${total}</b></div>
+          <div class="cta-stat"><span class="muted">Per question</span><b>${store.session.pool_meta.time_limit_default}<small>s</small></b></div>
+        </div>
         <button class="btn primary big" data-action="next">Start quiz →</button>
       </div>
     </div>
@@ -240,15 +251,29 @@ function renderQuestionOpen() {
 }
 
 function renderLiveHistogram() {
-  if (!store.histogram) return `<p class="muted small">Waiting for first submission…</p>`;
+  if (!store.histogram) return `<p class="muted small">Awaiting the first submission…</p>`;
   const h = store.histogram;
+  const submitted = store.submittedCount || 0;
   const total = Math.max(1, store.totalCount || 0);
+  // While nobody has submitted yet, suppress the bar rows — empty bars
+  // read as broken rather than "no data". Show a calm awaiting line.
+  if (submitted === 0) {
+    return `
+      <div class="hist live">
+        <div class="hist-summary">
+          <span><b>0</b> submitted</span>
+          ${store.totalCount ? `<span class="muted">of ${store.totalCount} joined</span>` : ""}
+        </div>
+        <p class="muted small hist-awaiting">Bars appear once the first answer comes in.</p>
+      </div>
+    `;
+  }
   return `
     <div class="hist live">
       <div class="hist-summary">
-        <span><b>${store.submittedCount}</b> submitted</span>
+        <span><b>${submitted}</b> submitted</span>
         ${store.totalCount ? `<span class="muted">of ${store.totalCount} joined</span>` : ""}
-        ${h.pending != null ? `<span class="muted">· ${h.pending} pending</span>` : ""}
+        ${h.pending != null && h.pending > 0 ? `<span class="muted">${h.pending} pending</span>` : ""}
       </div>
       <div class="hist-rows">
         ${["A","B","C","D"].map((k) => {
@@ -326,10 +351,13 @@ function renderQuestionClosed() {
 }
 
 function renderFinished() {
+  const total = store.session.pool_meta.question_count;
   return `
     <div class="card panel">
-      <h2>Quiz finished</h2>
+      <div class="state-cta">
-      <p class="muted">${store.session.pool_meta.question_count} questions complete. Final leaderboard below.</p>
+        <h2>That's a wrap.</h2>
+        <p>${total} question${total === 1 ? "" : "s"} complete. Final standings below; download the CSV when you're ready to grade.</p>
+      </div>
       <h3>Final leaderboard</h3>
       ${renderLeaderboardList(store.leaderboard)}
       <div class="action-row">

static/quiz.js

@@ -314,15 +314,23 @@ function renderFinished(message) {
 
 function renderBoard(rows = []) {
   if (!rows || !rows.length) return `<p class="muted small">No scores yet.</p>`;
+  // The server's student-facing top5 doesn't include student_id, so match
+  // on display name. Same-name collisions are rare in a single classroom
+  // session; if it ever happens both rows highlight, which still reads
+  // as "yours might be one of these" to the student.
+  const myName = store.me?.name;
   return `
     <ol class="leaderboard">
-      ${rows.map((r) => `
+      ${rows.map((r) => {
-        <li>
+        const isYou = myName && r.name && r.name === myName;
+        return `
+        <li class="${isYou ? "is-you" : ""}">
           <span class="rank">${r.rank}</span>
           <span class="who"><b>${escapeText(r.name)}</b></span>
           <span class="score">${r.score}</span>
         </li>
-      `).join("")}
+      `;
+      }).join("")}
     </ol>
   `;
 }

static/style.css

@@ -48,9 +48,9 @@
   --wrong-border: #7a221c;
   --wrong-bg: rgba(122, 34, 28, 0.08);
 
-  /* Top-3 medals — subtle, restrained */
+  /* Top-3 medals — subtle, restrained, but readable across a hall */
   --medal-gold: #a07a1f;
-  --medal-silver: #6f6f72;
+  --medal-silver: #595c66;
   --medal-bronze: #8a4a1f;
 
   --shadow-sm: 0 1px 0 rgba(20, 22, 28, 0.04);
@@ -550,10 +550,18 @@ input:focus, textarea:focus, select:focus {
   width: 6px;
   height: 6px;
   border-radius: 999px;
-  background: var(--correct-border);
+  background: var(--muted-2);
   flex-shrink: 0;
+  transition: background 0.5s ease, box-shadow 0.5s ease;
+}
+.roster li.is-fresh .dot {
+  background: var(--correct-border);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--correct-border) 22%, transparent);
 }
+.roster li.is-fresh:first-child .dot {
+  /* Newest-first emphasis — soft pulsing halo on the top row only. */
+  animation: rosterDotPulse 2.2s ease-in-out infinite;
+}
 .roster .who { display: grid; line-height: 1.25; }
 .roster .who b { font-weight: 500; font-size: 0.95rem; }
 .roster .who small {
@@ -566,15 +574,22 @@ input:focus, textarea:focus, select:focus {
   from { opacity: 0; transform: translateX(-6px); }
   to { opacity: 1; transform: translateX(0); }
 }
+@keyframes rosterDotPulse {
+  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--correct-border) 22%, transparent); }
+  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--correct-border) 12%, transparent); }
+}
 
-/* ---------- State CTA panel (lobby / finished) ---------- */
+/* ---------- State CTA panel (lobby / finished) ----------
+ * The right column gets editorial weight here so the page doesn't read
+ * empty before the quiz starts (or after it ends). */
 
 .state-cta { display: grid; gap: 14px; }
 .state-cta h2 {
   font-family: var(--font-display);
-  font-size: 1.5rem;
+  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
-  font-weight: 600;
+  font-weight: 500;
-  letter-spacing: -0.01em;
+  line-height: 1.12;
+  letter-spacing: -0.014em;
   text-transform: none;
   color: var(--text);
   border-bottom: 0;
@@ -588,7 +603,73 @@ input:focus, textarea:focus, select:focus {
   line-height: 1.55;
   max-width: 60ch;
 }
-.state-cta .btn.big { justify-self: start; margin-top: 6px; }
+.state-cta .cta-eyebrow {
+  font-family: var(--font-sans);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin: 0 0 -6px;
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  max-width: none;
+}
+.state-cta .cta-num {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  font-size: 0.72rem;
+  letter-spacing: 0;
+  color: var(--muted-2);
+}
+.state-cta .btn.big { justify-self: start; margin-top: 14px; }
+
+/* Inline numeric stats inside a CTA panel — gives the lobby/finished
+ * card visual mass without needing a hero illustration. Cap the strip
+ * width so it stays a coherent eye-block on a 1920px projector. */
+.cta-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  margin: 14px 0 4px;
+  max-width: 580px;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+.cta-stat {
+  flex: 1 1 0;
+  min-width: 110px;
+  padding: 14px 18px;
+  border-right: 1px dotted var(--border);
+}
+.cta-stat:first-child { padding-left: 0; }
+.cta-stat:last-child { border-right: 0; padding-right: 0; }
+.cta-stat span {
+  display: block;
+  font-family: var(--font-sans);
+  font-size: 0.66rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.cta-stat b {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 1.6rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  margin-top: 6px;
+  color: var(--text);
+}
+.cta-stat b small {
+  font-size: 0.78rem;
+  margin-left: 2px;
+  color: var(--muted);
+  letter-spacing: 0;
+}
 
 .action-row {
   display: flex;
@@ -794,6 +875,12 @@ h2.question-text.small {
   padding-bottom: 6px;
 }
 .hist-summary b { color: var(--text); font-weight: 600; }
+.hist-awaiting {
+  margin: 4px 0 0;
+  padding: 0;
+  font-style: italic;
+  color: var(--muted);
+}
 .hist-rows { display: grid; gap: 6px; }
 .hist-row {
   display: grid;
@@ -853,8 +940,10 @@ h2.question-text.small {
   grid-template-columns: 36px 1fr auto;
   gap: 14px;
   align-items: center;
-  padding: 10px 12px;
+  /* Reserve the 3px medal stripe space on every row so rank columns align. */
+  padding: 10px 12px 10px 15px;
   border-radius: 0;
+  border-left: 3px solid transparent;
   border-bottom: 1px solid var(--border);
   position: relative;
   transition: background 0.18s ease;
@@ -897,15 +986,11 @@ h2.question-text.small {
   letter-spacing: -0.01em;
 }
 
-/* Top-3 medal treatment — restrained left-border accent */
+/* Top-3 medal treatment — colored stripe + tinted plate. Stripe width is
-.leaderboard li:nth-child(1),
+ * already reserved on every row, so rank columns stay aligned. */
-.leaderboard li:nth-child(2),
+.leaderboard li:nth-child(1) { border-left-color: var(--medal-gold);   background: color-mix(in srgb, var(--medal-gold) 9%, var(--surface)); }
-.leaderboard li:nth-child(3) {
+.leaderboard li:nth-child(2) { border-left-color: var(--medal-silver); background: color-mix(in srgb, var(--medal-silver) 9%, var(--surface)); }
-  padding-left: 18px;
+.leaderboard li:nth-child(3) { border-left-color: var(--medal-bronze); background: color-mix(in srgb, var(--medal-bronze) 9%, var(--surface)); }
-}
-.leaderboard li:nth-child(1) { border-left: 3px solid var(--medal-gold); background: color-mix(in srgb, var(--medal-gold) 6%, var(--surface)); }
-.leaderboard li:nth-child(2) { border-left: 3px solid var(--medal-silver); background: color-mix(in srgb, var(--medal-silver) 4%, var(--surface)); }
-.leaderboard li:nth-child(3) { border-left: 3px solid var(--medal-bronze); background: color-mix(in srgb, var(--medal-bronze) 5%, var(--surface)); }
 .leaderboard li:nth-child(1) .rank { color: var(--medal-gold); }
 .leaderboard li:nth-child(2) .rank { color: var(--medal-silver); }
 .leaderboard li:nth-child(3) .rank { color: var(--medal-bronze); }
@@ -915,6 +1000,36 @@ h2.question-text.small {
   font-weight: 600;
 }
 
+/* "That's me" highlight on the student leaderboard. Blue stripe + name
+ * recolour + small inline "you" tag below the name. The tag rides the
+ * existing grid row of .who so it never collides with the score. */
+.leaderboard li.is-you {
+  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
+  border-left-color: var(--primary);
+}
+.leaderboard li.is-you .who { gap: 1px; }
+.leaderboard li.is-you .who b { color: var(--primary); font-weight: 600; }
+.leaderboard li.is-you .who::after {
+  content: "you";
+  font-family: var(--font-sans);
+  font-size: 0.58rem;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--primary);
+  font-weight: 600;
+  opacity: 0.85;
+}
+.leaderboard li.is-you .score { color: var(--primary); }
+.leaderboard li.is-you:nth-child(1),
+.leaderboard li.is-you:nth-child(2),
+.leaderboard li.is-you:nth-child(3) {
+  /* When the student IS on the podium, keep the medal stripe; brighten
+   * the row tint so they still read as "you". */
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--primary) 6%, transparent)),
+    var(--surface);
+}
+
 /* ---------- Student-side answer buttons ---------- */
 
 .quiz-card { width: min(680px, 100%); padding: 28px 30px 32px; }
@@ -1098,25 +1213,28 @@ h2.question-text.small {
   margin-top: 24px;
 }
 
-/* ---------- Student-specific reveal trims ---------- */
+/* ---------- Student-specific reveal trims ----------
+ * The "Your pick" tag sits as a thin top-edge ribbon so it can't collide
+ * with the count column on narrow phones. */
 
 .options.student-reveal li.yours {
   position: relative;
+  padding-top: 22px;
 }
-.options.student-reveal li.yours::after {
+.options.student-reveal li.yours::before {
   content: "Your pick";
   position: absolute;
   top: 4px;
-  right: 12px;
+  left: 16px;
   font-family: var(--font-sans);
-  font-size: 0.6rem;
+  font-size: 0.58rem;
-  letter-spacing: 0.18em;
+  letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--muted);
   font-weight: 600;
 }
-.options.student-reveal li.yours.correct::after { color: var(--correct-border); }
+.options.student-reveal li.yours.correct::before { color: var(--correct-border); }
-.options.student-reveal li.yours.wrong-pick::after { color: var(--wrong-border); }
+.options.student-reveal li.yours.wrong-pick::before { color: var(--wrong-border); }
 
 /* ---------- Responsive: mobile student view ---------- */
 
@@ -1174,9 +1292,9 @@ h2.question-text.small {
     --wrong-border: #d36556;
     --wrong-bg: rgba(211, 101, 86, 0.10);
 
-    --medal-gold: #d8b06a;
+    --medal-gold: #e1bd72;
-    --medal-silver: #a4a8b6;
+    --medal-silver: #c2c6d3;
-    --medal-bronze: #c98a5a;
+    --medal-bronze: #d99165;
 
     --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.4);
     --shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 16px 38px -22px rgba(0, 0, 0, 0.7);