/* Live tutoring room — tutor + student */
.session-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.session-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0.85rem var(--space);
}

.session-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.session-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-heading);
  font-size: var(--step-3);
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.session-brand img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: contain;
}

.session-main {
  flex: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space);
  width: 100%;
}

.session-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .session-grid--tutor {
    grid-template-columns: 1fr 1fr;
  }
}

.session-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-sm);
}

.session-card h2 {
  margin: 0 0 0.75rem;
  font-size: var(--step-3);
  color: var(--ink);
}

.session-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: var(--step-0);
  color: var(--muted);
  margin-bottom: 1rem;
}

.session-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.28rem 0.38rem;
  border-radius: 999px;
  background: var(--paper-2);
  font-weight: 600;
  line-height: 1;
}

.session-pill i {
  font-size: 0.92rem;
  line-height: 1;
  flex-shrink: 0;
  display: block;
}

.session-pill__label {
  display: none;
}

.session-pill--live {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.session-pill--off,
.session-pill--scheduled {
  background: rgba(30, 64, 175, 0.1);
  color: #1e40af;
}

.session-pill--pending {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.session-pill--soon {
  background: rgba(234, 88, 12, 0.12);
  color: #c2410c;
}

.session-pill--ready {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
}

.session-pill--completed {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.session-pill--cancelled {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.session-pill--online {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.session-pill--face-to-face {
  background: rgba(146, 64, 14, 0.12);
  color: #92400e;
}

.session-pill--compact {
  font-size: 0.68rem;
  padding: 0.14rem 0.28rem;
}

.session-pill--compact i {
  font-size: 0.78rem;
}

.session-pill--icon-only {
  padding: 0.28rem 0.38rem;
}

.session-pill--icon-only .session-pill__label {
  display: none;
}

/* White stroke on coloured surfaces (calendar events, itinerary rows, etc.) */
.mtr-cal__event .session-pill,
.mtr-cal__itinerary-item .session-pill,
.session-pill--on-dark {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 1.5px #fff;
}

.mtr-cal__event .session-pill i,
.mtr-cal__itinerary-item .session-pill i,
.session-pill--on-dark i {
  -webkit-text-stroke: 1px #fff;
  paint-order: stroke fill;
  filter:
    drop-shadow(1px 0 0 #fff)
    drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 -1px 0 #fff);
}

.session-pill-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.session-meta--badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.session-meta__note {
  color: var(--ink-muted, #64748b);
  font-size: 0.92rem;
}

.session-attendees {
  margin-bottom: 1rem;
}

.session-attendees.session-hidden {
  display: none;
}

.session-attendees__title {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.session-attendees__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.session-attendees__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.5rem;
  background: var(--paper-2, #f4f6f8);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.session-attendees__item--connected {
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(22, 163, 74, 0.06);
}

.session-attendees__item--waiting {
  opacity: 0.88;
}

.session-attendees__avatar {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(26, 35, 50, 0.1);
  color: var(--ink, #1a2332);
}

.session-attendees__item--connected .session-attendees__avatar {
  background: rgba(22, 163, 74, 0.18);
  color: #15803d;
}

.session-attendees__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.session-attendees__name {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
}

.session-attendees__role {
  font-size: 0.75rem;
  color: var(--muted);
}

.session-attendees__status {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.session-attendees__item--connected .session-attendees__status {
  color: #15803d;
}

.session-field {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.session-field label {
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--ink);
}

.session-field input,
.session-field select,
.session-field textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface);
}

.session-field textarea {
  min-height: 5rem;
  resize: vertical;
}

.session-field--checkbox {
  margin-top: 0.25rem;
}

.session-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

.session-checkbox input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--session-accent, #e8a838);
}

.session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.session-btn {
  appearance: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
}

.session-btn:hover {
  background: var(--accent-hover);
}

.session-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.session-btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.session-problem {
  font-size: var(--step-2);
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.session-problem .algebraic-frac {
  vertical-align: middle;
}

.session-problem sup,
.session-problem sub {
  font-size: 0.75em;
}

.session-problem-diagram {
  margin: 0 0 1rem;
  text-align: center;
}

.session-problem-diagram img {
  display: block;
  max-width: min(100%, 420px);
  max-height: 220px;
  margin: 0 auto;
  object-fit: contain;
}

.vault-walkthrough-card {
  margin-top: 0;
}

.vault-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.vault-section + .vault-section {
  margin-top: 0.5rem;
}

.vault-section__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.vault-section__summary::-webkit-details-marker {
  display: none;
}

.vault-section__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
  margin-top: -0.15rem;
}

.vault-section[open] > .vault-section__summary::after {
  transform: rotate(45deg);
  margin-top: 0.1rem;
}

.vault-section__title {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
}

.vault-section__hint {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: right;
}

.vault-section__body {
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid var(--line);
}

.vault-section__body > :first-child {
  margin-top: 0.75rem;
}

.vault-walkthrough__title {
  margin: 0 0 0.35rem;
  font-size: var(--step-1);
}

.vault-walkthrough-topics {
  max-height: 220px;
  overflow: auto;
  margin-bottom: 0.75rem;
}

.vault-walkthrough-topics__list {
  border: 0;
  margin: 0;
  padding: 0;
}

.vault-walkthrough-topics__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.5rem;
  align-items: start;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.vault-walkthrough-topics__item:last-child {
  border-bottom: 0;
}

.vault-walkthrough-topics__label {
  font-weight: 600;
}

.vault-walkthrough-topics__meta {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.82rem;
}

.vault-walkthrough-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.session-feedback {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  margin-top: 0.75rem;
}

.session-feedback--ok {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
}

.session-feedback--bad {
  background: var(--accent-faint);
  color: var(--accent-hover);
}

.session-code {
  font-family: ui-monospace, monospace;
  font-size: var(--step-2);
  letter-spacing: 0.08em;
  color: var(--ink);
}

.session-meta {
  font-size: var(--step-0);
  color: var(--muted);
  margin-top: 0.5rem;
}

.session-error {
  color: var(--accent);
  font-size: var(--step-0);
  margin-top: 0.5rem;
}

.session-hidden {
  display: none !important;
}

/* —— Setup / join (centred card) —— */
.session-setup {
  max-width: 36rem;
  margin: 0 auto;
}

.session-header__tag {
  font-size: var(--step-0);
  color: var(--muted);
}

.session-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.session-voice {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.session-voice-btn {
  padding: 0.4rem 0.65rem;
  font-size: var(--step-0);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--text, #111827);
  cursor: pointer;
}

.session-voice-btn:hover {
  background: #f3f4f6;
}

.session-voice-btn.is-live {
  border-color: #059669;
  color: #047857;
}

.session-voice-btn.is-muted {
  border-color: #d97706;
  color: #b45309;
}

.session-voice-status {
  font-size: 0.75rem;
  color: #047857;
  white-space: nowrap;
}

.session-voice-status.is-connecting {
  color: #b45309;
}

.session-voice-remote,
#voice-remote {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.session-voice-meters {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 6.5rem;
}

.session-voice-meter {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.session-voice-meter__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  min-width: 3.1rem;
}

.session-voice-meter__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 1;
  height: 1.1rem;
}

.session-voice-meter__bars span {
  display: block;
  width: 4px;
  height: 12%;
  border-radius: 1px;
  background: #e5e7eb;
  transition: height 0.05s ease, background-color 0.05s ease;
}

.session-voice-meter--tutor .session-voice-meter__bars span.is-active {
  background: #ef4444;
}

.session-voice-meter--tutor.is-speaking .session-voice-meter__label {
  color: #dc2626;
}

.session-voice-meter--student .session-voice-meter__bars span.is-active {
  background: #3b82f6;
}

.session-voice-meter--student.is-speaking .session-voice-meter__label {
  color: #2563eb;
}

.session-voice-meter.is-muted .session-voice-meter__bars span {
  background: #e5e7eb;
}

.session-voice-meter.is-muted .session-voice-meter__bars span.is-active {
  background: #d1d5db;
}

.session-btn--danger {
  background: #b91c1c;
}

.session-btn--danger:hover {
  background: #991b1b;
}

.session-btn--compact {
  padding: 0.45rem 0.75rem;
  font-size: var(--step-0);
}

/* —— Live room: full-viewport whiteboard —— */
.session-page--live {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  --session-chrome-top: 3.35rem;
  --session-drawer-span: calc(100dvh - var(--session-chrome-top));
}

.session-page--live .session-header {
  flex-shrink: 0;
  padding: 0.45rem 1rem;
  position: relative;
  z-index: 600;
}

.session-page--live #session-countdown {
  display: none !important;
  pointer-events: none !important;
}

.session-page--live .session-header__inner {
  max-width: none;
}

.session-page--live .session-main {
  flex: 1;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.session-room {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.session-waiting-banner {
  margin: 0;
  padding: 0.75rem 1rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.session-waiting-banner.session-hidden {
  display: none;
}

.session-connection-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0.65rem 1rem;
  text-align: center;
  font-size: 0.92rem;
  background: rgba(251, 191, 36, 0.16);
  border-bottom: 1px solid rgba(251, 191, 36, 0.35);
  color: #fde68a;
}

.session-connection-banner.session-hidden {
  display: none;
}

.session-connection-banner--reconnecting {
  background: rgba(251, 191, 36, 0.16);
  border-bottom-color: rgba(251, 191, 36, 0.35);
  color: #fde68a;
}

.session-connection-banner--offline {
  background: rgba(248, 113, 113, 0.16);
  border-bottom-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}

.session-share-mobile-note {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.78);
}

.session-field--screenshot {
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.session-room--waiting .session-drawer,
.session-room--waiting .session-drawer--chat,
.session-room--waiting #answer-dock,
.session-room--waiting #progress-dock {
  display: none !important;
}

.session-room--waiting .session-stage {
  position: relative;
  inset: auto;
  right: auto;
  min-height: min(70vh, calc(100dvh - 8rem));
}

.session-page--whiteboard-lobby .session-header {
  flex-shrink: 0;
}

.session-page--whiteboard-lobby .session-header__inner {
  max-width: none;
}

.session-page--whiteboard-lobby .session-main {
  flex: 1;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.session-page--whiteboard-lobby .session-room {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.session-page--whiteboard-lobby .session-room--waiting .session-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.session-page--whiteboard-lobby .session-room--waiting .session-board-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

.session-page--whiteboard-lobby .session-room--waiting .session-board-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 0;
}

.session-page--whiteboard-lobby .session-waiting-banner {
  flex-shrink: 0;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.session-page--live .session-stage {
  position: absolute;
  inset: 0;
  right: 2.75rem;
  bottom: 0;
  min-height: 0;
  z-index: 1;
  transition: bottom 0.2s ease, left 0.28s ease, right 0.28s ease;
}

.session-page--tutor.session-page--live .session-stage {
  left: 2.75rem;
}

.session-page--live.session-drawers-left-open .session-stage {
  left: min(22rem, 92vw);
}

/* Tutor: drawer panels float over the whiteboard; only the tab strip reserves margin */
.session-page--tutor.session-page--live.session-drawers-left-open .session-stage,
.session-page--tutor.session-page--live.session-drawers-open .session-stage {
  left: 2.75rem;
  right: 2.75rem;
}

.session-page--tutor.session-page--live .session-drawer,
.session-page--tutor.session-page--live .session-drawer-tab,
.session-page--tutor.session-page--live .session-drawer-panel,
.session-page--tutor.session-page--live .session-drawer-panel--left {
  z-index: 250;
}

.session-page--live.session-progress-dock-visible .session-stage {
  bottom: 7.5rem;
}

.session-page--live.session-answer-dock-visible .session-stage {
  bottom: 4.75rem;
}

@media (max-width: 640px) {
  .session-page--live.session-answer-dock-visible .session-stage {
    bottom: 6.25rem;
  }

  .session-page--live.session-progress-dock-visible .session-stage {
    bottom: 9rem;
  }
}

/* —— Student answer dock (always visible during a question) —— */
.session-answer-dock {
  position: fixed;
  left: 0;
  right: 2.75rem;
  bottom: 0;
  z-index: 180;
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem 0.85rem 0.75rem;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}

.session-answer-dock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.session-answer-dock__nav {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
}

.session-answer-dock__progress {
  margin: 0;
  font-size: var(--step-0);
  color: var(--muted);
}

.session-answer-dock__row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.session-answer-dock__input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--step-1);
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}

.session-answer-dock__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.session-answer-dock__btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.session-answer-dock__feedback {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 600;
}

.session-answer-dock__feedback.session-feedback--ok {
  color: #166534;
}

.session-answer-dock__feedback.session-feedback--bad {
  color: #b91c1c;
}

.session-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.session-page--live.session-drawers-open .session-answer-dock {
  right: min(22rem, 92vw);
}

.session-progress-dock {
  position: fixed;
  left: 2.75rem;
  right: 2.75rem;
  bottom: 0;
  z-index: 180;
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem 0.85rem 0.75rem;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}

.session-progress-dock__title {
  margin: 0;
  font-weight: 600;
}

.session-progress-dock__grid {
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.session-progress-dock__grid .question-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
}

.session-progress-dock__grid .question-grid__cell {
  flex: 0 0 2.5rem;
  min-width: 2.5rem;
}

.session-progress-dock__feedback {
  margin: 0;
  font-size: var(--step-0);
}

.session-progress-dock__feedback.session-feedback--ok {
  color: var(--ok, #1a7f37);
}

.session-progress-dock__feedback.session-feedback--bad {
  color: var(--bad, #c41e3a);
}

.session-page--live.session-drawers-open .session-progress-dock {
  right: min(22rem, 92vw);
}

.session-page--live.session-drawers-left-open .session-progress-dock {
  left: min(22rem, 92vw);
}

.session-page--tutor.session-page--live.session-drawers-open .session-progress-dock,
.session-page--tutor.session-page--live.session-drawers-left-open .session-progress-dock {
  left: 2.75rem;
  right: 2.75rem;
}

.session-page--live .session-board-wrap,
.session-page--live .session-share-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

.session-page--live .session-board-frame,
.session-page--live .session-share-frame-host,
.session-page--live .session-share-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 0;
}

.session-share-frame-host {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.session-share-frame-host[aria-hidden="true"] {
  display: none;
}

.session-share-frame-host .session-share-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 0;
}

.session-share-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--paper);
}

.session-share-fallback__title {
  margin: 0;
  font-size: var(--step-3);
  color: var(--ink);
}

.session-share-fallback__note {
  margin: 0;
  max-width: 28rem;
  font-size: var(--step-1);
  color: var(--muted);
  line-height: 1.5;
}

.session-share-fallback__url {
  margin: 0;
  max-width: 100%;
  word-break: break-all;
}

.session-share-fallback__url a {
  color: var(--accent);
}

.session-view-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  border: 1px solid var(--line);
}

.session-view-toggle__btn {
  appearance: none;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: var(--step-0);
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
}

.session-view-toggle__btn.is-active {
  background: var(--accent);
  color: #fff;
}

.session-share-presets {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.session-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

.session-present-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #111;
}

.session-present-wrap--live .session-present-wait {
  display: none;
}

.session-present-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #111;
}

.session-present-wait {
  position: absolute;
  inset: auto 1.5rem 2rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: var(--step-1);
  text-align: center;
}

.session-page--live .session-present-wrap {
  z-index: 2;
}

/* Shared screen + whiteboard overlay */
.session-stage--overlay {
  isolation: isolate;
}

.session-stage--overlay .session-present-wrap {
  z-index: 2;
}

.session-stage--overlay .session-share-wrap--underlay {
  z-index: 1;
}

.session-present-wrap--live .session-present-video {
  opacity: 1;
  visibility: visible;
}

.session-stage--overlay .session-board-wrap--overlay {
  z-index: 3;
  background: transparent !important;
  pointer-events: none;
}

.session-stage--overlay .session-board-wrap--overlay.session-board-wrap--overlay-active {
  pointer-events: auto;
}

.session-board-wrap--overlay-active {
  pointer-events: auto;
}

.session-board-wrap--overlay-active .session-board-frame {
  pointer-events: auto;
}

body.session-share-overlay .session-board-wrap--overlay-active .session-board-frame {
  pointer-events: auto !important;
}

.session-board-wrap--overlay-passive {
  pointer-events: none;
}

.session-share-wrap--underlay .session-present-wrap,
.session-share-wrap--underlay .session-share-frame-host {
  position: absolute;
  inset: 0;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.session-share-wrap--underlay .session-share-frame-host[aria-hidden="false"] {
  display: flex;
}

.session-share-wrap--site-active .session-share-frame-host,
.session-share-wrap--site-active .session-share-frame,
.session-share-wrap--site-active .session-present-video {
  pointer-events: auto;
}

.session-share-overlay-toolbar {
  position: absolute;
  top: max(0.65rem, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}

.session-overlay-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.session-overlay-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.session-overlay-btn.is-active {
  background: var(--accent);
  color: #fff;
}

.session-overlay-btn.is-active:hover {
  filter: brightness(0.96);
}

.session-overlay-btn--stop {
  background: rgba(208, 4, 0, 0.12);
  color: var(--accent);
}

.session-overlay-btn--stop:hover {
  background: rgba(208, 4, 0, 0.2);
}

.session-drawer--chat .session-drawer-tab,
.session-drawer--reference .session-drawer-tab,
.session-drawer--sites .session-drawer-tab,
.session-drawer--calculator .session-drawer-tab,
.session-drawer-tab--question {
  top: 50%;
}

.session-drawer--student.session-drawer--calculator .session-drawer-tab {
  top: 4%;
}

.session-drawer--student.session-drawer--reference .session-drawer-tab {
  top: 22%;
}

.session-drawer--student.session-drawer--chat .session-drawer-tab {
  top: 40%;
}

.session-drawer--student.session-drawer--question .session-drawer-tab {
  top: 58%;
}

.session-drawer--student.session-drawer--sites .session-drawer-tab {
  top: 76%;
}

.session-drawer--tutor.session-drawer--vault .session-drawer-tab--left {
  top: 40%;
}

.session-drawer--tutor.session-drawer--questions .session-drawer-tab--left {
  top: 60%;
}

.session-page--live .session-drawer-panel,
.session-page--live .session-drawer-panel--left {
  top: var(--session-chrome-top);
}

.session-page--live .session-drawer--student.session-drawer--calculator .session-drawer-tab {
  top: calc(var(--session-chrome-top) + var(--session-drawer-span) * 0.04);
}

.session-page--live .session-drawer--student.session-drawer--reference .session-drawer-tab {
  top: calc(var(--session-chrome-top) + var(--session-drawer-span) * 0.22);
}

.session-page--live .session-drawer--student.session-drawer--chat .session-drawer-tab {
  top: calc(var(--session-chrome-top) + var(--session-drawer-span) * 0.4);
}

.session-page--live .session-drawer--student.session-drawer--question .session-drawer-tab {
  top: calc(var(--session-chrome-top) + var(--session-drawer-span) * 0.58);
}

.session-page--live .session-drawer--student.session-drawer--sites .session-drawer-tab {
  top: calc(var(--session-chrome-top) + var(--session-drawer-span) * 0.76);
}

.session-page--live .session-drawer--tutor.session-drawer--vault .session-drawer-tab--left {
  top: calc(var(--session-chrome-top) + var(--session-drawer-span) * 0.4);
}

.session-page--live .session-drawer--tutor.session-drawer--questions .session-drawer-tab--left {
  top: calc(var(--session-chrome-top) + var(--session-drawer-span) * 0.6);
}

.reference-sheet-viewer {
  margin-top: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  min-height: min(52vh, 28rem);
}

.reference-sheet-frame {
  display: block;
  width: 100%;
  min-height: min(52vh, 28rem);
  height: min(52vh, 28rem);
  border: 0;
  background: #fff;
}

.reference-presets {
  display: grid;
  gap: 0.55rem;
}

.reference-presets__heading {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.reference-presets__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.reference-presets__btn {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.reference-presets__btn:hover {
  border-color: var(--accent);
  background: rgba(196, 30, 58, 0.04);
}

.reference-presets__btn strong {
  font-size: 0.92rem;
}

.reference-presets__btn span {
  color: var(--muted);
  font-size: 0.78rem;
}

.reference-presets__divider {
  height: 1px;
  margin: 0.85rem 0 0.65rem;
  background: var(--line);
}

.reference-presets__empty {
  margin: 0;
  grid-column: 1 / -1;
}

.session-card--reference .session-actions {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.session-drawer-tab__badge {
  position: absolute;
  top: 0.45rem;
  right: 0.35rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.1rem;
  text-align: center;
  writing-mode: horizontal-tb;
  transform: none;
}

.session-chat {
  display: grid;
  gap: 0.75rem;
}

.session-chat__log {
  display: grid;
  gap: 0.65rem;
  max-height: min(42vh, 22rem);
  overflow-y: auto;
  padding: 0.15rem 0.1rem;
}

.session-chat__empty {
  margin: 0;
}

.session-chat__log:not(:empty) + .session-chat__empty {
  display: none;
}

.session-chat__message {
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
}

.session-chat__message--mine {
  border-color: rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.03);
}

.session-chat__message--theirs {
  border-color: rgba(196, 30, 58, 0.18);
  background: rgba(196, 30, 58, 0.05);
}

.session-chat__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.session-chat__sender {
  font-weight: 700;
  color: var(--ink);
}

.session-chat__text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.92rem;
  line-height: 1.45;
}

.session-chat__form {
  display: grid;
  gap: 0.55rem;
}

.session-chat__form textarea {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  line-height: 1.4;
}

.session-chat__form textarea:focus {
  outline: 2px solid rgba(196, 30, 58, 0.25);
  border-color: var(--accent);
}

/* —— Side drawers (pull tabs on the right) —— */
.session-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.session-drawer-tab {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 201;
  transform: translateY(-50%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  width: 2.75rem;
  padding: 0.65rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transition: right 0.28s ease;
}

.session-drawer-tab:hover {
  background: var(--accent-hover);
}

.session-drawer-tab__label {
  display: inline-block;
  transform: rotate(180deg);
}

.session-drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: min(22rem, 92vw);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  pointer-events: auto;
  overflow-y: auto;
  padding: 0.85rem 0.85rem 1.25rem;
  background: var(--paper);
  border-left: 1px solid var(--line-strong);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.12);
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.session-drawer--open .session-drawer-panel {
  transform: translateX(0);
}

.session-drawer--open .session-drawer-tab {
  right: min(22rem, 92vw);
}

.session-drawer-panel .session-card {
  margin: 0;
}

.session-drawer-panel .session-meta a {
  word-break: break-all;
}

.session-page--live.session-drawers-open .session-board-frame,
.session-page--live.session-drawers-open .session-share-frame {
  pointer-events: none;
}

/* —— Left vault drawer (tutor only) —— */
.session-drawer--left {
  z-index: 199;
}

.session-drawer-tab--left {
  left: 0;
  right: auto;
  border-left: none;
  border-right: 1px solid var(--line-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.session-drawer-panel--left {
  left: 0;
  right: auto;
  transform: translateX(-100%);
  border-left: none;
  border-right: 1px solid var(--line-strong);
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.12);
}

.session-drawer--left.session-drawer--open .session-drawer-panel--left {
  transform: translateX(0);
}

.session-drawer--left.session-drawer--open .session-drawer-tab--left {
  left: min(22rem, 92vw);
}

.vault-type-filters {
  margin: 0.75rem 0 0;
  padding: 0;
  border: 0;
}

.vault-type-filters legend {
  font-size: var(--step-0);
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.vault-type-filters__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  margin: 0.2rem 0;
}

.vault-results-card {
  padding-top: 0;
}

.vault-results-card .vault-section__body {
  padding-top: 0;
}

.vault-result {
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}

.vault-result:first-child {
  border-top: 0;
  padding-top: 0;
}

.vault-result__type {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.vault-result__title {
  margin: 0.2rem 0 0;
  font-size: var(--step-0);
  line-height: 1.35;
}

.vault-result__meta {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-muted, #5a5a5a);
}

.vault-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.55rem;
}

.vault-result__preview {
  font-size: 0.88rem;
}

.vault-keystones-card {
  margin-top: 0.75rem;
}

.vault-keystones__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.vault-keystones-period {
  border: 0;
  margin: 0 0 0.75rem;
  padding: 0;
}

.vault-keystones-period legend {
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.vault-keystones-period__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.45rem;
  align-items: center;
  margin-bottom: 0.35rem;
  cursor: pointer;
}

.vault-keystones-period__help {
  grid-column: 2;
  font-size: 0.82rem;
  color: var(--ink-muted, #5a6472);
}

.question-grid-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.question-grid-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.question-grid-legend__swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.question-grid-legend__swatch--green {
  background: #22c55e;
}

.question-grid-legend__swatch--amber {
  background: #f59e0b;
}

.question-grid-legend__swatch--red {
  background: #ef4444;
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
  gap: 0.4rem;
}

.question-grid__cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper-2, #f8fafc);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.question-grid__cell:hover {
  border-color: var(--line-strong);
}

.question-grid__cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.question-grid__cell--current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.question-grid__cell--pending {
  color: var(--muted);
}

.question-grid__cell--green {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.question-grid__cell--amber {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.question-grid__cell--red {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.question-grid__number {
  line-height: 1;
}

.question-grid__rag {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.85;
}

/* —— Session elapsed timer (header) —— */
.session-elapsed {
  font-variant-numeric: tabular-nums;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  border: 1px solid var(--line);
}

.session-score {
  font-variant-numeric: tabular-nums;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  border: 1px solid var(--line);
  margin-left: auto;
}

.session-page--live .session-score {
  margin-left: 0;
}

.session-page--live .session-header__inner .session-score {
  order: 2;
}

.session-page--live .session-header__inner .session-elapsed {
  order: 3;
}

.session-page--live .session-header__inner .session-header__actions {
  order: 4;
  margin-left: auto;
}

/* —— Timetable / scheduler —— */
.session-setup-wide {
  max-width: 52rem;
}

.session-setup-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 720px) {
  .session-setup-grid {
    grid-template-columns: 1fr 1.2fr;
  }
}

.session-schedule-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.session-schedule-item:last-child {
  border-bottom: none;
}

.session-schedule-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.session-schedule-link a {
  word-break: break-all;
}

.mtr-tutor-upcoming {
  margin-bottom: 1.25rem;
}

.mtr-tutor-student-updates {
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.mtr-tutor-student-updates__presence {
  margin: 0 0 0.55rem;
  font-size: var(--step-1);
  font-weight: 600;
  color: #1f5f3b;
}

.mtr-tutor-student-updates__requests-label {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}

.mtr-tutor-student-updates__requests-body {
  display: grid;
  gap: 0.65rem;
}

.mtr-tutor-lesson-request__label {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.48);
}

.mtr-tutor-lesson-request__text {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink);
}

.mtr-tutor-lesson-request--student .mtr-tutor-lesson-request__text {
  font-weight: 500;
}

.session-countdown__status {
  margin: 0 0 0.35rem;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  max-width: 34rem;
}

.mtr-tutor-next-session {
  margin: 0 0 1.25rem;
}

.mtr-tutor-next-session__text {
  margin: 0 0 0.85rem;
  font-size: var(--step-2);
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
}

.mtr-tutor-countdown {
  margin-top: 0.15rem;
  width: 100%;
  padding: 0.35rem 0 0.55rem;
}

.mtr-tutor-countdown__track {
  position: relative;
  height: 0.85rem;
  border-radius: 999px;
  width: 100%;
  overflow: visible;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.08) 0,
      rgba(0, 0, 0, 0.08) 3px,
      rgba(255, 255, 255, 0.04) 3px,
      rgba(255, 255, 255, 0.04) 6px
    ),
    linear-gradient(180deg, #4a4038 0%, #2f2924 48%, #1f1b18 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.2);
}

.mtr-tutor-countdown__fill {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #2a2118 0%,
      #5c3b1e 18%,
      #9a4e1f 42%,
      #d86a24 68%,
      #ffb347 88%,
      #fff1c1 100%
    );
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  transition: transform 0.9s linear;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 10px rgba(255, 140, 40, 0.35);
}

.mtr-tutor-countdown__spark {
  position: absolute;
  top: 50%;
  right: -0.12rem;
  width: 1.15rem;
  height: 1.15rem;
  transform: translate(50%, -50%);
  pointer-events: none;
}

.mtr-tutor-countdown__spark::before,
.mtr-tutor-countdown__spark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.mtr-tutor-countdown__spark::before {
  background: radial-gradient(circle, #fffef0 0%, #ffd166 28%, #ff8c1a 52%, rgba(255, 120, 20, 0) 72%);
  animation: mtr-fuse-spark-core 0.55s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px #ffb347) drop-shadow(0 0 14px rgba(255, 120, 30, 0.85));
}

.mtr-tutor-countdown__spark::after {
  inset: -0.35rem;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 240, 160, 0.95) 0, rgba(255, 240, 160, 0) 18%),
    radial-gradient(circle at 70% 65%, rgba(255, 180, 60, 0.8) 0, rgba(255, 180, 60, 0) 16%),
    radial-gradient(circle at 45% 80%, rgba(255, 120, 40, 0.7) 0, rgba(255, 120, 40, 0) 14%);
  animation: mtr-fuse-spark-embers 0.75s linear infinite;
  opacity: 0.85;
}

.mtr-tutor-countdown:not(.mtr-tutor-countdown--live):not(.mtr-tutor-countdown--complete)[aria-valuenow="0"]
  .mtr-tutor-countdown__spark {
  opacity: 0;
}

.mtr-tutor-countdown--live .mtr-tutor-countdown__fill {
  background: linear-gradient(90deg, #14532d 0%, #1a8f4a 45%, #2fbf71 78%, #9ef5c4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 12px rgba(47, 191, 113, 0.45);
}

.mtr-tutor-countdown--live .mtr-tutor-countdown__spark::before {
  background: radial-gradient(circle, #f0fff4 0%, #7ddea0 30%, #2fbf71 55%, rgba(47, 191, 113, 0) 72%);
  filter: drop-shadow(0 0 6px #7ddea0) drop-shadow(0 0 14px rgba(47, 191, 113, 0.75));
}

.mtr-tutor-countdown--complete .mtr-tutor-countdown__fill {
  animation: mtr-tutor-countdown-pulse 1.4s ease-in-out infinite;
}

.mtr-tutor-countdown--complete .mtr-tutor-countdown__spark::before {
  animation:
    mtr-fuse-spark-core 0.35s ease-in-out infinite alternate,
    mtr-fuse-spark-burst 1.4s ease-in-out infinite;
}

@keyframes mtr-fuse-spark-core {
  0% {
    transform: scale(0.82);
    opacity: 0.88;
  }
  100% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes mtr-fuse-spark-embers {
  0% {
    transform: rotate(0deg) scale(0.95);
    opacity: 0.55;
  }
  50% {
    transform: rotate(12deg) scale(1.05);
    opacity: 0.95;
  }
  100% {
    transform: rotate(-10deg) scale(0.98);
    opacity: 0.65;
  }
}

@keyframes mtr-fuse-spark-burst {
  0%,
  100% {
    filter: drop-shadow(0 0 6px #ffb347) drop-shadow(0 0 14px rgba(255, 120, 30, 0.85));
  }
  50% {
    filter: drop-shadow(0 0 10px #ffd166) drop-shadow(0 0 22px rgba(255, 160, 40, 1));
  }
}

.mtr-tutor-next-action {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.02);
}

.mtr-tutor-next-action--ready {
  border-color: var(--accent);
  background: var(--accent-faint);
  box-shadow: var(--shadow-sm);
}

.mtr-tutor-next-action__meta {
  margin: 0 0 0.75rem;
  font-size: var(--step-0);
  color: var(--muted);
}

.mtr-tutor-next-action--ready .mtr-tutor-next-action__meta {
  color: var(--ink);
}

.mtr-tutor-next-action__btn {
  width: 100%;
  max-width: 24rem;
}

.mtr-tutor-next-action__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@keyframes mtr-tutor-countdown-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mtr-tutor-countdown__spark::before,
  .mtr-tutor-countdown__spark::after,
  .mtr-tutor-countdown--complete .mtr-tutor-countdown__fill,
  .mtr-tutor-countdown--complete .mtr-tutor-countdown__spark::before {
    animation: none;
  }

  .mtr-tutor-countdown__fill {
    transition: none;
  }
}

.mtr-tutor-calendar {
  margin: 0 0 1.5rem;
  width: 100%;
}

.mtr-tutor-calendar .mtr-cal {
  max-width: none;
  width: 100%;
}

.session-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step-0);
  cursor: pointer;
}

/* —— Full-screen pre-session countdown —— */
.session-countdown {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  color: #fff;
  background: radial-gradient(ellipse at 50% 30%, #1e3a5f 0%, #0b1220 55%, #05080f 100%);
  overflow: hidden;
}

.session-countdown::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 0deg, transparent, rgba(56, 189, 248, 0.08), transparent 35%);
  animation: session-countdown-spin 12s linear infinite;
  pointer-events: none;
}

@keyframes session-countdown-spin {
  to {
    transform: rotate(360deg);
  }
}

.session-countdown__title {
  position: relative;
  margin: 0;
  font-family: var(--font-display, "Bebas Neue", sans-serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  letter-spacing: 0.04em;
}

.session-countdown__label {
  position: relative;
  margin: 0;
  font-size: var(--step-1);
  opacity: 0.85;
}

.session-countdown__digits {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display, "Bebas Neue", sans-serif);
  font-size: clamp(3rem, 14vw, 7rem);
  line-height: 1;
  letter-spacing: 0.06em;
}

.session-countdown__digits.is-ticking .session-countdown__num {
  animation: session-countdown-pulse 0.35s ease;
}

@keyframes session-countdown-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.92;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.session-countdown__sep {
  opacity: 0.55;
  animation: session-countdown-blink 1s step-end infinite;
}

@keyframes session-countdown-blink {
  50% {
    opacity: 0.2;
  }
}

.session-countdown--go {
  animation: session-countdown-flash 0.6s ease;
}

@keyframes session-countdown-flash {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.35);
  }
  100% {
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-countdown::before {
    animation: none;
  }
  .session-countdown__digits.is-ticking .session-countdown__num {
    animation: none;
  }
  .session-countdown__sep {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-drawer-panel,
  .session-drawer-tab {
    transition: none;
  }
}

.session-audio-prompt {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.session-audio-prompt.session-hidden {
  display: none;
}

.session-audio-prompt__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 20, 0.72);
  backdrop-filter: blur(6px);
}

.session-audio-prompt__card {
  position: relative;
  width: min(100%, 26rem);
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(165deg, rgba(24, 32, 48, 0.98), rgba(14, 18, 28, 0.98));
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(56, 189, 248, 0.08);
  text-align: center;
}

.session-audio-prompt--incoming .session-audio-prompt__card {
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(56, 189, 248, 0.2),
    0 0 48px rgba(56, 189, 248, 0.12);
}

.session-audio-prompt__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}

.session-audio-prompt--incoming .session-audio-prompt__icon {
  animation: session-audio-prompt-pulse 1.6s ease-in-out infinite;
}

@keyframes session-audio-prompt-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.35);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 12px rgba(56, 189, 248, 0);
  }
}

.session-audio-prompt__title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display, "Bebas Neue", sans-serif);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.session-audio-prompt__text {
  margin: 0 0 1.25rem;
  font-size: var(--step-0);
  line-height: 1.5;
  opacity: 0.88;
}

