/*
  Medic Raptor Classroom — Fase 3 (UI)
  Dashboard, gestão de sala, join/lobby e sala ao vivo. Reusa botões,
  badges, chips e o sistema .chat-console/.chat-shell/.chat-rail de
  components.css sempre que possível — só o que não tem análogo existente
  vive aqui.

  ---------------------------------------------------------------------
  Raptor Technical Glass (Visual Foundation, 2026-09-08)
  Ver docs/canon/classroom-live-visual.md (intenção/critério) e
  docs/canon/depth-and-glass.md (hierarquia sitewide de materialidade).
  Nenhum token de cor novo — reaproveita --raptor-black/graphite/
  graphite-deep/olive/steel já existentes em tokens.css.

  Escada de profundidade usada abaixo:
    Nível 0 Solid             → vídeo, apresentação, chat log, formulário.
                                 Sempre opaco. Nunca leva blur/transparência.
    Nível 1 Technical Surface → --surface-raised/--surface-overlay, opaca,
                                 moldura estrutural (clip-path, hairline,
                                 rebite/retícula em ::before). A maior
                                 parte da UI do Classroom vive aqui.
    Nível 2 Subtle Glass      → não usado nesta fase (reservado para um
                                 rail/toolbar futuro que precise indicar
                                 sobreposição real a conteúdo).
    Nível 3 Elevated Glass    → só em overlay/tag transitória sobre o
                                 vídeo (.media-stage__label) e no backdrop
                                 (nunca no painel) de .invite-modal/
                                 .private-view — blur pequeno (4-6px),
                                 nunca sobre texto de leitura.

  Regra de cardificação: só .classroom-card (dashboard) e .classroom-
  session-row/.classroom-roster-row (linha de lista) são cards de
  verdade — cada um representa UMA entidade (turma/sessão/pessoa). A
  sala ao vivo (.media-stage, .presentation-stage, .classroom-live__rail)
  é moldura/console/rail, nunca card — corte assimétrico (clip-path em
  1-2 cantos, não os 4) em vez de --radius-lg genérico, para não ler
  como "retângulo arredondado repetido".
  ---------------------------------------------------------------------
*/

/* ---------- Vitrine pública (visitante não autenticado, /classroom.php) ---------- */
/* Descobrir o Classroom é público — home.css não é carregado aqui, então
   .hero só traz a base estrutural de layout.css (sem o vídeo/grid do
   hero da home); estilo próprio abaixo para não depender de classes
   definidas só em home.css (.hero__subtext etc). */

.classroom-showcase-hero {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}

.classroom-showcase-hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.classroom-showcase-hero__portrait {
  width: 160px;
  flex-shrink: 0;
}

.classroom-showcase-hero__portrait img {
  width: 100%;
  height: auto;
  display: block;
}

.classroom-showcase-hero__copy {
  min-width: 0;
}

.classroom-showcase-hero .hero__eyebrow,
.classroom-showcase-hero .hero__actions {
  justify-content: center;
}

@media (min-width: 768px) {
  .classroom-showcase-hero__grid {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .classroom-showcase-hero__copy {
    flex: 1;
  }

  .classroom-showcase-hero__portrait {
    width: 220px;
  }

  .classroom-showcase-hero .hero__eyebrow,
  .classroom-showcase-hero .hero__actions {
    justify-content: flex-start;
  }

  .classroom-showcase-hero__lead {
    margin-inline: 0;
  }
}

.classroom-showcase-hero__title {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-800);
  letter-spacing: var(--ls-tight);
}

@media (min-width: 1024px) {
  .classroom-showcase-hero__title {
    font-size: var(--fs-900);
  }
}

.classroom-showcase-hero__lead {
  max-width: 60ch;
  margin: var(--space-4) auto var(--space-6);
  color: var(--text-secondary);
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
}

.classroom-upsell {
  margin-bottom: var(--space-6);
}

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

.classroom-dashboard__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.classroom-dashboard__header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.classroom-create-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

.classroom-create-form[hidden] {
  display: none;
}

.classroom-create-form input[type='text'] {
  flex: 1 1 260px;
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.classroom-create-form input[type='text']:focus-visible {
  border-color: var(--accent-primary);
}

.classroom-create-form__feedback {
  flex-basis: 100%;
  font-size: var(--fs-200);
  color: var(--text-secondary);
}

.classroom-create-form__feedback[data-state='error'] {
  color: var(--text-danger);
}

.classroom-card-grid {
  margin-top: var(--space-2);
}

.classroom-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  /* Card de verdade (representa UMA turma) — mantém o corte angular do
     resto do site em vez do --radius-lg genérico anterior, para não ler
     como card WordPress arredondado (docs/canon/components.md). */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.classroom-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.classroom-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-500);
}

