:root{
  color-scheme: light;

  /* Colour tokens — matched to PostLearn's yellow/black palette (its own
     :root token block in static/css/styles.css), the one token category the
     Design Constitution lets vary per app. Semantic/neutral colours are
     copied verbatim from the family constitution, same as PostLearn does. */
  --primary-color:#111111;
  --primary-hover:#000000;
  --secondary-color:#95a5a6;
  --secondary-hover:#7f8c8d;
  --success-color:#34A853;
  --success-hover:#2e8a4a;
  --danger-color:#e74c3c;
  --danger-hover:#c0392b;
  --text-dark:#2c3e50;
  --text-light:#34495e;
  --text-muted:#8b929a;
  --input-bg:#ecf0f1;
  --container-bg-color:#ffffff;
  --main-bg-color:#f0f2f5;
  --gradient-start:#f8eeb5;
  --gradient-end:#f4dc72;
  --border-soft:#d8c878;
  --border-input:#ccc;
  --font-sans:'Google Sans','Roboto Flex','Inter','Roboto','Segoe UI',sans-serif;

  /* Radius */
  --radius-input:8px;
  --radius-button:8px;
  --radius-card:16px;
  --radius-modal:18px;
  --radius-pill:999px;

  /* Spacing scale — the only spacing values used anywhere in this file */
  --space-xs:6px;
  --space-sm:10px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;

  /* Sizing */
  --control-height:44px;
  --width-app-max:960px;
  --width-wizard-max:900px;
  --width-landing-max:1320px;
  --width-legal-max:860px;

  /* Shadows */
  --shadow-card:0 12px 36px rgba(0,0,0,.08);
  --shadow-card-soft:0 4px 20px rgba(0,0,0,.06);
  --shadow-hover-lift:0 6px 14px rgba(0,0,0,.08);
  --shadow-modal:0 28px 80px rgba(15,23,42,.28);

  /* Typography */
  --font-size-page-title:2rem;
  --font-size-section:1.5rem;
  --font-size-card-title:1.125rem;
  --font-size-body:1rem;
  --font-size-control:1em;
  --font-size-helper:0.875rem;

  /* Motion */
  --transition-fast:0.2s ease;
  --transition-lift:0.15s ease;

  /* Z-index scale */
  --z-dropdown:10;
  --z-sticky-nav:100;
  --z-modal:9999;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text-dark);
  background:linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  background-attachment:fixed;
}
a{color:inherit}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;font-family:var(--font-sans)}

.hidden,[hidden]{display:none!important}

/* ---------- Layout shell ---------- */

.site-shell{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  padding:var(--space-lg) clamp(var(--space-md), 4vw, var(--space-2xl));
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
  text-decoration:none;
  font-weight:800;
  letter-spacing:normal;
  color:var(--text-dark);
}
.brand-text{
  font-size:1.5rem;
}

.top-nav,
nav{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  flex-wrap:wrap;
}
.top-nav a.legal-link,
.legal-link{
  border:0;
  background:transparent;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  font:inherit;
  padding:0;
}

main{
  flex:1;
  width:100%;
  padding:var(--space-xl) 0 var(--space-2xl);
}
.app-main{ width:100%; }

.muted{ color:var(--text-muted); }

/* ---------- Typography ---------- */

h1,h2,h3{
  color:var(--text-dark);
  line-height:1.15;
  margin-top:0;
}
h1{ font-size:var(--font-size-page-title); margin-bottom:var(--space-sm); }
h2{ font-size:var(--font-size-section); margin-bottom:var(--space-sm); }
h3{ font-size:var(--font-size-card-title); margin-bottom:var(--space-sm); }
p{ line-height:1.6; margin-top:0; font-size:var(--font-size-body); }

.eyebrow,
.badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  color:var(--primary-color);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:var(--font-size-helper);
}

/* ---------- Primary card container (.app-container) ---------- */

.app-container,
.panel,
.card,
.wizard-page,
.session-shell{
  background:var(--container-bg-color);
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:var(--space-lg);
  max-width:var(--width-app-max);
  margin:30px auto;
}

.card-soft,
.legal-card{
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card-soft);
}

/* Secondary/full-width sections inside a page that shouldn't re-apply the
   heavy card shadow (e.g. dashboard sub-panels) */
.dashboard-block{
  padding:var(--space-md);
  border-radius:var(--radius-card);
  border:1px solid var(--border-soft);
  background:var(--main-bg-color);
  display:grid;
  gap:var(--space-md);
}

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

