/* ============================================================
   Console de condução — camada visual.
   Estrutura da página inicial: #F5F5F5, filetes de 1px, número à
   esquerda, tipografia grande com tracking negativo, peso máximo
   600, pílulas e muito ar. A linha é a unidade, não a caixa.

   O topo (appbar + trilho) é uma peça só, fixa, que se contrai ao
   rolar. Verde vivo é sempre "agora"; o tempo já gasto é lavado.
   ============================================================ */

@font-face{font-family:'TT Norms Pro';src:url('/fonts/tt-norms-pro-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'TT Norms Pro';src:url('/fonts/tt-norms-pro-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --ink:#F5F5F5;
  --surface:#FFFFFF;
  --surface-2:#E7E6E3;
  --line:rgba(0,0,0,.10);
  --line-2:rgba(0,0,0,.06);
  --text:#000000;
  --text-2:rgba(0,0,0,.70);
  --muted:rgba(0,0,0,.45);
  --faint:rgba(0,0,0,.28);
  --deep:#1B3A57;

  /* azul do projeto: a cor primária, usada em tudo que significa "isto está
     valendo agora". --agora-ink é a versão escurecida para quando a cor vira
     texto corrido sobre o claro. */
  --agora:#3B93B0;
  --agora-fg:#FFFFFF;
  --agora-ink:#2C7089;
  --agora-soft:rgba(59,147,176,.06);
  --agora-tint:rgba(59,147,176,.28);
  /* variação do azul para texto de apoio — mais discreta que --agora-ink,
     mais presente que --muted */
  --agora-var:color-mix(in srgb, var(--agora-ink) 62%, var(--muted) 38%);
  /* lavagem do tempo já gasto: menos evidência que o tempo que ainda falta */
  --wash:rgba(245,245,245,.66);
  /* véu sobre vídeo/foto na home: o texto se lê em qualquer quadro, e o tom
     é o da própria página — no escuro ele inverte junto */
  --hero-veil:rgba(245,245,245,.92);
  --hero-veil-2:rgba(245,245,245,.62);
  /* ---- os cinco tipos do roteiro ----
     Cada tipo é uma cor da legenda e possui a mesma estrutura de quatro
     tokens: a cor cheia (preenchimento/borda), -ink (a mesma cor escurecida
     até se ler como texto corrido), -soft (fundo do cartão quando o tipo está
     valendo) e -tint (o trilho de tempo dentro do cartão). */
  --pausa:#7E22CE;
  --pausa-ink:#6B1BAF;
  --pausa-soft:rgba(126,34,206,.04);
  --pausa-tint:rgba(126,34,206,.28);

  /* o azul cheio do projeto marca a pergunta — é o card que o professor lê em
     voz alta, e ganha a cor mais sólida da paleta. O ciano do "agora" fica
     como sinal de estado, não de conteúdo. */
  --pergunta:#215B90;
  --pergunta-ink:#1A4A76;
  --pergunta-soft:rgba(33,91,144,.05);
  --pergunta-tint:rgba(33,91,144,.28);

  --provoc:#C2410C;
  --provoc-ink:#A3360A;
  --provoc-soft:rgba(194,65,12,.04);
  --provoc-tint:rgba(194,65,12,.28);

  --dinamica:#047857;
  --dinamica-ink:#036249;
  --dinamica-soft:rgba(4,120,87,.04);
  --dinamica-tint:rgba(4,120,87,.28);

  --alerta:#DC2626;
  --alerta-ink:#B4161B;
  --alerta-soft:rgba(220,38,38,.035);
  --alerta-tint:rgba(220,38,38,.28);

  /* O intervalo usa a mesma cor do trilho e do chip "Intervalo · não
     encurtar" no roteiro — --pausa. Um alias, não uma cor nova: assim os
     três lugares que marcam a pausa da aula (trilho, chip, card na lista de
     blocos) nunca podem ficar em tons diferentes. */
  --intervalo:var(--pausa);
  --intervalo-ink:var(--pausa-ink);
  --intervalo-soft:var(--pausa-soft);
  --intervalo-tint:var(--pausa-tint);

  /* Azul de ação: todo botão cheio do projeto usa a mesma cor do trilho
     ativo — um só azul, sem uma segunda tonalidade para "botão" e outra
     para "isto está valendo agora". */
  --acao:var(--agora);
  --acao-fg:var(--agora-fg);
  --avancar:var(--acao);
  --avancar-fg:var(--acao-fg);

  --display:'TT Norms Pro','Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'TT Norms Pro','Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,monospace;

  --wrap:72rem;
  /* Altura única de todo controle: o "Pausar" da topbar é a régua.
     Pílulas, grupos de ajuste, ícones e a pílula de estado usam a mesma. */
  --h:38px;
}
/* no toque a régua sobe para o alvo mínimo confortável, mas segue única */
@media(pointer:coarse){:root{--h:44px}}

[data-theme="dark"]{
  /* os neutros do escuro puxam para o azul do projeto, não mais para o
     violeta: um fundo arroxeado sob uma primária azul brigava de matiz */
  --ink:#101720;
  --surface:#161F2B;
  --surface-2:#22303F;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.07);
  --text:#FFFFFF;
  --text-2:rgba(255,255,255,.72);
  --muted:rgba(255,255,255,.48);
  --faint:rgba(255,255,255,.30);
  --deep:#1B3A57;

  --agora:#5CB3CE;
  --agora-fg:#052229;
  --agora-ink:#9BD3E3;
  --agora-soft:rgba(92,179,206,.12);
  --agora-tint:rgba(92,179,206,.30);
  --agora-var:color-mix(in srgb, var(--agora-ink) 62%, var(--muted) 38%);
  --wash:rgba(16,23,32,.62);
  --hero-veil:rgba(16,23,32,.93);
  --hero-veil-2:rgba(16,23,32,.66);
  /* no escuro cada tipo sobe de luminosidade: a cor cheia clareia para servir
     de borda/preenchimento, e -ink clareia mais ainda para virar texto */
  --pausa:#A855F7;
  --pausa-ink:#C99BFB;
  --pausa-soft:rgba(168,85,247,.09);
  --pausa-tint:rgba(168,85,247,.30);

  --pergunta:#5B9BD5;
  --pergunta-ink:#A8CBEC;
  --pergunta-soft:rgba(91,155,213,.11);
  --pergunta-tint:rgba(91,155,213,.30);

  --provoc:#FB923C;
  --provoc-ink:#FDBA74;
  --provoc-soft:rgba(251,146,60,.09);
  --provoc-tint:rgba(251,146,60,.30);

  --dinamica:#34D399;
  --dinamica-ink:#6EE7B7;
  --dinamica-soft:rgba(52,211,153,.09);
  --dinamica-tint:rgba(52,211,153,.30);

  --alerta:#F43F5E;
  --alerta-ink:#FDA4AF;
  --alerta-soft:rgba(244,63,94,.09);
  --alerta-tint:rgba(244,63,94,.30);

  --intervalo:var(--pausa);
  --intervalo-ink:var(--pausa-ink);
  --intervalo-soft:var(--pausa-soft);
  --intervalo-tint:var(--pausa-tint);

  --acao:var(--agora);
  --acao-fg:var(--agora-fg);
  --avancar:var(--acao);
  --avancar-fg:var(--acao-fg);
}

*{box-sizing:border-box;margin:0;padding:0;font-family:inherit}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  min-height:100vh;
  /* o rodapé de transporte é fixo e sempre visível — a página inteira é
     sempre o roteiro de algum bloco — então reserva o espaço dele sempre;
     --dock-h vem da medida real (assets/console.js), não de um chute */
  padding-bottom:calc(var(--dock-h,104px) + 32px);
  /* sem overflow-x aqui: ele faria o body virar o container de rolagem
     e as barras grudadas parariam de se referir à viewport */
}
body.drawer-open{overflow:hidden}
body.scrubbing{user-select:none;cursor:ew-resize}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--agora-ink);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%}

