/* ============================================================================
   CADERNO DE ERRO — palette overrides on top of DS tokens
   "Vermelho de papel envelhecido": terracota / argila / borgonha apagado.
   Tudo o resto é creme, branco-papel, e cinza-tinta.
   ============================================================================ */

/* ── [TAMANHOTEXTO 05/set/2026] O TAMANHO DO TEXTO DO APP, POR PESSOA ────────
   Pedido do Massena (04/set), verbatim: «gostaria de uma fonte que eu consiga
   ler, pq ta' muito pequena». Mockup aprovado pelo Kadu em 05/set, verbatim
   «aprovado»: _mockups_todos/MOCKUP_TAMANHO_TEXTO_04SET.html.

   UMA variavel so'. Quem a escreve e' o `rpTextoEscalaAplicar()` do `app.jsx`,
   no `<html>`; quem a le' e' a regra logo abaixo.

   ⛔ 1 E' O PADRAO E ELE E' INERTE. `zoom: 1` e' o valor inicial da propriedade:
      enquanto ninguem mexer no controle, estas regras nao mudam UM PIXEL do app
      de hoje. Isso e' construcao, nao esperanca — e' o que permite entregar isto
      sem regressao para quem nunca abrir o controle.

   ⛔ POR QUE NAO E' NO `html` NEM NO `body`, que seria uma regra so': porque o
      proprio `styles.css:118` desta casa ja' mede que «a partir do zoom todo
      `position: fixed` desloca», e a linha 6376 mede que largura em porcentagem
      sob `zoom` rende `parent/zoom` no WebKit. O app tem 63 sobreposicoes
      `fixed; inset: 0` (medido em 05/set). Escalar a raiz as quebraria TODAS.
      Escalando so' o recipiente de conteudo, as sobreposicoes que viajam por
      `createPortal(ui, document.body)` — que sao a maioria delas, incluindo o
      scrim, a Central de Ajustes e o cais global — ficam FORA do zoom e seguem
      exatas.

   ⛔ E A BARRA DO TOPO FICA DE FORA DE PROPOSITO. E' o desenho do mockup: la',
      a `.topo` (que carrega o proprio controle) nao escala e so' o `.app`
      escala. Escalar a barra faria os botoes A−/A+ fugirem de baixo do cursor a
      cada clique, e as `@media` de largura NAO acompanham `zoom` — a barra
      estouraria na horizontal sem nenhuma regra estreita para socorre-la.

   ⚠️ COBERTURA MEDIDA, E ELA NAO E' TOTAL. As 40 montagens de `.app-shell`
      foram inventariadas em 05/set. A lista abaixo alcanca as que carregam o
      conteudo por `.content`, `.app-main`, `<main>`, `.body`, `.solve-shell`,
      `.pda-tela` e `.ponte-tela`. FICAM DE FORA cinco telas cuja raiz e' um
      `<div>` com style inline e NENHUMA classe — caderno-mneumonico,
      caderno-compilados, manual, caderno-bizu e o MapaFuncoes. Dar classe a
      elas e' mudanca nos arquivos delas, que nao sao desta faina; fica escrito
      aqui para a proxima. Nada quebra nelas: elas so' nao acompanham ainda.

   ⚠️ Os dois `<main>` de tela cheia do `kit-components.jsx` (a Gestao e o
      Leitor de Revisoes) sao `position: fixed` e por isso saem da regra pelo
      `:not(...)`: sao exatamente o caso que a nota da linha 118 descreve. */
:root { --rp-texto-escala: 1; }

.app-shell > .content,
.app-shell > .app-main,
.app-shell > .body,
.app-shell > .solve-shell,
.app-shell > .pda-tela,
.app-shell > .ponte-tela,
.app-shell > .cad-faixa,
.app-shell > main:not([data-rp-gestao-shell]):not([data-rp-leitor-revisoes-shell]):not(.meu-painel-stage) {
  zoom: var(--rp-texto-escala, 1);
}
/* [PASSADICOZOOM_30SET] O palco do Passadico (.meu-painel-stage, meu-painel.jsx) sai do zoom pelo mesmo motivo da Gestao e do
   Leitor de Revisoes: sob zoom o WebKit encolhe o iframe de largura 100% (escala 0.9 → o escuro termina em 90% da janela e
   sobra faixa clara a direita e embaixo). O Passadico tem o proprio tamanho de texto dentro do iframe. */

/* O controle «A− 100% A+» na barra do topo. Sobrio, escuro e dourado — a mesma
   linguagem do `.topbar-ia-entry` logo acima, que e' o padrao da barra. */
.tt-escala {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid rgba(224,178,106,.26); border-radius: 999px;
  background: rgba(224,178,106,.06); padding: 2px 4px;
}
.tt-escala button {
  min-width: 28px; height: 26px; padding: 0 6px;
  border: 0; border-radius: 999px; background: transparent;
  color: rgba(255,255,255,.78); font: inherit; font-size: 12px; font-weight: 800;
  cursor: pointer; transition: background 120ms, color 120ms;
}
.tt-escala button:hover:not(:disabled) { background: rgba(224,178,106,.16); color: #f2cf9c; }
.tt-escala button:disabled { opacity: .38; cursor: default; }
.tt-escala .tt-pct {
  min-width: 40px; text-align: center;
  font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.66);
}
.tt-escala .tt-padrao { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.55); }

/* ── [HEADERZOOMSAIR_07SET 07/set/2026] O MENU DO AVATAR ─────────────────────
   Estas regras substituem os objetos de estilo em linha que o menu do perfil
   carregava dentro do `kit/kit-components.jsx`. Os VALORES sao os mesmos, byte
   a byte — o fundo `#202226`, a borda de 14% de branco, o raio de 10, a sombra,
   o `z-index: 90`, os 40px de linha. Nada de aparencia mudou nesta mudanca.

   ⚠️ POR QUE SAIU DE ESTILO EM LINHA. Estilo em linha ganha de qualquer
   seletor sem `!important`, entao enquanto o menu estava escrito assim NENHUMA
   regra de `html[data-toque]` conseguia alcanca-lo — o iPad ficava preso ao
   alvo de 40px do Mac, e o unico jeito de corrigir seria salpicar `!important`
   no `toque-mode.css`. Com classe, o alvo de 44px do iPad e' uma regra normal,
   escrita onde a casa manda escrever comportamento de toque. */
.tb-perfil { position: relative; display: inline-flex; }
.tb-perfil-avatar {
  border: 0; padding: 0; margin: 0; background: transparent;
  cursor: pointer; border-radius: 999px;
}
.tb-perfil-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 208px; padding: 6px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  background: #202226; box-shadow: 0 14px 34px rgba(0,0,0,.35);
  z-index: 90;
}
.tb-perfil-item {
  width: 100%; min-height: 40px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 0; border-radius: 7px; background: transparent;
  color: rgba(255,255,255,.9); font: inherit; text-align: left; cursor: pointer;
  transition: background 120ms;
}
.tb-perfil-item:hover { background: rgba(255,255,255,.07); }
.tb-perfil-sep {
  height: 1px; margin: 5px 4px;
  background: rgba(255,255,255,.12);
}
/* O RODAPE DO ZOOM (variante B). Nao e' `role="menuitem"` e nao fecha o menu ao
   ser clicado: mexer na letra so' faz sentido vendo o texto atras mudar. */
.tb-perfil-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 7px 6px;
}
.tb-perfil-rodape-rot {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255,255,255,.42);
  white-space: nowrap;
}
/* «Sair» e' o unico item destrutivo do menu e o unico que muda de cor. Discreto
   em repouso — nao e' um alarme —, vermelho so' quando a mao ja' esta nele. */
.tb-perfil-sair { color: rgba(255,255,255,.72); }
.tb-perfil-sair:hover { background: rgba(224,110,110,.14); color: #f0a3a3; }

/* A pilula do zoom dentro do menu: mesma peca, sem a moldura dourada que fazia
   sentido contra o fundo da barra e vira ruido dentro de um cartao ja' bordado. */
.tt-escala--menu { border-color: transparent; background: rgba(255,255,255,.05); }

:root {
  /* ── Page surfaces ── */
  --paper:        var(--c-f4efe6);          /* warm cream (override) */
  --paper-2:      var(--c-ece6da);          /* a touch darker */
  --paper-rule:   var(--c-e0d8c7);          /* hairline on cream */
  --surface:      var(--c-fcfaf6);          /* "white" cards — slightly warm */
  --card:         var(--c-fcfaf6);

  /* ── Ink (text + neutrals) — warm graphite ── */
  --ink-50:   var(--c-f4efe6);
  --ink-100:  var(--c-eae3d4);
  --ink-200:  var(--c-d8cfbc);
  --ink-300:  var(--c-b6ac97);
  --ink-400:  var(--c-8e8775);
  --ink-500:  var(--c-6f695b);
  --ink-600:  var(--c-524d43);
  --ink-700:  var(--c-3a352d);
  --ink-800:  var(--c-25221c);
  --ink-900:  var(--c-1a1813);
  --text:     var(--c-1a1813);
  --muted:    var(--c-6f695b);
  --border:   var(--c-e0d8c7);

  /* ── Navy retained for topbar / authority touches ── */
  --primary-50:  var(--c-eceef2);
  --primary-100: var(--c-d7dbe4);
  --primary-200: var(--c-b0b8c9);
  --primary-300: var(--c-7b8497);
  --primary-600: var(--c-2d405c);
  --primary-700: var(--c-1f2e45);
  --primary-800: var(--c-14213a);
  --primary-900: var(--c-0e1a2e);
  --primary:     var(--c-2d405c);

  /* ── CE accent: muted terracotta / clay / borgonha ── */
  --ce-50:   var(--c-f8efe7);       /* page-wide warm wash */
  --ce-100:  var(--c-f0ddd0);       /* soft clay */
  --ce-200:  var(--c-e2bfab);       /* clay rim */
  --ce-300:  var(--c-c99883);
  --ce-500:  var(--c-b36b57);       /* the brand color of the module — muted terra */
  --ce-600:  var(--c-9a5240);
  --ce-700:  var(--c-7a3b2c);       /* deep clay-burgundy, used sparingly */
  --ce-800:  var(--c-5a2a1f);

  /* Map the DS danger tokens to muted clay so the whole kit goes calm */
  --danger:      var(--c-9a5240);
  --danger-50:   var(--c-f8efe7);
  --danger-100:  var(--c-f0ddd0);
  --danger-600:  var(--c-9a5240);
  --danger-700:  var(--c-7a3b2c);
  --ring-danger: 0 0 0 3px rgba(154, 82, 64, 0.20);

  /* [PILULAV2_TELA_E 04/set] ALERTA — o vermelho FORTE, que o --danger acima
     deliberadamente nao e. Usado pela paleta 1 do carimbo (a mais forte) na
     pilha de comentarios do card. Vira sozinho no escuro pelo primitivo. */
  --alerta-700: var(--c-a3121f);
  --alerta-600: var(--c-c0392b);
  --alerta-50:  var(--c-fbe9e9);

  /* Success / warning — also dialed down */
  --success-50:  var(--c-e9efe6);
  --success-100: var(--c-d3decc);
  --success-600: var(--c-557a4a);
  --success-700: var(--c-3f5c36);
  --success:     var(--c-557a4a);

  --warning-50:  var(--c-f5edd8);
  --warning-100: var(--c-ecddb3);
  --warning-600: var(--c-9b7a2c);
  --warning-700: var(--c-735718);
  --warning:     var(--c-9b7a2c);

  /* Gold accent — dialed slightly */
  --gold-50:   var(--c-f5ebd2);
  --gold-100:  var(--c-ead8a6);
  --gold-300:  var(--c-d9b86e);
  --gold-500:  var(--c-b68a35);
  --gold-600:  var(--c-93701f);
  --gold-700:  var(--c-6a5012);

  /* Shadows: warmer (less blue), softer */
  --shadow-xs: 0 1px 1px rgba(60, 40, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.06), 0 1px 1px rgba(60, 40, 20, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(60, 40, 20, 0.08), 0 2px 4px -1px rgba(60, 40, 20, 0.05);
  --shadow-lg: 0 12px 28px -6px rgba(60, 40, 20, 0.12), 0 4px 10px -2px rgba(60, 40, 20, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(60, 40, 20, 0.18);

  --ring: 0 0 0 3px rgba(179, 107, 87, 0.20);
}

/* ============================================================================
   BASE
   ============================================================================ */

* { box-sizing: border-box; }
html, body, #root {
  margin: 0; padding: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, textarea, select { font-family: inherit; color: inherit; }

/* [TOQUEALVO 07/ago/2026] AUTO-ZOOM DO iOS — 16px e' o numero exato, nao estetica.
   Medido por varredura das 17 telas .jsx vivas (o `_snap_kw_acervoxq.jsx` fica de
   fora, e' instantaneo): 405 tags <input>/<textarea>/<select>, das quais **319 nao
   declaram fontSize nenhum** e caem no default do WebKit para controle de
   formulario (~13,3px). O iOS AMPLIA a pagina sozinho ao focar campo com fonte
   < 16px, e a partir do zoom todo `position: fixed` desloca — e' o gatilho que
   quebra a coordenada da Pencil sem o usuario pedir nada.

   `max(16px, 1em)` so' SOBE: quem ja' herda mais que 16 fica como esta'.
   ⚠️ NAO resolve os outros 86 campos que trazem `fontSize` INLINE (73 deles
   abaixo de 16): estilo inline vence folha externa por definicao. Para esses
   vale a regra com `!important` do `estudo/toque-mode.css`, que so' liga no
   tablet. Consertar na origem exige mexer no .jsx, e nao e' desta frente.
   ⚠️ FALTA PRINT: no desktop os 319 sobem de ~13,3px para 16px. O handoff diz
   que "so' melhora a legibilidade"; isso e' leitura da cascata, nao medicao.
   Se o print mostrar painel denso estourando, a versao conservadora e' envolver
   esta regra em `@media (pointer: coarse)` — o auto-zoom so' existe no iOS. */
input, textarea, select { font-size: max(16px, 1em); }
button { background: none; border: none; cursor: pointer; padding: 0; }

/* ── App shell ── */
.app {
  display: grid;
  grid-template-rows: 56px 1fr;
  min-height: 100vh;
}

/* ── Topbar ── */
.topbar {
  background: var(--primary-900);
  color: #fff;
  padding: 0 24px;
  display: flex; align-items: center; gap: 20px;
  position: sticky; top: 0; z-index: 10;
}
.topbar-brand {
  display: flex; align-items: center;
  /* [PRUMO_F1 06/ago] gap 0 e' DECLARADO, nao ausente. O lockup virou UMA peca
     e o vao mora dentro do SVG (x=54). Apagar a linha NAO resolveria: o
     kit/kit.css:52 declara `gap:10px` no mesmo seletor, e sem esta declaracao
     ele passaria a valer -- o vao voltaria com 10 px em vez de 9. */
  gap: 0;
  cursor: pointer;
  /* a barra e SEMPRE escura, nos tres temas: o cobre claro serve sempre aqui */
  color: var(--marca-cobre);
}

/* ── Tonalidade da marca, dentro do menu de aparência [PRUMOV03 06/ago] ───── */
.rp-marca-sep { height: 1px; margin: 6px 4px; background: var(--paper-rule); }
.rp-marca-titulo {
  padding: 2px 9px 6px; font-size: 11.5px; color: var(--ink-500);
}
.rp-marca-tons { display: flex; gap: 8px; padding: 0 9px 6px; }
.rp-marca-bola {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--paper-rule); background: #0C0806;
  display: inline-flex; align-items: center; justify-content: center;
}
.rp-marca-bola::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tom-luz) 50%, var(--tom-sombra) 50%);
}
.rp-marca-bola[data-marca-tom="ouro"]      { --tom-luz: #dcb388; --tom-sombra: #a37c56; }
.rp-marca-bola[data-marca-tom="champagne"] { --tom-luz: #e6caaa; --tom-sombra: #b09373; }
.rp-marca-bola[data-marca-tom="rose"]      { --tom-luz: #e0a996; --tom-sombra: #a87160; }
.rp-marca-bola[data-marca-tom="platina"]   { --tom-luz: #d1d5db; --tom-sombra: #6b7280; }
.rp-marca-bola.is-on { border-color: var(--marca-cobre); box-shadow: 0 0 0 2px rgba(220,179,136,.25); }
/* [PRUMO_F1 06/ago/2026] O `.wordmark` MORREU aqui e nao volta.
   A palavra "RUMO" nao e' mais uma <div> ao lado do simbolo: virou o <text>
   x=54 y=86 size=24 letter-spacing=6 DENTRO do <svg> do LogoLockup
   (kit/kit-components.jsx). Corpo, entreletra e vao passaram a escalar junto
   com o simbolo, que era exatamente o que se perdia ao separa-los.
   Quem quiser mexer no tamanho da marca mexe no `h` do LogoLockup. */
/* [PRUMO_F2 06/ago/2026] O LOCKUP EM FUNDO CLARO.
   `--marca-cobre` e' a LUZ do prumo: sobre creme ela reprova contraste, e o DS
   ja' criou `--marca-cobre-escuro` justamente para isso (ds/colors_and_type.css:194).
   Em fundo claro o lockup inteiro -- simbolo E palavra -- cai para UMA cor. E' o
   mesmo principio da trava de tamanho do LogoMark: quando a faceta nao se le,
   ela nao finge que se le.
   ⚠️ A TopBar NAO entra nisto — ela e' escura nos tres temas e passa
   `fundo="escuro"`, que reempata a especificidade e devolve o cobre claro.
   ⚠️ Desvio herdado da F3F5 e' repetido aqui de proposito: `--marca-cobre-escuro`
   tem UM valor no :root e NAO acompanha as 4 tonalidades. No claro, portanto, o
   lockup nao muda de tom junto com a marca. Trocar isso pede 4 valores novos, que
   sao decisao do Kadu, nao minha. */
.prumo-lockup { --lk-luz: var(--marca-cobre-escuro); --lk-sombra: var(--marca-cobre-escuro); }
html[data-theme="dark"] .prumo-lockup { --lk-luz: var(--marca-cobre); --lk-sombra: var(--marca-sombra); }
.prumo-lockup-escuro { --lk-luz: var(--marca-cobre); --lk-sombra: var(--marca-sombra); }

.topbar-divider { height: 22px; width: 1px; background: rgba(255,255,255,0.12); }
.topbar-nav {
  display: flex; gap: 2px;
}
.topbar-nav a {
  padding: 6px 12px; border-radius: var(--r-md);
  color: rgba(255,255,255,0.72); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background 120ms;
}
.topbar-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.topbar-nav a.active {
  background: rgba(255,255,255,0.10); color: #fff; font-weight: 600;
}
.topbar-nav a.active.ce {
  background: var(--ce-500); color: #fff;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-uid {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.68);
  background: rgba(255,255,255,0.05); padding: 4px 8px; border-radius: var(--r-sm);
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold-500); color: var(--primary-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; flex-shrink: 0;
}
.btn-icon-tb {
  width: 30px; height: 30px; border-radius: var(--r-md);
  color: rgba(255,255,255,0.78);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms;
}
.btn-icon-tb:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ── Body layout: 3-column (rail + main + nav) ── */
.body {
  display: grid;
  grid-template-columns: 280px 1fr 240px;
  min-height: 0;
}
.body.body-narrow { grid-template-columns: 1fr; }
@media (max-width: 1280px) {
  .body { grid-template-columns: 240px 1fr 220px; }
}
@media (max-width: 1080px) {
  .body { grid-template-columns: 240px 1fr; }
  .body .right-nav { display: none; }
}

/* ── Left rail (hierarchy) ── */
.rail {
  background: var(--paper-2);
  border-right: 1px solid var(--paper-rule);
  padding: 18px 14px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.rail-section {
  display: flex; flex-direction: column; gap: 6px;
}
.rail-heading {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-500);
  padding: 0 6px;
}
.rail-node {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-700);
  font-size: 13px;
  transition: background 120ms;
  user-select: none;
  text-align: left;
  width: 100%;
}
.rail-node:hover { background: rgba(154, 82, 64, 0.06); }
.rail-node.active {
  background: rgba(154, 82, 64, 0.10);
  color: var(--ce-700);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--ce-500);
}
.rail-node .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-node .count {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-500);
  background: var(--paper); padding: 1px 7px; border-radius: var(--r-pill);
  flex-shrink: 0;
}
.rail-node.active .count { background: var(--ce-100); color: var(--ce-700); }
.rail-children { padding-left: 14px; display: flex; flex-direction: column; gap: 2px; border-left: 1px dashed var(--paper-rule); margin-left: 12px; }
.rail-node.level-1 { font-size: 12.5px; color: var(--ink-600); padding: 5px 8px; }
.rail-node.level-2 { font-size: 12px; color: var(--ink-500); padding: 4px 8px; }
.rail-node.level-2.active { background: rgba(154, 82, 64, 0.08); }
.rail-node.drag-over {
  background: rgba(154, 82, 64, 0.18) !important;
  outline: 2px dashed var(--ce-500);
  outline-offset: -2px;
  color: var(--ce-700);
}

/* err-card draggable cursor */
.err-card[draggable] { cursor: grab; }
.err-card[draggable]:active { cursor: grabbing; opacity: 0.75; }
.kanban-card[draggable] { cursor: grab; }
.kanban-card[draggable]:active { cursor: grabbing; opacity: 0.75; }

/* Editable rail bits */
.rail-node {
  position: relative;
}
.rail-actions {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  margin-right: 4px;
}
.rail-act {
  width: 20px; height: 20px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  color: var(--ink-500);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 100ms;
  padding: 0;
}
.rail-act:hover {
  background: var(--ce-50);
  border-color: var(--ce-200);
  color: var(--ce-700);
}
.rail-act.danger:hover {
  background: var(--ce-100);
  border-color: var(--ce-300);
  color: var(--ce-700);
}
.rail-rename {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: inherit;
  color: var(--ink-900);
  background: var(--surface);
  border: 1.5px solid var(--ce-500);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  outline: none;
}
.rail-node-add {
  color: var(--ink-500);
  font-style: italic;
  border: 1px dashed var(--ink-200);
  margin-top: 6px;
}
.rail-node-add:hover {
  border-color: var(--ce-300);
  color: var(--ce-700);
  background: var(--ce-50);
  font-style: normal;
}
.rail-empty {
  font-size: 12px;
  color: var(--ink-500);
  padding: 12px 8px;
  font-style: italic;
}
.rail-link {
  color: var(--ce-700);
  text-decoration: underline;
  font-style: normal;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

/* ── Main column ── */
.main { padding: 28px 36px 60px; overflow-y: auto; min-width: 0; }
.main-inner { max-width: 1080px; margin: 0 auto; }
.main-narrow { max-width: 820px; margin: 0 auto; padding: 28px 36px 60px; }

/* ── Header ── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
}
.overline {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ce-500);
}
.page-title {
  font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.12; margin: 4px 0 6px;
  color: var(--ink-900);
  font-family: var(--font-sans);
}
.page-sub {
  font-size: 14px; color: var(--ink-500);
  max-width: 56ch;
}

/* ── CE hero strip — the only place we use the terra tint as a fill ── */
.ce-hero {
  background: linear-gradient(180deg, var(--ce-50) 0%, transparent 100%);
  border: 1px solid var(--ce-100);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px; align-items: center;
  margin-bottom: 22px;
}
.ce-hero .lead {
  font-family: var(--font-serif);
  font-size: 18px; line-height: 1.5;
  color: var(--ink-800);
  max-width: 60ch;
}
.ce-hero .lead strong { color: var(--ce-700); font-weight: 600; }

/* ── Mini-stat row ── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
.stat-cell {
  padding: 14px 18px;
  border-right: 1px solid var(--paper-rule);
  display: flex; flex-direction: column; gap: 3px;
}
.stat-cell:last-child { border-right: none; }
.stat-cell .lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-500);
}
.stat-cell .val {
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink-900); line-height: 1.1;
}
.stat-cell .val.ce { color: var(--ce-700); }
.stat-cell .val .suffix { font-size: 14px; font-weight: 600; color: var(--ink-400); margin-left: 2px; }
.stat-cell .sub { font-size: 11px; color: var(--ink-500); }

/* ── Chips row (filter) ── */
.chips {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-600);
  cursor: pointer;
  transition: all 120ms;
}
.chip:hover { border-color: var(--ink-300); color: var(--ink-800); }
.chip.active {
  background: var(--ce-700);
  color: #fff;
  border-color: var(--ce-700);
}
.chip .ct {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--paper-2);
  color: var(--ink-500);
  padding: 1px 7px; border-radius: var(--r-pill);
}
.chip.active .ct { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.92); }

/* ── Section break ── */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 28px 0 12px;
}
.section-head h2 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink-900); margin: 0;
}
.section-head .meta {
  font-size: 12px; color: var(--ink-500);
}

/* ── Error card (the main artefact) ── */
.err-card {
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 16px;
  transition: box-shadow 140ms, border-color 140ms;
}
.err-card:hover {
  border-color: var(--ink-200);
  box-shadow: var(--shadow-md);
}
.err-card + .err-card { margin-top: 10px; }

.err-card.compact { padding: 12px 16px; grid-template-columns: 22px 1fr auto; gap: 12px; }

/* The "X" mark — the only saturated red moment, and tiny */
.err-mark {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ce-50);
  border: 1.5px solid var(--ce-200);
  color: var(--ce-700);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
}
.err-mark.dominated {
  background: var(--success-50);
  border-color: var(--success-100);
  color: var(--success-700);
}

.err-card .meta-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 6px;
  font-size: 11px;
}
.err-card .stem {
  font-family: var(--font-serif);
  font-size: 16px; line-height: 1.55;
  color: var(--ink-800);
  margin: 0 0 10px;
}
.err-card.compact .stem { font-size: 14.5px; line-height: 1.5; margin-bottom: 6px; }
.err-card .stem-truncated {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.err-foot {
  display: flex; align-items: center; gap: 16px;
  font-size: 12px; color: var(--ink-500);
}
.err-foot .ans {
  font-family: var(--font-mono);
  font-size: 12px;
}
.err-foot .ans .wrong { color: var(--ce-700); font-weight: 600; }
.err-foot .ans .right { color: var(--success-700); font-weight: 600; }
.err-foot .sep { width: 3px; height: 3px; background: var(--ink-300); border-radius: 50%; }

.err-card .side {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 6px;
  min-width: 96px;
  text-align: right;
}
.attempt-bar {
  display: inline-flex; gap: 3px; align-items: center;
}
.attempt-dot {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--ink-200);
}
.attempt-dot.miss { background: var(--ce-500); }
.attempt-dot.hit { background: var(--success-600); }

/* ── Tags (lighter / less saturated) ── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.tag-module {
  background: transparent;
  color: var(--ink-700);
  border-color: var(--ink-200);
  text-transform: uppercase;
}
.tag-source {
  background: var(--paper-2);
  color: var(--ink-600);
  font-weight: 600; letter-spacing: 0;
}
.tag-original {
  background: transparent;
  color: var(--gold-700);
  border-color: var(--gold-100);
  font-weight: 700; letter-spacing: 0;
}
.tag-type {
  background: transparent;
  color: var(--ink-500);
  font-weight: 500; letter-spacing: 0;
  border-color: var(--paper-rule);
}
.tag.code {
  background: transparent; color: var(--ink-400);
  font-family: var(--font-mono); font-weight: 500; letter-spacing: 0;
  padding: 1px 4px; border: none;
}
.tag-reinc {
  background: var(--ce-50);
  color: var(--ce-700);
  border-color: var(--ce-200);
  font-weight: 700; letter-spacing: 0;
}
.tag-dom {
  background: var(--success-50);
  color: var(--success-700);
  border-color: var(--success-100);
  font-weight: 700; letter-spacing: 0;
}

/* ── Buttons (DS-aligned, calmer) ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-md);
  font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms, transform 80ms;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ce-700);
  color: #fff;
}
.btn-primary:hover { background: var(--ce-800); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary {
  background: var(--surface);
  color: var(--ink-800);
  border-color: var(--ink-200);
}
.btn-secondary:hover { background: var(--paper-2); border-color: var(--ink-300); }
.btn-ghost {
  background: transparent;
  color: var(--ink-600);
  padding: 7px 10px;
}
.btn-ghost:hover { background: var(--paper-2); color: var(--ink-900); }
.btn-ghost.ce { color: var(--ce-700); }
.btn-ghost.ce:hover { background: var(--ce-50); }
.btn-lg { padding: 11px 20px; font-size: 14px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.icon-btn {
  width: 30px; height: 30px;
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-500);
  cursor: pointer;
  transition: background 120ms;
}
.icon-btn:hover { background: var(--paper-2); color: var(--ink-800); }

/* ── Card primitives ── */
.card {
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-lg);
}
.card-pad { padding: 22px 24px; }

/* ── [Item 1] Seleção de texto liberada no conteúdo ── */
.card, .card-pad, .card-padded, .modal-body,
.kanban-card, .kanban-card .stem,
.err-card, .err-card .stem, .err-card .stem-truncated,
.question-card, .question, .alt, .alt-text {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* Copiar/colar liberado em TODO o conteúdo de estudo — caderno normal (.solve-grid)
   E caderno de erro / revisão (.review-grid) — pra pesquisar sobre a questão. */
.solve-grid, .solve-grid *,
.review-grid, .review-grid *,
.review-main, .review-main * {
  -webkit-user-select: text !important;
  user-select: text !important;
}
/* ...menos os controles clicáveis e o navegador de questões */
.solve-grid button, .review-grid button, .review-main button,
.review-nav, .review-nav *, .nav-cell, .nav-grid, .nav-grid * {
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* ── Heatmap (module breakdown) ── */
.heatmap-row {
  display: grid;
  grid-template-columns: 180px 1fr 64px;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--paper-rule);
  font-size: 13px;
}
.heatmap-row:first-child { border-top: none; }
.heatmap-row .mod { font-weight: 600; color: var(--ink-800); font-size: 13px; }
.heatmap-row .pct {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  text-align: right;
  color: var(--ink-700);
}
.heatmap-bar {
  height: 8px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  position: relative;
  overflow: hidden;
}
.heatmap-bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--ce-500);
  opacity: 0.9;
  border-radius: var(--r-pill);
}
.heatmap-bar .fill.low { background: var(--ce-200); }
.heatmap-bar .fill.med { background: var(--ce-300); }
.heatmap-bar .fill.high { background: var(--ce-500); }
.heatmap-bar .fill.crit { background: var(--ce-700); }

/* ── Right nav (question navigator on home) ── */
.right-nav {
  background: var(--paper-2);
  border-left: 1px solid var(--paper-rule);
  padding: 18px 14px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  position: sticky;
  top: 56px;
  align-self: start;
  max-height: calc(100vh - 56px);
}
.right-nav-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--paper-rule);
}
.right-nav-head .lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-600);
}
.right-nav-head .sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-500);
}

/* nav-cell for HOME variant — status semantics */
.nav-cell.s-novo {
  /* default: paper bg, faded text */
}
.nav-cell.s-novo.visited {
  background: var(--paper-2);
  color: var(--ink-700);
  border-color: var(--ink-200);
}
.nav-cell.s-reincidente {
  background: var(--ce-500);
  color: #fff;
  border-color: var(--ce-500);
}
.nav-cell.s-quase {
  background: var(--warning-100);
  color: var(--warning-700);
  border-color: var(--warning-100);
}
.nav-cell.s-dominado {
  background: var(--success-600);
  color: #fff;
  border-color: var(--success-600);
}
/* [TINTAGLOBAL 12/ago/2026 · etapa 1] `position: relative` existe por UMA
   razao, a mesma do `.content-solve` de ontem: a camada de tinta e' filha desta
   caixa e se posiciona por ela. Sem isto ela se penduraria no primeiro
   ancestral posicionado — que aqui nao existe — e acabaria medindo a JANELA em
   vez do CONTEUDO, que e' exatamente o defeito que a tinta veio tirar.
   Nao muda leiaute de ninguem: `position: relative` sem deslocamento nao move
   nada, e o `.solve-shell` e' usado por UM arquivo so' (review.jsx) — medido,
   nao suposto: `grep -n solve-shell *.jsx kit/*.jsx` devolve so' review.jsx:304. */
.solve-shell {
  position: relative;
  background: var(--paper);
  min-height: calc(100vh - 56px);
  padding: 30px 0 60px;
}

/* ── Estudar / Solve screen — main + question navigator ── */
/* [BARRAUNICA 08/ago/2026] A GRADE DEIXOU DE MORAR NUMA FAIXA DE 1180px.
   O Kadu, com print, em 08/ago: "a questão podia aproveitar melhor o espaço".
   Ela ficava espremida à esquerda com um vazio enorme à direita porque a grade
   inteira era uma faixa centrada de 1180 e a coluna de leitura se centrava
   DENTRO dela. Agora a grade ocupa a largura real: coluna 1 pega o que sobra,
   `.solve-main` (max-width 820 + margin-inline auto, ~linha 3148) centra a
   LEITURA dentro dela, e o trilho fica ENCOSTADO na borda direita — por isso
   `padding-right: 0`. O teto de legibilidade continua sendo 820px, que é
   decisão de leitura e não de dispositivo (CLAUDE.md). */
.solve-grid {
  max-width: none;
  margin: 0;
  padding: 0 0 0 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cais-w);
  gap: 20px;
  align-items: start;
}
/* [CAIS 08/ago/2026] A segunda coluna deixou de ser o trilho de 220px e virou
   o CAIS, de 46px. Some tambem o `.review-nav { display: none }` que existia
   aqui: o caderno nao e mais uma coluna que disputa largura -- ele e um painel
   dentro da lamina do cais, e escondelo por largura apagaria a grade inteira. */
@media (max-width: 1080px) {
  .solve-grid { grid-template-columns: minmax(0, 1fr) var(--cais-w); }
}
/* [PALETAFIXA 27/jul + TELAIPADRESPIRA 07/ago · ENCERRADOS em BARRAUNICA
   08/ago/2026] Aqui moravam os recuos de 86px e o par assimétrico 86/36 lido de
   `data-paleta-lado`. Os três existiam por UMA razão só: a paleta de estudo
   flutuava sobre esta faixa de largura e caía em cima do painel da direita. A
   paleta deixou de flutuar (virou conteúdo do painel Ajustes), o atributo
   deixou de ser escrito, e o recuo perdeu a causa. Removido, não neutralizado:
   regra morta que ninguém entende é o que faz a próxima pessoa recuar de novo
   "por segurança". */
.solve-main { min-width: 0; }
/* [RODAPESOBRE 27/jul] A barra Anterior/Próxima é sticky no fim da coluna e ficava
   por cima do último bloco do gabarito — na prática, cobrindo a Pegadinha. Reserva a
   altura dela no fim do conteúdo: agora dá pra rolar até o fim e ler tudo. */
.solve-main { padding-bottom: 84px; }

/* [CAIS 08/ago/2026] AQUI MORAVAM `.solve-grid.margem-aberta` e o popover
   `.caderno-peek-*`. Os dois existiam pelo mesmo motivo: a margem abria uma
   segunda coluna de 264px e o `.review-nav` de 220px nao cabia junto, entao o
   caderno era escondido e devolvido dentro de um popover. Com o cais, margem e
   caderno passaram a ser dois PAINEIS DA MESMA SUPERFICIE, um por vez -- nao ha
   mais disputa de largura para arbitrar, e as duas regras viraram remendo de um
   problema que deixou de existir. O JSX que as acendia saiu junto, no mesmo
   lote (kit-screens.jsx: `margemAberta` na classe do .solve-grid e o ramo
   `caderno-peek-anchor`). */

/* ── [CETELA 08/ago/2026] Ajuda no Mac: lâmina que entra e empurra a leitura.
   O iPad não passa por esta geometria: data-toque o põe em fluxo normal na
   folha exclusiva estudo/toque-mode.css. */