/* ---------- Gestão da sala ---------- */

.classroom-room__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.classroom-room__title-row h1 {
  font-family: var(--font-display);
  font-size: var(--fs-700);
}

.classroom-room__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.classroom-room__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-7);
}

@media (min-width: 768px) {
  .classroom-room__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.classroom-room__panel {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.classroom-room__panel h2 {
  font-size: var(--fs-400);
  margin-bottom: var(--space-4);
}

.classroom-room__panel[hidden] {
  display: none;
}

.classroom-session-list,
.classroom-roster-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.classroom-session-row,
.classroom-roster-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  background: var(--surface-base);
  border: 1px solid var(--border-strong);
  padding: var(--space-3);
  font-size: var(--fs-200);
}

.classroom-session-row {
  justify-content: space-between;
}

/* ---------- Lista de presença — avatar + status (Fase 4/6) ---------- */

.classroom-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  cursor: default;
  padding: 0;
}

button.classroom-avatar {
  cursor: pointer;
  color: var(--text-accent);
  border-color: var(--border-accent);
}

button.classroom-avatar:hover,
button.classroom-avatar:focus-visible {
  background: var(--surface-raised);
  border-color: var(--raptor-olive);
}

.classroom-roster-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 140px;
}

.classroom-roster-row__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classroom-roster-row__role {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-accent);
}

.classroom-roster-row__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-100);
}

.classroom-roster-row__dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--raptor-olive);
}

.classroom-roster-row__dot--muted {
  background: var(--text-secondary);
  opacity: 0.5;
}

.classroom-floor-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.classroom-floor-section:empty {
  display: none;
}

.classroom-floor-badge {
  font-size: var(--fs-100);
  font-weight: 600;
  white-space: nowrap;
}

.classroom-floor-badge--queue {
  color: var(--text-secondary);
}

/* ---------- "Próximo da fila" — presença/estado, nunca vídeo (Fase 4/6) ---------- */

.classroom-next-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--surface-base);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
}

.classroom-next-card__eyebrow {
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-accent);
}

.classroom-next-card__name {
  font-weight: 600;
}

.classroom-queue-rest {
  font-size: var(--fs-100);
}

.classroom-invite-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.classroom-invite-form select,
.classroom-invite-form input {
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.classroom-invite-form__feedback {
  font-size: var(--fs-200);
  color: var(--text-secondary);
}

.classroom-invite-form__feedback[data-state='error'] {
  color: var(--text-danger);
}

/* ---------- Modal de convite (mesmo mecanismo de .specialist-gate) ---------- */

.invite-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.invite-modal[data-open='true'] {
  display: flex;
}

/* Elevated Glass (Nível 3) — único elemento borrado é o que fica ATRÁS
   do modal (a página), nunca o painel/texto do modal em si. Ver
   docs/canon/depth-and-glass.md, "blur de fundo != blur de conteúdo". */
.invite-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.invite-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.invite-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.invite-modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  padding-right: var(--space-6);
}

.invite-modal__code-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.invite-modal__code {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  word-break: break-all;
}

.invite-modal__note {
  margin-top: var(--space-3);
  font-size: var(--fs-100);
  color: var(--text-secondary);
}

/* ---------- Join ---------- */

.classroom-join__container {
  max-width: 480px;
}

.classroom-join-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.classroom-join-form input {
  flex: 1 1 240px;
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.classroom-join-form__feedback {
  margin-top: var(--space-4);
  font-size: var(--fs-200);
  color: var(--text-secondary);
}

.classroom-join-form__feedback[data-state='error'] {
  color: var(--text-danger);
}

/* ---------- Sala ao vivo ---------- */

.classroom-live {
  padding-block: var(--space-5) var(--space-8);
}

.classroom-live__topbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-5);
}

/* Segmento de identidade — bloco de cor sólido (nunca wash), não um
   gradiente diluído: primeiros ~15% da faixa em oliva cheio, resto no
   tom neutro já usado na borda. Presença de marca na periferia, sem
   pintar a barra inteira de verde. */
.classroom-live__topbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--raptor-olive) 0 15%, var(--border-default) 15% 100%);
}