.btn{
  background:var(--primary-color);
  color:#fff;
  font-weight:bold;
  font-size:var(--font-size-control);
  border:none;
  border-radius:var(--radius-button);
  padding:15px 30px;
  min-height:var(--control-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-xs);
  cursor:pointer;
  text-decoration:none;
  transition:background-color var(--transition-fast);
}
.btn:hover:not([disabled]){ background:var(--primary-hover); }
.btn[disabled]{ background:#bdc3c7; cursor:not-allowed; }

.btn.btn-secondary{
  background:var(--secondary-color);
}
.btn.btn-secondary:hover:not([disabled]){ background:var(--secondary-hover); }

.btn.btn-danger{
  background:var(--danger-color);
}
.btn.btn-danger:hover:not([disabled]){ background:var(--danger-hover); }

.btn.small{
  padding:8px 16px;
  min-height:auto;
  font-size:var(--font-size-helper);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid rgba(31,103,255,.35);
  outline-offset:2px;
}

.text-link{
  border:0;
  background:transparent;
  color:var(--primary-color);
  text-decoration:underline;
  padding:0;
  min-height:auto;
  cursor:pointer;
}

/* Button group + selectable toggle */
.button-group{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
  align-items:stretch;
  width:100%;
}
.selectable-btn{
  background:var(--input-bg);
  color:var(--text-light);
  border:2px solid #bdc3c7;
  border-radius:var(--radius-button);
  padding:var(--space-lg);
  text-align:center;
  cursor:pointer;
  transition:all var(--transition-fast);
}
.selectable-btn.checked{
  background:var(--primary-color);
  color:#fff;
  border-color:var(--primary-hover);
}

/* Locked-down mode toggle — a plain on/off button (not a 3-way mode picker),
   folding fullscreen enforcement into the same flag. See student_session.js
   for what turns on when this is set. */
.lockdown-label{ display:grid; gap:var(--space-xs); justify-items:center; text-align:center; margin-top:var(--space-xs); }
.lockdown-toggle-btn{ min-width:120px; }
.lockdown-toggle-hint{ max-width:520px; font-size:var(--font-size-helper); font-weight:400; }

/* Fixed-position warning shown to a student in a locked-down session when a
   violation (exit fullscreen, copy/paste, right-click, suspected
   split-screen) is detected — non-blocking, but hard to miss. */
.lockdown-banner{
  position:fixed;
  top:var(--space-md);
  left:50%;
  transform:translateX(-50%);
  z-index:var(--z-modal);
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  background:#1e293b;
  color:#f8fafc;
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-modal);
  font-weight:600;
  font-size:var(--font-size-helper);
  max-width:min(560px, calc(100vw - 32px));
}

/* Loose action rows (still used for grouping several .btns together) */
.session-actions,
.step-actions,
.review-export-actions,
.classroom-schedule-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-md);
  align-items:center;
  justify-content:center;
}
.step-actions{ justify-content:center; margin-top:var(--space-md); }
#session-step .session-actions{ justify-content:center; }

/* ---------- Inputs ---------- */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input:not([type]),
input[type="date"],
input[type="time"],
textarea,
select{
  width:100%;
  padding:15px;
  border:1px solid var(--border-input);
  border-radius:var(--radius-input);
  background:var(--input-bg);
  font-size:var(--font-size-body);
  font-family:var(--font-sans);
  color:var(--text-dark);
}
input[type="date"],input[type="time"]{ min-height:48px; padding:10px 12px; text-align:left; }
input::placeholder,
textarea::placeholder{
  color:var(--text-muted);
}
textarea{
  min-height:120px;
  resize:vertical;
}
label{
  display:block;
  font-size:var(--font-size-helper);
  color:var(--text-light);
  font-weight:600;
}
label input,
label textarea,
label select{
  margin-top:var(--space-xs);
  font-weight:400;
}

.stacked-form{
  display:grid;
  gap:var(--space-md);
}
.card-form{
  display:flex;
  gap:var(--space-sm);
  align-items:center;
  flex-wrap:wrap;
}

/* ---------- Status box ---------- */

.status-box{
  margin-top:var(--space-md);
  padding:var(--space-md);
  border-radius:var(--radius-input);
  text-align:center;
  font-size:1.1em;
}
.status-box.error{
  background:#fdedec;
  border:1px solid #fadbd8;
  color:var(--danger-hover);
}

/* ---------- Confirmation grid ---------- */

.confirmation-grid{
  overflow-y:auto;
  max-height:80vh;
  padding:0 var(--space-sm);
  margin:0 calc(var(--space-sm) * -1);
  scrollbar-width:none;
}
.confirmation-grid::-webkit-scrollbar{ display:none; }
.confirm-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 5px;
  border-bottom:1px solid var(--border-soft);
  gap:var(--space-md);
}
.confirm-row:last-child{ border-bottom:0; }
.confirm-row p{
  margin:0;
  font-size:1.1em;
  color:var(--text-dark);
  flex:1;
  text-align:left;
}
.confirm-row strong{ color:var(--text-light); }
.edit-btn{
  background:none;
  border:none;
  color:var(--primary-color);
  font-weight:bold;
  font-size:0.9em;
  text-decoration:underline;
  padding:5px;
  cursor:pointer;
  flex-shrink:0;
}

/* ---------- Modal ---------- */

.modal-overlay,
.modal{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  background:rgba(17,24,39,.42);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-lg);
}
.modal-card{
  background:#fff;
  border-radius:var(--radius-modal);
  box-shadow:var(--shadow-modal);
  padding:var(--space-lg);
  max-height:88vh;
  overflow-y:auto;
  width:min(720px, 100%);
  position:relative;
}
.modal-card.modal-narrow{ width:min(480px, 100%); }
.close{
  position:absolute;
  top:var(--space-md);
  right:var(--space-md);
  border-radius:var(--radius-pill);
  width:38px;
  height:38px;
  padding:0;
  border:0;
  background:#eef3f8;
  color:var(--text-dark);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background var(--transition-fast);
}
.close:hover{ background:#dbe6f2; }

.confirm-modal-title{
  margin:0 0 10px;
  font-size:1.5rem;
  font-weight:700;
  color:var(--text-dark);
}
.confirm-modal-copy{
  margin:0;
  color:var(--text-light);
  font-size:1.05rem;
  line-height:1.6;
}
.confirm-modal-actions{
  display:flex;
  justify-content:center;
  gap:var(--space-sm);
  margin-top:var(--space-lg);
}
.confirm-modal-actions .btn{ min-width:160px; }

/* ---------- Loading overlay ---------- */
/* Full-screen "this is genuinely working" cover for waits with no visible UI
   change otherwise (e.g. Slides import fetching thumbnails slide-by-slide) —
   a lighter tint than the decision-modal backdrop since nothing needs a
   choice, just a moment. */
.loading-overlay{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-lg);
  background:rgba(248,238,181,.88);
}
.loading-card{
  display:grid;
  justify-items:center;
  gap:var(--space-sm);
  width:min(360px, 100%);
  padding:var(--space-lg);
  border-radius:var(--radius-card);
  background:#fff;
  box-shadow:var(--shadow-modal);
  text-align:center;
}
.loading-spinner{
  width:42px;
  height:42px;
  border:5px solid #d7d9e2;
  border-top-color:var(--primary-color);
  border-radius:var(--radius-pill);
  animation:postdeck-spin .8s linear infinite;
}
@keyframes postdeck-spin{ to{ transform:rotate(360deg); } }