.session-audio-prompt__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.session-audio-prompt__join {
  width: 100%;
  font-size: var(--step-1);
  padding: 0.85rem 1.25rem;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  border-color: rgba(56, 189, 248, 0.45);
}

.session-audio-prompt__join:hover,
.session-audio-prompt__join:focus-visible {
  filter: brightness(1.08);
}

body.session-audio-prompt-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .session-audio-prompt--incoming .session-audio-prompt__icon {
    animation: none;
  }
}

.session-goals-prompt {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.session-goals-prompt.session-hidden {
  display: none;
}

.session-goals-prompt__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 28, 0.55);
}

.session-goals-prompt__card {
  position: relative;
  width: min(100%, 28rem);
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--session-surface, #fff);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.session-goals-prompt__title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  line-height: 1.2;
}

.session-goals-prompt__text {
  margin: 0 0 1rem;
  color: var(--session-muted, #5a6472);
}

.session-goals-prompt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.session-goals-prompt__submit {
  flex: 1 1 auto;
}

body.session-goals-prompt-open {
  overflow: hidden;
}

.followup-approval {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 1rem;
}

.followup-approval.session-hidden {
  display: none;
}

.followup-approval__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 28, 0.72);
}

.followup-approval__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 56rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  margin: auto;
  padding: 1.25rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: var(--session-surface, #fff);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.22);
}