.solve-grid.duvida-lamina {
  max-width: 1304px;
  /* [CAIS 08/ago/2026] +46px: a coluna da direita agora carrega a lamina E o
     trilho do cais lado a lado (.cais-doca). A lamina em si continua com os
     mesmos 320-360px de antes -- so a coluna que a contem ficou maior. */
  grid-template-columns: minmax(0, 820px) minmax(366px, 406px);
  gap: 22px;
}
.solve-grid.duvida-lamina .solve-main {
  transform: translateX(-6px);
  transition: transform 180ms ease;
}
.duvida-panel {
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-lg);
  padding: 16px;
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.duvida-panel-lamina {
  animation: duvida-lamina-entra 180ms ease-out both;
}
.duvida-panel-workspace {
  position: static;
  top: auto;
  width: 100%;
  max-width: 1120px;
  min-height: 560px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Central de IA: é uma tela do app, não popover, modal ou lâmina flutuante. */
.ia-hub-shell { min-height: 100vh; background: var(--bg); }
.topbar-ia-entry {
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 10px;
  border:1px solid rgba(224,178,106,.26); border-radius:999px;
  color:rgba(255,255,255,.74); background:rgba(224,178,106,.06);
  font:inherit; font-size:11px; font-weight:800; letter-spacing:.08em; cursor:pointer;
}
.topbar-ia-entry:hover,.topbar-ia-entry.active {
  color:#f2cf9c; border-color:rgba(224,178,106,.58); background:rgba(224,178,106,.13);
}
.ia-hub-page {
  width: min(1720px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 72px;
}
.ia-hub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 8px 4px 20px;
}
.ia-hub-head h1 { margin: 3px 0 7px; color: var(--ink-900); font-size: clamp(34px, 4.2vw, 58px); letter-spacing: -.045em; }
.ia-hub-head p { margin: 0; max-width: 820px; color: var(--ink-500); font-size: 15.5px; line-height: 1.6; }
.ia-hub-eyebrow { color: var(--ink-400); font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.ia-hub-connection {
  display: grid; grid-template-columns:auto minmax(170px,1fr) auto; align-items: center; gap: 10px; flex: none;
  min-width: 300px; padding: 12px 13px; border: 1px solid var(--paper-rule); border-radius: var(--r-lg);
  color: var(--ink-500); background: var(--surface); font-size: 11.5px;
}
.ia-hub-connection span { width: 7px; height: 7px; border-radius: 50%; background: var(--warning-500, #d89b2b); }
.ia-hub-connection.ok span { background: var(--success-600, #2f9e5e); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success-600, #2f9e5e) 15%, transparent); }
.ia-hub-connection.checking span { background: var(--ink-300); animation: ia-status-pulse 1.1s ease-in-out infinite; }
.ia-hub-connection.unknown span { background: var(--ink-300); }
.ia-hub-connection b,.ia-hub-connection small { display:block; }
.ia-hub-connection b { color:var(--ink-800); font-size:12px; }
.ia-hub-connection small { margin-top:2px; color:var(--ink-400); font-size:10px; font-weight:500; }
.ia-hub-connection button { border:0; border-radius:var(--r-sm); padding:6px 8px; color:var(--primary-700,var(--primary-600)); background:var(--paper-2); font:inherit; font-weight:750; cursor:pointer; }
.ia-hub-tabs {
  display: grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap: 10px; width: 100%;
}
.ia-hub-tabs button {
  display:flex; align-items:center; gap:13px; min-height: 82px; padding: 15px 17px; text-align:left; cursor: pointer;
  border: 1px solid var(--paper-rule); border-radius: var(--r-lg); color: var(--ink-500); background: var(--surface);
  font: inherit;
}
.ia-hub-tabs button > svg { flex:none; color:var(--ink-400); }
.ia-hub-tabs button span,.ia-hub-tabs button b,.ia-hub-tabs button small { display:block; }
.ia-hub-tabs button b { color:var(--ink-800); font-size:13.5px; }
.ia-hub-tabs button small { margin-top:4px; color:var(--ink-400); font-size:10.5px; line-height:1.35; font-weight:500; }
.ia-hub-tabs button:hover { color: var(--ink-800); border-color:var(--ink-300); background: var(--paper-2); }
.ia-hub-tabs button.active { color: var(--ink-900); border-color:var(--marca-cobre,var(--gold-500)); background:color-mix(in srgb,var(--marca-cobre,var(--gold-500)) 7%,var(--surface)); box-shadow: inset 3px 0 0 var(--marca-cobre,var(--gold-500)); }
.ia-hub-tabs button.active > svg { color:var(--marca-cobre,var(--gold-600)); }
.ia-hub-stage {
  min-height: 640px; margin-top: 14px; padding: clamp(22px, 3.2vw, 48px);
  border: 1px solid var(--paper-rule); border-radius: 22px; background: var(--surface);
}
.ia-hub-stage.tab-producao { padding: 0; overflow: hidden; }
.ia-hub-stage.tab-producao .pia-page,
.ia-hub-stage.tab-producao .ciu-page { min-height: 680px; }
.ia-hub-card { border: 1px solid var(--paper-rule); border-radius: var(--r-lg); background: var(--surface); }
.ia-hub-btn {
  min-height: 38px; padding: 0 14px; border: 1px solid var(--paper-rule); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-800); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer;
}
.ia-hub-btn:hover:not(:disabled) { border-color: var(--ink-300); background: var(--paper-2); }
.ia-hub-btn.primary { color: #fff; border-color: var(--primary-600); background: var(--primary-600); }
.ia-hub-btn.danger { color: var(--danger-700, #a02f2f); border-color: color-mix(in srgb, var(--danger-700, #a02f2f) 35%, var(--paper-rule)); }
.ia-hub-btn:disabled { opacity: .48; cursor: not-allowed; }
.ia-hub-link { border: 0; padding: 5px 7px; color: var(--primary-600); background: transparent; font: inherit; font-size: 11.5px; font-weight: 750; cursor: pointer; }
.ia-hub-alert { margin: 12px 0; padding: 11px 13px; border: 1px solid var(--warning-500, #d89b2b); border-radius: var(--r-md); color: var(--ink-700); background: var(--warning-50, #fff8e8); font-size: 12px; line-height: 1.5; }
.ia-hub-note { margin: 0; color: var(--ink-500); font-size: 11.5px; line-height: 1.55; }
.ia-mesa-workspace { max-width: 1120px; margin: 0 auto; }
.ia-mesa-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; background: var(--paper-2); }
.ia-mesa-intro h2 { margin: 4px 0 6px; color: var(--ink-900); font-size: 25px; }
.ia-mesa-intro p { margin: 0; max-width: 680px; color: var(--ink-500); line-height: 1.55; }
.ia-mesa-intro-actions { display: flex; align-items: center; gap: 8px; }
.ia-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.ia-provider { display: flex; align-items: center; gap: 10px; padding: 13px 14px; }
.ia-provider > div { min-width: 0; flex: 1; }
.ia-provider b, .ia-provider small { display: block; }
.ia-provider b { color: var(--ink-800); font-size: 12.5px; }
.ia-provider small { margin-top: 2px; color: var(--ink-400); font-size: 10.5px; }
.ia-provider-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--warning-500, #d89b2b); }
.ia-provider-dot.ok { background: var(--success-600, #2f9e5e); }
.ia-mesa-home { display: grid; gap: 14px; }
.ia-mesa-dashboard { padding: 20px; }
.ia-mesa-dashboard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ia-mesa-dashboard-head h3 { margin: 4px 0; color: var(--ink-900); font-size: 20px; }
.ia-mesa-dashboard-head p { margin: 0; color: var(--ink-500); font-size: 12px; }
.ia-mesa-filters { display: flex; gap: 7px; margin: 17px 0 14px; overflow-x: auto; padding-bottom: 2px; }
.ia-mesa-filters button { min-width: 104px; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--paper-rule); border-radius: var(--r-md); background: var(--surface); color: var(--ink-600); cursor: pointer; }
.ia-mesa-filters button b { min-width: 25px; color: var(--ink-900); font-size: 16px; }
.ia-mesa-filters button span { font-size: 11px; font-weight: 720; text-align: left; }
.ia-mesa-filters button.active { border-color: var(--primary-600); color: var(--primary-700, var(--primary-600)); background: color-mix(in srgb, var(--primary-600) 8%, var(--surface)); }
.ia-mesa-attention { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr); gap: 18px; padding: 16px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--warning-500, #d89b2b) 45%, var(--paper-rule)); border-radius: var(--r-lg); background: color-mix(in srgb, var(--warning-500, #d89b2b) 7%, var(--surface)); }
.ia-mesa-attention h4 { margin: 4px 0; color: var(--ink-900); }
.ia-mesa-attention p { margin: 0; color: var(--ink-500); font-size: 11.5px; line-height: 1.5; }
.ia-mesa-attention > div:last-child { display: grid; gap: 6px; }
.ia-mesa-attention button { display: grid; gap: 2px; padding: 9px 11px; border: 1px solid var(--paper-rule); border-radius: var(--r-md); background: var(--surface); text-align: left; cursor: pointer; }
.ia-mesa-attention button b { color: var(--ink-800); font-size: 11.5px; }
.ia-mesa-attention button span { color: var(--warning-700, #96690f); font-size: 10.5px; }
.ia-mesa-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ia-mesa-card { min-width: 0; display: grid; gap: 7px; padding: 14px; border: 1px solid var(--paper-rule); border-left-width: 4px; border-radius: var(--r-lg); background: var(--surface); text-align: left; cursor: pointer; }
.ia-mesa-card:hover { border-color: var(--ink-300); background: var(--paper-2); }
.ia-mesa-card.trabalhando { border-left-color: var(--primary-600); }
.ia-mesa-card.aguardam_voce { border-left-color: var(--warning-500, #d89b2b); }
.ia-mesa-card.interrompidas { border-left-color: var(--danger-700, #a02f2f); }
.ia-mesa-card.encerradas { border-left-color: var(--success-600, #2f9e5e); }
.ia-mesa-card.desconhecido { border-left-color: var(--ink-400); }
.ia-mesa-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ia-mesa-card-top span { color: var(--ink-600); font-size: 10.5px; font-weight: 720; }
.ia-mesa-card-top b { color: var(--ink-400); font-size: 9.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ia-mesa-card h4 { margin: 0; overflow: hidden; color: var(--ink-900); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ia-mesa-card p, .ia-mesa-card small { margin: 0; color: var(--ink-500); font-size: 10.5px; line-height: 1.45; }
.ia-mesa-card em { color: var(--danger-700, #a02f2f); font-size: 10px; font-style: normal; }
.ia-mesa-form { display: grid; gap: 15px; padding: 22px; }
.ia-mesa-form label, .ia-mesa-intervir label { display: grid; gap: 6px; color: var(--ink-700); font-size: 11px; font-weight: 750; }
.ia-mesa-form input, .ia-mesa-form textarea, .ia-mesa-form select, .ia-mesa-intervir textarea {
  width: 100%; box-sizing: border-box; padding: 10px 11px; border: 1px solid var(--paper-rule); border-radius: var(--r-md);
  color: var(--ink-900); background: var(--paper-1, var(--surface)); font: inherit; font-size: 13px;
}
.ia-mesa-form textarea, .ia-mesa-intervir textarea { min-height: 110px; resize: vertical; }
.ia-mesa-form-foot { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.ia-mesa-form-foot label { min-width: 210px; }
.ia-mesa-state { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; margin-bottom: 12px; background: var(--paper-rule); }
.ia-mesa-state > div { padding: 14px; background: var(--surface); }
.ia-mesa-state span, .ia-mesa-state b { display: block; }
.ia-mesa-state span { color: var(--ink-400); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.ia-mesa-state b { margin-top: 4px; color: var(--ink-900); }
.ia-mesa-state small { display: block; margin-top: 3px; color: var(--ink-400); font-size: 9.5px; }
.ia-mesa-breadcrumb { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--ink-500); font-size: 11px; }
.ia-mesa-breadcrumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-mesa-receipt { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 1px; overflow: hidden; margin-bottom: 12px; background: var(--paper-rule); }
.ia-mesa-receipt > div { min-width: 0; padding: 11px 12px; background: var(--paper-2); }
.ia-mesa-receipt span, .ia-mesa-receipt b { display: block; }
.ia-mesa-receipt span { color: var(--ink-400); font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; }
.ia-mesa-receipt b { margin-top: 3px; overflow: hidden; color: var(--ink-800); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ia-mesa-pendencia { display: grid; gap: 3px; padding: 12px 14px; margin-bottom: 8px; }
.ia-mesa-pendencia small { color: var(--warning-700, #96690f); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.ia-mesa-pendencia b { color: var(--ink-700); font-size: 12px; }
.ia-mesa-fio { display: grid; gap: 10px; margin: 18px 0; }
.ia-mesa-evento { max-width: 86%; border: 1px solid var(--paper-rule); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.ia-mesa-evento.codex { justify-self: end; }
.ia-mesa-evento header { display: flex; justify-content: space-between; gap: 16px; padding: 8px 11px; background: var(--paper-2); color: var(--ink-500); font-size: 10.5px; }
.ia-mesa-evento.codex header { color: var(--primary-700, var(--primary-600)); background: color-mix(in srgb, var(--primary-600) 9%, var(--surface)); }
.ia-mesa-evento.claude header { color: #7650a6; background: color-mix(in srgb, #7650a6 9%, var(--surface)); }
.ia-mesa-evento p { margin: 0; padding: 12px; color: var(--ink-700); white-space: pre-wrap; line-height: 1.58; }
.ia-mesa-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; align-items: start; }
.ia-mesa-lane { min-width: 0; overflow: hidden; border: 1px solid var(--paper-rule); border-radius: var(--r-lg); background: var(--surface); }
.ia-mesa-lane > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--paper-rule); background: var(--paper-2); }
.ia-mesa-lane.claude > header { box-shadow: inset 4px 0 #7650a6; }
.ia-mesa-lane.codex > header { box-shadow: inset 4px 0 var(--primary-600); }
.ia-mesa-lane header b, .ia-mesa-lane header small { display: block; }
.ia-mesa-lane header b { color: var(--ink-900); font-size: 13px; }
.ia-mesa-lane header small, .ia-mesa-lane header span { color: var(--ink-400); font-size: 9.5px; }
.ia-mesa-lane > div { display: grid; gap: 8px; max-height: 620px; overflow-y: auto; padding: 10px; }
.ia-mesa-turno { overflow: hidden; border: 1px solid var(--paper-rule); border-radius: var(--r-md); }
.ia-mesa-turno small { display: block; padding: 7px 9px; color: var(--ink-400); background: var(--paper-2); font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; }
.ia-mesa-turno p { margin: 0; padding: 10px; color: var(--ink-700); white-space: pre-wrap; line-height: 1.55; font-size: 11.5px; }
.ia-mesa-lane-empty { margin: 0; padding: 22px 12px; color: var(--ink-400); font-size: 11px; text-align: center; }
.ia-mesa-system { margin: 10px 0; padding: 0; overflow: hidden; }
.ia-mesa-system summary { padding: 12px 14px; color: var(--ink-600); font-size: 11px; font-weight: 750; cursor: pointer; }
.ia-mesa-system > div { display: grid; gap: 8px; padding: 0 12px 12px; }
.ia-mesa-system article { padding: 10px; border: 1px solid var(--paper-rule); border-radius: var(--r-md); }
.ia-mesa-system article b { color: var(--ink-700); font-size: 10.5px; }
.ia-mesa-system article p { margin: 5px 0 0; color: var(--ink-600); white-space: pre-wrap; font-size: 11px; line-height: 1.5; }
.ia-mesa-ata, .ia-mesa-intervir { padding: 18px; margin-top: 12px; }
.ia-mesa-ata h3 { margin: 5px 0 8px; }
.ia-mesa-ata p { margin: 0; white-space: pre-wrap; line-height: 1.6; }
.ia-mesa-intervir { display: grid; gap: 10px; }
.ia-mesa-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 760px) {
  .ia-hub-page { width: min(100% - 24px, 1460px); padding-top: 16px; }
  .ia-hub-head, .ia-mesa-intro, .ia-mesa-form-foot, .ia-mesa-dashboard-head { align-items: stretch; flex-direction: column; }
  .ia-hub-connection { align-self: flex-start; }
  .ia-hub-tabs { grid-template-columns:1fr; }
  .ia-hub-stage { padding: 18px; border-radius: var(--r-lg); }
  .ia-provider-grid { grid-template-columns: 1fr; }
  .ia-mesa-intro-actions { align-items: stretch; flex-direction: column; }
  .ia-mesa-attention, .ia-mesa-cards, .ia-mesa-split { grid-template-columns: 1fr; }
  .ia-mesa-receipt { grid-template-columns: repeat(2, 1fr); }
  .ia-mesa-state { grid-template-columns: 1fr; }
  .ia-mesa-evento { max-width: 100%; }
}
@keyframes ia-status-pulse { 50% { opacity:.35; } }

/* IA dentro do trabalho do Editor: faixa incorporada à página, sem painel
   flutuante, preservando as ações manuais como alternativas explícitas. */
.editor-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.editor-ia-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 18px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--gold-500) 42%, var(--paper-rule));
  border-radius: var(--r-lg, 16px);
  background:
    radial-gradient(circle at 8% 15%, color-mix(in srgb, var(--gold-500) 13%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 94%, var(--gold-50));
}
.editor-ia-copy { max-width: 760px; }
.editor-ia-copy h2 { margin: 4px 0 6px; font-size: clamp(19px, 1.55vw, 26px); }
.editor-ia-copy p { margin: 0; color: var(--ink-500); line-height: 1.55; }
.editor-ia-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1050px) {
  .editor-ia-entry { align-items: flex-start; flex-direction: column; }
  .editor-ia-actions { justify-content: flex-start; }
}
@keyframes duvida-lamina-entra {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
.duvida-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--paper-rule);
}
.duvida-kicker {
  color: var(--ink-400);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.duvida-title {
  color: var(--ink-900);
  font-size: 15px;
  font-weight: 700;
}
.duvida-alvo {
  padding: 8px 10px;
  border-left: 2px solid var(--warning-500, #d89b2b);
  background: var(--warning-50, #fffbeb);
  color: var(--ink-700);
  font-size: 12px;
  line-height: 1.45;
}
.duvida-connect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.duvida-connect-title {
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 700;
}
.duvida-connect p,
.duvida-details p,
.duvida-details li {
  color: var(--ink-600);
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}
.duvida-connect-msg {
  color: var(--ink-600);
  background: var(--paper-2);
  border-left: 2px solid var(--primary-300);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
}
.duvida-details {
  width: 100%;
  border-top: 1px solid var(--paper-rule);
  padding-top: 9px;
}
.duvida-details summary {
  color: var(--ink-500);
  cursor: pointer;
  font-size: 11.5px;
  list-style-position: inside;
}
.duvida-details[open] summary { margin-bottom: 8px; }
.duvida-details ol { margin: 0 0 8px; padding-left: 20px; }
.duvida-details-inline {
  width: auto;
  border: 0;
  padding: 0;
  text-align: right;
}
.duvida-details-inline[open] {
  width: 100%;
  flex-basis: 100%;
  text-align: left;
  padding-top: 8px;
}
.duvida-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--ink-500);
  font-size: 10.5px;
}
.duvida-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success-600);
  margin-right: 4px;
}
.duvida-context {
  color: var(--ink-500);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.duvida-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--ink-600);
  background: var(--primary-50);
  border-left: 2px solid var(--primary-400);
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.45;
}
.duvida-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 2px;
}
.duvida-answer {
  color: var(--ink-800);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.duvida-part-label {
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  margin: 10px 0 3px;
  text-transform: uppercase;
}
.duvida-answer > .duvida-part-label:first-child { margin-top: 0; }
.duvida-external {
  border-left: 2px solid var(--gold-400);
  margin-top: 10px;
  padding: 1px 0 1px 9px;
}
.duvida-external .duvida-part-label { color: var(--gold-700); margin-top: 2px; }
.duvida-sources {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--paper-rule);
  padding-top: 10px;
}
.duvida-source {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.duvida-source > div:first-child { min-width: 0; }
.duvida-source strong,
.duvida-source span {
  display: block;
  overflow-wrap: anywhere;
}
.duvida-source strong {
  color: var(--ink-700);
  font-size: 11px;
  line-height: 1.4;
}
.duvida-source span {
  color: var(--ink-400);
  font-size: 10.5px;
  line-height: 1.45;
  margin-top: 2px;
}
.duvida-reforco {
  border-top: 1px solid var(--paper-rule);
  padding-top: 10px;
}
.duvida-reforco-details > summary {
  color: var(--primary-700);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  list-style-position: inside;
}
.duvida-reforco-list { display: flex; flex-direction: column; gap: 8px; margin: 9px 0; }
.duvida-reforco-item {
  background: var(--paper-2);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-sm);
  padding: 9px;
}
.duvida-reforco-pick { display: flex; align-items: center; gap: 5px; color: var(--ink-500); font-size: 9.5px; margin-bottom: 6px; }
.duvida-reforco-item textarea {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  box-sizing: border-box;
  color: var(--ink-800);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.4;
  min-height: 56px;
  padding: 7px;
  resize: vertical;
  width: 100%;
}
.duvida-reforco-row { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; }
.duvida-reforco-row select { border: 1px solid var(--ink-200); border-radius: var(--r-sm); font: inherit; font-size: 10.5px; padding: 4px; }
.duvida-reforco-row span { color: var(--ink-500); font-size: 10.5px; line-height: 1.4; }
.duvida-reforco-saved { display: flex; align-items: center; gap: 5px; color: var(--success-700); font-size: 11px; font-weight: 700; }
.duvida-compose {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.duvida-compose label {
  color: var(--ink-600);
  font-size: 11px;
  font-weight: 700;
}
.duvida-compose textarea {
  width: 100%;
  min-height: 82px;
  max-height: 220px;
  resize: vertical;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink-900);
  padding: 9px 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
}
.duvida-compose textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: var(--ring);
}
.duvida-compose-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.duvida-compose-foot > span {
  color: var(--ink-400);
  font-size: 9.5px;
}
.duvida-loading,
.duvida-error {
  color: var(--ink-600);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 0;
}
.duvida-error {
  color: var(--danger-700);
  background: var(--danger-50);
  border-left: 2px solid var(--danger-600);
  padding: 8px 10px;
}
.duvida-loading .spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink-200);
  border-top-color: var(--primary-600);
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 5px;
  animation: duvida-spin 800ms linear infinite;
}
@keyframes duvida-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .duvida-loading .spinner { animation: none; border-top-color: var(--ink-200); }
}
@media (prefers-reduced-motion: reduce) {
  .duvida-panel-lamina { animation: none; }
  .solve-grid.duvida-lamina .solve-main { transition: none; }
}

/* Inline navigation arrows next to the timer/numbering */
.qs-nav {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.qs-nav-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-200, var(--paper-rule));
  background: var(--surface);
  color: var(--ink-700);
  border-radius: var(--r-md, 10px);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: all 120ms;
}
.qs-nav-btn:hover:not(:disabled) {
  background: var(--paper-2);
  border-color: var(--ink-300);
  color: var(--ink-900);
}
.qs-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.qs-nav-btn.marked {
  background: var(--gold-500);
  border-color: var(--gold-600);
  color: var(--primary-900);
}
.qs-nav-btn.marked:hover:not(:disabled) {
  background: var(--gold-600);
  color: #fff;
}
.qs-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-300);
  display: inline-block;
}

/* ── Review layout: main content + right-side question navigator ── */
.review-grid {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 36px;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 28px;
  align-items: start;
  opacity: 1;  /* override fade-in to never stick at 0 */
}
@media (max-width: 1080px) {
  .review-grid {
    grid-template-columns: 1fr;
  }
  .review-nav { display: none; }
}
.review-main { min-width: 0; }

.review-nav {
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-lg);
  padding: 16px;
  position: sticky;
  top: 80px;
  display: flex; flex-direction: column; gap: 14px;
}
.review-nav-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--paper-rule);
}
.review-nav-head .lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-600);
}
.review-nav-head .sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-500);
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.nav-grid.wide {
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
/* [TELAIPADRESPIRA 07/ago] .review-nav mede 220px (grid-template-columns da
   .solve-grid, styles.css:799) em QUALQUER largura ≥1081px — 7 colunas nesse
   espaço dão chip de 23,4px, abaixo do alvo de toque de 44px. 4 colunas cabem
   exatas: 220 − 32 de padding (.review-nav, styles.css:1189) − 12 de gap (3 ×
   4px) = 176 ÷ 4 = 44px. Escopado a `.review-nav` de propósito — a MESMA
   classe `.nav-grid.wide` também é usada no modal de Gabarito comentado
   (kit-screens.jsx:13431), com outro container e outra largura; mexer na
   regra genérica estragaria aquela tela sem eu ter medido lá. Nenhuma coluna
   foi alargada — o ganho é só no número de colunas. */
.review-nav .nav-grid.wide {
  grid-template-columns: repeat(4, 1fr);
}
.nav-cell {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--result-unvisited-border);
  background: var(--result-unvisited-bg);
  color: var(--result-unvisited-fg);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 100ms, border-color 120ms, background 120ms;
  padding: 0;
  position: relative;
}
.nav-cell::after {
  content: '○';
  position: absolute;
  right: 2px;
  bottom: 0;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  color: currentColor;
}
.nav-cell:hover {
  transform: scale(1.06);
  background: var(--result-unvisited-bg-hover);
  border-color: var(--result-unvisited-border);
}
.nav-cell.visited {
  background: var(--result-skipped-bg);
  color: var(--result-skipped-fg);
  border-color: var(--result-skipped-border);
}
.nav-cell.visited::after {
  content: '–';
}
.nav-cell.visited:hover {
  background: var(--result-skipped-bg-hover);
  border-color: var(--result-skipped-border);
}
.nav-cell.answered {
  background: var(--result-answered-bg);
  color: var(--result-answered-fg);
  border-color: var(--result-answered-border);
}
.nav-cell.answered::after { content: '●'; }
.nav-cell.answered:hover {
  background: var(--result-answered-bg-hover);
  border-color: var(--result-answered-border);
}
.nav-cell.marked {
  box-shadow: inset 0 2.5px 0 var(--result-marked-border);
}
.nav-cell.marked::before {
  content: '◆';
  position: absolute;
  left: 2px;
  top: 1px;
  font-family: var(--font-sans);
  font-size: 6px;
  line-height: 1;
  color: var(--result-marked-border);
}
.nav-cell.marked.sample {
  background: var(--result-marked-bg);
  color: var(--result-marked-fg);
  border-color: var(--result-marked-border);
  box-shadow: inset 0 -2.5px 0 var(--result-marked-border), inset 0 2.5px 0 var(--result-marked-border);
}
.nav-cell.marked.sample:hover {
  background: var(--result-marked-bg-hover);
}
.nav-cell.hit {
  background: var(--result-correct-bg);
  color: var(--result-correct-fg);
  border-color: var(--result-correct-border);
}
.nav-cell.hit::after { content: '✓'; }
.nav-cell.hit:hover {
  background: var(--result-correct-bg-hover);
  border-color: var(--result-correct-border);
}
.nav-cell.miss {
  background: var(--result-wrong-bg);
  color: var(--result-wrong-fg);
  border-color: var(--result-wrong-border);
}
.nav-cell.miss::after { content: '×'; }
.nav-cell.miss:hover {
  background: var(--result-wrong-bg-hover);
  border-color: var(--result-wrong-border);
}
.nav-cell.current {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  z-index: 1;
}

.nav-cell.sample {
  width: 16px; height: 16px;
  aspect-ratio: unset;
  cursor: default;
  font-size: 0;
  flex-shrink: 0;
}
.nav-cell.sample:hover { transform: none; }
.nav-cell.sample::after {
  right: 1px;
  bottom: 0;
  font-size: 8px;
}

.nav-legend {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--paper-rule);
}
.nav-legend .lg-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  color: var(--ink-600);
}
.nav-legend .lg-row .ct {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-700);
  font-weight: 600;
}
.solve-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  font-size: 12px; color: var(--ink-500);
}
.solve-progress {
  height: 4px; background: var(--paper-2); border-radius: var(--r-pill);
  flex: 1; margin: 0 16px; overflow: hidden;
}
.solve-progress .fill { height: 100%; background: var(--ce-500); transition: width 240ms; }

.q-card {
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-lg);
  padding: 30px 36px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--shadow-sm);
}
.q-meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.q-loc {
  font-size: 12px; color: var(--ink-500);
  display: flex; align-items: center; gap: 6px;
}
.q-stem {
  font-family: var(--font-serif);
  font-size: 19px; line-height: 1.6;
  color: var(--ink-900);
  text-wrap: pretty;
  margin: 0;
}
.alts { display: flex; flex-direction: column; gap: 10px; }
.alt {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--paper-rule);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.alt:hover { border-color: var(--ce-200); background: var(--ce-50); }
.alt-letter {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px;
}
.alt-text {
  font-family: var(--font-serif);
  font-size: 15.5px; line-height: 1.55;
  color: var(--ink-800);
  white-space: pre-wrap;
}
.alt.selected {
  border: 2px solid var(--primary-700);
  background: var(--primary-50);
  padding: 11px 15px;
}
.alt.selected .alt-letter { background: var(--primary-700); color: #fff; }
.alt.correct {
  border: 2px solid var(--result-correct-border);
  background: var(--result-correct-bg);
  padding: 11px 15px;
}
.alt.correct .alt-letter {
  background: transparent;
  border: 1px solid var(--result-correct-border);
  color: var(--result-correct-fg);
}
.alt.wrong {
  border: 2px solid var(--result-wrong-border);
  background: var(--result-wrong-bg);
  padding: 11px 15px;
  opacity: 1;
}
.alt.correct:hover { background: var(--result-correct-bg-hover); }
.alt.wrong:hover { background: var(--result-wrong-bg-hover); }
.alt.wrong .alt-letter {
  background: transparent;
  border: 1px solid var(--result-wrong-border);
  color: var(--result-wrong-fg);
}
.alt-result {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
  align-self: center;
  margin-right: 22px;
  border-radius: var(--r-pill);
  padding: 2px 7px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Telas estreitas: o selo desce para baixo do texto, alinhado com ele. */
@media (max-width: 720px) {
  .alt { grid-template-columns: 28px 1fr; }
  .alt-result { grid-column: 2; grid-row: auto; justify-self: start; margin: 4px 0 0; }
}
.alt-result-correct {
  color: var(--result-correct-fg);
  border: 1px solid var(--result-correct-border);
}
.alt-result-wrong {
  color: var(--result-wrong-fg);
  border: 1px solid var(--result-wrong-border);
}
.alt.faded { opacity: 0.55; }
.alt.was-wrong-before {
  border-color: var(--ce-200);
  position: relative;
}
.alt.was-wrong-before::after {
  content: 'errou antes';
  position: absolute; right: 14px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ce-700);
}

/* ── Past attempts strip ── */
.past-strip {
  background: var(--ce-50);
  border: 1px solid var(--ce-100);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.past-strip .head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ce-700);
}
.past-strip .timeline {
  display: flex; align-items: stretch; gap: 8px;
  overflow-x: auto;
}
.past-event {
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  min-width: 110px;
  display: flex; flex-direction: column; gap: 2px;
  flex-shrink: 0;
}
.past-event.miss { border-color: var(--ce-200); }
.past-event.hit { border-color: var(--success-100); }
.past-event .date {
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--ink-500);
}
.past-event .pick {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
}
.past-event.miss .pick { color: var(--ce-700); }
.past-event.hit .pick { color: var(--success-700); }
.past-event .time {
  font-size: 10.5px; color: var(--ink-500);
}

/* ── Explanation block ── */
.explain {
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: 16px 18px;
  border-left: 3px solid var(--gold-500);
}
.explain .lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--gold-700);
  margin-bottom: 6px;
}
.explain p {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.6;
  color: var(--ink-800); margin: 0;
}

/* ── Personal note (cause-of-error) ── */
.note-block {
  background: var(--surface);
  border: 1px dashed var(--ink-200);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.note-block textarea {
  width: 100%;
  background: transparent; border: none; outline: none; resize: none;
  font-family: var(--font-serif); font-size: 14px; line-height: 1.55;
  color: var(--ink-800);
  min-height: 60px;
}
.note-block textarea::placeholder { color: var(--ink-400); font-style: italic; }
.note-block .head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-500);
  margin-bottom: 6px;
}

/* ── Empty state ── */
.empty {
  text-align: center; padding: 80px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.empty .glyph {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px dashed var(--ink-200);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-400);
}
.empty .ttl {
  font-size: 18px; font-weight: 700; color: var(--ink-800);
}
.empty .sub {
  font-size: 14px; color: var(--ink-500); max-width: 44ch;
}

/* ── Modal ── */
.scrim {
  position: fixed; inset: 0;
  background: rgba(26, 24, 19, 0.40);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 24px;
}
.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  width: 100%; max-width: 720px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-hdr {
  padding: 18px 24px;
  border-bottom: 1px solid var(--paper-rule);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-hdr h3 {
  font-size: 16px; font-weight: 700; color: var(--ink-900); margin: 0;
}
.modal-body { padding: 22px 24px; overflow-y: auto; flex: 1; }
.modal-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--paper-rule);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ── Import-from-bank list ── */
.bank-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--paper-rule);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.bank-row + .bank-row { margin-top: 8px; }
.bank-row:hover { border-color: var(--ce-200); background: var(--ce-50); }
.bank-row.checked { border: 2px solid var(--ce-500); background: var(--ce-50); padding: 11px 13px; }
.bank-row .check {
  width: 22px; height: 22px; border-radius: var(--r-sm);
  border: 1.5px solid var(--ink-300);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  color: transparent;
  transition: all 120ms;
}
.bank-row.checked .check {
  background: var(--ce-500); border-color: var(--ce-500); color: #fff;
}

/* ── Compact list view ── */
.list-compact { display: flex; flex-direction: column; }
.list-compact .err-card { border-radius: 0; border-left: none; border-right: none; }
.list-compact .err-card + .err-card { margin-top: 0; border-top: none; }
.list-compact .err-card:first-child { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); border-left: 1px solid var(--paper-rule); border-right: 1px solid var(--paper-rule); }
.list-compact .err-card:last-child { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); border-left: 1px solid var(--paper-rule); border-right: 1px solid var(--paper-rule); }
.list-compact .err-card:not(:first-child):not(:last-child) { border-left: 1px solid var(--paper-rule); border-right: 1px solid var(--paper-rule); }
.list-compact .err-card:hover { box-shadow: none; background: var(--paper-2); }

/* ── Kanban view ── */
.kanban {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.kanban-col {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 280px;
}
.kanban-col .head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 6px;
}
.kanban-col .head .ttl {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
}
.kanban-col .head .ct {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-500);
}
.kanban-card {
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: box-shadow 140ms, border-color 140ms;
}
.kanban-card:hover { box-shadow: var(--shadow-sm); border-color: var(--ink-200); }
.kanban-card .stem {
  font-family: var(--font-serif);
  font-size: 13.5px; line-height: 1.5;
  color: var(--ink-800);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Group view ── */
.group {
  margin-bottom: 24px;
}
.group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--paper-rule);
  margin-bottom: 12px;
}
.group-head h3 {
  font-size: 14px; font-weight: 700; color: var(--ink-800);
  display: flex; align-items: center; gap: 10px;
}
.group-head h3 .ct {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--ink-500);
  background: var(--paper-2);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.group-head .meta { font-size: 12px; color: var(--ink-500); }

/* ── Utilities ── */
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-500); }
.subtle { color: var(--ink-400); }
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.center { display: flex; align-items: center; justify-content: center; }
.scroll-hide::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-hide::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 3px; }
.scroll-hide::-webkit-scrollbar-track { background: transparent; }