/* ================= CHROME: APPBAR + TRILHO =================
   Uma peça só, fixa: o conteúdo corre por baixo dela. Ao rolar,
   encolhe até o mínimo que ainda se lê. */
.chrome{
  position:sticky;top:0;z-index:40;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}

.appbar{max-width:var(--wrap);margin:0 auto;padding:12px 24px 10px;
  display:flex;align-items:center;gap:18px;
  padding-top:calc(12px + env(safe-area-inset-top))}

.back{display:flex;align-items:center;gap:11px;min-width:0;flex:1 1 auto}
.back .mark{width:32px;height:32px;flex:0 0 32px;border-radius:6px;background:var(--text);color:var(--ink);
  display:grid;place-items:center}
.back .mark svg{width:17px;height:17px;fill:currentColor}
/* min-width:0 + overflow: sem os dois o título não encolhe e a barra
   empurra a página para fora da viewport no celular */
.back .who{min-width:0;overflow:hidden}
.back .who b{display:block;font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.03em;
  color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back .who .data{display:block;margin-top:3px;font-family:var(--mono);font-size:10.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Os passos moram do lado direito, junto do estado: à esquerda fica a
   identidade (marca, título, data), à direita o que muda durante a aula.
   Espaço maior que o gap da barra para não colarem na pílula de estado. */
.abacoes .passos{margin-right:8px}

/* ---- os seis passos da disciplina ----
   Repetem, em escala miúda, a linha do tempo da capa: dizem em qual das seis
   etapas a aula está — coisa que o rótulo cinza anterior não dizia, e que a
   barra de blocos logo abaixo confundia, por também ser numerada. Cada passo
   é um atalho para a sua etapa; o atual não é link.
   O ponto continua com 7px, mas a área clicável é bem maior: alvo pequeno
   demais em barra fixa é erro de clique garantido. */
.passos{display:flex;align-items:center;gap:2px;flex-shrink:0}
.passo{position:relative;display:grid;place-items:center;width:24px;height:30px;border-radius:6px}
.passo i{width:7px;height:7px;border-radius:50%;background:var(--faint);font-style:normal;
  transition:background-color .2s,transform .2s}
.passo.feita i{background:var(--agora-tint)}
@media(hover:hover){
  .passo:not(.atual):hover i{background:var(--agora);transform:scale(1.35)}
}
.passo.atual{width:auto;padding:0 2px}
.passo.atual i{width:auto;height:auto;padding:3px 9px;border-radius:999px;
  background:var(--agora);color:var(--agora-fg);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;line-height:1.35}

/* ---- seletor de etapa: só no celular, no lugar da fileira ----
   Mesma caixa dos outros botões da barra (altura --h, raio 6, filete de 1px),
   com o número da etapa e a seta que abre a lista. */
.etapa-sel{position:relative;display:none;flex:0 0 auto}
/* Fundo cheio no azul do projeto: nesta barra é o único botão que leva a
   outra etapa, e a mesma cor que marca "agora" no trilho e no relógio marca
   aqui a etapa em curso — número e seta em branco por cima. */
.icon-btn.etapa-btn{width:auto;flex:0 0 auto;padding:0 8px 0 11px;gap:5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--agora);border-color:transparent;color:var(--agora-fg)}
.icon-btn.etapa-btn b{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--agora-fg);letter-spacing:.02em}
.icon-btn.etapa-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
@media(hover:hover){.icon-btn.etapa-btn:hover{border-color:transparent;color:var(--agora-fg);filter:brightness(1.06)}}
.icon-btn.etapa-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.icon-btn.etapa-btn[aria-expanded="true"]{filter:brightness(1.1)}

.etapa-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:min(272px,calc(100vw - 36px));
  background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.18)}
.etapa-menu[hidden]{display:none}
.em-head{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:11px 14px 7px}
.em-item{display:flex;align-items:baseline;gap:10px;padding:9px 14px;border-top:1px solid var(--line-2)}
.em-item i{font-family:var(--mono);font-size:11px;font-style:normal;color:var(--faint);flex:0 0 auto}
.em-item span{flex:1;min-width:0;font-size:14px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-item em{font-family:var(--mono);font-size:10.5px;font-style:normal;color:var(--faint);flex:0 0 auto}
.em-item.aqui{background:var(--agora-soft)}
.em-item.aqui i,.em-item.aqui em{color:var(--agora-ink)}
.em-item.aqui span{color:var(--text);font-weight:600}
@media(hover:hover){.em-item:not(.aqui):hover{background:var(--surface-2)}}
.em-item:active{background:var(--surface-2)}

/* etiqueta no hover: qual etapa aquele ponto representa */
.passo::after{content:attr(data-rot);position:absolute;top:calc(100% - 1px);left:50%;
  transform:translateX(-50%) translateY(-3px);
  background:var(--text);color:var(--ink);border-radius:6px;padding:4px 8px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:6}
.passo:hover::after,.passo:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.passo:focus-visible{outline-offset:0}
.chrome{will-change:auto}
/* ao rolar, a linha de contexto sai: o título já basta */

/* o que sobra na appbar: estado e tema. O transporte vive no rodapé. */
.abacoes{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:auto}

/* hierarquia: decorrido é o número da aula; restante é apoio — mesmo corpo,
   o que separa os dois é a cor, então eles batem na mesma linha de base */
.times{display:flex;align-items:baseline;gap:26px;flex-shrink:0;padding:0 12px}
.times .t{font-family:var(--mono);font-size:27px;font-weight:700;letter-spacing:-.05em;color:var(--text);transition:color .2s}
.times .t.sec{color:var(--muted)}
.times .t.off{color:var(--faint)}
.times .t.bump{color:var(--agora-ink)}

.statuspill{
  display:inline-flex;align-items:center;min-height:var(--h);
  font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:0 14px;border-radius:6px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;
}
.statuspill.ontime{border-color:transparent;color:var(--agora-ink);background:var(--agora-soft)}
.statuspill.late{border-color:transparent;color:var(--alerta-ink);background:var(--alerta-soft)}
.statuspill.early{border-color:transparent;color:var(--pergunta-ink);background:var(--pergunta-soft)}

.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--text);color:var(--ink);
  font-size:15px;font-weight:600;letter-spacing:-.015em;
  padding:0 24px;border-radius:6px;min-height:var(--h);height:var(--h);
  transition:background-color .2s,color .2s,transform .12s,opacity .2s;
}
.pill:active{transform:scale(.97)}
.pill.ghost{background:transparent;border:1px solid var(--line);color:var(--text-2)}
@media(hover:hover){.pill.ghost:hover{border-color:var(--text);color:var(--text)}}
.pill.run{background:var(--acao);color:var(--acao-fg)}
@media(hover:hover){.pill.run:hover{filter:brightness(1.06)}}
.pill:disabled{opacity:.25;cursor:default}
.pill.sm{font-size:13.5px;padding:0 18px}
.icon-btn{
  width:var(--h);height:var(--h);flex:0 0 var(--h);border-radius:6px;border:1px solid var(--line);
  display:grid;place-items:center;font-size:15px;color:var(--text-2);
  transition:border-color .2s,color .2s,transform .12s;
}
.icon-btn:active{transform:scale(.92)}
@media(hover:hover){.icon-btn:hover{border-color:var(--text);color:var(--text)}}