.followup-approval__header {
  margin-bottom: 1rem;
}

.followup-approval__title {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
}

.followup-approval__emails {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .followup-approval__emails {
    grid-template-columns: 1fr 1fr;
  }
}

.followup-approval__email h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.followup-approval__meta {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--session-muted, #5a6472);
}

.followup-approval__body {
  margin: 0 0 0.75rem;
  padding: 0.75rem;
  max-height: 16rem;
  overflow: auto;
  border-radius: 0.5rem;
  background: #f4f6f8;
  border: 1px solid rgba(0, 0, 0, 0.08);
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
}

.followup-approval__confirm {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.35;
}

.followup-approval__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

body.followup-approval-open {
  overflow: hidden;
}

#btn-ended-continue:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.vault-student-goals__quote {
  margin: 0 0 0.75rem;
  line-height: 1.45;
}

.vault-student-goals__quote q {
  font-style: italic;
}

.vault-student-goals__suggestions {
  display: grid;
  gap: 0.65rem;
}

.vault-result--compact .vault-result__title {
  font-size: 0.95rem;
}

.session-admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.session-admin-tabs {
  display: flex;
  gap: 0.5rem;
}

.session-admin-tabs__btn {
  font: inherit;
  font-size: var(--step-0);
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.session-admin-tabs__btn.is-active {
  background: var(--accent, #c45c26);
  border-color: transparent;
  color: #fff;
}

.session-field textarea {
  width: 100%;
  min-height: 4rem;
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  resize: vertical;
}

.session-lobby {
  max-width: 32rem;
  margin: 0 auto;
}

.session-page--tutor-lobby .session-main {
  max-width: none;
  width: 100%;
}

.session-lobby.session-lobby--wide {
  max-width: none;
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
}

.session-page--tutor-lobby .mtr-tutor-calendar,
.session-page--tutor-lobby .mtr-tutor-calendar .mtr-cal {
  width: 100%;
  max-width: none;
}

.session-page--tutor-lobby .mtr-cal {
  --admin-surface: var(--surface);
  --admin-line: var(--line);
  --admin-accent: var(--accent);
  background: var(--surface);
  border-color: var(--line);
}

.session-page--tutor-lobby .mtr-cal__dow,
.session-page--tutor-lobby .mtr-cal__day-num,
.session-page--tutor-lobby .mtr-cal__hour-label,
.session-page--tutor-lobby .mtr-cal__empty,
.session-page--tutor-lobby .mtr-cal__more,
.session-page--tutor-lobby .mtr-cal__itinerary-meta,
.session-page--tutor-lobby .mtr-cal__itinerary-status {
  color: var(--muted);
}

.session-page--tutor-lobby .mtr-cal__cell {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--line);
}

.session-page--tutor-lobby .mtr-cal__cell:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.18);
}