/* ---------- Table ---------- */

.table-scroll{ overflow-x:auto; }
table.data-table{
  width:100%;
  border-collapse:collapse;
}
.data-table th{
  font-size:var(--font-size-helper);
  font-weight:600;
  text-align:left;
  color:var(--text-light);
  padding:var(--space-sm) var(--space-md);
  border-bottom:2px solid var(--border-soft);
}
.data-table td{
  font-size:var(--font-size-body);
  padding:var(--space-sm) var(--space-md);
  border-bottom:1px solid var(--border-soft);
  color:var(--text-dark);
}
.data-table tr:hover td{ background:var(--input-bg); }

/* ---------- Feature card ---------- */

.feature-box{
  background:#fff;
  padding:var(--space-md) var(--space-lg);
  font-size:1.1rem;
  border-radius:10px;
  box-shadow:var(--shadow-card-soft);
  transition:transform var(--transition-lift), box-shadow var(--transition-lift);
  display:grid;
  gap:var(--space-xs);
}
.feature-box:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover-lift);
}
.feature-box strong{ font-size:1.02rem; }

/* ---------- Landing hero ---------- */

.landing-content{
  max-width:var(--width-landing-max);
  margin:0 auto;
  padding:var(--space-2xl) var(--space-xl);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:50px;
}
.landing-left,
.hero-copy{
  flex:1 1 480px;
  display:grid;
  gap:var(--space-md);
  align-content:center;
  padding-right:var(--space-xl);
}
.landing-right{
  flex:1 1 480px;
  display:grid;
  gap:var(--space-md);
  align-content:start;
  padding-left:var(--space-xl);
}
.landing-copy{ font-size:1.1rem; }
.hero-tagline{ font-size:1.5rem; font-weight:400; text-align:center; }

/* Landing page text is sharp black, distinct from the app's default
   dark-slate body text, per the Docinator sizes/styles reference. */
.landing-content,
.landing-content h1,
.landing-content h2,
.landing-content h3{ color:#000; }
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-sm);
  margin-top:var(--space-xs);
}

/* Landing page logo — exactly 350x350 on desktop per the Design
   Constitution's Landing hero spec, scaling down responsively below that. */
.landing-logo{
  display:block;
  width:350px;
  height:350px;
  max-width:100%;
  object-fit:contain;
  margin:0 auto;
}
.features-header{
  font-size:1.8rem;
  font-weight:600;
  margin-bottom:var(--space-sm);
  text-align:center;
  color:var(--text-dark);
}
.join-main{
  min-height:calc(100vh - 150px);
  display:grid;
  place-items:center;
}
.join-card{
  width:min(520px, calc(100vw - 40px));
  display:grid;
  gap:var(--space-md);
  background:var(--container-bg-color);
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:var(--space-lg);
  margin:0 auto;
}
.join-card input{
  height:64px;
  text-align:center;
  font-size:1.35rem;
  font-weight:700;
}
.join-card .btn{ height:64px; font-size:1.15rem; }

/* ---------- Legal footer / pages ---------- */

.legal-footer{
  text-align:center;
  color:var(--text-muted);
  font-size:0.75rem;
  padding:16px 40px 24px;
}
.legal-footer a{
  color:var(--primary-color);
  text-decoration:none;
  margin:0 6px;
}
.legal-footer a:hover{ text-decoration:underline; }

.legal-page-shell{ min-height:100svh; }
.legal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 40px;
}
.legal-container{
  max-width:var(--width-legal-max);
  margin:0 auto 40px;
  padding:40px 44px 48px;
  background:var(--container-bg-color);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card-soft);
}
.legal-container h1{ font-size:2rem; }
.legal-container h2{ font-size:1.25rem; margin-top:var(--space-xl); }
.legal-container h3{ font-size:1.05rem; }
.legal-container p,
.legal-container li{ font-size:1rem; line-height:1.6; }
.legal-container .updated{ font-size:var(--font-size-helper); color:var(--text-light); margin-top:-4px; }
.legal-back-link{
  font-size:var(--font-size-helper);
  color:var(--primary-color);
  text-decoration:none;
}
.legal-back-link:hover{ text-decoration:underline; }

/* ---------- Wizard ---------- */

