/* ══════════════════════════════════════════════════════════════
   TEACH.HTML — EraPin Teacher Portal (Redesigned April 2026)
   Layout: Sidebar (rooms) | Centre (room hero + leaderboard) | Quiz builder below
   Zero-setup: auto-creates Practice Room with pre-loaded quiz
   ══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;background:#F5F0E8;font-family:'Courier Prime',monospace;color:#1C1208}

/* ── Container — narrow for login, full-width for dashboard ── */
.container{max-width:680px;margin:0 auto;padding:32px 20px;transition:max-width .3s}
.container.wide{max-width:100%;padding:20px 24px}
@media(max-width:500px){#name-school-row{flex-direction:column;gap:0}
.landing-pill{font-size:10px !important;padding:4px 10px !important}}

/* ── Brand ── */
.logo{font-family:'IM Fell English SC',serif;font-size:28px;color:#1C1208;letter-spacing:6px;text-align:center;margin-bottom:4px}
.logo span{color:#8B1A0E}
.sub{font-family:'Courier Prime',monospace;font-size:10px;letter-spacing:3px;color:#8B6914;text-align:center;margin-bottom:32px}

/* ── Card system ── */
.card{background:#fff;border:1px solid #1C120820;border-radius:8px;padding:20px;margin-bottom:16px}
.card-title{font-family:'IM Fell English SC',serif;font-size:15px;letter-spacing:3px;color:#1C1208;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid #1C120815}

/* ── Form elements ── */
label{display:block;font-size:9px;letter-spacing:2px;color:#8B6914;margin-bottom:4px;text-transform:uppercase}
input[type="text"],input[type="email"],input[type="number"],input[type="date"],select,textarea{width:100%;padding:10px 12px;border:1px solid #1C120830;border-radius:6px;font-family:'Courier Prime',monospace;font-size:13px;color:#1C1208;background:#F5F0E8;outline:none;margin-bottom:14px}
input:focus,select:focus,textarea:focus{border-color:#8B6914}
select{cursor:pointer;-webkit-appearance:none;appearance:none;background:#F5F0E8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238B6914' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center}
textarea{resize:vertical;height:60px}

/* ── Buttons ── */
.btn{width:100%;padding:14px;border:none;border-radius:6px;font-family:'IM Fell English SC',serif;font-size:16px;letter-spacing:3px;cursor:pointer;transition:opacity .2s}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.btn-primary{background:var(--erapin-red);color:var(--erapin-paper)}
.btn-primary:hover{background:var(--erapin-red-deep)}
.btn-secondary{background:#EDE8DC;border:1px solid #1C120830;color:#1C1208;font-size:13px;letter-spacing:2px}
.btn-sm{width:auto;padding:8px 16px;font-size:12px;letter-spacing:2px}
.msg{font-size:11px;color:#8B6914;text-align:center;letter-spacing:1px;padding:12px 0}
.error{color:#c44a2a}
.hidden{display:none}
.row{display:flex;gap:10px}
.row>*{flex:1}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid #8B691440;border-top-color:#8B6914;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD LAYOUT — 2-column grid
   Left sidebar: room list (sticky)
   Main: room hero + leaderboard + quiz builder
   ══════════════════════════════════════════════════════════════ */
.dash-grid{display:grid;grid-template-columns:260px 1fr;gap:20px;min-height:calc(100vh - 120px)}
.dash-sidebar{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow-y:auto}

@media(max-width:900px){
  .dash-grid{grid-template-columns:1fr}
  .dash-sidebar{position:static;max-height:none}
  .dash-sidebar.room-selected > .card{display:none !important}
  .dash-sidebar.room-selected > #referral-card{display:none !important}
  .dash-sidebar.room-selected > #pro-sidebar-card{display:none !important}
  .dash-sidebar.room-selected .mobile-room-header{display:flex !important}
  /* Sidebar brand is desktop-only — mobile gets the .container .logo
     header at the top of the page already. */
  #sidebar-brand{display:none !important}
}

/* ── Mobile room header (shows when sidebar cards hidden) ── */
.mobile-room-header{display:none;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border:1px solid #1C120820;border-radius:8px;margin-bottom:8px}
.mobile-room-header .mrh-name{font-family:'Playfair Display',serif;font-size:14px;color:#1C1208}
.mobile-room-header .mrh-code{font-family:'IM Fell English SC',serif;font-size:14px;color:#8B1A0E;letter-spacing:2px}
.mobile-room-header .mrh-change{font-size:10px;color:#8B6914;text-decoration:underline;cursor:pointer;letter-spacing:1px}

/* ── Room list items ── */
.room-list-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:#F5F0E8;border:2px solid transparent;border-radius:6px;margin-bottom:6px;cursor:pointer;transition:all .15s}
.room-list-item:hover{background:#EDE8DC;border-color:#8B691440}
.room-list-item.active{border-color:#8B1A0E;background:#fdf6ee}
.room-list-name{font-family:'Playfair Display',serif;font-size:13px;color:#1C1208}
.room-list-code{font-family:'IM Fell English SC',serif;font-size:13px;color:#8B1A0E;letter-spacing:2px}
.room-list-meta{font-size:8px;color:#8B6914;letter-spacing:1px;margin-top:2px}

/* ══════════════════════════════════════════════════════════════
   ROOM HERO — the centre-stage card when a room is selected
   Shows room code, student link, share buttons
   ══════════════════════════════════════════════════════════════ */
/* overflow:visible so the Switch-room dropdown (which opens below the button)
   isn't clipped to the card on MOBILE — the desktop rule already does this; the
   base rule was still hiding the room list. The ::before top-bar gets matching
   top border-radius so it doesn't poke past the card's rounded corners. */
.room-hero{background:#EDE8DC;border:2px solid #1C120815;border-radius:10px;padding:20px;margin-bottom:16px;position:relative;overflow:visible}
.room-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#c44a2a,#8B6914);border-radius:10px 10px 0 0}
.room-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.room-hero-left{flex:1;min-width:0}
/* Mobile-only stacked layout for the room-hero-top row. The desktop
   layout has 4 flex siblings (left, name, spacer, share-btns) that
   all try to sit on one row — on a narrow viewport the room name +
   LIVE pill collided with the ROOM CODE label + code, producing the
   "bunny ✏️ overlapping D7OF" overlap. Below the desktop breakpoint
   (the dashboard layout flips at 900px), stack them vertically so
   each block gets its own row with consistent left alignment. */
@media (max-width: 899px) {
  .room-hero-top { flex-direction: column; align-items: stretch; gap: 10px; }
  .room-hero-top .share-btns { flex-direction: row; flex-wrap: wrap; margin-top: 4px; }
  .room-hero-top .room-hero-spacer { display: none; }
}
.room-hero-label{font-size:9px;letter-spacing:2px;color:#8B6914;text-transform:uppercase;margin-bottom:4px}
/* Room code uses Georgia (which ships only lining figures) instead
   of IM Fell English SC — the Google Fonts build of IM Fell ignores
   the `lnum` OpenType toggle so the 7 stayed at oldstyle below the
   baseline (operator 2026-06-02 — "7 is not aligned to D in D7OF").
   Georgia matches the desktop @media override at line 549 and the
   reference's --serif token, so flipping the base rule unifies all
   viewports without losing the decorative serif feel. */
.room-hero-code{font-family:'Times New Roman',Times,serif;font-weight:700;font-size:40px;letter-spacing:0.05em;color:#8B1A0E;line-height:1;font-feature-settings:'lnum' 1,'tnum' 1;font-variant-numeric:lining-nums tabular-nums}
.room-hero-name{font-family:'Playfair Display',serif;font-size:15px;color:#1C1208;margin-top:4px}
.room-hero-right{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0}
.live-dot{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:2px;color:#2e6018;font-family:'Courier Prime',monospace}
.live-dot::before{content:'';width:8px;height:8px;background:#2e6018;border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.3)}}

.student-link-bar{display:flex;gap:6px;align-items:stretch;margin-top:8px}
.student-link{flex:1;font-size:11px;color:#1C1208;background:#F5F0E8;border:1px solid #1C120830;border-radius:4px;padding:8px 12px;cursor:pointer;word-break:break-all;font-family:'Courier Prime',monospace;transition:background .15s}
.student-link:hover{background:#EDE8DC}
.copy-feedback{font-size:9px;color:#2e6018;letter-spacing:1px;text-align:center;min-height:14px;margin-top:4px}

.share-btns{display:flex;gap:6px;margin-top:4px}
.share-btns .btn{padding:8px 14px;font-size:11px;letter-spacing:1px;width:auto;flex:1}
/* Student-join row buttons: same auto-width override so they sit in a row
   instead of stacking (default .btn is width:100%). */
.student-link-bar .btn{padding:8px 14px;font-size:11px;letter-spacing:1px;width:auto;flex:0 0 auto}

/* ── Reassurance pill ── */
.reassurance{display:flex;align-items:center;gap:8px;background:#EDE8DC;border-radius:6px;padding:10px 14px;margin-bottom:16px;font-size:10px;color:#5a4828;line-height:1.5;letter-spacing:0.3px}
.reassurance-icon{font-size:16px;flex-shrink:0}

/* ══════════════════════════════════════════════════════════════
   TODAY'S QUIZ — prominent card showing what's live right now
   ══════════════════════════════════════════════════════════════ */
/* Aligned 2026-06-02 with .lb-card / .accordion / Browse Packs card
   chrome — was a 2px green-tint border at 10px radius which read as
   "different card system" next to the parchment hairline cards and
   subtly widened the visual extent. Same hairline + radius across
   every Live Room card now. */
.tq-card{background:#FFFDF8;border:1px solid rgba(60,40,20,0.15);border-radius:var(--erapin-radius-lg, 8px);margin-bottom:16px;overflow:hidden}
.tq-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:linear-gradient(135deg,#f0f8ec,#EDE8DC);border-bottom:1px solid #1C120815}
.tq-header.preview{background:linear-gradient(135deg,#fff8e0,#EDE8DC)}
.tq-title{font-family:'IM Fell English SC',serif;font-size:15px;letter-spacing:2px;color:#2e6018;display:flex;align-items:center;gap:8px}
.tq-title.preview{color:#8B6914}
.tq-title-dot{width:8px;height:8px;background:#2e6018;border-radius:50%;flex-shrink:0}
.tq-actions{display:flex;gap:6px}
.tq-body{padding:12px 20px}
.tq-empty{padding:20px;text-align:center;color:#8B6914;font-size:11px;letter-spacing:1px;line-height:1.6}
.tq-round{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #1C120808}
.tq-round:last-child{border-bottom:none}
.tq-round-num{font-family:'IM Fell English SC',serif;font-size:16px;color:#8B1A0E;width:22px;flex-shrink:0;text-align:center;padding-top:2px}
.tq-round-img{width:48px;height:48px;min-width:48px;min-height:48px;object-fit:cover;border-radius:4px;flex-shrink:0;background:#EDE8DC}
.tq-round-body{flex:1;min-width:0}
.tq-round-name{font-family:'Playfair Display',serif;font-size:12px;color:#1C1208;line-height:1.3;margin-bottom:2px}
.tq-round-meta{font-size:9px;color:#8B6914;letter-spacing:0.5px}
.tq-round-clue{font-size:10px;color:#1C1208cc;font-style:italic;margin-top:3px;line-height:1.4}
.tq-round-edit{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.tq-round-edit input{padding:4px 8px;font-size:10px;border:1px solid #1C120820;border-radius:3px;font-family:'Courier Prime',monospace;background:#F5F0E8;margin-bottom:0}
.tq-swap{padding:12px 20px;border-top:1px solid #1C120815;background:#faf8f4}
.tq-swap-label{font-size:9px;color:#8B6914;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.tq-swap-grid{display:flex;gap:6px;flex-wrap:wrap}
.tq-swap-btn{padding:8px 14px;border:1px solid #1C120830;border-radius:6px;background:#F5F0E8;font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:1px;cursor:pointer;transition:all .15s;color:#1C1208}
.tq-swap-btn:hover{background:#EDE8DC;border-color:#8B6914}
.tq-swap-btn.active{background:#8B1A0E;color:#F5F0E8;border-color:#8B1A0E}
/* Mini calendar */
.mcal-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mcal-hdr span{font-family:'IM Fell English SC',serif;font-size:13px;letter-spacing:1px;color:#1C1208}
.mcal-nav{cursor:pointer;padding:4px 10px;font-size:14px;color:#8B6914;border:none;background:none;border-radius:4px}
.mcal-nav:hover{background:#EDE8DC}
.mcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.mcal-dow{font-family:'Courier Prime',monospace;font-size:9px;color:#8B6914;text-transform:uppercase;font-weight:bold;padding:4px 0}
.mcal-day{position:relative;padding:6px 0;border-radius:6px;font-family:'Courier Prime',monospace;font-size:12px;font-weight:bold;color:#747978;cursor:pointer;transition:background .15s}
.mcal-day:hover{background:#EDE8DC}
.mcal-day.today{border:1.5px solid #8B6914}
.mcal-day.selected{background:#F5A1A3;color:#fff}
.mcal-day .mcal-dot{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#2e6018}
.tq-save-row{padding:10px 20px;border-top:1px solid #1C120815;display:none}
.tq-save-row.visible{display:flex;gap:8px;align-items:center}

/* ══════════════════════════════════════════════════════════════
   LEADERBOARD — the hero element, prominent with status
   ══════════════════════════════════════════════════════════════ */
/* Background + border tightened 2026-06-02 to match the Browse Packs
   / Today's Quiz / Settings cards — was a white card with a 2px tint
   border + 10px radius, which read as "different card system" next to
   the parchment hairline-border cards. */
.lb-card{background:#FFFDF8;border:1px solid rgba(60,40,20,0.15);border-radius:var(--erapin-radius-lg, 8px);padding:0;margin-bottom:16px;overflow:hidden}
.lb-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 12px;border-bottom:1px solid #1C120815;flex-wrap:wrap;gap:8px}
.lb-title{font-family:'IM Fell English SC',serif;font-size:16px;letter-spacing:3px;color:#1C1208;display:flex;align-items:center;gap:8px}
.lb-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.lb-actions .btn{padding:6px 10px;font-size:9px;letter-spacing:1px;width:auto}

/* Mobile (≤700px): the leaderboard-header buttons row crams up
   against the title and the debrief CTA gets lost. Push the
   debrief button to its own line below the rest of the action
   buttons. flex order:99 + flex-basis:100% on the debrief id
   wins against the surrounding flex layout. */
@media (max-width: 700px) {
  #debrief-btn {
    order: 99;
    flex-basis: 100%;
    margin-top: 4px;
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
}
.lb-body{padding:4px 0}
.lb-empty{padding:24px 20px;text-align:center;color:#8B6914;font-size:12px;letter-spacing:1px;line-height:1.7}

/* Individual leaderboard row */
.lb-row{display:flex;align-items:center;padding:10px 20px;transition:background .1s;border-bottom:1px solid #1C120808}
.lb-row:last-child{border-bottom:none}
.lb-row:hover{background:#faf8f4}
.lb-rank{font-family:'IM Fell English SC',serif;font-size:18px;width:30px;flex-shrink:0;color:#1C1208}
.lb-rank.top3{color:#8B1A0E}
.lb-status{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-right:10px}
.lb-status.done{background:#2e6018}
.lb-status.playing{background:#8B6914;animation:pulse 1.5s ease-in-out infinite}
.lb-status.ready{background:#c44a2a40;border:1.5px solid #c44a2a}
.lb-name{flex:1;font-family:'Courier Prime',monospace;font-size:13px;color:#1C1208;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-score{font-family:'IM Fell English SC',serif;font-size:17px;color:#1C1208;margin-right:8px;min-width:50px;text-align:right}
.lb-kick{background:none;border:none;color:#c44a2a;font-size:13px;cursor:pointer;padding:2px 4px;opacity:0.3;transition:opacity .15s}
.lb-kick:hover{opacity:1}

/* (Removed 2026-05-28: .lb-summary auto-promote rules that bumped
   the dashboard leaderboard to projector-readable fonts when every
   student score had completed=true. The trigger was broken for the
   rolling-arrival classroom flow — `every()` thrashed as students
   joined in waves. The dashboard now stays at the dense working-
   tool sizing always; teachers project finals via
   /class.html?projector=true, which has its own font scale and
   was always the right surface for projection. JS trigger removed
   in teach.js at the same commit.) */

/* Status legend */
.lb-legend{display:flex;gap:14px;padding:8px 20px 12px;font-size:9px;color:#8B6914;letter-spacing:1px;border-top:1px solid #1C120810}
.lb-legend-item{display:flex;align-items:center;gap:4px}
.lb-legend-dot{width:7px;height:7px;border-radius:50%}

/* Student count */
.lb-counter{font-family:'Courier Prime',monospace;font-size:10px;color:#8B6914;letter-spacing:1px;padding:6px 20px 10px;border-top:1px solid #1C120810;text-align:center}

/* ══════════════════════════════════════════════════════════════
   QUIZ BUILDER — pushed below leaderboard, in an accordion
   ══════════════════════════════════════════════════════════════ */
.accordion{background:#fff;border:1px solid #1C120820;border-radius:8px;margin-bottom:16px;overflow:hidden}
.accordion-trigger{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;cursor:pointer;user-select:none;transition:background .15s}
.accordion-trigger:hover{background:#faf8f4}
.accordion-trigger-title{font-family:'IM Fell English SC',serif;font-size:15px;letter-spacing:3px;color:#1C1208}
.accordion-trigger-sub{font-size:9px;color:#8B6914;letter-spacing:1px;margin-top:2px}
.accordion-chev{font-size:12px;color:#8B6914;transition:transform .2s}
.accordion-chev.open{transform:rotate(90deg)}
.accordion-body{display:none;padding:0 20px 20px}
.accordion-body.open{display:block}

/* ── Tab bar ── */
.tab-bar{display:flex;gap:0;border-bottom:2px solid #1C120820;margin-bottom:16px}
.tab-btn{flex:1;padding:10px 8px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;font-family:'IM Fell English SC',serif;font-size:12px;letter-spacing:2px;color:#8B6914;cursor:pointer;transition:all .2s;text-align:center}
.tab-btn:hover{color:#1C1208;background:#EDE8DC}
.tab-btn.active{color:#8B1A0E;border-bottom-color:#8B1A0E}
.tab-content{display:none}
.tab-content.active{display:block}
.pro-badge{display:inline-block;background:var(--erapin-red);color:var(--erapin-paper);font-family:'IM Fell English SC',serif;font-size:7px;letter-spacing:1px;padding:2px 6px;border-radius:10px;vertical-align:middle;margin-left:4px}

/* ── Lesson pack grid ── */
.lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.lesson-pack-card{background:#F5F0E8;border:2px solid transparent;border-radius:8px;padding:12px;cursor:pointer;transition:all .15s;text-align:center}
.lesson-pack-card:hover{border-color:#8B691440;background:#EDE8DC}
.lesson-pack-card.active{border-color:#8B1A0E;background:#fdf6ee}
.lp-icon{font-size:22px;margin-bottom:4px}
.lp-title{font-family:'IM Fell English SC',serif;font-size:12px;letter-spacing:2px;color:#1C1208}
.lp-sub{font-size:8px;color:#8B6914;letter-spacing:1px;margin-top:2px}

/* ── Sample picker cards ── */
.sample-pick{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#F5F0E8;border:2px solid transparent;border-radius:6px;margin-bottom:5px;cursor:pointer;transition:all .15s;user-select:none}
.sample-pick:hover{background:#EDE8DC;border-color:#8B691440}
.sample-pick.selected{border-color:#8B1A0E;background:#fdf6ee}
.sample-pick.selected .sp-check{background:#8B1A0E;border-color:#8B1A0E;color:#F5F0E8}
.sp-check{width:22px;height:22px;border-radius:50%;border:2px solid #1C120840;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;transition:all .15s;color:transparent;font-weight:bold}
.sp-img{width:44px;height:44px;min-width:44px;min-height:44px;object-fit:cover;border-radius:4px;flex-shrink:0;background:#EDE8DC}
.sp-body{flex:1;min-width:0}
.sp-name{font-family:'Playfair Display',serif;font-size:12px;color:#1C1208;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-meta{font-size:8px;color:#8B6914;letter-spacing:1px;margin-top:1px}
.sp-diff{font-size:7px;letter-spacing:1px;padding:1px 5px;border-radius:2px;font-family:'Courier Prime',monospace}
.quiz-status{font-size:10px;letter-spacing:1px;text-align:center;padding:8px 0}
.quiz-status.generating{color:#8B6914}
.quiz-status.ready{color:#2e6018}
.quiz-status.error{color:#c44a2a}

/* ── AI Generation ── */
.gen-meter{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#EDE8DC;border-radius:6px;font-size:10px;color:#8B6914;letter-spacing:1px;margin-bottom:14px}
.gen-meter-bar{flex:1;height:4px;background:#1C120815;border-radius:2px;overflow:hidden}
.gen-meter-fill{height:100%;background:linear-gradient(90deg,#2e6018,#8B6914);border-radius:2px;transition:width .3s}
.gen-meter-full .gen-meter-fill{background:#c44a2a}
.upgrade-banner{background:linear-gradient(135deg,#1C1208 0%,#3a2a10 100%);color:#F5F0E8;border-radius:8px;padding:16px;text-align:center;margin-bottom:14px}
.upgrade-banner h3{font-family:'IM Fell English SC',serif;font-size:16px;letter-spacing:3px;margin-bottom:6px;color:#F5F0E8}
.upgrade-banner p{font-size:11px;color:#EDE8DC;margin-bottom:12px;line-height:1.5}
.btn-upgrade{background:var(--erapin-red);color:var(--erapin-paper);border:none;padding:12px 24px;border-radius:6px;font-family:'IM Fell English SC',serif;font-size:14px;letter-spacing:3px;cursor:pointer;transition:background .15s}
.btn-upgrade:hover{background:var(--erapin-red-deep)}

/* AI round cards grid */
.ai-rounds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
@media(max-width:700px){.ai-rounds-grid{grid-template-columns:1fr}}
/* v2-d: pack browser is the hero. #dual-path-b removed; Path A + Today's Quiz stack. */
#dual-entry > #dual-path-a{grid-column:1 / -1}
#dual-entry > #todays-quiz-card{grid-column:1 / -1}
@media(max-width:600px){
  #dual-entry{grid-template-columns:1fr !important}
  #dual-entry > #dual-path-a{order:1}
  #dual-entry > #todays-quiz-card{order:2}
}
.ai-round-card{background:#F5F0E8;border:1px solid #1C120830;border-radius:8px;padding:12px;display:flex;gap:10px;align-items:flex-start;cursor:pointer;position:relative;transition:all .15s}
.ai-round-card:hover{border-color:#8B6914}
.ai-round-card.selected{border:2px solid #2e6018;background:#f0f8ec}
.ai-round-img{width:72px;height:72px;min-width:72px;min-height:72px;object-fit:cover;border-radius:6px;flex-shrink:0;background:#EDE8DC}
.ai-round-body{flex:1;min-width:0}
.ai-round-title{font-family:'Playfair Display',serif;font-size:12px;font-style:italic;color:#1C1208;margin-bottom:3px}
.ai-round-meta{font-size:8px;letter-spacing:1px;color:#8B6914;margin-bottom:3px}

/* ── Wiki quiz cards ── */
.quiz-card{background:#F5F0E8;border:1px solid #1C120830;border-radius:6px;padding:12px;margin-bottom:8px}
.quiz-card-title{font-family:'Playfair Display',serif;font-size:13px;font-style:italic;color:#1C1208;margin-bottom:4px}

/* ── Published quizzes section ── */
.result-card{background:#EDE8DC;border:1px solid #1C120830;border-radius:8px;padding:16px;margin-bottom:10px}

/* ── Pro sidebar card ── */
.manage-sub{font-size:10px;color:#8B6914;text-decoration:underline;cursor:pointer;text-align:center;display:block;margin-top:8px}

/* ── Referral card ── */
#referral-card{margin-top:12px}

/* ── Seed bank (for wiki tab) ── */
.seed-bank{background:#F5F0E8;border:1px solid #1C120820;border-radius:6px;padding:12px;margin-top:8px}
.seed-filters{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.seed-filter{background:none;border:1px solid #1C120830;color:#8B6914;font-size:9px;letter-spacing:1px;padding:3px 8px;cursor:pointer;border-radius:3px;font-family:'Courier Prime',monospace;transition:all .15s}
.seed-filter:hover{background:#EDE8DC}
.seed-filter.active{background:#1C1208;color:#F5F0E8;border-color:#1C1208}
.seed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;max-height:240px;overflow-y:auto}
.seed-item{background:#EDE8DC;border:1px solid #1C120820;border-radius:3px;padding:6px 8px;cursor:pointer;transition:all .15s}
.seed-item:hover{background:#1C1208}
.seed-item:hover .seed-item-name{color:#F5F0E8}
.seed-item:hover .seed-item-meta{color:#8B6914}
.seed-item-name{font-size:10px;color:#1C1208;line-height:1.4;font-family:'Courier Prime',monospace}
.seed-item-meta{font-size:8px;color:#8B6914;margin-top:1px;font-style:italic}

/* ── Pre-loaded classroom card (sidebar) ── */
.preloaded-section{margin-bottom:12px}
.preloaded-label{font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:2px;color:#8B6914;margin-bottom:6px;padding:0 4px}
.preloaded-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:#fdf6ee;border:2px solid #8B1A0E40;border-radius:6px;cursor:pointer;transition:all .15s}
.preloaded-item:hover{border-color:#8B1A0E}
.preloaded-item.active{border-color:#8B1A0E;background:#fdf6ee}
.preloaded-badge{font-size:8px;color:#2e6018;letter-spacing:1px;display:block;margin-top:2px}

/* ══════════════════════════════════════════════════════════════
   FIRST-TIME TEACHER WALKTHROUGH — centered slideshow card
   5 steps, auto-playing timer ring, mock illustrations (no DOM spotlighting)
   ══════════════════════════════════════════════════════════════ */
.wt-blur{filter:blur(3px);transition:filter .4s ease}
#walkthrough-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,14,8,0.72);animation:wtFadeIn .4s ease}
@keyframes wtFadeIn{from{opacity:0}to{opacity:1}}
.wt-card{background:#F5F0E8;border:1px solid #1C120820;border-radius:12px;width:100%;max-width:480px;box-shadow:0 24px 80px rgba(0,0,0,0.45),0 0 0 1px rgba(184,150,62,0.2);overflow:hidden;animation:wtSlideUp .4s cubic-bezier(0.16,1,0.3,1);font-family:'Playfair Display',Georgia,serif}
@keyframes wtSlideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.wt-progress-bar{height:3px;background:#EDE8DC;width:100%}
.wt-progress-fill{height:100%;background:#8B6914;transition:width .5s cubic-bezier(0.16,1,0.3,1)}
.wt-body{padding:28px 32px 24px}
.wt-icon{width:52px;height:52px;border-radius:50%;background:#fff;border:1.5px solid #1C120830;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:18px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.wt-step-label{font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:3px;color:#8B6914;margin-bottom:8px}
.wt-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;color:#1C1208;line-height:1.25;margin-bottom:12px}
.wt-body-text{font-size:14px;line-height:1.65;color:#3a2810;margin-bottom:18px}
.wt-body-text strong{color:#8B1A0E;font-weight:700}
.wt-illustration{background:#fff;border:1px solid #1C120820;border-radius:8px;padding:14px 16px;margin-bottom:18px;font-size:12px;color:#5a4828;font-family:'Playfair Display',serif}
.wt-illustration-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.wt-illustration-row:last-child{margin-bottom:0}
.wt-pill{background:#EDE8DC;border:1px solid #1C120830;border-radius:20px;padding:4px 11px;font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:1.5px;color:#1C1208;white-space:nowrap;display:inline-flex;align-items:center}
.wt-pill.active{background:var(--erapin-red);color:var(--erapin-paper);border-color:var(--erapin-red-dark)}
.wt-cal-mini{display:inline-flex;align-items:flex-end;justify-content:center;width:28px;height:28px;border-radius:4px;background:#EDE8DC;border:1px solid #1C120830;font-size:11px;color:#1C1208;position:relative;font-family:'Playfair Display',serif;padding-bottom:5px}
.wt-cal-mini::after{content:'';width:4px;height:4px;background:#8B1A0E;border-radius:50%;position:absolute;bottom:3px}
.wt-cal-mini.empty::after{display:none}
.wt-cal-mini.today{background:#8B1A0E;color:#F5F0E8;border-color:#8B1A0E}
.wt-cal-mini.today::after{background:#F5F0E8}
.wt-footer{display:flex;align-items:center;justify-content:space-between;padding:0 32px 24px;gap:12px}
.wt-dots{display:flex;gap:6px}
.wt-dot{width:6px;height:6px;border-radius:50%;background:#1C120830;transition:all .3s ease;cursor:pointer}
.wt-dot.active{background:#8B1A0E;width:18px;border-radius:3px}
.wt-btn-group{display:flex;gap:10px;align-items:center}
.wt-btn{font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:2px;padding:10px 18px;border-radius:6px;cursor:pointer;transition:all .2s ease;border:1px solid #1C120830;background:transparent;color:#8B6914}
.wt-btn:hover{background:#EDE8DC;color:#1C1208}
.wt-btn-primary{background:var(--erapin-red);color:var(--erapin-paper);border-color:var(--erapin-red-dark)}
.wt-btn-primary:hover{background:var(--erapin-red-deep)}
.wt-btn-primary:hover{background:linear-gradient(135deg,#a63a20,#6e1408);color:#F5F0E8}
.wt-btn-finish{background:#1C1208;color:#F5F0E8;border-color:#1C1208}
.wt-btn-finish:hover{background:#3a2810;color:#F5F0E8}
.wt-skip{font-size:11px;color:#8B6914;cursor:pointer;text-decoration:underline;text-underline-offset:3px;background:none;border:none;font-family:'Playfair Display',serif}
.wt-skip:hover{color:#1C1208}
.wt-step-content{animation:wtStepIn .35s cubic-bezier(0.16,1,0.3,1)}
@keyframes wtStepIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.wt-confetti{font-size:28px;text-align:center;margin-bottom:12px;letter-spacing:6px;animation:wtPop .5s cubic-bezier(0.16,1,0.3,1)}
@keyframes wtPop{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}
.wt-timer-wrap{display:flex;flex-direction:column;align-items:center}
.wt-timer-ring{position:relative;width:36px;height:36px;flex-shrink:0;cursor:pointer}
.wt-timer-ring svg{transform:rotate(-90deg);width:36px;height:36px}
.wt-timer-ring .track{fill:none;stroke:#1C120830;stroke-width:2.5}
.wt-timer-ring .fill{fill:none;stroke:#8B1A0E;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:94.2;stroke-dashoffset:94.2;transition:stroke-dashoffset .1s linear}
.wt-timer-ring .pause-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#8B6914;pointer-events:none}
.wt-timer-ring:hover .pause-icon{color:#8B1A0E}
.wt-paused-badge{font-family:'IM Fell English SC',serif;font-size:8px;letter-spacing:2px;color:#8B6914;text-align:center;margin-top:2px}
@media(max-width:540px){.wt-body{padding:22px 22px 18px}.wt-footer{padding:0 22px 18px}.wt-title{font-size:19px}.wt-body-text{font-size:13px}}

/* ════════════════════════════════════════════════════════════════
   DESKTOP DASHBOARD REDESIGN — May 2026
   ════════════════════════════════════════════════════════════════
   Applies at ≥900px only — mobile keeps the existing single-column
   layout untouched. Restyles the existing #dashboard subtree to match
   the parchment + Georgia mock without changing IDs / handlers / JS.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* Page surface — parchment cream */
  body { background: #F4EFE6 !important; color: #2C2620; }
  /* Scoped to .wide so the full-bleed dashboard grid only kicks in
     after login (showDashboard adds .wide). The pre-login sign-in
     card + testimonial keep the base 680px cap so they don't stretch
     edge-to-edge on a wide desktop incognito window. */
  .container.wide { max-width: none; padding: 0; }

  /* Dashboard grid — wider sidebar (240px), no outer container padding */
  #dashboard { padding: 0 !important; max-width: none; }
  .dash-grid { grid-template-columns: 240px 1fr; gap: 0; min-height: 100vh; }

  /* Sidebar — darker cream, subtle separator */
  .dash-sidebar {
    background: #EDE5D6;
    border-right: 0.5px solid rgba(60, 40, 20, 0.15);
    padding: 1.25rem 1rem;
    max-height: 100vh;
    overflow-y: auto;
  }
  .dash-sidebar .card {
    background: #FFFDF8;
    border: 0.5px solid rgba(60, 40, 20, 0.15);
    border-radius: 6px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 1.1rem;
    box-shadow: none;
  }
  .dash-sidebar .card-title {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 0.15em;
    color: #8B7355;
    text-transform: uppercase;
    border: none;
    padding: 0;
    margin: 0 0 6px;
  }
  .dash-sidebar .card input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    border: 0.5px solid rgba(60, 40, 20, 0.2);
    border-radius: 4px;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 11px;
    background: #F4EFE6;
    color: #5C4A3A;
    box-sizing: border-box;
    margin-bottom: 6px;
  }
  .dash-sidebar .card .btn-primary {
    width: 100%;
    background: #B33A1A;
    color: #F4EFE6;
    border: none;
    padding: 8px;
    border-radius: 4px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12px;
    letter-spacing: 0.05em;
  }

  /* Sidebar branding — handled by the #sidebar-brand HTML element added
     directly inside #dash-sidebar at desktop. Hidden by default on
     mobile (where the .container .logo at the top of the page already
     plays the same role). */
  .dash-sidebar #sidebar-brand { display: block; }

  /* Stats card (teacher-stats-line) — slim, centered */
  #teacher-stats-line {
    background: #FFFDF8 !important;
    border: 0.5px solid rgba(60, 40, 20, 0.15) !important;
    border-radius: 6px !important;
    padding: 0.55rem 0.75rem !important;
    margin-bottom: 1.1rem !important;
    text-align: center !important;
    font-family: 'Courier Prime', 'Courier New', monospace !important;
    font-size: 11px !important;
    color: #5C4A3A !important;
  }

  /* Your Classrooms — card frame already, just style the rows below */
  #rooms-list { display: flex; flex-direction: column; gap: 4px; }
  #rooms-list .room-item,
  #rooms-list > div {
    border: 0.5px solid rgba(60, 40, 20, 0.15);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    background: transparent;
    cursor: pointer;
  }
  #rooms-list .room-item.active,
  #rooms-list .room-item.selected,
  #rooms-list > div.active,
  #rooms-list > div.selected {
    background: #F4EFE6;
    border-color: #B33A1A;
  }

  /* Founding Teacher badge — gold-cream box per mock */
  #founding-badge > div {
    background: #F8EDD3 !important;
    border: 0.5px solid rgba(139, 105, 20, 0.3) !important;
    border-radius: 6px !important;
    padding: 0.85rem !important;
    max-width: none !important;
    margin: 0 0 1.1rem !important;
  }

  /* Referral card — pinned to bottom of sidebar via flex */
  .dash-sidebar { display: flex; flex-direction: column; }
  #referral-card {
    margin-top: auto !important;
    background: #FFFDF8 !important;
    border: 0.5px solid rgba(60, 40, 20, 0.15) !important;
  }

  /* Main column */
  .dash-main { background: #F4EFE6; }
  #room-panel { padding: 0; }

  /* Sticky room hero — mock's top bar */
  .room-hero {
    background: #EDE8DC;
    border-bottom: 0.5px solid rgba(60, 40, 20, 0.15);
    border-radius: 0;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0;
    overflow: visible;
  }
  /* Desktop hero is a square-cornered sticky bar (border-radius:0), so the
     gradient top-bar must run edge-to-edge — undo the base rule's rounded
     top corners (added there to match the mobile card's 10px radius). */
  .room-hero::before { border-radius: 0; }
  .room-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
  .room-hero-left { display: flex; align-items: baseline; gap: 1.25rem; }
  .room-hero-label {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 0.15em;
    color: #8B7355;
    text-transform: uppercase;
    margin: 0;
  }
  .room-hero-code {
    /* Times New Roman (universally available, ships ONLY lining
       figures — no oldstyle variant in the file). After operator
       flagged Georgia's 7 was still descending; Times has a more
       predictable digit baseline across browsers. */
    font-family: 'Times New Roman', Times, serif !important;
    font-size: 32px;
    color: #B33A1A;
    letter-spacing: 0.05em;
    line-height: 1.1;
    margin-top: 2px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    /* Force lining + tabular numerals at the @media level too —
       inheritance from the base rule is the spec but some
       browsers re-read OpenType features per-rule (operator
       2026-06-02 — "still not done"). */
    font-feature-settings: 'lnum' 1, 'tnum' 1 !important;
    font-variant-numeric: lining-nums tabular-nums !important;
  }
  .room-hero-name {
    font-size: 14px;
    color: #2C2620;
    border-left: 0.5px solid rgba(60, 40, 20, 0.2);
    padding-left: 1.25rem;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .live-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(74, 124, 42, 0.1);
    color: #4A7C2A;
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .live-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #4A7C2A;
    border-radius: 50%;
  }

  /* Student-link bar inside sticky hero — tighter */
  .student-link-bar { margin-top: 8px; }
  .student-link {
    background: #F4EFE6;
    border: 0.5px solid rgba(60, 40, 20, 0.2);
    color: #5C4A3A;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 4px;
  }
  .share-btns { gap: 8px; margin-top: 8px; }
  .share-btns .btn-secondary {
    background: #2C5F2D;
    color: #F4EFE6;
    border: none;
    padding: 9px 14px;
    border-radius: 5px;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .share-btns .btn-secondary + .btn-secondary {
    background: transparent;
    border: 0.5px solid rgba(60, 40, 20, 0.3);
    color: #2C2620;
  }

  /* Classroom settings strip — restyle to mock */
  #classroom-settings-strip {
    background: #FFFDF8 !important;
    border: 0.5px solid rgba(60, 40, 20, 0.15) !important;
    border-radius: 6px !important;
    padding: 1rem 1.25rem !important;
    margin: 1.5rem 2rem !important;
  }

  /* Pack browser block — main panel card style */
  #dual-entry > #dual-path-a {
    background: #FFFDF8 !important;
    border: 0.5px solid rgba(60, 40, 20, 0.15) !important;
    border-radius: 6px !important;
    padding: 1.25rem !important;
    margin: 0 2rem 1.25rem !important;
  }
  #pack-grid {
    /* Compact grid — match the reference's 7-tile row. Tiles are now
       essentially "pill-sized" cards: name + era meta + count + one
       badge. No big icon, no description, no attribution chrome
       (operator 2026-06-02 "reduce pack size to match the pill").
       At most 7, not always 7: inside a classroom the panel is narrower and
       a forced 7 squeezed tiles to ~80px — long names ("Reconstruction")
       spilled out (operator 2026-10-12). Each track is at least 120px and at
       least a seventh of the row (gap 8px × 6 = 48px), so a wide panel keeps
       7 a row and a narrow one drops to fewer columns. */
    grid-template-columns: repeat(auto-fill, minmax(max(120px, calc((100% - 48px) / 7)), 1fr)) !important;
    gap: 8px !important;
  }
  #pack-grid .erapin-pack-card,
  #pack-grid > div {
    background: #F4EFE6 !important;
    border: 0.5px solid rgba(60, 40, 20, 0.15) !important;
    border-radius: 4px !important;
    padding: 10px 12px !important;
    min-height: 0 !important;
  }
  /* Strip the bulky tile internals — see compact directive above. */
  #pack-grid .erapin-pack-icon,
  #pack-grid .erapin-pack-desc,
  #pack-grid .erapin-pack-attribution {
    display: none !important;
  }
  #unified-input {
    background: #F4EFE6 !important;
    border: 0.5px solid rgba(60, 40, 20, 0.2) !important;
    color: #5C4A3A !important;
    font-family: 'Courier Prime', 'Courier New', monospace !important;
  }

  /* Today-quiz / pack-detail card — wraps existing tq content with mock spacing */
  #todays-quiz-card {
    background: #FFFDF8 !important;
    border: 0.5px solid rgba(74, 124, 42, 0.3) !important;
    border-radius: 6px !important;
    padding: 1rem 1.25rem !important;
    margin: 0 2rem 1.25rem !important;
  }

  /* Leaderboard card */
  #leaderboard-section,
  #lb-content,
  #leaderboard-card {
    background: #FFFDF8;
    border: 0.5px solid rgba(60, 40, 20, 0.15);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 0 2rem 1.25rem;
  }

  /* Logo / header in pre-login wrap stays aside; logged-in dashboard
     hides the original .container .logo so the sidebar header is the
     single branding mark. */
  #dashboard ~ .logo,
  #dashboard .logo { display: none; }
}

/* DESKTOP REDESIGN — phase 2: room-hero internal layout
   Match the mock's horizontal sticky-header: room code + room name +
   spacer + share buttons all in one flex row. Mobile keeps the
   stacked layout already defined elsewhere. */
@media (min-width: 900px) {
  .room-hero-top {
    flex-wrap: nowrap;
    align-items: center;
  }
  .room-hero-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    /* shrink to content so the room name sits tight against the code
       instead of being pushed into the centre by flex:1 (operator
       2026-06-02 reference match) */
    flex: 0 0 auto;
  }
  .room-hero-name {
    border-left: 0.5px solid rgba(60, 40, 20, 0.2);
    padding-left: 1.25rem;
    margin-left: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .room-hero-name .live-dot { margin-top: 4px; }
  .room-hero .share-btns { flex-shrink: 0; flex-direction: row; }

  /* Student-link bar — slim on desktop (mobile keeps the prominent
     copy-tap target) */
  .room-hero .student-link-bar { margin-top: 8px; }
  .room-hero .student-link {
    font-size: 11px;
    padding: 6px 10px;
    text-align: left;
  }

  /* Today's session bar — already inline-styled to match mock */
  #todays-session-bar { display: none; }
  #todays-session-bar.has-session { display: flex !important; }
}

/* DESKTOP REDESIGN — phase 3: pack tile colored icon block + room
   settings panel + tile sizing.
   The mock's pack tile has a large colored block at the top with the
   icon centered, then name, then meta. The existing .erapin-pack-icon
   classes already supply the tints; just upsize the block. */
@media (min-width: 900px) {
  .erapin-pack-icon {
    width: 100% !important;
    height: auto !important;
    padding: 14px !important;
    border-radius: 3px !important;
    font-size: 22px !important;
    margin-bottom: 8px !important;
    box-sizing: border-box;
  }
  .erapin-pack-card {
    background: #F4EFE6 !important;
    border-radius: 4px !important;
    padding: 10px 12px !important;
    min-height: auto !important;
  }
  .erapin-pack-name {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 12px !important;
    color: #2C2620 !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }
  .erapin-pack-desc,
  .erapin-pack-attribution {
    font-style: italic;
    font-size: 10px;
    color: #8B6914;
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .erapin-pack-footer .erapin-pack-count,
  .erapin-pack-count {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 10px;
    color: #8B7355;
  }
}

/* Pack tile purple color — added to the palette so the deterministic
   _packColorClassByHash() can cycle 4 tones (red/green/gold/purple)
   matching the desktop mock. */
.erapin-pack-icon-purple { background: rgba(120, 80, 160, 0.12); }

/* DESKTOP REDESIGN — phase 4: Today's Quiz "Published for today" panel
   Mock-style summary header + chips on TOP, full event list still
   visible below. Originally tried collapsing the detail view by
   default but that hid pack-event lists when teachers click a pack
   tile (the same #tq-body is reused for pack-detail render). The
   summary header is now purely additive context. */
@media (min-width: 900px) {
  #tq-summary-header { display: flex !important; }
  #tq-chips { display: flex !important; }
  /* Hide the redundant internal title since the summary header above
     carries it. */
  #tq-detail-view .tq-header { display: none; }
  /* DEFAULT-COLLAPSED #tq-body (the expanded event list with
     thumbnails + clue text). Just the chip row remains visible
     until the teacher taps "Show details" — restores the
     toggle-as-affordance flow per operator 2026-06-02 ("still too
     much info"). When a pack tile is clicked, openPack() adds the
     .expanded class so the pack-detail render stays visible without
     forcing the same toggle. */
  #tq-detail-view #tq-body { display: none; }
  #tq-detail-view.expanded #tq-body { display: block; }
  /* Restore the toggle now that it has a real role (collapse / expand
     the daily preview). Earlier it was hidden because details were
     always shown — that workaround is now obsolete. */
  #tq-details-toggle { display: flex !important; }
  #tq-details-toggle-icon { display: inline !important; }

  /* Pack browser footer — already inline-styled */
  #pack-browser-footer { display: flex !important; }
}

/* DESKTOP REDESIGN — phase 5: leaderboard row visual polish per mock.
   Mock has clean rank.dot.name.score columns with #1 in deep red, every
   row sharing the same baseline border, monospace numerics. */
@media (min-width: 900px) {
  .lb-row {
    padding: 8px 0 !important;
    border-bottom: 0.5px solid rgba(60, 40, 20, 0.05) !important;
  }
  .lb-rank {
    font-family: 'Courier Prime', 'Courier New', monospace !important;
    font-size: 13px !important;
    color: #8B7355 !important;
    width: 28px !important;
    text-align: left;
  }
  .lb-rank.top3 { color: #B33A1A !important; }
  .lb-name {
    font-family: 'Courier Prime', 'Courier New', monospace !important;
    font-size: 13px !important;
    color: #2C2620 !important;
    margin-left: 6px;
  }
  .lb-score {
    font-family: 'Courier Prime', 'Courier New', monospace !important;
    font-size: 13px !important;
    color: #2C2620 !important;
  }
  .lb-counter {
    text-align: center;
    padding-top: 8px;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 10px;
    color: #8B7355;
  }
}

/* ════════════════════════════════════════════════════════════
   PACK BROWSER · LENS FILTERS (operator 2026-06-02, ref bundle)

   New filter pill strip with personal lenses (Favourites, Recent,
   My packs) + content kinds (All, Timeline) — layered on top of
   the existing country/all/contribute logic. Per-filter explainer
   blurb + empty states. Reference: rh-live.jsx PackBrowser.

   "Lenses" here = personal slices the teacher cares about (their
   starred packs, ones they've used recently, ones they built).
   They sit ABOVE the content-kind filters so the teacher can
   answer "what's mine?" without scrolling through the whole
   network catalog.
   ════════════════════════════════════════════════════════════ */

/* Pill strip wrapper — appears once renderLensChips() injects the
   chip list (display:flex applied via inline style, the @media
   gate below tightens spacing on desktop). */
#pack-filter-chips {
  display: none;
}
#pack-filter-chips.lens-active {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 4px 0 12px;
}

/* Individual pill — Courier mono label + emoji icon + count
   pill. Mirrors .rh-packfilter from the reference but stays inside
   teach.css's existing token vocabulary so it harmonises with the
   surrounding chrome. */
.lens-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Courier Prime','Courier New',monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #5C4A3A;
  background: transparent;
  border: 0.5px solid rgba(60,40,20,0.15);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.lens-pill:hover { background: #F4EFE6; }
.lens-pill .ic   { font-size: 11px; opacity: 0.85; }
.lens-pill .ct   { font-size: 9px;  opacity: 0.55; }
.lens-pill.active {
  background: #B33A1A;
  color: #FFFDF8;
  border-color: #B33A1A;
}
.lens-pill.active .ct { opacity: 0.8; }

/* Pro-tools buttons (Timeline / Print) in the pack publish modal — promoted
   from tiny pills to labeled two-up buttons. Parchment + amber "Pro gold"
   border so they read as Pro without competing with the red Publish CTA. */
/* In-page pack detail — rendered BELOW the pack grid (grid + lens stay visible
   on top so switching packs is one click). Full-width single-column card like
   the "Published for today" card. */
.pack-detail-inline {
  background: #FFFDF8;
  border: 1px solid rgba(60, 40, 20, 0.15);
  border-radius: var(--erapin-radius-lg, 8px);
  margin-top: 12px;
  overflow: visible;
  scroll-margin-top: 12px;
}

.pro-tool-btn {
  flex: 1; min-width: 200px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--erapin-paper-aged, #EDE8DC);
  border: 1px solid rgba(139, 105, 20, 0.35);
  border-radius: 6px;
  text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pro-tool-btn:hover { background: #F4EFE6; border-color: var(--erapin-amber, #8B6914); }
.pro-tool-btn.locked { opacity: 0.75; }
.pro-tool-btn .pt-ic { font-size: 18px; line-height: 1; }
.pro-tool-btn .pt-label { font-family: 'Courier Prime', monospace; font-size: 11px; letter-spacing: 0.5px; color: var(--erapin-ink, #1C1208); }
.pro-tool-btn .pt-desc { font-family: 'Courier Prime', monospace; font-size: 9px; color: var(--erapin-ink-muted, #8B7355); }

/* Per-filter explainer blurb. Hidden by default; setLensFilter()
   populates + shows when a non-default lens is active. */
#pack-filter-blurb {
  display: none;
  font-family: 'Courier Prime','Courier New',monospace;
  font-size: 10.5px;
  color: #5C4A3A;
  line-height: 1.55;
  background: #F4EFE6;
  border-radius: 4px;
  padding: 9px 12px;
  margin-bottom: 12px;
}
#pack-filter-blurb.has-blurb { display: block; }

/* Lens-specific empty state — replaces the generic "No packs match"
   when a lens (e.g. Favourites) has nothing yet. Each lens supplies
   its own hint via renderPackGrid's empty branch. */
#pack-grid .lens-empty {
  grid-column: 1 / -1;
  font-family: 'Courier Prime','Courier New',monospace;
  font-size: 11px;
  color: #8B7355;
  line-height: 1.6;
  padding: 18px 4px;
  text-align: center;
}

/* Star toggle on each pack card. Floats top-right of the card,
   overlays the icon block. Tap → toggles favourite (localStorage
   for now, server-persisted in a later phase). */
.erapin-pack-card { position: relative; }
.pack-star {
  position: absolute;
  top: 7px;
  right: 8px;
  background: none;
  border: none;
  padding: 2px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  color: rgba(60,40,20,0.32);
  transition: color .12s, transform .08s;
}
.pack-star:hover { transform: scale(1.15); }
.pack-star.on    { color: #8B6914; }   /* gold when starred */
/* Keep the card's first line clear of the star: the tag row, or the name when a pack
   has no tags. Tags ran under it ("AP US · APUSH ☆" — operator 2026-10-12). */
.erapin-pack-card .pack-tags { padding-right: 20px; }
.erapin-pack-card .pack-tags:empty { padding-right: 0; }
.erapin-pack-card .pack-tags:empty + .erapin-pack-name { padding-right: 20px; }

/* New pack badges (Timeline / Custom / Recent / Published-today).
   Sit below the pack name as a wrapping row. Variant colours
   mirror the reference (timeline=gold, custom=green, recent=neutral,
   published=red). Distinct from the existing curriculum_badges
   row above (which uses .erapin-label). */
.pack-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.pack-badge {
  display: inline-block;
  font-family: 'Courier Prime','Courier New',monospace;
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.pack-badge.timeline  { background: rgba(139,105,20,0.12); color: #8B6914; }
.pack-badge.custom    { background: rgba(46,96,24,0.12);   color: #4A7C2A; }
.pack-badge.recent    { background: rgba(60,40,20,0.06);   color: #5C4A3A; }
.pack-badge.published { background: rgba(179,58,26,0.12);  color: #B33A1A; }

/* ════════════════════════════════════════════════════════════
   LIVE ROOM REFERENCE-MATCH (operator 2026-06-02)
   Collapses the room into header → student-join → pack browser →
   leaderboard, matching the rh-live.jsx reference. Three chrome
   surfaces hidden here in one place so the revert is a single
   CSS deletion:
   • Unpublished hero card (the "🎭 Nothing published" hero) — the
     pack tile badge + leaderboard empty state already cover this.
   • Pack-browser footer ("Showing 4 of 23 / Load 8 more / Browse
     all / + Create pack / Pending contributions / Open flags /
     View calendar") — the BROWSE ALL link in the panel header is
     the single escape hatch to the full catalog.
   ════════════════════════════════════════════════════════════ */
#unpublished-hero     { display: none !important; }
#pack-browser-footer  { display: none !important; }
/* #pack-browse-all-row visibility is JS-controlled — hidden for non-
   default lenses, shown under "All" with the Load-more / Browse-all
   chrome (operator 2026-06-02 "no load more option"). Don't force-
   hide it here. */

/* Leaderboard hidden by default in Live Room — empty "No scores
   yet today" card was filler chrome before students play. The
   leaderboard fetch (loadLeaderboard) reveals .lb-card the moment
   the first score lands. Operator 2026-06-02. */
.lb-card { display: none; }
.lb-card.has-scores { display: block; }

/* ════════════════════════════════════════════════════════════
   LIVE LEADERBOARD · STATUS PILLS + CR BADGE
   (operator 2026-06-02, bucket B)

   Replaces the inline "(n/m)" indicator inside the player name
   with a proper status pill — dot + label — sat between the
   name and the score columns. Three classes: .done / .playing
   / .ready (matches the legend at the top of the leaderboard).

   The naked .lb-status dot already exists for the legend at the
   top of the panel — we reuse it inside the pill so the dot
   colour stays consistent.
   ════════════════════════════════════════════════════════════ */

/* Status pill = dot + label, sits in the row between name and score.
   Fixed min-width so DONE / Round 3/5 / READY all reserve the same
   horizontal slot — keeps the score column lined up across rows. */
.lb-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-family: 'Courier Prime','Courier New',monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8B7355;
  background: transparent;
  border-radius: 999px;
  padding: 3px 9px;
  margin-right: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 88px;
}

/* First-initial avatar in each leaderboard row. Cream parchment
   circle with a deep-red letter (matches the reference rh-avatar
   token). Width is fixed so the name column starts at the same X
   on every row. */
.lb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F8EDD3;
  border: 0.5px solid rgba(139,105,20,0.30);
  color: #8B1A0E;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 8px;
}
.lb-status-pill .lb-status {
  width: 7px;
  height: 7px;
  margin: 0;            /* override naked .lb-status margin-right */
  flex-shrink: 0;
}
.lb-status-pill.done {
  color: #4A7C2A;
  background: rgba(74,124,42,0.08);
}
.lb-status-pill.playing {
  color: #BA7517;
  background: rgba(186,117,23,0.08);
}
.lb-status-pill.ready {
  color: #B33A1A;
  background: rgba(179,58,26,0.06);
}

/* Class Rep badge — surfaces next to the student name in the row
   so a teacher scanning the board sees who picked today's session.
   Replaces the inline-styled span the row builder used to inject. */
.lb-cr {
  display: inline-block;
  font-family: 'Courier Prime','Courier New',monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #F4EFE6;
  background: #B33A1A;
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: 1px;
}