.session-page--tutor-lobby .mtr-cal__cell--today {
  border-color: var(--accent);
}

.session-page--tutor-lobby .mtr-cal__views {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--line);
}

.session-page--tutor-lobby .mtr-cal__view-btn {
  color: var(--muted);
}

.session-page--tutor-lobby .mtr-cal__view-btn.is-active {
  background: var(--accent);
  color: #fff;
}

.session-page--tutor-lobby .mtr-cal__default {
  color: var(--muted);
}

.session-page--tutor-lobby .mtr-cal__default-select {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--line);
  color: var(--ink);
}

.session-page--tutor-lobby .mtr-cal__itinerary-day {
  color: var(--ink);
}

.session-page--tutor-lobby .mtr-cal__itinerary-item {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--line);
  color: var(--ink);
}

.session-page--tutor-lobby .mtr-cal__day-timeline {
  background: rgba(0, 0, 0, 0.02);
  border-color: var(--line);
}

.session-page--tutor-lobby .mtr-cal__hour-row {
  border-top-color: var(--line);
}

.session-page--tutor-lobby .mtr-cal__hour-label {
  border-right-color: var(--line);
}

.session-recommendations {
  margin: 1.25rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.02);
}

.session-recommendations__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.session-recommendations__summary {
  margin: 0 0 0.75rem;
}