.wizard{
  list-style:none;
  margin:0;
  padding:0;
  display:block;
}
.wizard-page,
.wizard li{
  display:none;
  width:100%;
  padding:var(--space-md) var(--space-sm);
}
.wizard-page.active,
.wizard li:not(.hidden){
  display:block;
  animation:fadeIn .5s;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.wizard-page.center-content{
  max-width:var(--width-wizard-max);
  margin:0 auto;
}

/* Vertically center the single wizard/step card within the viewport for
   short content; long content (e.g. many preset-activity slides) simply
   pushes margin-top/bottom back to 0 rather than clipping, so the page
   falls back to normal top-aligned scroll instead of being cut off. */
.mode-main,
.dashboard-main{
  display:flex;
  flex-direction:column;
}
.mode-main > .panel,
.dashboard-main > .panel{
  /* Horizontal auto margins on a flex item (main's cross axis here) opt the
     item out of the default stretch behaviour, so without an explicit width
     it shrinks to fit its content instead of filling up to max-width like it
     did as a plain block — width:100% restores that. */
  width:100%;
  margin-top:auto;
  margin-bottom:auto;
}

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

.dashboard-header-actions{ margin-left:auto; }
.dashboard-shell{ display:grid; gap:var(--space-md); }
.dashboard-shell.auth-pending{ visibility:hidden; }
/* Preset Slide Activities is media-heavy (slide thumbnails) and benefits
   from more width than the rest of the wizard's form steps — ~90vw, i.e.
   roughly a 5% gutter on either side, toggled on by dashboard.js. */
.dashboard-shell.wide-step{ max-width:90vw; }
.dashboard-heading{ display:grid; gap:var(--space-xs); justify-items:center; text-align:center; }
.dashboard-step-description{ white-space:pre-line; text-align:center; }
#session-step{ display:grid; gap:var(--space-md); }

.session-list{ display:grid; gap:var(--space-sm); }
.session-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-md);
  padding:var(--space-md);
  border-radius:var(--radius-input);
  border:1px solid var(--border-soft);
  background:#fff;
}
.session-row-main{
  display:grid;
  gap:var(--space-xs);
  cursor:pointer;
}
.session-row-main strong{ font-size:1.1rem; color:var(--text-dark); display:flex; align-items:center; gap:var(--space-sm); }
.session-row-archived{ opacity:0.68; background:var(--main-bg-color); }
.archived-badge{
  font-size:0.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text-light);
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);
  padding:2px 10px;
}
.session-archive-toggle{ margin-top:var(--space-sm); }

.preset-slides-list{ display:grid; gap:var(--space-lg); margin-top:var(--space-sm); }
.preset-slide-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:var(--space-lg);
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-card);
  padding:var(--space-lg);
  box-shadow:var(--shadow-card-soft);
  align-items:center;
}
@media (max-width: 768px){
  .preset-slide-row{ grid-template-columns:1fr; gap:var(--space-md); }
}
.slide-preview-box{ width:100%; }

/* ---------- Slide stage: renders the real imported Slide design (an <img> of
   the actual Google Slides page). Activity controls sit outside this stage so
   the projected slide remains unobstructed. Falls back
   to a plain title/body card only when a slide has no image (manually-created
   slides, or an import that couldn't fetch a thumbnail). Reused at small size
   (dashboard preset-editor preview) and large size (teacher live view and
   projector) via the .slide-stage-large modifier. Student devices never
   receive slide artwork. ---------- */

.slide-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:linear-gradient(135deg, #1e293b, #0f172a);
  border-radius:var(--radius-input);
  overflow:hidden;
}
.slide-stage-large{ border-radius:var(--radius-modal); }
.slide-stage-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#0f172a;
}
.slide-stage-fallback{
  position:absolute;
  inset:0;
  padding:5% 7%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#f8fafc;
}
.slide-stage-fallback h4,
.slide-stage-fallback h2{
  font-size:clamp(1rem, 2.2vw, 1.5rem);
  margin:0 0 4% 0;
  color:#38bdf8;
  font-weight:800;
  line-height:1.2;
}
.slide-stage-large .slide-stage-fallback h4,
.slide-stage-large .slide-stage-fallback h2{
  font-size:clamp(1.8rem, 4vw, 3rem);
  font-weight:900;
}
.slide-stage-fallback p{
  font-size:clamp(0.7rem, 1.4vw, 0.95rem);
  margin:0;
  color:#cbd5e1;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:4;
  line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.slide-stage-large .slide-stage-fallback p{
  font-size:clamp(1.1rem, 2.2vw, 1.6rem);
  -webkit-line-clamp:6;
  line-clamp:6;
}
.slide-num{
  position:absolute;
  bottom:12px;
  right:12px;
  z-index:2;
  font-size:0.75rem;
  font-weight:600;
  color:#f8fafc;
  background:rgba(15,23,42,.65);
  padding:2px 8px;
  border-radius:var(--radius-pill);
}
.preset-controls-panel{ display:flex; flex-direction:column; gap:var(--space-md); align-items:center; text-align:center; }
.preset-activities-container{ display:grid; gap:var(--space-lg); width:100%; }
.preset-activity-row{
  display:grid;
  gap:var(--space-sm);
  justify-items:center;
  padding-bottom:var(--space-md);
  border-bottom:1px solid var(--border-soft);
}
.preset-activity-row:last-child{ border-bottom:none; padding-bottom:0; }

/* Each label + control pair gets its own gap so a focused/checked button
   never sits flush against the label text above it. Centered so the prompt/
   type/options controls read as a focused stack rather than hugging the
   left edge of a much wider column. */
.preset-field{ display:grid; gap:var(--space-sm); justify-items:center; text-align:center; width:100%; }
.preset-field-label{ font-size:var(--font-size-helper); color:var(--text-light); font-weight:600; }
.preset-field input,
.preset-field .cycle-btn{ width:min(480px, 100%); }

/* Click-to-cycle control (activity type, timer) — a single shorter button
   instead of a row of options; .checked (via .selectable-btn) marks it as
   set to something other than the first/"unset" entry. */
.cycle-btn{
  min-height:32px;
  min-width:160px;
  width:max-content;
  padding:var(--space-xs) var(--space-md);
}

.preset-options-container{ display:grid; gap:var(--space-sm); justify-items:center; }
.preset-options-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-sm);
  width:min(480px, 100%);
  margin:0 auto;
}
.preset-option-input{ text-align:center; }

.preset-no-prompt-label{
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  font-size:var(--font-size-helper);
  color:var(--text-light);
  max-width:480px;
  text-align:left;
}
.preset-no-prompt-label input{ flex:0 0 auto; }

/* Wraps a stepper's cycle-btn so the small red reset badge can overlap its
   top-right corner without affecting the button's own layout/width. */
.stepper-wrap{ position:relative; display:inline-block; }
.stepper-reset{
  position:absolute;
  top:-8px;
  right:-8px;
  width:20px;
  height:20px;
  min-height:0;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--danger-color);
  color:#fff;
  font-size:0.75rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.stepper-reset:hover{ background:var(--danger-hover); }