/* ── Animations ── */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* PROVAREAL (16/jul/2026) — badge de questão de prova real da banca */
.tag-prova {
  background: var(--primary-600, #0B4275);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* [COPIAR_QUESTAO_UNICA 08/set/2026] O copiar por alternativa saiu. O texto
   volta a ocupar toda a coluna; nenhum recuo fica reservado para botão ausente. */

/* ============================================================================
   COESÃO GLOBAL (21/jul) — seleção, scrollbar e foco no tom da marca, pro app
   inteiro (e o Passadiço embutido) parecerem uma coisa só. ADITIVO: define só
   defaults globais via tokens do DS (adaptam claro/escuro); regra de componente
   continua vencendo. Botões já têm .btn:focus-visible; aqui cobrimos o resto.
   ============================================================================ */
::selection { background: rgba(217, 184, 110, 0.35); } /* dourado translúcido: legível no claro e no escuro */
* { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
/* [CAIS_PONTEIRO_OVERLAY_P0 22/ago/2026] Uma fonte de verdade para a largura
   VISUAL da barra e para o fallback do alvo do Cais. No WKWebView do macOS a
   barra e' overlay: captura ponteiro, mas `offsetWidth-clientWidth` devolve 0. */
::-webkit-scrollbar {
  width: var(--rp-largura-barra-rolagem);
  height: var(--rp-largura-barra-rolagem);
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }
::-webkit-scrollbar-corner { background: transparent; }
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* ==========================================================================
   PASSADIÇO — o Tracker local usa o mesmo chrome do Banco. O documento
   interno é o único responsável pela rolagem; o host não cria uma segunda barra.
   ========================================================================== */
.meu-painel-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}
.meu-painel-shell > .topbar { flex: 0 0 56px; }
/* [BREUCASCA 06/ago/2026] Segundo nível da navegação, agora desenhado pelo host.
   `flex: 0 0 auto` de propósito: o palco abaixo é `flex:1` com `min-height:0`,
   então esta faixa tira altura do iframe em vez de empurrar a página — o shell
   continua `overflow:hidden` e a rolagem segue existindo em UM lugar só, dentro
   do Passadiço. Sem `position:sticky`: nada aqui rola. */
.meu-painel-nav {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 2px;
  padding: 6px 16px;
  overflow-x: auto; scrollbar-width: none;
  background: var(--surface, var(--card));
  border-bottom: 1px solid var(--border);
}
.meu-painel-nav::-webkit-scrollbar { display: none; }
.meu-painel-nav-tab {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 5px 11px;
  border: 0; border-radius: var(--r-sm, 6px);
  background: transparent; color: var(--muted);
  font: 700 12.5px var(--font-sans); white-space: nowrap; cursor: pointer;
}
.meu-painel-nav-tab:hover { color: var(--text); background: var(--ink-100, var(--bg-soft)); }
.meu-painel-nav-tab.is-on {
  color: var(--text);
  background: var(--accent-100, var(--bg-soft));
  box-shadow: inset 0 -2px 0 var(--accent);
}
.meu-painel-nav-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.meu-painel-nav-badge {
  font-style: normal; font-size: 10px; font-weight: 800; line-height: 1;
  padding: 2px 5px; border-radius: var(--r-pill, 999px);
  background: var(--danger); color: var(--text-inv, #fff);
}
.meu-painel-stage {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  background: var(--paper);
}
.meu-painel-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  border: 0;
  background: var(--paper);
}
.meu-painel-state {
  width: min(520px, calc(100% - 48px));
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.meu-painel-state h1 { font-size: var(--t-h2); }
.meu-painel-state p {
  color: var(--muted);
  line-height: var(--lh-body);
}
.meu-painel-state-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--primary-50);
  color: var(--primary-700);
}
.meu-painel-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.meu-painel-loading {
  position: absolute;
  top: var(--s-4);
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 11px;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-600);
  box-shadow: var(--shadow-sm);
  font-size: var(--t-body-sm);
  font-weight: 600;
  pointer-events: none;
}
.meu-painel-loading-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--primary-600);
  animation: meu-painel-pulse 1.1s ease-in-out infinite alternate;
}
.meu-painel-sync-pill {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--ink-600);
  box-shadow: var(--shadow-sm);
  font-size: 11px;
  font-weight: 750;
  pointer-events: none;
}
.meu-painel-sync-pill > span { width: 7px; height: 7px; border-radius: 50%; background: var(--success-600, #4d7c57); }
.meu-painel-sync-pill.is-ok { display: none; }
.meu-painel-sync-pill.is-warning > span { background: var(--warning-600, #a66b24); }
@media (prefers-reduced-motion: reduce) { .meu-painel-loading-dot { animation: none; } }
@keyframes meu-painel-pulse {
  from { opacity: .35; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}

/* ============================================================================
   DARK (22/jul) — acento --ce (argila) some no charcoal: --ce-700 = --c-7a3b2c,
   e a auto-inversão do dark mapeia essa argila para #e9e9ec (quase-branco), o
   que deixava o CTA .btn-primary branco-no-branco (invisível). No dark o acento
   passa a ser o AZUL do tema (--primary), que já é a cor de destaque do charcoal.
   ADITIVO e só no dark: light mode segue argila intacto.
   ============================================================================ */
html[data-theme="dark"] {
  --ce-600: var(--primary-600);
  --ce-700: var(--primary-600);   /* fundos de CTA/fill -> azul visivel */
  --ce-800: var(--primary-700);
}
/* [IPAD_EXECUTAR_03SET 03/set/2026] O CTA escuro passa de --primary-* (azul)
   para os tokens --cta-* (dourado), declarados logo abaixo no bloco de
   tokens da frente. O comentario acima explica por que o azul entrou aqui
   em 24/ago (o argila virava quase-branco) — a ordem de decisao permanece
   registrada; o QUE pinta agora e' o dourado do contrato de classes. */
html[data-theme="dark"] .btn-primary { background: var(--cta-bg); color: var(--cta-fg); }
html[data-theme="dark"] .btn-primary:hover { background: var(--cta-bg-hover); }
html[data-theme="dark"] .btn-primary:focus-visible { outline-color: var(--cta-ring); box-shadow: 0 0 0 3px var(--cta-ring); }

/* ============================================================================
   LINGUA1 (24/jul) — LÍNGUA VISUAL ÚNICA (Fathom + Passadiço)
   Base: mock aprovado pelo Kadu `mock_passadico_hoje_v5_claro.html`.
   Objetivo: as telas parecerem UM app só. Bloco ADITIVO no fim do arquivo —
   nada foi removido nem renomeado acima; reverter = apagar este bloco ou usar
   `styles.css.PRE_LINGUA1_20260724.bak`.
   Regra de tema: cor NUNCA vai em hex direto — entra como primitivo `--c-xxxxxx`
   com par no dark, senão o modo noturno quebra (o DS inverte pelos primitivos).
   ============================================================================ */

/* -- primitivos novos (light) -- */
:root, html[data-theme="light"] {
  --c-0a1628: #24170a;   /* navy da marca → cobre escuro (Ouro Nobre) [MARCANAVY 08/ago/2026] */
  --c-122036: #312211;   /* navy 2 — mesmo tom, um degrau mais claro */
  --c-e0b26a: #e0b26a;   /* dourado da marca */
  --c-e4dccd: #e4dccd;   /* fio/hairline sobre creme */
  /* [PILULAV2_TELA_E 04/set] vermelho de ALERTA. Contrato do mockup, secao E:
     o --danger do DS e "muted clay… so the whole kit goes calm" (o comentario
     esta na linha 51 deste arquivo) e por isso NAO serve para o destaque do
     carimbo 1. Par dia/noite como manda a LINGUA1. */
  --c-a3121f: #a3121f;   /* alerta 700 */
  --c-c0392b: #c0392b;   /* alerta 600 */
  --c-fbe9e9: #fbe9e9;   /* alerta 50  */
}
/* -- os mesmos primitivos no charcoal (mesma escala dos navies do DS) -- */
html[data-theme="dark"] {
  --c-0a1628: #26272b;
  --c-122036: #2f3037;
  --c-e0b26a: #eac68f;
  --c-e4dccd: #3a3b41;
  /* [PILULAV2_TELA_E 04/set] o par escuro do alerta */
  --c-a3121f: #f08a8a;
  --c-c0392b: #e8a29f;
  --c-fbe9e9: #3a1e1c;
}

/* [MARCANAVY 08/ago/2026 — pedido do Kadu] "Tonalidade da marca" recolore
   também a barra de navegação (`.topbar`, via --navy = var(--c-0a1628)), não
   só o símbolo. Até aqui só --marca-cobre/--marca-sombra (ds/colors_and_type.css)
   trocavam com o atributo `data-marca` — a barra ficava sempre azul-marinho
   fixo (#0a1628), fora do sistema de tonalidade, mesmo trocando o símbolo.
   Ouro Nobre é o padrão do :root (acima) e não precisa de atributo — a regra
   abaixo existe só por paridade defensiva, como em ds/colors_and_type.css.
   Cada tom usa o MATIZ do --marca-cobre daquele tom (ver ds/colors_and_type.css),
   escurecido para o mesmo peso/contraste do navy original (L≈9-12%, contraste
   com texto branco > 16:1 nos quatro — conferido com WCAG). SÓ no tema Claro:
   nos temas escuros a faixa já não é azul (grafite no Escuro atual, cobre no
   breu, tokens próprios no conforto) — fora do pedido do Kadu aqui. */
html[data-theme="light"][data-marca="ouro"] {
  --c-0a1628: #24170a;
  --c-122036: #312211;
}
html[data-theme="light"][data-marca="champagne"] {
  --c-0a1628: #2b1f12;
  --c-122036: #372a1b;
}
html[data-theme="light"][data-marca="rose"] {
  --c-0a1628: #24120c;
  --c-122036: #321b13;
}
html[data-theme="light"][data-marca="platina"] {
  --c-0a1628: #161b22;
  --c-122036: #1f252d;
}

/* -- tokens canônicos: use ESTES em tela nova -- */
:root {
  --navy:       var(--c-0a1628);
  --navy-2:     var(--c-122036);
  --gold-brand: var(--c-e0b26a);
  --rule:       var(--c-e4dccd);

  /* escala de texto única (piso 11px) */
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 14px;
  --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px;

  /* elevação: só dois degraus */
  --e-1: 0 1px 2px rgba(26,24,19,.06);
  --e-2: 0 4px 14px rgba(26,24,19,.10);
}

/* -- faixa do topo: navy da marca + aba ativa com SUBLINHADO dourado --------
   (a pílula branca translúcida dava peso igual a todos os itens; o sublinhado
   marca "onde estou" com um traço fino, do mesmo jeito do mock aprovado)     */
.topbar { background: var(--navy); }
.topbar-nav a {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 12px 6px;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.topbar-nav a:hover {
  background: rgba(255,255,255,.05);
  color: #fff;
  border-bottom-color: rgba(224,178,106,.35);
}
.topbar-nav a.active {
  background: transparent;
  color: var(--gold-brand);
  font-weight: 600;
  border-bottom-color: var(--gold-brand);
}
.topbar-nav a.active.ce {
  background: transparent;
  color: var(--ce-200);
  border-bottom-color: var(--ce-500);
}
.avatar { background: var(--gold-brand); color: var(--navy); }
/* fim LINGUA1 */

/* ==========================================================================
   CRONOGLOBALBAR (26/jul/2026) — uma única sessão, dentro da TopBar
   A barra usa a paleta própria do Fathom; o painel usa os tokens semânticos do
   tema atual. Nenhuma cor paralela foi criada para o cronômetro.
   ========================================================================== */
.topbar-crono-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  margin-left: auto;
  flex: 0 1 auto;
  z-index: 20;
}
.topbar-crono-slot + .topbar-right {
  margin-left: 0;
  flex: none;
}
.rp-global-crono {
  position: relative;
  min-width: 0;
  font-family: var(--font-sans);
}
.rp-crono-pill {
  width: 375px;
  height: 38px;
  padding: 0 7px 0 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill, 999px);
  background: rgba(255,255,255,.055);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  transition: background 120ms, border-color 120ms;
}
.rp-crono-pill:hover,
.rp-crono-pill.is-open {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.28);
}
.rp-crono-pill-main {
  align-self: stretch;
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.rp-crono-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--ink-400);
}
.rp-global-crono.is-running .rp-crono-state-dot {
  background: var(--gold-brand);
  box-shadow: 0 0 0 3px rgba(224,178,106,.16);
}
.rp-global-crono.is-paused .rp-crono-state-dot,
.rp-global-crono.is-restored .rp-crono-state-dot {
  background: var(--warning-500);
}
.rp-crono-time {
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.rp-crono-subject {
  color: rgba(255,255,255,.64);
  font-size: 11px;
  font-weight: 550;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  min-width: 0;
  flex: 1;
}
.rp-crono-today {
  min-width: 78px;
  height: 25px;
  padding: 0 0 0 9px;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.14);
  background: transparent;
  color: rgba(255,255,255,.58);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
  font-family: inherit;
  flex: none;
  cursor: pointer;
}
.rp-crono-today b { color: rgba(255,255,255,.82); font-weight: 800; }
.rp-crono-today:focus-visible {
  outline: 1px solid var(--gold-brand);
  outline-offset: 3px;
}
.rp-global-crono.is-empty .rp-crono-time { color: rgba(255,255,255,.52); }
.rp-global-crono.is-empty .rp-crono-subject { color: rgba(255,255,255,.48); }
.rp-crono-pill-control {
  width: 34px;
  height: 25px;
  padding: 0 0 0 8px;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.14);
  background: transparent;
  color: var(--gold-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
}
.rp-crono-pill-control:disabled { opacity: .45; cursor: wait; }
.rp-crono-pill-expand {
  width: 20px;
  height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.52);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
}
.rp-crono-pill-main:focus-visible,
.rp-crono-pill-control:focus-visible,
.rp-crono-pill-expand:focus-visible {
  outline: 2px solid var(--gold-brand);
  outline-offset: 2px;
}
.rp-crono-chevron {
  color: rgba(255,255,255,.52);
  flex: none;
}
.rp-crono-panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: min(410px, calc(100vw - 24px));
  max-height: calc(100vh - 78px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink-800);
  box-shadow: var(--shadow-lg, 0 18px 46px rgba(10,22,40,.24));
  cursor: default;
  z-index: 120;
}
.rp-crono-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.rp-crono-today-row {
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  text-align: left;
}
.rp-crono-today-row:hover { border-color: var(--primary-300); }
.rp-crono-today-row b { color: var(--success-700); font-weight: 800; }
.rp-crono-today-row svg { margin-left: auto; }
.rp-crono-panel-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.rp-crono-panel-title strong {
  color: var(--ink-900);
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.rp-crono-panel-title > span:last-child:not(.rp-crono-status) {
  color: var(--ink-500);
  font-size: 11.5px;
  line-height: 1.35;
}
.rp-crono-status {
  width: fit-content;
  color: var(--ink-500);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rp-crono-status.is-running { color: var(--success-700); }
.rp-crono-status.is-paused { color: var(--warning-700); }
.rp-crono-icon-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.rp-crono-icon-btn:hover { background: var(--paper-2); color: var(--ink-800); }
.rp-crono-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  margin-top: 14px;
}
.rp-crono-metrics > div {
  padding: 9px 10px;
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rp-crono-metrics span { color: var(--ink-500); font-size: 10.5px; }
.rp-crono-metrics b {
  color: var(--ink-800);
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
/* [ETAPADESTAQUE 07/ago/2026] O acumulado da tarefa não sai da tela — sai do
   lugar de honra. Fica numa faixa inteira no rodapé da grade, deitada, com
   fundo transparente e borda tracejada: continua legível e conferível, mas
   nenhum olho o confunde mais com o relógio que está correndo agora. */
.rp-crono-metrics > div.is-secondary {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  background: transparent;
  border-style: dashed;
}
.rp-crono-metrics > div.is-secondary b {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-600);
}
.rp-crono-media-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
  color: var(--ink-600);
  font-size: 11px;
}
.rp-crono-media-note b { color: var(--ink-800); }
.rp-crono-media-note small {
  grid-column: 1 / -1;
  color: var(--ink-500);
  font-size: 10.5px;
}
.rp-crono-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.rp-crono-btn {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
}
.rp-crono-btn:hover { background: var(--paper-2); }
.rp-crono-btn.is-primary {
  border-color: var(--primary-700);
  background: var(--primary-700);
  color: #fff;
}
.rp-crono-btn.is-finish {
  grid-column: 1 / -1;
  border-color: var(--success-700);
  color: var(--success-700);
}
/* [CRONO_UNICO 19/ago/2026] "Descartar tempo" subiu de dentro de "Detalhes" para
   a linha de acao, e ali nao havia tom de perigo: `.is-danger` so' existia em
   `.rp-crono-secondary-actions button`, que e' o bloco de onde ele saiu. Mesma cor
   daquele bloco, de proposito — e' o mesmo ato, mudou so' o lugar. Mantem a borda
   neutra: destrutivo se anuncia pela cor do texto, nao virando um segundo botao
   cheio que dispute com o "Concluir tarefa". */
.rp-crono-btn.is-danger { color: var(--danger-700); }
.rp-crono-btn:disabled,
.rp-crono-secondary-actions button:disabled { cursor: wait; opacity: .55; }
.rp-crono-empty-copy {
  margin: 12px 0 2px;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.45;
}
.rp-crono-panel-links {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
}
.rp-crono-panel-links button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
}
.rp-crono-panel-links button:hover { color: var(--ink-800); }
.rp-crono-more {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--paper-rule);
}
.rp-crono-more dl {
  margin: 0;
  display: grid;
  gap: 7px;
}
.rp-crono-more dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 11.5px;
}
.rp-crono-more dt { color: var(--ink-500); }
.rp-crono-more dd { margin: 0; color: var(--ink-800); font-weight: 650; text-align: right; }
.rp-crono-secondary-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.rp-crono-secondary-actions button {
  border: 0;
  padding: 4px 0;
  background: transparent;
  color: var(--primary-700);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}
.rp-crono-secondary-actions button.is-danger { color: var(--danger-700); }
.rp-crono-presets {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
}
.rp-crono-presets button {
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-sm);
  padding: 7px 4px;
  background: var(--surface);
  color: var(--ink-600);
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
}
.rp-crono-presets button.active {
  border-color: var(--primary-600);
  color: var(--primary-700);
  background: var(--primary-50);
}
.rp-crono-setting-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-top: 12px;
}
.rp-crono-setting-grid label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: var(--ink-600);
  font-size: 11px;
}
.rp-crono-setting-grid input {
  width: 52px;
  padding: 5px 6px;
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink-800);
  font: inherit;
  font-size: 11.5px;
  text-align: center;
}
.rp-crono-sound {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: var(--ink-600);
  font-size: 11.5px;
}
@media (max-width: 1280px) {
  .topbar { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .rp-crono-pill { width: 335px; }
  .rp-crono-subject { max-width: 91px; }
}
@media (max-width: 1100px) {
  /* CRONOELASTICO (06/ago/2026) — a largura fixa era o defeito.
     Em <=940px a pilula tinha 205px para ~253px de conteudo e o cronometro
     desenhava por cima do "hoje . N". Largura que se ajusta ao conteudo
     resolve na origem; o `max-width` impede que ela coma o resto da barra.
     O `min-width: 0` nao e enfeite: flex so encolhe filho que o tenha, e sem
     ele o conteudo volta a transbordar por mais largura que a pilula ganhe. */
  .rp-crono-pill { width: auto; min-width: 0; max-width: min(44vw, 340px); }
  .rp-crono-subject { display: none; }
  .topbar-crono-slot,
  .rp-global-crono,
  .rp-crono-pill-main { min-width: 0; }
  .topbar > * { min-width: 0; }
}
@media (max-width: 940px) {
  .topbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .topbar-nav a { padding-left: 7px; padding-right: 7px; font-size: 12px; }
  /* sem `width`: herda o `auto` da faixa de 1100px acima. Fixar aqui de novo
     era o que criava a colisao. */
  .rp-crono-pill { padding-left: 9px; gap: 7px; }
  .rp-crono-panel { right: -44px; }
}
@media (max-width: 560px) {
  .rp-crono-panel {
    right: 0;
    width: min(410px, calc(100vw - 24px));
  }
  .rp-crono-media-note { grid-template-columns: 1fr; }
  .rp-crono-media-note small { grid-column: 1; }
}

/* ============================================================================
   CONTRASTE (25/jul) — TEXTO ILEGÍVEL NO TEMA CLARO
   Queixa do Kadu: "no modo claro algumas coisas aparecem sem poder enxergar
   nos cadernos — cuidado para não repetir os erros nas outras".
   Não era da tela de Cadernos: era do TOKEN, e valia para o app inteiro.

   MEDIDO (razão de contraste sobre o cartão #fcfaf6, critério WCAG AA = 4.5):
     --ink-400  #94A3B8 -> 2.46:1   ❌ ilegível   (usado como cor de TEXTO 827×)
     --ink-300  #CBD5E1 -> 1.42:1   ❌ ilegível   (usado como cor de TEXTO  95×)
     --ink-500  #5C6E85 -> 5.01:1   ✅ (fica como está)
   No NOTURNO os mesmos papéis já passam (--ink-400 #74747c = 3.22:1 sobre
   #26272b, --ink-500 #9a9aa2 = 5.34:1), e a regra do Kadu é NÃO mexer nas cores
   do escuro. Por isso este bloco é SÓ para o tema claro.

   Conferido antes de escolher: --ink-400 é cor de TEXTO em 827 lugares e borda
   ou fundo em 3 — então escurecer não engrossa fio nenhum. A hierarquia
   300 < 400 < 500 continua de pé (cada um mais escuro que o anterior).
   Reverter: apagar este bloco ou usar styles.css.PRE_CONTRASTE_20260725.bak
   ============================================================================ */
:root, html[data-theme="light"] {
  --ink-300: #78879A;   /* 1.42:1 -> 3.52:1 — a tinta mais fraca, ainda secundária */
  --ink-400: #667585;   /* 2.46:1 -> 4.53:1 — AA cheio para texto pequeno        */
}
/* fim CONTRASTE */

/* ============================================================================
   DARKMODE-SEMANTICS (candidato isolado, 26/jul)
   Estados de interacao e tinta sobre preenchimento usam papeis semanticos.
   O canvas de PDFs/imagens permanece deliberadamente fora deste contrato.
   ============================================================================ */
:root, html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

.btn-primary,
.btn-start,
.rp-crono-btn.is-primary { color: var(--on-primary); }
.btn-gold:hover { color: var(--on-warning); }

button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}

.btn:disabled,
.rp-crono-btn:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 1;
}
button:disabled:not(.vf-answer-choice):not(.pil-alt):not(.pil-r0):not(.pil-r1):not(.pil-r2):not(.pil-r3) {
  background: var(--control-bg-disabled) !important;
  border-color: var(--control-border) !important;
  color: var(--control-text-disabled) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}
button:not(.btn):not(.vf-answer-choice):not(:disabled):hover,
[role="button"]:not([aria-disabled="true"]):hover {
  filter: var(--interactive-hover-filter);
}
.btn-primary:disabled,
.btn-start:disabled,
.btn-danger:disabled,
.btn-gold:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.rp-crono-btn.is-primary:disabled {
  background: var(--control-bg-disabled);
  border-color: var(--control-border);
  color: var(--control-text-disabled);
  box-shadow: none;
}
input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--control-bg-disabled);
  border-color: var(--control-border);
  color: var(--control-text-disabled);
  cursor: not-allowed;
  opacity: 1;
  -webkit-text-fill-color: var(--control-text-disabled);
}

.duvida-reforco-row select {
  appearance: auto;
  background-color: var(--control-bg);
  border-color: var(--control-border);
  color: var(--control-text);
  color-scheme: inherit;
  min-height: 30px;
}
.duvida-reforco-row select:hover:not(:disabled) {
  background-color: var(--control-bg-hover);
  border-color: var(--control-border-strong);
}
.duvida-reforco-row span,
.duvida-reforco-pick { color: var(--text-secondary-readable); }

.vf-answer-choice:hover:not(:disabled) {
  border-color: var(--control-border-strong) !important;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.vf-answer-choice:active:not(:disabled) { transform: translateY(0); }
.vf-answer-choice:disabled { cursor: default; }
.vf-answer-choice[data-result="correct"]:disabled {
  background: var(--result-correct-bg) !important;
  border-color: var(--result-correct-border) !important;
  color: var(--result-correct-fg) !important;
}
.vf-answer-choice[data-result="wrong"]:disabled {
  background: var(--result-wrong-bg) !important;
  border-color: var(--result-wrong-border) !important;
  color: var(--result-wrong-fg) !important;
}
.vf-result-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
}

.scrim { background: var(--overlay-scrim); }
.modal { border: 1px solid var(--panel-border); }

