@import url('assets/tokens.css');

* { box-sizing: border-box; }

/* Material Symbols base (icons inherit color via currentColor) */
.mat-ic {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
html, body { margin: 0; padding: 0; font-family: var(--font-body); }
body {
  background: var(--peechee-purple-10);
  color: var(--fg-1);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* === LAYOUT === */
.app { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }
.app-body { display: grid; grid-template-columns: 88px minmax(0,1fr); flex: 1; }
.sidebar {
  background: var(--peechee-purple-90, #22182B);
  color: var(--white, #fff);
  display: flex;
  width: 88px;
  padding: 20px 15px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: sticky; top: 0;
  align-self: stretch;
  z-index: 5;
}
.sidebar-nav { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; padding: 0; }
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0;
  border-radius: 0;
  color: var(--white, #fff); cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: color 140ms var(--ease-out);
  user-select: none;
  background: transparent;
  border: none;
  width: 100%;
  font-family: inherit;
}
/* Icon sits in its own pill; the ACTIVE state highlights the pill only —
   the label stays white below it (per reference). */
.nav-item svg { width: 22px; height: 22px; stroke-width: 1.7; }
.nav-item .mat-ic {
  font-size: 22px;
  width: 56px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 24px;
  color: var(--white, #fff);
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.nav-item:hover { background: transparent; color: var(--white, #fff); }
.nav-item:hover:not(.active) .mat-ic { background: rgba(255,255,255,0.12); }
.nav-item.active {
  background: transparent;
  color: var(--white, #fff);
}
.nav-item.active .mat-ic {
  background: var(--bt-blue-30, #B7C0FF);
  color: var(--peechee-purple-90, #22182B);
}
.nav-item.active svg { color: var(--peechee-purple-90, #22182B); }

.content {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 70px);
  background: var(--peechee-purple-10);
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 36px;
  background: white;
  border-bottom: 1px solid var(--ink-10);
  position: sticky; top: 0;
  z-index: 20;
}
.topbar-logo { display: flex; align-items: center; margin-right: auto; }
.topbar-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 18px; padding: 7px 16px 7px 12px;
  border: 2px solid var(--bt-blue-80); border-radius: 24px;
  background: #fff; color: var(--bt-blue-80);
  font: 500 14px/1 inherit; font-family: inherit; cursor: pointer;
  transition: background 140ms var(--ease-out, ease-out), color 140ms;
}
.topbar-back:hover { background: var(--bt-blue-15, #E8EBFF); }
.topbar-dash { background: var(--bt-blue-80); color: #fff; }
.topbar-dash:hover { background: var(--bt-blue-90, #2E00BE); }
.perf-tbl .perf-star { margin-left: 6px; vertical-align: -1px; }
.topbar-back:disabled { border-color: var(--ink-20, #E5E5E5); color: var(--ink-40, #999); cursor: default; background: #fff; }
.topbar-logo img { height: auto; }
.topbar-user {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 500;
  cursor: pointer;
}
.topbar-user .av {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--bt-blue-80);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-weight: 700; font-size: 13px;
}
.topbar-user .av img { width: 100%; height: 100%; object-fit: cover; }

.page { padding: 28px 36px 80px; flex: 1; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.page-title { font-size: 28px; font-weight: 600; margin: 0 0 22px; letter-spacing: -0.01em; }

/* Today's Lessons table — Time / Attendees / Assigned Lesson, boxed cells */
.lessons-card { padding: 22px 26px; }
.lessons-card h3 { margin: 0 0 14px; font-size: 18px; font-weight: 600; }
.lessons-tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.lessons-tbl th, .lessons-tbl td { border: 1px solid var(--ink-10); padding: 10px 12px; vertical-align: top; text-align: left; }
.lessons-tbl thead th { background: var(--peechee-purple-10); font-weight: 600; }
.lessons-tbl td { line-height: 1.55; }
.lessons-tbl .lesson-assigned { color: var(--ink-90); text-decoration: underline; }
.lessons-tbl .lesson-assigned:hover { color: var(--ink-90); }

/* My Students header actions */
.ms-tbl thead th { white-space: nowrap; }
.ms-tbl thead th .filter-glyph { vertical-align: middle; }
.ms-bulk { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; text-decoration: none; }
.ms-kebab-wrap { position: relative; }
.ms-kebab {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--ink-30);
  background: white; color: var(--ink-90); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ms-kebab:hover { background: var(--peechee-purple-10); }
.ms-kebab-menu {
  position: absolute; top: 38px; right: 0; z-index: 30; min-width: 216px;
  background: white; border: 1px solid var(--ink-10); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(34,24,43,0.14); padding: 10px 14px;
}
.ms-kebab-menu .check-row { margin: 0; white-space: nowrap; }
.ms-tbl .ms-past td, .ms-tbl .ms-past td a { color: var(--ink-40, #a5a5b8); }

/* "Up next" banner */
.upnext {
  background: var(--bt-blue-30);
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px;
  color: var(--ink-90);
  position: static;
  z-index: 18;
}
.upnext .x { background: none; border: none; cursor: pointer; padding: 4px; display: flex; }
.upnext-no { color: var(--apple-red-60); font-weight: 600; }
.upnext a { color: var(--bt-blue-80); font-weight: 600; text-decoration: none; }
.upnext a:hover { opacity: 0.72; }
.upnext .sep { margin: 0 14px; color: rgba(0,0,0,0.2); }
.upnext-start { background: var(--bt-blue-80); border: none; cursor: pointer; padding: 9px 20px; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; flex-shrink: 0; transition: background 140ms var(--ease-out, ease-out); }
.upnext-start:hover { background: var(--peechee-purple-90); }
.upnext-assign { background: #fff; border: 2px solid var(--bt-blue-80); cursor: pointer; padding: 7px 18px; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--bt-blue-80); white-space: nowrap; flex-shrink: 0; }
.upnext-assign:hover { opacity: 0.72; }

/* Dashboard header — title with coaching insight stacked below */
.dashboard-header {
  display: flex; flex-direction: column; align-items: stretch; gap: 16px;
  margin-bottom: 22px;
}
.dashboard-header .page-title { margin: 0; }

/* Coaching insight snackbar */
.coaching-insight {
  display: flex; align-items: flex-start; gap: 16px;
  background: white;
  border: 1px solid var(--bt-blue-80, #4F46FF);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px; line-height: 1.45;
  color: var(--text-black, #121212);
}
.coaching-insight-text { flex: 1; }
.coaching-insight-text b { font-weight: 700; }
.coaching-insight-spark {
  margin-right: 4px;
  font-size: 15px;
  display: inline-block;
  animation: spark-blink 1.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes spark-blink {
  0%, 60%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  30% { opacity: 0.35; transform: scale(0.85) rotate(-8deg); }
  45% { opacity: 1; transform: scale(1.12) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .coaching-insight-spark { animation: none; }
}
.coaching-insight-link {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--bt-blue-80, #4F46FF);
  padding: 0;
  white-space: nowrap;
  text-decoration: none;
}
.coaching-insight-link:hover { text-decoration: underline; }
.coaching-insight-x {
  background: none; border: none; cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  height: calc(14px * 1.45);
  color: var(--text-black, #121212);
}
.coaching-insight-x:hover { opacity: 0.6; }

/* Confirm Meeting Status modal */
.cms-question { font-weight: 600; font-size: 14px; color: var(--text-black, #121212); margin-bottom: 10px; }
.cms-radio-row { display: flex; gap: 32px; flex-wrap: wrap; }
.cms-radio {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 4px 0;
  cursor: pointer; font: inherit; font-size: 14px;
  color: var(--text-black, #121212);
}
.cms-radio-dot {
  width: 20px; height: 20px; border-radius: 999px;
  border: 2px solid var(--ink-50, #908a9b);
  display: inline-flex; align-items: center; justify-content: center;
  background: white;
  flex-shrink: 0;
  transition: border-color 120ms ease;
}
.cms-radio:hover .cms-radio-dot:not(.on) { border-color: var(--bt-blue-80, #4F46FF); }
.cms-radio-dot.on { border-color: var(--bt-blue-80, #4F46FF); }
.cms-radio-dot.on::after {
  content: ""; width: 10px; height: 10px; border-radius: 999px;
  background: var(--bt-blue-80, #4F46FF);
}
.btn.cms-danger { background: var(--apple-red-60, #FF2C23); color: white; border-color: var(--apple-red-60, #FF2C23); }
.btn.cms-danger:hover { filter: brightness(0.95); }
.cms-dd-row { display: flex; gap: 12px; margin-top: 14px; }
.cms-reason-row { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
.cms-reason-row .cms-question { white-space: nowrap; }

/* === CARDS === */
.card {
  background: white;
  border-radius: 20px;
  padding: 22px 26px;
  box-shadow: 0 1px 2px rgba(3,3,3,0.04);
}

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 140ms var(--ease-out);
  background: var(--bt-blue-80);
  color: white;
  text-decoration: none;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(60,1,247,0.22); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.secondary {
  background: white; color: var(--bt-blue-80);
  border-color: var(--bt-blue-80);
}
.btn.secondary:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(60,1,247,0.10); }
.btn.danger { background: var(--apple-red-70); }
.btn.danger:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(238,0,13,0.22); }
.btn.ghost { background: transparent; color: var(--bt-blue-80); border: none; }
.btn.ghost:hover { background: var(--peechee-purple-10); }
.btn.sm { padding: 7px 14px; font-size: 13px; }

.link {
  color: var(--bt-blue-80); font-weight: 400;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; background: none; border: none; padding: 0;
  font-family: inherit; font-size: inherit;
}
.link:hover { opacity: 0.72; }

/* === FORM === */
.field-label { font-weight: 600; font-size: 14px; color: var(--ink-90); }
.text-input, .select-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--ink-20);
  background: white;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-90);
}
.text-input:focus, .select-input:focus { outline: none; border-color: var(--bt-blue-80); }

.radio {
  width: 18px; height: 18px; border-radius: 999px;
  border: 2px solid var(--ink-30);
  background: white;
  cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 140ms;
}
.radio.on { border-color: var(--bt-blue-80); }
.radio.on::after {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: var(--bt-blue-80);
}
.checkbox {
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid var(--ink-30); background: white;
  cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 140ms;
}
.checkbox.on { background: var(--bt-blue-80); border-color: var(--bt-blue-80); }
.checkbox.on::after {
  content: ""; width: 9px; height: 5px;
  border: 2px solid white; border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.radio-row, .check-row {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  font-size: 14px;
}

/* === PILLS / STATUSES === */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.pill.success { background: var(--chalkboard-green-10); color: var(--chalkboard-green-70); }
.pill.warn    { background: var(--locker-orange-10); color: var(--locker-orange-60); }
.pill.error   { background: var(--apple-red-10); color: var(--apple-red-70); }
.pill.info    { background: var(--spark-blue-10); color: var(--spark-blue-70); }
.pill.neutral { background: var(--ink-10); color: var(--ink-70); }
.pill.progressing { background: var(--locker-orange-10); color: var(--locker-orange-60); }
.pill.mastered    { background: var(--chalkboard-green-10); color: var(--chalkboard-green-70); }
.pill.area-of-need{ background: var(--apple-red-10); color: var(--apple-red-70); }

/* === TABLES === */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl thead th {
  text-align: left; padding: 12px 14px;
  font-weight: 600; color: var(--ink-90); font-size: 13px;
  border-bottom: 1px solid var(--ink-10);
}
.tbl tbody td {
  padding: 14px; border-bottom: 1px solid var(--ink-10);
  color: var(--ink-90); vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .filt { color: var(--ink-30); margin-left: 4px; cursor: pointer; }

/* === Custom Select dropdown (matches the rest of the UI) === */
.dd { position: relative; display: inline-block; width: 100%; }
.dd-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--ink-20);
  background: white;
  font-family: inherit; font-size: 14px;
  color: var(--ink-90); font-weight: 500;
  cursor: pointer;
  transition: border-color 140ms;
}
.dd-trigger:hover { border-color: var(--ink-30); }
.dd-trigger.open { border-color: var(--bt-blue-80); }
.dd-trigger .lbl { color: var(--ink-90); font-weight: 600; margin-right: 4px; }
.dd-trigger svg { width: 16px; height: 16px; color: var(--ink-70); flex-shrink: 0; }
.dd-trigger .mat-ic { font-size: 18px; color: var(--ink-70); }
.dd-trigger.placeholder { color: var(--ink-40); font-weight: 500; }
.dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%;
  background: white;
  border: 1px solid var(--ink-20);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  z-index: 60;
  padding: 6px;
  max-height: 280px; overflow-y: auto;
  font-size: 14px;
  white-space: nowrap;
}
.dd-option {
  padding: 9px 14px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--ink-90);
  display: flex; align-items: center; gap: 10px;
}
.dd-option:hover { background: var(--peechee-purple-10); }
.dd-option.selected { background: var(--bt-blue-10); color: var(--bt-blue-80); font-weight: 600; }
.dd-trigger.square { border-radius: 12px; }
.modal-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
  animation: fadeIn 200ms var(--ease-out);
}
.modal {
  background: white;
  border-radius: 16px;
  width: min(720px, 100%);
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  animation: popIn 220ms var(--ease-out);
  overflow: hidden;
}
.modal-header {
  background: var(--peechee-purple-10);
  padding: 18px 26px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-header h2 { margin: 0; font-size: 20px; font-weight: 700; }
.modal-body { padding: 26px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 18px 26px;
  border-top: 1px solid var(--ink-10);
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  flex-shrink: 0;
  background: white;
}
.close-x {
  background: none; border: none; cursor: pointer; padding: 6px;
  display: flex; color: var(--ink-70);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* === CALENDAR === */
.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cal-date-nav {
  display: inline-flex; align-items: center; gap: 12px;
}
.cal-today-btn {
  padding: 6px 18px;
  border-radius: 999px; border: 1.5px solid var(--ink-90);
  background: white; cursor: pointer;
  font-weight: 600; font-size: 13px;
  font-family: inherit;
}
.cal-nav-arrow {
  background: none; border: none; cursor: pointer;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--ink-90);
}
.cal-nav-arrow:hover { background: var(--peechee-purple-10); }
.cal-date { font-weight: 600; font-size: 15px; }
.cal-add { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--bt-blue-80); cursor: pointer; background: none; border: none; font-family: inherit; font-size: 14px; }
.cal-add:hover { opacity: 0.72; }

/* day view */
.day-grid {
  border: 1px solid var(--ink-10);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}
.day-hour {
  display: grid; grid-template-columns: 60px 1fr;
  border-bottom: 1px solid var(--ink-10);
  min-height: 56px;
  position: relative;
}
.day-hour:last-child { border-bottom: none; }
.day-hour .hr-label {
  padding: 6px 10px;
  font-size: 12px; color: var(--ink-50);
  font-weight: 500;
  border-right: 1px solid var(--ink-10);
}
.day-hour .hr-cell {
  padding: 4px 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.event {
  border-radius: 8px;
  font-size: 13px;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch;
  cursor: pointer;
  border: 2px solid transparent;
  transition: filter 120ms;
  position: relative;
  background: white;
}
.event .ev-left {
  padding: 12px 16px;
  min-width: 0;
  position: relative;
  border-radius: 6px 0 0 6px;
  display: flex; flex-direction: column; justify-content: center;
}
.event .ev-right {
  padding: 12px 18px 12px 12px;
  min-width: 0;
  background: white;
  border-radius: 0 6px 6px 0;
  display: flex; flex-direction: column; justify-content: center;
}
.event .ev-info-cell {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--ink-50, #908a9b);
  display: inline-flex;
  z-index: 4;
}
.event .ev-info-cell .has-tip { display: inline-flex; }
.event .ev-info-cell svg { width: 16px; height: 16px; }
.event .ev-info-cell .mat-ic { font-size: 16px; }
.event:hover { filter: brightness(0.98); }

.event.finished               { border-color: #C0F0CE; }
.event.finished .ev-left      { background: #C0F0CE; }
.event.finished .ev-right     { background: #ECFFF1; }

.event.pending                { border-color: #D9DEFF; }
.event.pending .ev-left       { background: #D9DEFF; }
.event.pending .ev-right      { background: #FBFCFF; }

.event.unknown                { border-color: #FFEAA5; }
.event.unknown .ev-left       { background: #FFEAA5; }
.event.unknown .ev-right      { background: #FFFAE8; }

.event.no-show                { border-color: #ffd6d6; }
.event.no-show .ev-left       { background: #ffd6d6; }
.event.no-show .ev-right      { background: #fff5f5; }

.event .ev-title { font-weight: 600; color: var(--ink-90); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; }
.event .ev-meta { font-size: 12px; color: var(--ink-70); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event .ev-lesson { color: var(--ink-90); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event .ev-lesson.muted { color: var(--ink-50); font-style: italic; }
.event .ev-action-row { color: var(--ink-90); display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.event .ev-action-row .link { white-space: nowrap; }
/* Yellow (unknown) events: allow the Confirm row to wrap to two lines */
.event.unknown .ev-action-row { flex-wrap: wrap; white-space: normal; line-height: 1.4; }
.event .ev-check { color: var(--chalkboard-green-70, #1F8A5B); font-weight: 700; }
.event .ev-assign-link { color: var(--apple-red-70, #D32F2F); }

/* Make sure event tooltips show above neighbours */
.day-hour .hr-cell { overflow: visible; }
.event .has-tip .tip { z-index: 60; white-space: nowrap; }

.event a { color: var(--bt-blue-80); }
.event.event-deleted {
  background: white;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
  min-height: 76px;
  box-shadow: none;
}
.event.event-deleted:hover { filter: none; }

/* current time line */
.day-hour { position: relative; }
.now-line {
  position: absolute; left: 56px; right: 0;
  top: -1.5px;
  border-top: 3px solid var(--apple-red-60, #FF2C23);
  z-index: 5;
  pointer-events: none;
}
.now-line::before {
  content: ''; position: absolute;
  left: -6px; top: -7.5px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--apple-red-60, #FF2C23);
}

/* Insights / watchlist */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.stat-item { display: flex; flex-direction: column; height: 100%; }
.stat-item .num { font-size: 28px; font-weight: 600; color: var(--ink-90); letter-spacing: -0.02em; }
.stat-item .lbl { font-size: 13px; color: var(--ink-70); margin-top: 2px; flex: 1; }
.stat-item .lnk { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--bt-blue-80); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; align-self: flex-start; }
.stat-item .lnk:hover { opacity: 0.72; }

.insights { padding: 22px 26px; }
.insights h3 { margin: 0 0 14px; font-size: 18px; font-weight: 600; }
.insights ul { margin: 0; padding: 0 0 0 18px; }
.insights li { margin-bottom: 12px; color: var(--ink-90); }
.insights li::marker { color: var(--ink-30); }
.insights a { color: var(--bt-blue-80); font-weight: 400; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* Nested sub-bullets (Students missing consecutive meetings) */
.insights ul.insights-sub { list-style: disc; padding: 8px 0 0 22px; margin: 0; }
.insights ul.insights-sub li { margin-bottom: 8px; font-size: 13.5px; }
.insights ul.insights-sub li:last-child { margin-bottom: 0; }

.watchlist h3 {
  margin: 0 0 16px; font-size: 17px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.watchlist h3::before {
  content: "!"; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px;
  background: var(--apple-red-60); color: white; font-weight: 700; font-size: 13px;
}

.color-key { padding: 20px 26px; }
.color-key h3 { margin: 0 0 16px; font-size: 16px; font-weight: 600; }
.color-key .row {
  display: grid; grid-template-columns: 28px auto 1fr; gap: 10px;
  align-items: start;
  margin-bottom: 10px;
  font-size: 13.5px;
}
.color-key .dot {
  width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

/* === SCHEDULE PAGE === */
/* Toggle — design-system canonical (README §Tabs, locked rules).
   One dark 40px bar, zero inner padding; active pill is flush — its corners
   coincide exactly with the container's corners. No borders, no shadows. */
.tab-row {
  display: inline-flex; gap: 0; padding: 0;
  height: 40px;
  background: var(--dark, #22182B);
  border-radius: var(--round-large, 24px);
  overflow: hidden;
}
.tab-row .tab {
  flex: 0 0 auto;
  height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 24px; font-size: 14px; font-weight: 500;
  color: var(--white, #fff); cursor: pointer;
  border-radius: var(--round-large, 24px);
  border: none; outline: none; box-shadow: none;
  white-space: nowrap;
  background: none; font-family: inherit;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.tab-row .tab.active { background: var(--bt-blue-30); color: var(--dark, #22182B); border: none; box-shadow: none; }
.tab-row .tab:hover:not(.active) { background: rgba(255,255,255,0.08); box-shadow: none; }
.tab-row .tab:focus-visible { outline: 2px solid var(--black, #000); outline-offset: -2px; }
/* .outline — SECONDARY toggle: white pill, 2px --dark inset border, active
   fills with --dark + white text. Flush: zero padding, overflow hidden,
   active segment is full-height with the container's radius. */
.tab-row.outline {
  background: var(--white, #fff);
  border: 2px solid var(--dark, #22182B);
  border-radius: var(--round-large, 24px);
  padding: 0;
  box-shadow: 0 1px 3px rgba(15, 20, 34, 0.10);
  gap: 0;
}
.tab-row.outline .tab { color: var(--dark, #22182B); }
.tab-row.outline .tab:hover:not(.active) { background: var(--peechee-purple-10, #f3f1f7); color: var(--dark, #22182B); }
.tab-row.outline .tab.active {
  background: var(--dark, #22182B);
  color: var(--white, #fff);
  font-weight: 600;
}

.month-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--ink-10);
  border-left: 1px solid var(--ink-10);
  background: white;
  border-radius: 8px; overflow: hidden;
}
.month-header {
  font-size: 13px; font-weight: 600; color: var(--ink-90);
  padding: 10px 14px;
  border-right: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  background: white;
}
.month-cell {
  min-height: 140px;
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  position: relative;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms;
}
.month-cell:hover { background: var(--peechee-purple-10); }
.month-cell .dt { font-weight: 500; color: var(--ink-90); margin-bottom: 6px; }
.month-cell.today .dt {
  width: 26px; height: 26px; border-radius: 999px; background: var(--apple-red-60); color: white;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.month-cell.other-month .dt { color: var(--ink-30); }
.month-cell .ev {
  font-size: 12px; color: var(--ink-90);
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 5px; white-space: nowrap; overflow: hidden;
}
.month-cell .ev .ev-txt { overflow: hidden; text-overflow: ellipsis; }
.month-cell .ev .dot { width: 11px; height: 11px; border-radius: 999px; flex-shrink: 0; }
.month-cell .ev.canceled .ev-txt { text-decoration: line-through; color: var(--ink-50); }
.month-cell .more {
  font-size: 12px; color: #8560FA; font-weight: 500;
  text-decoration: underline; margin-top: 4px; cursor: pointer;
}
.month-cell .add-btn {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 999px;
  background: white; border: 1.5px solid var(--bt-blue-80); color: var(--bt-blue-80);
  font-size: 18px; line-height: 1; display: none;
  align-items: center; justify-content: center; cursor: pointer;
  font-family: inherit;
}
.month-cell:hover .add-btn { display: inline-flex; }

/* === FOCUS / SESSION === */
.session-shell {
  display: flex; flex-direction: column;
  min-height: 100vh;
  background: var(--peechee-purple-10);
}
.session-topbar {
  background: white;
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--ink-10);
  position: sticky; top: 70px;
  z-index: 15;
}
.session-topbar h2 { margin: 0; font-size: 17px; font-weight: 600; }
.session-end-bar {
  background: var(--apple-red-70); color: white;
  border: none; padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600; cursor: pointer; font-family: inherit; font-size: 14px;
}
.session-end-bar:hover { filter: brightness(1.05); }
.session-body { display: block; flex: 1; }
.session-panel {
  background: white;
  border-radius: 18px;
  margin: 24px 28px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 70px - 56px - 48px);
  border: 1px solid var(--ink-10);
  overflow: hidden;
}
.session-tabs {
  padding: 0 28px 0 0;
  background: white;
}
.session-panel-body {
  padding: 24px 28px 36px;
  flex: 1;
  position: relative;
  background: var(--bg-light, #F7F7FF);
}
.session-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--ink-10);
  margin-bottom: 0;
  align-items: flex-end;
}
.session-tab {
  display: flex;
  height: 40px;
  padding: 12px 16px 0 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  background: #FFF;
  font-size: 14px; font-weight: 500;
  color: var(--ink-70); cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  white-space: nowrap;
  box-sizing: border-box;
}
.session-tab.active {
  padding: 12px 16px 0 16px;
  height: 40px;
  min-height: 40px;
  justify-content: flex-start;
  background: var(--bt-blue-10, #F7F7FF);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  color: var(--bt-blue-80);
  font-weight: 600;
  border-bottom-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--bt-blue-80);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
  position: relative;
  z-index: 1;
}
.session-tab:hover:not(.active) { color: var(--ink-90); }

.tab-back-btn {
  margin-left: auto;
  align-self: center;
  background: var(--bt-blue-80);
  border: none; cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 999px;
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 2px;
}
.tab-back-btn:hover { background: var(--bt-blue-90); }

.session-side {
  background: var(--ink-10);
  display: flex; flex-direction: column;
  padding: 14px;
  gap: 12px;
}
.session-side h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-70); }

.student-card {
  background: var(--peechee-purple-30);
  border-radius: 14px;
  padding: 16px;
  color: var(--ink-90);
  position: relative;
  min-height: 130px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.student-card .av-lg {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: 999px;
  background: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--ink-90);
}
.student-card .nm { font-weight: 600; font-size: 14px; }
.student-card .stat { font-size: 12px; color: var(--ink-70); margin-top: 2px; }

/* drawer rows in agenda */
.agenda-row {
  background: white;
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid var(--ink-10);
  margin-bottom: 12px;
  display: grid; grid-template-columns: 220px 1fr auto; gap: 14px;
  align-items: center;
}
.agenda-row .who { font-size: 13px; color: var(--ink-90); }
.agenda-row .who .nm { font-weight: 700; }
.agenda-row .who .sub { color: var(--ink-50); }
.agenda-row .title { font-weight: 600; color: var(--ink-90); }
.agenda-row .status { font-size: 12.5px; font-weight: 600; }
.agenda-row .status.not-started { color: var(--apple-red-70); }
.agenda-row .status.in-progress { color: var(--bt-blue-80); }
.agenda-row .status.complete { color: var(--chalkboard-green-70); }
.agenda-row .status .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.agenda-row .status.not-started .dot { background: var(--apple-red-70); }
.agenda-row .status.in-progress .dot { background: var(--bt-blue-80); animation: pulse 1.2s infinite; }
.agenda-row .status.complete .dot { background: var(--chalkboard-green-50); }
@keyframes pulse { 50% { opacity: 0.3; } }

/* assessment question */
.q-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  align-items: start;
}
.q-prompt-card {
  background: var(--peechee-purple-10);
  border-radius: 10px;
  padding: 30px;
  display: flex; align-items: center; justify-content: center;
  min-height: 160px;
  font-size: 80px; font-weight: 700;
  color: var(--ink-90);
}
.q-choices { display: flex; flex-direction: column; gap: 12px; }
.q-choice {
  background: white; border: 1.5px solid var(--ink-20);
  border-radius: 12px; padding: 14px 18px;
  font-size: 16px; font-weight: 500;
  cursor: pointer; display: flex; align-items: center; gap: 10px;
  font-family: inherit;
  transition: all 140ms;
  text-align: left;
}
.q-choice:hover { border-color: var(--bt-blue-30); background: var(--bt-blue-10); }
.q-choice.correct { background: var(--chalkboard-green-10); border-color: var(--chalkboard-green-50); color: var(--chalkboard-green-70); }
.q-choice.incorrect { background: var(--apple-red-10); border-color: var(--apple-red-60); color: var(--apple-red-70); }
.q-choice .dot {
  width: 22px; height: 22px; border-radius: 999px;
  border: 2px solid var(--ink-30); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.q-choice.correct .dot { background: var(--chalkboard-green-50); border-color: var(--chalkboard-green-50); color: white; }
.q-choice.incorrect .dot { background: var(--apple-red-60); border-color: var(--apple-red-60); color: white; }

.q-footer {
  margin-top: 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.q-footer .left { font-size: 12px; color: var(--ink-50); }
.q-footer .right { display: flex; gap: 12px; }
.q-footer .btn-back {
  background: white; border: 1.5px solid var(--ink-20); padding: 9px 22px;
  border-radius: 999px; color: var(--ink-30); cursor: not-allowed;
  font-weight: 600; font-family: inherit;
}

/* === GROUP DETAIL (Where to Start) === */
.gd-grid { display: grid; grid-template-columns: 350px 1fr; gap: 18px; }
.gd-side .card { margin-bottom: 14px; }
.gd-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.gd-row .k { color: var(--ink-50); font-weight: 500; }
.gd-row .v { color: var(--ink-90); font-weight: 500; }
.gd-overview h3 { font-size: 18px; margin: 0 0 14px; font-weight: 700; }
.gd-overview .field { margin-bottom: 16px; }
.gd-overview .lbl { font-size: 12px; font-weight: 600; color: var(--ink-90); margin-bottom: 4px; }
.gd-overview .val { font-size: 14px; color: var(--ink-90); }

.start-block { padding: 24px 26px; }
.start-block h3 { font-size: 22px; margin: 0 0 4px; font-weight: 700; }
.start-block .sub { color: var(--ink-70); margin-bottom: 22px; }
.start-step { display: grid; grid-template-columns: 70px 1fr; gap: 16px; margin-bottom: 22px; align-items: start; }
.start-step .badge {
  background: var(--peechee-purple-10);
  border-radius: 999px;
  padding: 6px 12px;
  text-align: center;
  font-size: 13px; font-weight: 600; color: var(--ink-90);
}
.start-step .body { font-size: 14.5px; color: var(--ink-90); }
.start-step .body b { font-weight: 700; }
.start-step ul { margin: 8px 0 0; padding-left: 20px; }
.start-step ul li { margin-bottom: 4px; }
.start-step .body a { color: var(--bt-blue-80); }

.start-step-1 {
  display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; align-items: start;
}
.gd-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.gd-back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--ink-90);cursor:pointer;transition:background 140ms var(--ease-out)}
.gd-back:hover{background:var(--ink-10)}
.gd-note-empty{margin:0;font-size:13.5px;font-style:italic;color:var(--ink-70);line-height:1.6}
.gd-view-link{display:inline-flex;align-items:center;gap:6px}
.ws-assess-box{border:1.5px solid var(--ink-20);border-radius:12px;background:#fff;padding:12px 40px 12px 16px;display:grid;gap:10px;font-size:14px;color:var(--ink-90);position:relative;max-width:560px}
.ws-assess-chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-70);display:inline-flex}
.sh-search{display:flex;align-items:center;gap:10px;border:1.5px solid var(--ink-20);border-radius:24px;padding:8px 18px;max-width:420px;margin-bottom:18px;color:var(--ink-50)}
.sh-search input{border:0;outline:0;background:none;font:inherit;font-size:14px;color:var(--ink-90);width:100%}
.sh-tbl td{vertical-align:middle}
.sh-status{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-90)}
.sh-status .dot{width:11px;height:11px;border-radius:50%;background:var(--locker-orange-30,#FFC98A)}
.sh-status.finished .dot{background:var(--chalkboard-green-50)}
.sh-tbl tbody tr.sh-absent td{color:var(--apple-red-70,#c93222)}
.pre-chip{display:inline-block;margin-right:10px;padding:2px 9px;border-radius:4px;background:var(--eraser-pink-10,#FDE4F3);color:var(--eraser-pink-70,#A32A76);font-size:12px;font-weight:500}
.start-step-1 select {
  padding: 9px 14px; border-radius: 12px; border: 1.5px solid var(--ink-20);
  font-family: inherit; font-size: 14px; min-width: 320px; background: white;
}

.published-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--chalkboard-green-10); color: var(--chalkboard-green-70);
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}

/* === STUDENT VIEW (kiosk) === */
.kiosk {
  min-height: 100vh; background: var(--bt-blue-10);
  display: flex; flex-direction: column;
}
.kiosk-top {
  background: white; padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--ink-10);
}
.kiosk-top .title { font-size: 18px; font-weight: 600; }
.kiosk-body { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 60px 24px; }
.kiosk-card {
  background: white; border-radius: 20px;
  padding: 40px 50px; max-width: 760px; width: 100%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}

/* New kiosk layout (assessment/activity) */
.kiosk-body { flex: 1; padding: 40px 36px; display: flex; align-items: flex-start; justify-content: center; }
.kiosk-canvas {
  width: 100%; max-width: 1200px;
  position: relative;
  min-height: 540px;
}
.kiosk-close {
  background: none; border: 1.5px solid var(--ink-90);
  border-radius: 8px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  color: var(--ink-90);
}
.kiosk-close:hover { background: var(--peechee-purple-10); }
.kiosk-label { font-size: 15px; color: var(--ink-70); margin-bottom: 18px; }
.kiosk-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.kiosk-question-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.kiosk-question-head h2,
.kiosk-question-head h3 { margin: 0; font-size: 22px; font-weight: 700; color: var(--ink-90); }
.kiosk-question { display: flex; flex-direction: column; }
.kiosk-prompt-card {
  background: white;
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.kiosk-photo {
  border: 2px solid var(--ink-90);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  background: var(--ink-10);
}
.kiosk-photo.white { background: white; }
.kiosk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Letter answer tiles — 2x2 grid */
.kiosk-letters {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.kiosk-letter-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.kiosk-letter {
  background: var(--peechee-purple-30);
  border: 3px solid var(--ink-90);
  border-radius: 18px;
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-weight: 700; font-size: 88px;
  color: var(--ink-90);
  cursor: pointer;
  position: relative;
  transition: transform 100ms;
}
.kiosk-letter:hover:not(:disabled) { transform: translateY(-2px); }
.kiosk-letter:disabled { cursor: not-allowed; opacity: 0.95; }
.kiosk-letter.right { border-color: var(--chalkboard-green-50); }
.kiosk-letter.wrong { border-color: var(--apple-red-60); }
.kiosk-letter.used-wrong { opacity: 0.55; }
.kiosk-radio {
  width: 22px; height: 22px; border-radius: 999px;
  border: 2.5px solid var(--ink-90);
  background: white;
  display: inline-flex; align-items: center; justify-content: center;
}
.kiosk-radio.on { border-color: var(--bt-blue-80); }
.kiosk-radio-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--bt-blue-80); }
.kiosk-feedback {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700;
}
.kiosk-feedback.right { color: var(--chalkboard-green-70); }
.kiosk-feedback.wrong { color: var(--apple-red-70); }
.badge-check, .badge-x {
  width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
}
.badge-check { background: var(--chalkboard-green-50); }
.badge-x { background: var(--apple-red-60); }

.kiosk-input {
  width: 100%;
  background: var(--bt-blue-10);
  border: 2px solid var(--bt-blue-30);
  border-radius: 12px;
  padding: 18px 22px;
  font-family: inherit; font-size: 18px; color: var(--ink-90);
}
.kiosk-input:focus { outline: none; border-color: var(--bt-blue-80); }
.kiosk-input::placeholder { color: var(--ink-50); }

.kiosk-footer {
  display: flex; justify-content: flex-end;
  margin-top: 40px;
}

/* === REPORTS === */
/* Students/Groups segmented control — dark bar variant of the design-system toggle */
.report-toggle {
  display: inline-flex; padding: 0; background: var(--peechee-purple-90);
  border-radius: 999px; border: none;
  gap: 0; overflow: hidden;
}
.report-toggle button {
  padding: 13px 26px; font-size: 13px; font-weight: 500;
  background: transparent; border: none; border-radius: 999px;
  cursor: pointer; color: white; font-family: inherit;
  transition: background 140ms ease, color 140ms ease;
}
.report-toggle button:hover:not(.active) { background: rgba(255,255,255,0.08); }
.report-toggle button.active {
  background: var(--bt-blue-30);
  color: var(--ink-90);
}

.report-filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.filter-chip {
  background: white; border: 1.5px solid var(--ink-20); border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px; color: var(--ink-90); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
  cursor: pointer;
}

.glance-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
  padding: 18px 0;
  position: relative;
}
.glance-cell { text-align: center; position: relative; }
.glance-cell + .glance-cell::before {
  content: ''; position: absolute; left: 0; top: 10%; bottom: 10%;
  border-left: 1px solid var(--ink-10);
}
.glance-cell .num {
  font-size: 52px; font-weight: 700; line-height: 1;
  color: var(--eraser-pink-40); letter-spacing: -0.02em;
}
.glance-cell .num.green { color: var(--chalkboard-green-50); }
.glance-cell .num.red   { color: var(--apple-red-50, #ff4f3f); }
.glance-cell .lbl { font-size: 13px; color: var(--ink-90); margin-top: 10px; }
.excellent-pill {
  display: inline-block;
  background: var(--chalkboard-green-10); color: var(--chalkboard-green-70);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 14px; border-radius: 999px;
  margin-bottom: 10px;
}
.low-pill {
  display: inline-block;
  background: var(--apple-red-10, #ffe5e2); color: var(--apple-red-70, #c93222);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 14px; border-radius: 999px;
  margin-bottom: 10px;
  text-transform: capitalize;
}

.mastery-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.mastery-cell { text-align: center; padding: 18px 0; }
.mastery-cell .num { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }

/* Mastery table */
.mastery-table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--ink-10); border-radius: 14px;
  overflow: hidden; background: white;
  font-size: 14.5px;
}
.mastery-table thead th {
  background: var(--peechee-purple-10);
  text-align: left; padding: 14px 18px;
  font-size: 14px; font-weight: 700; color: var(--ink-90);
  border-bottom: 1px solid var(--ink-10);
}
.mastery-table tbody td {
  padding: 14px 18px;
  border-top: 1px solid var(--ink-10);
  vertical-align: middle;
}
.mastery-table tr.level-row td { font-weight: 700; cursor: pointer; }
.mastery-table tr.level-row.open td:first-child { box-shadow: inset 3px 0 0 var(--bt-blue-80); }
.mastery-table tr.level-row:hover td { background: var(--peechee-purple-10); }
.mastery-table tr.lesson-row td { background: white; font-weight: 400; }
.mastery-table tr.lesson-row td:first-child { color: var(--ink-90); }

/* Chart tooltip (black w/ arrow) */
.chart-tooltip {
  position: absolute; transform: translate(-50%, calc(-100% - 16px));
  background: #16111c; color: white;
  padding: 14px 16px; border-radius: 10px;
  font-size: 13px; min-width: 260px;
  pointer-events: none; z-index: 30;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.chart-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: #16111c;
}
.chart-tooltip .tt-row { display: flex; justify-content: space-between; gap: 24px; padding: 2px 0; }
.chart-tooltip .tt-row b { font-weight: 700; }
.mastery-cell .lbl { font-size: 14px; color: var(--ink-90); margin-top: 4px; }
.mastery-cell.green .num { color: var(--chalkboard-green-70); }
.mastery-cell.orange .num { color: var(--locker-orange-50); }
.mastery-cell.red .num { color: var(--apple-red-70); }

.chart-bars {
  height: 280px;
  display: flex; align-items: flex-end; justify-content: space-around;
  gap: 8px;
  padding: 14px 8px 0;
  position: relative;
  border-bottom: 1.5px solid var(--ink-30);
}
.chart-bar {
  flex: 1; max-width: 60px;
  background: var(--bt-blue-80);
  border-radius: 3px 3px 0 0;
  position: relative;
  cursor: pointer;
}
.chart-bar.strong { background: var(--bt-blue-30); }
.chart-bar.emerging { background: var(--spark-blue-30); }
.chart-bar.limited { background: var(--spark-blue-20); }
.chart-bar .label-top {
  position: absolute; left: 0; right: 0; top: -22px;
  text-align: center; font-size: 11px; font-weight: 600;
}
.chart-grid {
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.chart-grid > div { border-top: 1px solid var(--ink-10); }

.chart-x { display: flex; padding: 8px 8px 0; justify-content: space-around; font-size: 12px; color: var(--ink-70); }

.legend {
  display: flex; gap: 18px; font-size: 12.5px; color: var(--ink-70);
  align-items: center; justify-content: center; margin-top: 14px;
}
.legend .dot { width: 10px; height: 10px; border-radius: 999px; }

/* tooltip on hover */
.has-tip { position: relative; display: inline-flex; align-items: center; }
.has-tip .tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: #16111c; color: white; font-size: 11.5px;
  padding: 8px 12px; border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0; transition: opacity 140ms;
  z-index: 50;
}
.has-tip .tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #16111c;
}
.has-tip:hover .tip { opacity: 1; }

/* === Session Insights === */
.insight-tag {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.tag-tech       { background: var(--apple-red-10); color: var(--ink-90); }
.tag-accolades  { background: var(--chalkboard-green-10); color: var(--ink-90); }
.tag-behavior   { background: var(--apple-red-10); color: var(--ink-90); }
.tag-neutral    { background: var(--ink-10); color: var(--ink-90); }

.insights-tbl thead th { white-space: nowrap; }
.insights-tbl .checkbox { cursor: pointer; }
.insights-tbl .checkbox.on { background: var(--bt-blue-80); border-color: var(--bt-blue-80); }

.meta-row {
  display: flex; gap: 14px; margin-bottom: 12px;
  font-size: 14px;
}
.meta-row .meta-k {
  color: var(--ink-90); font-weight: 700;
  min-width: 170px;
}

.insight-row {
  display: grid; grid-template-columns: 220px 1fr 80px;
  gap: 18px; padding: 10px 0;
  align-items: flex-start;
  font-size: 14px;
}
.insight-row .insight-kind { font-weight: 700; }
.insight-row .insight-quote { color: var(--ink-90); }
.insight-row .timestamp { font-weight: 600; white-space: nowrap; text-align: right; }

.talktime-bar {
  display: flex; height: 36px; border-radius: 999px; overflow: hidden;
  background: var(--ink-10);
}
.talktime-slice {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: white;
  min-width: 36px;
}

/* === Attendance === */
.date-pill {
  background: white; border: 1.5px solid var(--ink-20);
  border-radius: 999px; padding: 9px 16px;
  font-size: 14px; color: var(--ink-90);
  display: inline-flex; align-items: center; gap: 10px;
}
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.between { justify-content: space-between; }
.grow { flex: 1; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 14px; } .mt-3 { margin-top: 22px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 14px; } .mb-3 { margin-bottom: 22px; }
.cap { text-transform: capitalize; }
.muted { color: var(--ink-50); }
.bold { font-weight: 700; }

/* Library */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.lib-card {
  background: white; border-radius: 14px; padding: 18px;
  border: 1px solid var(--ink-10);
  cursor: pointer;
  transition: all 140ms;
}
.lib-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.06); transform: translateY(-2px); }
.lib-card .tag { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; display: inline-block; margin-bottom: 8px; }
.lib-card .tag.fr { background: var(--bt-blue-20); color: var(--bt-blue-80); }
.lib-card .tag.ar { background: var(--spark-blue-20); color: var(--spark-blue-70); }
.lib-card .tag.math { background: var(--chalkboard-green-10); color: var(--chalkboard-green-70); }
.lib-card h4 { margin: 0 0 6px; font-weight: 600; font-size: 15px; }
.lib-card p { margin: 0; color: var(--ink-70); font-size: 13px; }

/* === Full-width tab bar (group page, library) === */
.tab-row.full {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
}
.tab-row.full .tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 24px;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
}
.tab-row.full .tab svg { width: 18px; height: 18px; }
.tab-row.full .tab .mat-ic { font-size: 18px; }
.tab-row.full .tab.active { background: var(--bt-blue-30); color: var(--dark, #22182B); }

/* === GROUP TABS — Schedule (mini-calendar) === */
.gs-month {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--ink-10);
  border-left: 1px solid var(--ink-10);
  background: white;
  border-radius: 8px; overflow: hidden;
}
.gs-month .h {
  font-size: 12px; color: var(--ink-70); font-weight: 500;
  padding: 8px 10px;
  border-right: 1px solid var(--ink-10);
}
.gs-month .c {
  min-height: 110px;
  border-right: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  padding: 8px 10px;
  position: relative;
  font-size: 13px;
}
.gs-month .c.no-school { background: var(--locker-orange-10); }
.gs-month .c.no-school .dt { color: var(--ink-50); }
.gs-month .c.other .dt { color: var(--ink-30); }
.gs-month .c .dt { font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.gs-month .c .nslabel { font-size: 12px; color: var(--ink-70); }
.gs-month .c .session {
  font-size: 11.5px; color: var(--ink-90);
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px;
}
.gs-month .c .session .dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; background: var(--chalkboard-green-50); }
.gs-month .c .session.pending .dot { background: var(--bt-blue-30,#D9DEFF); }
.gs-month .c .session.clickable { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin-left: -4px; transition: background 140ms var(--ease-out); align-items: flex-start; }
.gs-month .c .session.clickable:hover { background: var(--bt-blue-10,#F7F7FF); }
.gs-month .c .session .dot { margin-top: 4px; }
.gs-month .c .session-lesson { display: block; color: var(--ink-70); font-size: 11px; margin-top: 2px; }
.gs-month .c .dt .today-disc { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--apple-red-60,#FF2C23); color: #fff; font-weight: 500; }
.auto-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 4px; background: var(--bt-blue-15,#E8EBFF); color: var(--ink-90); font-size: 11px; font-weight: 500; }
.gs-month .c .session.noshow .dot { background: var(--apple-red-60); }
.gs-month .c .session.canceled .dot { background: var(--ink-30); }

.session-key-card {
  background: white; border-radius: 18px; border: 1px solid var(--ink-10);
  padding: 22px 26px; margin-top: 24px;
}
.session-key-card h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.session-key-card .row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13.5px; }
.session-key-card .ico {
  width: 18px; height: 18px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: white;
}

/* === GROUP TABS — Weekly Progress === */
.wp-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
.wp-cal .h {
  font-size: 12px; color: var(--ink-70); padding: 6px 8px;
}
.wp-cal .c {
  min-height: 130px;
  padding: 8px 10px;
  border-right: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  font-size: 13px;
  background: white;
}
.wp-cal .c:first-child { border-left: 1px solid var(--ink-10); }
.wp-cal .c.first-row { border-top: 1px solid var(--ink-10); }
.wp-cal .c .dt { font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--ink-90); }
.wp-cal .c .ev {
  background: var(--chalkboard-green-10);
  border-radius: 8px; padding: 8px 10px;
  font-size: 12px;
}
.wp-cal .c .ev .t { font-weight: 700; color: var(--ink-90); }
.wp-cal .c .ev .ls { color: var(--bt-blue-80); font-weight: 600; margin-top: 4px; }

.att-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: white; border: 1px solid var(--ink-10); border-radius: 12px; overflow: hidden;
}
.att-table th, .att-table td {
  padding: 14px; text-align: center; border-bottom: 1px solid var(--ink-10);
}
.att-table th:first-child, .att-table td:first-child { text-align: left; }
.att-table thead th { font-weight: 600; color: var(--ink-90); }
.att-table tbody tr:last-child td { border-bottom: none; }
.att-table .session-status-row td {
  background: var(--chalkboard-green-10); color: var(--chalkboard-green-70); font-weight: 700;
}
.att-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  color: white;
}
.att-icon.present { background: var(--bt-blue-80); }
.att-icon.absent { background: var(--apple-red-60); }

.skill-cell {
  border-radius: 10px; padding: 14px 16px;
  font-size: 13.5px;
}
.skill-cell.mastered { background: var(--chalkboard-green-10); }
.skill-cell.mastered .skill-status { color: var(--chalkboard-green-70); font-size: 12.5px; font-weight: 500; margin-top: 4px; }
.skill-cell.progressing { background: var(--locker-orange-10); }
.skill-cell.progressing .skill-status { color: var(--locker-orange-60); font-size: 12.5px; font-weight: 500; margin-top: 4px; }
.skill-cell.empty { background: transparent; }
.skill-cell .skill-name { color: var(--ink-90); font-weight: 600; }

/* === GROUP TABS — Student Performance === */
.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: white;
  border: 1px solid var(--ink-10);
  border-radius: 12px;
  overflow: hidden;
}
.sp-table th, .sp-table td {
  border: 1px solid var(--ink-10);
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
}
.sp-table thead th { background: white; font-weight: 700; color: var(--ink-90); font-size: 13px; }
.sp-table thead .complete-sub { font-weight: 400; font-size: 12px; color: var(--ink-70); display: block; margin-top: 2px; }
.act-table .act-level-row { cursor: pointer; background: var(--bt-blue-10,#F7F7FF); }
.act-table .act-level-row:hover { background: var(--bt-blue-15,#E8EBFF); }
.act-table .act-lesson-row td:first-child { color: var(--ink-90); }
.act-table .pct.act-chip { min-width: 104px; text-align: center; font-size: 12.5px; }
.sp-table .pct {
  display: inline-block; padding: 5px 14px; border-radius: 6px;
  font-weight: 600; font-size: 13px;
}
.sp-table .pct.mastery { background: var(--chalkboard-green-10); color: var(--chalkboard-green-70); }
.sp-table .pct.progressing { background: var(--locker-orange-10); color: var(--locker-orange-60); }
.sp-table .pct.need { background: var(--apple-red-10); color: var(--apple-red-70); }
.sp-table .pct.na { background: var(--ink-10); color: var(--ink-70); }
.sp-table .total-row td { border-top: 2px solid var(--ink-90); border-bottom: 2px solid var(--ink-90); font-weight: 700; }
.sp-table .avg-col, .sp-table th.avg-col, .sp-table td.avg-col { border-left: 2px solid var(--ink-90); }

.legend-row {
  display: flex; gap: 22px; align-items: center; justify-content: flex-end;
  font-size: 12.5px; color: var(--ink-70);
  margin-top: 18px;
}
.legend-row .dot { width: 12px; height: 12px; border-radius: 999px; display: inline-block; margin-right: 6px; }

/* === LIBRARY (curriculum tree + viewer) === */
.lib-shell { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: stretch; }
.lib-tree {
  background: white; border-radius: 18px;
  padding: 20px 18px;
  border: 1px solid var(--ink-10);
  position: sticky; top: 134px;
}
.lib-tree h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; padding: 0 8px; }
.lib-node {
  padding: 9px 10px;
  font-size: 14.5px; color: var(--ink-90);
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  user-select: none;
}
.lib-node:hover { background: var(--peechee-purple-10); }
.lib-node .chev { color: var(--ink-50); display: inline-flex; transition: transform 140ms; flex-shrink: 0; }
.lib-node.open .chev { transform: rotate(180deg); }
.lib-node .lbl { flex: 1; }
.lib-children { padding-left: 18px; }
.lib-leaf {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink-90);
  cursor: pointer;
  border-radius: 8px;
}
.lib-leaf-mark {
  display: inline-block;
  color: var(--bt-blue-80);
  font-weight: 900;
  margin-left: 6px;
  font-size: 13px;
  vertical-align: 1px;
}
.lib-leaf-external {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none;
  color: var(--ink-90);
}
.lib-leaf-external:hover { background: var(--peechee-purple-10); color: var(--bt-blue-80); }
.math-activity-photo {
  margin-top: 14px;
  border: 2px solid var(--ink-90);
  border-radius: 14px;
  min-height: 260px;
  background: white;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.math-activity-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* AR Passage (Dalai Lama) */
.ar-passage-frame {
  background: #2ec3f4;
  border-radius: 4px;
  width: 100%; max-width: 1100px;
  aspect-ratio: 16/9;
  padding: 30px 80px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.ar-passage-num {
  position: absolute; top: 24px; left: 60px;
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--bt-blue-80); color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
}
.ar-passage-logo { position: absolute; top: 16px; right: 90px; height: 26px; }
.ar-passage-inner {
  background: white;
  border-radius: 10px;
  padding: 30px 44px;
  max-width: 760px; width: 100%;
  height: 100%;
  overflow-y: auto;
  font-size: 14px; line-height: 1.5; color: var(--ink-90);
}
.ar-passage-intro { font-weight: 700; margin-bottom: 12px; }
.ar-passage-title { text-align: center; text-decoration: underline; font-size: 18px; margin: 0 0 16px; font-weight: 700; }
.ar-passage-inner p { margin: 0 0 12px; }
.lib-leaf:hover { background: var(--peechee-purple-10); }
.lib-leaf.active { color: var(--bt-blue-80); font-weight: 700; }

.lib-viewer {
  background: white;
  border-radius: 18px;
  border: 1px solid var(--ink-10);
  display: flex; flex-direction: column;
  height: 100%;
  min-height: calc(100vh - 70px - 56px - 28px);
  overflow: hidden;
}
.lib-viewer-head {
  padding: 18px 26px;
  border-bottom: 1px solid var(--ink-10);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.lib-viewer-head h2 { margin: 0; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-viewer-head .actions { display: flex; gap: 20px; }
.lib-viewer-head .actions .link { display: inline-flex; align-items: center; gap: 6px; }
.lib-viewer-body {
  flex: 1 1 0; min-height: 0; overflow-y: auto;
  padding: 18px 22px;
  background: var(--peechee-purple-10);
}

/* Library: assessment item card */
.lib-item {
  background: white;
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 16px;
}
.lib-item-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  font-size: 13px;
}
.lib-item-head .left { display: flex; align-items: center; gap: 10px; color: var(--ink-70); }
.lib-item-head .num { font-weight: 600; color: var(--ink-90); }
.lib-item-head .lesson-tag { color: var(--ink-90); font-weight: 500; }
.lib-item-body { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.lib-item-q { font-size: 14.5px; color: var(--ink-90); }
.lib-item-q .lbl { font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.audio-ico {
  background: var(--spark-blue-40); color: white;
  width: 24px; height: 24px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.audio-ico.playable {
  cursor: pointer;
  transition: transform 100ms;
}
.audio-ico.playable:hover { transform: scale(1.06); }
.audio-ico.playable:active { transform: scale(0.96); }
.audio-ico .audio-asterisk {
  position: absolute; top: -7px; right: -2px;
  color: var(--bt-blue-80); font-weight: 900; font-size: 14px;
  line-height: 1;
  pointer-events: none;
}
.audio-ico.img-overlay,
.audio-ico.img-overlay-kiosk {
  position: absolute; top: 10px; left: 10px; z-index: 2;
}
.audio-ico.img-overlay-kiosk { top: -10px; left: -10px; }
.lib-item-q .ins { display: flex; gap: 8px; align-items: center; }
.lib-item-q .ph {
  margin-top: 14px;
  height: 180px;
  background: repeating-linear-gradient(45deg, var(--peechee-purple-10), var(--peechee-purple-10) 8px, white 8px, white 16px);
  border: 1px dashed var(--ink-30); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-50); font-family: monospace; font-size: 12px;
}
.lib-item-photo {
  margin-top: 14px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink-10);
  aspect-ratio: 1.1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.lib-item-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lib-item-letters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lib-letter-tile {
  background: var(--peechee-purple-30);
  border: 2px solid var(--ink-90);
  border-radius: 16px;
  aspect-ratio: 1.1;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; font-weight: 700;
  position: relative;
}
.lib-letter-tile::before {
  content: ''; position: absolute; bottom: 10px; right: 10px;
  width: 16px; height: 16px; border-radius: 999px;
  border: 1.5px solid var(--ink-90); background: white;
}
.lib-letter-tile.correct::before {
  background: var(--chalkboard-green-50); border-color: var(--chalkboard-green-50);
}

/* AR (Advanced Reading) options layout — vertical list with radio + text */
.lib-item-body.ar { grid-template-columns: 1fr 1fr; align-items: flex-start; }
.ar-options { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.ar-option { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink-90); line-height: 1.4; }
.ar-radio {
  width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--ink-30);
  background: white; flex-shrink: 0; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
}
.ar-radio.correct { background: var(--chalkboard-green-50); border-color: var(--chalkboard-green-50); }

/* Math options layout */
.math-photo {
  margin-top: 14px;
  border: 1.5px solid var(--ink-30);
  border-radius: 12px; overflow: hidden;
  background: var(--ink-10);
  aspect-ratio: 1.2;
  position: relative;
}
.math-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.math-options { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.math-option { display: flex; gap: 12px; align-items: center; }
.math-free-answer {
  background: var(--bt-blue-10); color: var(--ink-90);
  border-radius: 10px; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 4px;
}

/* === DOC viewer (lesson plan) === */
.doc-page {
  background: white;
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  padding: 32px 44px 26px;
  margin: 0 auto 18px;
  max-width: 880px;
  color: var(--ink-90);
  position: relative;
}
.doc-logo { position: absolute; top: 22px; right: 28px; height: 32px; }
.doc-page h1 { font-size: 22px; text-align: center; margin: 18px 0 22px; font-weight: 700; }
.doc-page h3 { font-size: 16px; margin: 18px 0 8px; font-weight: 700; }
.doc-page p, .doc-page li { font-size: 14px; line-height: 1.55; }
.doc-page ol, .doc-page ul { padding-left: 22px; margin: 8px 0; }
.doc-page ul ul, .doc-page ol ul, .doc-page ul ol { margin-top: 4px; }
.doc-page .step-h { font-weight: 700; font-size: 15px; margin: 16px 0 6px; }
.doc-page .step-h i { font-style: italic; font-weight: 600; color: var(--ink-70); }
.doc-page .pg { font-size: 12px; color: var(--ink-90); font-weight: 700; margin-top: 26px; }
.doc-page .legal { font-size: 10.5px; color: var(--ink-70); text-align: center; margin-top: 6px; line-height: 1.5; }
.doc-page a { color: var(--bt-blue-80); }

/* === Floating Tweaks FAB (always-available toggle) === */
.tweaks-fab {
  position: fixed; right: 20px; bottom: 20px;
  background: var(--peechee-purple-90); color: white;
  border: none; border-radius: 999px;
  padding: 12px 20px; font-family: inherit; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; z-index: 199;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: transform 140ms, box-shadow 140ms;
}
.tweaks-fab:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,0.22); }
.tweaks-fab svg { width: 18px; height: 18px; }
.tweaks-fab .mat-ic { font-size: 18px; }

/* === Teaching Slides v2 (click to advance) === */
.slide-deck-v2 {
  width: 100%; height: 100%;
  background: #000;
  padding: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
}
.slide-deck-v2 > * { width: 100%; max-width: 1100px; aspect-ratio: 16/9; }

.math-slide { background: #2ec3f4; border-radius: 4px; padding: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.math-frame {
  background: white; border-radius: 18px;
  width: 88%; height: 78%;
  padding: 36px 60px;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.math-logo {
  position: absolute; top: 18px; right: 22px;
  font-family: inherit; font-weight: 700; color: #18bcd6; font-size: 18px;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.math-logo small { font-weight: 400; color: var(--ink-90); font-size: 12px; }
.math-title { font-size: 56px; font-weight: 800; margin: 0; line-height: 1.1; color: #2b2b3d; letter-spacing: -0.02em; }
.math-sub { font-size: 30px; color: #2b2b3d; margin: 22px 0 0; font-weight: 600; line-height: 1.25; }
.math-welcome { font-size: 38px; font-weight: 700; max-width: 800px; color: #2b2b3d; line-height: 1.2; margin: 0; }
.math-step-badge {
  position: absolute; top: 32px; left: 32px;
  background: #ed3a3a; color: white;
  width: 100px; height: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.math-stars { position: absolute; }
.math-stars-bl { bottom: 40px; left: 50px; }

.ar-slide { background: #2ec3f4; border-radius: 4px; padding: 60px 70px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.ar-num { position: absolute; top: 28px; left: 36px; width: 46px; height: 46px; background: var(--bt-blue-80); color: white; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; z-index: 2; }
.ar-warmup { font-size: 50px; font-weight: 800; color: white; margin: 0 0 30px; line-height: 1.1; z-index: 2; position: relative; }
.ar-question { font-size: 38px; font-weight: 700; color: white; margin: 0 0 40px; }
.ar-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; width: 100%; }
.ar-word-card {
  background: white; border-radius: 6px;
  padding: 60px 16px;
  display: flex; align-items: center; justify-content: center;
  position: relative; min-height: 180px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.10);
}
.ar-tape {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 80px; height: 22px; opacity: 0.92;
}
.ar-tape-piece { background: #f266b3; position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 110px; height: 26px; opacity: 0.92; }
.ar-word { font-size: 30px; font-weight: 700; color: #2b2b3d; }
.ar-review-card { min-height: 240px; padding: 38px 22px; }
.ar-review-text { font-size: 22px; font-weight: 600; color: #2b2b3d; line-height: 1.25; text-align: center; }
.ar-title-card {
  background: white; border-radius: 8px;
  padding: 80px 60px;
  position: relative;
  max-width: 760px; width: 80%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  text-align: center;
}
.ar-title { font-size: 76px; font-weight: 800; margin: 0; color: #2b2b3d; letter-spacing: -0.02em; }
.ar-subtitle { font-size: 26px; color: #2b2b3d; margin: 16px 0 0; font-weight: 500; }
.ar-blob { position: absolute; }
.ar-blob-pencil { top: 70px; left: 90px; width: 200px; height: 60px; background: #ee5e26; transform: rotate(15deg); border-radius: 8px; }
.ar-blob-marker { top: 90px; right: 120px; width: 140px; height: 38px; background: #ed3a3a; transform: rotate(-12deg); border-radius: 4px; }
.ar-blob-eraser { bottom: 80px; right: 80px; width: 130px; height: 70px; background: #f266b3; border-radius: 8px; transform: rotate(-8deg); }
.ar-blob-scribble { bottom: 70px; right: 220px; width: 90px; height: 90px; background: #3c01f7; border-radius: 8px; transform: rotate(8deg); opacity: 0.92; }
.ar-ness-banner {
  background: white; padding: 14px 50px;
  font-size: 70px; font-weight: 800; color: #2b2b3d;
  border-radius: 12px;
  margin: 14px auto 28px;
  display: inline-block;
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}
.ar-ness-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; width: 100%; max-width: 1100px; margin: 0 auto; }
.ar-ness-text { background: white; padding: 28px; border-radius: 12px; font-size: 17px; color: #2b2b3d; line-height: 1.5; }
.ar-ness-text p { margin: 0 0 12px; }
.ar-note { font-style: italic; color: var(--ink-70); font-size: 14px; }
.ar-ness-examples { background: white; padding: 28px; border-radius: 12px; font-size: 18px; color: #2b2b3d; line-height: 1.6; }
.ar-ness-examples p { margin: 0 0 12px; }
.ar-darkness-card {
  background: white; border-radius: 6px;
  padding: 80px 100px;
  position: relative;
  margin: 40px auto 0;
  display: inline-block;
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
}
.ar-darkness-card .ar-word { font-size: 60px; }

.fr-slide { background: #2ec3f4; border-radius: 4px; padding: 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fr-frame {
  background: white; border-radius: 18px;
  width: 88%; height: 78%;
  padding: 30px 60px;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.fr-frame.fr-yellow { background: #fff37e; }
.fr-logo {
  position: absolute; top: 18px; right: 22px;
  font-family: inherit; font-weight: 700; color: #18bcd6; font-size: 18px;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.fr-logo small { font-weight: 400; color: var(--ink-90); font-size: 12px; }
.fr-lesson-badge {
  position: absolute; top: 28px; left: 36px;
  background: #f4c020; color: #2b2b3d;
  width: 110px; height: 110px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px; line-height: 1.1; text-align: center;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.fr-step-badge {
  position: absolute; top: 28px; left: 36px;
  background: #ed3a3a; color: white;
  width: 100px; height: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.fr-today { font-size: 48px; font-weight: 800; color: #2b2b3d; margin: 0 0 30px; letter-spacing: -0.01em; }
.fr-sh-row { display: flex; align-items: center; gap: 70px; margin-top: 8px; }
.fr-ship-emoji { font-size: 96px; }
.fr-sh-big { font-size: 200px; font-weight: 800; color: #2b2b3d; letter-spacing: -0.04em; line-height: 1; }
.fr-stars { position: absolute; bottom: 50px; right: 70px; }
.fr-practice { font-size: 64px; font-weight: 800; color: #2b2b3d; margin: 20px 0 50px; }
.fr-question-row { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; max-width: 760px; width: 100%; margin: 0 auto; }
.fr-question-card {
  background: var(--bt-blue-80); color: white;
  border-radius: 16px;
  padding: 38px 28px;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 200px;
  font-weight: 700; font-size: 26px; text-align: center;
  box-shadow: 0 8px 20px rgba(60,1,247,0.18);
}
.fr-ear { position: absolute; top: -20px; left: -20px; font-size: 56px; }
.fr-q-num { position: absolute; top: 12px; right: 16px; font-size: 16px; opacity: 0.7; }
.fr-q-text { line-height: 1.25; }
.fr-big-letter { font-size: 320px; font-weight: 800; color: #2b2b3d; letter-spacing: -0.06em; line-height: 1; }
.drawer-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--ink-90);
  font-weight: 500;
}

/* Agenda redesign — students column, item column */
.agenda-tab .agenda-title {
  margin: 0;
  font-size: var(--size-h3, 24px);
  font-weight: 600;
  color: var(--text-black, #121212);
  letter-spacing: -0.01em;
}
.agenda-tab .agenda-intro {
  color: var(--ink-90);
  margin: 0 0 24px;
  font-size: 14px;
  max-width: 720px;
  line-height: 1.55;
}
.agenda-list {
  display: flex; flex-direction: column; gap: 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.agenda-block {
  display: grid; grid-template-columns: 140px 1fr auto;
  gap: 24px;
  padding: 22px 28px;
  background: white;
  border: 1px solid var(--ink-10);
  border-radius: var(--round, 16px);
  align-items: flex-start;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.agenda-block:hover {
  border-color: var(--bt-blue-30, #c9cdff);
  box-shadow: 0 2px 8px rgba(28,32,90,0.04);
}
.agenda-block .stu-col {
  color: var(--text-black, #121212);
  font-size: 14px;
  font-weight: 400;
  padding-top: 2px;
}
.agenda-block .stu-col div { margin-bottom: 4px; }
.agenda-block .stu-col div:last-child { margin-bottom: 0; }
.agenda-block .item-col { color: var(--text-black, #121212); font-size: 14px; padding-top: 2px; min-width: 0; }
.agenda-block .item-col .title {
  font-weight: 600;
  line-height: 1.5;
}
.agenda-block .item-col .title .inline-preview {
  font-weight: 400;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: baseline;
}
.agenda-block .item-col .title .agenda-tag {
  margin-left: 10px;
  vertical-align: middle;
  font-weight: 400;
}
.agenda-block .item-col .res {
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
}
.agenda-block .item-col .res a {
  color: var(--bt-blue-80); font-weight: 500;
  text-decoration: none;
  display: inline-flex; gap: 3px; align-items: center;
  width: fit-content;
  white-space: nowrap;
}
.agenda-block .item-col .res a:hover { text-decoration: underline; text-underline-offset: 2px; }
.agenda-block .act-col {
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding-top: 2px;
  justify-self: end;
}

.agenda-tag {
  display: inline-flex;
  background: var(--locker-orange-10);
  color: var(--text-black, #121212);
  padding: 4px 12px;
  border-radius: var(--round-extra-small, 4px);
  font-size: 13px;
  font-weight: 400;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Agenda status indicators */
.agenda-status {
  font-size: 14px;
  font-weight: 400;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.agenda-status .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--text-black, #121212);
  display: inline-block;
}
.agenda-status.in-progress { color: var(--text-black, #121212); }
.agenda-status.in-progress .dot { animation: agenda-status-blink 1.2s ease-in-out infinite; }
@keyframes agenda-status-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .agenda-status.in-progress .dot { animation: none; }
}
.agenda-status.complete { color: var(--green-50, #1F8A5B); }
.agenda-status.not-started { color: var(--apple-red-60, #FF2C23); }

.edit-agenda-link {
  margin-top: 28px;
  display: inline-block;
  color: var(--bt-blue-80);
  font-weight: 600;
  font-size: 14px;
  background: none; border: none;
  cursor: pointer; padding: 0;
  font-family: inherit;
  white-space: nowrap;
}
.edit-agenda-link, .edit-agenda-link:hover { text-decoration: none; }

/* Drawer controls trigger */
.drawer-controls-btn {
  background: none; border: none;
  color: var(--bt-blue-80); font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; font-size: 14px; font-family: inherit;
}
.drawer-popover {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 320px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.14);
  border: 1px solid var(--ink-10);
  z-index: 40;
  overflow: hidden;
}
.drawer-rows { padding: 4px 0; }
.drawer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--ink-10);
  font-size: 15px; color: var(--ink-90);
}
.drawer-row:last-child { border-bottom: none; }
.drawer-popover-footer {
  display: flex; gap: 12px; padding: 14px 18px;
  background: var(--peechee-purple-10);
  border-top: 1px solid var(--ink-10);
}
.drawer-popover-footer button {
  flex: 1; padding: 9px 14px;
  border-radius: 999px; border: 1.5px solid;
  background: white; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-open-all { color: var(--chalkboard-green-70); border-color: var(--chalkboard-green-50); }
.btn-open-all:hover { background: var(--chalkboard-green-10); }
.btn-close-all { color: var(--apple-red-70); border-color: var(--apple-red-60); }
.btn-close-all:hover { background: var(--apple-red-10); }

/* Drawer switch pill (replaces .switch) */
.switch-pill {
  position: relative;
  width: 56px; height: 28px; border-radius: 999px;
  background: var(--chalkboard-green-50);
  border: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center;
  transition: background 160ms;
}
.switch-pill.off { background: var(--apple-red-60); }
.switch-pill .knob {
  position: absolute; top: 3px;
  width: 22px; height: 22px; border-radius: 999px; background: white;
  display: inline-flex; align-items: center; justify-content: center;
  transition: left 160ms;
  color: var(--chalkboard-green-50);
}
.switch-pill .knob { left: calc(100% - 25px); }
.switch-pill.off .knob { left: 3px; color: var(--apple-red-60); }

/* Sub-tabs for student switching inside Pre-Assessment tab — segmented pill */
.sub-tab-row {
  display: inline-flex;
  padding: 0;
  background: white;
  border-radius: 999px;
  border: 2px solid #22182B;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.sub-tab {
  padding: 10px 28px;
  border-radius: 999px;
  background: white;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #22182B;
  transition: background 140ms ease, color 140ms ease;
}
.sub-tab:hover:not(.active) { background: var(--ink-05, #F7F7FA); }
.sub-tab.active {
  background: #22182B;
  color: white;
  box-shadow: none;
}

/* score table */
.score-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.score-table th, .score-table td {
  text-align: left; padding: 14px;
  border: 1px solid var(--ink-10);
  vertical-align: middle;
}
.score-table thead th { font-weight: 700; color: var(--ink-90); background: white; }
.score-table tbody tr:nth-child(odd) td { background: var(--peechee-purple-10); }
.score-table tbody tr:nth-child(even) td { background: white; }
.score-table thead th.answer-key, .score-table td.answer-key { border-left: 2px solid var(--ink-90); border-right: 2px solid var(--ink-90); }
.score-table .score-row td { background: #16111c !important; color: white; font-weight: 700; padding: 12px 14px; }
.score-table .score-row td.answer-key { background: #16111c !important; border-color: var(--ink-90); }
.score-table .pending { color: var(--ink-50); font-style: italic; }
.score-table .progress { color: var(--ink-70); font-style: italic; }
.score-table .letter-tile {
  background: var(--peechee-purple-30);
  border: 1.5px solid var(--ink-70);
  border-radius: 8px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
}
.score-table td.right, .score-table tbody tr td.right { background: var(--chalkboard-green-10) !important; color: var(--chalkboard-green-70); font-weight: 600; }
.score-table td.wrong, .score-table tbody tr td.wrong { background: var(--apple-red-10) !important; color: var(--apple-red-70); font-weight: 600; }

/* Launched! pill in session panel */
.launched-pill {
  position: fixed; bottom: 24px; left: 50px;
  background: var(--chalkboard-green-10); color: var(--chalkboard-green-70);
  padding: 10px 22px; border-radius: 999px;
  display: inline-flex; gap: 8px; align-items: center;
  font-weight: 700; font-size: 14px;
  z-index: 30;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* My Students filters */
.search-row { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.search-input {
  background: white; border: 1.5px solid var(--ink-20); border-radius: 999px;
  padding: 10px 18px 10px 42px; font-size: 14px;
  flex: 1; max-width: 600px;
  font-family: inherit;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 18px;
}
.search-input:focus { outline: none; border-color: var(--bt-blue-80); }


/* ====== TEACHING INSIGHTS (System Manager) ====== */
.upnext.with-rec { padding: 12px 24px 14px; }
.upnext-rec {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.55);
  border-left: 3px solid var(--bt-blue-80);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-90);
}
.upnext-rec-icon {
  width: 22px; height: 22px; border-radius: 999px;
  background: white;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.upnext-rec-icon img { width: 16px; height: 16px; }

.sm-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--bt-blue-30);
  color: var(--bt-blue-80);
  letter-spacing: 0.04em;
  margin-right: 4px;
  vertical-align: 1px;
}
.tab-row .tab.active .sm-badge { background: var(--bt-blue-80); color: white; }

/* Letter-grade pill */
.ti-grade-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--ink-10);
  color: var(--ink-90);
}
.ti-grade-pill b { font-weight: 700; }
.ti-grade-pill.big {
  padding: 8px 18px; font-size: 18px;
  margin-top: 4px;
}
.ti-grade-pill.ti-grade-a { background: #d5efd9; }
.ti-grade-pill.ti-grade-b { background: #dfdfff; }
.ti-grade-pill.ti-grade-c { background: #ffe3c8; }
.ti-grade-pill.ti-grade-d { background: #ffd6d6; }

.ti-legend {
  display: inline-flex; gap: 18px; align-items: center;
  font-size: 12.5px; color: var(--ink-70);
  flex-wrap: wrap;
}
.ti-legend .dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; margin-right: 6px; vertical-align: -1px; }

.ti-card { padding-bottom: 30px; }
.ti-search { width: 100%; max-width: 720px; }
.ti-mode-toggle {
  display: inline-flex; background: var(--peechee-purple-90);
  padding: 3px; border-radius: 999px; gap: 2px;
}
.ti-mode-toggle button {
  padding: 8px 22px; font-size: 13px; font-weight: 600;
  background: transparent; border: none; border-radius: 999px;
  cursor: pointer; color: rgba(255,255,255,0.75); font-family: inherit;
}
.ti-mode-toggle button.active { background: white; color: var(--ink-90); }

.ti-week-picker { position: relative; display: inline-block; }
.ti-week-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: white;
  border: 1px solid var(--ink-20);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  z-index: 60;
  padding: 6px;
  min-width: 180px;
}
.ti-week-item {
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.ti-week-item:hover { background: var(--peechee-purple-10); }
.ti-week-item.selected { background: var(--bt-blue-10); color: var(--bt-blue-80); font-weight: 600; }

.ti-tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  background: white;
}
.ti-tbl { font-size: 13.5px; }
.ti-tbl thead th {
  background: var(--peechee-purple-10);
  font-size: 12.5px;
  padding: 12px 12px;
  white-space: nowrap;
}
.ti-tbl tbody td {
  padding: 12px 12px;
  vertical-align: middle;
  white-space: nowrap;
}
.ti-tbl tbody td b { font-weight: 700; }
.ti-tbl tr.ti-flag {
  background: linear-gradient(90deg, rgba(255, 214, 214, 0.45), rgba(255, 214, 214, 0) 60%);
}
.ti-tbl tr.ti-flag td:first-child { box-shadow: inset 3px 0 0 var(--apple-red-60); }

.ti-flag-mark {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--apple-red-70);
  margin-right: 6px;
  vertical-align: -2px;
}

/* ----- Detail modal ----- */
.ti-modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 18px; gap: 18px; flex-wrap: wrap;
}
.ti-summary-tile {
  text-align: center;
  min-width: 130px;
}
.ti-summary-pill {
  display: inline-block;
  background: var(--peechee-purple-10);
  font-size: 12px; font-weight: 700;
  padding: 2px 12px;
  border-radius: 6px;
  margin-bottom: 6px;
}
.ti-summary-num {
  font-size: 38px; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em;
}
.ti-summary-lbl {
  font-size: 12px; color: var(--ink-70);
  font-weight: 600;
  margin-top: 6px;
}

.ti-scores-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  margin-bottom: 14px;
}
.ti-score-cell { text-align: center; }
.ti-score-num { font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.ti-score-lbl { font-size: 12.5px; color: var(--ink-70); margin-top: 6px; font-weight: 600; }

.ti-cat-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
.ti-cat-card {
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  background: white;
  overflow: hidden;
}
.ti-cat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
}
.ti-cat-head:hover { background: var(--peechee-purple-10); }
.ti-cat-score {
  padding: 4px 12px; border-radius: 6px;
  font-size: 13px; font-weight: 700;
}
.ti-cat-score.good { background: #d5efd9; color: #1f7a35; }
.ti-cat-score.ok   { background: #dfdfff; color: var(--bt-blue-80); }
.ti-cat-score.low  { background: #ffe3c8; color: #b75d12; }
.ti-cat-score.bad  { background: #ffd6d6; color: var(--apple-red-70); }
.ti-cat-body { padding: 0 18px 18px; border-top: 1px solid var(--ink-10); padding-top: 14px; }
.ti-finding { font-size: 13.5px; line-height: 1.6; color: var(--ink-90); margin: 0 0 14px; }

.ti-distribution { margin: 14px 0; }
.ti-dist-row {
  display: flex; align-items: flex-end; gap: 8px;
  height: 64px;
  padding: 6px 4px 0;
  border-bottom: 1px solid var(--ink-10);
}
.ti-dist-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ti-dist-bar {
  width: 100%;
  background: var(--ink-20);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
}
.ti-dist-bar-wrap.me .ti-dist-bar { background: var(--bt-blue-80); }
.ti-dist-bar-lbl { font-size: 11px; color: var(--ink-70); }
.ti-dist-bar-wrap.me .ti-dist-bar-lbl { font-weight: 700; color: var(--bt-blue-80); }

.ti-recommendation {
  background: var(--bt-blue-10);
  border-left: 3px solid var(--bt-blue-80);
  border-radius: 8px;
  padding: 12px 14px;
}
.ti-rec-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink-90);
  margin-bottom: 6px;
}
.ti-rec-icon {
  width: 22px; height: 22px; border-radius: 999px;
  background: white;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ti-rec-icon img { width: 16px; height: 16px; }
.ti-rec-body { font-size: 13.5px; line-height: 1.6; color: var(--ink-90); }

@media (max-width: 1100px) {
  .ti-cat-grid { grid-template-columns: 1fr; }
  .ti-scores-strip { grid-template-columns: repeat(3, 1fr); }
}


/* ====== TUTOR REPORT PAGE (full-page Teaching Insights) ====== */
.tutor-report { padding: 28px 36px 80px; }
.tutor-report-title {
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
  margin: 6px 0 18px;
  color: var(--ink-90);
}
.tutor-report-title u { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tutor-report-subtitle {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  margin: -8px 0 18px;
}

.tutor-report-summary { padding: 26px 28px; }

.tr-score-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto auto;
  gap: 8px;
  align-items: end;
}
.tr-score-cell {
  text-align: center;
  padding: 4px 8px;
  position: relative;
}
.tr-score-cell.divider {
  border-left: 1px solid var(--ink-10);
  padding-left: 22px;
  margin-left: 6px;
}
.tr-score-cell.with-pill { padding-top: 0; }
.tr-score-num {
  font-size: 48px; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em;
}
.tr-score-lbl {
  font-size: 13px; color: var(--ink-90);
  margin-top: 8px;
  white-space: nowrap;
}
.tr-score-grade-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  font-size: 14px; font-weight: 700;
  margin: 0 auto 6px;
  color: var(--ink-90);
}
.tr-score-grade-pill.ti-grade-a { background: #bbe6c5; color: #1f7a35; }
.tr-score-grade-pill.ti-grade-b { background: #c6c8ff; color: var(--bt-blue-80); }
.tr-score-grade-pill.ti-grade-c { background: #ffe1c6; color: #b75d12; }
.tr-score-grade-pill.ti-grade-d { background: #ffd0d0; color: var(--apple-red-70); }

.tr-cat-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.tr-cat-col { display: flex; flex-direction: column; gap: 16px; }
.tr-cat-card {
  background: white;
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  overflow: hidden;
}
.tr-cat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  cursor: pointer;
  user-select: none;
}
.tr-cat-head:hover { background: var(--peechee-purple-20); }
.tr-cat-score {
  padding: 5px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 700;
  background: var(--ink-10);
}
.tr-cat-score.good { background: #d5efd9; color: #1f7a35; }
.tr-cat-score.ok   { background: #dfdfff; color: var(--bt-blue-80); }
.tr-cat-score.low  { background: #ffe3c8; color: #b75d12; }
.tr-cat-score.bad  { background: #ffd6d6; color: var(--apple-red-70); }

.tr-cat-body {
  padding: 4px 22px 22px;
}
.tr-finding {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-90);
  margin: 0 0 16px;
}

.tr-recommendation {
  background: var(--bt-blue-10);
  border-left: 3px solid var(--bt-blue-80);
  border-radius: 10px;
  padding: 14px 16px;
}
.tr-rec-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; color: var(--ink-90);
  margin-bottom: 8px;
}
.tr-rec-icon {
  width: 24px; height: 24px; border-radius: 999px;
  background: white;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tr-rec-icon img { width: 17px; height: 17px; }
.tr-rec-body {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-90);
}

@media (max-width: 1100px) {
  .tr-cat-cols { grid-template-columns: 1fr; }
  .tr-score-strip { grid-template-columns: repeat(4, 1fr); }
  .tr-score-cell.divider { border-left: none; padding-left: 8px; margin-left: 0; }
}

/* ====== STUDENT PROFILE PAGE ====== */
/* Full-width left-aligned dark pill tab bar (Student / Schedule / Session History) */
.tab-row.wide {
  display: flex; width: 100%;
  justify-content: flex-start;
  padding: 0;
  height: 44px;
}
.tab-row.wide .tab {
  flex: 0 1 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 26px;
  font-size: 15px;
}
.tab-row.wide .tab svg { width: 16px; height: 16px; }
.tab-row.wide .tab .mat-ic { font-size: 16px; }

.sp-stack { display: flex; flex-direction: column; gap: 22px; }
.sp-top-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 22px; align-items: start; }
.sp-card-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }

.sp-kebab {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--ink-20); background: white; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
}
.sp-kebab span { width: 4px; height: 4px; border-radius: 999px; background: var(--ink-70); display: block; }

.sp-details { display: flex; flex-direction: column; }
.sp-drow {
  display: grid; grid-template-columns: 180px 1fr; gap: 16px;
  padding: 9px 0; font-size: 14px; align-items: center;
}
.sp-drow .k { color: var(--ink-90); font-weight: 500; }
.sp-drow .v { color: var(--ink-90); }
.data-tag {
  display: inline-block; padding: 3px 12px; border-radius: 6px;
  background: var(--ink-10); color: var(--ink-90);
  font-size: 12px; font-weight: 600;
}

.sp-table-wrap { overflow-x: auto; }
.sp-tbl thead th {
  font-size: 13px; font-weight: 600; color: var(--ink-90);
  background: var(--bg-light, #FAFAFC);
  white-space: nowrap;
}
.sp-tbl thead th .filter-glyph { color: var(--ink-30); margin-left: 6px; vertical-align: -3px; }
.sp-tbl tbody td { font-size: 14px; }

/* Session History — full grid with vertical column separators + outer border */
.sp-history-wrap {
  border: 1px solid var(--ink-10); border-radius: 10px;
  overflow: hidden;
}
.sp-history thead th,
.sp-history tbody td {
  border-right: 1px solid var(--ink-10);
}
.sp-history thead th:last-child,
.sp-history tbody td:last-child {
  border-right: none;
}
.sp-tbl .nowrap { white-space: nowrap; }
.sp-tbl .sp-time div { white-space: nowrap; font-size: 13px; }
.sp-tbl .sp-students { min-width: 150px; }
.sp-wide { min-width: 1500px; }
.sp-wide thead th, .sp-wide tbody td { padding: 12px 16px; }

.sp-empty-row td { border-bottom: none !important; }
.sp-empty { text-align: center; color: var(--ink-50); padding: 40px 0; font-size: 14px; }

/* White secondary segmented toggle (Month / Week / Agenda) — same secondary
   style: 2px dark border, flush dark active pill */
.seg {
  display: inline-flex; background: var(--white, #fff);
  border: 2px solid var(--dark, #22182B);
  border-radius: var(--round-large, 24px);
  padding: 0; gap: 0;
  height: 40px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 20, 34, 0.10);
}
.seg button {
  height: 100%;
  padding: 0 24px; border: none; background: none;
  border-radius: var(--round-large, 24px);
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--dark, #22182B); cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}
.seg button:hover:not(.active) { background: var(--peechee-purple-10); }
.seg button.active { background: var(--dark, #22182B); color: white; font-weight: 600; }
.seg button:focus-visible { outline: 2px solid var(--black, #000); outline-offset: -2px; }

/* Week-of nav pill */
.sp-week-nav {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--ink-20); border-radius: 999px;
  padding: 4px 8px; margin-bottom: 18px; background: white;
}
.sp-week-nav > span { font-weight: 600; font-size: 14px; min-width: 200px; text-align: center; }

/* Week grid */
.pweek {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--ink-10); border-left: 1px solid var(--ink-10);
  background: white; border-radius: 10px; overflow: hidden; margin-bottom: 24px;
}
.pweek-head {
  font-size: 13px; color: var(--ink-70); font-weight: 500;
  padding: 10px 12px;
  border-right: 1px solid var(--ink-10); border-bottom: 1px solid var(--ink-10);
}
.pweek-cell {
  min-height: 150px; padding: 8px 10px;
  border-right: 1px solid var(--ink-10); border-bottom: 1px solid var(--ink-10);
}
.pweek-dt { font-size: 13px; font-weight: 500; color: var(--ink-90); margin-bottom: 8px; }
.pweek-dt.today {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--apple-red-60); color: white;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.pweek-ev {
  background: var(--bt-blue-15, #E8EBFF);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 6px;
}
.pweek-ev .t { font-size: 11px; color: var(--ink-70); }
.pweek-ev .l { font-size: 12.5px; font-weight: 700; color: var(--ink-90); margin-top: 2px; }

/* Skill-progress badges (rounded-rect, not pill — per design system) */
.progress-tag {
  display: inline-block; padding: 5px 12px; border-radius: 6px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.progress-tag.mastered    { background: var(--chalkboard-green-10); color: var(--chalkboard-green-70); }
.progress-tag.progressing { background: var(--locker-orange-10); color: var(--locker-orange-60); }
.progress-tag.area-of-need{ background: var(--apple-red-10); color: var(--apple-red-70); }
.progress-tag.no-show     { background: #ffd6d6; color: var(--apple-red-70); }

/* Assessment-score display variants */
.sp-score-inline { font-size: 15px; color: var(--ink-90); margin-bottom: 14px; }
.sp-score-inline b { font-weight: 700; }

.sp-score-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--chalkboard-green-10); color: var(--chalkboard-green-70);
  border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500;
}
.sp-score-badge b { font-weight: 700; }

.sp-score-stat {
  display: flex; align-items: center; gap: 18px;
  background: var(--peechee-purple-10); border-radius: 14px;
  padding: 18px 22px; margin-bottom: 18px; width: fit-content;
}
.sp-score-stat .num { font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--chalkboard-green-70); }
.sp-score-stat .meta .lbl { font-size: 14px; font-weight: 700; color: var(--ink-90); }
.sp-score-stat .meta .sub { font-size: 13px; color: var(--ink-70); margin-top: 2px; }

.sp-score-donut { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.sp-score-donut-lbl { font-size: 14px; font-weight: 700; color: var(--ink-90); }
.sp-score-donut-sub { font-size: 13px; color: var(--ink-70); margin-top: 2px; }

.sp-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.sp-kpi { background: var(--peechee-purple-10); border-radius: 14px; padding: 18px 20px; }
.sp-kpi .num { font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--ink-90); }
.sp-kpi .num .den { font-size: 18px; color: var(--ink-50); font-weight: 600; }
.sp-kpi .lbl { font-size: 14px; font-weight: 600; color: var(--ink-90); margin-top: 8px; }
.sp-kpi .sub { font-size: 12.5px; color: var(--ink-70); margin-top: 2px; }

@media (max-width: 1000px) {
  .sp-top-grid { grid-template-columns: 1fr; }
  .sp-kpi-row { grid-template-columns: 1fr; }
}


/* ============================================================
 * School Faculty (Sam Jones) Dashboard
 * ============================================================ */
.sf-dashboard .page-title { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; }

.sf-toggle {
  display: inline-flex;
  background: var(--white, #fff);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(15, 20, 34, 0.08);
  border: 1px solid var(--ink-10);
  gap: 2px;
  flex-shrink: 0;
}
.sf-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 22px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-90);
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.sf-toggle button:hover { background: var(--ink-05, rgba(15, 20, 34, 0.04)); }
.sf-toggle button.active {
  background: var(--ink-90, #0f1422);
  color: #fff;
}
.sf-toggle button.active:hover { background: var(--ink-90); }

.sf-h3 { font-size: 20px; font-weight: 700; margin: 0 0 18px; color: var(--ink-90); letter-spacing: -0.01em; }

.sf-kpi-card { padding: 28px 32px; }
.sf-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  align-items: start;
}
.sf-kpi { display: flex; flex-direction: column; gap: 6px; }
.sf-kpi .num {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--locker-orange-50, #ff7a4d);
}
.sf-kpi .lbl {
  font-size: 14.5px;
  color: var(--ink-90);
  line-height: 1.3;
  margin-top: 4px;
}

.sf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.sf-donut-card { padding: 24px 28px; }
.sf-donut-body {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: center;
}
.sf-stat-list { display: flex; flex-direction: column; gap: 14px; }
.sf-stat .n {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink-90);
  line-height: 1;
  letter-spacing: -0.02em;
}
.sf-stat .l {
  font-size: 14px;
  color: var(--ink-90);
  margin-top: 4px;
}
.sf-donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Today's sessions card */
.sf-today-card { padding: 24px 28px; }
.sf-today-tbl { width: 100%; }
.sf-today-tbl th { font-weight: 600; }
.sf-today-tbl td { padding: 12px 14px; }

.sf-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--apple-red-70, #c93222);
}
.sf-live-dot .pulse {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--apple-red-50, #ff4f3f);
  box-shadow: 0 0 0 0 rgba(255, 79, 63, 0.5);
  animation: sfPulse 1.6s infinite;
}
@keyframes sfPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 79, 63, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 79, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 79, 63, 0); }
}
.sf-soon-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-70);
}
.sf-soon-dot::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--ink-30, #b9bcc6);
}

.sf-join-btn {
  padding: 8px 16px;
  font-size: 13.5px;
  white-space: nowrap;
}

/* Bordered tables (watchlist / scheduled sessions) — outlined cells per screenshot */
.sf-tbl-bordered {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ink-10);
  border-radius: 8px;
  overflow: hidden;
}
.sf-tbl-bordered th,
.sf-tbl-bordered td {
  border: 1px solid var(--ink-10);
  padding: 14px 18px;
  text-align: left;
  font-size: 14px;
  vertical-align: middle;
}
.sf-tbl-bordered thead th {
  background: #fafafd;
  font-weight: 600;
  color: var(--ink-90);
}

@media (max-width: 1180px) {
  .sf-kpi-row { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .sf-kpi .num { font-size: 44px; }
}
@media (max-width: 980px) {
  .sf-grid-2 { grid-template-columns: 1fr; }
  .sf-donut-body { grid-template-columns: 1fr; }
}


/* Progress Reports table (faculty) — outlined card layout */
.progress-reports-tbl {
  border: 1px solid var(--ink-10);
  border-radius: 12px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
.progress-reports-tbl th,
.progress-reports-tbl td {
  border-bottom: 1px solid var(--ink-10);
  padding: 18px 22px;
  vertical-align: middle;
  font-size: 14px;
  text-align: left;
}
.progress-reports-tbl tbody tr:last-child td { border-bottom: 0; }
.progress-reports-tbl thead th {
  background: #fafafd;
  font-weight: 700;
  color: var(--ink-90);
}
.progress-reports-tbl td:last-child { width: 70px; text-align: right; }


/* ---- Demo banner (top strip + body card) ---- */
.sf-demo-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13.5px;
  color: var(--ink-90);
  flex-wrap: wrap;
}
.sf-demo-banner b { font-weight: 600; }
.sf-demo-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
}
.sf-demo-links .link {
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sf-demo-banner-strip {
  background: var(--locker-orange-10, #ffe5d6);
  padding: 10px 28px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  width: 100%;
  box-sizing: border-box;
}
.sf-demo-banner-strip .sf-demo-links .link { color: var(--bt-blue-80); }
.sf-demo-banner-card {
  background: var(--white, #fff);
  border: 1.5px solid var(--bt-blue-80, #4c4af3);
  border-radius: 14px;
  padding: 16px 22px;
}
.sf-demo-banner-card .sf-demo-links .link { color: var(--bt-blue-80); }

/* ---- Week calendar ---- */
.sf-week-nav {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 6px 6px 18px;
  background: #fff;
  border: 1px solid var(--ink-10);
  border-radius: 999px;
  margin-bottom: 22px;
}
.sf-week-nav .cal-nav-arrow {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  cursor: pointer;
}
.sf-week-nav .cal-nav-arrow:hover { background: var(--ink-05, rgba(15,20,34,0.05)); }
.sf-week-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-90);
  white-space: nowrap;
}

.sf-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--ink-10);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink-10, #e7e7ec);
  gap: 1px;
}
.sf-week-head {
  background: #fff;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-90);
}
.sf-week-cell {
  background: #fff;
  padding: 10px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sf-week-date {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-90);
  border-radius: 999px;
  margin-bottom: 2px;
}
.sf-week-date.today {
  background: var(--apple-red-60, #ff4f3f);
  color: #fff;
}
.sf-ev {
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: default;
}
.sf-ev-scheduled { background: var(--chalkboard-green-15, #cdedd4); cursor: pointer; }
.sf-ev-pending  { background: rgba(202, 204, 215, 0.32); color: var(--ink-90); }
.sf-ev-finished { background: rgba(168, 222, 192, 0.40); color: var(--ink-90); }
.sf-ev-canceled { background: var(--ink-10, #e4e5ea); }
.sf-ev-canceled .sf-ev-time, .sf-ev-canceled .sf-ev-pill { text-decoration: none; }
.sf-ev:hover { filter: brightness(0.97); }
.sf-ev-time { font-weight: 500; font-size: 12px; color: var(--ink-90); }
.sf-ev-scheduled .sf-ev-time { color: var(--chalkboard-green-70, #2e7d4a); }
.sf-ev-canceled  .sf-ev-time { color: var(--ink-70); }
.sf-ev-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: inherit;
}
.sf-ev-pill .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px; height: 12px;
  font-size: 11px;
  line-height: 1;
}
.sf-ev-pill.pending  .ico { color: var(--ink-50); }
.sf-ev-pill.finished .ico { color: var(--chalkboard-green-70, #2e7d4a); font-weight: 700; }
.sf-ev-pill.canceled .ico { color: var(--ink-50); }
.sf-week-more {
  font-size: 12.5px;
  margin-top: 2px;
  color: var(--bt-blue-80);
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 1180px) {
  .sf-week-cell { min-height: 160px; }
}


/* Students page (faculty) */
.sf-students-tbl tbody td { vertical-align: middle; }
.sf-students-tbl .checkbox { width: 16px; height: 16px; }

.sf-token {
  display: inline-flex; align-items: center; gap: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.sf-token-text {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--ink-90);
}
.sf-token-eye {
  appearance: none;
  border: 0; background: transparent;
  cursor: pointer;
  color: var(--ink-70);
  padding: 4px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
}
.sf-token-eye:hover { background: var(--ink-05, rgba(15,20,34,0.05)); color: var(--bt-blue-80); }

.sf-kebab {
  appearance: none;
  border: 0; background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-70);
  width: 28px; height: 28px;
  border-radius: 999px;
  cursor: pointer;
}
.sf-kebab:hover { background: var(--ink-05, rgba(15,20,34,0.05)); }


/* Group Detail Weekly Progress (faculty) */
.sf-weekly .sf-back {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 999px;
  color: var(--ink-90);
}
.sf-weekly .sf-back:hover { background: var(--ink-05, rgba(15,20,34,0.05)); }

.sf-pill-tabs {
  display: flex;
  background: var(--dark, #22182B);
  border-radius: var(--round-large, 24px);
  padding: 0;
  gap: 0;
  height: 40px;
  overflow: hidden;
  margin-bottom: 22px;
  width: 100%;
  box-sizing: border-box;
}
.sf-pill-tab {
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  color: var(--white, #fff);
  flex: 0 0 auto;
  height: 100%;
  padding: 0 24px;
  font: inherit; font-size: 14px; font-weight: 500;
  border-radius: var(--round-large, 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  outline: none; box-shadow: none;
  transition: background 140ms, color 140ms;
}
.sf-pill-tab:focus-visible { outline: 2px solid var(--black, #000); outline-offset: -2px; }
.sf-pill-tab.active {
  background: var(--bt-blue-30, #B7C0FF);
  color: var(--dark, #22182B);
}

.sf-week-cell-tall { min-height: 200px; }
.sf-session-block {
  background: var(--chalkboard-green-15, #cdedd4);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--ink-90);
}
.sf-sb-time {
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sf-sb-line { font-size: 12.5px; line-height: 1.35; }

.sf-schedule-panel { padding: 22px 26px; }
.sf-schedule-toggle {
  appearance: none; border: 0; background: transparent;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  padding: 0;
  color: var(--ink-90);
}
.sf-chev {
  display: inline-flex;
  transition: transform 160ms;
  color: var(--ink-70);
}
.sf-chev.open { transform: rotate(180deg); }
.sf-meta-k { font-size: 12px; font-weight: 600; color: var(--ink-70); margin-bottom: 2px; }

.sf-attendance-tbl td { text-align: center; }
.sf-att-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  color: #fff;
}
.sf-att-yes { background: var(--bt-blue-80, #4c4af3); }
.sf-att-no  { background: var(--apple-red-60, #ff4f3f); }

.sf-status-row td {
  background: #fafafd;
  font-weight: 500;
}
.sf-status-pill {
  display: inline-block;
  background: var(--chalkboard-green-15, #cdedd4);
  color: var(--chalkboard-green-70, #2e7d4a);
  padding: 6px 18px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 500;
}

.sf-skill-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--ink-10);
  border-radius: 8px;
  overflow: hidden;
}
.sf-skill-cell {
  padding: 18px 22px;
  border-right: 1px solid var(--ink-10);
}
.sf-skill-cell:last-child { border-right: 0; }
.sf-skill-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-90);
  margin-bottom: 16px;
}
.sf-skill-tag {
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13.5px;
}
.sf-skill-progressing { background: var(--locker-orange-10, #ffe5d6); }
.sf-skill-mastered    { background: var(--chalkboard-green-15, #cdedd4); }
.sf-skill-text { font-size: 13.5px; line-height: 1.35; margin-bottom: 4px; color: var(--ink-90); }
.sf-skill-mlbl { font-size: 12.5px; font-weight: 500; color: var(--ink-70); }
.sf-skill-progressing .sf-skill-mlbl { color: var(--locker-orange-60, #c4571c); }
.sf-skill-mastered .sf-skill-mlbl    { color: var(--chalkboard-green-70, #2e7d4a); }

.sf-sc-cell {
  padding: 18px 22px;
  border-right: 1px solid var(--ink-10);
}
.sf-sc-cell:last-child { border-right: 0; }
.sf-sc-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 14px;
  color: var(--ink-90);
}
.sf-sc-block { margin-bottom: 12px; font-size: 13px; line-height: 1.45; }
.sf-sc-k { font-weight: 600; color: var(--ink-90); display: inline; }
.sf-sc-v { color: var(--ink-90); display: inline; margin-left: 4px; }

@media (max-width: 1180px) {
  .sf-skill-grid { grid-template-columns: 1fr 1fr; }
  .sf-skill-cell:nth-child(2n) { border-right: 0; }
}


/* Group code under time in dashboard week-calendar chip */
.sf-ev-group {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.sf-ev-scheduled .sf-ev-group { color: var(--chalkboard-green-70, #2e7d4a); }
.sf-ev-canceled .sf-ev-group { text-decoration: none; color: var(--ink-70); }


/* Faculty roster table */
.sf-faculty-tbl td { vertical-align: middle; }
.sf-email-cell { display: inline-flex; align-items: center; gap: 10px; }
.sf-email-ic { display: inline-flex; color: var(--bt-blue-80, #4c4af3); }


/* ============================================================
   ACTION ITEM MODALS (Dashboard "Action Items" flows)
   ============================================================ */

/* Context line under a modal title (date · time · meeting N of M) */
.ai-modal-context {
  font-size: 13px; font-weight: 600; color: var(--ink-70);
  background: var(--bt-blue-15, #E8EBFF);
  padding: 8px 14px; border-radius: 8px; margin: 2px 0 16px;
}
.ai-list-hint { font-size: 13.5px; color: var(--ink-70); margin: 0 0 14px; }

/* Stacked session / meeting list */
.ai-list { display: flex; flex-direction: column; }
.ai-list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 6px; border-bottom: 1px solid var(--ink-10);
}
.ai-list-row:last-child { border-bottom: none; }
.ai-list-row.clickable { cursor: pointer; border-radius: 8px; transition: background 120ms ease; }
.ai-list-row.clickable:hover { background: var(--bg-light, #F7F7FF); }
.ai-list-text { flex: 1; min-width: 0; }
.ai-list-primary {
  font-size: 14px; font-weight: 500; color: var(--ink-90);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ai-list-secondary { font-size: 12.5px; color: var(--ink-60); margin-top: 2px; }
.ai-list-row.clickable .ai-list-primary { color: var(--bt-blue-80, #4c4af3); }
.ai-list-row svg, .ai-list-row .mat-ic { color: var(--ink-30); flex-shrink: 0; }

/* "+1 More" consecutive-missed modal — mirrors the calendar overflow popup */
.cm-more-list { display: flex; flex-direction: column; gap: 4px; }
.cm-more-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 2px; }
.cm-more-text { font-size: 14px; color: var(--ink-90); line-height: 1.5; padding-top: 1px; }
.cm-more-name { font-weight: 600; }
.cm-more-count { color: var(--ink-70); }
.cm-more-sep { color: var(--ink-40); }

/* Status disc */
.ai-status-dot {
  width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ai-status-dot.finished { background: #d2f4dc; }
.ai-status-dot.no-show  { background: #ffd6d6; }
.ai-status-dot.pending  { background: #e0e0ff; }
.ai-status-dot.missing  {
  background: #fff0cf; color: var(--locker-orange-60, #d98200);
  font-weight: 700; font-size: 14px;
}

.ai-more-btn {
  margin-top: 12px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--bt-blue-80, #4c4af3); padding: 4px 0;
}
.ai-more-btn:hover { text-decoration: underline; }

/* Attendance-mark table */
.ai-att-table { width: 100%; border-collapse: collapse; }
.ai-att-table thead th {
  font-size: 13px; font-weight: 600; color: var(--ink-90);
  text-align: left; padding: 0 8px 12px; border-bottom: 1px solid var(--ink-10);
}
.ai-att-table tbody td {
  font-size: 14px; color: var(--ink-90);
  padding: 12px 8px; border-bottom: 1px solid var(--ink-10);
}
.ai-att-table tbody tr:last-child td { border-bottom: none; }
.ai-att-toggle { display: flex; gap: 10px; justify-content: center; }
.ai-att-btn {
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: white; transition: all 120ms ease;
}
.ai-att-btn.present { border: 1.5px solid var(--bt-blue-30, #b9c2ff); color: var(--bt-blue-40, #9aa6ff); }
.ai-att-btn.absent  { border: 1.5px solid #ffc2c2; color: #ef9a9a; }
.ai-att-btn.present:hover { border-color: var(--bt-blue-80, #4c4af3); color: var(--bt-blue-80, #4c4af3); }
.ai-att-btn.absent:hover  { border-color: var(--apple-red-60, #FF2C23); color: var(--apple-red-60, #FF2C23); }
.ai-att-btn.present.on { background: var(--bt-blue-80, #4c4af3); border-color: var(--bt-blue-80, #4c4af3); color: white; }
.ai-att-btn.absent.on  { background: var(--apple-red-60, #FF2C23); border-color: var(--apple-red-60, #FF2C23); color: white; }

/* Breadcrumb back-link on the student profile (return to Meeting History) */
.ai-breadcrumb-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 500; color: var(--bt-blue-80, #4c4af3);
  padding: 0; margin-bottom: 10px;
}
.ai-breadcrumb-back:hover { text-decoration: underline; }


/* Session Color Key */
.sched-key-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 999px;
  margin-top: 0;
}


/* Month nav — single outlined pill with inset chevrons (per production) */
.sched-month-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--ink-90);
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--white, #fff);
}
.sched-month-pill span {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-90);
  min-width: 110px;
  text-align: center;
}
.sched-month-pill button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: var(--ink-90);
  padding: 2px;
  border-radius: 999px;
}
.sched-month-pill button:hover { background: var(--ink-05, rgba(15,20,34,0.05)); }

/* ============================================================
   STUDENT DASHBOARD (Jane) — no sidebar
   ============================================================ */

/* "About to start" hero banner */
.stu-hero {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,20,34,0.04);
}
.stu-hero-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--spark-blue-30, #8fe3e8), var(--bt-blue-30, #c9d0ff));
}
.stu-hero-main { flex: 1; min-width: 0; }
.stu-hero-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stu-hero-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-90);
  line-height: 1.3;
}
.stu-today-tag {
  display: inline-flex;
  align-items: center;
  background: var(--bt-blue-30, #c9d0ff);
  color: var(--dark, #22182B);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.stu-hero-agenda { margin-top: 14px; }
.stu-hero-agenda-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-90);
}
.stu-hero-agenda-value {
  font-size: 14px;
  color: var(--ink-70);
  margin-top: 2px;
}
.stu-hero .btn { flex-shrink: 0; }

/* Calendar event chip + popover */
.stu-ev-wrap { position: relative; }
.stu-ev { cursor: pointer; }
.stu-ev-live {
  background: var(--bt-blue-15, #E8EBFF);
  box-shadow: inset 3px 0 0 var(--bt-blue-80, #4F46FF);
}
.stu-ev-live .sf-ev-time { color: var(--bt-blue-80, #4F46FF); }
.stu-ev-live .sf-ev-group { color: var(--bt-blue-80, #4F46FF); }

.stu-popover {
  margin-top: 6px;
  background: #fff;
  border: 1.5px solid var(--bt-blue-80, #4F46FF);
  border-radius: 8px;
  padding: 2px;
  box-shadow: 0 6px 20px rgba(15,20,34,0.12);
}
.stu-popover-btn {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--bt-blue-80, #4F46FF);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.stu-popover-btn:hover { background: var(--bt-blue-10, #F7F7FF); }

/* Session Details modal */
.stu-detail-grid { margin: 0; }
.stu-detail-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ink-10);
}
.stu-detail-row:last-child { border-bottom: 0; }
.stu-detail-row dt {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-90);
}
.stu-detail-row dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink-70);
}
.stu-detail-gap { height: 8px; }
.stu-loc-link { color: var(--bt-blue-80, #4F46FF); font-weight: 400; }
.stu-modal-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-90);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.stu-modal-close:hover { background: var(--peechee-purple-10); }


/* Clickable schedule event */
.month-cell .ev.clickable { cursor: pointer; border-radius: 6px; }
.month-cell .ev.clickable:hover { background: var(--peechee-purple-10, #f3f1f7); }

/* Session click-popup menu */
.session-menu-scrim {
  position: fixed; inset: 0;
  z-index: 1200;
  background: transparent;
}
.session-menu {
  position: fixed;
  background: var(--white, #fff);
  border-radius: var(--round, 16px);
  box-shadow: 0 12px 32px rgba(15, 20, 34, 0.18), 0 2px 6px rgba(15, 20, 34, 0.10);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session-menu-item {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-90, #22182B);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--round-small, 8px);
  transition: background 120ms ease;
}
.session-menu-item .mat-ic { font-size: 20px; color: var(--ink-70, #6b6b76); }
.session-menu-item:hover { background: var(--peechee-purple-10, #f3f1f7); }
.session-menu-item.danger { color: var(--apple-red-60, #ff2c23); }
.session-menu-item.danger .mat-ic { color: var(--apple-red-60, #ff2c23); }

/* === SM school detail + SM student profile === */
.sd-action{display:inline-flex;align-items:center;gap:6px;font-weight:500;cursor:pointer;white-space:nowrap}
.sd-check{width:16px;height:16px;accent-color:var(--primary,#4B2AAD);cursor:pointer}
.sp-range-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;background:var(--white,#fff);border:1px solid var(--ink-20,#d9d7de);font-size:14px;color:var(--ink-90);cursor:pointer}
.sp-range-pill .sep{color:var(--ink-30,#b3b0b8)}


/* === ASSESSMENT RESULTS VIEW (rv-*) === */
.rv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.rv-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-title { margin: 0 0 8px; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.rv-kind { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--bt-blue-15, #E8EBFF); color: var(--bt-blue-80); }
.rv-kind.post { background: var(--peechee-purple-10, #f3f1f7); color: var(--peechee-purple-90, #22182B); }
.rv-curr { font-size: 13px; color: var(--ink-70); }
.rv-curr.subtle { color: var(--ink-50); }
.rv-who { display: flex; align-items: center; gap: 12px; }
.rv-stepper { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.rv-stepper button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 1.5px solid var(--ink-20, #dcdce3); background: white; color: var(--bt-blue-80); cursor: pointer; }
.rv-stepper button:hover { background: var(--bt-blue-10, #F7F7FF); }
.rv-stepper-n { font-size: 12.5px; color: var(--ink-50); font-weight: 400; margin-left: 4px; }

.rv-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ink-10, #ebebf0); border: 1px solid var(--ink-10, #ebebf0); border-radius: 16px; overflow: hidden; margin-bottom: 20px; }
.rv-sum-cell { background: white; padding: 16px 20px; }
.rv-sum-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 8px; }
.rv-sum-v { font-size: 15px; color: var(--ink-90); }
.rv-sum-score .rv-sum-v b { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
.rv-sum-score .rv-sum-v span { color: var(--ink-50); margin-left: 6px; }
.rv-sum-counts { display: flex; gap: 16px; align-items: center; }
.rv-sum-counts span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }

.rv-mark { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; flex-shrink: 0; color: white; }
.rv-mark.correct { background: var(--chalkboard-green-50, #2FA36B); }
.rv-mark.incorrect { background: var(--apple-red-60, #FF2C23); }
.rv-mark.unanswered { background: var(--ink-20, #dcdce3); color: var(--ink-70); }
.rv-mark .rv-dash { font-size: 11px; line-height: 1; }

.rv-att-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.rv-att-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 16px; border-radius: 12px; border: 1.5px solid var(--ink-20, #dcdce3); background: white; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink-90); transition: all 140ms var(--ease-out); }
.rv-att-tabs button span { font-size: 12px; color: var(--ink-50); font-weight: 400; }
.rv-att-tabs button:hover { border-color: var(--bt-blue-30); }
.rv-att-tabs button.active { background: var(--peechee-purple-90, #22182B); border-color: var(--peechee-purple-90, #22182B); color: white; }
.rv-att-tabs button.active span { color: rgba(255,255,255,0.7); }

.rv-latest { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--bt-blue-15, #E8EBFF); color: var(--bt-blue-80); padding: 2px 8px; border-radius: 4px; }
.rv-status { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 4px; background: var(--chalkboard-green-10, #E4F5EC); color: var(--chalkboard-green-70, #1F8A5B); }
.rv-status.off { background: var(--ink-10, #ebebf0); color: var(--ink-70); }
.tbl tr.rv-row-on td { background: var(--bt-blue-10, #F7F7FF); }

.rv-delta { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 12px 18px; border-radius: 12px; margin-bottom: 20px; background: var(--chalkboard-green-10, #E4F5EC); color: var(--chalkboard-green-70, #1F8A5B); }
.rv-delta.down { background: var(--apple-red-10, #ffe5e2); color: var(--apple-red-70, #c93222); }
.rv-delta.flat { background: var(--ink-10, #ebebf0); color: var(--ink-70); }
.rv-delta b { font-weight: 600; }

.rv-recalc { display: flex; align-items: center; gap: 12px; font-size: 14px; padding: 12px 18px; border-radius: 12px; margin-bottom: 20px; background: var(--bt-blue-15, #E8EBFF); color: var(--ink-90); flex-wrap: wrap; }
.rv-recalc b { font-weight: 600; }

.rv-skill-card { margin-bottom: 0; }
.rv-bar { display: inline-block; width: 120px; height: 8px; border-radius: 999px; background: var(--ink-10, #ebebf0); overflow: hidden; vertical-align: middle; }
.rv-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--bt-blue-80, #4F46FF); }
.rv-bar > span.ok { background: var(--chalkboard-green-50, #2FA36B); }
.rv-bar-n { font-size: 13px; color: var(--ink-70); margin-left: 10px; vertical-align: middle; }
.rv-level { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 4px; white-space: nowrap; }
.rv-level.ok { background: var(--chalkboard-green-10, #E4F5EC); color: var(--chalkboard-green-70, #1F8A5B); }
.rv-level.mid { background: var(--locker-orange-10, #FFF0DF); color: var(--locker-orange-60, #B75D12); }
.rv-level.low { background: var(--apple-red-10, #ffe5e2); color: var(--apple-red-70, #c93222); }

.rv-filters { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.rv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ink-20, #dcdce3); background: white; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-90); cursor: pointer; transition: all 140ms var(--ease-out); }
.rv-chip span { font-size: 12px; color: var(--ink-50); }
.rv-chip:hover { border-color: var(--bt-blue-30); }
.rv-chip.on { background: var(--peechee-purple-90, #22182B); border-color: var(--peechee-purple-90, #22182B); color: white; }
.rv-chip.on span { color: rgba(255,255,255,0.7); }
.rv-search { max-width: 320px; margin: 0; }

/* Layout A — rail + pane */
.rv-rail-wrap { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.rv-rail { background: white; border: 1px solid var(--ink-10, #ebebf0); border-radius: 16px; overflow: hidden; }
.rv-rail-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: none; border-bottom: 1px solid var(--ink-10, #ebebf0); background: white; font-family: inherit; font-size: 13.5px; color: var(--ink-90); text-align: left; cursor: pointer; transition: background 120ms var(--ease-out); }
.rv-rail-row:last-child { border-bottom: none; }
.rv-rail-row:hover { background: var(--bt-blue-10, #F7F7FF); }
.rv-rail-row.on { background: var(--bt-blue-15, #E8EBFF); box-shadow: inset 3px 0 0 var(--bt-blue-80, #4F46FF); }
.rv-rail-n { font-weight: 600; width: 30px; flex-shrink: 0; }
.rv-rail-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-70); }
.rv-rail-ov { width: 7px; height: 7px; border-radius: 999px; background: var(--locker-orange-50, #E8890C); flex-shrink: 0; }
.rv-rail-empty { padding: 28px 20px; color: var(--ink-50); font-size: 14px; text-align: center; }
.rv-pane { background: white; border: 1px solid var(--ink-10, #ebebf0); border-radius: 16px; padding: 24px; }

.rv-detail-head { border-bottom: 1px solid var(--ink-10, #ebebf0); padding-bottom: 14px; margin-bottom: 20px; }
.rv-detail-head h3 { margin: 0; font-size: 20px; font-weight: 600; }
.rv-detail-head .rv-of { color: var(--ink-50); font-weight: 400; font-size: 15px; }
.rv-detail-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--ink-50); flex-wrap: wrap; }
.rv-detail-meta .sep { color: var(--ink-30); }
.rv-overridden { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: var(--locker-orange-10, #FFF0DF); color: var(--locker-orange-60, #B75D12); padding: 3px 9px; border-radius: 4px; }
.rv-flag { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: var(--apple-red-10, #ffe5e2); color: var(--apple-red-70, #c93222); padding: 3px 9px; border-radius: 4px; }

.rv-panel-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 10px; }
.rv-panel { background: var(--bt-blue-10, #F7F7FF); border: 1px solid var(--ink-10, #ebebf0); border-radius: 12px; padding: 20px; margin-bottom: 18px; }
.rv-q-instr { font-size: 15px; color: var(--ink-70); margin-bottom: 12px; }
.rv-q-instr.big { font-size: 22px; font-weight: 500; color: var(--ink-90); line-height: 1.4; margin-bottom: 4px; }
.rv-audio { display: inline-flex; align-items: center; gap: 10px; background: white; border: 1.5px solid var(--bt-blue-30); border-radius: 999px; padding: 8px 18px; font-size: 22px; font-weight: 500; color: var(--ink-90); }
.rv-sentence { margin-top: 12px; font-size: 14px; color: var(--ink-70); font-style: italic; }
.rv-options { display: grid; gap: 8px; margin-top: 16px; }
.rv-option { display: flex; align-items: center; gap: 12px; background: white; border: 1.5px solid var(--ink-20, #dcdce3); border-radius: 10px; padding: 11px 16px; font-size: 15px; }
.rv-option.correct { border-color: var(--chalkboard-green-50, #2FA36B); background: var(--chalkboard-green-10, #E4F5EC); }
.rv-option.picked-wrong { border-color: var(--apple-red-60, #FF2C23); background: var(--apple-red-10, #ffe5e2); }
.rv-opt-dot { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--ink-30, #b9b9c4); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rv-option.picked .rv-opt-dot { border-color: currentColor; }
.rv-opt-dot > span { width: 9px; height: 9px; border-radius: 999px; background: currentColor; }
.rv-opt-label { flex: 1; }
.rv-opt-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; white-space: nowrap; }
.rv-opt-tag.ok { background: var(--chalkboard-green-50, #2FA36B); color: white; }
.rv-opt-tag.bad { background: var(--apple-red-60, #FF2C23); color: white; }

.rv-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rv-answer { border: 1px solid var(--ink-10, #ebebf0); border-radius: 12px; padding: 16px 18px; }
.rv-answer.incorrect { border-color: var(--apple-red-60, #FF2C23); }
.rv-answer.correct { border-color: var(--chalkboard-green-50, #2FA36B); }
.rv-typed { font-size: 24px; font-weight: 500; color: var(--ink-90); font-family: inherit; }
.rv-typed.empty { font-size: 15px; color: var(--ink-50); font-style: italic; font-weight: 400; }
.rv-tries { font-size: 12.5px; color: var(--ink-50); margin-top: 8px; }

.rv-detail-foot { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ink-10, #ebebf0); flex-wrap: wrap; }
.rv-detail-foot .link { display: inline-flex; align-items: center; gap: 6px; }
.rv-override { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-override-k { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-50); }
.btn.rv-on { background: var(--peechee-purple-90, #22182B); border-color: var(--peechee-purple-90, #22182B); color: white; }

/* Layout B — accordion */
.rv-acc { display: grid; gap: 8px; }
.rv-acc-item { background: white; border: 1px solid var(--ink-10, #ebebf0); border-radius: 12px; overflow: hidden; }
.rv-acc-item.open { border-color: var(--bt-blue-30); }
.rv-acc-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: none; background: white; font-family: inherit; font-size: 14px; color: var(--ink-90); text-align: left; cursor: pointer; }
.rv-acc-head:hover { background: var(--bt-blue-10, #F7F7FF); }
.rv-acc-n { font-weight: 600; width: 96px; flex-shrink: 0; }
.rv-acc-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-70); }
.rv-acc-ans { width: 130px; flex-shrink: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-acc-time { width: 60px; flex-shrink: 0; font-size: 13px; color: var(--ink-50); text-align: right; }
.rv-acc-body { padding: 4px 18px 20px; border-top: 1px solid var(--ink-10, #ebebf0); }
.rv-detail.dense .rv-detail-head { padding-top: 16px; }

/* Layout C — card grid */
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.rv-card { background: white; border: 1px solid var(--ink-10, #ebebf0); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.rv-card.incorrect { box-shadow: inset 3px 0 0 var(--apple-red-60, #FF2C23); }
.rv-card.correct { box-shadow: inset 3px 0 0 var(--chalkboard-green-50, #2FA36B); }
.rv-card.unanswered { box-shadow: inset 3px 0 0 var(--ink-20, #dcdce3); }
.rv-card-head { display: flex; justify-content: space-between; align-items: center; }
.rv-card-n { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-50); }
.rv-card-q { font-size: 15.5px; font-weight: 500; color: var(--ink-90); line-height: 1.4; }
.rv-card-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-card-opt { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--ink-10, #ebebf0); color: var(--ink-70); }
.rv-card-opt.ok { background: var(--chalkboard-green-10, #E4F5EC); color: var(--chalkboard-green-70, #1F8A5B); font-weight: 500; }
.rv-card-opt.bad { background: var(--apple-red-10, #ffe5e2); color: var(--apple-red-70, #c93222); font-weight: 500; }
.rv-card-rows { display: grid; gap: 6px; }
.rv-card-rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.rv-card-rows span { color: var(--ink-50); }
.rv-card-rows b { font-weight: 500; color: var(--ink-90); text-align: right; }
.rv-card-rows b.incorrect { color: var(--apple-red-70, #c93222); }
.rv-card-rows b.unanswered { color: var(--ink-50); font-style: italic; }
.rv-card-ov { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: var(--locker-orange-10, #FFF0DF); color: var(--locker-orange-60, #B75D12); padding: 3px 9px; border-radius: 4px; align-self: flex-start; }
.rv-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ink-10, #ebebf0); }
.rv-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--ink-20, #dcdce3); background: white; color: var(--ink-70); cursor: pointer; }
.rv-icon-btn:hover { border-color: var(--bt-blue-80); color: var(--bt-blue-80); }

/* Compare */
.rv-cmp .rv-cmp-cell { display: inline-flex; align-items: center; gap: 8px; }

/* Per-question, all students */
.rv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 4px; }
.rv-dist { display: grid; gap: 10px; }
.rv-dist-row { display: grid; grid-template-columns: 1fr 130px 34px; align-items: center; gap: 12px; font-size: 14px; }
.rv-dist-l { display: inline-flex; align-items: center; gap: 8px; }
.rv-bad-txt { color: var(--apple-red-70, #c93222); }
.rv-embedded { padding-top: 4px; }

@media (max-width: 1200px) {
  .rv-summary { grid-template-columns: repeat(2, 1fr); }
  .rv-rail-wrap { grid-template-columns: 1fr; }
  .rv-two { grid-template-columns: 1fr; }
  .rv-answers { grid-template-columns: 1fr; }
}


/* ===== Adaptive Sequencing in the Results View =====
   Answered questions get a SOLID mark. Anything the sequencing engine decided
   on the student's behalf gets a HOLLOW, dashed mark plus a hatched surface —
   so "the student got this right" never reads the same as "auto-marked correct". */
.rv-mark.cskip, .rv-mark.iskip, .rv-mark.notadmin { background: white; border: 1.5px dashed currentColor; }
.rv-mark.cskip { color: var(--chalkboard-green-50, #2FA36B); }
.rv-mark.iskip { color: var(--apple-red-60, #FF2C23); }
.rv-mark.notadmin { color: var(--ink-40, #b9b9c4); }
.rv-hatch, .rv-rail-row.skip, .rv-acc-item.skip .rv-acc-head, .rv-card.skip, .rv-detail.skip .rv-panel { background-image: repeating-linear-gradient(135deg, rgba(34,24,43,0.035) 0 5px, transparent 5px 10px); }

.rv-state { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 4px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.rv-state.correct { background: #E4F5EC; color: #1C7A4C; }
.rv-state.incorrect { background: #FFE7E5; color: #B01D16; }
.rv-state.unanswered { background: var(--ink-10, #ebebf0); color: var(--ink-70); }
.rv-state.cskip { background: white; border: 1px dashed var(--chalkboard-green-50, #2FA36B); color: #1C7A4C; }
.rv-state.iskip { background: white; border: 1px dashed var(--apple-red-60, #FF2C23); color: #B01D16; }
.rv-state.notadmin { background: white; border: 1px dashed var(--ink-30, #cbcbd6); color: var(--ink-60); }

.rv-ess { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.rv-ess.on { background: #FFF1E0; color: #A65200; }
.rv-ess.off { background: white; border: 1px solid var(--ink-20, #dcdce3); color: var(--ink-60); }
.rv-ess.on.missed { background: var(--apple-red-60, #FF2C23); color: white; }
.rv-ess-dot { display: inline-flex; color: #E08A00; flex-shrink: 0; }
.rv-ess-dot.missed { color: var(--apple-red-60, #FF2C23); }

.rv-adaptive-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; white-space: nowrap; flex-shrink: 0; border-radius: 4px; background: var(--bt-blue-15, #E8EBFF); color: var(--bt-blue-80, #4F46FF); font-size: 11.5px; font-weight: 500; }

.rv-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; background: white; border: 1px solid var(--ink-10, #ebebf0); border-radius: 12px; font-size: 12.5px; color: var(--ink-80); }
.rv-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.rv-legend em { font-style: normal; color: var(--ink-50); font-size: 11.5px; }
.rv-legend-k { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-50); }
.rv-legend-div { width: 1px; height: 20px; background: var(--ink-10, #ebebf0); }

.rv-sum-math { margin-top: 7px; font-size: 11.5px; line-height: 1.45; color: var(--ink-50); }
.rv-sum-sub { font-size: 11.5px; color: var(--ink-50); font-weight: 400; }
.rv-summary.adaptive .rv-sum-cell { padding-bottom: 14px; }

.rv-seqbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: -8px 0 18px; background: var(--bt-blue-15, #E8EBFF); border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-90); }
.rv-seqbar > svg, .rv-seqbar > .mat-ic { color: var(--bt-blue-80, #4F46FF); flex-shrink: 0; }
.rv-seqbar-t { margin-left: auto; font-size: 12px; color: var(--ink-60); white-space: nowrap; }

/* Sequence event rows — what the engine did, between the questions it affected. */
.rv-event { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; font-size: 12.5px; line-height: 1.45; background: var(--bt-blue-10, #F7F7FF); border-bottom: 1px solid var(--ink-10, #ebebf0); }
.rv-event-i { display: inline-flex; margin-top: 1px; flex-shrink: 0; }
.rv-event-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-event-t b { font-weight: 500; color: var(--ink-90); }
.rv-event-t em { font-style: normal; color: var(--ink-60); font-size: 11.5px; }
.rv-event.start .rv-event-i { color: var(--bt-blue-80, #4F46FF); }
.rv-event.jump { background: #F1FAF5; } .rv-event.jump .rv-event-i { color: var(--chalkboard-green-50, #2FA36B); }
.rv-event.fallback { background: #FFF4E8; } .rv-event.fallback .rv-event-i { color: #C96A00; }
.rv-acc .rv-event { border: 1px solid var(--ink-10, #ebebf0); border-radius: 10px; }
.rv-acc .rv-event.fallback { border-color: #F0C68E; }

/* Collapsed band of skipped questions. */
.rv-band { border-bottom: 1px solid var(--ink-10, #ebebf0); }
.rv-band-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: none; background: transparent; font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--ink-90); }
.rv-band-head:hover { background: rgba(34,24,43,0.03); }
.rv-band-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rv-band-t b { font-weight: 500; }
.rv-band-t em { font-style: normal; font-size: 11.5px; color: var(--ink-60); line-height: 1.4; }
.rv-band-n { font-size: 12px; font-weight: 500; color: var(--ink-60); white-space: nowrap; flex-shrink: 0; }
.rv-band.cskip { background: #F5FBF8; box-shadow: inset 3px 0 0 var(--chalkboard-green-50, #2FA36B); }
.rv-band.iskip { background: #FFF7F6; box-shadow: inset 3px 0 0 var(--apple-red-60, #FF2C23); }
.rv-band.notadmin { background: var(--bt-blue-10, #F7F7FF); box-shadow: inset 3px 0 0 var(--ink-30, #cbcbd6); }
.rv-band-body { border-top: 1px dashed var(--ink-20, #dcdce3); background: white; }
.rv-acc .rv-band { border: 1px solid var(--ink-10, #ebebf0); border-radius: 10px; overflow: hidden; }
.rv-acc .rv-band-body { padding: 8px; display: grid; gap: 6px; }

.rv-rail-seq { font-size: 11px; color: var(--ink-50); width: 26px; flex-shrink: 0; }
.rv-rail-row.skip .rv-rail-n, .rv-rail-row.skip .rv-rail-txt { color: var(--ink-60); }
.rv-rail-row.incorrect { box-shadow: inset 3px 0 0 var(--apple-red-60, #FF2C23); }
.rv-rail-row.on.incorrect { box-shadow: inset 3px 0 0 var(--bt-blue-80, #4F46FF); }
.rv-acc-seq { font-size: 11.5px; color: var(--ink-50); width: 30px; flex-shrink: 0; }
.rv-acc-item.skip { border-style: dashed; }

/* "Why there is no answer here" panel in the detail pane. */
.rv-why { padding: 14px 16px; border-radius: 12px; margin-bottom: 16px; font-size: 13px; line-height: 1.55; }
.rv-why p { margin: 0 0 6px; }
.rv-why p:last-child { margin-bottom: 0; }
.rv-why-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rv-why-h b { font-weight: 500; font-size: 14px; }
.rv-why-h span { font-size: 11.5px; color: var(--ink-60); padding: 2px 7px; border-radius: 4px; background: white; border: 1px dashed var(--ink-30, #cbcbd6); }
.rv-why-eff { color: var(--ink-70); }
.rv-why.cskip { background: #F1FAF5; border: 1px solid #BFE6D2; }
.rv-why.iskip { background: #FFF4F3; border: 1px solid #F5C6C2; }
.rv-why.notadmin { background: var(--bt-blue-10, #F7F7FF); border: 1px solid var(--ink-10, #ebebf0); }
.rv-detail.skip .rv-answers { grid-template-columns: 1fr; }

.rv-card-seq { font-size: 11.5px; color: var(--ink-50); margin-right: auto; }
.rv-card.skip { border-style: dashed; box-shadow: none; }
.rv-card-why { font-size: 12px; line-height: 1.5; color: var(--ink-60); }
.rv-mini { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; margin-right: 5px; border-radius: 4px; font-size: 11px; font-weight: 500; background: white; }
.rv-mini.cskip { border: 1px dashed var(--chalkboard-green-50, #2FA36B); color: #1C7A4C; }
.rv-mini.iskip { border: 1px dashed var(--apple-red-60, #FF2C23); color: #B01D16; }
.rv-level.na { background: var(--ink-10, #ebebf0); color: var(--ink-60); }
.rv-chip:disabled { opacity: 0.45; cursor: default; }
.rv-chip:disabled:hover { border-color: var(--ink-20, #dcdce3); }
.rv-chip.c-cskip.on { background: var(--chalkboard-green-50, #2FA36B); border-color: var(--chalkboard-green-50, #2FA36B); }
.rv-chip.c-iskip.on { background: var(--apple-red-60, #FF2C23); border-color: var(--apple-red-60, #FF2C23); }

.rv-sum-counts { flex-wrap: wrap; }
.rv-sum-counts .rv-sum-sub { flex: 0 0 100%; margin-top: 4px; }


/* Results view — consolidated header overview card */
.rv-ov { background: #fff; border: 1px solid var(--ink-10, #ebebf0); border-radius: 16px; margin-bottom: 18px; overflow: hidden; }
.rv-ov-main { display: grid; grid-template-columns: 1.15fr 1fr 1.15fr 1fr; }
.rv-ov-main > * { padding: 18px 22px; border-left: 1px solid var(--ink-10, #ebebf0); }
.rv-ov-main > *:first-child { border-left: 0; }
.rv-ov-k { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 8px; }
.rv-ov-v { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; color: var(--ink-90); flex-wrap: wrap; }
.rv-ov-v span { display: inline-flex; align-items: center; gap: 6px; }
.rv-ov-sub { margin-top: 6px; font-size: 12px; color: var(--ink-50); }
.rv-ov-pct { font-size: 38px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--ink-90); }
.rv-ov-pct span { font-size: 20px; font-weight: 500; margin-left: 2px; color: var(--ink-60); }
.rv-ov-delta { margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-60); }
.rv-ov-delta.up { color: var(--chalkboard-green-70, #1E7A4C); }
.rv-ov-delta.down { color: var(--apple-red-70, #c93222); }
.rv-ov-foot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; padding: 10px 22px; border-top: 1px solid var(--ink-10, #ebebf0); background: var(--bt-blue-10, #F7F7FF); font-size: 12px; color: var(--ink-60); }
.rv-ov-foot > span { display: inline; }
.rv-ov-foot > span + span::before { content: '·'; margin: 0 10px 0 0; color: var(--ink-30, #c9c9d3); }
.rv-ov-t { margin-left: auto; }
@media (max-width: 1200px) { .rv-ov-main { grid-template-columns: repeat(2, 1fr); } .rv-ov-main > *:nth-child(3) { border-left: 0; } }


/* Question-bank card: search + filter menu + answer key */
.rv-bankbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ink-10, #ebebf0); }
.rv-bank-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--ink-20, #dcdce3); border-radius: 999px; background: #fff; color: var(--ink-50); }
.rv-bank-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 13.5px; color: var(--ink-90); }
.rv-bank-search:focus-within { border-color: var(--bt-blue-80, #4F46FF); }
.rv-bank-filter { position: relative; flex-shrink: 0; }
.rv-bank-fbtn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink-70); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.rv-bank-fbtn:hover { background: var(--bt-blue-10, #F7F7FF); }
.rv-bank-fbtn.on { background: var(--peechee-purple-90, #22182B); color: #fff; padding: 0 14px 0 10px; }
.rv-bank-menu { position: absolute; top: 42px; right: 0; z-index: 40; min-width: 250px; background: #fff; border: 1px solid var(--ink-10, #ebebf0); border-radius: 12px; box-shadow: 0 12px 32px rgba(20,16,40,.14); padding: 6px; }
.rv-bank-menu button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; font-family: inherit; font-size: 13px; color: var(--ink-90); cursor: pointer; text-align: left; }
.rv-bank-menu button:hover:not(:disabled) { background: var(--bt-blue-10, #F7F7FF); }
.rv-bank-menu button.on { background: var(--bt-blue-15, #E8EBFF); font-weight: 500; }
.rv-bank-menu button:disabled { color: var(--ink-30, #c9c9d3); cursor: default; }
.rv-bank-menu button span { font-size: 12px; color: var(--ink-50); }
.rv-bank-key { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; border-top: 1px solid var(--ink-10, #ebebf0); background: var(--bt-blue-10, #F7F7FF); font-size: 11.5px; color: var(--ink-60); }
.rv-bank-key > span { display: inline-flex; align-items: center; gap: 6px; }
.rv-bank-key-k { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-50); }
.rv-acc-bar { background: #fff; border: 1px solid var(--ink-10, #ebebf0); border-radius: 16px; margin-bottom: 14px; }
.rv-acc-bar .rv-bankbar { border-bottom: 0; }
.rv-acc .rv-bank-key { border: 1px solid var(--ink-10, #ebebf0); border-radius: 12px; margin-top: 14px; }

.rv-rail { overflow: visible; }
.rv-rail-list { overflow: hidden; }
.rv-rail-list .rv-rail-row:last-child { border-bottom: none; }

.rv-ov-main { grid-template-columns: 1.2fr 1fr 1fr; }
.rv-ov-main:has(> :nth-child(4)) { grid-template-columns: 1.15fr 1fr 1.15fr 1fr; }
.rv-bank-key { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; align-items: center; }
.rv-bank-key-k { grid-column: 1 / -1; }

/* Question hover preview \u2014 shows the full question as the student would see it */
.rv-q-hover { position: relative; cursor: help; border-bottom: 1px dashed var(--ink-20, #dcdce3); }
.rv-qprev { display: none; position: absolute; z-index: 60; top: calc(100% + 10px); left: 0; width: 280px; background: #fff; border: 1px solid var(--ink-10, #ebebf0); border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(20,10,30,.16); }
.rv-q-hover:hover .rv-qprev { display: block; }
.rv-qprev-instr { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-90); margin-bottom: 12px; line-height: 1.35; }
.rv-qprev-audio { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--ink-90); background: var(--bt-blue-15, #E8EBFF); border: 1.5px solid var(--ink-90); border-radius: 12px; padding: 12px 16px; }
.rv-qprev-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--info, #3aa0e0); color: #fff; flex-shrink: 0; }
.rv-qprev-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rv-qprev-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--bt-blue-15, #E8EBFF); border: 1.5px solid var(--ink-90); border-radius: 10px; padding: 14px 8px 12px; min-height: 56px; }
.rv-qprev-opt .rv-qprev-badge { position: absolute; top: -8px; left: -8px; }
.rv-qprev-opt-t { font-size: 20px; font-weight: 700; color: var(--ink-90); }
.rv-qprev-opt-dot { position: absolute; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink-90); display: flex; align-items: center; justify-content: center; color: #fff; }
.rv-qprev-opt.ok .rv-qprev-opt-dot { background: var(--chalkboard-green-50, #2FA36B); border-color: var(--chalkboard-green-50, #2FA36B); }
.rv-grid-key { grid-template-columns: 1fr 1fr; }

.rv-ov-main, .rv-ov-main:has(> :nth-child(4)) { grid-template-columns: 0.85fr 1.15fr; }
.rv-ov-q .rv-ov-v { gap: 18px; font-size: 14.5px; }
.rv-ov-split { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ink-10, #ebebf0); font-size: 13.5px; color: var(--ink-90); }
.rv-ov-split-k { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-50); }
.rv-ov-split b { font-weight: 600; }
@media (max-width: 1200px) { .rv-ov-main, .rv-ov-main:has(> :nth-child(4)) { grid-template-columns: 1fr; } .rv-ov-main > * { border-left: 0; } }

/* === Adaptive-sequencing badges (replaces always-expanded accordion narrative) === */
.rv-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rv-badge { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-70); cursor: default; }
.rv-badge svg { color: var(--ink-40, #c7c7d1); flex-shrink: 0; }
.rv-badge .tip { position: absolute; top: calc(100% + 8px); left: 0; background: #16111c; color: #fff; font-size: 12px; line-height: 1.45; width: 240px; white-space: normal; padding: 10px 12px; border-radius: 8px; z-index: 40; opacity: 0; pointer-events: none; transition: opacity 140ms; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.rv-badge .tip::after { content: ''; position: absolute; bottom: 100%; left: 16px; border: 5px solid transparent; border-bottom-color: #16111c; }
.rv-badge:hover .tip { opacity: 1; }

/* === Question strip (hover-preview cells, click-to-pin detail) === */
.rv-strip-wrap { }
.rv-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px; background: var(--bt-blue-10, #F7F7FF); border: 1px solid var(--ink-10, #ebebf0); border-radius: 16px; }
.rv-schip { position: relative; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; cursor: pointer; border: none; padding: 0; flex-shrink: 0; }
.rv-schip.correct { background: var(--chalkboard-green-50, #2FA36B); }
.rv-schip.incorrect { background: var(--apple-red-60, #FF2C23); }
.rv-schip.cskip, .rv-schip.iskip, .rv-schip.notadmin { background: #fff; color: var(--ink-60); border: 1.5px dashed var(--ink-30, #b7bcc5); }
.rv-schip.cskip { color: var(--chalkboard-green-70, #1F8A5B); border-color: var(--chalkboard-green-50, #2FA36B); }
.rv-schip.iskip { color: var(--apple-red-70, #c93222); border-color: var(--apple-red-60, #FF2C23); }
.rv-schip:hover, .rv-schip.pinned { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--peechee-purple-70, #4B2AAD); }
.rv-schip-star { position: absolute; top: -6px; right: -6px; width: 15px; height: 15px; border-radius: 50%; background: #fff; color: var(--locker-orange-50, #d98c00); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px #fff; }
.rv-schip-pop { display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 240px; background: #fff; border: 1px solid var(--ink-10, #ebebf0); border-radius: 12px; box-shadow: 0 10px 26px rgba(16,24,40,.16); padding: 14px 16px; text-align: left; z-index: 45; font-weight: 400; color: var(--ink-90); }
.rv-schip:hover .rv-schip-pop { display: block; }
.rv-schip-pop .pp-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.rv-schip-pop .pp-word { font-size: 15px; font-weight: 600; }
.rv-schip-pop .pp-row { font-size: 12.5px; color: var(--ink-60); margin-top: 5px; }
.rv-schip-pop .pp-row b { color: var(--ink-90); font-weight: 600; }
.rv-schip-pop .pp-audio { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--peechee-purple-70, #4B2AAD); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ink-10, #ebebf0); }
.rv-schip-pop .pp-why { font-size: 12px; color: var(--ink-60); line-height: 1.4; }

.rv-pin { margin-top: 14px; border: 1px solid var(--ink-10, #ebebf0); border-radius: 16px; padding: 18px 22px; background: #fff; display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.rv-pin-title { font-size: 12px; color: var(--ink-50); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rv-pin-word { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.rv-pin-ans { display: flex; gap: 28px; flex-wrap: wrap; }
.rv-pin-ans .lab { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 3px; }
.rv-pin-ans .val { font-size: 14px; color: var(--ink-90); }
.rv-pin-why { font-size: 13px; color: var(--ink-70); line-height: 1.5; max-width: 480px; }

/* Grid layout — correct/incorrect + skipped rows keep the row's normal alternating background;
   the outline check/x icon (in RvGridRow) carries the "never administered" meaning instead of a saturated fill. */

/* === Student page: Details / Performance / Session History (v2) === */
.sd-details-grid{display:grid;grid-template-columns:minmax(300px,0.42fr) 1fr;gap:20px;align-items:start}
@media (max-width:1100px){.sd-details-grid{grid-template-columns:1fr}}
.sd-ov-field{margin-bottom:22px;font-size:14px;color:var(--ink-90)}
.sd-ov-k{font-weight:600;font-size:14px;margin-bottom:6px}
.sd-ov-sub{font-size:13px;color:var(--ink-70);margin-top:3px}
.sd-av{width:30px;height:30px;border-radius:50%;background:var(--bt-blue-80);color:#fff;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.sd-tag-active{background:var(--chalkboard-green-10);color:var(--ink-90);font-size:12px;padding:2px 10px;border-radius:4px}
.sd-note-chip{background:var(--spark-blue-20,#CFF3F7);color:var(--ink-90);font-size:12px;padding:4px 10px;border-radius:4px;max-width:420px;text-align:right}
.sd-sub{margin:8px 0 20px;font-size:14px;color:var(--ink-70)}
.sd-step-row{display:flex;gap:14px;align-items:center;margin-bottom:20px;font-size:14px;color:var(--ink-90)}
.sd-step-row.align-top{align-items:flex-start}
.sd-step{background:var(--spark-blue-20,#CFF3F7);color:var(--ink-90);font-size:12px;font-weight:500;padding:3px 9px;border-radius:4px;white-space:nowrap;margin-top:2px}
.sd-block-list{margin:8px 0 0;padding-left:22px;display:grid;gap:5px}
.sd-select{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-width:300px;padding:9px 14px;border-radius:24px;border:1px solid var(--ink-20,#d9d7de);background:#fff;font-size:14px;color:var(--ink-90);cursor:pointer;font-family:inherit}
.sd-select .ph{color:var(--ink-50,#7a7683)}
.sd-select-wrap{position:relative}
.sd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:300px;background:#fff;border:1px solid var(--ink-20,#d9d7de);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.10);padding:4px;z-index:20;display:grid;gap:2px}
.sd-menu-item{text-align:left;padding:9px 12px;border:0;background:none;border-radius:6px;font-size:14px;font-family:inherit;color:var(--ink-90);cursor:pointer}
.sd-menu-item:hover{background:var(--bt-blue-10)}
.sd-menu-item.on{background:var(--bt-blue-10);font-weight:600;color:var(--bt-blue-80)}
.seg.sd-seg-sm{height:34px;border-radius:24px}
.seg.sd-seg-sm button{padding:0 18px;font-size:13.5px}
.sd-cb-row{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-90);cursor:pointer}
.sd-perf-empty{padding:90px 0;text-align:center;font-size:14px;color:var(--ink-70)}
.sd-attend{font-size:14px;color:var(--ink-70)}
.sd-status{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sd-status .dot{width:13px;height:13px;border-radius:50%;flex-shrink:0}
.sd-pre-chip{display:inline-block;background:var(--peechee-purple-20,#F6D9E6);color:var(--ink-90);font-size:11px;font-weight:500;padding:2px 8px;border-radius:4px;margin-right:8px}
.sn-field{margin-bottom:18px}
.sn-field:last-child{margin-bottom:0}
.sn-label{display:block;font-size:14px;font-weight:500;margin-bottom:7px;color:var(--ink-90)}
.sn-x{border:0;background:none;color:var(--ink-70);cursor:pointer;padding:2px;display:inline-flex;line-height:0}
.sn-x:hover{color:var(--ink-90)}
.sp-notes-tbl tbody td{vertical-align:middle}
.pweek-ev.done{background:var(--chalkboard-green-10,#DFF5E4)}

.sp-top-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sp-top-grid>.card,.sd-details-grid>.card{min-width:0}
.sp-table-wrap{min-width:0;max-width:100%}

.app{grid-template-columns:minmax(0,1fr)}
.app-body>*{min-width:0}
.content,.page,.sp-stack{min-width:0}
.sp-stack>.card{min-width:0}

/* Adaptive assessment note + live results table (tutor drawer) */
.adaptive-note{border:1px solid var(--peechee-purple-60,#5B3FA8);border-radius:8px;padding:14px 16px;font-size:14px;line-height:1.5;color:var(--ink-90);background:white;margin:16px 0 18px}
.live-results-table{width:100%;border-collapse:collapse;font-size:14px}
.live-results-table th,.live-results-table td{text-align:left;padding:14px;border:1px solid var(--ink-10);vertical-align:middle}
.live-results-table thead th{background:#16111c;color:white;font-weight:600;border-color:#16111c}
.live-results-table tbody tr:nth-child(odd) td{background:var(--peechee-purple-10)}
.live-results-table tbody tr:nth-child(even) td{background:white}
.live-results-table td.stu{font-weight:600;color:var(--ink-90)}
.live-results-table td.num{font-variant-numeric:tabular-nums;font-weight:600}
.live-results-table td.num.correct{color:var(--chalkboard-green-70)}
.live-results-table td.num.incorrect{color:var(--apple-red-70)}
.live-results-table td.muted{color:var(--ink-70);font-variant-numeric:tabular-nums}
.live-results-table td.stalled{color:var(--apple-red-70);font-weight:600;font-variant-numeric:tabular-nums}
.live-results-table .qcount{font-size:12px;color:var(--ink-70);margin-top:4px}

/* Preview Pre-Assessment modal (Library -> Pre-Assessment: Phonics -> Preview) */
.ap-modal{width:660px;max-width:94vw;background:var(--bg-light,#F7F7FF);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.28);display:flex;flex-direction:column;max-height:88vh;overflow:hidden}
.ap-modal.results{width:720px}
.ap-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;background:white;border-bottom:1px solid var(--ink-10)}
.ap-title{font-size:17px;font-weight:600;color:var(--ink-90)}
.ap-head-actions{display:flex;align-items:center;gap:12px}
.ap-results-btn{width:30px;height:30px;border:0;background:transparent;color:var(--bt-blue-80);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
.ap-results-btn:hover{background:var(--peechee-purple-10)}
.ap-results-btn .mat-ic{font-size:22px}
.ap-body{padding:20px 22px 8px;overflow:auto;flex:1}
.ap-qlabel{font-size:12px;color:var(--ink-70);margin-bottom:10px}
.ap-cols{display:grid;grid-template-columns:1fr 190px;gap:24px;align-items:start}
.ap-prompt{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:600;color:var(--ink-90);line-height:1.4;text-wrap:pretty}
.ap-speaker{width:22px;height:22px;border-radius:999px;background:var(--spark-blue-50,#1FB6D8);color:white;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.ap-photo{margin-top:16px;background:white;border:1px solid var(--ink-20);border-radius:6px;height:225px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ap-photo img{max-width:100%;max-height:100%;object-fit:contain}
.ap-options{display:grid;gap:14px;padding-top:2px}
.ap-option{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-90);cursor:pointer}
.ap-radio{width:17px;height:17px;border-radius:999px;border:1.5px solid var(--ink-40,#9a9ab0);flex-shrink:0;display:inline-block}
.ap-radio.on{border-color:var(--bt-blue-80);box-shadow:inset 0 0 0 3.5px white,inset 0 0 0 9px var(--bt-blue-80)}
.ap-foot{min-height:64px;display:flex;justify-content:flex-end;align-items:center;padding:12px 22px 20px}
.ap-next{gap:8px}
.ap-next .mat-ic{font-size:18px}
.ap-results-body{padding:18px 22px 22px;overflow:auto}
.ap-results-tbl{width:100%;border-collapse:collapse;font-size:13.5px;background:white}
.ap-results-tbl th,.ap-results-tbl td{border:1px solid var(--ink-20);padding:11px 14px;text-align:left;vertical-align:top}
.ap-results-tbl thead th{font-weight:600;color:var(--ink-90);background:white}
.ap-results-tbl tr.ap-score-row td{background:#16111c;color:white;border-color:#16111c;height:44px}
.ap-score-sub{font-size:11.5px;font-weight:400;opacity:.85}
.ap-results-tbl td.ap-right{background:#DCF5E3;color:var(--chalkboard-green-70)}
.ap-results-tbl td.ap-wrong{background:#FBE3E3;color:var(--apple-red-70)}
.ap-pending{font-style:italic;color:var(--ink-60)}

/* Library: embedded icebreaker material */
.ib-wrap{display:flex;flex-direction:column;height:auto;min-height:0;gap:10px}
.ib-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ib-host{font-size:12px;color:var(--ink-60)}
.ib-bar .link{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.ib-frame{width:100%;height:calc(100vh - 250px);min-height:420px;border:1px solid var(--ink-20);border-radius:10px;background:white}

/* Library: in-person icebreaker slide viewer (Canva can't be framed) */
.ib-slide-stage{height:calc(100vh - 300px);min-height:300px;max-height:760px;display:flex;align-items:center;justify-content:center;background:white;border:1px solid var(--ink-20);border-radius:10px;overflow:hidden;padding:10px}
.ib-slide-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.ib-slide-end{max-width:520px;text-align:center;font-size:19px;font-weight:500;line-height:1.45;color:var(--ink-90);text-wrap:pretty;padding:40px}
.ib-slide-nav{display:flex;align-items:center;justify-content:center;gap:18px;padding:4px 0 2px;flex-shrink:0}
.ib-arrow{width:38px;height:38px;border-radius:999px;border:1.5px solid var(--bt-blue-80);background:white;color:var(--bt-blue-80);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ib-arrow:hover:not(:disabled){background:var(--bt-blue-80);color:white}
.ib-arrow:disabled{border-color:var(--ink-20);color:var(--ink-30);cursor:default}
.ib-arrow .mat-ic{font-size:20px}
.ib-slide-count{font-size:13px;color:var(--ink-70);font-variant-numeric:tabular-nums;min-width:52px;text-align:center}

/* Icebreaker panels hug their content instead of stretching to the level list */
.lib-viewer.compact{align-self:start;height:auto;min-height:0}
.lib-viewer.compact .lib-viewer-body{flex:0 0 auto;min-height:0;overflow:visible}

/* Dashboard: agenda + right column end on the same line, Session Key just below */
.dash-grid{display:grid;grid-template-columns:1fr 460px;gap:22px;align-items:stretch}
.dash-col{display:flex;flex-direction:column;gap:18px;min-height:0;overflow:hidden}
.dash-col > .dash-fill{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.lessons-card.dash-fill{min-height:240px;max-height:none}
.cal-card .day-grid{flex:0 0 auto;overflow:visible}
.lessons-card.dash-fill{padding:22px 26px 18px}
.lessons-card .lessons-scroll{flex:1 1 0;min-height:0;overflow-y:auto}
.lessons-card .lessons-scroll thead th{position:sticky;top:0;z-index:1}
.lessons-roster{font-size:12px;color:var(--ink-70);margin-top:3px;line-height:1.45}

/* Schedule: the Sept 1 cell carries the full day agenda, so let it grow */
.month-cell.today{overflow:visible}
.month-cell.today .ev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Agenda card roster wraps on its own line instead of being ellipsized by the title */
.event .ev-roster{font-size:12px;color:var(--ink-70);line-height:1.4;margin-top:2px;padding-right:22px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Session key rides in the left column so Today's Lessons can reach its bottom line */
.dash-col > .color-key{flex:0 0 auto}

/* Only the fill cards grow; stats/insights/session-key keep natural height */
.dash-col > .card{flex:0 0 auto}
.dash-col > .card.dash-fill{flex:1 1 auto;min-height:0}

/* Session-card action menu */
.sess-menu-scrim{position:fixed;inset:0;z-index:250}
.sess-menu{position:fixed;background:white;border:1px solid var(--ink-20);border-radius:10px;box-shadow:0 10px 32px rgba(34,24,43,.18);padding:7px 0;display:flex;flex-direction:column}
.sess-menu-item{appearance:none;border:0;background:transparent;text-align:left;padding:12px 18px;font:inherit;font-size:14px;color:var(--ink-90);cursor:pointer}
.sess-menu-item:hover{background:var(--peechee-purple-10)}
/* Change status / assign lesson / edit session forms */
.css-form .css-row{display:flex;align-items:center;gap:18px}
.css-form .field-label{margin-bottom:10px}
.al-form{display:grid;grid-template-columns:240px 1fr;row-gap:22px;column-gap:24px;align-items:center}
.al-summary{display:grid;grid-template-columns:160px 1fr;row-gap:14px;column-gap:24px;align-items:center}
.al-summary-val{font-size:14px;color:var(--ink-90)}
.al-edit{margin-right:auto;font-size:14px}
.es-form{display:grid;grid-template-columns:150px 1fr;row-gap:22px;column-gap:24px;align-items:center}
.es-date{position:relative}
.es-date .search-input{width:100%;padding-right:38px}
.es-date .mat-ic{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--ink-70);font-size:20px;pointer-events:none}
.es-time{width:130px}
.es-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.es-chip{display:inline-flex;align-items:center;gap:6px;background:var(--peechee-purple-10);color:var(--ink-90);border-radius:999px;padding:4px 10px;font-size:12.5px}
.es-chip.locked{opacity:.75}
.es-chip button{appearance:none;border:0;background:transparent;color:var(--ink-70);cursor:pointer;display:inline-flex;padding:0}
.es-chip button .mat-ic{font-size:15px}
.radio{width:17px;height:17px;border-radius:999px;border:1.5px solid var(--ink-40,#9a9ab0);display:inline-block;flex-shrink:0}
.radio.on{border-color:var(--bt-blue-80);box-shadow:inset 0 0 0 3.5px white,inset 0 0 0 9px var(--bt-blue-80)}

/* Wayfinding: pulse the Dashboard rail item when the instructor navigates away from it.
   Pulses the icon pill only — matches the active pill's geometry, never crosses the label. */
.sidebar .nav-item.pulse .mat-ic{animation:navPulse 1.6s var(--ease-out) infinite}
.sidebar .nav-item.pulse svg{animation:navPulse 1.6s var(--ease-out) infinite;border-radius:24px}
@keyframes navPulse{0%,100%{background:rgba(255,255,255,.12);box-shadow:0 0 0 0 rgba(183,192,255,0)}50%{background:var(--bt-blue-30,#B7C0FF);box-shadow:0 0 0 4px rgba(183,192,255,.35)}}
@media (prefers-reduced-motion: reduce){.sidebar .nav-item.pulse .mat-ic,.sidebar .nav-item.pulse svg{animation:none;background:var(--bt-blue-30,#B7C0FF);box-shadow:0 0 0 4px rgba(183,192,255,.35)}}

/* .session-tab is a column flex box — keep the star inside the label's text run */
.session-tab .lib-leaf-mark{margin-left:4px;vertical-align:0}
/* Star that leads a label (session card group name) rather than trailing it */
.lib-leaf-mark.star-lead{margin-left:0;margin-right:5px}

/* ---- Simulated browser tab strip, in-session Preview links ---- */
.browser-tabs{display:flex;gap:6px;align-items:flex-end;padding:8px 20px 0;background:var(--peechee-purple-90,#22182B)}
.browser-tab{display:flex;align-items:center;gap:8px;padding:9px 14px;border:none;border-radius:10px 10px 0 0;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer;max-width:340px;white-space:nowrap;transition:background 140ms var(--ease-out)}
.browser-tab:hover{background:rgba(255,255,255,.24)}
.browser-tab.active{background:var(--bt-blue-10,#F7F7FF);color:var(--ink-90)}
.browser-tab-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;margin-left:2px;opacity:.65}
.browser-tab-x:hover{opacity:1;background:rgba(0,0,0,.12)}
.browser-tab.active .browser-tab-x:hover{background:rgba(0,0,0,.1)}
.session-preview-pane{flex:1;min-height:0;overflow:auto;background:var(--bt-blue-10,#F7F7FF)}

/* ---- Student View: floating card over the right edge of the tutor panel ---- */
.has-student-view{position:relative}
.has-student-view .live-results-wrap,.has-student-view .adaptive-note{max-width:calc(100% - 456px)}
.has-student-view .live-results-wrap{overflow-x:auto}
.has-student-view .live-results-table{min-width:470px}
/* (3) the Launched! pill clears the taller launched layout */
.has-student-view .launched-pill{position:static;margin-top:18px;display:inline-flex}
.stu-view-card{position:absolute;top:8px;right:-8px;width:440px;background:#fff;border:1px solid var(--ink-20);border-radius:16px;box-shadow:0 18px 48px rgba(34,24,43,.22);overflow:hidden;z-index:6}
.stu-view-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ink-10)}
.stu-view-dot{width:9px;height:9px;border-radius:50%;background:var(--bt-blue-80,#3C00F7);flex:none}
.stu-view-name{font-size:13px;font-weight:600;color:var(--ink-90)}
.stu-view-live{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--apple-red-60,#FF2C23)}
.stu-view-live .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:stuLive 1.4s ease-in-out infinite}
@keyframes stuLive{0%,100%{opacity:1}50%{opacity:.25}}
.stu-view-body{padding:18px 16px 22px}
.stu-view-q{display:grid;grid-template-columns:1fr 150px;gap:16px}
.stu-view-q-left{border:1px solid var(--ink-10);border-radius:12px;padding:14px}
.stu-view-q-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-90);margin-bottom:8px}
.stu-view-q-prompt{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.45;color:var(--ink-70);margin-bottom:12px}
.stu-view-img{position:relative}
.stu-view-img .audio-ico{position:absolute;top:8px;left:8px;z-index:2}
.stu-view-img img{display:block;width:100%;height:130px;object-fit:cover;border-radius:10px;background:var(--ink-10)}
.stu-view-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.stu-view-foot{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:4px}
.stu-view-next{display:inline-flex;align-items:center;gap:6px;background:var(--bt-blue-80);color:#fff;border-radius:24px;padding:8px 18px;font-size:13px;font-weight:500;box-shadow:0 1px 3px rgba(34,24,43,.18);transition:transform 120ms var(--ease-out),background 120ms var(--ease-out)}
.stu-view-next.pressed{background:var(--bt-blue-90,#241b6b);transform:scale(.95)}
.stu-view-opt{display:flex;flex-direction:column;align-items:center;gap:7px}
.stu-view-opt .glyph{display:flex;align-items:center;justify-content:center;width:100%;height:62px;border-radius:10px;background:var(--peechee-purple-10,#F2EEFB);font-size:34px;font-weight:600;color:var(--ink-90);transition:background 160ms var(--ease-out),color 160ms var(--ease-out)}
.stu-view-opt .radio-dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--ink-30);background:#fff;transition:background 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.stu-view-opt.picked .glyph{background:var(--bt-blue-30,#B7C0FF)}
.stu-view-opt.picked .radio-dot{background:var(--bt-blue-80,#3C00F7);border-color:var(--bt-blue-80,#3C00F7);box-shadow:inset 0 0 0 3px #fff}
.stu-view-opts.words .glyph{font-size:19px;font-weight:600;letter-spacing:0;padding:0 4px}
.stu-view-opt.right .glyph{background:var(--chalkboard-green-10,#E6F6EC);box-shadow:inset 0 0 0 2px var(--chalkboard-green-50,#2FA35E)}
.stu-view-opt.wrong .glyph{background:var(--apple-red-10,#FFE7E5);box-shadow:inset 0 0 0 2px var(--apple-red-60,#FF2C23)}
.stu-view-qnum{font-size:13px;font-weight:600;color:var(--ink-90);margin-bottom:12px}
.stu-view-letter-card{position:relative;border:1px solid var(--ink-20);border-radius:12px;height:210px;display:flex;align-items:center;justify-content:center}
.stu-view-letter-card .glyph{font-size:110px;font-weight:600;line-height:1;color:var(--ink-90)}
.stu-view-letter-card .audio-ico{position:absolute;top:10px;left:10px}
.tutor-led-letter{width:280px;height:280px;border:2px solid var(--ink-90);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:150px;font-weight:600;line-height:1;color:var(--ink-90);background:#fff}
.has-student-view .score-table{max-width:calc(100% - 456px)}
@media (max-width:1180px){.has-student-view .score-table{max-width:calc(100% - 400px)}}
@media (max-width:1180px){.stu-view-card{width:380px}.has-student-view .live-results-wrap,.has-student-view .adaptive-note{max-width:calc(100% - 400px)}}

/* Student View — finished state */
.stu-view-done-tag{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--chalkboard-green-70,#1E7A44);background:var(--chalkboard-green-10,#E6F6EC);padding:3px 9px;border-radius:24px}
.stu-view-finished{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:34px 24px 40px}
.stu-view-finished .ico{color:var(--chalkboard-green-50,#2FA35E);display:inline-flex}
.stu-view-finished .ttl{font-size:16px;font-weight:600;color:var(--ink-90)}
.stu-view-finished .sub{font-size:13px;line-height:1.5;color:var(--ink-70);max-width:280px}

/* Demo wayfinding flashes: draw the eye to the next click */
@keyframes demoFlash{0%,100%{box-shadow:0 0 0 0 rgba(183,192,255,0)}50%{box-shadow:0 0 0 5px rgba(183,192,255,.55)}}
.browser-tab.flash{animation:demoFlash 1.5s var(--ease-out) infinite;background:rgba(255,255,255,.3)}
.session-end-bar.flash{animation:demoFlashRed 1.5s var(--ease-out) infinite}
@keyframes demoFlashRed{0%,100%{box-shadow:0 0 0 0 rgba(255,44,35,0)}50%{box-shadow:0 0 0 6px rgba(255,44,35,.4)}}
@media (prefers-reduced-motion: reduce){.browser-tab.flash,.session-end-bar.flash{animation:none;box-shadow:0 0 0 4px rgba(183,192,255,.55)}}

/* Reset — replay the live assessment for the next demo audience */
.demo-reset{margin-top:18px;margin-right:12px;gap:6px;vertical-align:top}

/* ===== Instructor Growth report ===== */
.ig-h4{font-size:16px;font-weight:700;color:var(--ink-90)}
.filter-chip.locked{opacity:.55;cursor:default}

/* Assessment sub-tabs: quiet underline row, not pills */
.ig-subtabs{display:flex;gap:26px;border-bottom:1px solid var(--ink-10);margin-top:4px}
.ig-subtabs button{padding:0 0 10px;border:0;background:none;font:inherit;font-size:14px;color:var(--ink-70);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 140ms var(--ease-out)}
.ig-subtabs button:hover{color:var(--ink-90)}
.ig-subtabs button.active{color:var(--ink-90);font-weight:600;border-bottom-color:var(--bt-blue-80)}

/* Learning Journey: stat column + mastery table */
.ig-journey{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start}
.ig-journey-stats{display:grid;gap:12px}
.ig-stat{border:1px solid var(--ink-10);border-radius:12px;padding:16px 12px;text-align:center;background:#fff}
.ig-stat .n{font-size:34px;font-weight:600;line-height:1.1;color:var(--ink-90)}
.ig-stat .n.green{color:var(--chalkboard-green-70,#1E7A44)}
.ig-stat .n.amber{color:#C77700}
.ig-stat .n.red{color:var(--apple-red-70,#c93222)}
.ig-stat .l{font-size:13px;color:var(--ink-70);margin-top:4px}
.ig-journey-tbl{min-width:0}

/* Standards Addressed accordion */
.ig-standards{margin-top:34px}
.ig-std-block{margin-top:12px}
.ig-std-head{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px;border:0;border-radius:8px;background:var(--bt-blue-15,#E8EBFF);font:inherit;font-size:15px;color:var(--ink-90);cursor:pointer;text-align:left}
.ig-std-head .chev{display:inline-flex;transition:transform 140ms var(--ease-out)}
.ig-std-head.open .chev{transform:rotate(180deg)}
.ig-std-grade{flex:1;font-weight:500}
.ig-std-tag{font-size:12px;padding:3px 10px;border-radius:4px;background:var(--ink-10);color:var(--ink-70)}
.ig-std-tag.assessed{background:var(--chalkboard-green-10,#DCFFE6);color:var(--chalkboard-green-70,#1B8841)}
.ig-std-tbl{margin-top:0}
.ig-std-tbl td.ig-below{color:var(--apple-red-70,#c93222);font-weight:500}
.ig-std-note{font-size:12px;color:var(--ink-50);margin:8px 0 0}

/* Student Growth Report */
.ig-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.glance-row.ig-impact{grid-template-columns:repeat(2,1fr);row-gap:26px;padding:8px 0 4px}
.glance-row.ig-impact .glance-cell .num{font-size:44px}
.glance-row.ig-impact .glance-cell:nth-child(2n+1)::before{border-left:0}
.ig-snap{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ink-10);border-radius:12px;overflow:hidden;background:#fff}
.ig-snap>div{padding:16px 18px 20px;text-align:center;border-left:1px solid var(--ink-10)}
.ig-snap>div:first-child{border-left:0}
.ig-snap .l{font-size:12px;font-weight:600;color:var(--ink-90)}
.ig-snap .v{font-size:38px;font-weight:600;line-height:1.1;margin-top:8px;color:var(--ink-90);letter-spacing:-.02em}
.ig-pace{position:relative;margin:20px 0 54px}
.ig-pace-track{height:10px;border-radius:999px;background:var(--ink-10)}
.ig-pace-fill{height:10px;border-radius:999px;background:var(--bt-blue-30)}
.ig-pace-dot{position:absolute;top:-3px;width:16px;height:16px;border-radius:50%;transform:translateX(-50%)}
.ig-pace-dot.now{background:var(--bt-blue-80)}
.ig-pace-dot.target{background:var(--ink-30)}
.ig-pace-cap{position:absolute;top:22px;transform:translateX(-50%);text-align:center;white-space:nowrap}
.ig-pace-cap-row{display:flex;gap:14px;font-size:12px;font-weight:600;color:var(--ink-90)}
.ig-pace-cap-sub{display:flex;gap:14px;font-size:12px;color:var(--ink-50);margin-top:2px}
.ig-pace-cap-row span,.ig-pace-cap-sub span{flex:1 1 0}


/* === CLEVER ROSTERING WORKSPACE === */
.rs-cbx { border-radius: 4px; border: 2px solid var(--ink-30); flex-shrink: 0; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.rs-cbx.on { background: var(--bt-blue-80); border-color: var(--bt-blue-80); }
.rs-cbx.dis { border-color: var(--ink-20); background: var(--ink-10); cursor: default; }
.rs-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.rs-scroll::-webkit-scrollbar-thumb { background: var(--ink-30); border-radius: 8px; border: 2px solid var(--bt-blue-10); }
.rs-iconbtn { width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-60); flex-shrink: 0; padding: 0; }
.rs-iconbtn:hover { background: var(--bt-blue-10); color: var(--ink-90); }
.rs-g-edit:hover { color: var(--bt-blue-80); background: var(--bt-blue-10); }
.rs-g-del:hover { color: var(--apple-red-70); background: var(--apple-red-10); }
.rs-link { background: transparent; border: none; cursor: pointer; font: 500 13.5px 'Poppins', system-ui, sans-serif; color: var(--bt-blue-80); display: inline-flex; align-items: center; gap: 6px; padding: 0; white-space: nowrap; }
.rs-link:hover { opacity: .72; }
.rs-sorth { display: inline-flex; align-items: flex-start; gap: 3px; user-select: none; }
.rs-funnel { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; flex-shrink: 0; }
.rs-funnel:hover { background: var(--bt-blue-10); }
.rs-fpop { position: absolute; top: 26px; left: 0; z-index: 60; min-width: 170px; background: #fff; border-radius: 8px; box-shadow: 0 8px 28px rgba(3,3,3,.18); padding: 6px; }
.rs-finput { width: 100%; height: 30px; border: 1px solid var(--ink-30); border-radius: 6px; padding: 0 8px; font: 400 12.5px 'Poppins', system-ui, sans-serif; outline: none; box-sizing: border-box; }
.rs-fclear { margin-top: 4px; padding: 5px 6px; font: 500 12px 'Poppins', system-ui, sans-serif; color: var(--bt-blue-80); cursor: pointer; border-radius: 5px; }
.rs-fclear:hover { background: var(--bt-blue-10); }
.rs-frow { display: flex; gap: 8px; align-items: center; padding: 5px 6px; cursor: pointer; font: 400 12.5px 'Poppins', system-ui, sans-serif; border-radius: 5px; }
.rs-frow:hover { background: var(--bt-blue-10); }
.rs-band { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.rs-gtag { display: inline-block; padding: 1px 8px; font: 500 11.5px 'Poppins', system-ui, sans-serif; border-radius: 4px; white-space: nowrap; }
.rs-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #FF8635; }
.rs-review { display: inline-flex; align-items: center; gap: 5px; background: var(--locker-orange-10, #FFF1E7); color: var(--ink-90); padding: 2px 9px; font: 500 11.5px 'Poppins', system-ui, sans-serif; border-radius: 4px; white-space: nowrap; }

.rs-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1.5px solid var(--ink-20); border-radius: 999px; flex: 1; max-width: 320px; }
.rs-search input { flex: 1; border: none; outline: none; background: transparent; font: 400 14px 'Poppins', system-ui, sans-serif; color: var(--ink-90); }

.rs-tablewrap { flex: 1; overflow: auto; border: 1px solid var(--ink-10); border-radius: 10px; min-height: 0; max-height: 62vh; }
.rs-dtable { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.rs-dtable th, .rs-dtable td { box-sizing: border-box; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ink-10); }
.rs-dtable thead th { position: sticky; top: 0; background: var(--bt-blue-10); font: 600 12px/15px 'Poppins', system-ui, sans-serif; color: var(--ink-90); vertical-align: top; z-index: 5; }
.rs-dtable tbody td { background: #fff; font: 400 13.5px 'Poppins', system-ui, sans-serif; color: var(--ink-90); vertical-align: middle; }
.rs-dtable tbody tr:hover td { background: var(--bt-blue-10); }
.rs-dtable .rs-stick { position: sticky; }
.rs-dtable .rs-edge { box-shadow: 8px 0 8px -6px rgba(3,3,3,.10); border-right: 1px solid var(--ink-10); }
.rs-dtable .rs-domhead { border-left: 1px solid var(--ink-10); font-weight: 500; color: var(--ink-60); }

.rs-gcard { border: 1px solid var(--ink-10); border-radius: 12px; background: #fff; display: flex; flex-direction: column; min-width: 0; }
.rs-gactions { opacity: 0; transition: opacity .15s var(--ease-out, ease-out); display: inline-flex; align-items: center; }
.rs-gcard:hover .rs-gactions, .rs-gcard:focus-within .rs-gactions { opacity: 1; }
.rs-row:hover { background: var(--bt-blue-10) !important; }
.rs-row .rs-rm { opacity: 0; transition: opacity .15s var(--ease-out, ease-out); }
.rs-row:hover .rs-rm { opacity: 1; }
.rs-movehere { margin-top: auto; padding: 10px 14px; border: none; border-top: 1px solid var(--ink-10); background: #fff; color: var(--bt-blue-80); font: 500 12.5px 'Poppins', system-ui, sans-serif; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 6px; border-radius: 0 0 12px 12px; }
.rs-movehere:hover { background: var(--bt-blue-10); }

.rs-warnbox { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--locker-orange-10, #FFF1E7); border-radius: 8px; font: 400 13px 'Poppins', system-ui, sans-serif; color: var(--ink-90); }
.rs-infobox { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 14px; background: var(--bt-blue-10); border-radius: 8px; font: 400 13px/1.5 'Poppins', system-ui, sans-serif; }

.rs-chip { height: 40px; padding: 0 20px; border-radius: 24px; background: #fff; cursor: pointer; font: 400 14px 'Poppins', system-ui, sans-serif; border: 1px solid var(--ink-20); color: var(--ink-90); display: inline-flex; align-items: center; gap: 8px; }
.rs-chip.on { border: 2px solid var(--bt-blue-80); background: var(--bt-blue-10); }
.rs-chip:hover:not(.on) { border-color: var(--ink-40); }

.rs-scenario { display: inline-flex; align-items: center; gap: 9px; padding: 5px 10px; border: 1px dashed var(--ink-30); border-radius: 8px; }
.rs-scenario > span { font: 500 10px 'Poppins', system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-60); white-space: nowrap; }
.rs-scenario-toggle { display: inline-flex; background: #fff; border: 1px solid var(--ink-30); border-radius: 24px; overflow: hidden; height: 26px; }
.rs-scenario-toggle button { border: none; cursor: pointer; padding: 0 12px; font: 500 11.5px 'Poppins', system-ui, sans-serif; background: #fff; color: var(--ink-60); }
.rs-scenario-toggle button.on { background: var(--peechee-purple-90); color: #fff; }

.rs-kebab-wrap { position: relative; }
.rs-kmenu { position: absolute; top: 38px; right: 0; min-width: 258px; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(3,3,3,.18); padding: 6px 0; z-index: 40; }
.rs-kitem { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; font: 400 14px 'Poppins', system-ui, sans-serif; color: var(--ink-90); }
.rs-kitem:hover { background: var(--bt-blue-10); }
.rs-kitem.dis { color: var(--ink-40); cursor: default; }
.rs-kitem.dis:hover { background: transparent; }

.rs-footer { position: sticky; bottom: 0; z-index: 10; background: #fff; border-top: 1px solid var(--ink-10); border-radius: 12px 12px 0 0; box-shadow: 0 -6px 20px rgba(3,3,3,.06); padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; row-gap: 10px; }
.rs-flash { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 500 13px 'Poppins', system-ui, sans-serif; background: var(--chalkboard-green-10, #E4F5EC); color: var(--chalkboard-green-70, #1F8A5B); padding: 6px 12px; border-radius: 999px; }

.rs-summary { position: fixed; bottom: 86px; right: 32px; z-index: 1002; width: 320px; max-width: calc(100vw - 48px); background: #fff; border: 1px solid var(--ink-10); border-radius: 16px; box-shadow: 0 12px 36px rgba(3,3,3,.18); overflow: hidden; }
.rs-toast { position: relative; display: flex; align-items: center; gap: 8px; background: var(--chalkboard-green-70, #1F8A5B); color: #fff; padding: 12px 16px; border-radius: 12px; font: 500 14px 'Poppins', system-ui, sans-serif; box-shadow: 0 12px 36px rgba(3,3,3,.2); }
.rs-tag { display: inline-block; padding: 3px 10px; border-radius: 4px; font: 500 12px 'Poppins', system-ui, sans-serif; }
.rs-tag-ok { background: var(--chalkboard-green-10, #E4F5EC); color: var(--chalkboard-green-70, #1F8A5B); }
.rs-tag-info { background: var(--bt-blue-15, #E8EBFF); color: var(--ink-90); }

.rs-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink-30); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rs-radio.on { border-color: var(--bt-blue-80); }
.rs-radio.on::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--bt-blue-80); }
.rs-selin { height: 46px; border: 1px solid var(--ink-30); border-radius: 8px; padding: 0 34px 0 14px; font: 500 14px 'Poppins', system-ui, sans-serif; color: var(--ink-90); background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23666' stroke-width='1.7' stroke-linecap='round'><path d='M4 6l4 4 4-4'/></svg>") no-repeat right 11px center; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rs-dateinput { height: 46px; border: 1px solid var(--ink-30); border-radius: 8px; padding: 0 40px 0 14px; font: 400 14px 'Poppins', system-ui, sans-serif; color: var(--ink-90); outline: none; width: 100%; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round'><rect x='2.5' y='4' width='13' height='12' rx='2'/><path d='M2.5 7.5h13M6 2.5v3M12 2.5v3'/></svg>") no-repeat right 12px center; }
.rs-dayt { height: 46px; border: 1px solid var(--ink-30); border-radius: 8px; background: #fff; font: 500 14px 'Poppins', system-ui, sans-serif; color: var(--ink-90); cursor: pointer; flex: 1; }
.rs-dayt.on { background: var(--bt-blue-80); border-color: var(--bt-blue-80); color: #fff; }

/* Aliases: the rostering workspace was authored against the DS token names. */
:root {
  --primary: var(--bt-blue-80, #3C01F7);
  --info: var(--bt-blue-80, #3C01F7);
  --danger: var(--apple-red-60, #FF2C23);
  --warning: #E06A00;
  --text-black: var(--ink-90, #121212);
  --text-black-light: var(--ink-60, #666666);
  --text-disabled: var(--ink-40, #999999);
  --border-grey: var(--ink-10, #EBEBF0);
  --border-grey-dark: var(--ink-30, #CCCCCC);
  --bg-table-header: var(--bt-blue-10, #F7F7FF);
  --bg-success: var(--chalkboard-green-70, #1F8A5B);
  --bg-success-light: var(--chalkboard-green-10, #E4F5EC);
  --bt-blue-15: #E8EBFF;
  --white: #FFFFFF;
  --white-hover: #FFFFFF;
  --green-20: #C0F0CE;
  --green-50: #34C759;
}
.rs-railtitle { writing-mode: vertical-rl; white-space: nowrap; font: 600 13px 'Poppins', system-ui, sans-serif; }

/* Session Ended — pull attention to Note Observations */
@keyframes btnFlash { 0%,100% { box-shadow: 0 0 0 0 rgba(60,1,247,0); } 50% { box-shadow: 0 0 0 8px rgba(60,1,247,0.18); } }
.btn.btn-flash { animation: btnFlash 1.6s ease-in-out infinite; }
.btn.btn-flash:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .btn.btn-flash { animation: none; } }

/* Month cell: school holiday + pending-lesson sub-label */
.month-cell.no-school { background: var(--locker-orange-10, #FFF1E7); }
.month-noschool { font-size: 12px; color: var(--ink-70); margin-top: 2px; }
.session-lesson.tbd { color: var(--ink-50); font-style: italic; }

/* Month event: single line, dot + time/timezone/group, no group colour stripe */
.month-cell .ev { align-items: center; gap: 6px; padding: 2px 2px; }
.month-cell .ev .dot { width: 8px; height: 8px; }
.month-cell .ev .ev-txt { font-size: 12px; color: var(--ink-90); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-cell .ev.canceled .ev-txt { text-decoration: line-through; color: var(--ink-50); }
.month-cell .more { text-decoration: underline; }

/* "+N More" day modal */
.sched-day-modal { background: #fff; border-radius: 12px; width: 420px; max-width: calc(100vw - 32px); max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 18px 48px rgba(18,18,18,.24); overflow: hidden; }
.sched-day-modal .sdm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: var(--peechee-purple-10, #F7F7FF); }
.sched-day-modal .sdm-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink-90); }
.sched-day-modal .sdm-x { border: 0; background: none; cursor: pointer; color: var(--ink-90); display: inline-flex; padding: 4px; border-radius: 999px; }
.sched-day-modal .sdm-x:hover { background: rgba(18,18,18,.06); }
.sched-day-modal .sdm-list { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.sched-day-modal .sdm-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-90); }
.sched-day-modal .sdm-row.canceled .sdm-txt { text-decoration: line-through; color: var(--ink-60, #6A6A93); }

/* ===== Tools: Launch a tool modal + Games tab (in-session) ===== */
.tools-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;font:500 14px 'Poppins',sans-serif;color:var(--primary)}
.tools-btn:hover{color:var(--peechee-purple-90,#22182B)}
.tool-card-grid{display:grid;grid-template-columns:1fr;gap:16px}
.tool-card{border:2px solid var(--primary);border-radius:12px;padding:14px;background:#fff}
.tool-card.selected{background:var(--bt-blue-10,#F7F7FF)}
.tool-card-name{font:500 18px 'Poppins',sans-serif;color:var(--ink-90,#121212);margin-top:14px}
.tool-card-desc{font:400 14px 'Poppins',sans-serif;color:var(--ink-70,#5b5b66);margin-top:4px}
.tool-thumb{border:1px solid var(--border-grey,#E5E5E5);border-radius:8px;overflow:hidden;background:#fff}
.tool-thumb-bar{display:flex;align-items:center;gap:5px;padding:7px 9px;background:#fff}
.tool-thumb-bar span{width:6px;height:6px;border-radius:50%;background:#d8d8e2}
.tool-thumb-bar em{flex:1;height:10px;border-radius:6px;background:var(--primary);margin-left:6px}
.tool-thumb-label{font:500 12px 'Poppins',sans-serif;color:var(--ink-90,#121212);padding:0 10px 6px}
.tool-thumb-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 10px 12px}
.tool-thumb-tile{height:56px;border-radius:6px;color:#fff;font:500 9px 'Poppins',sans-serif;display:flex;align-items:flex-end;padding:6px}
.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px;max-width:640px}
.game-tile{border:0;border-radius:10px;color:#fff;cursor:pointer;padding:18px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:24px;font:500 15px 'Poppins',sans-serif;transition:box-shadow 140ms var(--ease-out,ease-out),opacity 140ms}
.game-tile.selected{box-shadow:0 0 0 3px var(--peechee-purple-90,#22182B)}
.game-tile.dim{opacity:.45}
.game-live-card{margin-top:20px;background:#fff;border:1px solid var(--border-grey,#E5E5E5);border-radius:12px;padding:18px;max-width:640px}
.game-live-head{display:flex;align-items:center;gap:10px;font:500 16px 'Poppins',sans-serif;color:var(--ink-90,#121212)}
.game-live-students{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* Partnership at a Glance — pill / number / label share rows across all cells so the numbers baseline together */
.glance-row{grid-template-rows:auto auto auto}
.glance-row>.glance-cell{display:grid;grid-row:1 / -1;grid-template-rows:subgrid;align-content:end}
.glance-cell .excellent-pill,.glance-cell .low-pill{grid-row:1;align-self:end;margin-bottom:8px}
.glance-cell .num{grid-row:2;align-self:end}
.glance-cell .lbl{grid-row:3}
/* Games opened as a simulated browser tab */
.session-game-pane{flex:1;display:flex;flex-direction:column;background:#fff;min-height:0}
.game-pane-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 16px;border-bottom:1px solid var(--border-grey,#E5E5E5);background:var(--bt-blue-10,#F7F7FF)}
.game-pane-url{font:400 12px 'Poppins',sans-serif;color:var(--ink-70,#5b5b66);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-frame{flex:1;width:100%;border:0;min-height:520px}


/* === KB-only additions restored after 8/25/26 consolidation port === */
/* Deck-driven highlight for the Slide 6 demo — pulse a ring around the Start
   Session button in the Up Next banner. Body class set by app.jsx when the URL
   contains ?highlight=start-session. */
@keyframes upnext-start-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(60, 0, 247, 0.55); }
  70%  { box-shadow: 0 0 0 20px rgba(60, 0, 247, 0); }
  100% { box-shadow: 0 0 0 0 rgba(60, 0, 247, 0); }
}
body.highlight-start-session .upnext-start {
  position: relative;
  border-radius: 999px;
  animation: upnext-start-pulse 1.7s ease-out infinite;
}

/* Deck-driven highlight for the Slide 12 demo — pulse the first row of the
   My Students table so viewers see where to click through to a student. Body
   class set by app.jsx when the URL contains ?highlight=first-student.
   Scoped to #my-students-table so it never bleeds into other .tbl tables. */
@keyframes my-students-row-pulse {
  0%   { box-shadow: inset 0 0 0 2px rgba(60, 0, 247, 0.55), 0 0 0 0 rgba(60, 0, 247, 0.45); }
  70%  { box-shadow: inset 0 0 0 2px rgba(60, 0, 247, 0.2),  0 0 0 12px rgba(60, 0, 247, 0); }
  100% { box-shadow: inset 0 0 0 2px rgba(60, 0, 247, 0.55), 0 0 0 0 rgba(60, 0, 247, 0); }
}
/* Highlight the Name cell (2nd td; 1st is the checkbox) of the first row,
   plus the Last Session column header. The Slide 12 demo also auto-sorts by
   Last Session so the first row is the "hasn't been seen recently" student. */
body.highlight-first-student #my-students-table tbody tr:first-child td:nth-child(2) {
  animation: my-students-row-pulse 1.7s ease-out infinite;
  border-radius: 6px;
  position: relative;
}
body.highlight-first-student #my-students-last-th {
  animation: my-students-row-pulse 1.7s ease-out infinite;
  border-radius: 6px;
  position: relative;
}

/* Deck-driven highlight for the Slide 4 demo — outline the dashboard's schedule
   card so viewers see "each session shows the people and time on the left, and
   what needs your attention on the right." Body class set by app.jsx when the
   URL contains ?highlight=schedule. Scoped to #dashboard-schedule. */
@keyframes dashboard-schedule-pulse {
  0%   { box-shadow: 0 0 0 3px rgba(60, 0, 247, 0.55), 0 0 0 0 rgba(60, 0, 247, 0.35); }
  70%  { box-shadow: 0 0 0 3px rgba(60, 0, 247, 0.2),  0 0 0 18px rgba(60, 0, 247, 0); }
  100% { box-shadow: 0 0 0 3px rgba(60, 0, 247, 0.55), 0 0 0 0 rgba(60, 0, 247, 0); }
}
body.highlight-schedule #dashboard-schedule {
  animation: dashboard-schedule-pulse 1.9s ease-out infinite;
}

/* Session Plan read-only view (Step 3 of New Session modal). Fields render as
   static rows; hover reveals an edit pencil on the right; clicking any row (or
   the pencil) switches to the editable form. Matches Slide 5 hotspot #2. */
.plan-readonly {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-1, #E5E5EA);
  border-radius: 10px; overflow: hidden;
  background: #fafafb;
}
.plan-ro-row {
  display: grid; grid-template-columns: 260px 1fr 40px;
  align-items: center; gap: 24px;
  padding: 14px 18px;
  border-top: 1px solid var(--border-1, #E5E5EA);
  cursor: pointer; transition: background 120ms ease;
}
.plan-ro-row:first-child { border-top: none; }
.plan-ro-row:hover { background: #f0eeff; }
.plan-ro-label { font-size: 14px; color: var(--ink-70); font-weight: 500; }
.plan-ro-value { font-size: 15px; color: var(--ink-90); font-weight: 600; }
.plan-ro-edit {
  border: none; background: transparent; color: var(--bt-blue, #3C00F7);
  cursor: pointer; padding: 6px; border-radius: 6px;
  opacity: 0; transition: opacity 120ms ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.plan-ro-row:hover .plan-ro-edit { opacity: 1; }
.plan-ro-edit:hover { background: rgba(60, 0, 247, 0.08); }
.plan-ro-hint {
  margin: 12px 4px 0; font-size: 13px; color: var(--ink-60, #8E8E93); font-style: italic;
}

/* Route-aware highlights that transition through the demo flow.
   Slide 6 join flow: start-session -> agenda-tab (once user clicks Start).
   Slide 9 end flow:  end-session pulses; clears when user lands on session-ended.
   Slide 11 action items: outlines the Action Items card on the dashboard. */
@keyframes agenda-tab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(60, 0, 247, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(60, 0, 247, 0); }
  100% { box-shadow: 0 0 0 0 rgba(60, 0, 247, 0); }
}
body.highlight-agenda-tab #session-agenda-list {
  position: relative; border-radius: 12px;
  animation: agenda-tab-pulse 1.9s ease-out infinite;
}
@keyframes end-session-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
  70%  { box-shadow: 0 0 0 18px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
body.highlight-end-session #session-end-button {
  position: relative; border-radius: 999px;
  animation: end-session-pulse 1.7s ease-out infinite;
}
@keyframes action-items-pulse {
  0%   { box-shadow: 0 0 0 3px rgba(60, 0, 247, 0.55), 0 0 0 0 rgba(60, 0, 247, 0.35); }
  70%  { box-shadow: 0 0 0 3px rgba(60, 0, 247, 0.2),  0 0 0 18px rgba(60, 0, 247, 0); }
  100% { box-shadow: 0 0 0 3px rgba(60, 0, 247, 0.55), 0 0 0 0 rgba(60, 0, 247, 0); }
}
body.highlight-action-items #dashboard-action-items {
  animation: action-items-pulse 1.9s ease-out infinite;
}


/* === Lesson-plan tabbed viewer + CDN teaching-slides frame (restored from fbd6452, per Kylie 8/28) === */
.lp-viewer {
  color: var(--ink-90);
  /* neutralize the parent's padding so the sticky strip runs edge-to-edge */
  margin: -18px -22px;
}
.lp-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--ink-10);
  background: white;
  position: sticky; top: 0; z-index: 2;
}
.lp-strip-left { display: flex; align-items: center; gap: 14px; }
.lp-strip-logo { height: 24px; }
.lp-strip-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-70);
}
.lp-strip-tabs {
  display: inline-flex; gap: 4px;
  background: var(--peechee-purple-10);
  padding: 4px; border-radius: 999px;
}
.lp-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 18px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-70);
  transition: background 120ms, color 120ms;
}
.lp-tab:hover { color: var(--ink-90); }
.lp-tab.active { background: var(--peechee-purple-90); color: white; }
.lp-viewer-body {
  background: white;
  padding: 24px 32px 40px;
}

/* Hero: DIGRAPHS · LESSON 2.1 tag + title + objective + chips */
.lp-hero { margin-bottom: 26px; }
.lp-eyebrow-tag {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--bt-blue-80);
  margin-bottom: 8px;
}
.lp-title {
  font-size: 32px; font-weight: 700; margin: 0 0 18px; color: var(--ink-90);
}
.lp-objective {
  background: var(--peechee-purple-10);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.lp-objective-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--ink-70); margin-bottom: 4px;
}
.lp-objective p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: white; border: 1px solid var(--ink-10);
  border-radius: 999px; padding: 6px 12px;
  font-size: 12.5px; color: var(--ink-90);
}
.lp-chip-link { color: var(--bt-blue-80); text-decoration: none; }
.lp-chip-link:hover { background: var(--peechee-purple-10); }

/* Sections & steps */
.lp-section { margin: 18px 0; }
.lp-section-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--bt-blue-80);
  margin-bottom: 6px;
}
.lp-section p, .lp-step p { font-size: 14.5px; line-height: 1.6; margin: 6px 0; color: var(--ink-90); }
.lp-toc { padding-left: 22px; }
.lp-toc li { font-size: 14px; margin-bottom: 6px; }
.lp-toc-time { color: var(--ink-70); margin-left: 6px; font-size: 12.5px; }

.lp-step {
  border-top: 1px solid var(--ink-10);
  padding-top: 18px; margin-top: 22px;
}
.lp-step-head {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  margin-bottom: 4px;
}
.lp-step-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--bt-blue-80);
}
.lp-step-time {
  font-size: 12px; color: var(--ink-70); background: var(--peechee-purple-10);
  padding: 3px 10px; border-radius: 999px;
}
.lp-step-heading {
  font-size: 22px; font-weight: 700; margin: 2px 0 12px; color: var(--ink-90);
}
.lp-step-big { font-size: 14.5px; line-height: 1.6; }

.lp-mini-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-70);
  margin-bottom: 6px;
}
.lp-quick-check, .lp-ido, .lp-step-biglist, .lp-step-strategies, .lp-cheat, .lp-decodable {
  margin: 14px 0;
}
.lp-quick-check ul, .lp-step-biglist ul, .lp-step-strategies ul, .lp-cheat ul {
  margin: 4px 0 0; padding-left: 22px;
}
.lp-quick-check li, .lp-step-biglist li, .lp-step-strategies li, .lp-cheat li {
  font-size: 14px; line-height: 1.55; margin-bottom: 4px;
}
.lp-ido-item {
  border-left: 3px solid var(--peechee-purple-30);
  padding: 4px 0 4px 14px;
  margin-bottom: 10px;
}
.lp-ido-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.lp-cheat {
  background: var(--peechee-purple-10);
  border-radius: 10px; padding: 12px 16px;
}
.lp-decodable p { margin: 0 0 8px; }

/* WE DO / YOU DO blocks */
.lp-block {
  border: 1px solid var(--ink-10);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  background: white;
}
.lp-block-we { border-left: 4px solid var(--spark-blue-40, #2ec3f4); }
.lp-block-you { border-left: 4px solid var(--peechee-purple-90); }
.lp-block-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.lp-block-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--ink-70);
  background: var(--peechee-purple-10);
  padding: 3px 8px; border-radius: 999px;
}
.lp-block-title { font-weight: 700; font-size: 14.5px; }
.lp-block-count { font-size: 12px; color: var(--ink-70); margin-left: auto; }
.lp-block ol { padding-left: 22px; margin: 4px 0 0; }
.lp-block li { font-size: 14px; line-height: 1.55; margin-bottom: 4px; }

.lp-discussion {
  background: var(--peechee-purple-10);
  border-radius: 10px; padding: 12px 16px;
  margin: 12px 0; font-size: 14px; line-height: 1.55;
}
.lp-game-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--peechee-purple-90); color: white;
  text-decoration: none; font-weight: 700; font-size: 13px;
  margin-top: 6px;
}
.lp-game-btn:hover { background: var(--peechee-purple-70, #4a3a5c); }

/* Misconceptions grid */
.lp-misc {
  border: 1px solid var(--ink-10); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 12px;
  background: white;
}
.lp-misc-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.lp-misc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lp-misc-grid p { margin: 0; font-size: 14px; line-height: 1.55; }

/* Differentiation grid */
.lp-diff-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px;
  margin-top: 10px;
}
.lp-diff-grid ul { padding-left: 22px; margin: 4px 0 0; }
.lp-diff-grid li { font-size: 14px; line-height: 1.5; margin-bottom: 4px; }

.lp-footer-legal {
  font-size: 10.5px; color: var(--ink-70); text-align: center;
  margin-top: 22px; padding-top: 12px;
  border-top: 1px solid var(--ink-10); line-height: 1.5;
}

@media (max-width: 780px) {
  .lp-misc-grid, .lp-diff-grid { grid-template-columns: 1fr; }
  .lp-strip { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* === Floating Tweaks FAB (always-available toggle) === */
.tweaks-fab {
  position: fixed; right: 20px; bottom: 20px;
  background: var(--peechee-purple-90); color: white;
  border: none; border-radius: 999px;
  padding: 12px 20px; font-family: inherit; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; z-index: 199;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: transform 140ms, box-shadow 140ms;
}
.tweaks-fab:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,0.22); }
.tweaks-fab svg { width: 18px; height: 18px; }
.tweaks-fab .mat-ic { font-size: 18px; }

/* === FR Teaching Slides · CDN iframe embed (Lesson 2.1 sh) === */
.lp-slides-frame-wrap {
  width: 100%;
  height: calc(100vh - 260px);
  min-height: 520px;
  background: #000;
  padding: 0;
  display: flex; align-items: stretch; justify-content: stretch;
}
.lp-slides-frame {
  width: 100%; height: 100%;
  border: 0;
  display: block;
  background: #000;
}