/* play/pause em ícone: o símbolo é ditado por body.rodando, então ele nunca
   discorda do estado real do relógio — não há texto para dessincronizar */
.icon-btn.play{background:var(--acao);border-color:transparent;color:var(--acao-fg);font-size:0}
.icon-btn.play::after{content:'▶';font-size:13px;line-height:1}
body.rodando .icon-btn.play::after{content:'❚❚';font-size:11px;letter-spacing:1px}
@media(hover:hover){.icon-btn.play:hover{border-color:transparent;color:var(--acao-fg);filter:brightness(1.06)}}

/* os dois grupos de ajuste da appbar: menos à esquerda do relógio, mais à
   direita. Sem o play no meio, cada um encosta no número que altera. */
.ctrl.lado{padding:3px;gap:2px}
.ctrl.lado .step{min-width:38px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center}
.ctrl.lado .step svg{width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ---- trilho das quatro horas: largura = duração ---- */
.track{max-width:var(--wrap);margin:0 auto;padding:0 24px 12px;position:relative;touch-action:pan-y}
.trackrow{display:flex;gap:3px;position:relative}
.seg{
  position:relative;height:28px;border-radius:6px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0;
  transition:background-color .2s;
}
.seg .lbl{position:relative;z-index:2;font-family:var(--mono);font-size:10.5px;color:var(--muted);
  letter-spacing:-.02em;transition:opacity .2s}
@media(hover:hover){.seg:hover{background:var(--line)}}
/* preenchido = o bloco onde o relógio está, o mesmo que o marcador aponta */
.seg.agora{background:var(--agora)}
.seg.agora .lbl{color:var(--agora-fg);font-weight:600}
/* anel = o bloco aberto na tela, que pode ser outro quando se consulta adiante.
   Quando coincidem — o caso normal — o segmento fica cheio e contornado. */
/* mais fino e em --muted, não --text: um contorno preto de 2px gritava mais
   que o preenchimento sólido do próprio "agora" — o anel devia ser a pista
   discreta, não competir com ele */
.seg.on{box-shadow:inset 0 0 0 1px var(--faint)}
.seg.on .lbl{color:var(--text-2);font-weight:600}
.seg.agora.on .lbl{color:var(--agora-fg)}
/* o tempo já gasto é lavado: fica menos evidente que o que ainda falta */
.seg::before{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--past,0%);
  background:var(--wash);z-index:1;transition:width .4s linear}
/* mesma hachura do card de intervalo na lista de blocos: listra de 5px num
   período de 12px, na mesma tinta — o intervalo se lê igual no trilho e na
   lista, em vez de ter duas texturas diferentes para a mesma coisa */
.seg.pausa::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:repeating-linear-gradient(-45deg,
    color-mix(in srgb,var(--intervalo) 14%,transparent) 0 5px,
    transparent 5px 12px);
}
.seg.pausa .lbl{color:var(--pausa)}
/* Quando o relógio está no intervalo o segmento não veste o azul de "agora" —
   a pausa se leria como mais um bloco de aula. Mas também não é inundado de
   roxo: isso apagava a hachura e o rótulo. É uma tinta leve sobre o mesmo
   fundo, com a hachura e o "Int" ainda por cima. */
.seg.pausa.agora{background:color-mix(in srgb,var(--intervalo) 20%,var(--surface-2))}
.seg.pausa.agora .lbl{color:var(--pausa);font-weight:600}
@supports not (color: color-mix(in srgb, red 10%, transparent)){
  .seg.pausa.agora{background:var(--surface-2)}
}

/* marcador: é também a alça de arraste */
#marker{position:absolute;top:-4px;bottom:-4px;width:3px;background:var(--agora);border-radius:6px;
  display:none;z-index:6;cursor:ew-resize;box-shadow:0 0 0 2px var(--ink)}
#marker::after{content:'';position:absolute;left:-6px;bottom:-7px;width:15px;height:15px;border-radius:6px;
  background:var(--agora);box-shadow:0 0 0 2px var(--ink);transition:transform .15s}
body.scrubbing #marker::after{transform:scale(1.25)}
#scrubTip{
  position:absolute;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:7;display:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:-.02em;
  background:var(--text);color:var(--ink);padding:5px 10px;border-radius:6px;white-space:nowrap;
}
body.scrubbing #scrubTip{display:block}

/* ================= HERO DA AULA ================= */
.hero{padding:56px 0 40px}
.hero .eyebrow{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.hero h1{font-family:var(--display);font-size:clamp(38px,7vw,64px);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--text);text-wrap:balance}
.hero .frase{margin-top:32px;padding:24px 28px;border-radius:6px;background:var(--surface);border:1px solid var(--line);max-width:52rem}
.hero .frase p{font-family:var(--display);font-size:clamp(18px,2.4vw,24px);font-weight:600;letter-spacing:-.03em;line-height:1.25;color:var(--text)}
.hero .frase span{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}


/* grupo −5 −1 ▶ +1 +5 */
.ctrl{display:flex;align-items:center;gap:3px;background:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:3px;height:var(--h)}
.ctrl .step{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--text-2);padding:0 14px;
  border-radius:6px;min-width:46px;height:calc(var(--h) - 8px);transition:background-color .2s,color .2s}
@media(hover:hover){.ctrl .step:hover{background:var(--surface-2);color:var(--text)}}
.ctrl .play{padding:0 24px;min-height:0;height:calc(var(--h) - 8px)}