.classroom-live__topbar-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.classroom-live__topbar-info strong {
  font-family: var(--font-display);
  font-size: var(--fs-500);
}

.classroom-live__connection {
  padding-inline: 0;
}

.classroom-live__topbar-actions {
  display: flex;
  gap: var(--space-3);
}

.classroom-live__banner {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border-left: 3px solid var(--raptor-olive);
  color: var(--text-secondary);
  font-size: var(--fs-200);
}

.classroom-live__banner[hidden] {
  display: none;
}

.classroom-live__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .classroom-live__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  }
}

.classroom-live__main {
  min-width: 0;
}

/* ---------- Media Layer ao vivo (Fase 3/6) — Technical Display Frame ---------- */
/* .media-stage é o console/bezel (Nível 1, opaco); .media-stage__remote é
   o viewport de vídeo (Nível 0, sempre nítido); .media-stage__self é o
   módulo de controles (Nível 1). Ver comentário no topo do arquivo e
   docs/canon/classroom-live-visual.md. */

.media-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--raptor-graphite-deep);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
}

/* Cantos de retícula (oliva), só top-left + bottom-right — assimetria
   deliberada (engenharia, não decoração simétrica repetida). Mesma
   técnica de .chat-console::before (components.css), escala menor e
   só 2 cantos para não duplicar a leitura do console de chat. */
.media-stage::before {
  content: '';
  position: absolute;
  inset: var(--space-2);
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--raptor-olive), var(--raptor-olive)),
    linear-gradient(var(--raptor-olive), var(--raptor-olive)),
    linear-gradient(var(--raptor-olive), var(--raptor-olive)),
    linear-gradient(var(--raptor-olive), var(--raptor-olive));
  background-size: 28px 3px, 3px 28px, 28px 3px, 3px 28px;
  background-position: top left, top left, bottom right, bottom right;
}

.media-stage__remote {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  max-height: min(60vh, 560px);
  background: var(--raptor-black);
  border: 1px solid var(--border-strong);
  overflow: hidden;
}

/* Ticks estruturais internos do viewport, diagonal oposta à do bezel
   externo (contra-ritmo) + hairline de moldura interna. Nível 0/1: sem
   blur, sem transparência diluída — só linha/cor sólida. */
.media-stage__remote::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--raptor-olive), var(--raptor-olive)),
    linear-gradient(var(--raptor-olive), var(--raptor-olive)),
    linear-gradient(var(--raptor-olive), var(--raptor-olive)),
    linear-gradient(var(--raptor-olive), var(--raptor-olive));
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position: top right, top right, bottom left, bottom left;
  opacity: 0.85;
}

.media-stage__remote::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(230, 230, 230, 0.08);
}

.media-stage__video {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.media-stage__video[hidden] {
  display: none;
}

.media-stage__empty {
  position: relative;
  z-index: 0;
  margin: 0;
  padding-inline: var(--space-5);
  text-align: center;
}

/* Tag de estado sobre o vídeo — único uso de Elevated Glass (Nível 3)
   desta fase: área pequena, sobre uma pequena faixa do vídeo (nunca sobre
   o vídeo inteiro), blur discreto só na camada posterior da própria tag.
   Conteúdo real (docs/architecture/RAPTOR-CLASSROOM-CANON.md, seção 7):
   quem está com a palavra / anfitrião / tela compartilhada — nunca dado
   fabricado. */
.media-stage__label {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: rgba(13, 17, 23, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--raptor-olive);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  color: var(--text-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.media-stage__label[hidden] {
  display: none;
}

/* Módulo de controles — mesma linguagem de "hardware module" de
   .chat-shell__header (corte angular + trim sólido), escala menor. */
.media-stage__self {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.media-stage__self:empty {
  display: none;
}

.media-stage__self::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--raptor-olive);
}

.media-stage__self-video {
  width: 128px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #000;
  border: 1px solid var(--raptor-olive);
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}

.media-stage__mic-note {
  margin: 0;
  font-size: var(--fs-200);
  color: var(--text-secondary);
}

.media-stage__speaking-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-base);
  border: 1px solid var(--border-accent);
  color: var(--text-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.media-stage__on-demand-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-200);
  color: var(--text-secondary);
  cursor: pointer;
}