.session-recommendations__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.session-recommendation {
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  border-left: 3px solid var(--line);
  background: #fff;
}

.session-recommendation--needs_work {
  border-left-color: #c0392b;
}

.session-recommendation--consolidate {
  border-left-color: #d68910;
}

.session-recommendation--strong,
.session-recommendation--extension {
  border-left-color: #1e8449;
}

.session-recommendation--note {
  border-left-color: #5d6d7e;
}

.session-recommendations__source {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

.mtr-recommendations {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.02);
}

.mtr-recommendations__list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.mtr-recommendations__list li {
  margin: 0.35rem 0;
}

.session-drawer--student.session-drawer--practice .session-drawer-tab {
  top: 94%;
}

.session-drawer-tab--practice {
  background: var(--accent);
  color: #fff;
}

.mtr-stb-practice-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.35rem;
}

.mtr-stb-practice-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.05rem;
  background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mtr-stb-practice-card:hover {
  border-color: rgba(208, 4, 0, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.mtr-stb-practice-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.45rem;
}

.mtr-stb-practice-card strong {
  display: block;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.35;
}

.mtr-stb-practice-card__topic {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-faint);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.mtr-stb-practice-card__assigned {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.1);
  color: #1e40af;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.mtr-stb-practice-card__description {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.mtr-stb-practice-card__reason {
  margin: 0.65rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.85);
  border-left: 3px solid var(--accent);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.mtr-stb-practice-card__reason span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.mtr-stb-practice-card__progress {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.mtr-stb-practice-card__progress-bar {
  flex: 1;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--paper-2);
  overflow: hidden;
}