.picker-panel{
  display:grid;
  gap:var(--space-sm);
  justify-items:center;
  text-align:center;
  padding:var(--space-md);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-input);
  background:#fff;
  width:min(480px, 100%);
  margin:0 auto;
}
.slides-link-label,
.teacher-email-form label{
  display:grid;
  gap:var(--space-xs);
  width:100%;
  text-align:left;
  font-weight:700;
}
.slides-link-label input,
.teacher-email-form input{ width:100%; }
.slides-link-help{ font-size:.9rem; margin:0; }
.auth-divider{ color:var(--text-muted); font-weight:700; }

.classroom-tools{
  display:grid;
  gap:var(--space-sm);
  padding:var(--space-md);
  border-radius:var(--radius-card);
  border:1px solid var(--border-soft);
  background:var(--main-bg-color);
}

/* ---------- Live / teacher session ---------- */

.live-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-md);
}
.live-heading-actions{
  display:flex;
  gap:var(--space-sm);
  align-items:center;
}
.live-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-md);
  align-items:center;
  color:var(--text-muted);
  margin-bottom:var(--space-md);
}
.live-meta strong{ color:var(--text-dark); }
.pin-value{ font-size:1.15rem; color:var(--primary-color); }
.link-value{ color:var(--text-dark); }
.current-slide-card{ border:2px solid var(--border-soft); box-shadow:var(--shadow-card-soft); }

.transport-controls-group{ display:flex; gap:var(--space-xs); align-items:center; }
.thumbnail-strip-label{ font-size:var(--font-size-helper); font-weight:bold; margin-bottom:var(--space-xs); }

.dashboard-tab-content{ display:grid; gap:var(--space-md); }
.tab-panel-header{ display:flex; justify-content:space-between; align-items:center; }
.board-responses-view{ min-height:200px; }
.board-responses-empty{ text-align:center; padding:var(--space-2xl) 0; }
.launch-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:var(--space-md); }
.scroll-list-sm{ max-height:180px; overflow-y:auto; }
.scroll-list-md{ max-height:250px; overflow-y:auto; }
@media (max-width: 640px){
  .launch-grid{ grid-template-columns:1fr; }
}

.session-main{
  padding-left:clamp(var(--space-md), 4vw, var(--space-2xl));
  padding-right:clamp(var(--space-md), 4vw, var(--space-2xl));
}
.live-shell{
  margin-top:var(--space-md);
  padding:var(--space-lg);
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--radius-card);
  background:var(--container-bg-color);
  box-shadow:var(--shadow-card);
}
.live-layout-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-lg);
  align-items:start;
}
@media (max-width: 1024px){
  .live-layout-container{ grid-template-columns:1fr; }
}
/* min-width:0 overrides the grid item default (min-width:auto), which
   otherwise sizes to the intrinsic width of the aspect-ratio slide box and
   blows the left column out past its 1fr share instead of letting it shrink
   to fit. */
.teacher-presentation-pane{ display:flex; flex-direction:column; gap:var(--space-md); min-width:0; }

.transport-bar{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-card);
  padding:var(--space-md);
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
  box-shadow:var(--shadow-card-soft);
}
.transport-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-sm);
  flex-wrap:wrap;
}
.transport-slide-indicators{ font-weight:700; font-size:0.95rem; }