.media-stage__status {
  position: relative;
  z-index: 0;
  margin: 0;
  padding-inline: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.media-stage__status--error {
  color: var(--text-danger);
}

/* ---------- Visualização privada sob demanda (Fase 4/6) ---------- */
/* Mesmo mecanismo visual de .invite-modal (overlay + painel + backdrop),
   mas efêmero e sem dataset.open — é criado/destruído no DOM pelo próprio
   classroom-media-live.js a cada abertura/fechamento (ver
   docs/architecture/RAPTOR-CLASSROOM-CANON.md, "Visualização privada"). */

.private-view {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

/* Mesmo princípio do .invite-modal__backdrop acima: blur só na camada
   posterior, nunca no painel/vídeo da view privada. */
.private-view__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.private-view__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.private-view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.private-view__header strong {
  font-family: var(--font-display);
  font-size: var(--fs-400);
}

.private-view__close {
  flex-shrink: 0;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-500);
  cursor: pointer;
}

.private-view__video-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  background: var(--surface-base);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.private-view__video {
  width: 100%;
  max-height: 320px;
  background: #000;
}

.private-view__video[hidden] {
  display: none;
}

.private-view__placeholder {
  position: absolute;
  margin: 0;
}

.private-view__status {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-200);
}

.presentation-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 360px;
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  /* Corte assimétrico (só o canto superior direito), não --radius-lg
     genérico — mesma família de moldura periférica do resto da sala ao
     vivo, mas o conteúdo em si (rótulo/página) permanece Nível 0, plano. */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  text-align: center;
}

.presentation-stage__label {
  font-family: var(--font-display);
  font-size: var(--fs-600);
}

.presentation-stage__page {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-size: var(--fs-200);
}

.presentation-stage__controls {
  display: flex;
  gap: var(--space-3);
}

.presentation-stage__set-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.presentation-stage__set-form input {
  flex: 1 1 220px;
  min-height: var(--tap-target-min);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

/* Rail lateral — instrument rail (Nível 1), não card: um único corte no
   canto superior esquerdo, oposto ao do .presentation-stage, para dar
   ritmo entre os dois módulos periféricos da coluna principal sem repetir
   o mesmo corte. */
.classroom-live__rail {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  overflow: hidden;
}

.classroom-live__tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
}

.classroom-live__tab {
  flex: 1;
  padding: var(--space-3) var(--space-2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.classroom-live__tab:hover {
  color: var(--text-primary);
}

.classroom-live__tab[aria-selected='true'] {
  background: var(--surface-overlay);
  color: var(--text-accent);
  border-bottom-color: var(--raptor-olive);
}

/* A tela do rail fica plana/preta (Nível 0) — mesmo contraste
   módulo-cortado (tabs, grafite) / tela-plana (painel, preto) já
   validado em .chat-shell (docs/canon/chat-interface.md §2). */
.classroom-live__panel {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  max-height: 620px;
  padding: var(--space-4);
  gap: var(--space-3);
  background: var(--surface-base);
  overflow-y: auto;
}

.classroom-live__panel[hidden] {
  display: none;
}

.form-feedback {
  font-size: var(--fs-200);
  color: var(--text-secondary);
}

.form-feedback[data-state='error'] {
  color: var(--text-danger);
}

/* ---------- Mídia ---------- */

.media-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.media-source-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  background: var(--surface-base);
  border: 1px solid var(--border-strong);
  padding: var(--space-3);
  font-size: var(--fs-200);
}

.media-source-row__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--raptor-olive);
}

.media-source-row span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

/* ---------- Assessment Engine V1 ---------- */
/* Vive dentro de .classroom-live__panel, que já é a "tela" plana (Nível 0,
   --surface-base) do rail — ver comentário no topo deste arquivo. Linhas de
   lista usam --surface-raised para se destacar do fundo plano (mesmo
   contraste já usado em .classroom-session-row/.media-source-row); nenhum
   card novo, nenhum blur, presença de oliva só em bordas/preenchimento
   sólido de progresso (nunca preenchimento diluído). A superfície de
   resposta (.assessment-take) é deliberadamente a mais "limpa" de todas —
   periferia técnica, centro de leitura sem decoração (seção 14 da missão). */

.assessment-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.assessment-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.assessment-panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-400);
}

.assessment-panel__subtitle {
  font-size: var(--fs-300);
  font-weight: 600;
  margin-top: var(--space-2);
}

.assessment-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.assessment-panel__inline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
}

/* ---------- Lista de avaliações ---------- */

.assessment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.assessment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
}