.mtr-stb-practice-card__progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, #ff4d4d 100%);
  transition: width 0.25s ease;
}

.mtr-stb-practice-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.mtr-stb-practice-empty {
  padding: 1.25rem 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
}

.mtr-stb-practice-empty strong {
  display: block;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.mtr-stb-practice-empty p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}

.mtr-stb-practice-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.mtr-stb-practice-loading__spinner {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mtr-stb-spin 0.75s linear infinite;
}

@keyframes mtr-stb-spin {
  to {
    transform: rotate(360deg);
  }
}

.mtr-stb-practice-skeleton {
  display: grid;
  gap: 0.55rem;
  padding: 0.5rem 0;
}

.mtr-stb-practice-skeleton__line {
  height: 0.85rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--paper-2) 0%, #ececec 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: mtr-stb-shimmer 1.2s ease-in-out infinite;
}

.mtr-stb-practice-skeleton__line--short {
  width: 62%;
}

@keyframes mtr-stb-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.mtr-stb-workspace {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.35rem;
}

.mtr-stb-workspace__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1rem;
}

.mtr-stb-workspace__back {
  flex-shrink: 0;
}

.mtr-stb-workspace__meta {
  flex: 1;
  min-width: 0;
}

.mtr-stb-workspace__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  letter-spacing: 0.03em;
  color: var(--ink);
  line-height: 1.15;
}