/* Falha localizada de React: substitui somente a área que caiu, nunca a tela. */
.rp-inline-recovery {
  width: min(680px, calc(100% - 32px));
  margin: 24px auto;
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--warning-600);
  border-radius: var(--r-md);
  background: var(--panel-glass);
  color: var(--control-text);
  box-shadow: var(--shadow-sm);
}
.rp-inline-recovery > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rp-inline-recovery strong { font-size: 13px; line-height: 1.45; }
.rp-inline-recovery details {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--panel-border);
}
.rp-inline-recovery summary {
  width: max-content;
  cursor: pointer;
  color: var(--text-secondary-readable);
  font-size: 12px;
  font-weight: 700;
}
.rp-inline-recovery pre {
  max-height: 160px;
  overflow: auto;
  margin: 8px 0;
  padding: 9px;
  border: 1px solid var(--control-border);
  border-radius: var(--r-sm);
  background: var(--control-bg-disabled);
  color: var(--control-text);
  font: 11px/1.45 var(--font-mono, monospace);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Informacao pequena deve usar tinta legivel; --ink-400 fica decorativo. */
.empty .sub,
.duvida-reforco-row span,
.duvida-reforco-pick,
.rp-crono-empty-copy,
.rp-crono-metrics span,
.rp-crono-more dt { color: var(--text-secondary-readable); }

/* ─────────────────────────────────────────────────────────────────────────
   [BOLINHAS 27/jul] Grade de navegação — o glifo de estado deixou de brigar
   com o número.
   Antes: numa célula de ~30px o símbolo (○ – ● ✓ ×) ficava colado no canto
   inferior direito, encostando no dígito. Cansado de olhar, parece sujeira.
   NADA foi retirado: esse símbolo é a ÚNICA pista de estado que não depende
   de cor (serve para daltônico e para impressão) e é o mesmo elemento que dá
   o desenho às amostras da legenda. O que mudou é só respiro — o número sobe
   um pouco, o símbolo ganha uma faixa própria embaixo, centralizado, e o ◆ de
   "marcada" sai de cima do dígito.
   `:not(.sample)` preserva intacta a amostra de 16px da legenda.
   ───────────────────────────────────────────────────────────────────────── */
.nav-cell:not(.sample) { padding-bottom: 5px; }
.nav-cell:not(.sample)::after {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.5px;
  font-size: 7.5px;
  opacity: .78;
}
.nav-cell:not(.sample).marked::before {
  left: 3px;
  top: 2.5px;
  font-size: 6.5px;
}

/* ─────────────────────────────────────────────────────────────────────────
   [FOCOFAIXA_OPUS 31/ago/2026] FAIXA DE LEITURA

   Mockup aprovado: modo-foco-faixa-leitura-opus.html. A lei e simples:
   "a questao nunca se move; o que existe ao redor dela desaparece".

   O JS mede a coluna ANTES de ligar e publica esquerda/largura. A faixa soma
   50px de respiro em cada lado, logo a leitura preserva exatamente o x que ja
   tinha. Topo e regua ficam invisiveis, mas conservam a propria caixa: nao ha
   reflow vertical nem o salto que tornava o foco antigo "torto". O card real
   desta tela e `.question-card` — as regras antigas em `.q-card` nunca
   alcancavam esta tela (documentado em PELERESOLVER).
   ───────────────────────────────────────────────────────────────────────── */
.rp-focus-chrome { display: contents; }
html[data-rp-focus-session="questao"] body {
  background: var(--paper);
}
html[data-rp-focus-session="questao"] [data-rp-focus-chrome="1"],
html[data-rp-focus-session="questao"] .app-corpo .cais-doca,
html[data-rp-focus-session="questao"] .avc-capsula,
html[data-rp-focus-session="questao"] .avc-porque,
html[data-rp-focus-session="questao"] .faina-faixa,
html[data-rp-focus-session="questao"] .faina-retorno {
  visibility: hidden !important;
  pointer-events: none !important;
}
/* [FOCOEXECUCAO 31/ago/2026] A LAMINA QUE FOI CHAMADA NAO PODE NASCER MUDA.
   "Detalhes" (a proveniencia da questao) volta ao foco pela regua por funcao
   acima — e ele abre a lamina da FONTE, que vive no cais. O cais inteiro esta
   velado aqui em cima, entao Detalhes virava botao morto: abria uma superficie
   invisivel e inerte.
   Mesma escolha que a `.solve-grid.foco-on.cais-aberto` mais abaixo neste
   arquivo ja fazia para a lamina de duvida: o veu cede SO enquanto a lamina
   esta aberta, e SO para a lamina — o trilho do cais continua velado, porque
   trilho e navegacao, nao execucao desta questao.
   ⚠️ O `inert` que acompanha isto NAO e CSS: ele e posto por JS em
   `kit-screens.jsx` (o efeito do `foco`), e la ha a guarda gemea desta. Mexer
   numa sem a outra devolve a lamina visivel e ainda inclicavel. */
html[data-rp-focus-session="questao"] .app-corpo.cais-aberto .cais-doca .cais-lamina {
  visibility: visible !important;
  pointer-events: auto !important;
}
html[data-rp-focus-session="questao"] .content.content-solve {
  padding-left: 0;
  padding-right: 0;
  background: var(--paper);
}
.solve-grid.foco-on {
  position: relative;
  box-sizing: border-box;
  width: var(--rp-focus-band-width, min(920px, 100vw));
  max-width: none;
  margin-left: var(--rp-focus-band-left, max(0px, calc((100vw - 920px) / 2)));
  margin-right: 0;
  padding-left: 50px;
  padding-right: 50px;
  /* [FOCOEXECUCAO 31/ago/2026] RETANGULO FECHADO NOS QUATRO LADOS.
     Kadu, verbatim: «ficou bom , so falta fechar o retangulo pq so linhas nas
     lateraias me incomadam». Era `border-inline`, so as duas laterais; agora e
     borda inteira com raio de 16px, o mesmo do mockup aprovado
     `_mockups_todos/MOCKUP_FOCO_EXECUCAO_31AGO.html`.
     O respiro vertical (padding-block) existe para o fechamento de cima e de
     baixo APARECER: sem ele a borda encosta no conteudo e some visualmente. */
  padding-top: 26px;
  padding-bottom: 26px;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  background: var(--surface);
  /* [TECLADOFOCO 18/set/2026] A MOLDURA PASSA A SER O DOURADO, e ela e a unica.
     Kadu, verbatim, 18/set: «Essa so uma linha lateral aqui na esquerda, e o
     resto do coisa tudo solto. Acho que e melhor botar so o contorno ali
     dourado em volta da questao, e sumir o resto.» Aprovado por ele no mockup
     `_mockups_todos/MOCKUP_TECLADOFOCO_18SET.html` («sim aprovado»).
     O retangulo dos quatro lados ja existia desde o FOCOEXECUCAO (31/ago) — o
     que faltava era ele ser DOURADO. Em `--paper-rule` ele lia como fundo, e o
     unico ouro da tela era um fio na borda esquerda, que e exatamente do que
     ele reclamou. A regua editorial (os dois pseudo-elementos) saiu logo abaixo. */
  border: 1.5px solid var(--gold-600, #a77b2b);
  border-radius: 16px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-600, #a77b2b) 14%, transparent);
  overflow: visible;
}
/* ⛔ [TECLADOFOCO 18/set/2026] A REGUA EDITORIAL FOI APAGADA AQUI, e com ela as
   duas sobrescritas dela no `@media (max-width: 920px)` mais abaixo.
   Eram `.solve-grid.foco-on::before` (fio de 1px, altura inteira, left:19px) e
   `::after` (barra de 3x48px no meio, left:18px) — as duas em `--gold-600`.
   Elas eram o UNICO ouro do modo foco, e e por causa delas que o dono via «so
   uma linha lateral aqui na esquerda». O ouro mudou de lugar: agora e a moldura
   inteira, na regra acima. Duas fontes de ouro brigando pelo olho seria pior que
   uma no lugar errado. NAO devolva a regua sem decisao escrita dele. */
.solve-grid.foco-on .solve-main {
  width: min(100%, var(--rp-focus-reading-width, 820px));
  max-width: none;
  margin-inline: auto;
}
.solve-grid.foco-on .solve-main > :not([data-rp-focus-reading="1"]) {
  display: none !important;
}
.solve-grid.foco-on [data-rp-focus-reading="1"] {
  width: 100%;
}
.solve-grid.foco-on .question-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
/* ─────────────────────────────────────────────────────────────────────────
   [FOCOEXECUCAO 31/ago/2026] A REGUA DO FOCO E POR FUNCAO, NAO POR ENDERECO.

   Kadu, verbatim, olhando a foto da barra do rodape: «esse botoes sao
   necessarios na resolçao da questao» — e, sobre o que sumiu: «varias coisas
   que sao necessarias pra resolver a questao por exemplo, traduzir a questao,
   e o botao PT/EN, a bandeirinha ne, tem varias coisas ali que tem que
   aparecer inclusive no Modofoco, porque faz parte da execucao da questao ne?»

   FICA no foco o que resolve ESTA questao: ler, traduzir, consultar a fonte,
   gerar V/F, favoritar, responder.
   SAI do foco o que navega entre questoes ou administra o acervo: TopBar,
   .cad-faixa, .solve-bottombar, cais, trilha do CP, CPSelo, cronometro.

   O DEFEITO QUE ISTO CONSERTA: a frente FOCOFAIXA_OPUS (31/ago, 11:16) cortava
   por ONDE A PECA MORA NO DOM. As duas linhas eram
     `.solve-grid.foco-on .qs-rodape-esq,
      .solve-grid.foco-on .qa-bar > :not(.qa-cta) { display: none !important; }`
   e derrubavam de um golpe so: Fonte, Detalhes, PT|EN, bandeirinha do ingles,
   I/II/III (gerar V/F), Criar todas e o botao de ferramentas desta questao.
   Ninguem escolheu essa lista — ela era efeito colateral do seletor.

   COMO SE ESCREVE DAQUI PARA A FRENTE: periferia que aparecer dentro do cartao
   se marca no JSX com `data-rp-foco="fora"`, e sai por esta unica regra. Nao
   volte a cortar por container: o proximo botao de execucao que nascer na
   .qa-bar sumiria junto, sem ninguem ter decidido isso.
   ───────────────────────────────────────────────────────────────────────── */
/* Cronometro, caminho, dificuldade e video pertencem ao redor; a questao nao. */
.solve-grid.foco-on .qs-cab { display: none !important; }
/* [FOCOEXECUCAO 31/ago/2026] EXCECAO CIRURGICA: o modal de "Reportar esta
   questao" e montado DENTRO da `.qs-cab` (kit-widgets.jsx, o
   `{reportarAberto && <ReportarQuestaoModal …>}` logo antes da `.qs-cab-fim`),
   e ele NAO e portal — e um `.scrim` em fluxo. Com a linha acima, clicar em
   "Sinalizar" no foco nao abria absolutamente nada: `display:none` no ancestral
   apaga o descendente inteiro, `position:fixed` ou nao.
   A cabeca volta a existir como caixa (`display:contents`) SO quando ha um
   scrim dentro dela, e todos os outros filhos dela continuam apagados — ou
   seja, cronometro, trilha e CPSelo seguem fora, como o dono mandou
   («cronometro fora com ctz»). */
.solve-grid.foco-on .qs-cab:has(> .scrim) { display: contents !important; }
.solve-grid.foco-on .qs-cab:has(> .scrim) > :not(.scrim) { display: none !important; }
/* A unica porta de saida do foco dentro do cartao: marcado no JSX, por funcao. */
.solve-grid.foco-on [data-rp-foco="fora"] { display: none !important; }
.solve-grid.foco-on .qs-rodape {
  border-top-color: color-mix(in srgb, var(--gold-600, #a77b2b) 24%, var(--paper-rule));
  background: var(--surface);
}
.solve-grid.foco-on .qa-bar,
.solve-grid.foco-on .qs-rodape-dir { justify-content: flex-end; width: 100%; }

/* ⛔ [FOCOEXECUCAO 31/ago/2026] O `.rp-focus-toggle` FLUTUANTE FOI APAGADO AQUI.

   Kadu, verbatim: «Nao gostei do botao ali do Modofoco, flutuante ali, achei
   muito esquisito, principalmente antes de estar apertado». E, aprovando o
   mockup: «pode ser no rodape do cartao mas nao precisa screver "FOCO" pode ser
   so o botaozinho com o simbolo ok ?»

   O que existia: `position:fixed; top:128px; right:calc(var(--cais-w)+16px)`
   como pilula com o rotulo FOCO em caixa alta, e uma sobrescrita `.is-active`
   que ao ligar saltava para `top:72px` ancorado na esquerda da faixa, virava
   quadrado de 44px e escondia o rotulo num `clip`. Trocava de ancora, de forma
   e de rotulo no mesmo clique — o comentario do JSX dizia que ele "nao salta de
   lugar" e o CSS fazia exatamente o contrario.

   Hoje ele e um `.qa-ic` como qualquer outro botao da `.qa-bar`, no grupo
   `.qa-ferramentas` (order 7, depois do ✦ e do ☆, antes do CTA) — MESMO no nos
   dois estados, mesmo diametro dos vizinhos, so o simbolo. Nome so em `title` e
   `aria-label`; o estado, em `aria-pressed`. O CSS dele mora junto com o resto
   da barra, no `<style>` do `kit-screens.jsx`.

   NAO recrie uma classe posicional para este botao: era ela que produzia o
   salto. Se ele precisar de estilo, ele e um `.qa-ic`. */
.rp-focus-return {
  position: fixed;
  z-index: 950;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(560px, calc(100vw - 28px));
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--paper-rule);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-700);
  box-shadow: 0 12px 34px rgba(15, 33, 54, .18);
  font-size: 12.5px;
}
.rp-focus-return button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-500);
  cursor: pointer;
}
@media (max-width: 920px) {
  .solve-grid.foco-on {
    width: 100%;
    margin-left: 0;
    padding-inline: clamp(18px, 5vw, 42px);
    /* [FOCOEXECUCAO 31/ago/2026] Abaixo de 920px a faixa ja e a janela inteira:
       um retangulo fechado encostaria a borda nas duas bordas do vidro e viraria
       moldura de tela, nao de cartao. Aqui ele continua sem borda, como estava
       antes desta frente — era `border-inline: 0` e passou a `border: 0` porque
       a borda agora e dos quatro lados. Nada mais mudou nesta faixa. */
    border: 0;
    border-radius: 0;
  }
  /* [TECLADOFOCO 18/set/2026] As duas sobrescritas da regua editorial sairam
     junto com ela. ⚠️ Nesta faixa a faixa continua SEM BORDA (`border: 0`, logo
     acima, decisao do FOCOEXECUCAO com motivo escrito: abaixo de 920px a moldura
     encostaria nas bordas do vidro e viraria moldura de TELA). Ou seja: abaixo de
     920px nao ha contorno dourado, e isso e proposital e anterior a esta frente.
     Se o dono quiser ouro tambem ai, e decisao NOVA — nao a deduza daqui. */
  /* [FOCOEXECUCAO 31/ago/2026] As duas sobrescritas do `.rp-focus-toggle` fixo
     sairam com ele. O gatilho agora e um `.qa-ic` dentro da propria barra do
     cartao, e portanto acompanha a faixa em qualquer largura sem regra propria
     de posicao. Nao devolva casca aqui. */
}
@media (prefers-reduced-motion: reduce) {
  .rp-focus-return { transition: none !important; animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   [REGUA 27/jul] Régua única do topo do caderno.
   O `% de acerto` só aparece quando o painel da direita NÃO está na tela.
   Motivo: o painel já pinta cada célula de verde/vermelho e tem a tira
   "certas · erradas · faltam" — na largura normal o número em cima era a
   terceira contagem da mesma coisa. Mas o painel some no modo foco e abaixo
   de 1080px; nesses dois casos o número volta sozinho, porque aí ele é a
   ÚNICA leitura de placar disponível.
   Nada de JS: o número continua sendo montado sempre, só não é pintado.
   ───────────────────────────────────────────────────────────────────────── */
.sv-acerto { display: none; }
.solve-grid.foco-on .sv-acerto { display: inline; }
@media (max-width: 1080px) {
  .sv-acerto { display: inline; }
}

/* ─────────────────────────────────────────────────────────────────────────
   [ALTROWS 27/jul] Riscado didático no gabarito comentado.
   O `~~` do conteúdo vira <s> pelo richHTML. Sem regra, o navegador desenha
   um risco cinza no texto cinza — ninguém enxerga. Aqui o texto riscado PERDE
   a tinta (vai pro --ink-400) e o RISCO fica vermelho e mais grosso: bate o
   olho e se vê o que foi cancelado. Vale na linha da alternativa e também na
   Pegadinha, onde o mesmo recurso é usado.
   O <mark> (o `==` do conteúdo) é o grifo dourado — no máximo 1–2 por bloco,
   como manda a regra-base; abundante, deixa de ser sinal.
   ───────────────────────────────────────────────────────────────────────── */
.rp-altrow s,
.rp-gabarito s {
  color: var(--ink-400);
  text-decoration-line: line-through;
  text-decoration-color: var(--danger-600);
  text-decoration-thickness: 1.5px;
}
.rp-altrow mark,
.rp-gabarito mark {
  background: var(--gold-100, #FBF0D0);
  color: inherit;
  padding: 0 3px;
  border-radius: 3px;
}
[data-theme="dark"] .rp-altrow mark,
[data-theme="dark"] .rp-gabarito mark {
  background: rgba(224, 178, 106, .22);
  color: var(--ink-900);
}

/* ─────────────────────────────────────────────────────────────────────────
   [BOLINHAS2 27/jul] Grade de navegação — o glifo de estado saiu.
   O Kadu reclamou duas vezes das "bolinhas zoadas" e o mockup que ele aprovou
   não tem símbolo nenhum: a célula é só número, cor de fundo, cor de borda e o
   anel azul da atual. Eu tinha segurado o glifo alegando que era a única pista
   que não dependia de cor — mas cada célula JÁ carrega `aria-label` e `title`
   com o estado por extenso ("Questão 7: Errou; marcada; atual"), que é uma
   pista melhor que um caractere de 8px espremido no canto.
   O que se perde de verdade: a leitura em impressão preto-e-branco. Se um dia
   fizer falta, basta apagar este bloco — o de cima volta a valer.
   ───────────────────────────────────────────────────────────────────────── */
.nav-cell::after,
.nav-cell.visited::after,
.nav-cell.answered::after,
.nav-cell.hit::after,
.nav-cell.miss::after,
.nav-cell.sample::after {
  content: none;
}
.nav-cell:not(.sample) { padding-bottom: 0; }


/* ==========================================================================
   [RAILF9 06/ago/2026] — A GAVETA DE NAVEGAÇÃO
   Errata à spec §6: o rail NÃO é permanente. Decisão do Kadu: abre ao clicar.
   Entra POR CIMA do conteúdo — os 212 px não saem da largura útil, que era o
   motivo dele ("as coisas que ficam vão poder ficar mais espalhadas").

   Os DOIS consertos que a medição obrigou continuam valendo, e um deles muda
   de razão:
   1. FIO DE SEPARAÇÃO. #0C0806 contra --bg escuro #1a1b1e = 1,16:1 — é a mesma
      cor, a gaveta derreteria no conteúdo. Borda direita de 1 px em cobre a
      22%. No tema claro o contraste é 18,11:1 e a borda seria enfeite — mas
      ela FICA, porque o app tem três temas e a gaveta é escura nos três: o que
      muda é o fundo atrás dela, não ela.
   2. RÓTULO DE GRUPO a 58% de branco. A 42% dava ≈3,6 sobre #0C0806, abaixo do
      mínimo de 4,5. A 58% dá 6,13.
   ⚠️ A spec §6 manda "cobre #E8B98F". Esse valor MORREU no PRUMOV03: a marca
   tem 4 tonalidades e o cobre vivo é `--marca-cobre`. Hex cravado aqui faria a
   gaveta ignorar a tonalidade que a pessoa escolheu. Use o token, sempre.
   ========================================================================== */

/* A MARCA É O GATILHO. Ela agora é um <button>, então precisa perder a
   aparência de botão que o `.btn`/UA dá — e ganhar só o que sinaliza que abre:
   um fundo sutil no hover e um estado aberto. Nada de seta ao lado: o PRUMO_F1
   uniu símbolo e palavra numa peça só e um glifo extra reabriria o vão.
   ⚠️ `gap: 0` continua sendo DECLARADO, não ausente — o kit.css:52 declara
   `gap:10px` no mesmo seletor e passaria a valer sozinho. */
button.topbar-brand {
  border: 0; font: inherit; padding: 4px 8px; margin-left: -8px;
  border-radius: var(--r-md);
  background: transparent; color: var(--marca-cobre);
  transition: background 120ms;
  position: relative;
}
button.topbar-brand:hover { background: rgba(255,255,255,0.07); }
button.topbar-brand[aria-expanded="true"] { background: rgba(255,255,255,0.10); }
button.topbar-brand:focus-visible { outline: 2px solid var(--marca-cobre); outline-offset: 2px; }

.rail-bolinha {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--gold-brand, #E0B26A); display: inline-block;
}
/* na marca a bolinha não cabe "ao lado": vira selo no canto superior direito */
.rail-bolinha-marca { position: absolute; top: 3px; right: 2px; }

/* "Tela inicial" mora acima dos grupos e sem rótulo — ela não pertence a
   nenhum deles. O fio separa sem inventar mais um nome. (Eram 4 grupos no
   RAILF9; são 5 desde o GAVETA5, e ela continua fora da sanfona: é um
   destino só, e escondê-la atrás de um cabeçalho custaria um clique para
   não agrupar nada.) */
.rail-topo { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }

.rail-veu {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.42);
  z-index: 14;
}

.rail-gaveta {
  position: fixed; left: 0; bottom: 0;
  width: 212px;
  background: #0C0806;
  border-right: 1px solid rgba(220,179,136,0.22);
  display: flex; flex-direction: column;
  padding: 16px 0 18px;
  z-index: 15;
  overflow-y: auto;
  transform: translateX(-213px);
  transition: transform 200ms cubic-bezier(.22,.61,.36,1);
}
.rail-gaveta.is-on { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .rail-gaveta { transition: none; } }

.rail-nav { display: block; }
.rail-grupo { padding: 0 14px; margin-bottom: 2px; }

/* [GAVETA5 11/ago/2026] O rótulo virou BOTÃO (abre a sanfona), então precisa
   perder a aparência que o UA dá a <button> e manter exatamente a tipografia
   que a div tinha. Os 58% de branco NÃO são escolha estética: o RAILF9 mediu
   42% em ≈3,6 sobre #0C0806, abaixo do mínimo de 4,5 — a 58% dá 6,13. Não
   baixe. */
.rail-rotulo {
  display: flex; align-items: center; gap: 6px;
  width: 100%; text-align: left; cursor: pointer;
  border: 0; border-left: 2px solid transparent;
  border-radius: var(--r-sm); background: transparent;
  font: inherit;
  padding: 7px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .9px; text-transform: uppercase;
  color: rgba(255,255,255,0.58);
  transition: background 110ms, color 110ms;
}
.rail-rotulo:hover { background: rgba(255,255,255,0.07); color: #fff; }
.rail-rotulo:focus-visible { outline: 2px solid var(--marca-cobre); outline-offset: -2px; }
.rail-grupo.is-aberto > .rail-rotulo {
  color: var(--marca-cobre); background: rgba(220,179,136,0.10);
  border-left-color: var(--marca-cobre);
}
/* a seta empurra-se para a direita e gira 90° quando o grupo abre */
.rail-seta {
  margin-left: auto; display: inline-flex; flex: none;
  color: rgba(255,255,255,0.40);
  transition: transform 180ms, color 110ms;
}
.rail-grupo.is-aberto > .rail-rotulo .rail-seta {
  transform: rotate(90deg); color: var(--marca-cobre);
}
@media (prefers-reduced-motion: reduce) { .rail-seta { transition: none; } }

/* A pergunta do grupo aberto. Mesmo tom da `.rail-nota` (42%) de propósito: é
   legenda, não comando, e só aparece num grupo por vez — ler 42% aqui é uma
   linha, não um parágrafo. */
.rail-pergunta {
  margin: 0; padding: 1px 10px 7px 12px;
  font-size: 11px; line-height: 1.45; font-style: italic;
  color: rgba(255,255,255,0.42);
}

/* ⚠️ o `hidden` do JSX é quem esconde os itens do grupo fechado. Declarar
   `display` aqui sem esta guarda venceria o atributo e a sanfona ficaria
   sempre aberta — com o `aria-expanded` dizendo que não. */
.rail-grupo-itens { padding-bottom: 6px; }
.rail-grupo-itens[hidden] { display: none; }
.rail-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; border-left: 2px solid transparent;
  border-radius: var(--r-sm); background: transparent;
  font: inherit; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.86); cursor: pointer;
  transition: background 110ms, color 110ms;
}
.rail-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.rail-item.active {
  color: var(--marca-cobre); background: rgba(220,179,136,0.10);
  border-left-color: var(--marca-cobre); font-weight: 600;
}
.rail-item.active.ce {
  color: var(--ce-200, #e4a894); background: rgba(179,107,87,0.16);
  border-left-color: var(--ce-500);
}
.rail-fio { height: 1px; background: rgba(255,255,255,0.08); margin: 6px 10px; }
.rail-nota {
  margin: auto 0 0; padding: 12px 24px 0;
  font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.42);
}

/* Janela baixa: a gaveta rola por dentro, não estoura.
   [GAVETA5 11/ago] a conta de 663 px era de quando os 4 grupos ficavam TODOS
   abertos ao mesmo tempo (15 itens + 4 rótulos + a nota). Com a sanfona só um
   grupo mostra os itens, e o pior caso passa a ser Biblioteca aberta: 5
   cabeçalhos + 1 pergunta + 7 itens + Cobertura ≈ 430 px. Sobra folga; a regra
   fica porque a nota de rodapé continua sendo a primeira coisa dispensável, e
   a gaveta continua rolando em vez de cortar. */
@media (max-height: 700px) { .rail-nota { display: none; } }

/* ==========================================================================
   [GAVETA5 11/ago/2026 → APOSENTADO em FAIXAPE 12/ago/2026]
   O PASSADIÇO COMO ATALHO FLUTUANTE — as 30 linhas de `.rail-passadico-fab`
   que moravam aqui saíram inteiras, junto com o botão que as usava.

   🔴 O MOTIVO, medido: o balão era `position:fixed; bottom:44px; z-index:30`,
   e na tela de resolver a `.solve-bottombar` é sticky com `z-index:40`.
   Quarenta cobre trinta. O atalho existia e não se via — foi a reclamação do
   Kadu em 12/ago ("o atalho pro meu passadiço fica escondido ali").

   ONDE ELE ESTÁ AGORA: primeiro botão do cais, só ícone (a estrela `star` do
   lucide), com o nome no `title`. Marcação em `app.jsx` (`CaisGlobal`) e no
   trilho de toque da `SolveScreen`. O gate continua sendo de RENDERIZAÇÃO
   (`user.user_id === 'USR-PT4Q'`), nunca `display:none` — regra que escondesse
   por CSS deixaria o rótulo "Meu Passadiço" legível no HTML dos amigos.

   Nada de `.rail-passadico-fab*` sobrou: classe órfã em folha é a próxima
   armadilha de quem for ler isto daqui a um mês.
   ========================================================================== */

/* ==========================================================================
   PRUMODOCK (06/ago/2026) — a TopBar respirando
   Pedido do Kadu depois de ver o RAILF9 na tela: "deixar o que tem lá já mais
   folgado, as coisas tá muito pressionada e entulhada".
   Ele tem razão e a causa é geométrica: `.topbar-crono-slot` tem `margin-left:
   auto` e a regra seguinte cola o `.topbar-right` nele com `margin-left: 0`.
   Enquanto os 4 grupos ocupavam o meio isso não aparecia; com eles na gaveta,
   TUDO passou a se amontoar no canto direito e o resto da barra ficou vazio.
   Aqui não entra elemento novo — a decisão dele foi explícita: o espaço é para
   FOLGA, não para encher de novo. Só se redistribui o que já existe.
   ========================================================================== */

/* [PRUMODOCKCENTRO 06/ago/2026] o cronômetro parava em UM TERÇO da barra, com
   vão morto à direita. O errado não era o valor das margens, era a conta:
   havia TRÊS `margin: auto` valendo na mesma linha flex — `margin-left` e
   `margin-right` daqui e o `margin-left` do `.topbar-right` logo abaixo (mais
   o `margin-left: auto` da l. 1961, que esta regra já sobrescrevia).
   Flexbox reparte a sobra IGUALMENTE entre todas as margens auto: com três
   valendo, o slot parava a 1/3 do caminho. Margem nunca centraliza — ela
   divide sobra. Com DUAS, a sobra se divide em duas partes iguais e a pílula
   para no meio do VÃO, entre a marca e o grupo da direita.

   ⛔ NÃO trocar por centro absoluto (`left: 50%` + `translateX(-50%)`), que
      foi a primeira proposta. Medido no mockup com as fontes do próprio app:
      o grupo da direita dá ~623 px com 5 a bordo, e o centro geométrico só
      cabe a partir de ~1709 px de barra — acima do MacBook 14" (1512), e o
      piso SOBE a cada pessoa que entra no rádio. Abaixo dele a pílula ocupa
      o mesmo pixel dos controles, e sobreposição some com controle da tela:
      é a Regra A-TER chegando pelo CSS. No fluxo a margem EMPURRA, e empurrar
      aproxima sem esconder. Por isso o centro do vão, que vale em toda tela. */
.topbar-crono-slot { margin-left: auto; margin-right: auto; }
/* o `margin-left: auto` que morava aqui era a TERCEIRA margem: ele roubava um
   terço da sobra para si e era o que deslocava a pílula. Zero não cola o bloco
   na pílula — o `gap: 20px` da `.topbar` continua valendo entre os dois. */
.topbar-crono-slot + .topbar-right { margin-left: 0; }

.topbar-right { gap: 16px; }
/* os três blocos da direita — o barco · para onde ir · você — ganham um vão
   maior ENTRE si do que dentro de si, senão sete controles viram uma fila só. */
.topbar-right > * + * { margin-left: 0; }
.topbar-right .avatar { margin-left: 4px; }

/* [TOPBAR_AVATARES_04SET 04/set/2026] Presença compacta sem o texto
   redundante "N a bordo". O próprio grupo abre a lista nominal; os canais
   privados e a Ponte permanecem alcançáveis dentro dela. */
.radio-barra-bordo {
  position: relative;
  display: inline-flex;
  flex: none;
}
.radio-barra-gatilho {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  border: 1px solid var(--paper-rule);
  background: var(--paper-2);
  color: var(--ink-700);
  font: inherit;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.radio-barra-gatilho:hover,
.radio-barra-gatilho:focus-visible,
.radio-barra-gatilho[aria-expanded="true"] {
  border-color: var(--ink-400);
  background: var(--paper-3);
}
.radio-barra-gatilho:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
.radio-barra-rosto {
  position: relative;
  display: inline-flex;
  flex: none;
}
.radio-barra-vazio {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  color: var(--ink-400);
}
.radio-barra-sobra-desktop,
.radio-barra-sobra-toque {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-500);
}
.radio-barra-sobra-toque { display: none; }
.radio-barra-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--ink-400);
  transform: rotate(0deg);
  transition: transform .14s ease;
}
.radio-barra-gatilho[aria-expanded="true"] .radio-barra-chevron {
  transform: rotate(180deg);
}
.radio-presencas-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 90;
  width: min(304px, calc(100vw - 28px));
  padding: 8px;
  border: 1px solid var(--paper-rule);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-900);
  box-shadow: var(--shadow-lg);
}
.radio-presencas-cab {
  min-height: 34px;
  padding: 3px 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--paper-rule);
}
.radio-presencas-cab strong { font-size: 12px; }
.radio-presencas-cab span {
  font-size: 10.5px;
  color: var(--ink-500);
  white-space: nowrap;
}
.radio-presencas-lista {
  display: grid;
  gap: 3px;
  padding: 5px 0;
  max-height: min(320px, 48vh);
  overflow-y: auto;
}
.radio-presenca-item,
.radio-presencas-ponte {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-800);
  font: inherit;
  cursor: pointer;
}
.radio-presenca-item {
  padding: 5px 7px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
}
.radio-presenca-item:hover,
.radio-presenca-item:focus-visible,
.radio-presencas-ponte:hover,
.radio-presencas-ponte:focus-visible {
  background: var(--paper-2);
  outline: none;
}
.radio-presenca-iniciais {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: none;
  color: var(--on-primary);
  font-size: 9px;
  font-weight: 800;
}
.radio-presenca-texto {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.radio-presenca-texto strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
}
.radio-presenca-texto > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-500);
  font-size: 10px;
}
.radio-presencas-vazio {
  padding: 10px 7px;
  color: var(--ink-500);
  font-size: 11px;
}
.radio-presencas-ponte {
  padding: 7px 9px;
  border-top: 1px solid var(--paper-rule);
  color: var(--primary-500);
  font-size: 11px;
  font-weight: 700;
}
/* fim TOPBAR_AVATARES_04SET */

/* [PRUMODOCKCENTRO 06/ago/2026] a pílula CRESCE NO QUE SOBRA, e só nisso.
   Pedido do Kadu vendo o mockup: "cresce só se tiver espaço sobrando, senão
   fica abreviado". Com os 375 px cravados o nome da tarefa recebe ~131 px
   para ~150 px de texto, e "Navegação Integrada · cap. 2" chegava na tela
   como "Navegação Integrada · ca".

   Três peças, e nenhuma é enfeite:
   · `width: auto` deixa a pílula pedir o tamanho do conteúdo;
   · `min-width: 375px` é o PISO — ela nunca fica menor do que é hoje, então
     isto não pode piorar nenhuma tela;
   · `max-width: 560px` é o TETO — sem ele, num monitor de 1920 a pílula
     comeria a barra inteira, e a folga que o PRUMODOCK abriu voltaria a ser
     preenchida, que é justamente o que ele não quis.
   Quando não há sobra, o `flex: 0 1 auto` do slot encolhe a pílula de volta
   até o piso e o nome abrevia — o comportamento de hoje, sem regressão.

   ⚠️ `flex: 0 1 auto` no nome NÃO é detalhe. Com o `flex: 1` da l. 2039 a
      base do nome é ZERO, e uma pílula `width: auto` não teria conteúdo para
      medir: ela nasceria no mínimo e o nome continuaria cortado.

   ⚠️ ESCOPADO no `.topbar-crono-slot` de propósito. O cronômetro é UMA
      instância só, transportada por portal entre dois hospedeiros — a TopBar
      (prioridade 0) e o leitor `.rr-crono-host` (prioridade 20,
      planejamento.jsx:4762). Mexer em `.rp-crono-pill` solto mudaria os DOIS;
      o leitor continua com os 375 px de sempre.

   ⚠️ E dentro de `min-width: 1281px` porque, abaixo disso, o CRONOELASTICO
      (06/ago, l. 2378-2396) já governa a pílula — 335 px em 1280, `width:
      auto; min-width: 0` em 1100, onde o nome nem aparece. Um seletor de
      duas classes venceria aquelas regras por especificidade e traria de
      volta a colisão de ≤940 px que ele acabou de consertar. */
@media (min-width: 1281px) {
  .topbar-crono-slot .rp-crono-pill    { width: auto; min-width: 375px; max-width: 560px; }
  .topbar-crono-slot .rp-crono-subject { flex: 0 1 auto; }
}

/* janela estreita: a folga volta a ceder antes de qualquer coisa ser cortada.
   O `margin-right: 0` devolve a pílula para o lado do grupo da direita — aqui
   já não há vão para centralizar, e o CRONOELASTICO conta com esse arranjo. */
@media (max-width: 1180px) {
  .topbar-right { gap: 11px; }
  .topbar-crono-slot { margin-right: 0; }
}
@media (max-width: 900px) {
  .topbar-crono-slot { margin-right: 0; }
  .topbar-crono-slot + .topbar-right { margin-left: 12px; }
}
/* fim PRUMODOCK */

/* ==========================================================================
   [MAC_CABECALHO_RESPONSIVO_04SET 04/set/2026]
   Na execucao em MacBook largo, TopBar e faixa do caderno usavam flex com
   margens automaticas. O resultado medido a 1728 CSS px eram ilhas: marca no
   extremo, cronometro perto do centro, radio no outro extremo e um vazio sem
   funcao; embaixo, a barra de progresso parava em 460 px e deixava outra
   clareira antes do estado.

   A solucao e geometria responsiva, nao deteccao de Mac: so entra quando ha
   largura de desktop e ponteiro fino. A TopBar recebe tres areas fluidas e a
   faixa separa identificacao, progresso e acoes. O piso de 1281 fica acima de
   todos os contratos compactos existentes (<=1180, <=1100, <=1000 e
   data-toque), portanto o iPad preserva integralmente o arranjo aprovado. */
@media (min-width: 1281px) and (hover: hover) and (pointer: fine) {
  .solve-topbar-host .topbar {
    display: grid;
    grid-template-columns:
      minmax(110px, 1fr)
      clamp(375px, 34vw, 560px)
      minmax(400px, 1fr);
    column-gap: clamp(18px, 1.6vw, 28px);
  }
  .solve-topbar-host .topbar-brand {
    justify-self: start;
  }
  .solve-topbar-host .topbar-crono-slot {
    width: 100%;
    margin-inline: 0;
    justify-self: stretch;
    justify-content: center;
  }
  .solve-topbar-host .topbar-crono-slot .rp-global-crono,
  .solve-topbar-host .topbar-crono-slot .rp-crono-pill {
    width: 100%;
    min-width: 0;
    max-width: 560px;
  }
  .solve-topbar-host .topbar-right {
    width: max-content;
    margin-left: 0;
    justify-self: end;
  }

}
/* fim MAC_CABECALHO_RESPONSIVO_04SET */

/* ── [LENTEESTREITA 06/ago] A LENTE EM TELA ESTREITA ───────────────────────
   A lente compara DUAS listas lado a lado. Em tela estreita — iPad em pé, e
   qualquer coisa abaixo de ~760px — duas colunas de 50% deixam os nomes do
   edital (mediana 37 caracteres, máximo 123) reduzidos a três palavras e
   reticências, e a comparação, que é o ponto da tela, deixa de ser possível.
   Empilhado é pior que lado a lado num monitor, mas é MUITO melhor que dois
   filetes ilegíveis. O mockup pede exatamente isto a partir de 960px.

   Mora aqui, e não no JSX, porque estilo inline não aceita media query: o
   componente só põe a classe. Sem este arquivo a tela continua funcionando,
   só não reflui — degradação, não quebra. */
@media (max-width: 900px) {
  /* as duas árvores, uma embaixo da outra */
  .cp-lente-cols { grid-template-columns: 1fr !important; }
  .cp-lente-cols > * + * {
    border-left: none !important;
    border-top: 1px solid var(--ink-200);
  }
  /* a faixa do par ativo: CP, elo e livro empilhados */
  .cp-lente-par { grid-template-columns: 1fr !important; }
  .cp-lente-par > .cp-lente-elo {
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--ink-100);
    border-bottom: 1px solid var(--ink-100);
    padding: 5px 0;
  }
}

/* ═══ [PELERESOLVER 08/ago/2026] A PELE DA TELA DE RESOLVER ══════════════════
   Mockup aprovado pelo Kadu antes de qualquer codigo:
   MOCKUP_RESOLVER_MOLDURAS_08AGO.html — moldura "elevada" + letra Jakarta.
   Contrato: CONTRATO_TELA_RESOLVER_08AGO.md. NADA foi removido: so pele e medida.

   ⚠️ ARMADILHA MEDIDA, para quem vier depois: os seletores desta tela sao
   `.question-card` (kit/kit.css:329) e `.question` (ds/colors_and_type.css:523).
   As regras `.q-card` e `.q-stem` DESTE arquivo (~1421 e ~1437) estao MORTAS
   para esta tela: `grep -c 'className="[^"]*q-card'` da ZERO em kit-screens.jsx,
   kit-widgets.jsx, kit-components.jsx e planejamento.jsx. Editar elas parece
   funcionar (portoes verdes, sha coerente) e nao muda um pixel na tela. Nao
   foram removidas porque remover esta fora deste contrato.
   ───────────────────────────────────────────────────────────────────────────── */

/* 1a · CORRECAO DE 08/ago, MEDIDA NA TELA DELE: o teto abaixo estava no lugar
      errado. `.solve-grid.margem-aberta` (~linha 848) tem DUAS classes e vence
      `.solve-grid` com uma — ou seja, exatamente quando a Margem abre, a coluna
      volta a `minmax(0,1fr)` e a linha perde o teto: medido ~1400px de linha no
      print dele. O mesmo valeria para `.duvida-open`. O lugar que vale nos QUATRO
      modos (normal, margem aberta, duvida aberta, foco) e o proprio `.solve-main`.
      `margin-inline:auto` mantem a coluna centrada quando o modo abre a grade em
      uma coluna so. Fica registrado o que NAO esta resolvido: quando a Margem
      abre, o cartao ainda desloca um pouco na horizontal, porque a grade troca de
      template. Isso morre na fase 3, quando a Margem virar lamina sobreposta. */
.solve-main { max-width: 820px; margin-inline: auto; }

/* 1 · A COLUNA DE LEITURA EM 820px — teto de legibilidade decidido em 08/ago,
      igual nos dois aparelhos. Antes: `1fr 220px` dentro de max-width 1180 com
      36px de padding de cada lado = 1108 - 220 - 28 = 860px de linha.
      Dentro de @media (min-width:1081px) DE PROPOSITO: abaixo disso a regra de
      ~linha 813 colapsa a grade em uma coluna, e como este bloco vem depois no
      arquivo, sem o teto de media ele venceria a media query por ordem. */
/* [BARRAUNICA 08/ago/2026] Era `minmax(0,820px) var(--cais-w)` com
   `justify-content: center`: as colunas somavam 894px e ficavam CENTRADAS numa
   faixa de 1180/1240, o que empurrava o trilho para o meio da tela e deixava um
   vazio à direita — exatamente o que o Kadu fotografou em 08/ago. Agora a
   coluna 1 pega o que sobra e quem impõe o teto de 820px é o `.solve-main`
   logo acima, que é o único lugar que vale nos QUATRO modos (normal, margem,
   dúvida, foco). O trilho volta para a borda. */
@media (min-width: 1081px) {
  .solve-grid { grid-template-columns: minmax(0, 1fr) var(--cais-w); justify-content: stretch; }
}
/* 1b · MEDIDO, nao suposto: na faixa 1081-1340 o recuo de 86px de cada lado
      (regra PALETAFIXA de ~linha 817, que existe so porque a paleta flutua ali)
      come 172px de um max-width de 1180 -> a coluna de leitura dava 760px, e o
      teto de 820 nunca era alcancado. Na janela de 1300px do Kadu o item 1
      sozinho nao mudava UM PIXEL. 1240 = 172 de recuo + 820 + 28 de gap + 220
      do painel: o numero minimo que faz o teto valer sem apertar o painel.
      Quando o cais chegar (fase 3) o recuo de 86 morre e este remendo sai com ele. */
/* [BARRAUNICA 08/ago/2026] O remendo `max-width: 1240px` desta faixa saiu com a
   causa: ele existia para compensar os 172px do recuo da PALETAFIXA, e a
   própria nota acima já previa "quando o cais chegar o recuo de 86 morre e este
   remendo sai com ele". A grade não tem mais teto de largura. */

/* 2 · MOLDURA ELEVADA — sem borda; a sombra faz o recorte. A sombra e token de
      tema (var acima), com var(--shadow-md) de reserva para o tema claro. */
.solve-main .question-card {
  border-radius: var(--r-xl);
  padding: 26px 30px 28px;
  background: var(--cartao-fundo, var(--surface));
  box-shadow: var(--sombra-cartao, var(--shadow-md));
}

/* 3 · A LETRA DO ENUNCIADO — sans no lugar do serif. Escopado em `.solve-main`
      para NAO alcancar `.enunciado`, que a mesma regra do ds/ serve em outras 7
      telas (kit-components.jsx). `line-height` NAO entra aqui: o comfort/breu ja
      poem 1.7 com especificidade maior, e 1.7 esta bom — brigar por 1.66 seria
      trocar 0,04 de entrelinha por uma regra de desempate a mais. */
/* 3b · 18,5px -> 17px. Escolha "B" do Kadu em 08/ago, olhando as quatro
      variantes renderizadas lado a lado. Jakarta tem altura-de-x maior que a
      Source Serif: 18,5 sans LE maior que 19 serif, e a palavra dele foi
      "horriveis, muito grande, eu gosto mais minimalista". */
.solve-main .question {
  font-family: var(--font-sans);
  font-size: 17px;
  letter-spacing: -.008em;
}
.solve-main .alt-text {
  font-family: var(--font-sans);
  font-size: 15px;
}

/* [CETELA 08/ago/2026] C/E deixou de ser dois cartões grandes: duas linhas
   Jakarta compactas, com intenção separada. O círculo responde; o texto marca
   confiança. Seleção/gabarito continuam no fundo e na borda da linha, enquanto
   MarcaConfianca permanece visível como segunda camada. */