/* ================= RÓTULO DE SEÇÃO ================= */
.label{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:0 0 14px;margin-top:56px;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.label .n{font-family:var(--mono);letter-spacing:-.02em;text-transform:none;font-size:11.5px}

/* ================= LISTA DE BLOCOS =================
   Mesmo cartão do roteiro: contorno de 1px, raio 6, um vão de 20px entre
   eles — cada bloco é uma unidade própria, não uma linha de tabela. */
/* enquanto a etapa escolhida carrega, a lista desbota em vez de sumir: o
   painel não salta de altura e o professor não perde o ponto de leitura */
.rows[aria-busy="true"]{opacity:.4;transition:opacity .2s}
.rows-erro{font-size:14px;line-height:1.6;color:var(--text-2);padding:20px 0}
.rows-erro a{color:var(--agora-ink);font-weight:600;text-decoration:underline}
.row{display:flex;align-items:center;gap:24px;width:100%;text-align:left;
  padding:22px 20px;border:1px solid var(--line-2);border-radius:6px;position:relative;
  transition:padding-left .25s,border-color .2s,background-color .2s,opacity .2s}
.row+.row{margin-top:20px}
/* trilha do bloco que está valendo: quanto do bloco inteiro já passou — não
   do item aberto no roteiro, do bloco como um todo. Mesma cápsula da barra
   vertical do item ativo no roteiro (trilho claro, preenchimento com ponta
   redonda), só que deitada. Posição absoluta com inset fixo de 10px dos três
   lados: mais previsível que brigar com flex-wrap por um valor exato. */
.row .trilha-row{display:none}
.row.on{padding-bottom:41px}
.row.on .trilha-row{display:block;position:absolute;left:10px;right:10px;bottom:10px;
  height:7px;border-radius:6px;background:var(--line);overflow:hidden}
.row.on .trilha-row i{position:absolute;inset:0;border-radius:6px;background:var(--agora);
  width:calc(100% * var(--p,0));transition:width 1s linear}
@media(hover:hover){.row:hover{padding-left:26px;background:var(--line-2);border-color:var(--line)}}
/* o bloco de intervalo leva o mesmo fundo hachurado do card "agora" da
   dinâmica no roteiro — a mesma textura de "aqui a aula pausa", em amarelo */
/* mesma graduação do card de pergunta: o fundo é um véu claro e parelho, e
   a hachura entra só como textura — não como listra de alto contraste */
.row.pausa{background-color:var(--intervalo-soft);border-color:var(--intervalo-tint);
  background-image:repeating-linear-gradient(-45deg,
    color-mix(in srgb,var(--intervalo) 6%,transparent) 0 5px,
    transparent 5px 12px)}
.row.pausa .idx,.row.pausa .nome,.row.pausa .quando{color:var(--intervalo-ink)}
@media(hover:hover){.row.pausa:hover{background-color:var(--intervalo-soft);border-color:var(--intervalo)}}
.row .idx{font-family:var(--mono);font-size:13px;color:var(--faint);width:34px;flex:0 0 34px;letter-spacing:-.02em}
.row .nome{flex:1;min-width:0;font-family:var(--display);font-size:clamp(20px,2.6vw,27px);font-weight:600;letter-spacing:-.035em;line-height:1.15;color:var(--text)}
.row .quando{font-family:var(--mono);font-size:13px;color:var(--muted);white-space:nowrap;letter-spacing:-.02em}
.row .tag{display:inline-block;margin-left:12px;vertical-align:3px;font-size:9.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;padding:4px 10px;border-radius:6px;background:var(--deep);color:#fff}
.row .tag.now{background:var(--agora);color:var(--agora-fg)}
/* mesma estrutura de pílula contornada do tipo "Dinâmica" no roteiro — só
   que em amarelo: o intervalo não é um evento do roteiro, é uma pausa da
   aula, e merece uma cor que não colide com nenhum dos cinco tipos */
.row .tag.pausa{background:var(--surface);border:1px solid var(--intervalo);color:var(--intervalo)}
.row.done{opacity:.42}
.row.on .nome{color:var(--agora-ink)}

/* ================= DRAWER "TODOS OS BLOCOS" =================
   O roteiro do bloco é a página normal — sempre visível, nunca escondida.
   "Todos os blocos" é o que abre por cima dela num painel deslizante: título
   da aula, relógio grande e a lista dos seis blocos. Fechar — X, Esc, clique
   no véu ou escolher uma linha — sempre devolve para o roteiro exatamente
   como estava, sem perder o scroll da página de trás. */
.scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.38);
  opacity:0;pointer-events:none;transition:opacity .32s ease}
.scrim.show{opacity:1;pointer-events:auto}
[data-theme="dark"] .scrim{background:rgba(0,0,0,.55)}

.drawer{position:fixed;top:0;right:0;bottom:0;z-index:60;
  width:min(44rem,92vw);max-width:100%;
  background:var(--ink);border-left:1px solid var(--line);
  box-shadow:-24px 0 60px -24px rgba(0,0,0,.35);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .38s cubic-bezier(.32,.72,0,1);
}
.drawer.open{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.drawer{transition:none}.scrim{transition:none}}

/* ---- topo do drawer: o primeiro nível da navegação ----
   A hierarquia real é etapa → bloco, então a faixa das seis etapas fica
   acima de tudo, fixa, e a lista de blocos rola por baixo dela. */
/* padding igual nos quatro lados: os botões das pontas ficam à mesma
   distância da borda em cima, embaixo e dos lados — uma moldura só */
.drawer-topo{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:14px;
  border-bottom:1px solid var(--line);background:var(--ink)}
.drawer-close{flex:0 0 auto}
/* setas da faixa: alça de rolagem lateral para quem está no mouse. Somem
   por completo quando as seis etapas já cabem na largura disponível. */
/* mesma medida do botão de fechar: os três são .icon-btn e usam a régua
   única (--h), então a linha do topo fecha certinho */
.mods-seta{flex:0 0 auto}
.mods-seta[hidden]{display:none}
.mods-seta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.mods-seta:disabled{opacity:.25;cursor:default}
@media(hover:hover){.mods-seta:disabled:hover{border-color:var(--line);color:var(--text-2)}}
.drawer-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}

/* a faixa rola na horizontal quando os seis não cabem — sem barra à vista,
   e com a etapa aberta centralizada ao abrir o painel */
.mods{flex:1 1 auto;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;padding-bottom:2px}
.mods::-webkit-scrollbar{display:none}
.mod{flex:0 0 auto;scroll-snap-align:center;display:inline-flex;align-items:center;gap:8px;
  height:32px;padding:0 12px;border-radius:6px;border:1px solid transparent;
  color:var(--muted);white-space:nowrap;
  transition:background-color .2s,color .2s,border-color .2s}
.mod-n{font-family:var(--mono);font-size:11px;letter-spacing:-.02em}
.mod-t{font-size:12px;font-weight:600;letter-spacing:-.01em}
@media(hover:hover){.mod:not(.atual):hover{background:var(--line-2);color:var(--text);border-color:var(--line)}}
/* a etapa aberta é a única preenchida — o mesmo sinal de "é aqui" que o
   trilho usa para o bloco corrente */
.mod.atual{background:var(--agora);color:var(--agora-fg);border-color:transparent}
.mod.atual .mod-n{color:var(--agora-fg);opacity:.7}
/* etapa já dada: continua clicável, mas recua para o segundo plano */
.mod.feita{opacity:.45}

.drawer-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:28px clamp(22px,4vw,44px) 40px}
.drawer-scroll .hero{padding:0 0 8px}