.mtr-stb-workspace__progress-text {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.mtr-stb-workspace__progress {
  height: 0.4rem;
  border-radius: 999px;
  background: var(--paper-2);
  overflow: hidden;
}

.mtr-stb-workspace__progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, #ff4d4d 100%);
  transition: width 0.28s ease;
}

.mtr-stb-workspace__card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.25rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.mtr-stb-workspace__question-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.85rem;
}

.mtr-stb-workspace__qnum {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mtr-stb-workspace__marks {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.mtr-stb-workspace__problem {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  margin: 0 0 1.15rem;
  color: var(--ink);
}

.mtr-stb-workspace__problem .session-problem-diagram img {
  max-width: min(100%, 520px);
  max-height: 280px;
}

.mtr-stb-workspace__answer-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.mtr-stb-workspace__answer-row {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
}

.mtr-stb-workspace__input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mtr-stb-workspace__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(208, 4, 0, 0.12);
}

.mtr-stb-workspace__submit {
  flex-shrink: 0;
  white-space: nowrap;
}

.mtr-stb-workspace__feedback {
  margin-top: 0.75rem;
  animation: mtr-stb-feedback-in 0.22s ease;
}

.mtr-stb-workspace__feedback.session-feedback--ok {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
}

.mtr-stb-workspace__feedback.session-feedback--bad {
  background: var(--accent-faint);
  color: var(--accent-hover);
}

@keyframes mtr-stb-feedback-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mtr-stb-workspace__nav {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
}

body.session-stb-practice-active .mtr-stb-practice-intro {
  display: none;
}

body.session-stb-practice-active .mtr-student-dashboard__grid {
  grid-template-columns: 1fr;
}

body.session-stb-practice-active .mtr-student-dashboard__card--sessions {
  display: none;
}

body.session-stb-practice-active .mtr-student-dashboard__card--practice {
  grid-column: 1 / -1;
}

body.session-stb-practice-active .session-drawer--practice .session-drawer-tab {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.mtr-student-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#join.session-setup:has(#student-dashboard:not(.session-hidden)) {
  width: 75vw;
  max-width: 75vw;
}

.mtr-student-dashboard__hero h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  letter-spacing: 0.03em;
  margin: 0 0 0.35rem;
}