.ce-answer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ce-answer-line {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid var(--ce-borda, var(--ink-200));
  border-radius: var(--r-md);
  background: var(--ce-fundo, var(--surface));
  color: var(--ce-texto, var(--ink-700));
  transition: background-color 120ms ease, border-color 120ms ease;
}
.ce-answer-line[data-selected="1"] {
  border-width: 2px;
  padding: 5px 9px;
}
.ce-answer-marker,
.ce-answer-text,
.ce-answer-help {
  font-family: var(--font-sans);
}
.ce-answer-marker {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1.5px solid var(--ce-borda, var(--ink-300));
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.ce-answer-marker[aria-pressed="true"] {
  border-color: var(--primary-600);
  background: var(--primary-600);
  color: var(--on-primary, #fff);
  box-shadow: inset 0 0 0 3px var(--primary-100, rgba(255,255,255,.34));
}
.ce-answer-text {
  width: 100%;
  min-height: 30px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.006em;
  cursor: pointer;
}
.ce-answer-help {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--warning-400, #e5b95f);
  border-radius: var(--r-pill);
  background: var(--warning-50, #fffbeb);
  color: var(--warning-800, #854d0e);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.ce-answer-marker:hover:not(:disabled),
.ce-answer-text:hover:not(:disabled),
.ce-answer-help:hover:not(:disabled) {
  transform: none;
  filter: none;
}
.ce-answer-marker:disabled,
.ce-answer-text:disabled {
  cursor: default;
  opacity: 1;
}

/* ═══ [TELAQ1 09/ago/2026] ITEM 1 DA ORDEM — SÓ CSS ═══════════════════════════
   Mockup aprovado: _MOCKUP_TELA_TODA_A_09AGO.html, versão "A · proposta".
   Handoff: _HANDOFF_TELA_QUESTAO_09AGO.md, seção 4, item 1.
   Backup do arquivo antes desta edição: styles.css.PRE_TELAQ1_20260809.bak

   Três coisas aqui, nenhuma toca em JSX. O que NÃO deu para fazer só com CSS
   (e por isso foi para o item 2): o rodapé "Fonte · Detalhes" e o botão
   Responder DENTRO do cartão. Eles são irmãos do `.solve-main`
   (kit-screens.jsx:8331 e :8332), dois níveis ACIMA do `.question-card` — CSS
   não reparenta nó, e fingir com margem negativa quebraria no zoom, que é
   aplicado só no cartão (kit-widgets.jsx:4272).
   ───────────────────────────────────────────────────────────────────────────── */

/* 1a · ALTERNATIVAS C/E COMO PAR INLINE (decisão 6 do handoff).
      Eram duas faixas de largura cheia, uma sob a outra: a linha de 820px
      inteira gasta para dizer "Certo". Agora são duas pílulas do tamanho do
      próprio texto, lado a lado.
      A linha real tem CINCO filhos, não três como o mockup desenhou:
      marcador, texto, `vf-result-label` (✓ Acertou / × Errou),
      `MarcaConfianca` e o botão `Ajuda` (só quando a marca é "dúvida").
      Por isso `flex-wrap` na lista: se os cinco não couberem na largura, as
      pílulas empilham em vez de estourar o cartão. */
.ce-answer-list {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
.ce-answer-line {
  display: inline-flex;
  width: auto;
  min-height: 38px;
  padding: 4px 15px 4px 6px;
  border-radius: var(--r-pill);
}
/* Selecionada engorda a borda em 1px: desconta no padding para a pílula não
   pular de tamanho ao ser escolhida. */
.ce-answer-line[data-selected="1"] {
  padding: 3px 14px 3px 5px;
}
/* O texto era `width:100%` porque a coluna do grid mandava. Em linha, ele
   passa a valer o que mede. `nowrap` porque "Certo"/"Errado" nunca quebram —
   e sem isso a pílula encolheria a letra em janela estreita. */
.ce-answer-line > .ce-answer-text {
  width: auto;
  min-height: 28px;
  white-space: nowrap;
}
.ce-answer-line > .ce-answer-marker {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  font-size: 10.5px;
}

/* 1b · COLUNA CENTRADA NA VERTICAL QUANDO O CONTEÚDO É CURTO (decisão 8).
      MEDIDO, não chutado: `align-content:center` sozinho no `.solve-grid` não
      muda UM PIXEL, porque a grade não tem altura — nenhuma das 14 regras que
      definem `.solve-grid` declara `height` ou `min-height`, e
      `.content.content-solve` é `overflow-y:visible` (~linha 3331 deste
      arquivo). Sem folga, não há o que distribuir.
      A altura vem sem número mágico: `.content` já é `flex:1` dentro de
      `.app-main` (`flex:1`) dentro de `.app-shell` (`min-height:100vh`) —
      kit/kit.css:24-31 e :127. Basta o `.content-solve` virar coluna flex e a
      grade pedir o que sobra. Com enunciado longo a grade cresce, a folga
      acaba e `align-content` volta a se comportar como `start`: a coluna
      sobe sozinha e a rolagem continua igual. Nada de classe condicional.
      Os dois filhos do `.content-solve` são o CadernoAlertBanner e a
      `.solve-grid` (kit-screens.jsx:7989-7991) — o banner mantém a altura
      dele e só a grade estica. */
.content.content-solve {
  display: flex;
  flex-direction: column;
}
.content.content-solve > .solve-grid {
  flex: 1;
  /* [IPAD_EXECUTAR_03SET 03/set/2026] §8 mandava o cartao ao TOPO. REVERTIDO no
     HOTFIX do mesmo dia por decisao D10 do Kadu, verbatim: «eu ja falei que o card
     da questao tem que ser centralizado, ficou muito desajeitada». Volta ao
     `center` de sempre; 820 px e o refluxo com zoom ficam. */
  align-content: center;
}

/* 1c · O AVISO DA FAINA DEIXA DE COBRIR O "DEIXAR PENDENTE" (decisão 8).
      O aviso NÃO é desta tela: é o `CapsulaAviso`, montado global em
      kit-components.jsx:1234, com `.avc-capsula{position:fixed;bottom:20px}`
      (CSS dele em kit-components.jsx:4527+). A barra de baixo é
      `.solve-bottombar`, sticky `bottom:12` com `z-index:40`
      (kit-screens.jsx:8498) e pílula de ~46px — ou seja, o topo dela fica a
      ~58px do fim da janela e a cápsula, a 20px, entra por baixo dela.
      Decidido em 09/ago: NÃO mover o componente (ele serve todas as telas).
      Só afastar, e só aqui. `body:has()` é o único jeito de escopar por tela
      sem tocar em JSX — não existe marcador de rota no body/html deste app
      (conferido: zero `document.body.classList`, zero `data-tela`).
      Se algum dia o app rodar em motor sem `:has()`, esta regra simplesmente
      não aplica e o aviso volta a ficar onde está hoje — degrada, não quebra.
      `.avc-porque` (o "porquê", que vive 46px acima da cápsula) sobe junto. */
body:has(.content-solve) .avc-capsula { bottom: 76px; }
body:has(.content-solve) .avc-porque  { bottom: 122px; }

/* Foco não pode esconder a lâmina que acabou de ser chamada. A combinação
   vence o modo foco apenas enquanto a ajuda está aberta. */
.solve-grid.foco-on.duvida-lamina,
.solve-grid.foco-on.cais-aberto {
  max-width: 1304px;
  grid-template-columns: minmax(0, 820px) minmax(366px, 406px);
}

/* ═══ [TELAQ2 09/ago/2026] ITEM 2 DA ORDEM — aplicado no styles.css · o JSX ainda não ══════
   Mockup aprovado: _MOCKUP_TELA_TODA_A_09AGO.html, versão "A · proposta",
   faixa "3 · barra falante".

   Três movimentos, e os três precisam de JSX junto (por isso não couberam no
   item 1, que era só-CSS):
     2a · o que é do CADERNO sobe para uma faixa de largura total da janela,
          irmã do `.content` e logo abaixo da topbar;
     2b · o que é DESTA QUESTÃO vira a CABEÇA DO CARTÃO — mesma caixa, mesma
          borda, escalando com o zoom;
     2c · o rodapé (`Fonte · Detalhes` e o CTA) DESCE para dentro do cartão.
   ───────────────────────────────────────────────────────────────────────── */

/* 2a · A FAIXA DO CADERNO ────────────────────────────────────────────────────
      Ela é IRMÃ do `.content`, nunca filha: `styles.css` (bloco TELAQ1)
      enumera literalmente os dois filhos esperados do `.content-solve`, e um
      terceiro filho quebraria a centragem vertical do item 1 em silêncio.
      No JSX ela entra como primeiro filho do `.solve-screen-scope`, que é
      `display:contents` — some da caixa e vira filha direta do `.app-shell`,
      exatamente onde a topbar a deixa.

      `sticky` e não `static`: no mockup o `.content` é o scrollport e a faixa
      nunca sai da vista. No app o `.content-solve` é `overflow-y: visible` de
      propósito (comentário do CAIS, ~linha 3429) — quem rola é o documento.
      Sem `sticky` a faixa subiria com a página e o nome do caderno sumiria
      justamente quando se rola para ler o gabarito.
      `top: 56px` = a altura da topbar (kit.css:38-48), que é sticky em 0.
      `z-index: 9` fica UM abaixo da topbar (10): elas nunca se cruzam, mas se
      cruzarem a topbar vence, que é a ordem que o olho espera. */
.cad-faixa {
  position: sticky;
  top: 56px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  flex: none;
  padding: 0 22px 0 68px;
  background: var(--surface);
  border-bottom: 1px solid var(--paper-rule);
}
/* 🔴 MEDIDO NO ARNÊS, não copiado do mockup: no mockup o `.content` não tem
   recuo e 36px alinham a faixa com a coluna. No app o `.content` tem
   `padding: 24px 32px` (kit.css:127) e o `.solve-grid` tem mais 36px por
   dentro — a borda esquerda do conteúdo está a 68px, não a 36. Com os 36 do
   mockup a faixa nasceria 32px à esquerda da coluna, e é o tipo de desalinho
   de 32px que se vê e não se explica.
   Em janela estreita o `study-experience.css` troca os 36 do grid por 20 e
   depois por 12: 32+20 = 52 e 32+12 = 44.
   As media queries são ABERTAS (só `max-width`) de propósito — cerca fechada
   que intercepte 1081-1340px é o que o `_tests/test_toque_nao_vaza.py` reprova. */
@media (max-width: 1080px) {
  .cad-faixa { padding-left: 52px; padding-right: 20px; }
}
@media (max-width: 720px) {
  .cad-faixa { padding-left: 44px; padding-right: 12px; gap: 10px; }
}

.cad-faixa-sair {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--ink-600); padding: 4px 6px; border-radius: 6px;
  flex: none; white-space: nowrap;
}
.cad-faixa-sair:hover { color: var(--ink-900); background: rgba(255,255,255,.05); }
.cad-faixa-nome {
  font-size: 13.5px; font-weight: 700; color: var(--ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch;
}
.cad-faixa-pastilha {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-500);
  background: var(--paper-2); border: 1px solid var(--paper-rule);
  border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap;
}
/* O meio ENCOLHE antes de tudo (`min-width:0` + `flex:1 1 …`): quando a janela
   aperta, quem some é a barra, não o nome do caderno nem o acerto. */
.cad-faixa-meio {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 260px; max-width: 460px; min-width: 0; margin-left: 8px;
}
.cad-barra {
  height: 6px; border-radius: 999px; background: var(--ink-100);
  overflow: hidden; display: flex; flex: 1 1 auto; min-width: 60px;
}
.cad-barra i { display: block; height: 100%; }
.cad-barra i.c { background: var(--result-correct-border); }
.cad-barra i.w { background: var(--result-wrong-border); }
.cad-faixa-conta {
  font-size: 11.5px; color: var(--ink-500); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cad-faixa-conta b {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink-900);
}
/* [FAIXAPE 12/ago/2026] O `margin-left:auto` MUDOU DE DONO. Ele passou para a
   `.cad-faixa-medida` — o 86%, o chip de estado e o zoom —, que é o bloco que
   desce para a segunda linha quando a faixa dobra. O `.cad-faixa-fim` (☆, CP,
   ⋮) continua colado nela em tela larga, e em tela estreita sobe para a
   primeira linha, ao lado do nome do caderno. Em tela larga a ORDEM na tela é
   a mesma de sempre: 86% · acerto · estado · zoom · ☆ · CP · ⋮. */
.cad-faixa-medida { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.cad-faixa-fim { display: flex; align-items: center; gap: 10px; flex: none; }
/* A cor do % só acende quando diz alguma coisa: verde >=70, vermelho <50,
   e no meio ele fica com a tinta normal do texto. Número colorido que está
   sempre colorido para de ser sinal. */
.cad-pct {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -.01em;
  color: var(--ink-900);
}
.cad-pct.baixo { color: var(--danger-700); }
.cad-pct.alto  { color: var(--success-700); }
.cad-rot {
  font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-400); white-space: nowrap;
}
.cad-kebab {
  background: none; border: 0; cursor: pointer; color: var(--ink-500);
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1;
  padding: 4px 8px; border-radius: 6px;
}
.cad-kebab:hover { background: rgba(255,255,255,.05); color: var(--ink-900); }

/* 🔴 O TRILHO PRECISA DESCER JUNTO — senão ele cola POR BAIXO da faixa.
      `.cais` e `.cais-lamina` são `sticky; top: 80px` (styles.css ~3491 e
      ~3516), e aquele 80 é 56 da topbar + 24 do padding do `.content`. A faixa
      de 42px entra ENTRE os dois e não muda esse cálculo sozinha.
      Escopado em `.solve-screen-scope` — que já existe no JSX e é
      `display:contents` (não vira caixa, mas continua valendo como ancestral
      em seletor) — para não alcançar as outras ~20 telas:
      `.cais.cais-global{top:80px}` serve gente que não tem faixa nenhuma.
      ⚠️ [DESPTRILHO2 12/ago/2026] este parágrafo dizia `.cais-aba{top:96px}` e
      isso deixou de valer: o puxador passou a ser centrado na vertical
      (`top:50%` + `translateY(-50%)`) e não depende mais de faixa nenhuma. */
/* ⚠️ `:has(.cad-faixa)` NÃO é enfeite — é o que deixa esta folha entrar no
   `styles.css` ANTES do JSX sem mexer em nada. Sem a condição, o trilho desceria
   42px hoje mesmo, contra uma faixa que ainda não existe, e abriria um rasgo
   branco no topo do cais em todas as questões. Com ela, a regra dorme até o
   markup chegar. `:has()` já é precedente aqui (o `body:has(.content-solve)` do
   TELAQ1); em motor sem suporte a regra simplesmente não aplica — degrada, não
   quebra. */
.solve-screen-scope:has(.cad-faixa) .cais,
.solve-screen-scope:has(.cad-faixa) .cais-lamina { top: 122px; }
.solve-screen-scope:has(.cad-faixa) .cais-lamina { max-height: calc(100vh - 150px); }
.solve-screen-scope:has(.cad-faixa) .solve-grid.cais-aberto:not(.cais-fixo) .cais-lamina { top: 122px; max-height: calc(100vh - 150px); }

/* ═══ [FAIXAPE 12/ago/2026] A FAIXA DOBRA EM DUAS LINHAS QUANDO A LARGURA APERTA ═
   Mockup aprovado pelo Kadu: `MOCKUP_FAIXA_IPAD_12AGO.html`, variante A.

   O DEFEITO: a faixa era uma linha só de 42px SEM quebra, e todo o lado direito
   era `flex:none` — não cedia um pixel. Só o `.cad-faixa-meio` encolhia. No iPad
   em pé (~820px) a barra de progresso e o "8 de 49 · resta ~49m" acabavam por
   baixo do "86%", e o nome do caderno virava "RA…". O próprio bloco 3e deste
   arquivo previu isto em 07/ago ("se o iPad em pé rachar a faixa em duas
   linhas…") e deixou o passo declarado sem executar. Rachou.

   ⚠️ DOBRAR É "QUANTO CABE", NÃO "COMPORTAMENTO" — por isso é media query de
   LARGURA e não `html[data-toque]`. Uma janela estreita do Mac dobra também, e
   é o certo: o defeito é de largura, não de aparelho. A cerca é ABERTA (só
   `max-width`), como manda o comentário acima e o `test_toque_nao_vaza.py`.

   COMO NÃO DUPLICA DOM: em tela larga as duas linhas são `display:contents` —
   elas somem como caixa e os filhos voltam a ser itens do MESMO flex de sempre.
   Nada de renderizar o 86% duas vezes e ter dois estados para manter em pé.

   O FIO ENTRE AS LINHAS é um `::before` absoluto, e não um `border-top`, porque
   a faixa tem `padding-left` de 68/52/44px: um border pararia no padding e
   deixaria um fio curto, torto, começando no meio do nada. */
/* ⚠️ ESTA REGRA VEM ANTES DA MEDIA QUERY, e não depois: as duas têm a mesma
   especificidade (uma classe), então quem estiver por último vence. Depois da
   cerca, o `display:contents` reapareceria dentro dela e a faixa nunca
   dobraria — bug mudo, sem erro no console. */
.cad-faixa-l1, .cad-faixa-l2 { display: contents; }
@media (max-width: 1000px) {
  .cad-faixa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 42px 42px;
    height: auto;
    column-gap: 14px;
    align-items: center;
  }
  .cad-faixa-l1 { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
  .cad-faixa-fim { grid-column: 2; grid-row: 1; }
  .cad-faixa-l2 { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 12px; min-width: 0; }
  .cad-faixa-l2::before {
    content: ''; position: absolute; left: 0; right: 0; top: 42px;
    height: 1px; background: var(--paper-rule);
  }
  /* A primeira linha é inteira do nome: sem o teto de 34ch ele para de virar
     "RA…", que era metade da reclamação. */
  .cad-faixa-nome { max-width: none; }
  .cad-faixa-meio { max-width: none; }
  /* O TRILHO DESCE JUNTO — mesma conta de 42px do bloco acima, agora somada
     duas vezes: 122 + 42 = 164. Sem isto o cais cola POR BAIXO da segunda
     linha, que é exatamente o rasgo que a regra de 122px existe para evitar. */
  .solve-screen-scope:has(.cad-faixa) .cais,
  .solve-screen-scope:has(.cad-faixa) .cais-lamina { top: 164px; }
  .solve-screen-scope:has(.cad-faixa) .cais-lamina { max-height: calc(100vh - 192px); }
  .solve-screen-scope:has(.cad-faixa) .solve-grid.cais-aberto:not(.cais-fixo) .cais-lamina { top: 164px; max-height: calc(100vh - 192px); }
}

/* [MAC_CABECALHO_RESPONSIVO_04SET] Esta parte vem DEPOIS da regra-base e da
   cerca <=1000 por necessidade de cascata: a primeira bancada mostrou que o
   mesmo seletor, declarado antes de `.cad-faixa { display:flex }`, perdia o
   empate e deixava a barra presa aos 460 px antigos. Em desktop largo os dois
   embrulhos passam a ser areas reais; no iPad a media nem casa. */
@media (min-width: 1281px) and (hover: hover) and (pointer: fine) {
  .cad-faixa {
    display: grid;
    grid-template-columns: max-content minmax(260px, 1fr) max-content;
    column-gap: clamp(18px, 1.8vw, 32px);
  }
  .cad-faixa-l1,
  .cad-faixa-l2 {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .cad-faixa-l1 { gap: 12px; }
  .cad-faixa-l2 { gap: 16px; }
  .cad-faixa-meio {
    flex: 1 1 auto;
    max-width: none;
    margin-left: 0;
  }
  .cad-faixa-medida { margin-left: auto; }
  .cad-faixa-fim { justify-self: end; }
}

/* [CABECALHO_CADERNO_CENTRO_04SET 04/set/2026] Decisão posterior do dono:
   a faixa passa a ter duas linhas também quando há largura sobrando. A de cima
   identifica o caderno e deixa "questão atual de total" no centro óptico; a
   de baixo usa a largura para progresso, acerto e estado. A estimativa de
   minutos não existe mais no DOM — o cronômetro global continua sendo a fonte
   de tempo. Este bloco é a autoridade final e vem depois das geometrias antigas
   de uma linha para ganhar a cascata sem detecção de aparelho. */
.cad-faixa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 42px 42px;
  height: 84px;
  gap: 0;
}
.cad-faixa-l1 {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  width: 100%;
  gap: 14px;
}
.cad-faixa-l1-inicio {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
}
.cad-faixa-identidade {
  /* A faixa conserva recuos diferentes (68px a esquerda, 22px a direita)
     para alinhar Sair e CP aos respectivos blocos da tela. Se este item
     participar das colunas do grid, esses recuos deslocam o centro em 23px.
     Ancorado na propria faixa, ele fica no centro real da janela sem mexer
     nos controles laterais. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 0;
  max-width: min(58vw, 760px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  justify-self: center;
}
.cad-faixa-identidade .cad-faixa-nome {
  min-width: 0;
  max-width: none;
}
.cad-faixa-identidade .cad-faixa-conta {
  flex: none;
  padding-left: 12px;
  border-left: 1px solid var(--paper-rule);
}
.cad-faixa-l1 .cad-faixa-fim {
  /* A identidade absoluta nao ocupa uma celula no auto-placement; sem a
     coluna explicita, o CP seria promovido para a coluna central. */
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.cad-faixa-l2 {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) max-content;
  align-items: center;
  min-width: 0;
  gap: clamp(16px, 2vw, 32px);
}
.cad-faixa-l2::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--paper-rule);
}
.cad-faixa-l2 .cad-faixa-meio {
  flex: none;
  max-width: none;
  margin-left: 0;
}
.cad-faixa-l2 .cad-faixa-medida {
  margin-left: 0;
  justify-self: end;
}
.solve-screen-scope:has(.cad-faixa) .cais,
.solve-screen-scope:has(.cad-faixa) .cais-lamina {
  top: 164px;
}
.solve-screen-scope:has(.cad-faixa) .cais-lamina {
  max-height: calc(100vh - 192px);
}
.solve-screen-scope:has(.cad-faixa) .solve-grid.cais-aberto:not(.cais-fixo) .cais-lamina {
  top: 164px;
  max-height: calc(100vh - 192px);
}
@media (max-width: 720px) {
  .cad-faixa-l1 { gap: 8px; }
  .cad-faixa-l1-inicio { gap: 6px; }
  .cad-faixa-identidade { gap: 7px; max-width: 48vw; }
  .cad-faixa-identidade .cad-faixa-conta { padding-left: 7px; }
  .cad-faixa-l2 { gap: 10px; }
}
/* fim CABECALHO_CADERNO_CENTRO_04SET */

/* 2b + 2c · O CARTÃO ACOPLADO ───────────────────────────────────────────────
      O `.question-card` deixa de ser uma caixa com respiro por dentro e passa
      a ser um recipiente de três faixas: cabeça, corpo e rodapé. O padding
      sai do cartão e vai para o corpo — é isso que faz a cabeça encostar na
      borda e o rodapé assentar no pé, como no mockup.
      Vale só com a classe `qs-acoplado` para que o `.question-card` continue
      servindo as outras telas que o usam sem cabeça nem rodapé. */
.solve-main .question-card.qs-acoplado {
  padding: 0;
  gap: 0;
}
/* 🔴 `overflow: hidden` no cartão seria o jeito óbvio de o canto arredondado
   recortar a cabeça e o rodapé — e seria um erro. O cartão hospeda painéis
   `position: absolute` (o menu do ⋮, o seletor de flag, o popover do CP), e
   `overflow:hidden` os APAGA em vez de deixá-los sair.
   MEDIDO POR PIXEL, e só por pixel: um popover vermelho de 200x120 pendurado
   no pé do cartão dá 24.000 pixels vermelhos com `overflow:visible` e
   **0** com `overflow:hidden`. ⚠️ `getBoundingClientRect()` devolve 120px de
   altura NOS DOIS CASOS — clipe é pintura, não leiaute, e um arnês que só lê
   retângulo jura que está tudo bem. Foi assim que eu quase carimbei o
   contrário; ficou aqui para a próxima frente não repetir.
   O canto se resolve onde o problema realmente está — cada faixa arredonda o
   próprio canto. */
.qs-cab {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-bottom: 1px solid var(--paper-rule);
  background: rgba(0,0,0,.15);
}
.qs-cab .qs-cab-fim { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.qs-cab .qs-div { width: 1px; height: 20px; background: var(--ink-200); flex: none; }
.qs-corpo {
  padding: 18px 28px;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
/* O cronômetro perde o rótulo "NESTA QUESTÃO" (decisão 5 do handoff): ele
   ocupava duas linhas para dizer o que o anel já diz. O texto vai para o
   `title`. Aqui fica só a forma compacta. */
.qs-crono {
  display: inline-flex; align-items: center; gap: 7px; color: var(--ink-700);
  white-space: nowrap;
}
.qs-crono .anel {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--ink-300); flex: none;
}
.qs-crono .t {
  font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* CP discreto (decisão 4): sai a moldura, sai a palavra "na tela", a chave
   encolhe de 26x15 para 22x12. O texto inteiro vai para o `title`. */
.qs-cp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 4px; border: 0; background: none; color: var(--ink-400);
  font: inherit; font-size: 11px; cursor: pointer; border-radius: var(--r-pill);
}
.qs-cp:hover { color: var(--ink-700); }
.qs-cp .tr {
  width: 22px; height: 12px; border-radius: 999px; padding: 2px;
  display: inline-flex; flex: none; justify-content: flex-start;
  background: var(--ink-200); box-sizing: border-box;
}
.qs-cp .tr b { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-500); display: block; }
.qs-cp[aria-pressed="true"] { color: var(--ink-700); }
.qs-cp[aria-pressed="true"] .tr { justify-content: flex-end; background: var(--primary-600); }
.qs-cp[aria-pressed="true"] .tr b { background: #fff; }
/* [IPAD_EXECUTAR_03SET 03/set/2026] Item 1 do contrato: no escuro o CP ligado
   pinta em dourado (--cta-*), nao mais no azul de --primary-600. */
html[data-theme="dark"] .qs-cp[aria-pressed="true"] .tr { background: var(--cta-bg); }
html[data-theme="dark"] .qs-cp[aria-pressed="true"] .tr b { background: var(--cta-fg); }

/* O rodapé assenta no pé do cartão. `margin-top:auto` NÃO entra: o cartão não
   tem altura fixa, e forçar o rodapé para baixo criaria vazio em questão curta
   — exatamente o rasgo que o item 1 acabou de fechar. */
.qs-rodape {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--paper-rule);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  padding: 11px 28px 12px;
  background: rgba(0,0,0,.12);
}
.qs-rodape .qs-rodape-dir {
  margin-left: auto; display: flex; align-items: center; gap: 12px;
  flex-wrap: nowrap; white-space: nowrap; min-width: 0;
  font-size: 11.5px; color: var(--ink-500);
}
.qs-rodape .qs-rodape-dir b { color: var(--ink-600); }
.qs-rodape-abrir { color: var(--link, #8fb6d8); font-weight: 700; cursor: pointer; }
/* O CTA, enquanto o item 4 não entrar. Com "resposta direta" o C/E já responde
   e este botão deixa de existir — a regra fica, inerte, para o estado
   intermediário (item 2 publicado, item 4 ainda não). */
.qs-rodape .qs-cta {
  background: var(--primary-cta, var(--primary-600)); border: 0; color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 10px 20px; border-radius: 10px; cursor: pointer;
}
.qs-rodape .qs-cta:disabled { background: var(--ink-150); color: var(--ink-400); cursor: default; }
/* [IPAD_EXECUTAR_03SET 03/set/2026] Item 1 do contrato: no escuro o CTA do
   rodape pinta em dourado (--cta-*) em vez do azul --primary-cta/600. */
html[data-theme="dark"] .qs-rodape .qs-cta { background: var(--cta-bg); color: var(--cta-fg); }
html[data-theme="dark"] .qs-rodape .qs-cta:hover { background: var(--cta-bg-hover); }
html[data-theme="dark"] .qs-rodape .qs-cta:disabled { background: var(--cta-disabled-bg); color: var(--cta-disabled-fg); }

/* 2c-bis · OS DOIS NÓS QUE DESCERAM TRAZEM MARGEM DE QUANDO ERAM SOLTOS.
      `.qa-bar` tem `margin-top:18px` e `.qa-proveniencia` tem `margin-top:12px`,
      declarados no `<style>` de uma linha só do kit-screens.jsx. Ali em cima
      aquilo era respiro entre blocos irmãos; aqui dentro do rodapé vira um
      degrau. Zerado só quando estão dentro do rodapé — soltos, em qualquer
      outra tela, continuam com o respiro deles. */
.qs-rodape .qa-bar { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.qs-rodape .qa-proveniencia { margin-top: 0; flex: none; }

/* ═══ [TELAQ3 09/ago/2026] ITEM 3 — o que subiu para a faixa ═══════════════════
      Mockups aprovados: `MOCKUP_TELAQ2_ITEM3_FAIXA_v4_09AGO.html` (leiaute) e
      `MOCKUP_TELAQ2_BOTAO_AVANCAR_v5_09AGO.html` (o botao que avanca).
      Blindado como o bloco do TELAQ2: cada regra so morde quando o no NOVO
      existe. Sem ele, nada aqui aplica — e `:has()` casa com no escondido, entao
      testar isto com `display:none` nao testa nada; o estado real de "ainda nao
      existe" e' o no NAO EXISTIR (licao medida na TELAQ2CSS). */

/* 3a · [reescrito em TELAQUESTAO_CP_REFINO 22/ago/2026] A CABECA DO CARTAO.
      Caminho, subtopico do livro e selo CP formam uma unica trilha; o relogio
      compacto ocupa a segunda coluna. O selo nao ganha mais uma linha propria:
      nome completo e endereco ficam no hover e a cor continua sendo o estado
      canonico. O `min-width:0` segue obrigatorio para caminhos longos nao
      empurrarem o relogio. */
.qs-cab { display: grid; grid-template-columns: minmax(0,1fr) auto;
          column-gap: 16px; align-items: center; }
.qs-cab .pm-trilha-linha { grid-column: 1; grid-row: 1; min-width: 0; }
.qs-cab .qs-cab-fim { grid-column: 2; grid-row: 1; justify-self: end; }

/* 3b · O QUE E' DA QUESTAO, DENTRO DA FAIXA DO CADERNO.
      ☆ e CP moram na faixa agora, mas continuam sendo DESTA questao — e a faixa
      inteira ao redor deles e' do caderno. O fio a esquerda e' o que separa as
      duas naturezas sem precisar de rotulo. */
.cad-faixa .cad-faixa-questao {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding-left: 8px; margin-left: 4px;
  border-left: 1px solid var(--paper-rule);
}

/* 3c · O RODAPE: fonte a ESQUERDA, acao a DIREITA, mesma linha.
      Os dois slots ja existiam desde o item 2c — o `-esq` nascia vazio e as duas
      coisas moravam juntas no `-dir`. Agora cada um no seu. O `-dir` cresce e
      empurra o proprio conteudo para o fim; o `-esq` nao encolhe o texto da
      fonte antes da hora. */
.qs-rodape .qs-rodape-esq {
  display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0;
  font-size: 11.5px; color: var(--ink-500);
}
.qs-rodape .qs-rodape-esq b { color: var(--ink-600); }

/* ── [CARDTRILHADUVIDA_09SET · 09/set/2026 · PARTE 2] A BANDEIRINHA ───────
   O acesso ao modo «marcar trecho» ANTES de responder. Ela morava aqui ate'
   07/set; saiu junto com a segunda peca de diagnostico (DIAGUNICO_TELA_07SET,
   ordem do dono: uma peca so'), e o acesso pre-resposta saiu de carona, porque
   o botao que sobrou vive dentro de um painel que so' nasce com o gabarito.
   Volta so' o ACESSO: continua havendo UM painel e UMA lista de motivos.

   ⛔ SO' O SIMBOLO, sem rotulo de texto. Ordem do dono, verbatim, 09/set:
   «eh so pra adicionar o simbolo da bandeirinha sem o "marcar o trecho", como
   ja era antes». O nome vive no `title`/`aria-label` — a mesma regra do card:
   «nao eh pra omitir informacao, tem o rover pra isso». */
.qs-rodape .qs-duv-band {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--ink-400, var(--ink-500)); cursor: pointer; line-height: 0;
}
.qs-rodape .qs-duv-band:hover,
.qs-rodape .qs-duv-band:focus-visible {
  color: var(--ink-700, var(--ink-600)); border-color: var(--ink-300); outline: none;
}
.qs-rodape .qs-duv-band[aria-pressed="true"] {
  color: var(--danger-600, #bd3030); border-color: currentColor;
}

/* A barra que explica o modo ligado. Nasce colada acima do rodape, e existe
   nos DOIS momentos — antes e depois de responder — porque o botao tambem. */
.qs-duv-marcabar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 8px 11px;
  border: 1px solid var(--ink-300); border-radius: 8px;
  font-size: 12px; color: var(--ink-600);
}
.qs-duv-marcabar b { font-size: 12.5px; }
.qs-duv-marcabar .qs-duv-mini { color: var(--ink-500); font-size: 11.5px; }
.qs-duv-marcabar .qs-duv-concluir {
  margin-left: auto; flex: none; cursor: pointer;
  padding: 5px 13px; border-radius: 6px;
  border: 1px solid var(--ink-300); background: transparent;
  font: inherit; font-size: 12px; color: var(--ink-700, var(--ink-600));
}
.qs-duv-marcabar .qs-duv-concluir:hover { border-color: var(--ink-500); }

.qs-rodape:has(.qs-rodape-esq > *) .qs-rodape-dir {
  margin-left: auto; flex: 1 1 auto; justify-content: flex-end;
}

/* 3d · O ⋮ e' unico, e o menu dele NAO DANCA.
      Lei do `MOCKUP_CARTAO_PADRAO_V3_OPUS`, aprovada: item de estado fica no
      mesmo slot, apagado quando nao vale. Sem isto o menu mudava de altura
      conforme o caderno deixasse ou nao mexer na trava. */
.cad-faixa [role="menu"] button[disabled] { opacity: 1; }

/* 3e · O ZOOM NA FAIXA.
      Mesma peca de sempre (`.qs-nav-btn`), so que agora ela vive numa faixa que
      pode apertar. Se o iPad em pe rachar a faixa em duas linhas — o defeito que
      matou a regua antiga —, o proximo passo declarado e' esconder o "80%" e
      deixar so os dois botoes, com o numero no `title`. NAO fiz isso agora: nao
      medi rachadura nenhuma, e regra que resolve problema que nao existe e'
      exatamente o tipo de coisa que ninguem consegue remover depois. */
.cad-faixa .qs-nav-btn { flex: none; }

/* [TELAQUESTAO_CP_REFINO_22AGO] Zoom e ações saíram da faixa e usam a lâmina
   existente do Cais. O painel mantém os mesmos gatilhos e só reorganiza a
   superfície; favorito e CP continuam expostos no topo. */
.cais-acoes-questao { gap: 14px; }
.cais-acoes-zoom {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 10px 12px; border: 1px solid var(--paper-rule);
  border-radius: 10px; background: var(--paper-2);
}
.cais-acoes-zoom > div:first-child { min-width: 0; }
.cais-acoes-zoom strong { display: block; font-size: 12.5px; color: var(--ink-800); }
.cais-acoes-zoom > div:first-child span {
  display: block; margin-top: 2px; font-size: 10.5px; color: var(--ink-400);
}
.cais-acoes-zoom-controles { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.cais-acoes-zoom-valor {
  min-width: 44px; padding: 4px 3px; border: 0; background: transparent;
  color: var(--ink-700); cursor: pointer; font: 700 11.5px var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.cais-acoes-grupo { padding-top: 3px; }
.cais-acoes-grupo + .cais-acoes-grupo {
  border-top: 1px solid var(--paper-rule); padding-top: 12px;
}
.cais-acoes-explica {
  display: block; margin-top: 2px; color: var(--ink-500); font-size: 10.5px;
  line-height: 1.4;
}
.cais-acoes-admin {
  float: right; margin-top: 1px; padding: 1px 6px; border: 1px solid var(--ink-200);
  border-radius: 999px; color: var(--ink-400); font-size: 9px; font-weight: 800;
  letter-spacing: .06em;
}
.cais-acoes-ritmo {
  margin-top: 4px; padding: 9px 10px; border-top: 1px solid var(--ink-100);
  color: var(--ink-500); font-size: 11px; font-variant-numeric: tabular-nums;
}
.cais-acoes-ritmo strong { color: var(--ink-700); }

/* A navegação inferior separa pular para outra questão de abandonar a atual.
   O fio evita que dois rótulos longos pareçam uma única frase. */
.sbb-acoes-direita {
  justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0;
}
.sbb-pendente {
  display: inline-flex; align-items: center; margin-left: 2px; padding-left: 12px;
  border-left: 1px solid var(--paper-rule);
}
@media (max-width: 720px) {
  .sbb-acoes-direita { flex-wrap: wrap; justify-content: flex-end; }
  .sbb-pendente { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* 2d · A ASSIMETRIA DE 84px QUE O ITEM 1 DEIXOU DECLARADA ────────────────────
      O item 1 mediu o cartão ~60px acima do centro óptico e escreveu que isso
      "morre sozinho no item 2, quando o qa-bar descer para dentro do cartão".
      MEDIDO no arnês: não morre. Com o `qa-bar` dentro do cartão sobra
      exatamente `.solve-main { padding-bottom: 84px }` (styles.css:836) — a
      reserva para a `.solve-bottombar` sticky não cobrir o fim do gabarito.
      Ela é padding do FILHO, então entra na altura da trilha da grade e o
      `align-content: center` a conta como conteúdo: 84px de peso morto embaixo.

      O conserto não é número chutado — é mudar de caixa. A mesma reserva,
      posta como `padding-bottom` da PRÓPRIA GRADE, fica FORA da caixa de
      conteúdo que o `align-content` distribui: a rolagem continua sobrando os
      mesmos 84px no fim, e a centragem passa a ser simétrica.
      Escopado no `.content-solve` para não alcançar as outras telas que usam
      `.solve-main`. */
/* ⚠️ Mesma trava: só com o cartão acoplado. Enquanto o `qa-bar` ainda estiver
   FORA do cartão, mover a reserva mudaria a centragem de hoje sem nada em troca. */
.content.content-solve:has(.qs-acoplado) .solve-main { padding-bottom: 0; }
.content.content-solve:has(.qs-acoplado) > .solve-grid { padding-bottom: 84px; }

/* ═══════════════════════════════════════════════════════════════════════════
   [CAIS 08/ago/2026] O CAIS — um trilho só na borda direita da tela de resolver
   ═══════════════════════════════════════════════════════════════════════════
   Quatro coisas disputavam esta borda: o trilho do caderno (coluna de 220px), a
   tira da Margem (14px colada no cartão), a paleta de Ferramentas e o painel de
   Dúvida (320-360px). Cada frente consertou a sua e apertou a do vizinho.
   Agora são ÍCONES no mesmo trilho de 46px, e todos abrem na MESMA superfície,
   um por vez.

   Mac  : lâmina ao lado do trilho, dentro da coluna direita da grade — a mesma
          geometria que o CETELA já publicou para a Dúvida, reaproveitada.
   iPad : `html[data-toque]` põe o painel EM FLUXO abaixo da questão (.cais-folha).
          O trilho continua na direita, só mais largo (52px) para caber o alvo
          de 44px do dedo. Ver estudo/toque-mode.css.

   Aparelho é `data-toque`. Largura só decide quanto cabe — portão
   _tests/test_toque_nao_vaza.py cobra isso e nenhuma regra daqui usa @media de
   faixa fechada.

   Nada usa `position: fixed`: foi `fixed` dentro de contêiner com `transform`
   que matou a tentativa anterior do trilho.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══ [CAISFOLGAROLAGEM 19/ago/2026] A FOLGA DA BARRA DE ROLAGEM ═════════════
   Mockup aprovado: `MOCKUP_CAIS_ROLAGEM_19AGO.html`, saída B. Pedido verbatim
   dele, 19/ago: «esse CAIS global nao ta legal, clico nele e a barra de rolagem
   que pega e nao abre as vezes» — e, entre as três saídas: «B.SEMPRE».

   O DEFEITO: o scrollport do app é INTERNO (`.content`, kit/kit.css:127,
   `overflow-y:auto`) e vai até a borda direita da janela. A barra é ESTILIZADA
   (`::-webkit-scrollbar { width:11px }`, styles.css:1830) e barra estilizada no
   WebKit OCUPA LAYOUT e CAPTURA PONTEIRO. O puxador (`.cais-aba`, 22px) e o
   trilho (`.cais.cais-global`, 46px) moram os dois em `right: 0`, exatamente
   ali. A barra ganha o `mousedown` mesmo com `z-index: 900` — o clique NUNCA
   CHEGA ao botão. Não é `pointer-events`, não é `z-index`, não é o "clique
   fora" do `useCais`. E o "às vezes" é exato: só existe barra quando a tela
   transborda; no Passadiço, a tela mais longa do app, falha SEMPRE.

   A DOUTRINA: a folga entra no PRÓPRIO `--cais-w`, e não em 12 ancoragens
   espalhadas. Quem já lia `var(--cais-w)` segue sozinho — as colunas de grade
   do Resolver, a `.cais-global-lamina`, o recuo da tela alfinetada, a lâmina
   solta do Resolver, a barra e o painel do Rabisco, o critério e o PQT do
   `planejamento.jsx`. Sobram DUAS regras à mão (o `padding-right` do trilho e a
   largura do puxador) e UMA medida em JS (`rpMedirFolgaRolagem`, app.jsx).

   ⚠️ O PADRÃO `0px` NÃO É ZELO, é a rede de segurança: se a medida do JS nunca
   rodar (navegador sem barra de layout, teste, bundle antigo em cache), TUDO
   fica exatamente como está hoje. Zero regressão por construção.

   ⚠️ NO IPAD `--cais-w` NÃO PASSA POR AQUI, e isto é medido, não suposto:
   `estudo/toque-mode.css:1347` escreve `html[data-toque] { --cais-w: 52px }` —
   valor CHATO, e ele SOBRESCREVE este `calc` por especificidade ((0,1,1) contra
   (0,1,0)), o que independe da ordem de carga das folhas. A sobrescrita é
   CONHECIDA E DESEJADA: no toque a barra de rolagem é fantasma, a folga medida é
   0, e 52 + 0 = 52 — o alvo de 44px do dedo não perde um pixel. Se algum dia a
   derivação precisar alcançar o toque, a mudança é naquele arquivo, não neste.
   ⛔ Os comentários de :3886 e :4437 que prometem os 52px DIZEM A VERDADE. A
   varredura que desenhou esta frente concluiu que "ninguém escreve esses 52px"
   e ERROU — ela pulou o `estudo/toque-mode.css`, que é exatamente o arquivo que
   o comentário de :3887 manda ler. Conferido no disco em 19/ago/2026.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --cais-nu: 46px;                 /* o trilho NU, sem a folga */
  --rp-largura-barra-rolagem: 11px; /* barra visual; fallback do overlay */
  --rp-folga-rolagem: 0px;         /* MEDIDA em JS no boot; 0 = igual a hoje */
  --cais-w: calc(var(--cais-nu) + var(--rp-folga-rolagem));
  /* [MKTRILHO 27/ago/2026] A LARGURA DA ABA, como variavel. O numero nao e novo: e o
     mesmo `calc(22px + var(--rp-folga-rolagem))` que a `.cais-aba` ja usa
     (procure `.cais-aba {` neste arquivo) — aqui ele ganha nome porque a
     COLUNA da grade precisa medir a mesma peca quando o trilho esta recolhido.
     A `.cais-aba` NAO foi alterada de proposito: ela e peca compartilhada e
     tem rotulo cobrado por portao. No toque a variavel e sobrescrita em
     `estudo/toque-mode.css`, ao lado do `--cais-w: 52px` — e la, e nao aqui,
     porque `data-toque` decide COMPORTAMENTO (CLAUDE.md, 08/ago).
     ⚠️ E o valor de la NAO e os 28px que o mockup pediu: a regra generica do
     TOQUEALVO (`html[data-toque] button`, min-width `var(--toque-alvo)`) da
     44px de largura minima a aba. Medido no Chrome em 27/ago; o porque esta
     escrito no comentario daquele arquivo. */
  --cais-aba-w: calc(22px + var(--rp-folga-rolagem));
}

/* Só na tela de resolver, o `.content` deixa de ser scrollport. Ver o comentário
   longo em kit-screens.jsx, no `content-solve`: ele é `overflow-y: auto` mas
   nunca rola, e um scrollport que não rola engole o `position: sticky` de tudo
   que está dentro dele. A barra de baixo (`.solve-bottombar`) já escapava disso
   por acidente — ela mora FORA do `.content`. O trilho não tem essa saída.
   `overflow-x` continua `visible` por herança do padrão: nada aqui era clipado
   por esta caixa (conferido no arnês, antes e depois). */
.content.content-solve {
  /* [TINTAQUESTAO 12/ago/2026] `relative` existe por UMA razao: a camada de
     tinta e filha desta caixa e se posiciona por ela. Sem isto ela se
     penduraria no primeiro ancestral posicionado — que hoje nao existe —
     e acabaria medindo a JANELA em vez do conteudo, que e exatamente o
     defeito que esta frente veio tirar. Nao muda leiaute de ninguem:
     `position: relative` sem deslocamento nao move nada. */
  position: relative;
  overflow-y: visible;
  /* [IPADSWIPE 12/ago/2026] O dedo pode rolar e pinçar normalmente, mas o
     navegador não disputa o eixo horizontal com o virador de questão. Esta
     decisão precisa valer ANTES do pointerdown; pôr touch-action no move chega
     tarde no WebKit. A trava temporária da Apple Pencil continua soberana:
     enquanto ela vive, o motor põe `touch-action:none` no elemento raiz. */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: none;
  /* [BARRAUNICA 08/ago/2026] O `.content` tem `padding: 0 32px` (kit.css) e é
     ele quem impedia o trilho de encostar de fato na borda direita da janela:
     medido no arnês, 116px de vazio à direita em 1440. Só na tela de resolver,
     e só do lado direito — o recuo da esquerda continua sendo o respiro da
     leitura. */
  padding-right: 0;
}

/* A coluna da direita tem DUAS medidas: fechada é só o trilho; aberta cabe o
   trilho E a lâmina. Os 366-406px = os 320-360px que a lâmina da Dúvida já
   tinha desde o CETELA, + os 46 do trilho, + os 12 de gap da doca — a lâmina
   NÃO encolheu, só passou a dividir a coluna. Mede-se por classe e não por
   largura de tela: quem decide é ter painel aberto, não o tamanho da janela. */
/* [BARRAUNICA 08/ago/2026] A LÂMINA TEM DOIS JEITOS DE EXISTIR, e quem escolhe
   é o alfinete no cabeçalho dela (`caisFixo`, kit-screens.jsx).

   SOLTA (padrão) — a grade NÃO muda de template. A lâmina sai do fluxo e desliza
   por cima, `position: fixed` encostada no trilho. É isto que responde ao pedido
   do Kadu de 08/ago: a coluna da questão não encolhe quando um painel abre.
   `fixed` e não `absolute` de propósito: dentro do `.content` (que é
   `overflow-y:auto` e nunca rola) o `sticky` dos filhos fica inerte — o achado
   do CAIS, mesma manhã — e `fixed` não depende de scrollport nenhum.

   FIXA — volta a ser coluna de verdade e a questão acomoda ao lado. Só aqui a
   grade abre a segunda coluna. Sem `max-width`: a grade não tem mais teto (ver
   BARRAUNICA na base, ~linha 799); quem limita a leitura é o `.solve-main`. */
.solve-grid.cais-aberto.cais-fixo {
  grid-template-columns: minmax(0, 1fr) minmax(366px, 406px);
  gap: 22px;
}
.solve-grid.cais-aberto:not(.cais-fixo) .cais-lamina {
  position: fixed;
  top: 80px;
  right: calc(var(--cais-w) + 14px);
  width: 360px;
  max-height: calc(100vh - 108px);
  z-index: 60;
  box-shadow: -18px 0 44px rgba(15, 33, 54, .34);
}

/* [CANAL16GRANDE 10/ago/2026 - E1+E2] A LARGURA DO CANAL 16, e SO dele.
   Opcoes E1 e E2 do MOCKUP PENDENTES/MOCKUP_CANAL16_V2_08AGO.html, escolhidas
   pelo Kadu em 10/ago ("a versao que da mais destaque"). As duas convivem
   porque respondem a estados DIFERENTES do mesmo alfinete:

     SOLTA (padrao, desliza por cima)  -> E2: 360 -> 520px. Medido no arnes do
       mockup: a leitura fica nos 820px em 1512, 1440, 1300, 1280 e 1180 -
       alargar o solto custa ZERO pixel da questao, porque ele nao esta no
       fluxo. E 520 e 80px mais largo que o popover de 440 que o radio tinha
       antes de virar icone do trilho: pela primeira vez a lamina GANHA do
       popover em vez de perder.

     FIXA (alfinetada, questao ao lado) -> E1: a coluna vai de 406 a
       calc(100% - 842px), ou seja a lamina de 348 ate 544px. 842 = 820 de
       leitura + 22 de gap. 100% e nao 100vw de proposito: resolve contra a
       caixa de conteudo da propria grade (ja sem os 68px de recuo) e e imune
       a barra de rolagem classica. A regra se trava sozinha - em grade, um
       maximo menor que o minimo e ignorado, e a 1316px ou abaixo ela devolve
       exatamente os 406 de hoje. Zero regressao em janela estreita, sem
       @media nenhum (o portao test_toque_nao_vaza continua satisfeito).

   ⚠️ [CANAL16MOTOR 10/ago/2026] AQUI MORAVA `:has([data-rp-radio-painel="trilho"])`,
   e ele SAIU. A frente CANAL16GRANDE preferiu o atributo a uma classe para nao
   tocar em `kit-screens.jsx`; a economia custou a funcao inteira. As duas regras
   dependiam de tres coisas ao mesmo tempo: o motor entender `:has()`, o portal do
   `RadioBordo` JA ter escrito o atributo, e o motor RE-AVALIAR o `:has()` do
   ancestral quando esse no aparece depois (o painel entra por
   `ReactDOM.createPortal`, nunca no mesmo commit que a lamina). Medido em Chromium
   real: funciona. Medido pelo Kadu no app (pywebview = WKWebView): a lamina ficou
   nos 360 de antes. Um seletor que depende de re-avaliacao de `:has()` sobre
   conteudo portado nao e' contrato — e' aposta.

   Agora quem diz "este painel e' o radio" e' a PROPRIA tela, no mesmo render em
   que ela decide o painel: `.cais-radio` no `.solve-grid` (kit-screens.jsx,
   `caisPainel === 'radio'`). Nao ha portal no meio, nao ha `:has()`, e o seletor
   e' o mesmo em qualquer motor. O `data-rp-radio-painel` CONTINUA existindo e
   continua sendo o que o portao mede — ele so' parou de mandar na largura.
   Caderno, margem e ajustes nao leem nenhuma das duas regras: continuam em 360
   e 366-406. */
.solve-grid.cais-aberto.cais-radio:not(.cais-fixo) .cais-lamina {
  width: min(520px, calc(100vw - 420px));
}
.solve-grid.cais-aberto.cais-fixo.cais-radio {
  grid-template-columns: minmax(0, 1fr) minmax(406px, calc(100% - 842px));
}

/* A doca é a coluna direita inteira: lâmina + trilho, lado a lado.
   [CAIS 08/ago/2026] Quem GRUDA são os filhos, não a doca — e isso foi medido,
   não escolhido. Com `position: sticky` na doca e `align-items: start` na
   grade, a doca ficava com a ALTURA DO PRÓPRIO CONTEÚDO (~250px): sticky não
   tem onde grudar dentro de uma caixa do tamanho dele mesmo, e o trilho subia
   para fora da tela na primeira rolagem — medido no arnês, topo do cais em
   -269px no iPad. `align-self: stretch` dá à doca a altura da linha inteira, e
   aí o sticky de cada filho tem percurso. É o mesmo `top: 80px` que o
   `.review-nav` e o `.duvida-panel` já usavam. */
.cais-doca {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  align-self: stretch;
}
.cais-lamina {
  flex: 1 1 auto;
  min-width: 0;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-lg);
  padding: 14px;
  animation: cais-lamina-entra 180ms ease-out both;
}
@keyframes cais-lamina-entra {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cais-lamina { animation: none; }
}

/* O trilho não tem altura elástica de propósito: `flex: none` e nada de
   `align-self: stretch`. Era `flex:1` + stretch que virou a "agulha de página
   inteira" na tentativa anterior, porque no app a linha tem ~1500px e no
   mockup tinha 340. */
.cais {
  flex: 0 0 var(--cais-w);
  width: var(--cais-w);
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* [CAISFOLGAROLAGEM 19/ago/2026] É ESTA LINHA que tira os ÍCONES da faixa
     morta da barra de rolagem. A caixa cresce `--rp-folga-rolagem` (porque
     `--cais-w` já a carrega) e o `padding-right` empurra o conteúdo o mesmo
     tanto para dentro. Os ícones continuam 36px e centrados; eles só ANDAM 11px
     para a esquerda, que é o objetivo. Conta com `box-sizing: border-box`
     (styles.css:94), então `width: var(--cais-w)` é o total.
     ⚠️ `.cais` é COMPARTILHADA com o trilho tátil do iPad
     (`<nav className="cais">`, kit-screens.jsx). Com a folga medida em 0 no
     toque, `6px 0px 6px 0` é byte-a-byte o de hoje. NÃO escrever regra separada
     para o toque — foi regra separada por aparelho que produziu o vai-e-vem de
     "ajuste de iPad piorou o Mac". */
  padding: 6px var(--rp-folga-rolagem) 6px 0;
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-lg);
}
/* [BARRAUNICA 08/ago/2026] O trilho ENCOSTA na borda direita: a grade perdeu o
   `padding-right` (ver a base) e o trilho perde o canto e a linha desse lado,
   para não desenhar uma moldura contra o vazio. É a mesma solução que a tira de
   14px usava antes de morrer — a forma sobreviveu à peça. */
.cais {
  border-right: none;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
/* Empurra o Ajustes para o pé do trilho: preferência não disputa o olho com as
   ferramentas da questão. Sem `flex:1` no `.cais` — ver a nota do CAIS acima
   sobre a "agulha de página inteira". */
.cais-fim { flex: 1 0 12px; min-height: 12px; }
.cais-cab .fixar {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink-400);
  cursor: pointer;
}
.cais-cab .fixar:hover { background: var(--paper-2); color: var(--ink-700); }
/* No Mac o alfinete é o primeiro dos dois botões, então é ELE quem empurra o
   par para a direita. No iPad o alfinete não existe (a superfície é folha em
   fluxo) e o `.fechar` continua empurrando sozinho, como o CAIS publicou. */
.cais-cab .fixar { margin-left: auto; }
.cais-cab .fixar + .fechar { margin-left: 0; }
.cais-cab .fixar[aria-pressed="true"] {
  background: var(--primary-600);
  color: var(--on-primary, #fff);
}
.cais-bt {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-500);
  cursor: pointer;
}
.cais-bt:hover { background: var(--paper-2); color: var(--ink-800); }
.cais-bt[aria-pressed="true"] {
  background: var(--primary-600, #0B4275);
  border-color: var(--primary-600, #0B4275);
  color: var(--on-primary, #fff);
}
/* o pontinho de "tem coisa aqui dentro" — sem ele ninguém lembra que escreveu */
.cais-pino {
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary-600, #0B4275);
}
.cais-bt[aria-pressed="true"] .cais-pino { background: var(--on-primary, #fff); }
.cais-sep {
  flex: none;
  width: 22px;
  height: 1px;
  margin: 4px 0;
  background: var(--paper-rule);
}

/* cabeçalho comum aos quatro painéis */
.cais-cab {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--paper-rule);
}
.cais-cab .tit {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.cais-cab .sub {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.cais-cab .fechar {
  border: 0;
  background: none;
  color: var(--ink-400);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  line-height: 1;
  display: grid;
  place-items: center;
}
.cais-cab .fechar:hover { background: var(--paper-2); color: var(--ink-800); }

/* No iPad o mesmo painel entra EM FLUXO, logo abaixo da questão. Sem overlay,
   sem transform, sem segunda coluna — mesma gramática da ajuda do CETELA. */
.cais-folha {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}

/* ── o CADERNO dentro da superfície ────────────────────────────────────────
   O .review-nav vira conteúdo: perde o sticky, a moldura e o padding, porque
   quem os tem agora é a lâmina (ou a folha) em volta dele. */
.cais-lamina .review-nav,
.cais-folha .review-nav {
  position: static;
  top: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: 12px;
}
.cais-lamina .review-nav-head,
.cais-folha .review-nav-head { display: none; }

/* GRADE LEVE — hipótese 1 das NOTAS, aprovada em 08/ago. A versão com fundo
   chapado em três cores foi reprovada ("grosseiro e desproporcional"): 24
   células quadradas de ~57px viravam parede de botão colorido. Aqui a célula é
   NÚMERO EM PAPEL e o estado é um traço embaixo. Some quase todo o peso visual
   e não se perde uma informação sequer.
   Escopo dentro de .cais-*: o .nav-cell continua como era em toda outra tela. */
.cais-lamina .nav-grid.wide,
.cais-folha .nav-grid.wide {
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}
.cais-lamina .nav-cell,
.cais-folha .nav-cell {
  position: relative;
  height: 34px;
  min-height: 34px;
  padding: 0 0 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  border-radius: var(--r-sm);
  color: var(--ink-500);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cais-lamina .nav-cell::after,
.cais-folha .nav-cell::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
}
.cais-lamina .nav-cell:hover,
.cais-folha .nav-cell:hover { background: var(--paper-2); color: var(--ink-800); }
.cais-lamina .nav-cell.hit,
.cais-lamina .nav-cell.miss,
.cais-lamina .nav-cell.answered,
.cais-lamina .nav-cell.visited,
.cais-folha .nav-cell.hit,
.cais-folha .nav-cell.miss,
.cais-folha .nav-cell.answered,
.cais-folha .nav-cell.visited { color: var(--ink-800); }
.cais-lamina .nav-cell.hit::after,
.cais-folha .nav-cell.hit::after { background: var(--result-correct-fg); }
.cais-lamina .nav-cell.miss::after,
.cais-folha .nav-cell.miss::after { background: var(--result-wrong-fg); }
.cais-lamina .nav-cell.answered::after,
.cais-folha .nav-cell.answered::after { background: var(--ink-400); }
.cais-lamina .nav-cell.visited::after,
.cais-folha .nav-cell.visited::after { background: var(--ink-200); }
/* "marcada com F" não é estado de acerto: fica um ponto no alto, não um traço,
   pra poder conviver com certo/errado na mesma célula. */
.cais-lamina .nav-cell.marked::before,
.cais-folha .nav-cell.marked::before {
  content: "";
  position: absolute;
  top: 4px; right: 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--result-marked-border);
}
.cais-lamina .nav-cell.current,
.cais-folha .nav-cell.current {
  color: var(--ink-900);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--ink-300);
}
.cais-lamina .nav-cell.current::after,
.cais-folha .nav-cell.current::after { background: var(--ink-600); width: 17px; }
/* as amostras da legenda seguem a mesma gramática: o traço é a legenda */
.cais-lamina .nav-cell.sample,
.cais-folha .nav-cell.sample {
  width: 18px;
  height: 14px;
  min-height: 14px;
  padding: 0;
}
.cais-lamina .nav-cell.sample::after,
.cais-folha .nav-cell.sample::after { bottom: 5px; }

/* ── o painel FERRAMENTAS ──────────────────────────────────────────────────
   As três ferramentas existem e funcionam desde julho, atrás de uma tira de
   14px na borda e de atalhos que ninguém descobre sozinho. Aqui elas ganham
   nome, ícone e atalho escrito. A paleta flutuante continua onde está: este
   painel FALA com ela pelo evento `rp:ferramenta`, não a substitui. */
.cais-fr { display: flex; flex-direction: column; gap: 7px; }
/* [BARRAUNICA 08/ago/2026] O destino do portal da paleta. Largura cheia do
   painel; a barra em si já vem sem moldura (style inline em kit-screens.jsx). */
#rp-ajustes-slot { display: block; width: 100%; }
#rp-ajustes-slot .study-tool-palette button { border-radius: 9px; }
.cais-fr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-md);
  cursor: pointer;
}
.cais-fr-item:hover { border-color: var(--ink-300); background: var(--surface); }
.cais-fr-item .nm { display: block; font-size: 13px; font-weight: 600; color: var(--ink-800); }
.cais-fr-item .ds { display: block; font-size: 11px; color: var(--ink-500); margin-top: 1px; }
.cais-fr-item kbd {
  margin-left: auto;
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--paper-2);
  border: 1px solid var(--paper-rule);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 3px 6px;
  color: var(--ink-500);
}

/* ── o painel MARGEM ──────────────────────────────────────────────────────
   Só a caixa: a tira de 14px e o painel de coluna de 264px saíram. A mecânica
   de gravação (debounce de 900ms, espelho em localStorage, save/get/del pela
   ponte) NÃO foi tocada — mudou quem abre, não o que grava. */
/* A ajuda (TiraDuvidasPanel) é a única superfície que traz a própria moldura:
   ela já é `.duvida-panel`, com borda e sticky próprios — e o sticky dela
   CONTINUA, pelo mesmo motivo do trilho (ver .cais-doca acima). Aqui ela só
   ganha o direito de ocupar o resto da coluna ao lado do trilho. */
.cais-doca > .duvida-panel {
  flex: 1 1 auto;
  min-width: 0;
}
.cais-margem { display: flex; flex-direction: column; min-height: 240px; }
.cais-dica { font-size: 11px; color: var(--ink-400); margin-top: 10px; line-height: 1.55; }


/* ══════════════════════════════════════════════════════════════════════════
   [TRILHOGLOBAL 08/ago/2026] A BARRA PASSA A EXISTIR NO APP INTEIRO.

   Decisão dele, 08/ago, olhando o mockup (leitura "C"): FORA da execução do
   caderno NÃO existe coluna nenhuma. Fica uma aba fininha encostada na borda
   direita; clicando nela o trilho desliza POR CIMA do conteúdo.

   Por que `fixed` e não coluna: `className="app-shell"` é montado 21 vezes
   (11 em kit/kit-screens.jsx, 9 em app.jsx, 1 em planejamento.jsx). Não existe
   shell único, e fazer 21 telas reservarem 46px seria refatoração de verdade.
   O caminho barato tem precedente vivo e MEDIDO nesta casa: a engrenagem que
   esta barra substitui já era `position: fixed` (`.twk-fab`, right:16px,
   bottom:16px, z-index 2147483646). A peça muda, a técnica é a mesma.

   ⚠️ O trilho da TELA DE RESOLVER continua sendo COLUNA DA GRADE — o
   `.solve-grid` reserva `var(--cais-w)` e nada disto aqui vale lá. São duas
   peças com a mesma cara e papéis diferentes; a barra global se apaga quando a
   tela de resolver está montada, senão haveria dois trilhos na mesma borda.

   ⚠️ Largura, recuo e coluna da grade têm UM dono: este arquivo. O
   `study-experience.css` carrega DEPOIS com a mesma especificidade e já mordeu
   duas vezes em 08/ago. Se alguma medida daqui não obedecer, procure lá antes
   de duvidar deste arquivo.

   z-index 900: deliberadamente ABAIXO do RabiscoOverlay (9998) — quando o
   rascunho está aberto ele é uma folha por cima de TUDO, inclusive desta barra,
   e é assim que tem de ser.
   ══════════════════════════════════════════════════════════════════════════ */

/* A aba — o estado recolhido, e o único que existe fora do caderno por padrão. */
.cais-aba {
  position: fixed;
  right: 0;
  /* [DESPTRILHO2 12/ago/2026] O puxador fica no MEIO da borda direita, nao
     colado no topo. `top:50%` + `translateY(-50%)` e' seguro AQUI e so' aqui:
     a `.cais-aba` e' uma folha — um <button> com um <svg> dentro, sem
     descendente nenhum. A MESMA tecnica na `.cais-doca` nao seria: `transform`
     cria bloco de contencao para `position: fixed` descendente, e a lamina
     hospeda conteudo de terceiros por portal. Foi `fixed` dentro de conteiner
     com `transform` que matou a tentativa anterior do trilho — esta' escrito
     no NOTAS_MOCKUP_CAIS_08AGO.md. Ver a nota da doca, mais abaixo. */
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  /* [CAISFOLGAROLAGEM 19/ago/2026] A CAIXA cresce a folga e cresce PARA A
     ESQUERDA (`right: 0` é fixo); o `padding-right` mantém o ícone onde ele
     sempre esteve, porque `place-items: center` o centra na caixa de CONTEÚDO.
     Resultado medido no papel, com barra de 11px: hoje a borda direita do ícone
     cai a 5,5px da janela — DENTRO dos 11px da barra. Depois ela cai a 13,5px —
     FORA. E a área clicável passa a ter 22px vivos em vez de 11.
     `right: 0`, `border-right: none` e o raio só do lado esquerdo NÃO MUDAM: o
     cais ENCOSTADO na borda é decisão dele, registrada duas vezes (CAISCURTO e
     DESPTRILHO2, 12/ago). */
  width: calc(22px + var(--rp-folga-rolagem));
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  /* [CAISFOLGAROLAGEM 19/ago/2026] depois do `padding: 0` de propósito — a
     ordem importa, senão o zero apaga a folga. */
  padding-right: var(--rp-folga-rolagem);
  cursor: pointer;
  color: var(--ink-500);
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  /* mesma solução do trilho encostado: sem borda nem canto do lado que toca a
     janela, para não desenhar moldura contra o vazio */
  border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.cais-aba:hover { background: var(--paper-2); color: var(--ink-800); }
.cais-aba:focus-visible { outline: 3px solid var(--focus-ring-color, #0e4f88); outline-offset: 2px; }

/* O trilho global aberto. Herda TODA a aparência de `.cais` (46px, superfície,
   borda, raio, botões 36x36, gap 4px) e só troca a ancoragem: lá é
   `position: sticky` dentro da grade, aqui é `fixed` contra a janela. */
.cais.cais-global {
  position: fixed;
  right: 0;
  top: 80px;
  z-index: 900;
  max-height: calc(100vh - 104px);
  box-shadow: -10px 0 28px rgba(0, 0, 0, .22);
}

/* O painel Ajustes da barra global. Mesma ideia da lâmina do cais: desliza POR
   CIMA e o conteúdo da tela NÃO encolhe — nenhuma das 21 telas sabe que esta
   barra existe, então nenhuma pode ser obrigada a ceder espaço. */
.cais-global-lamina {
  position: fixed;
  right: var(--cais-w);
  top: 80px;
  bottom: 24px;
  z-index: 899;
  width: 340px;
  max-width: calc(100vw - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-lg);
  box-shadow: -12px 0 34px rgba(0, 0, 0, .34);
}
.cais-global-lamina .cais-cab {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

/* iPad: `--cais-w` já vira 52px por `html[data-toque]`, e o `right` da lâmina
   acompanha sozinho porque é a MESMA variável — não repetir o número aqui. */
html[data-toque] .cais-global-lamina { bottom: 16px; max-width: calc(100vw - 96px); }
/* [CAISFOLGAROLAGEM 19/ago/2026] `calc` e não 28px chato: mesma conta do Mac,
   e com a folga medida em 0 no toque o resultado é exatamente 28px. */
html[data-toque] .cais-aba { width: calc(28px + var(--rp-folga-rolagem)); height: 64px; }

/* ═══════════════════════════════════════════════════════════════════════════
   [MKTRILHO 27/ago/2026] RECOLHER O TRILHO DEVOLVE A COLUNA
   ═══════════════════════════════════════════════════════════════════════════
   O DEFEITO, medido pela MKTRILHO em 13/ago e reconferido em 27/ago: a
   `.solve-grid` reserva `var(--cais-w)` (46px + folga) na segunda coluna, e a
   doca do trilho e `position: fixed` — logo NAO e item da grade. Recolhido, o
   que sobra na tela e a `.cais-aba` de 22px, e a coluna continuava medindo os
   46. Recolher o trilho nao devolvia UM PIXEL de leitura.

   O MECANISMO e o do mockup `_gestor/entradas/MOCKUP_TRILHO_REMEDIDO.html`
   (secao 6, "O que este desenho decidiu"), e nao um terceiro caminho:

     · encolhe POR ATRIBUTO no <html> (`data-cais-recolhido`), nunca por faixa
       de pixel — o iPad Air em paisagem tem 1180px, largura de janela comum de
       Mac, e regra por largura pegaria os dois (CLAUDE.md, 08/ago). O atributo
       tem DOIS escritores, um por superficie: o `useCais` (app.jsx) no Mac e a
       `SolveScreen` (kit/kit-screens.jsx) no iPad, porque la o estado do trilho
       e outro e o `CaisGlobal` nao monta na questao (`toque && naQuestao`);
     · encolhe para a LARGURA DA ABA, nao para zero: zero encostaria a leitura
       no gume da janela. A coluna passa a medir a peca que existe;
     · ABERTO, nada muda. Toda a mudanca vive dentro de um estado que ate hoje
       nao tinha CSS nenhum. Sem o atributo o app fica byte a byte como estava,
       e desfazer e tirar o atributo — nenhuma linha daqui precisa voltar.

   ⚠️ `:not(.duvida-lamina)`: com a ajuda aberta no Mac a segunda coluna deixa
   de ser calha e passa a HOSPEDAR a lamina (366-406px, ~linha 4274). Encolher
   ali comeria o painel. O `duvida-fluxo` do iPad nao tem esse problema (o
   painel desce em fluxo) e esta coberto na folha do toque.
   ⚠️ A `.solve-bottombar` repete esta grade, mas ela mora num `<style>` dentro
   do `kit/kit-screens.jsx` e abaixo de 1081px colapsa em UMA coluna — por isso
   a regra dela vem com teto de media e sem `foco-on`/`duvida-open`, que ja tem
   template proprio la.
   ⚠️ O `gap: 20px` da grade NAO muda: o mockup encolheu a coluna e so. A
   leitura e centrada dentro da coluna 1 pelo `.solve-main` (max-width 820 +
   margin-inline auto), entao o gap nao aparece como faixa colada ao cartao.
   ⛔ NAO DECIDIDO por ele, e portanto NAO implementado aqui: a pergunta 3 do
   mockup — com a calha encolhida, a leitura de 820px deve continuar centrada na
   coluna 1 (e andar ~12px ao recolher) ou ficar fixa nos dois estados? Como
   esta, ela continua centrada, que e o comportamento de hoje.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-cais-recolhido] .solve-grid:not(.duvida-lamina) {
  grid-template-columns: minmax(0, 1fr) var(--cais-aba-w);
}
/* O recolhimento do Cais e estado anterior da casca; a sessao de foco vence e
   fica com uma coluna so. A largura/left medidos preservam a geometria. */
html[data-rp-focus-session="questao"] .solve-grid.foco-on {
  grid-template-columns: minmax(0, 1fr);
}
html[data-rp-focus-session="questao"] .app-corpo.cais-aberto.cais-fixo .app-tela {
  padding-right: 0;
}
@media (min-width: 1081px) {
  html[data-cais-recolhido] .solve-bottombar:not(.duvida-open):not(.foco-on) {
    grid-template-columns: minmax(0, 1fr) var(--cais-aba-w);
  }
}

/* ── [TRILHOGLOBAL 08/ago/2026] "QUAL É O MEU NOTURNO", dentro do Ajustes ──
   Confortável, Breu e GitHub deixam de ser irmãos do Claro e viram SABORES do
   noturno. A amostra é meio fundo, meio destaque, porque Breu e GitHub têm o
   MESMO `--bg` (#111216) e só se distinguem pelo destaque — bolinha de cor
   sólida faria dois botões idênticos na tela. Valores lidos dos arquivos reais
   (ds/colors_and_type.css, comfort-mode.css, breu-mode.css, github-mode.css). */
.rp-noturno-lista { display: flex; flex-direction: column; gap: 6px; }
.rp-noturno-opc {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; cursor: pointer; text-align: left;
  background: none; color: var(--ink-800);
  border: 1px solid var(--paper-rule); border-radius: var(--r-md);
}
.rp-noturno-opc:hover { background: var(--paper-2); }
.rp-noturno-opc.is-on { border-color: var(--primary-600); box-shadow: inset 0 0 0 1px var(--primary-600); }
.rp-noturno-opc:focus-visible { outline: 3px solid var(--focus-ring-color, #0e4f88); outline-offset: 2px; }
.rp-noturno-amostra {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
}
.rp-noturno-amostra[data-noturno="dark"]    { background: linear-gradient(135deg, #14253D 55%, #5BA0E0 55%); }
.rp-noturno-amostra[data-noturno="comfort"] { background: linear-gradient(135deg, #21232a 55%, #7ea7d2 55%); }
.rp-noturno-amostra[data-noturno="breu"]    { background: linear-gradient(135deg, #15191d 55%, #a8acb0 55%); }
.rp-noturno-amostra[data-noturno="github"]  { background: linear-gradient(135deg, #17181b 55%, #ddbc6f 55%); }
.rp-noturno-amostra[data-noturno="equilibrado"] { background: linear-gradient(135deg, #17181b 55%, #5b9ce6 55%); }
.rp-noturno-amostra[data-noturno="profundo"]    { background: linear-gradient(135deg, #101114 55%, #77b5fa 55%); }
.rp-noturno-amostra[data-noturno="naval"]       { background: linear-gradient(135deg, #101820 55%, #77b9ee 55%); }
.rp-noturno-amostra[data-noturno="conforto"]    { background: linear-gradient(135deg, #1b1917 55%, #e2b970 55%); }
/* [DOURADOMODO 24/ago/2026] O nono. Fundo do "Escuro atual" (#1a1b1e, de
   ds/colors_and_type.css) com o acento em ouro — que e' literalmente o que o
   modo faz. Sem esta linha o dourado e' o unico dos nove com o quadradinho
   VAZIO no seletor de Ajustes. */
.rp-noturno-amostra[data-noturno="dourado"]     { background: linear-gradient(135deg, #1a1b1e 55%, #e0b26a 55%); }
.rp-noturno-txt { display: flex; flex-direction: column; min-width: 0; }
.rp-noturno-txt .nm { font-size: 13px; }
.rp-noturno-txt .ds { font-size: 11px; color: var(--ink-500); margin-top: 1px; }
.rp-noturno-chk { margin-left: auto; color: var(--primary-600); }
.rp-noturno-nota { margin: 8px 0 2px; font-size: 11px; line-height: 1.45; color: var(--ink-500); }
/* [MODODIURNOTDAH 16/ago/2026] As amostras dos DIURNOS. As demais classes do
   seletor (`.rp-noturno-lista/opc/txt/chk/nota`) sao reusadas de proposito: sao
   layout, nao cor, e duplicar geraria duas reguas que desandam separado.
   As cores abaixo sao o `--paper` e o `--primary` medidos de cada paleta em
   `light-palettes.css` — nao sao aproximacoes escolhidas a mao. */
.rp-noturno-titulo { margin: 12px 0 6px; font-size: 11px; font-weight: 600;
                     letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); }
.rp-noturno-amostra[data-diurno="light"]  { background: linear-gradient(135deg, #f4efe6 55%, #2d405c 55%); }
.rp-noturno-amostra[data-diurno="nitido"] { background: linear-gradient(135deg, #eceef3 55%, #17558f 55%); }
.rp-noturno-amostra[data-diurno="sereno"] { background: linear-gradient(135deg, #f0ebe1 55%, #1c5484 55%); }

/* ══════════════════════════════════════════════════════════════════════════
   [MARGEMPENCIL 09/ago/2026] A FOLHA DA MARGEM E A ILHA FLUTUANTE

   A FOLHA tem RAZÃO FIXA (altura = largura × razão do documento) e a altura em
   px é escrita por `style` inline pelo próprio componente, no resize. Ela NÃO
   mora aqui de propósito, e o motivo é mecânico, o mesmo já registrado para a
   caixa de texto da margem: regra de folha não vence style inline. O que mora
   aqui é o que não muda com a medida — empilhamento, moldura e a ilha.

   As DUAS CAMADAS ocupam exatamente a mesma caixa. A de baixo guarda os traços
   já fechados; a de cima, transparente, só o traço em andamento. Só a de cima
   recebe ponteiro — se as duas recebessem, o alvo do evento oscilaria entre
   elas e o `setPointerCapture` perderia o dono do traço no meio.
   ══════════════════════════════════════════════════════════════════════════ */
.margemq-folha {
  position: relative;
  width: 100%;
  /* altura: posta inline pelo componente (largura × razão) */
  border: 1px solid var(--paper-rule, #e2e8f0);
  border-radius: 8px;
  background: var(--paper-2, #fcfcfd);
  overflow: hidden;
  touch-action: pan-y;
}
.margemq-cv {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 8px;
}
.margemq-cv-base { pointer-events: none; }
.margemq-cv-topo { background: transparent; }

/* A ILHA. Ela nasce invisível e só vive perto da ponta — quem a move é o
   componente, escrevendo left/top direto no elemento. Passar a posição por
   estado do React repintaria o componente a cada movimento da Pencil, que é
   exatamente o engasgo que a MARGEMPENCIL veio tirar. */
.margemq-ilha {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  max-width: calc(100% - 12px);
  flex-wrap: wrap;
  border-radius: 999px;
  border: 1px solid var(--paper-rule, #e2e8f0);
  background: var(--surface, #fff);
  box-shadow: 0 8px 26px rgba(15, 33, 54, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms;
}
.margemq-ilha.viva {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 110ms ease-out, transform 110ms ease-out, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .margemq-ilha, .margemq-ilha.viva { transition: none; transform: none; }
}
/* A ilha não pode roubar o traço: o clique nela é intencional, mas o arrasto
   por cima dela tem de continuar sendo desenho. Por isso ela some sozinha em
   2,5s parada e nunca fica sob a ponta (o componente a empurra). */
.margemq-ilha-bt,
.margemq-ilha-cor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: var(--ink-700, #334155);
  cursor: pointer;
}
.margemq-ilha-bt:hover,
.margemq-ilha-cor:hover { background: var(--paper-2, #f6f8fa); }
.margemq-ilha-bt.on {
  border-color: var(--primary-600, #0B4275);
  background: var(--primary-50, #DEEBF6);
}
.margemq-ilha-bt:focus-visible,
.margemq-ilha-cor:focus-visible { outline: 3px solid var(--focus-ring-color, #0e4f88); outline-offset: 1px; }
.margemq-ilha-cor > span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 1px var(--ink-200, #cbd5e1);
}
.margemq-ilha-cor.on > span {
  box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 4px var(--ink-500, #64748b);
}
.margemq-ilha-sep {
  width: 1px;
  height: 20px;
  margin: 0 3px;
  background: var(--paper-rule, #e2e8f0);
  display: block;
}

/* [MARGEMPENCIL3 09/ago/2026] A SONDA. Ela mora dentro da folha, no canto, e só
   existe quando pedida. Existe porque o iPad é o único lugar onde a Pencil
   existe e quem escreve o código não chega lá: sem número na tela, "não dá para
   escrever direito" só rende hipótese. */
.margemq-sonda {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: calc(100% - 16px);
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: #e5e7eb;
  background: rgba(15, 23, 42, .88);
  box-shadow: 0 8px 26px rgba(15, 33, 54, .28);
}
.margemq-sonda b { color: #fff; }

/* O aviso do gesto: uma linha curta, embaixo, que diz o que o gesto fez.
   Gesto que age sem dizer nada é gesto que a pessoa acha que não funcionou. */
.margemq-aviso {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  max-width: calc(100% - 24px);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--surface, #fff);
  background: rgba(15, 33, 54, .86);
}

/* ══════════════════════════════════════════════════════════════════════════
   [CAISGLOBAL 10/ago/2026] O CAIS NA CASCA
   Mockup MOCKUP_CAIS_GLOBAL_v2_10AGO.html, aprovado pelo Kadu antes do código.

   A doca deixou de morar na `SolveScreen` e virou irmã da tela, dentro de
   `.app-corpo`. As classes de estado (`cais-aberto`, `cais-fixo`, `cais-radio`)
   saem no `.app-corpo` — que faz aqui o papel que o `.solve-grid` fazia lá.

   ⚠️ POR QUE A DOCA É `fixed` E NÃO UMA COLUNA DE FLEX.
   `.app-corpo` envolve a tela INTEIRA, e cada tela desenha a própria TopBar lá
   dentro. Uma coluna de flex ao lado dela começaria no topo da janela e
   desenharia o trilho encostado na TopBar, 56px acima do lugar. `fixed` a
   partir de `top:80px` é exatamente o que a `.cais.cais-global` de hoje já faz
   e o que o `.cais` da tela de resolver alcança com `sticky; top:80px` — os 80
   são 56 da topbar + 24 do padding do `.content`. Mantida a medida, mantido o
   alinhamento em todas as ~20 telas, sem tocar em nenhuma.

   É O `padding-right` DA TELA QUE EMPURRA, e é isso que separa solta de
   alfinetada de verdade — não é enfeite de sombra:
     SOLTA      — a doca flutua por cima. O conteúdo não se mexe UM PIXEL.
     ALFINETADA — `.app-tela` ganha o recuo da doca inteira e o conteúdo REFLUI
                  (a grade do Planejamento troca de coluna de verdade).
   ══════════════════════════════════════════════════════════════════════════ */
.app-corpo { position: relative; }
.app-tela { min-width: 0; }

.app-corpo .cais-doca {
  position: fixed;
  top: 80px;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: stretch;
  gap: 0;
  pointer-events: none;
}
.app-corpo .cais-doca * { pointer-events: auto; }

/* ⚠️ [DESPTRILHO2 12/ago/2026] O TRILHO GLOBAL CENTRADO NA VERTICAL — e por que
   a centralização mora numa classe PRÓPRIA e não na regra de cima.

   `.cais-doca` é COMPARTILHADA: a tela de resolver monta uma sob `modoToque`
   (kit/kit-screens.jsx l. 9424, o trilho do iPad). Mexer na regra genérica
   arrastaria o iPad junto, e o iPad não entra nesta frente. `cais-doca-global`
   é escrita só pelo `CaisGlobal` (app.jsx) — é o par exato de `.cais.cais-global`,
   que já faz isso para o trilho.

   `top: 0` (em vez dos 80 da regra genérica) + `align-items: center` colocam o
   trilho no centro EXATO da janela — o mesmo lugar de `top:50%` com
   `translateY(-50%)`, e SEM transform. A diferença não é estética: `transform`
   num ancestral cria bloco de contenção para todo `position: fixed`
   descendente, e a lâmina hospeda conteúdo de terceiros que chega por
   `ReactDOM.createPortal`. Foi `fixed` dentro de contêiner com `transform` que
   matou a tentativa anterior do trilho (NOTAS_MOCKUP_CAIS_08AGO.md). A folha
   solta — a `.cais-aba`, que não tem descendente — usa `translateY` à vontade.

   O `top: 0` não encosta o trilho na TopBar: ele é centrado, não ancorado no
   topo. Com ~10 ícones (≈430px de trilho) numa janela de 900px o topo cai em
   ≈235px; a TopBar termina em 80. */
.app-corpo .cais-doca.cais-doca-global {
  top: 0;
  align-items: center;
}

/* ═══ [CAISCURTO 12/ago/2026] O TRILHO DO IPAD RECEBE O MESMO TRATAMENTO ═════
   Mockup aprovado por ele: `MOCKUP_CAIS_CURTO_12AGO.html`. Pedido verbatim:
   "o cais tb tem que ser do tamanho dos botões que lhe cabe e centralizado no
   lado direito, não precisa ser de teto ao pé".

   O DEFEITO era desigualdade, não desenho: em 12/ago de manhã o DESPTRILHO2
   centrou o trilho do Mac e escreveu, na regra acima, que "o iPad não entra
   nesta frente". Ficou um aparelho certo e o outro de teto ao pé — a doca
   genérica é `top:80px; bottom:0; align-items:stretch`, e o
   `.cais-fim {flex:1}` empurrava o Ajustes até o rodapé.

   Agora o iPad herda exatamente o que o Mac já tinha: `top:0` +
   `align-items:center` centram na janela SEM `transform` (transform num
   ancestral cria bloco de contenção para todo `position:fixed` descendente, e
   foi isso que matou a tentativa de trilho de 08/ago — está no
   NOTAS_MOCKUP_CAIS_08AGO.md).

   `cais-doca-toque` é classe PRÓPRIA, escrita só pela `SolveScreen`, pelo
   mesmo motivo que a `cais-doca-global` é: `.cais-doca` é compartilhada, e
   mexer na genérica arrastaria as duas frentes de uma vez. */
.app-corpo .cais-doca.cais-doca-toque {
  top: 0;
  align-items: center;
}
.app-corpo .cais-doca-toque .cais {
  position: static;
  max-height: none;
  align-self: center;
}
/* O Ajustes continua sendo o ÚLTIMO — só deixa de estar a 600px de distância
   do penúltimo. Um respiro de 10px basta para dizer "este é de outra
   natureza", que é tudo o que o `flex:1` queria dizer. */
.app-corpo .cais-doca-toque .cais-fim { flex: 0 0 10px; min-height: 10px; }

/* O trilho: a tira de ícones colada na direita, sempre visível, em toda tela. */
.app-corpo .cais-doca .cais.cais-global {
  position: static;
  flex: 0 0 var(--cais-w);
  width: var(--cais-w);
  max-height: none;
  /* [DESPTRILHO2 12/ago/2026] era `flex-start` — o trilho nascia colado no
     topo. É esta linha, junto com o `align-items` da doca acima, que o
     centraliza. Segura para o iPad: `cais-global` não existe no trilho de
     `kit-screens.jsx`, que é `<nav className="cais">` puro. */
  align-self: center;
  margin-top: 0;
}

/* A LÂMINA — 520 solta. Um desenho só para os seis painéis: o mockup mostra a
   mesma largura no cabeçalho de todos eles (`lamCont`), e não só no rádio. */
.app-corpo .cais-doca .cais-lamina {
  position: static;
  flex: 0 0 auto;
  width: 520px;
  max-width: calc(100vw - var(--cais-w) - 24px);
  max-height: calc(100vh - 104px);
  /* [DESPTRILHO2 12/ago/2026] a lâmina acompanha o trilho: os dois centrados,
     senão a lâmina abriria no topo e o trilho no meio. `cais-lamina` tem ZERO
     ocorrências em kit-screens.jsx e kit-components.jsx — é exclusiva da doca
     da casca, medido em 12/ago. */
  align-self: center;
  overflow-y: auto;
  box-shadow: -24px 0 48px -18px rgba(15, 33, 54, .55);
}

/* ⚠️ [CANAL16MOTOR2 10/ago/2026 — PRESERVADO] A LARGURA DO RÁDIO NÃO USA `:has()`.
   Quem manda é a classe `cais-radio`, que a casca escreve no `.app-corpo` no
   MESMO render em que decide o painel. Era a tela que a escrevia no
   `.solve-grid`; mudou o dono, não o mecanismo — e o mecanismo é justamente o
   que não pode voltar a depender do motor. Um `:has()` de ancestral sobre
   conteúdo que entra por `ReactDOM.createPortal` funciona em Blink e falha em
   WKWebView, que é o motor do app dele. Foi este o defeito de 10/ago. */
.app-corpo.cais-aberto.cais-radio .cais-doca .cais-lamina {
  width: min(520px, calc(100vw - 420px));
}

/* [CANAL16CHAOATETO 25/ago/2026] Pedido do dono, verbatim: «quero a janela
   grandona do chao ao teto». Só a lâmina GLOBAL do rádio ganha a altura da
   janela; os outros seis painéis e a lâmina da questão permanecem iguais.
   A doca global já mede a viewport inteira (`top:0; bottom:0`), então 12px em
   cada ponta é a moldura mínima. Flex é o que faz só a conversa crescer: o
   cabeçalho, o placar diário e o compositor continuam com altura própria. */
.app-corpo.cais-aberto.cais-radio .cais-doca-global .cais-lamina {
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  align-self: center;
  display: flex;
  flex-direction: column;
}
.app-corpo.cais-aberto.cais-radio .cais-doca-global .cais-lamina > .cais-cab {
  flex: 0 0 auto;
}
.app-corpo.cais-aberto.cais-radio .cais-doca-global .cais-lamina > .cais-corpo,
.app-corpo.cais-aberto.cais-radio .cais-doca-global .cais-lamina .cais-fr,
.app-corpo.cais-aberto.cais-radio .cais-doca-global .cais-lamina #rp-radio-slot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.app-corpo.cais-aberto.cais-radio .cais-doca-global [data-rp-radio-painel="trilho"] {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: none !important;
}

/* ALFINETADA — 544, e o conteúdo acomoda ao lado. */
.app-corpo.cais-aberto.cais-fixo .cais-doca .cais-lamina { width: 544px; }
.app-corpo.cais-aberto.cais-fixo.cais-radio .cais-doca .cais-lamina { width: 544px; }
.app-corpo.cais-aberto.cais-fixo .app-tela {
  padding-right: calc(544px + var(--cais-w));
}

/* O selo de escopo: `nesta questão` dentro do caderno, `geral` fora. É o que
   diz que o painel trocou de cara sem ter fechado. */
.cais-escopo {
  margin-left: 8px;
  flex: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--paper-rule);
  color: var(--ink-400);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}
.cais-escopo.aqui {
  border-color: rgba(201, 168, 106, .38);
  color: #a3803c;
}
.cais-corpo { min-width: 0; }

/* Abaixo de 1100px o alfinete não existe (o botão nem é desenhado — ver
   `RP_CAIS_MIN_ALFINETE` no app.jsx) e a lâmina se força a solta. A regra aqui
   é só a rede: se alguém alfinetar por outro caminho, o recuo não estrangula a
   leitura. Largura decide QUANTO CABE — o comportamento está no JS, de
   propósito, para o iPad em paisagem (1180px) não ser tratado como Mac
   estreito. */
@media (max-width: 1099px) {
  .app-corpo.cais-aberto.cais-fixo .app-tela { padding-right: 0; }
  .app-corpo .cais-doca .cais-lamina { width: min(520px, calc(100vw - var(--cais-w))); }
}

/* ⚠️ [CAISGLOBAL 10/ago/2026] "ESCONDER O TRILHO ATÉ PASSAR O MOUSE" — e por que
   esta regra NÃO é opcional.

   A `BarraGlobal` que saiu tinha um botão de RECOLHER (`.cais-aba`): dava para
   tirar o trilho da frente. O trilho novo é sempre visível, como o mockup pede
   ("nada some, nada apaga"). Sem esta regra, a frente teria REMOVIDO a função de
   esconder o trilho e entregado, no lugar, um interruptor no painel Foco que
   guarda a escolha e não muda um pixel — que é pior que não ter o interruptor.

   O atributo vem do `CaisFocoLinha` (app.jsx), no `<html>`. É a mesma doutrina do
   `data-toque`: COMPORTAMENTO sai por atributo, nunca por faixa de pixel.
   `:hover` no `.cais-doca` inteiro, e não só no trilho, para a lâmina aberta não
   fugir do mouse enquanto se lê. */
html[data-rp-foco-esconder-trilho] .app-corpo .cais-doca .cais.cais-global {
  opacity: .12;
  transition: opacity .18s ease-out;
}
html[data-rp-foco-esconder-trilho] .app-corpo .cais-doca:hover .cais.cais-global,
html[data-rp-foco-esconder-trilho] .app-corpo .cais-doca:focus-within .cais.cais-global {
  opacity: 1;
}
/* Com a lâmina aberta o trilho volta ao normal: ele é a única saída dali. */
/* [CAISFOLGAROLAGEM 19/ago/2026] O PUXADOR TAMBEM OBEDECE AO «ESCONDER O
   TRILHO» — e esta e' CAUTELA DESTA FRENTE, nao pedido dele. Ele nao falou
   disto; entra sob o «faca tudo que eh mais recomendado» (19/ago).

   MOTIVO TECNICO, e nao gosto: a regra vizinha so' apaga o trilho ABERTO. Com o
   trilho RECOLHIDO — que e' o estado em que ele nasce — o interruptor nao muda
   NADA. Essa e' a outra metade do «funciona so' as vezes» que ele relatou.

   `.35` e nao `.12`: o puxador e' o UNICO caminho de volta pro cais quando o
   trilho esta recolhido. Levar ele ao mesmo `.12` do trilho sumiria com a porta,
   e sumiria na tela toda, nao so' longe do mouse. Discreto, nunca invisivel.
   Reversivel apagando este bloco. */
html[data-rp-foco-esconder-trilho] .cais-aba-global {
  opacity: .35;
  transition: opacity .18s ease-out;
}
html[data-rp-foco-esconder-trilho] .cais-aba-global:hover,
html[data-rp-foco-esconder-trilho] .cais-aba-global:focus-visible {
  opacity: 1;
}
html[data-rp-foco-esconder-trilho] .app-corpo.cais-aberto .cais-doca .cais.cais-global {
  opacity: 1;
}

/* [CAISGLOBAL 10/ago/2026] As peças do conteúdo dos painéis novos (Foco, o
   Caderno "geral", e o aviso da Margem sem backend). Nenhuma delas existia:
   sem estas regras os interruptores desenham como texto solto. */
.cais-aj-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--paper-rule);
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink-700);
  text-align: left;
  cursor: pointer;
}
.cais-aj-linha:last-child { border-bottom: 0; }
.cais-aj-linha:hover { color: var(--ink-900); }
.cais-sw {
  margin-left: auto;
  flex: none;
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--paper-rule);
}
.cais-sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink-400);
  transition: left .15s ease-out;
}
.cais-sw.on { background: var(--primary-100, #BDD6EC); box-shadow: inset 0 0 0 1px var(--primary-600); }
.cais-sw.on::after { left: 18px; background: var(--primary-600); }
@media (prefers-reduced-motion: reduce) { .cais-sw::after { transition: none; } }

.cais-rot {
  margin: 0 0 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.cais-curso {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--paper-rule);
  border-left: 2px solid var(--primary-600);
  border-radius: 0 8px 8px 0;
  background: var(--paper-2);
}
.cais-retomar {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid var(--primary-600);
  border-radius: 7px;
  background: none;
  color: var(--primary-600);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.cais-retomar:hover { background: var(--primary-600); color: var(--paper); }
/* O painel que diz "isto ainda não existe". Ele é de propósito discreto e
   textual: é um aviso honesto, não um estado de erro. */
.cais-vazio { padding: 2px 0; }
.cais-vazio-tit {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-700);
}

/* ═══ [TINTAQUESTAO 12/ago/2026] A TINTA DA PAGINA ═══════════════════════════
   A camada e UMA SO, filha do `.content-solve`, com a altura do CONTEUDO (posta
   por codigo, no `ajustar`). Sendo filha do conteudo, ela ROLA COM O TEXTO sem
   uma linha de sincronia — `position: fixed` deixaria a tinta parada enquanto o
   texto anda, que e o defeito do RabiscoOverlay.

   ⚠️ `pointer-events: none` mora AQUI e nao no `style` do JSX. O motivo e
   mecanico: comecar um traco re-renderiza o componente, e uma chave
   `pointerEvents` escrita no JSX seria reimposta pelo React nesse re-render — a
   folha voltaria a vidro no meio da escrita. E e essa transparencia que deixa o
   dedo atravessar e operar a questao: quem escuta a caneta e o DOCUMENTO, em
   captura, e nao esta camada.

   z-index 8: acima do cartao da questao (que nao empilha) e abaixo da barra de
   baixo (40), da lamina do cais (60) e do trilho (900). Tinta por cima do
   texto, nunca por cima dos controles. */
.tinta-camada {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
}
.tinta-cv {
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
}

/* A BARRINHA — so existe no iPad, e quem decide isso e o `data-toque` no .jsx,
   NUNCA uma faixa de largura (doutrina de 08/ago). Ela reserva o proprio canto
   e respeita a area segura: no iPad o punho apoia justamente ali embaixo.
   `right` conta com a largura do trilho do cais para nao encostar nele. */
.tinta-barra {
  position: fixed;
  right: calc(var(--cais-w, 46px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
  z-index: 890;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: var(--panel-glass, var(--surface, #fff));
  border: 1px solid var(--panel-border, var(--paper-rule, #d8dee6));
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 33, 54, .22));
}
.tinta-bt {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-700, #334155);
  cursor: pointer;
}
.tinta-bt.on {
  width: auto;
  min-width: 104px;
  padding-inline: 12px;
  border-color: var(--primary-600, #0B4275);
  background: var(--primary-50, #DEEBF6);
  color: var(--primary-700, #093C6B);
}
.tinta-bt-rotulo { display: none; font-size: 12px; font-weight: 800; white-space: nowrap; }
.tinta-bt.on .tinta-bt-rotulo { display: inline; }
.tinta-bt:disabled { opacity: .38; cursor: default; }
.tinta-bt:focus-visible { outline: 3px solid var(--focus-ring-color, #0e4f88); outline-offset: 2px; }

/* O aviso curto ("apagado", "desfeito"). Mesma gramatica do `.margemq-aviso`. */
.tinta-aviso {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 128px);
  z-index: 891;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  pointer-events: none;
  background: var(--ink-800, #1f2937);
  color: var(--surface, #fff);
  opacity: .92;
}


/* ═══ [BARRARABISCO 12/ago/2026] O RABISCO SAIU DE CIMA DA MAO ════════════════
   P0.3 da AUDITORIA_CADERNO_IPAD_12AGO, contrato em ESCOLHAS_BARRA_RABISCO_12AGO.
   A barra do `RabiscoOverlay` era `position:fixed; top:10; left:50%` com TREZE
   controles — exatamente por cima de onde a Pencil escreve.

   Agora sao duas pecas, e o que decide qual aparece e o `data-toque` no .jsx,
   NUNCA uma faixa de largura:
     · iPad -> `.rb-barra`, CINCO controles no canto de baixo a direita, fora do
       cais (`right` conta com `--cais-w`, como a `.tinta-barra` ja fazia);
     · Mac  -> NADA flutuando. So o `.rb-painel`, encostado na direita.

   O `.rb-painel` reaproveita `.cais-cab`, `.cais-corpo`, `.cais-fr`, `.cais-dica`,
   `.cais-aj-linha`, `.cais-sw` e `.cais-aba` — a superficie e a MESMA do Caderno,
   da Margem e dos Ajustes. O que ele NAO reaproveita e a ancoragem: a lamina do
   cais e' `sticky` dentro da grade e vive em z-index 900, abaixo deste overlay
   (9998, ver a nota do trilho la em cima). Com o rabisco vivo o cais de verdade
   esta debaixo do canvas e nao recebe clique nenhum.

   Os z-index desta secao sao TODOS internos ao overlay: a raiz cria contexto de
   empilhamento em 9998, entao 40/41/44/60 aqui so ordenam as pecas entre si e o
   canvas. Nenhum deles disputa com nada do resto do app.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* 44px e o alvo de ponteiro fino; o iPad sobe para 48 em toque-mode.css. */
  --rb-alvo: 44px;
  --rb-painel-w: 300px;
}

.rb-barra {
  position: fixed;
  right: calc(var(--cais-w, 46px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--panel-glass, var(--surface, #fff));
  border: 1px solid var(--panel-border, var(--paper-rule, #d8dee6));
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(15, 33, 54, .22));
}
/* Painel aberto no iPad: a barrinha e a folha saem de cima dele. */
.rb-com-painel .rb-barra,
.rb-com-painel .rb-folha { right: calc(var(--rb-painel-w) + 16px); }

.rb-bt {
  position: relative;
  width: var(--rb-alvo); height: var(--rb-alvo);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-700, #334155);
  cursor: pointer;
}
.rb-bt.on {
  border-color: var(--primary-700, #093C6B);
  background: var(--primary-50, #DEEBF6);
  color: var(--primary-700, #093C6B);
}
.rb-bt:disabled { opacity: .32; cursor: default; }
.rb-sep { width: 1px; height: 24px; margin: 0 3px; background: var(--paper-rule, #d8dee6); }
/* A cor viva como ponto no canto do icone — a folha nao precisa estar aberta
   para a pessoa saber com que cor esta escrevendo. */
.rb-ponto {
  position: absolute; right: 8px; bottom: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--surface, #fff);
}

/* A folha do SEGUNDO toque: cor, espessura e forma, logo acima da barrinha. */
.rb-folha {
  position: fixed;
  right: calc(var(--cais-w, 46px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px + var(--rb-alvo) + 20px);
  z-index: 41;
  min-width: 250px;
  max-width: calc(100vw - 40px);
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--paper-rule, #d8dee6);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .20);
}

.rb-painel {
  position: fixed;
  right: 0; top: 80px; bottom: 24px;
  z-index: 44;
  width: var(--rb-painel-w);
  max-width: calc(100vw - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  box-shadow: -12px 0 34px rgba(0, 0, 0, .34);
}
.rb-painel .cais-corpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px 16px;
}
.rb-aba { z-index: 900; }

.rb-tit {
  margin: 12px 0 8px;
  font-size: 11px; font-weight: 650; letter-spacing: .5px;
  color: var(--ink-400);
}
.rb-tit:first-child { margin-top: 0; }
.rb-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.rb-cor {
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%;
  border: 2px solid var(--surface, #fff);
  box-shadow: 0 0 0 1px var(--paper-rule, #cbd5e1);
  cursor: pointer;
}
.rb-cor.on { box-shadow: 0 0 0 2px var(--ink-700, #334155); }

.rb-esp {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 66px; height: 38px; padding: 0 10px;
  border: 1px solid var(--paper-rule); border-radius: 9px;
  background: var(--surface); color: var(--ink-700);
  font-size: 13px; cursor: pointer;
}
.rb-bola { background: currentColor; border-radius: 50%; }
.rb-forma {
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-rule); border-radius: 9px;
  background: var(--surface); color: var(--ink-700);
  cursor: pointer;
}
.rb-esp.on, .rb-forma.on {
  border-color: var(--primary-700, #093C6B);
  background: var(--primary-50, #DEEBF6);
  color: var(--primary-700, #093C6B);
}

.rb-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: var(--rb-alvo);
  padding: 10px 8px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-800);
  font: inherit; font-size: 14px; text-align: left;
  cursor: pointer;
}
.rb-item:hover { background: var(--paper-2, #f1f5f9); }
.rb-item.perigo { color: var(--danger-700, #b91c1c); }
.rb-item:disabled { opacity: .5; cursor: default; }
.rb-item .rb-atalho { margin-left: auto; font-size: 12px; color: var(--ink-400); }

.rb-bt:focus-visible,
.rb-cor:focus-visible,
.rb-esp:focus-visible,
.rb-forma:focus-visible,
.rb-item:focus-visible,
.rb-neutro:focus-visible,
.rb-perigo:focus-visible {
  outline: 3px solid var(--focus-ring-color, #0e4f88);
  outline-offset: 2px;
}

/* A confirmacao do "Limpar tudo". Ela existe porque o desfazer so volta UM
   passo: sem a caixa, um toque apagava a folha inteira sem volta. */
.rb-veu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .34);
}
.rb-caixa {
  width: 390px; max-width: calc(100vw - 40px);
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .32);
}
.rb-caixa h4 { margin: 0 0 8px; font-size: 16.5px; }
.rb-caixa p { margin: 0 0 18px; font-size: 14px; color: var(--ink-500); line-height: 1.5; }
.rb-caixa-bt { display: flex; gap: 9px; justify-content: flex-end; }
.rb-neutro, .rb-perigo {
  min-height: var(--rb-alvo); padding: 10px 16px;
  border-radius: 10px; font: inherit; font-size: 14.5px; cursor: pointer;
}
.rb-neutro { border: 1px solid var(--paper-rule); background: var(--surface); color: var(--ink-800); }
.rb-perigo { border: 1px solid var(--danger-700, #b91c1c); background: var(--danger-700, #b91c1c); color: #fff; }

/* O recado curto ("Guardado no Caderno de Erros"). Mesma gramatica do
   `.tinta-aviso` e do `.margemq-aviso`. */
.rb-aviso {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  z-index: 61;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px;
  background: var(--ink-900, #111827); color: var(--surface, #fff);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   [IPAD_EXECUTAR_03SET 03/set/2026] BLOCO S1 — tokens dourados + classes do
   contrato de nomes (CONTRATO_CLASSES_IPAD_EXECUTAR_03SET.md). Aditivo, no
   fim do arquivo; nada acima desta faixa foi tocado por este bloco.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── item 1 · TOKENS, em TODO tema escuro ─────────────────────────────────
   Declarados uma unica vez em `html[data-theme="dark"]`: os 8 sabores extra
   (equilibrado/profundo/naval/conforto/dourado/comfort/breu/github) usam
   seletor MAIS especifico e so' redeclaram --gold-500/--gold-300/etc quando
   o sabor muda a cor — a leitura de --cta-bg:var(--gold-500) por elemento
   pega sempre o --gold-500 VENCEDOR daquele `html`, seja qual for o sabor
   ativo. Tema CLARO nao entra aqui: o `.btn-primary` claro continua como
   estava (doutrina do contrato, item 1). */
html[data-theme="dark"] {
  --cta-bg: var(--gold-500);
  --cta-bg-hover: var(--gold-300);
  --cta-fg: var(--on-gold, #0a1628);
  --cta-ring: color-mix(in srgb, var(--gold-500) 45%, transparent);
  --cta-disabled-bg: var(--ink-150);
  --cta-disabled-fg: var(--ink-400);
  --gold-12: color-mix(in srgb, var(--gold-500) 12%, transparent);
  --gold-25: color-mix(in srgb, var(--gold-500) 25%, transparent);
}
/* Alvo de toque no Mac (36px) — o par do `--toque-alvo` (44px) de
   `estudo/toque-mode.css`. Vale nos dois temas, claro e escuro. */
:root {
  --alvo-mac: 36px;
}

/* Consumidor: o marcador redondo do Certo/Errado quando SELECIONADO (antes
   do gabarito). Regra CSS normal (nao inline) — dá para sobrescrever limpo.
   O fundo da LINHA inteira (`--ce-fundo` etc.) e' escrito inline por
   elemento no kit-widgets.jsx e uma folha de estilo sem `!important` nao
   alcança; medido e registrado, sem `!important` (ver cabeçalho do arquivo). */
html[data-theme="dark"] .ce-answer-marker[aria-pressed="true"] {
  border-color: var(--cta-bg);
  background: var(--cta-bg);
  color: var(--cta-fg);
  box-shadow: inset 0 0 0 3px var(--gold-25);
}
/* Consumidor: alternativa de multipla escolha selecionada (`.alt.selected`,
   kit/kit.css:422 e styles.css:1709 — mesma especificidade nos dois; aqui
   entra com um atributo a mais e vence os dois, em qualquer ordem de carga). */
html[data-theme="dark"] .alt.selected { border-color: var(--cta-bg); background: var(--gold-12); }
html[data-theme="dark"] .alt.selected .alt-letter { background: var(--cta-bg); color: var(--cta-fg); }
/* Consumidor: `.qa-ic.forte` (botao "forte" da barra de acoes da questao) —
   vive num `<style>` injetado pelo kit-screens.jsx, template literal; aqui
   so' se soma um seletor MAIS ESPECIFICO no styles.css, que vence por
   especificidade (nao por ordem de carga). */
html[data-theme="dark"] .solve-screen-scope .qa-ic.forte {
  background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg);
}
html[data-theme="dark"] .solve-screen-scope .qa-ic.forte:hover:not(:disabled) {
  background: var(--cta-bg-hover); border-color: var(--cta-bg-hover); color: var(--cta-fg);
}

/* ── item 9 · refluxo D7 ───────────────────────────────────────────────────
   `width:min(100%,876px)` em coordenadas ESCALADAS pelo `zoom` do cartao
   (kit-widgets.jsx, `style={{ zoom: qZoom }}`) e' exatamente o refluxo: o
   `100%` do cartao vale relativo ao contêiner já escalado. Aditivo no fim do
   arquivo — vence `.question-card` de `kit/kit.css:352` (mesma
   especificidade, `styles.css` carrega depois — e aqui, por estar no fim do
   PROPRIO arquivo, vence tambem qualquer `.question-card` anterior dentro
   dele). */
/* [CORRECOES 03/set/2026 · D12 + MEDICAO 20:05] A regra `.question-card { width:min(100%,876px);
   max-width:calc(100vw - …) }` da S1 SAIU: em WebKit, largura em porcentagem sob `zoom`
   (kit-widgets `style={{zoom:qZoom}}`) rende parent/zoom — o cartao virava um quadrado
   (453 de 834 px no iPad em retrato). Largura volta a AUTOMATICA; o `.solve-main` de 820 px
   (08/ago) continua sendo quem limita a linha. Nenhuma largura nova aqui. */
/* [Mesa 03/set] so' os FILHOS DIRETOS dos containers flex/grid do cartao — nunca `*`
   (tabela, formula, svg e input dependem do min-content). */
.question-card .qs-cab > *, .question-card .qs-corpo > *, .question-card .qs-alts-linha > *,
.question-card .pm-trilha-linha > *, .question-card .aval-linha > *, .question-card .qa-bar > *,
.question-card .qs-rodape > * { min-width: 0; }
.question-card img, .question-card svg, .question-card video {
  max-width: 100%;
}
.question-card p, .question-card li, .question-card .alt-text, .question-card .enunciado {
  overflow-wrap: anywhere;
}

/* ── item 2 · breadcrumb de uma linha (kit-widgets `.pm-trilha-linha`) ────
   CSS literal do contrato, secao 2. Sem transition/animation, como pedido. */
.pm-trilha-linha--inteira {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-size: var(--crumb-font-size, 12px);
}
.pm-trilha-linha--inteira::-webkit-scrollbar { display: none; }
/* [HOVERTRILHA 03/set/2026] O `overflow-x:auto` acima CORTAVA o balao absoluto do
   `.cp-confirmacao-cell:hover` nos niveis da trilha (modulo/publicacao/capitulo/secao) — a
   pilula do CP escapava por ser posicionada fora. Medido pelo Cowork no Mac, release
   CORRECOES. Com o ponteiro (ou o foco do teclado / toque longo, que e' :focus-within)
   sobre a trilha, o overflow volta a `visible` e o balao aparece; sem hover, a linha
   continua UMA so' e rola. */
@media (hover:hover) and (pointer:fine) {
  html:not([data-toque]) .pm-trilha-linha--inteira:hover,
  html:not([data-toque]) .pm-trilha-linha--inteira:focus-within { overflow: visible; }
}
.pm-trilha-linha--inteira .crumb-nivel {
  /* [D11c] NUNCA reticencias: nivel nao encolhe nem corta. Se nao couber depois de
     gaps e fonte (piso 10,5 px), a LINHA rola dentro do cartao (overflow-x abaixo). */
  flex: none;
}

/* ── item 3 · Certeza / Dúvida / Chutei no rodapé ────────────────────────
   [IPAD_CERTEZA_RODAPE_FINAL_04SET 04/set/2026] A decisão expressa do dono
   substitui a D8 no ponto conflitante: o grupo é o último conteúdo do slot
   direito do rodapé, sem legenda solta. O grupo nunca quebra por dentro. */
.qs-alts-lado { margin-left: auto; }
.qa-certeza {
  display: inline-flex; gap: 6px; align-items: center;
  flex-wrap: nowrap; white-space: nowrap;
}
.qs-rodape-certeza {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 0;
  padding-left: 12px; border-left: 1px solid var(--paper-rule); flex: none;
}
.qs-rodape-certeza .qa-certeza-bt {
  min-height: 28px; padding: 0 10px; font-size: 11px; white-space: nowrap;
}
.qa-certeza-bt {
  min-height: var(--alvo-mac, 36px);
  padding: 0 12px;
  border: 1px solid var(--ink-300);
  border-radius: 99px;
  background: transparent;
  color: var(--ink-500);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.qa-certeza-bt.qa-certeza-on { border-color: var(--gold-500); color: var(--gold-300); }
.qa-certeza-pedindo { border-radius: 99px; box-shadow: 0 0 0 2px var(--gold-500); }

/* ── item 7 · faixa do modo foco (`.cad-faixa-foco`) e o gatilho ─────────
   `.cad-faixa-foco` e' CSS literal do contrato, secao 7. `.cad-foco-bt` nao
   tem valores literais no contrato (so' descreve "icone eye + rotulo") —
   aqui entra so' o ALVO de toque (doutrina do topo do contrato: wrapper
   real, nunca ::before), sem cor propria; herda o botao que o S3 desenhar. */
.cad-faixa-foco {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 36px;
  padding: 0 16px;
  font-size: 12px;
  color: var(--ink-400);
  border-bottom: 1px solid var(--paper-rule);
}
.cad-foco-bt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--alvo-mac, 36px);
}

/* ── item 10 · Avaliação rápida (`.aval-*`) ───────────────────────────────
   `.aval-chip` e' o WRAPPER REAL do alvo de toque (36 Mac / 44 sob toque,
   S2 sobe em toque-mode.css); a altura VISUAL fica em ~26px via
   `line-height`, sem depender de `height` fixo (que brigaria com o alvo). */
.aval-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aval-rot { font-size: 11px; font-weight: 700; color: var(--ink-500); letter-spacing: .02em; }
.aval-chips { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.aval-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-mac, 36px);
  padding: 0 10px;
  border: 1px solid var(--ink-300);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-500);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 26px;
  cursor: pointer;
}
.aval-chip.on { background: var(--gold-12); border-color: var(--gold-500); color: var(--gold-300); }

/* ── item 11 · blocos do resultado (summary com alvo de toque) ───────────
   `details.rp-gab-duvida` ja' existe (kit-widgets ~:3890); `.rp-gab-desempenho`
   e' a classe NOVA que embrulha o `QuestionPerformance`. Os dois `summary`
   ganham o mesmo alvo Mac/toque. */
.rp-gab-duvida > summary,
.rp-gab-desempenho > summary {
  min-height: var(--alvo-mac, 36px);
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* ── item 12 · CP na tela (`.qs-cp-faixa` / `.qs-cp-corpo`) ───────────────
   44px, fundo/borda em dourado suave, com corpo expansivel por baixo. */
.qs-cp-faixa {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--gold-12);
  border: 1px solid var(--gold-25);
  border-radius: var(--r-md, 10px);
}
.qs-cp-corpo {
  padding: 10px 14px;
  border-top: 1px solid var(--gold-25);
}

/* ── item 5 · lâmina "Ações" do trilho do cais ────────────────────────────
   `.cais-lamina-grupo` / `.cais-lamina-item`, contrato secao 5. */
.cais-lamina-grupo + .cais-lamina-grupo {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--paper-rule);
}
.cais-lamina-grupo-tit {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: 0 10px;
  margin-bottom: 2px;
}
.cais-lamina-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--alvo-mac, 36px);
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-700);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.cais-lamina-item:hover { background: var(--paper-2); }

/* ── item 13 · LinhaFalhaAcao (kit-widgets define; S1 so' o CSS) ─────────
   Ponto dourado pulsando + texto + botao de retry, classe raiz
   `.linha-falha-acao`. `prefers-reduced-motion` desliga o pulso. */
.linha-falha-acao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linha-falha-acao-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 3px var(--gold-25);
  animation: rp-pulsa 1.4s ease-in-out infinite;
  flex: none;
}
@keyframes rp-pulsa {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .linha-falha-acao-ponto { animation: none; }
}
.linha-falha-acao-msg { font-size: 13px; color: var(--ink-500); }
.linha-falha-acao-bt {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--gold-25);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-500);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

/* ── item 14 · política de scroll — folga do `scrollIntoView` suave ──────
   `[data-qs-resultado="1"]` e' a âncora do reveal (kit-widgets ~:8046). */
[data-qs-resultado] { scroll-margin-top: 72px; }

/* ── item 15 · legendas de atalho — `<kbd>` só aparece no hover no Mac ───
   Sob toque, quem esconde e' `html[data-toque] kbd{display:none}` no
   `toque-mode.css` (S2) — aqui so' o comportamento do Mac. */
kbd.rp-kbd { opacity: 0; }
:hover > kbd.rp-kbd { opacity: 1; }

/* item 5 (segunda metade) — @media (min-width:1400px) para a lâmina do cais
   AO LADO do cartão — FICOU DE FORA desta rodada. Ver o cabeçalho deste
   aplicador (_aplicar_s1_styles_03set.py) para a medição completa do porquê:
   `.cais-lamina`/`.cais-doca` já carregam um emaranhado denso de regras
   condicionais (cais-fixo, cais-radio, :has(.cad-faixa), foco-on, 3 alturas
   de `top`) e este bloco não entra nele sem mockup aprovado e prova visual. */


/* ══════════════════════════════════════════════════════════════════════════
   [IPAD_EXECUTAR_03SET 03/set/2026] BLOCO S1-B — COSTURAS do integrador (Fable).
   Aditivo, depois do BLOCO S1. Fecha as diferencas medidas entre o CSS do S1
   e o JSX que o S3/S4 realmente escreveram (nomes de classe, etapas do
   breadcrumb, variantes da avaliacao, faixa do CP, gatilho do foco).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── breadcrumb: as ETAPAS que o hook `useTrilhaUmaLinha` sobe no DOM ─────
   Estrutura real (kit-widgets): .pm-trilha-linha--inteira > span(nivel-raiz)
   > [Icon folder] [.crumb-nivel] [.crumb-sep] ... ; e .pm-linha-fim a direita.
   Etapa 1: separadores encolhem. Etapa 2: fonte (o hook escreve
   --crumb-font-size). Etapa 3: elipse por nivel do MIOLO — o ultimo nivel
   (folha final / CP) nao encolhe. O primeiro nivel (obra) encolhe por ultimo
   porque recebe max-width maior. Sem transition, sem animation. */
.pm-trilha-linha--inteira > span { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.pm-trilha-linha--inteira .crumb-nivel { flex: none; display: inline-block; vertical-align: middle; }
.pm-trilha-linha--inteira .crumb-sep { flex: none; margin: 0 6px; color: var(--ink-300); }
.pm-trilha-linha--inteira .pm-linha-fim { flex: none; }
.pm-trilha-linha--inteira[data-crumb-etapa="1"] { gap: 4px; }
.pm-trilha-linha--inteira[data-crumb-etapa="1"] .crumb-sep,
.pm-trilha-linha--inteira[data-crumb-etapa="2"] .crumb-sep,
.pm-trilha-linha--inteira[data-crumb-etapa="3"] .crumb-sep { margin: 0 2px; }
/* ⛔ [CARD_CAMINHO_COMPLETO_SEM_TRUNCAR_05SET · 05/set/2026] A ETAPA 3 NAO CORTA
   MAIS NOME NENHUM. O que estava aqui ate' hoje (`IPAD_ACABAMENTO_04SET`) dava
   `max-width:154px` + `text-overflow:ellipsis` a CADA nivel — e' de onde saiu o
   «Direito processual mari» que o dono viu no card.

   MEDIDO (`_gestor/entradas/_medir_caminho_05set.py`, banco de 05/set): o
   segmento cortado e' o CAPITULO, `'Direito processual maritimo - Cap 7'`, 35
   caracteres; em 154px a 12px cabem 23. As 60 questoes da flag `VII|8|8.6`
   carregam todas esse mesmo rotulo de capitulo.

   ⚠️ ISTO NAO E' DESENHO MEU CONTRA UMA ORDEM DELE — e' a ordem dele, duas
   vezes, com data e aspas:
     · 03/set: «eu nao quero que ele fique colapsado nao, eu quero ele inteiro
       ... nunca quebre para uma segunda linha»
     · 05/set: «MOSTRE O CAMINHO INTEIRO NO CARD. SEM CORTAR, SEM SALTAR DEGRAU»
       e, sobre a mesma regua, «nao eh pra ficar N B, tem que estar escrito
       NOCOES BASICAS. Tudo completinho.»
   E' tambem o contrato [D11c] que ja' estava escrito 230 linhas acima neste
   mesmo arquivo («NUNCA reticencias: nivel nao encolhe nem corta»), e que o
   bloco de 04/set contradizia sem que ninguem medisse a contradicao.

   O QUE O BLOCO DE 04/set ACERTOU, e que continua de pe: o cronometro
   (`.pm-linha-fim`) e' coluna irredutivel e nao pode ser empurrado nem coberto
   pelo caminho. A queixa medida la' era «rolar a trilha inteira deixa o ultimo
   CP crescer sobre o cronometro» — e ela vinha de a ROLAGEM morar no elemento
   ERRADO: no `.pm-trilha-linha--inteira` inteiro (regra base, ~230 linhas
   acima), que carrega o cronometro junto.

   O CONSERTO E' DE LAYOUT, nao de texto: a rolagem desce um nivel e passa a
   morar no `> span:first-child`, que e' SO' o caminho. O cronometro fica fora
   dela, em `flex:none`, e nunca e' alcancado. Nada de elipse, nada de segunda
   linha, nada de sigla — o caminho inteiro continua no DOM e o dedo/trackpad
   alcanca o resto. Sem barra visivel (`scrollbar-width:none`), como na regra
   base. Portao: `_tests/test_caminho_reticencias_05set.py`. */
.pm-trilha-linha--inteira[data-crumb-etapa="3"] > span:first-child {
  /* [CP_VAGO_MOTIVO_19SET · ajuste visual] O caminho encolhe quando precisa,
     mas nao cresce para consumir todo o espaco livre. Com `flex-grow:1`, uma
     trilha curta terminava cedo e o proprio item flex abria um vazio enorme
     antes do separador e do selo CP, embora os tres fossem a mesma trilha. */
  flex: 0 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pm-trilha-linha--inteira[data-crumb-etapa="3"] > span:first-child::-webkit-scrollbar {
  display: none;
}
.pm-trilha-linha--inteira[data-crumb-etapa="3"] { overflow: hidden; }
/* [D11c, restaurado] nivel nao encolhe e nao corta: `flex:none`, sem teto de
   largura, sem elipse. Quem cede e' a rolagem do span acima. */
.pm-trilha-linha--inteira[data-crumb-etapa="3"] .crumb-nivel {
  flex: none; max-width: none;
  overflow: visible; text-overflow: clip; white-space: nowrap;
}
.pm-trilha-linha--inteira[data-crumb-etapa="3"] .crumb-nivel > * {
  max-width: none; min-width: 0;
}
/* [CLASSIFICACAO_IMPORTADA_04SET] Trackpad/mouse no iPad também anuncia
   `(hover:hover) and (pointer:fine)`, mas mantém `html[data-toque]`. A antiga
   exceção excluía exatamente esse caso e o balão do CP era recortado pelos
   dois overflows da etapa 3. Só o nível interativo abre: o texto continua
   elipsado e o cronômetro permanece em sua coluna irredutível. */
@media (hover:hover) and (pointer:fine) {
  .pm-trilha-linha--inteira[data-crumb-etapa="3"]:hover,
  .pm-trilha-linha--inteira[data-crumb-etapa="3"]:focus-within,
  .pm-trilha-linha--inteira[data-crumb-etapa="3"] > span:first-child:has(.cp-confirmacao-cell:hover),
  .pm-trilha-linha--inteira[data-crumb-etapa="3"] > span:first-child:has(.cp-confirmacao-cell:focus-within),
  .pm-trilha-linha--inteira[data-crumb-etapa="3"] .crumb-nivel:has(.cp-confirmacao-cell:hover),
  .pm-trilha-linha--inteira[data-crumb-etapa="3"] .crumb-nivel:has(.cp-confirmacao-cell:focus-within) {
    overflow: visible;
  }
  .pm-trilha-linha--inteira[data-crumb-etapa="3"] .crumb-nivel:has(.cp-confirmacao-cell:hover),
  .pm-trilha-linha--inteira[data-crumb-etapa="3"] .crumb-nivel:has(.cp-confirmacao-cell:focus-within) {
    position: relative; z-index: 12;
  }
}

/* ── [CARDTRILHADUVIDA_09SET · 09/set/2026] A ESCADA DA TRILHA ────────────
   Quatro degraus de TROCA DE FORMA, escritos pelo hook `useTrilhaUmaLinha` no
   atributo `data-crumb-forma` (1..4). Ordem do dono, verbatim, 09/set:
     «pode ter so' o simbolozinho ali, da pasta, e ai com o rover a gente ve o
      nome da materia ... o Chapter 6, e' o 6.3? Pode ser so' o numero, e ai com
      o rover em cima voce ve o nome da secao ... nao eh pra omitir informacao,
      tem o rover pra isso»
   e, recusando a primeira versao do mockup:
     «gostei nao, reticencias e' pessimo, ou cabe tudo, ou usa hover, e deixa os
      numeros».

   ⛔ NENHUMA REGRA AQUI CORTA PALAVRA, e nenhuma pode passar a cortar. Isto nao
   e' cautela minha: e' a [D11c] escrita ~250 linhas acima («NUNCA reticencias:
   nivel nao encolhe nem corta»), e' a frente CARD_CAMINHO_COMPLETO_SEM_TRUNCAR_05SET
   que removeu de proposito o `max-width:154px` + `text-overflow:ellipsis`, e e' a
   ordem dele de 05/set («MOSTRE O CAMINHO INTEIRO NO CARD. SEM CORTAR, SEM SALTAR
   DEGRAU»). Ou o segmento aparece inteiro, ou TROCA DE FORMA e o nome completo
   fica no hover. Portao: `_tests/test_card_trilha_09set.js`. */

/* A CAIXINHA — no degrau 1 ela passa a carregar o nome da materia, e no 4 a
   publicacao junto. O `title`/`aria-label` vem do JSX com o caminho completo. */
.pm-trilha-linha--inteira .crumb-pasta {
  flex: none; display: inline-flex; align-items: center;
  padding: 2px; border: 1px solid transparent; border-radius: 5px;
}
.pm-trilha-linha--inteira[data-crumb-forma] .crumb-pasta { cursor: default; }
.pm-trilha-linha--inteira[data-crumb-forma] .crumb-pasta:hover,
.pm-trilha-linha--inteira[data-crumb-forma] .crumb-pasta:focus-visible {
  border-color: var(--ink-300); outline: none;
}

/* As duas formas de capitulo e secao nascem no DOM; o CSS mostra UMA.
   `display:none` (e nao visibility/opacity) e' de proposito: tira a forma
   escondida da arvore de acessibilidade e da ordem de tabulacao, entao nao ha
   balao dobrado, foco fantasma nem leitor de tela lendo o segmento duas vezes. */
.pm-trilha-linha--inteira .crumb-forma { display: inline-flex; align-items: center; min-width: 0; }
.pm-trilha-linha--inteira .crumb-forma--curta { display: none; }

/* degrau 1 — a materia vira a caixinha */
.pm-trilha-linha--inteira[data-crumb-forma] .crumb-mod,
.pm-trilha-linha--inteira[data-crumb-forma] .crumb-sep--mod { display: none; }

/* degrau 2 — o capitulo vira o numero */
.pm-trilha-linha--inteira[data-crumb-forma="2"] .crumb-cap .crumb-forma--longa,
.pm-trilha-linha--inteira[data-crumb-forma="3"] .crumb-cap .crumb-forma--longa,
.pm-trilha-linha--inteira[data-crumb-forma="4"] .crumb-cap .crumb-forma--longa { display: none; }
.pm-trilha-linha--inteira[data-crumb-forma="2"] .crumb-cap .crumb-forma--curta,
.pm-trilha-linha--inteira[data-crumb-forma="3"] .crumb-cap .crumb-forma--curta,
.pm-trilha-linha--inteira[data-crumb-forma="4"] .crumb-cap .crumb-forma--curta { display: inline-flex; }

/* degrau 3 — a secao vira o numero */
.pm-trilha-linha--inteira[data-crumb-forma="3"] .crumb-sec .crumb-forma--longa,
.pm-trilha-linha--inteira[data-crumb-forma="4"] .crumb-sec .crumb-forma--longa { display: none; }
.pm-trilha-linha--inteira[data-crumb-forma="3"] .crumb-sec .crumb-forma--curta,
.pm-trilha-linha--inteira[data-crumb-forma="4"] .crumb-sec .crumb-forma--curta { display: inline-flex; }

/* degrau 4 — a publicacao sai da linha e vai para o hover da caixinha */
.pm-trilha-linha--inteira[data-crumb-forma="4"] .crumb-pub,
.pm-trilha-linha--inteira[data-crumb-forma="4"] .crumb-sep--pub { display: none; }

/* ⛔ [PARTE 1-A] O SELO DO CP E' IRMAO DO CRONOMETRO, NAO FILHO DO CAMINHO.
   Ordem do dono, verbatim, 09/set: «o selo do CP tem que aparecer completo, nao
   cortado». Ele era cortado porque morava DENTRO do `> span:first-child`, que na
   etapa 3 vira `overflow-x:auto` com `overflow:hidden` no pai (~30 linhas acima).
   O cronometro nunca foi cortado por estar fora, em `.pm-linha-fim` com
   `flex:none`; o selo agora esta no mesmo lugar, pelo mesmo motivo.
   ⛔ Devolve-lo para dentro daquele span traz o defeito de volta. */
.pm-trilha-linha--inteira .crumb-nivel--cp,
.pm-trilha-linha--inteira .crumb-sep--cp { flex: none; }
/* O cursor `help` do motor de tooltip virava uma interrogação sobre todo o
   endereço. Na trilha, capítulo/seção apenas explicam o texto: cursor normal.
   O selo CP abre o painel, portanto mantém cursor de ação. */
.pm-trilha-linha--inteira .cp-confirmacao-compacto.interativo { cursor: default; }
.pm-trilha-linha--inteira .pm-cp-tag-hover .cp-confirmacao-compacto.interativo {
  cursor: pointer;
}

/* ── LinhaFalhaAcao: os nomes que o JSX (S4) usa de fato ─────────────────── */
.linha-falha-acao {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: var(--alvo-mac, 36px); font-size: 13px; color: var(--ink-500);
}
.linha-falha-ponto {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-25);
  animation: rp-pulsa 1.4s ease-in-out infinite;
}
@keyframes rp-pulsa { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold-500) 8%, transparent); } }
@media (prefers-reduced-motion: reduce) { .linha-falha-ponto { animation: none; } }
.linha-falha-texto { min-width: 0; overflow-wrap: anywhere; }
.linha-falha-tentar, .linha-falha-guardar {
  margin-left: auto; min-height: var(--alvo-mac, 36px); padding: 0 14px; border-radius: 99px;
  border: 1px solid var(--gold-25); background: transparent; color: var(--gold-500);
  font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.linha-falha-tentar:disabled { opacity: .6; cursor: default; }
.linha-falha-guardar { margin-left: 0; border-color: var(--ink-200); color: var(--ink-500); }

/* ── avaliacao rapida: variantes atras da flag AVAL_VARIANTE (S4) ────────── */
.aval-grupo { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.aval-chip > .aval-ponto { display: inline-flex; align-items: center; height: 26px; }
.aval-chip { cursor: pointer; }
.aval-dica {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ink-200);
  display: inline-grid; place-items: center; color: var(--ink-400); font-size: 11px; font-weight: 800; cursor: help;
}
/* variante 1 · segmentado */
.aval-chips.aval-seg { gap: 0; border: 1px solid var(--ink-200); border-radius: 8px; overflow: hidden; background: var(--surface-sunken, var(--paper-2)); }
.aval-chips.aval-seg .aval-chip { border: 0; border-radius: 0; padding: 0; }
.aval-chips.aval-seg .aval-chip > .aval-ponto { padding: 0 10px; }
.aval-chips.aval-seg .aval-chip + .aval-chip > .aval-ponto { border-left: 1px solid var(--ink-200); }
.aval-chips.aval-seg .aval-chip.on { background: transparent; }
.aval-chips.aval-seg .aval-chip.on > .aval-ponto { background: var(--gold-12); color: var(--gold-300); font-weight: 800; box-shadow: inset 0 0 0 1px var(--gold-500); }
/* variante 2 · pilulas ghost = o `.aval-chip` base do BLOCO S1 */
/* variante 3 · escala (pontos num trilho) */
.aval-chips.aval-escala { gap: 0; position: relative; padding: 0 4px; }
.aval-chips.aval-escala::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 1px; background: var(--ink-200); }
.aval-chips.aval-escala .aval-chip { border: 0; padding: 0 3px; position: relative; background: transparent; }
.aval-chips.aval-escala .aval-chip > .aval-ponto { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ink-300); background: var(--surface); font-size: 0; }
.aval-chips.aval-escala .aval-chip.on > .aval-ponto { border-color: var(--gold-500); background: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-25); }

/* ── certeza ──────────────────────────────────────────────────────────────── */
.qa-certeza-bt { cursor: pointer; }
.qa-certeza-bt:hover { border-color: var(--ink-400); color: var(--ink-700); }
.qs-alts-linha { min-width: 0; flex-wrap: wrap; }
.qs-alts-lado { flex: 0 1 auto; }

/* ── gatilho do foco na .cad-faixa e a linha do foco ─────────────────────── */
.cad-foco-bt {
  padding: 0 10px; border-radius: 99px; border: 1px solid var(--ink-200); background: transparent;
  color: var(--ink-500); font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer;
}
.cad-foco-bt[aria-pressed="true"] { border-color: var(--gold-25); color: var(--gold-500); background: var(--gold-12); }
.cad-faixa-foco .cad-faixa-conta b { color: var(--ink-700); font-family: var(--font-mono, ui-monospace, monospace); }
.cad-faixa-foco .cad-barra { max-width: 160px; }
.cad-faixa-foco [data-rp-focus-sair="1"] {
  margin-left: auto; min-height: var(--alvo-mac, 36px); padding: 0 12px; border-radius: 99px;
  border: 1px solid var(--gold-25); background: var(--gold-12); color: var(--gold-500);
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}

/* ── faixa do CP: etiqueta e skeleton (markup do S4) ─────────────────────── */
.qs-cp-etiqueta {
  flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; background: var(--gold-500); color: var(--on-gold, #0a1628);
}
.qs-cp-faixa > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-700); }
.qs-cp-faixa > .btn { margin-left: auto; flex: none; }
.qs-cp-skeleton { display: inline-flex; gap: 6px; align-items: center; }
.qs-cp-skeleton > span { display: inline-block; height: 10px; border-radius: 5px; background: var(--ink-150); }
.qs-cp-skeleton > span:nth-child(1) { width: 48px; }
.qs-cp-skeleton > span:nth-child(2) { width: 160px; }
.qs-cp-skeleton > span:nth-child(3) { width: 90px; }
.qs-cp-faixa[data-cp-estado="ok"] { flex-wrap: wrap; }
.qs-cp-faixa .qs-cp-corpo { flex: 1 0 100%; white-space: normal; font-size: 13px; color: var(--ink-600); }

/* ── lamina Acoes: os grupos usam .cais-rot (ja existe) como titulo ──────── */
.cais-lamina-grupo .cais-rot { margin-bottom: 2px; }
.aval-chips.aval-escala + .aval-nome { font-size: 11.5px; font-weight: 700; color: var(--gold-300); min-width: 52px; white-space: nowrap; }
.aval-chips.aval-escala + .aval-nome.vazio { color: var(--ink-300); font-weight: 500; }
.aval-chips.aval-escala .aval-chip:hover > .aval-ponto { border-color: var(--ink-500); }

/* [CORRECOES 03/set/2026 · D13] Avaliacao rapida em UMA linha: sem «?», sem lixeira.
   A bolinha mostra o nome do nivel no hover (title) e no toque longo (.aval-tip). */
.aval-linha { flex-wrap: nowrap; gap: 18px; }
.aval-grupo { position: relative; }
.aval-chip { position: relative; }
.aval-tip {
  position: absolute; left: 50%; bottom: calc(100% - 4px); transform: translateX(-50%);
  white-space: nowrap; background: var(--ink-900); color: var(--bg, var(--paper));
  font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px; pointer-events: none; z-index: 5;
  opacity: 0; visibility: hidden;
}
.aval-chip:hover .aval-tip, .aval-chip:focus-visible .aval-tip, .aval-tip.is-visible {
  opacity: 1; visibility: visible;
}
.aval-chips.aval-escala + .aval-nome { font-size: 11px; color: var(--ink-500); font-weight: 600; }

/* ══ [CENTRAL_AJUSTES_TELA_CHEIA_04SET] CENTRAL DE AJUSTES ════════════════
   Portal persistente na raiz: cobre a casca sem trocar rota/desmontar estudo.
   Toque e' decidido por data-toque; media query so reorganiza espaco. */
html[data-rp-central-ajustes] { overflow: hidden; }
.rp-settings-overlay {
  position: fixed; inset: 0; z-index: 1500;
  background: var(--bg, var(--paper, #eef6fc));
  color: var(--text, var(--ink-900, #102a43));
}
.rp-settings-dialog {
  width: 100%; height: 100%; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg, var(--paper, #eef6fc));
}
.rp-settings-topbar {
  min-height: 68px; display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center; gap: 18px;
  padding: 10px max(20px, env(safe-area-inset-right, 0px)) 10px max(20px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--paper-rule, var(--ink-200, #cfdae5));
  background: var(--surface, #fff);
}
.rp-settings-brand { display: flex; align-items: center; gap: 10px; color: var(--ink-700); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.rp-settings-brand-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-700, #0b5cab); color: var(--on-primary, #fff); letter-spacing: 0; }
.rp-settings-back, .rp-settings-close, .rp-settings-search-clear, .rp-settings-action {
  border: 1px solid var(--paper-rule, var(--ink-200, #cfdae5)); border-radius: 9px;
  background: var(--surface, #fff); color: var(--ink-700, #334e68); font: inherit; cursor: pointer;
}
.rp-settings-back { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; justify-self: center; font-size: 12px; font-weight: 700; }
.rp-settings-close { width: 42px; height: 42px; display: grid; place-items: center; flex: none; }
.rp-settings-back:hover, .rp-settings-close:hover, .rp-settings-action:hover { border-color: var(--primary-600); color: var(--primary-700); }
.rp-settings-user { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--ink-500); font-size: 12px; }
.rp-settings-user-copy { min-width: 0; text-align: right; }
.rp-settings-user-copy b, .rp-settings-user-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-settings-user-copy b { color: var(--ink-800); font-size: 12px; }
.rp-settings-user-copy span { margin-top: 2px; font-size: 10px; }
.rp-settings-layout { min-height: 0; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.rp-settings-nav {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 13px 30px max(13px, env(safe-area-inset-left, 0px));
  border-right: 1px solid var(--paper-rule, var(--ink-200, #cfdae5));
  background: color-mix(in srgb, var(--surface, #fff) 72%, var(--bg, #eef6fc));
}
.rp-settings-nav-label { margin: 0 10px 10px; color: var(--ink-400); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rp-settings-tablist { display: grid; gap: 4px; }
.rp-settings-tab {
  width: 100%; min-height: 44px; display: flex; align-items: center;
  border: 1px solid transparent; border-radius: 9px; padding: 9px 11px;
  background: transparent; color: var(--ink-600); font: inherit; font-size: 13px;
  font-weight: 650; text-align: left; cursor: pointer;
}
.rp-settings-tab:hover { background: var(--surface); color: var(--ink-900); }
.rp-settings-tab[aria-selected="true"] { border-color: var(--primary-600); background: var(--primary-700); color: var(--on-primary, #fff); box-shadow: 0 7px 18px rgba(15,62,105,.18); }
.rp-settings-main {
  min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 30px clamp(22px, 4vw, 52px) 56px; -webkit-overflow-scrolling: touch;
}
.rp-settings-heading { max-width: 1080px; display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.rp-settings-eyebrow { margin: 0 0 7px; color: var(--primary-700); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rp-settings-heading h1 { margin: 0; color: var(--ink-900); font-size: clamp(27px,3vw,36px); line-height: 1.08; letter-spacing: -.035em; }
.rp-settings-heading p { max-width: 650px; margin: 9px 0 0; color: var(--ink-500); font-size: 13px; line-height: 1.5; }
.rp-settings-search { position: relative; width: min(350px, 42%); flex: none; }
.rp-settings-search input { width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 42px 0 40px; border: 1px solid var(--paper-rule); border-radius: 10px; background: var(--surface); color: var(--ink-900); font: inherit; font-size: 13px; }
.rp-settings-search > svg { position: absolute; top: 13px; left: 13px; pointer-events: none; color: var(--ink-400); }
.rp-settings-search-clear { position: absolute; top: 5px; right: 5px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; }
.rp-settings-panels, .rp-settings-panel, .rp-settings-results { width: 100%; max-width: 1080px; }
.rp-settings-panel[hidden], .rp-settings-results[hidden] { display: none !important; }
.rp-settings-section { margin-top: 26px; scroll-margin-top: 18px; }
.rp-settings-section:first-child { margin-top: 0; }
.rp-settings-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 0 2px 10px; }
.rp-settings-section-head h2 { margin: 0; color: var(--ink-500); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.rp-settings-section-head p { margin: 0; color: var(--ink-400); font-size: 10px; }
.rp-settings-group { overflow: hidden; border: 1px solid var(--paper-rule); border-radius: 14px; background: var(--surface); box-shadow: 0 10px 26px rgba(15,45,76,.08); }
.rp-settings-group > .twk-row { min-height: 68px; box-sizing: border-box; justify-content: center; padding: 14px 16px; border-bottom: 1px solid var(--paper-rule); }
.rp-settings-group > .twk-row:last-child { border-bottom: 0; }
.rp-settings-group > .twk-row.twk-row-h { flex-direction: row; justify-content: space-between; }
.rp-settings-group .twk-lbl { color: var(--ink-700); font-size: 13px; }
.rp-settings-group .twk-val { color: var(--primary-700); }
.rp-settings-group .twk-seg { width: min(100%, 430px); }
.rp-settings-group .twk-seg button { min-height: 34px; cursor: pointer; }
.rp-settings-group .twk-toggle { width: 44px; height: 26px; flex: none; cursor: pointer; }
.rp-settings-group .twk-toggle i { width: 20px; height: 20px; top: 3px; left: 3px; }
.rp-settings-group .twk-toggle[data-on="1"] i { transform: translateX(18px); }
.rp-settings-group .twk-slider { height: 5px; margin: 10px 0 3px; cursor: pointer; }
.rp-settings-padded { padding: 16px; }
.rp-settings-account { min-height: 84px; display: flex; align-items: center; gap: 14px; padding: 15px 16px; }
.rp-settings-account-copy { min-width: 0; flex: 1; }
.rp-settings-account-copy b, .rp-settings-account-copy span { display: block; }
.rp-settings-account-copy b { color: var(--ink-900); font-size: 15px; }
.rp-settings-account-copy span { margin-top: 4px; color: var(--ink-500); font-size: 11px; }
.rp-settings-account-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rp-settings-action { min-height: 39px; padding: 8px 12px; font-size: 12px; font-weight: 700; }
.rp-settings-action.primary { border-color: var(--primary-700); background: var(--primary-700); color: var(--on-primary, #fff); }
.rp-settings-catalog { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.rp-settings-catalog-card { min-height: 150px; display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--paper-rule); border-radius: 14px; padding: 17px; background: var(--surface); color: var(--ink-900); text-align: left; font: inherit; cursor: pointer; box-shadow: 0 10px 26px rgba(15,45,76,.07); }
.rp-settings-catalog-card:hover { border-color: var(--primary-600); transform: translateY(-1px); }
.rp-settings-catalog-card b { font-size: 15px; }
.rp-settings-catalog-card p { margin: 9px 0 12px; color: var(--ink-500); font-size: 12px; line-height: 1.45; }
.rp-settings-catalog-card span { margin-top: auto; color: var(--ink-400); font-size: 10px; line-height: 1.55; }
.rp-settings-result-list { display: grid; gap: 8px; }
.rp-settings-result { width: 100%; min-height: 62px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 11px 14px; border: 1px solid var(--paper-rule); border-radius: 11px; background: var(--surface); color: var(--ink-900); font: inherit; text-align: left; cursor: pointer; }
.rp-settings-result:hover { border-color: var(--primary-600); }
.rp-settings-result small { display: block; color: var(--primary-700); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rp-settings-result b { display: block; margin-top: 4px; font-size: 13px; }
.rp-settings-result-empty { border: 1px dashed var(--paper-rule); border-radius: 12px; padding: 24px; color: var(--ink-500); text-align: center; }
.rp-settings-shortcut { display: grid; grid-template-columns: minmax(130px,190px) minmax(0,1fr); gap: 18px; padding: 14px 16px; border-bottom: 1px solid var(--paper-rule); }
.rp-settings-shortcut:last-child { border-bottom: 0; }
.rp-settings-shortcut b { color: var(--ink-800); font-size: 12px; }
.rp-settings-shortcut span { color: var(--ink-600); font-size: 12px; line-height: 1.55; }
.rp-settings-theme-current { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 16px; padding: 18px; border: 1px solid var(--paper-rule); border-radius: 14px; background: linear-gradient(135deg,var(--surface),var(--paper-2)); }
.rp-settings-theme-current h2 { margin: 0 0 7px; font-size: 20px; }
.rp-settings-theme-current p { margin: 0; color: var(--ink-500); font-size: 12px; line-height: 1.45; }
.rp-settings-theme-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.rp-settings-theme-strip span { min-height: 46px; border: 1px solid var(--paper-rule); border-radius: 8px; }
.rp-settings-theme-strip span:nth-child(1) { background: var(--bg); }
.rp-settings-theme-strip span:nth-child(2) { background: var(--surface); }
.rp-settings-theme-strip span:nth-child(3) { background: var(--primary-600); }
.rp-settings-theme-strip span:nth-child(4) { background: var(--ink-900); }
.rp-settings-theme-family { margin-top: 20px; }
.rp-settings-theme-family-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.rp-settings-theme-family-head b { color: var(--ink-800); font-size: 14px; }
.rp-settings-theme-family-head span { color: var(--ink-500); font-size: 11px; }
.rp-settings-dialog .rp-noturno-lista { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.rp-settings-dialog .rp-noturno-opc { min-height: 112px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-content: center; padding: 12px; border-radius: 12px; background: var(--surface); }
.rp-settings-dialog .rp-noturno-amostra { width: 38px; height: 38px; }
.rp-settings-dialog .rp-noturno-txt .nm { font-size: 13px; font-weight: 750; }
.rp-settings-dialog .rp-noturno-txt .ds { margin-top: 5px; line-height: 1.38; }
.rp-settings-dialog .rp-noturno-nota { margin: 9px 2px 0; }
.rp-settings-dialog .rp-marca-titulo { margin-top: 24px; }
.rp-settings-dialog .rp-marca-tons { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0; }
.rp-settings-dialog .rp-marca-bola { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 9px; border-radius: 10px; }
.rp-settings-dialog .rp-marca-bola::after { position: static; flex: none; }
.rp-settings-dialog .rp-marca-nome { color: var(--ink-700); font-size: 11px; }
.rp-settings-dialog button:focus-visible, .rp-settings-dialog input:focus-visible, .rp-settings-dialog select:focus-visible { outline: 3px solid var(--focus-ring-color,#0e4f88); outline-offset: 2px; }

html[data-toque] .rp-settings-topbar { min-height: 72px; padding-left: max(16px,env(safe-area-inset-left,0px)); padding-right: max(16px,env(safe-area-inset-right,0px)); }
html[data-toque] .rp-settings-layout { display: block; overflow: hidden; }
html[data-toque] .rp-settings-nav { overflow: hidden; padding: 9px max(12px,env(safe-area-inset-right,0px)) 9px max(12px,env(safe-area-inset-left,0px)); border-right: 0; border-bottom: 1px solid var(--paper-rule); }
html[data-toque] .rp-settings-nav-label { display: none; }
html[data-toque] .rp-settings-tablist { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
html[data-toque] .rp-settings-tablist::-webkit-scrollbar { display: none; }
html[data-toque] .rp-settings-tab { width: auto; min-width: max-content; min-height: 44px; flex: none; }
html[data-toque] .rp-settings-main { height: calc(100dvh - 72px - 63px); padding-bottom: max(48px,env(safe-area-inset-bottom,0px)); }
html[data-toque] .rp-settings-close, html[data-toque] .rp-settings-back, html[data-toque] .rp-settings-action { min-height: 44px; }

@media (max-width: 760px) {
  .rp-settings-topbar { grid-template-columns: 1fr auto; }
  .rp-settings-brand, .rp-settings-user-copy { display: none; }
  .rp-settings-back { justify-self: start; }
  .rp-settings-user { gap: 7px; }
  .rp-settings-layout { display: block; overflow: hidden; }
  .rp-settings-nav { overflow: hidden; padding: 9px 10px; border-right: 0; border-bottom: 1px solid var(--paper-rule); }
  .rp-settings-nav-label { display: none; }
  .rp-settings-tablist { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
  .rp-settings-tab { width: auto; min-width: max-content; flex: none; }
  .rp-settings-main { height: calc(100dvh - 68px - 63px); padding: 23px 17px 44px; }
  .rp-settings-heading { display: block; }
  .rp-settings-search { width: 100%; margin-top: 18px; }
  .rp-settings-catalog, .rp-settings-dialog .rp-noturno-lista { grid-template-columns: 1fr; }
  .rp-settings-theme-current { grid-template-columns: 1fr; }
  .rp-settings-theme-strip { min-height: 52px; }
  .rp-settings-dialog .rp-marca-tons { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rp-settings-account { align-items: flex-start; flex-wrap: wrap; }
  .rp-settings-account-actions { width: 100%; justify-content: flex-start; }
  .rp-settings-shortcut { grid-template-columns: 1fr; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   [CP_TELA_CHEIA_TOUCH_04SET] O selo CP deixa de abrir um bloco de 460 px
   dentro do breadcrumb. O painel passa a ocupar a janela, com cabeçalho e
   rodapé estáveis e somente o corpo rolável. O modo toque específico mora em
   estudo/toque-mode.css; aqui está a base Mac/teclado.
   ══════════════════════════════════════════════════════════════════════════ */
.cp-selo-dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: grid;
  background: var(--bg, #151719);
}
.cp-selo-dialog {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 72px;
  overflow: hidden;
  background: var(--bg, var(--paper));
  color: var(--ink-800);
}
.cp-selo-dialog-head {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(260px, auto) minmax(80px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  border-bottom: 1px solid var(--paper-rule);
  background: var(--surface);
}
.cp-selo-dialog-voltar {
  justify-self: start;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-500);
  font: 500 24px/1 inherit;
}
.cp-selo-dialog-voltar:hover,
.cp-selo-dialog-voltar:focus-visible { background: var(--paper-2); color: var(--ink-800); }
.cp-selo-dialog-titulo { min-width: 0; text-align: center; }
.cp-selo-dialog-titulo strong { display: block; font-size: 15px; color: var(--ink-900); }
.cp-selo-dialog-titulo span { display: block; margin-top: 2px; color: var(--ink-500); font-size: 10.5px; }
.cp-selo-dialog-codigo {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 11px;
  overflow: hidden;
  border: 1px solid var(--gold-500);
  border-radius: 999px;
  background: var(--gold-12, var(--warning-50));
  color: var(--gold-300, var(--warning-700));
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cp-selo-dialog-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px max(24px, calc((100vw - 1080px) / 2)) 32px;
  -webkit-overflow-scrolling: touch;
}
.cp-selo-dialog-endereco,
.cp-selo-dialog-dados {
  min-width: 0;
  border: 1px solid var(--paper-rule);
  border-radius: 13px;
  background: var(--surface);
}
.cp-selo-dialog-endereco { padding: 13px 15px; margin-bottom: 16px; }
.cp-selo-dialog-endereco > span,
.cp-selo-dialog-dados-titulo > span {
  display: block;
  color: var(--ink-400);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.cp-selo-dialog-endereco > strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: var(--ink-800);
  font-size: 12px;
  font-weight: 650;
}
.cp-selo-dialog-intro { display: grid; gap: 3px; margin: 0 0 9px; }
.cp-selo-dialog-intro > strong { color: var(--ink-900); font-size: 14px; }
.cp-selo-dialog-intro > span { color: var(--ink-500); font-size: 11.5px; }
.cp-selo-dialog-intencoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.cp-selo-intencao {
  min-width: 0;
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--ink-300);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-800);
  text-align: left;
  font: inherit;
}
.cp-selo-intencao:hover,
.cp-selo-intencao:focus-visible,
.cp-selo-intencao.selecionada {
  border-color: var(--gold-500);
  background: var(--gold-12, var(--warning-50));
}
.cp-selo-intencao > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cp-selo-intencao b { min-width: 0; font-size: 12.5px; }
.cp-selo-intencao small {
  margin-left: auto;
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--ink-300);
  border-radius: 999px;
  color: var(--ink-500);
  font-size: 9.5px;
  white-space: nowrap;
}
.cp-selo-intencao em { color: var(--ink-500); font-size: 11px; font-style: normal; line-height: 1.5; }
.cp-selo-dialog-dados {
  display: flex;
  flex-direction: column;
  padding: 15px;
  font-size: 12px;
  line-height: 1.5;
}
.cp-selo-dialog-dados-titulo { display: grid; gap: 4px; margin-bottom: 12px; }
.cp-selo-dialog-dados-titulo > strong { color: var(--ink-900); font-size: 13.5px; }
.cp-selo-dialog-dados-titulo > span { letter-spacing: 0; text-transform: none; font-weight: 500; }
.cp-selo-dialog-form { order: -1; margin: 0 0 16px !important; }
.cp-selo-dialog-form textarea { box-sizing: border-box; }
.cp-selo-dialog-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 max(24px, calc((100vw - 1080px) / 2));
  border-top: 1px solid var(--paper-rule);
  background: var(--surface);
}
.cp-selo-dialog-foot > span { flex: 1; min-width: 0; color: var(--ink-500); font-size: 11.5px; }
.cp-selo-dialog-secundario,
.cp-selo-dialog-primario {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--ink-300);
  border-radius: 9px;
  background: var(--paper-2);
  color: var(--ink-700);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.cp-selo-dialog-primario {
  border-color: var(--gold-500);
  background: var(--gold-500);
  color: #211807;
}
.cp-selo-dialog-primario:disabled { opacity: .38; cursor: not-allowed; }

@media (max-width: 760px) {
  .cp-selo-dialog-head { grid-template-columns: 54px minmax(0, 1fr) auto; padding: 0 10px; gap: 6px; }
  .cp-selo-dialog-titulo span { display: none; }
  .cp-selo-dialog-codigo { max-width: 126px; }
  .cp-selo-dialog-body { padding: 14px 12px 24px; }
  .cp-selo-dialog-intencoes { grid-template-columns: minmax(0, 1fr); }
  .cp-selo-dialog-foot { padding: 9px 12px; flex-wrap: wrap; }
  .cp-selo-dialog-foot > span { flex-basis: 100%; order: -1; }
}

/* [CARDLARGURA_23SET 23/set/2026] O TEXTO DO CARD DA QUESTAO VAI ATE A BORDA.
   Pedido do Kadu, verbatim: «Os cards, eles nao estao usando todo (...) o
   comprimento horizontal dele (...) Entao eu quero que voce resolva isso no
   aplicativo inteiro.» Mockup aprovado («aprovado», 23/set):
   _mockups_todos/MOCKUP_CARDLARGURA_23SET.html, opcao 1 (so o card da questao).
   A CAUSA NAO ERA o botao de copiar (saiu em 08/set, COPIARPOSGABARITO, e o
   recuo de 22px no CARDCHEIO): era o text-wrap pretty do ds/colors_and_type.css
   (seletores p e .question/.enunciado) e dos modos escuros (.solve-main). No
   WebKit do Mac o pretty reparte as palavras do paragrafo INTEIRO para igualar
   a borda direita e puxa todas as linhas para dentro — no print, ~120px vazios.
   Aqui so o ESTILO de quebra volta ao comum; o text-wrap-mode (e o pre-wrap do
   enunciado) fica intocado, por isso a longhand e nao o atalho text-wrap.
   Fora do card nada muda: a opcao 2 (todo p do app) nao foi a escolhida.
   O teto de 68ch do iPad (estudo/toque-mode.css) continua — e legibilidade. */
.question-card,
.question-card p,
.question-card .question,
.question-card .enunciado,
.question-card .alt-text,
.question,
.enunciado {
  text-wrap-style: auto;
}