.assessment-row__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.assessment-row__title {
  color: var(--text-primary);
}

.assessment-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.assessment-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Status — só borda/texto na cor semântica, nunca preenchimento diluído
   (docs/canon/colors.md, "Regra anti-pastel"). */
.assessment-status {
  display: inline-flex;
  padding: 2px var(--space-2);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.assessment-status--published {
  border-color: var(--raptor-olive);
  color: var(--text-accent);
}

.assessment-status--draft {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

.assessment-status--closed {
  border-color: var(--raptor-steel);
  color: var(--raptor-steel);
}

.assessment-status--archived {
  opacity: 0.6;
}

/* ---------- Formulários (criar avaliação, configurações, questão) ---------- */

.assessment-form,
.assessment-question-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.assessment-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.assessment-form__label {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.assessment-field {
  min-height: var(--tap-target-min);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-200);
}

.assessment-field:focus-visible {
  border-color: var(--accent-primary);
}

textarea.assessment-field {
  resize: vertical;
}

.assessment-question-form__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.assessment-question-form__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.assessment-question-form__option .assessment-field {
  flex: 1;
}

/* ---------- Questões da avaliação (draft) ---------- */

.assessment-question-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.assessment-question-item {
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
}

.assessment-question-item__stem {
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.assessment-question-item__options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 var(--space-2);
  padding-left: var(--space-4);
  font-size: var(--fs-200);
  color: var(--text-secondary);
}

.assessment-question-item__option--correct {
  color: var(--text-accent);
  font-weight: 600;
}

.assessment-question-item__actions {
  display: flex;
  gap: var(--space-2);
}

/* ---------- Banco de questões ---------- */

.assessment-bank-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.assessment-bank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
}

.assessment-bank-row__stem {
  color: var(--text-primary);
  min-width: 0;
}

/* ---------- Resultados (instrutor) ---------- */

.assessment-results-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

@media (min-width: 480px) {
  .assessment-results-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.assessment-results-stats__tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--surface-base);
  border: 1px solid var(--border-strong);
  text-align: center;
}

.assessment-results-stats__tile strong {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  color: var(--text-accent);
}

.assessment-results-stats__tile span {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.assessment-results-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.assessment-results-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  font-size: var(--fs-200);
}

.assessment-results-row__name {
  color: var(--text-primary);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assessment-attempt-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---------- Sala de resposta — CENTRO LIMPO (seção 14 da missão) ---------- */
/* Nível 0: sem retícula, sem corte de canto, sem oliva decorativa no corpo
   da questão — a única presença técnica é a barra de progresso (linha
   sólida, nunca glow) e o rodapé de navegação, ecoando o "control cluster"
   de .media-stage__self (Prompt 1) para dar continuidade visual entre a
   sala ao vivo e a avaliação, sem competir com o texto da questão. */

.assessment-take {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.assessment-take__status {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.assessment-take__position {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.assessment-take__progress-track {
  height: 3px;
  background: var(--border-subtle);
}

.assessment-take__progress-fill {
  height: 100%;
  background: var(--raptor-olive);
  transition: width var(--duration-base) var(--ease-standard);
}

.assessment-take__question {
  min-height: 160px;
}

.assessment-take__stem {
  color: var(--text-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-5);
}

.assessment-take__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.assessment-take__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  cursor: pointer;
  font-size: var(--fs-300);
  color: var(--text-primary);
}

.assessment-take__option:has(input:checked) {
  border-color: var(--raptor-olive);
}

.assessment-take__option input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--raptor-olive);
}

/* Módulo de controles, mesma linguagem de .media-stage__self. */
.assessment-take__nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.assessment-take__nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--raptor-olive);
}

.assessment-take__nav .btn--primary {
  margin-left: auto;
}

/* ---------- Resultado do aluno ---------- */

.assessment-result-score {
  font-family: var(--font-display);
  font-size: var(--fs-700);
  color: var(--text-primary);
}

.assessment-result-outcome {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  border: 1px solid;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
}

.assessment-result-outcome--pass {
  border-color: var(--raptor-olive);
  color: var(--text-accent);
}

.assessment-result-outcome--fail {
  border-color: var(--color-danger-surface);
  color: var(--text-danger);
}

.assessment-result-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-200);
}

.assessment-result-detail__row--correct {
  color: var(--text-accent);
}

.assessment-result-detail__row--wrong {
  color: var(--text-danger);
}

@media (max-width: 479px) {
  .assessment-results-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}