.thumbnail-strip-container{ border-top:1px solid var(--border-soft); padding-top:var(--space-sm); }
.thumbnail-strip{
  display:flex;
  gap:var(--space-sm);
  overflow-x:auto;
  padding:4px 2px 8px;
  scrollbar-width:thin;
}
.thumbnail-card{
  flex:0 0 100px;
  aspect-ratio:16/9;
  background:linear-gradient(135deg, #334155, #1e293b);
  border-radius:6px;
  padding:4px;
  cursor:pointer;
  border:2px solid transparent;
  transition:border-color var(--transition-fast), transform var(--transition-fast);
  position:relative;
  overflow:hidden;
}
.thumbnail-card.active{ border-color:var(--primary-color); transform:scale(1.03); }
.thumbnail-card-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumbnail-card-fallback{ position:relative; z-index:1; }
.thumbnail-card h5{
  margin:0;
  font-size:0.55rem;
  color:#38bdf8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.thumbnail-card p{
  margin:0;
  font-size:0.45rem;
  color:#94a3b8;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.2;
}
.thumbnail-card .thumb-num{ position:absolute; bottom:2px; right:4px; font-size:0.45rem; color:#64748b; }

/* .right-board-pane also carries .panel for the card look, but .panel's
   own margin:30px auto centres it as a fit-content box instead of filling
   its grid column — override both back out so it actually fills the column
   like its sibling. */
.right-board-pane{ display:flex; flex-direction:column; gap:var(--space-md); min-width:0; width:100%; margin:0; }
.interactive-dashboard-tabs{
  display:flex;
  border-bottom:2px solid var(--border-soft);
  gap:var(--space-xs);
  margin-bottom:var(--space-xs);
}
.tab-btn{
  background:transparent;
  color:var(--text-dark);
  border:0;
  border-bottom:2px solid transparent;
  min-height:auto;
  padding:8px 12px;
  font-size:0.95rem;
  font-weight:bold;
  opacity:0.6;
  cursor:pointer;
}
.tab-btn.active{ border-bottom-color:var(--primary-color); opacity:1; }

.timer-pulse-badge{
  background:var(--danger-color);
  color:white;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  font-weight:800;
  font-size:0.9rem;
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  width:230px;
  justify-content:center;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
#deck-wait-seconds{ display:inline-block; min-width:3ch; text-align:left; }
.timer-pulse-badge.timer-nudge{ animation:pulse .55s 2; }
.btn.timer-locked{ cursor:not-allowed; opacity:.72; }
@keyframes pulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(231,76,60,.5); }
  70%{ transform:scale(1.05); box-shadow:0 0 0 10px rgba(231,76,60,0); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(231,76,60,0); }
}

.status-active{ color:var(--success-color); }

.focus-alert{
  border:1px solid #f3b4b0;
  background:#fff7f6;
  border-radius:var(--radius-input);
  padding:var(--space-sm) var(--space-md);
}

.timer-badge-container{ text-align:center; margin-bottom:var(--space-sm); }

/* ---------- Projector (intentionally dark — a presentation display, not a
   form surface, so it doesn't follow the light-card visual language) ---------- */

.projector-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color:#f8fafc;
  padding:var(--space-lg);
}
.projector-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.1);
  padding-bottom:var(--space-md);
  margin-bottom:var(--space-lg);
}
.projector-header h1{ font-size:1.5rem; color:#38bdf8; }
.projector-info-box{
  background:rgba(255,255,255,.08);
  padding:10px 18px;
  border-radius:var(--radius-input);
  border:1px solid rgba(255,255,255,.1);
  font-weight:700;
}
.projector-presentation{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  min-height:0;
}
.projector-slide-pane{ display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; }
.slide-stage-projector{
  background:#090d16;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  border:2px solid rgba(255,255,255,.15);
  max-height:calc(100vh - 260px);
}
.projector-control-dock{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-modal);
  padding:var(--space-sm) var(--space-md);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  backdrop-filter:blur(10px);
}
.projector-navigation,
.projector-activity-controls{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
}
.projector-control-dock p{ margin:0; color:#cbd5e1; text-align:center; }
@media (max-width: 900px){
  .projector-control-dock{ flex-direction:column; }
}

/* ---------- Bar charts (shared: teacher live board + projector) ---------- */

.bar-chart-container{ display:flex; flex-direction:column; gap:var(--space-md); margin-top:var(--space-sm); }
.chart-bar-row{
  display:grid;
  grid-template-columns:minmax(60px, auto) 1fr minmax(40px, auto);
  gap:var(--space-md);
  align-items:center;
}
.chart-bar-label{ font-weight:600; font-size:0.95rem; }
.chart-bar-outer{
  height:24px;
  background:var(--input-bg);
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--border-soft);
}
.chart-bar-inner{
  height:100%;
  background:var(--primary-color);
  border-radius:5px;
  transition:width 0.4s ease;
}
.chart-bar-value{ font-weight:bold; font-size:0.95rem; text-align:right; }

/* ---------- Page heading (review, and other non-wizard pages) ---------- */

.page-heading{
  display:grid;
  gap:var(--space-sm);
  margin:0 0 var(--space-lg);
}
.page-heading h1{ margin-bottom:2px; }

/* ---------- Mode / student-access / confirmation / completed pages ---------- */

.mode-main{
  padding:var(--space-lg) var(--space-md) var(--space-2xl);
}
.mode-shell.auth-card{
  width:min(460px, 94vw);
  max-width:460px;
  margin:auto;
  padding:36px;
  border:0;
  border-radius:20px;
  background:rgba(255,255,255,.96);
  box-shadow:0 20px 50px rgba(15,23,42,.16);
  text-align:center;
}
.auth-card-logo{
  width:112px;
  height:112px;
  object-fit:cover;
  border-radius:4px;
  margin:0 auto var(--space-sm);
}
.auth-card h1{ margin:0 0 8px; font-size:2rem; }
.auth-card-copy{ margin:0 0 var(--space-lg); color:#64748b; }
.mode-shell .mode-actions,
.mode-shell .step-actions{ justify-content:center; }
.mode-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--space-md);
  margin-top:var(--space-md);
}
.teacher-auth-methods,
.teacher-auth-actions{
  display:grid;
  gap:12px;
}
.auth-choice-btn{
  width:100%;
  min-height:50px;
  font-size:1rem;
}
.auth-choice-btn.email{
  background:#fff;
  color:var(--text-dark);
  border:2px solid #dbe4ef;
}
.auth-choice-btn.email:hover:not([disabled]){
  background:#f8fafc;
  border-color:#b8c6d8;
}
.teacher-email-form{
  display:grid;
  gap:14px;
  width:100%;
  margin:0;
  padding:0;
  text-align:left;
}
.teacher-email-form.hidden{ display:none; }
.teacher-forgot-password{ justify-self:start; }
.email-auth-tabs{
  display:flex;
  gap:8px;
  margin-bottom:2px;
}
.email-auth-tab{
  flex:1;
  padding:10px;
  border-radius:var(--radius-input);
  border:1px solid #dbe6f3;
  background:#f3f7fd;
  color:var(--text-dark);
  cursor:pointer;
  font-weight:700;
}
.email-auth-tab.active{
  background:var(--primary-color);
  border-color:var(--primary-color);
  color:#fff;
}
.auth-email-submit{ width:100%; }
.auth-view-status{
  min-height:20px;
  margin:14px 0 0;
  color:var(--success-color);
  font-size:.9rem;
}
.auth-back-btn,
.auth-back-link{
  display:inline-block;
  margin-top:10px;
  border:0;
  background:none;
  color:#475569;
  text-decoration:underline;
  cursor:pointer;
  font:inherit;
}
.auth-back-link{ margin-top:8px; }
.auth-header-action{
  min-width:88px;
  background:transparent!important;
  color:var(--text-dark);
  border:2px solid var(--text-dark);
  padding:10px 22px;
}
.auth-error{ color:var(--danger-color); }
.student-access-shell,
.confirmation-shell{ max-width:640px; }
.confirmation-card{ display:grid; gap:var(--space-md); margin:var(--space-md) 0; }