.mtr-student-dashboard__hero .session-meta {
  margin: 0;
  max-width: 36rem;
}

.mtr-student-dashboard__countdown {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--accent);
  background: var(--accent-faint);
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.mtr-student-dashboard__grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 760px) {
  .mtr-student-dashboard__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.mtr-student-dashboard__card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  margin: 0 0 0.65rem;
}

.mtr-student-dashboard__actions {
  margin-top: 0.25rem;
}

.mtr-student-dashboard__session-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.mtr-student-dashboard__session {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.mtr-student-dashboard__session strong {
  display: block;
  color: var(--ink);
}

.session-room__dashboard-back {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 12;
}

body.session-page--student:not(.session-page--live) .session-room.session-room--waiting .session-room__dashboard-back {
  display: flex;
}

body.session-page--whiteboard-lobby .session-room__dashboard-back {
  position: fixed;
  top: calc(3.25rem + 0.75rem);
  left: 0.75rem;
  z-index: 200;
}

body.session-countdown-whiteboard .session-room__dashboard-back {
  display: none !important;
}

@media (max-width: 640px) {
  .mtr-stb-workspace__answer-row {
    flex-direction: column;
  }

  .mtr-stb-workspace__submit {
    width: 100%;
  }

  .mtr-stb-workspace__nav {
    flex-direction: column;
  }

  .mtr-stb-workspace__nav .session-btn {
    width: 100%;
  }
}