/* ---- cabeçalho do bloco: solto, ele é o título da página ---- */
.bhead{padding:6px 0 28px;border-bottom:1px solid var(--line)}
/* "Todos os blocos", "Bloco N de 6" e os chips de tempo/lâmina viram uma
   trilha só, acima do título — mas cada um com o peso que lhe cabe:
   "Todos os blocos" é a única ação daqui, então é o único que leva corpo de
   botão (contorno, fundo, hover); o resto é contexto, texto simples. */
.crumb{display:flex;flex-wrap:wrap;align-items:center;row-gap:10px;column-gap:14px;
  padding:24px 0 0}
.voltar{display:inline-flex;align-items:center;height:30px;flex:0 0 auto;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);
  padding:0 14px;border-radius:6px;border:1px solid var(--line);background:var(--surface);
  transition:border-color .2s,background-color .2s,color .2s}
@media(hover:hover){.voltar:hover{border-color:var(--text);color:var(--text);background:var(--surface-2)}}
.crumb-atual{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.crumb-sep{width:1px;height:13px;background:var(--line);flex:0 0 1px}

/* ---- barra compacta ----
   Entra ancorada abaixo do chrome quando a trilha grande sai de vista, e
   some quando ela volta: as duas nunca dividem a tela. Fica só o
   indispensável para conduzir — voltar, qual bloco, e quanto tempo ele tem. */
/* nasce fechada: o GSAP interpola a altura, e o filete de baixo continua
   sendo a borda do próprio chrome — nada flutua por cima do trilho */
.bbar{overflow:hidden;height:0;opacity:0}
.bbar-in{max-width:var(--wrap);margin:0 auto;padding:0 24px 11px;
  display:flex;align-items:center;gap:14px}
.bbar-nome{flex:1 1 auto;min-width:0;font-family:var(--display);font-size:16px;font-weight:600;
  letter-spacing:-.025em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbar-tempo{flex:0 0 auto;font-family:var(--mono);font-size:12px;letter-spacing:-.02em;color:var(--muted)}
.bhead h1{font-family:var(--display);font-size:clamp(34px,6vw,58px);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--text);text-wrap:balance;transition:font-size .25s}

.chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:7px 14px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
/* o chip de tempo é botão: leva o relógio para o início do bloco */
.chip.tempo{font-family:var(--mono);color:var(--text);letter-spacing:-.02em;font-size:12.5px;
  cursor:pointer;transition:border-color .2s,background-color .2s}
@media(hover:hover){.chip.tempo:hover{border-color:var(--text);background:var(--line-2)}}
.chip.deck{border-color:transparent;background:var(--surface-2);color:var(--text-2)}
.chip.pausa{border-color:var(--pausa);color:var(--pausa)}

.obj{margin-top:28px;font-size:17px;line-height:1.6;color:var(--text-2);max-width:60ch}
.obj strong{color:var(--text);font-weight:600}

/* ================= ROTEIRO =================
   Cada item tem duas colunas: quando (etiqueta ao vivo + relógio) e o que.
   Dentro da segunda coluna, uma linha de meta só — tipo à esquerda, lâmina
   projetada à direita — e o texto embaixo, em largura de leitura. */
.it{display:flex;gap:32px;padding:24px 8px;border:1px solid var(--line-2);border-radius:6px;
  transition:opacity .3s,background-color .3s,border-color .3s;position:relative}
.it+.it{margin-top:20px}
.it{align-items:flex-start}
/* cada item leva o relógio até o próprio instante; o cursor de texto continua
   valendo sobre o parágrafo, para não atrapalhar quem copia trecho do roteiro */
.it{cursor:pointer}
.it p,.it .onscreen{cursor:text}
@media(hover:hover){.it:not(.agora):hover{background:var(--line-2)}}
.it .quando{flex:0 0 96px;width:96px;font-family:var(--mono);font-size:12px;letter-spacing:-.02em;line-height:1.5}
.it .quando .h{display:block;color:var(--faint)}
.it .quando b{display:block;font-weight:500;color:var(--muted)}
/* enquanto o item corre, a duração vira contagem regressiva: peso maior e
   tabular-nums para o número não dançar a cada segundo */
.it .quando b.correndo{font-weight:700;font-variant-numeric:tabular-nums}
.it .quando.fixo b{color:var(--text-2)}
.it .corpo{flex:1;min-width:0}

/* ---- linha de meta: grade de quatro colunas ----
   Grade, não flex, para o grid-row:1 travar tudo numa linha só (ver abaixo).
   A coluna da lâmina mede o próprio chip (max-content) — não uma largura fixa
   — para o vão até o título projetado ser sempre os mesmos 20px do gap, em
   vez de sobrar espaço morto quando o número da lâmina é curto ("Lâmina 10"
   tem 28px de folga a menos que "Lâmina 19–20"). O preço é que o título deixa
   de nascer no mesmo x entre linhas de chips com larguras diferentes — troca
   aceitável por um espaçamento que não varia com o conteúdo. */
/* Identificação à esquerda (lâmina + o que está projetado), classificação à
   direita (tipo e, na extremidade, a etiqueta de ao vivo). O grid-row:1 é
   obrigatório: sem ele, uma linha sem chip faz o auto-placement empurrar os
   itens seguintes para uma segunda faixa. */
.mt{display:grid;grid-template-columns:max-content 1fr auto auto;align-items:center;
  column-gap:20px;margin-bottom:20px;min-height:20px}
.mt>*{grid-row:1}
.mt .num{grid-column:1}
.mt .onscreen{grid-column:2}
.mt .agoratag{grid-column:3}
.mt .tipo{grid-column:4}

/* ---- pílula: a unidade que o AGORA, a lâmina e a pergunta compartilham ----
   Mesma altura, mesma fonte, mesmo espaçamento nos três — só a cor e o
   preenchimento mudam. O border transparente no chip da lâmina e na pergunta
   inativa existe só para consumir o mesmo espaço que a borda colorida da
   pílula do AGORA — é isso que garante a altura idêntica entre as três. */
.agoratag,.mt .num,.t-pergunta .tipo,.t-dinamica .tipo,.t-alerta .tipo,
.t-pausa .tipo,.t-provoc .tipo{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  font-size:11px;line-height:1;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 10px;border:1px solid transparent;border-radius:6px;
}

.tipo{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.tipo::before{content:'';width:7px;height:7px;border-radius:6px;background:currentColor}
.fala-tipo{color:var(--faint)}
/* fora do item ativo, a legenda "na tela" é só apoio — cinza, sem disputar leitura */
.onscreen{flex:1 1 auto;min-width:0;text-align:left;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onscreen b{font-weight:600;text-transform:none;letter-spacing:-.01em;color:var(--muted)}

/* conteúdo — cinza por padrão; só o item ativo recebe a cor e o peso do projeto */
.fala{font-family:var(--display);font-size:clamp(19px,2.3vw,25px);font-weight:600;letter-spacing:-.03em;
  line-height:1.3;color:var(--text);max-width:44ch}
.mt .num{font-family:var(--mono);font-weight:500;color:var(--text-2);background:var(--surface-2)}
.lamtxt{font-size:16.5px;line-height:1.6;color:var(--text-2);max-width:68ch}
.lamtxt em{color:var(--text);font-style:italic}
.lamtxt b{color:var(--text);font-weight:600}
.marca .txt{font-size:17px;line-height:1.55;color:var(--text-2);max-width:66ch}
.marca .txt b,.marca .txt strong{color:var(--text);font-weight:600}
.t-pausa .tipo{background:var(--surface);border-color:var(--pausa);color:var(--pausa)}
.t-provoc .tipo{background:var(--surface);border-color:var(--provoc);color:var(--provoc)}
.t-pergunta .txt{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.025em;color:var(--text);max-width:46ch}
/* o alerta é um bloco de cor só: o realce interno continua em negrito, mas na
   mesma tinta. Sem isto, `.marca .txt b` puxava os trechos fortes de volta ao
   neutro e o vermelho quebrava no meio da frase. */
.t-alerta .txt,
.t-alerta .txt b,
.t-alerta .txt strong{color:var(--alerta-ink)}

/* Cada tipo vira pílula na própria cor da legenda — mesma estrutura do AGORA:
   fundo da superfície, borda e texto na cor do tipo. */
.t-pergunta .tipo{background:var(--surface);border-color:var(--pergunta);color:var(--pergunta)}
.t-dinamica .tipo{background:var(--surface);border-color:var(--dinamica);color:var(--dinamica)}
/* o alerta repete a mesma estrutura, na sua própria cor */
.t-alerta .tipo{background:var(--surface);border-color:var(--alerta);color:var(--alerta)}
/* sem o ponto: a pílula já é o sinal, e o ponto empurrava o texto para fora
   do eixo das outras etiquetas */
.t-pergunta .tipo::before,.t-dinamica .tipo::before,.t-alerta .tipo::before,
.t-pausa .tipo::before,.t-provoc .tipo::before{display:none}

/* ---- o item que está valendo ---- */
/* 0.3 apagava demais: o que vem antes e depois do item da vez ainda precisa
   ser lido de relance para o professor se situar. 0.52 mantém a hierarquia
   sem tornar o resto do roteiro ilegível. */
main.focando .it{opacity:.52}
main.focando .it.agora{opacity:1}
/* O cartão sangra 24px para a esquerda (exatamente o padding da coluna, então
   não gera rolagem horizontal) e devolve isso em padding: o conteúdo nasce no
   mesmo x das linhas normais e sobra uma calha interna para a barra de tempo. */
.it.agora{background:var(--agora-soft);border-color:transparent;
  padding:24px 20px 24px 32px;margin-left:-24px;margin-right:-12px;
  scroll-margin-top:calc(var(--chrome-h,112px) + 96px)}

/* Barra de tempo: trilho e preenchimento são duas pastilhas arredondadas,
   recuadas das bordas do cartão. O preenchimento desce sobre o trilho, e a
   ponta redonda de um contra a do outro é o que marca onde o tempo está.
   É elemento de verdade, não pseudo: também é a alça que arrasta o relógio
   dentro da janela do item, como o trilho das quatro horas faz na aula toda. */
.barra{display:none}
.it.agora .barra{
  display:block;position:absolute;left:12px;top:14px;bottom:14px;width:8px;
  border-radius:6px;background:var(--agora-tint);
  cursor:ns-resize;touch-action:pan-y;
}
/* alvo de toque confortável sem engordar a pastilha: a área invisível cobre
   a calha inteira, a barra visível continua com 8px */
.it.agora .barra::before{content:'';position:absolute;top:-8px;bottom:-8px;left:-9px;right:-9px}
.it.agora .barra i{position:absolute;left:0;top:0;width:100%;
  border-radius:6px;background:var(--agora);
  height:calc(100% * var(--p,0));transition:height 1s linear}
/* durante o arraste o preenchimento acompanha o dedo sem o atraso de 1s */
body.scrub-item .it.agora .barra i{transition:none}
@media(hover:hover){.it.agora .barra:hover{filter:brightness(.94)}}
.it.agora .quando .h{color:var(--agora-ink)}
.it.agora .quando b{color:var(--agora-ink)}

/* Texto principal do card salientado: negrito, roxo do projeto, dois pontos a mais. */
.it.agora .fala{color:var(--agora-ink);font-weight:700;font-size:clamp(22px,2.6vw,28px)}
/* line-height mais fechado no texto ativo: 1.55–1.6 servia ao corpo cinza e
   pequeno; no negrito grande do card salientado sobrava como entrelinha de
   parágrafo em vez de manchete */
.it.agora .lamtxt{color:var(--agora-ink);font-weight:700;font-size:19.5px;line-height:1.3}
.it.agora .marca .txt{color:var(--agora-ink);font-weight:700;font-size:20px;line-height:1.3}
/* .it.agora.t-pergunta, sem espaço: as duas classes vivem no MESMO elemento.
   Com o descendente a regra nunca casava e a pergunta ativa caía para o
   tamanho genérico da marca — ficava menor que a pergunta inativa. */
.it.agora.t-pergunta .txt{font-weight:700;font-size:23px}
/* dentro do item ativo o realce interno (b/em) segue a mesma cor do texto —
   sem isso a ênfase "revertia" para preto e quebrava o roxo no meio da frase */
.it.agora .lamtxt em,.it.agora .lamtxt b,
.it.agora .marca .txt b,.it.agora .marca .txt strong{color:var(--agora-ink)}
/* a legenda "na tela" segue de apoio mesmo dentro do item ativo — uma variação
   mais discreta do roxo, para não competir com o texto principal acima */
.it.agora .onscreen{color:var(--agora-var)}
.it.agora .onscreen b{color:var(--agora-ink)}

/* chip da lâmina: preenchido na cor do card quando o item está valendo */
.it.agora .mt .num,
.it.agora .mt .num.natela{color:#fff;background:var(--agora);border-color:transparent;font-weight:700}
/* contornado quando a lâmina apenas segue na tela — a linha não a anuncia */
.mt .num.natela{background:transparent;border-color:var(--line);color:var(--muted)}

/* ---- card ativo de um tipo: assume a cor da própria etiqueta ----
   Cada tipo só declara suas quatro variáveis; as regras abaixo são escritas
   uma vez e leem delas. Assim a cor de um tipo se troca num lugar só, e um
   tipo novo entra apontando as variáveis — sem copiar bloco de regra.
   O AGORA sem tipo continua violeta de propósito: é o sinal de "ao vivo" do
   sistema, e precisa ser o mesmo em qualquer card que não tenha cor própria. */
.it.agora.t-pausa   {--tipo:var(--pausa);   --tipo-ink:var(--pausa-ink);   --tipo-soft:var(--pausa-soft);   --tipo-tint:var(--pausa-tint)}
.it.agora.t-pergunta{--tipo:var(--pergunta);--tipo-ink:var(--pergunta-ink);--tipo-soft:var(--pergunta-soft);--tipo-tint:var(--pergunta-tint)}
.it.agora.t-provoc  {--tipo:var(--provoc);  --tipo-ink:var(--provoc-ink);  --tipo-soft:var(--provoc-soft);  --tipo-tint:var(--provoc-tint)}
.it.agora.t-dinamica{--tipo:var(--dinamica);--tipo-ink:var(--dinamica-ink);--tipo-soft:var(--dinamica-soft);--tipo-tint:var(--dinamica-tint)}
.it.agora.t-alerta  {--tipo:var(--alerta);  --tipo-ink:var(--alerta-ink);  --tipo-soft:var(--alerta-soft);  --tipo-tint:var(--alerta-tint)}

.it.agora.t-pausa,.it.agora.t-pergunta,.it.agora.t-provoc,
.it.agora.t-dinamica,.it.agora.t-alerta{background-color:var(--tipo-soft)}
.it.agora.t-pausa .barra,.it.agora.t-pergunta .barra,.it.agora.t-provoc .barra,
.it.agora.t-dinamica .barra,.it.agora.t-alerta .barra{background:var(--tipo-tint)}
.it.agora.t-pausa .barra i,.it.agora.t-pergunta .barra i,.it.agora.t-provoc .barra i,
.it.agora.t-dinamica .barra i,.it.agora.t-alerta .barra i{background:var(--tipo)}

.it.agora.t-pausa .txt,   .it.agora.t-pausa .txt b,   .it.agora.t-pausa .txt strong,
.it.agora.t-pergunta .txt,.it.agora.t-pergunta .txt b,.it.agora.t-pergunta .txt strong,
.it.agora.t-provoc .txt,  .it.agora.t-provoc .txt b,  .it.agora.t-provoc .txt strong,
.it.agora.t-dinamica .txt,.it.agora.t-dinamica .txt b,.it.agora.t-dinamica .txt strong,
.it.agora.t-alerta .txt,  .it.agora.t-alerta .txt b,  .it.agora.t-alerta .txt strong{color:var(--tipo-ink)}

.it.agora.t-pausa .quando .h,   .it.agora.t-pausa .quando b,
.it.agora.t-pergunta .quando .h,.it.agora.t-pergunta .quando b,
.it.agora.t-provoc .quando .h,  .it.agora.t-provoc .quando b,
.it.agora.t-dinamica .quando .h,.it.agora.t-dinamica .quando b,
.it.agora.t-alerta .quando .h,  .it.agora.t-alerta .quando b{color:var(--tipo-ink)}

.it.agora.t-pausa .mt .num,   .it.agora.t-pausa .mt .num.natela,
.it.agora.t-pergunta .mt .num,.it.agora.t-pergunta .mt .num.natela,
.it.agora.t-provoc .mt .num,  .it.agora.t-provoc .mt .num.natela,
.it.agora.t-dinamica .mt .num,.it.agora.t-dinamica .mt .num.natela,
.it.agora.t-alerta .mt .num,  .it.agora.t-alerta .mt .num.natela{background:var(--tipo);border-color:transparent;color:#fff}

.it.agora.t-pausa .onscreen,.it.agora.t-pergunta .onscreen,.it.agora.t-provoc .onscreen,
.it.agora.t-dinamica .onscreen,.it.agora.t-alerta .onscreen{color:var(--tipo-ink);opacity:.72}

/* A dinâmica ganha um segundo sinal além da cor: a hachura diagonal que o
   intervalo usa no trilho. Textura, não cor — "aqui a turma trabalha".
   background-image separado do background-color: o atalho `background`
   apagaria a cor de base definida acima. */
.it.agora.t-dinamica{
  background-image:repeating-linear-gradient(-45deg,
    color-mix(in srgb,var(--tipo) 6%,transparent) 0 5px,
    transparent 5px 12px);
}
.it.agora.t-alerta .txt,
.it.agora.t-alerta .txt b,
.it.agora.t-alerta .txt strong,
.it.agora.t-alerta .quando .h,
.it.agora.t-alerta .quando b{color:var(--alerta-ink)}
.it.agora.t-alerta .mt .num,
.it.agora.t-alerta .mt .num.natela{background:var(--alerta);border-color:transparent;color:#fff}
.it.agora.t-alerta .onscreen{color:var(--alerta-ink);opacity:.72}
.it.agora.t-alerta{
  background-image:repeating-linear-gradient(-45deg,
    color-mix(in srgb,var(--alerta) 6%,transparent) 0 5px,
    transparent 5px 12px);
}
@supports not (color: color-mix(in srgb, red 10%, transparent)){
  .it.agora.t-dinamica,.it.agora.t-alerta{background-image:none}
}

/* Etiqueta ao vivo, no espírito do selo de transmissão do YouTube: pastilha
   vermelha com o ponto pulsando.

   visibility:hidden, não display:none — quando ela sumia do fluxo, a coluna
   dela na grade colapsava e a etiqueta de tipo da linha escorregava 84px para
   a direita. Escondida mas presente, a coluna mantém a largura e todas as
   etiquetas de todas as linhas caem no mesmo x. */
.agoratag{visibility:hidden}
/* sem margem: a etiqueta é um item da linha de meta, e qualquer margem
   inferior a desloca meio valor para cima no align-items:center — além de
   inflar a altura da própria linha */
.it.agora .agoratag{
  visibility:visible;display:inline-flex;background:var(--alerta);border-color:transparent;color:#fff;
  font-family:var(--body);
}
.it.agora .agoratag::before{content:'';width:8px;height:8px;border-radius:6px;background:#fff;animation:aovivo 1.8s ease-in-out infinite}
@keyframes aovivo{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.72)}}
@media(prefers-reduced-motion:reduce){.it.agora .agoratag::before{animation:none}}

/* ================= POSTURA / ENTREGA / CORTE ================= */
/* Postura e Entrega: mesmo cartão do corte (rótulo pequeno + corpo, cantos
   arredondados, fundo tingido) — mas em tom neutro. O vermelho do corte
   sinaliza risco; aqui é só apoio de condução, não um alerta. */
/* bloco-pai: separa o grupo do roteiro (margem generosa) e alinha os cartões
   lado a lado. flex, não grid — com um só cartão (só postura, ou só entrega)
   ele ocupa a largura inteira em vez de deixar metade vazia. */
.auxwrap{margin-top:72px;display:flex;gap:16px;align-items:stretch}
.aux{flex:1 1 0;padding:28px;border-radius:6px;background:var(--surface-2)}
.aux .cc{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.aux ul{list-style:none}
.aux li{font-size:16.5px;line-height:1.6;color:var(--text-2);padding:10px 0}
.aux li+li{border-top:1px solid var(--line)}
.aux li strong{color:var(--text);font-weight:600}

.lista{border-top:1px solid var(--line)}
.lista li{list-style:none;font-size:16.5px;line-height:1.6;color:var(--text-2);padding:14px 8px 14px 26px;
  border-bottom:1px solid var(--line-2);position:relative}
.lista li::before{content:'';position:absolute;left:8px;top:23px;width:5px;height:5px;border-radius:6px;background:var(--faint)}
.lista li strong{color:var(--text);font-weight:600}

/* sem contorno: o fundo já delimita o bloco, e a moldura vermelha competia
   com as etiquetas de alerta do próprio roteiro logo acima */
.corte{background:var(--alerta-soft)}
.corte .cc{color:var(--alerta)}
.corte p{font-size:16.5px;line-height:1.6;color:var(--text-2)}
.corte.never{background:var(--agora-soft)}
.corte.never .cc{color:var(--agora-ink)}

.atalhos{margin:44px 0 8px;padding-top:24px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint);line-height:1.6}

/* ================= DOCK =================
   Anterior colado na ponta esquerda, próximo na direita,
   transporte e sincronizar no centro. */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding:28px 24px calc(28px + env(safe-area-inset-bottom));
  background:var(--ink);border-top:1px solid var(--line);
  box-shadow:0 -12px 24px -20px rgba(0,0,0,.5);
}
/* Grade 1fr–auto–1fr, não flex com margin:auto: as duas setas têm larguras
   diferentes ("← Anterior" e "Próximo bloco →"), e margem automática
   centraliza no espaço livre entre elas, não no rodapé. Com as colunas
   laterais iguais, o transporte cai no centro real da barra. */
.dock .inner{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.dock .nav.next{background:var(--avancar);color:var(--avancar-fg)}
@media(hover:hover){.dock .nav.next:hover{background:var(--avancar);filter:brightness(1.06)}}
.dock .nav.prev{justify-self:start}
.dock .nav.next{justify-self:end}
/* o transporte inteiro no centro, entre as duas setas de bloco */
.dock .mid{display:flex;align-items:center;gap:12px}

/* ================= AVISO DE DESVIO ================= */
#agoraBar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--dock-h,84px) + 14px);z-index:46;
  display:flex;align-items:center;gap:14px;max-width:min(560px,calc(100vw - 28px));white-space:nowrap;
  background:var(--surface);border:2px solid var(--agora);border-radius:6px;padding:8px 8px 8px 20px;
  font-size:13px;color:var(--text-2);box-shadow:0 12px 38px rgba(0,0,0,.16);
}
#agoraBar[hidden]{display:none}
#agoraBar b{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis}
#agoraBar .pill{background:var(--agora);color:var(--agora-fg);flex-shrink:0}

/* ================= RESPONSIVO ================= */
@media(max-width:900px){
  .it{gap:18px}
  .it .quando{flex:0 0 70px;width:70px}
  .times{gap:20px;padding:0 8px}
}
@media(max-width:720px){
  .wrap{padding:0 18px}
  .appbar{padding:10px 18px 8px;gap:10px}
  /* seis alvos não cabem ao lado do título: a fileira dá lugar ao seletor,
     que diz a etapa e abre a lista das seis */
  .passos{display:none}
  .etapa-sel{display:block}
  .track{padding:0 18px 10px}
  .abacoes .statuspill{display:none}
  .back{flex:1 1 0;min-width:0}

  .seg{height:24px}
  .bbar-in{padding:0 18px 10px;gap:10px}
  .bbar-nome{font-size:15px}
  .bbar-tempo{display:none}
  .hero{padding:36px 0 28px}
  .hero .frase{padding:20px;margin-top:24px}
  .label{margin-top:40px}
  .row{gap:14px;padding:18px 16px;flex-wrap:wrap}
  .row .idx{width:26px;flex:0 0 26px;font-size:12px}
  .row .nome{flex:1 1 auto}
  .row .quando{width:100%;padding-left:40px;order:3}
  .row .seta{display:none}
  /* o painel vira tela cheia: não sobra viewport para caber ao lado do
     roteiro, então a lista de blocos só ganha sentido como página inteira */
  .drawer{width:100%;border-left:0}
  .drawer-scroll{padding:24px 18px 32px}
  .drawer-topo{padding:12px;gap:8px}
  /* no celular só o número cabe: o título da etapa aberta já está logo
     abaixo, em corpo grande — repeti-lo aqui seria redundante */
  .mod:not(.atual) .mod-t{display:none}
  .mod{padding:0 10px}
  .bhead{padding:24px 0 22px}
  .bhead h1{font-size:34px}
  /* espaço para um chip só: o tempo é o que se consulta em sala */
  .obj{font-size:16px}
  .it{gap:0;flex-direction:column;padding:20px 4px}
  .it .quando{flex:none;width:auto;padding-top:0;margin-bottom:12px}
  .it .quando .h,.it .quando b{display:inline}
  .it .quando b{margin-left:8px}
  /* a coluna de tempo virou linha: a etiqueta entra nela, à esquerda do relógio */
  .it .quando{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px}
  /* a coluna fixa não cabe em 375px: a grade vira flex. A etiqueta de ao vivo
     abre a linha e o título projetado desce para uma faixa própria. */
  .mt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
  .mt>*{grid-row:auto}
  .mt .tipo,.mt .num,.mt .onscreen,.mt .agoratag{grid-column:auto}
  /* aqui a linha é flex: um item só invisível deixaria um vão morto, então
     ele volta a sair do fluxo — não há coluna para preservar */
  .agoratag{display:none}
  .it.agora .agoratag{order:-1;display:inline-flex}
  .mt .onscreen{order:5;flex:1 1 100%;text-align:left;white-space:normal}
  .fala,.marca .txt,.t-pergunta .txt,.lamtxt{max-width:none}
  /* sangria igual ao padding da coluna no celular (18px), calha proporcional */
  .it.agora{padding:20px 16px 20px 26px;margin-left:-18px;margin-right:-12px}
  .it.agora .barra{left:9px;width:7px}
  /* lado a lado não cabe em 375px: os dois cartões voltam a empilhar */
  .auxwrap{margin-top:48px;flex-direction:column;gap:12px}
  .aux{padding:22px}
  .atalhos{display:none}

  /* Rodapé no celular: o transporte inteiro não cabe numa faixa ao lado das
     duas setas (só o bloco central já pede ~340px dos 347 disponíveis).
     Ele quebra em duas: relógio em cima, controles e setas embaixo — sem
     perder nenhum botão nem o arranjo − à esquerda / + à direita. */
  .dock{padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
  .dock .inner{grid-template-columns:1fr 1fr;row-gap:8px;gap:8px}
  .dock .mid{grid-column:1 / -1;grid-row:1;flex-wrap:wrap;justify-content:center;gap:8px 10px}
  .dock .mid .times{order:-1;flex:1 1 100%;justify-content:center}
  .dock .nav.prev{grid-column:1;grid-row:2;justify-self:stretch}
  .dock .nav.next{grid-column:2;grid-row:2;justify-self:stretch}
  .dock .nav{font-size:13.5px;padding:0 10px;min-width:0}
  .ctrl.lado .step{min-width:34px;padding:0 6px}
  .ctrl.lado .step svg{width:16px;height:16px}
  #agoraBar{font-size:12.5px}
}
@media(max-height:520px) and (orientation:landscape){
  .hero{padding:24px 0 16px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}