.confirmation-link-block,
.confirmation-pin-block{
  display:grid;
  gap:var(--space-sm);
  padding:var(--space-md);
  border-radius:var(--radius-card);
  background:var(--main-bg-color);
  border:1px solid var(--border-soft);
}
.confirmation-pin-block{ grid-template-columns:1fr auto; align-items:center; }
#task-pin{ font-size:2rem; letter-spacing:.18em; }

.completed-hero{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-lg);
  align-items:stretch;
  max-width:var(--width-landing-max);
  margin:0 auto;
  padding:var(--space-xl) var(--space-md);
}
.completed-hero .hero-copy,
.completed-hero .completed-card{ flex:1 1 420px; margin:0; }
.completed-kicker{
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  color:var(--primary-color);
  font-size:var(--font-size-helper);
}
.completed-fact{ font-size:1.1rem; }

/* ---------- Review page ---------- */

.review-heading{
  max-width:var(--width-app-max);
  margin:0 auto var(--space-lg);
  padding:var(--space-lg);
  border-radius:var(--radius-card);
  border:1px solid var(--border-soft);
  background:#fff;
  box-shadow:var(--shadow-card-soft);
}
.review-heading{ text-align:center; justify-items:center; }
.review-export-actions{ margin-top:var(--space-md); }
.export-action-item{ display:inline-flex; align-items:center; gap:var(--space-xs); }
.review-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--space-md);
  max-width:var(--width-app-max);
  margin:0 auto;
}
.review-responses-card{ grid-column:1 / -1; }
.review-section-heading{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); margin-bottom:var(--space-md); }
.review-section-heading h2{ margin:0; }
.review-sort{ display:flex; align-items:center; gap:var(--space-sm); width:auto; }
.review-sort select{ width:auto; min-width:150px; margin:0; padding:8px 12px; }
.student-chip-list,.event-chip-list{ display:flex; flex-wrap:wrap; gap:var(--space-sm); }
.student-chip,.event-chip,.chip-button{ display:inline-flex; align-items:center; min-height:32px; padding:5px 12px; border-radius:var(--radius-pill); border:1px solid var(--border-soft); background:var(--main-bg-color); font-size:.85rem; font-weight:700; color:var(--text-dark); }
.event-chip{ background:#fff7ed; border-color:#fed7aa; }
.response-group-title{ margin:var(--space-lg) 0 var(--space-sm); padding-bottom:var(--space-xs); border-bottom:1px solid var(--border-soft); }
.response-chip{ display:grid; grid-template-columns:minmax(130px,.35fr) minmax(220px,1fr) minmax(260px,1.2fr); gap:var(--space-md); align-items:center; padding:var(--space-md); border:1px solid var(--border-soft); border-radius:var(--radius-card); background:var(--main-bg-color); margin-bottom:var(--space-sm); }
.response-chip-meta{ font-weight:800; }
.response-chip-answer{ margin:0; padding:var(--space-sm); border-radius:var(--radius-input); background:#fff; white-space:pre-wrap; }
.response-chip .response-feedback-input{ min-height:52px; margin:0; }
.response-chip-actions{ grid-column:3; display:flex; align-items:center; gap:var(--space-sm); }
.chip-button{ cursor:pointer; color:var(--primary-color); background:#fff; }
.chip-button.selected{ color:#fff; background:var(--primary-color); border-color:var(--primary-color); }
.feedback-save-status{ color:var(--text-muted); font-size:.8rem; }
.review-notice{ position:fixed; right:var(--space-lg); bottom:var(--space-lg); z-index:var(--z-modal); padding:var(--space-sm) var(--space-md); border-radius:var(--radius-pill); color:#fff; background:var(--success-color); box-shadow:var(--shadow-modal); font-weight:700; }
.review-notice[data-tone="error"]{ background:var(--danger-color); }
.review-card{
  padding:var(--space-md) var(--space-lg);
  border-radius:var(--radius-card);
  border:1px solid var(--border-soft);
  background:#fff;
  box-shadow:var(--shadow-card-soft);
  min-height:120px;
}
.review-row{
  padding:var(--space-sm) var(--space-md);
  margin-bottom:var(--space-sm);
  border-radius:var(--radius-input);
  border:1px solid var(--border-soft);
  background:var(--main-bg-color);
}
.review-row:last-child{ margin-bottom:0; }
.review-row pre{
  white-space:pre-wrap;
  word-break:break-word;
  font-size:var(--font-size-helper);
  background:#fff;
  border-radius:var(--radius-input);
  padding:var(--space-sm);
  margin:var(--space-sm) 0;
}
.review-row label{ display:block; margin-top:var(--space-sm); }
.response-feedback-input{
  min-height:70px;
  margin-top:var(--space-xs);
  margin-bottom:var(--space-sm);
}
@media (max-width: 760px){
  .review-grid,
  .mode-actions{ grid-template-columns:1fr; }
}
@media (max-width: 900px){ .response-chip{ grid-template-columns:1fr; } .response-chip-actions{ grid-column:1; } }

/* ---------- Import class/session step (dashboard) ---------- */

.class-step-block{
  min-height:280px;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:var(--space-md);
}
.class-step-field,
.import-class-name-label{
  width:min(560px, 100%);
  margin-left:auto;
  margin-right:auto;
  color:var(--text-light);
  font-size:1.1rem;
  font-weight:700;
  text-align:center;
}
.class-step-field input{
  min-height:60px;
  margin-top:var(--space-sm);
  text-align:center;
  font-size:1.3rem;
  font-weight:700;
}
.classroom-tools{ width:min(760px,100%); display:grid; gap:var(--space-md); text-align:center; }
.classroom-tools .button-group{ justify-content:center; }
.classroom-tools .selectable-btn{ flex:1 1 220px; min-height:52px; font-weight:800; }
.classroom-tools .session-actions select{ flex:1 1 260px; }
.classroom-tools input[type="date"],.classroom-tools input[type="time"]{ text-align:center; font-size:1rem; font-weight:600; }
/* ---------- Student join / session page ---------- */

.student-shell{ min-height:calc(100vh - 150px); display:grid; align-items:start; }
.student-panel{ display:grid; gap:var(--space-md); }
.join-hero{
  display:grid;
  gap:var(--space-lg);
  max-width:var(--width-landing-max);
  margin:0 auto;
  padding:var(--space-xl) var(--space-md);
}
.student-session-grid{
  grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);
  align-items:start;
}
.student-session-grid .hero-copy,
.student-session-grid .join-card{ margin:0; }
@media (max-width: 980px){
  .student-session-grid{ grid-template-columns:1fr; }
}

.student-response-shell{
  width:100%;
  max-width:none;
  min-height:calc(100vh - 100px);
  margin:0 auto;
  padding:var(--space-md) clamp(var(--space-sm), 2vw, var(--space-lg));
  display:grid;
  place-items:start center;
}
.join-main > [data-session]{ width:100%; }
.student-response-card{
  width:100%;
  max-width:none;
  margin:0;
  display:grid;
  gap:var(--space-lg);
}
.student-response-card.panel{ max-width:none; }
#deck-slide-card{ margin-inline:auto; }
.student-activity-block .eyebrow,
.student-activity-block .student-activity-prompt{ text-align:center; }
.student-activity-block .response-form{ align-items:center; }
.student-activity-block .response-form > .btn{ align-self:center; }
.student-activity-block .response-text,
.student-activity-block .student-response-options{ width:min(760px, 100%); }
.resource-modal-card{ width:min(1100px, 94vw); max-width:none; }
.resource-modal-header{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); }
.resource-modal-header h2{ margin:0; }
#resource-frame{ width:100%; height:min(70vh, 720px); border:1px solid var(--border-soft); border-radius:var(--radius-input); background:#fff; }
.lockdown-banner{ background:#f97316; color:#fff; border:2px solid #c2410c; }
.focus-warning-modal{
  padding:24px;
  background:rgba(120,0,0,.82);
}
.focus-warning-card{
  width:min(760px,100%);
  padding:36px 32px;
  border:4px solid #fff;
  border-radius:20px;
  background:linear-gradient(180deg,#ffb347 0%,#ff8a00 100%);
  color:#1a1a1a;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  text-align:center;
}
.focus-warning-kicker{
  margin-bottom:12px;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4a0b00;
}
.focus-warning-card h2{
  margin-bottom:16px;
  font-size:2.6rem;
  line-height:1.05;
  color:#1a1a1a;
}
.focus-warning-card #focus-warning-message{
  margin:0 auto 22px;
  max-width:620px;
  font-size:1.15rem;
  line-height:1.55;
  color:#1a1a1a;
}
.focus-warning-actions{ display:flex; justify-content:center; }
.focus-warning-card .btn{
  min-width:220px;
  margin:0 auto;
  background:#fff;
  color:#7e0c0c;
}
#lockout-modal .modal-card{ border:3px solid #b91c1c; background:#fff1f2; }
#lockout-modal .modal-card h2{ color:#991b1b; }
.deck-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--space-md);
}
.slide-links-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
  justify-content:center;
}
.slide-external-link{
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  padding:6px 14px;
  border-radius:var(--radius-pill);
  background:var(--main-bg-color);
  border:1px solid var(--border-soft);
  color:var(--primary-color);
  font-weight:600;
  font-size:var(--font-size-helper);
  text-decoration:none;
}
.slide-external-link:hover{ background:var(--secondary-color); color:#fff; }
.student-activity-block{
  padding:var(--space-lg);
  border-radius:var(--radius-card);
  border:1px solid var(--border-soft);
  background:var(--main-bg-color);
  display:grid;
  gap:var(--space-sm);
}
.student-activity-block + .student-activity-block{ margin-top:var(--space-md); }
.student-waiting-panel{
  min-height:320px;
  display:grid;
  place-content:center;
  gap:var(--space-sm);
  text-align:center;
}
.student-waiting-icon{ font-size:3.5rem; }
#student-activity-panel{ display:grid; gap:var(--space-md); }
#student-activity-prompt{ font-size:clamp(1.5rem,4vw,2.25rem); line-height:1.2; }
.student-response-options{ display:grid; gap:var(--space-sm); }
.student-response-option{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  padding:var(--space-md);
  border:2px solid rgba(15,23,42,.12);
  border-radius:var(--radius-button);
  cursor:pointer;
  font-weight:700;
}
.student-response-option:has(input:checked){
  border-color:var(--primary-color);
  background:rgba(99,102,241,.08);
}
.student-response-option input{ width:auto; margin:0; }
.student-submitted-note{
  min-height:180px;
  display:grid;
  place-content:center;
  gap:var(--space-xs);
  text-align:center;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px){
  .landing-content{ flex-direction:column; }
  .landing-left,
  .landing-right{ padding-left:0; padding-right:0; }
}

@media (max-width: 760px){
  .app-container,
  .panel,
  .card,
  .wizard-page,
  .session-shell{
    padding:var(--space-md);
    margin:var(--space-md) auto;
    border-radius:var(--radius-card);
  }
  .site-header{ flex-direction:column; align-items:flex-start; gap:var(--space-sm); }
  .auth-page-shell .site-header{
    flex-direction:row;
    align-items:center;
  }
  .auth-page-shell .auth-header-action{ width:auto; }
  .mode-shell.auth-card{ padding:24px; }
  .session-actions,
  .step-actions,
  .review-export-actions,
  .classroom-schedule-grid{
    flex-direction:column;
    align-items:stretch;
  }
  .btn{ width:100%; }
  .confirmation-pin-block{ grid-template-columns:1fr; }
}