/* Passagem UX 14/09: comunicação antes da administração. Sem alterar ordem ou dados da grade. */
html body.sb-shell { padding-bottom: calc(var(--sb-dock-h, 160px) + 12px); background: #f4f6f9; }
html body.sb-shell .wrap { width: 100%; min-width: 0; box-sizing: border-box; scroll-padding-bottom: calc(var(--sb-dock-h, 160px) + 16px); }
/* O conteúdo aparece com a prancha e o rascunho restaurados. Se o script falhar, o CSS libera
   a interface após 8s; a falha de um recurso não deixa a comunicação escondida para sempre. */
html body.sb-shell.sb-starting .wrap { visibility: hidden; animation: sb-start-fallback 0s 8s forwards; }
@keyframes sb-start-fallback { to { visibility: visible; } }
html { --sb-message-reserve: 176px; scroll-padding-top: var(--hh, 56px); }
#board .cell { scroll-margin-top: var(--sb-message-reserve); scroll-margin-bottom: calc(var(--sb-dock-h, 160px) + 16px); }
/* Grade fixa: a matriz inteira cabe na altura livre (--sb-fixed-h, medida pelo sbFixedFit). A largura
   do cartão sai da altura (proporção .88) e para em 64 px; abaixo disso a prancha rola por dentro. */
#board.sb-fixed-grid{--sb-fx-gap:8px;--sb-fx-w:max(64px,min(480px,calc((var(--sb-fixed-h,100vh) - (var(--mxrows) - 1) * var(--sb-fx-gap)) / var(--mxrows) * .88)));grid-auto-flow:row!important;grid-template-columns:repeat(var(--mxcols),minmax(64px,1fr))!important;grid-template-rows:repeat(var(--mxrows),auto)!important;grid-auto-columns:unset!important;gap:var(--sb-fx-gap)!important;justify-content:stretch!important;width:min(100%,calc(var(--mxcols) * var(--sb-fx-w) + (var(--mxcols) - 1) * var(--sb-fx-gap)));max-width:none!important;margin-inline:auto;overflow-x:auto;box-sizing:border-box}
#board.sb-fixed-grid>.cell{aspect-ratio:.88;height:auto!important;min-height:0!important;min-width:0;width:auto!important;overflow:hidden;container-type:inline-size;padding:7% 4% 5%!important;justify-content:center}
#board.sb-fixed-grid>.cell img,#board.sb-fixed-grid>.cell .imgwrap{height:auto!important;width:72%!important;max-width:100%;min-height:0!important;max-height:62%!important}
#board.sb-fixed-grid>.cell .lbl{font-size:clamp(10px,6cqw + 6px,32px)!important;margin-top:4%}
/* Vazio fica à vista, em cinza: a matriz aparece delimitada e o lugar do cartão futuro já existe.
   Não fala, não recebe toque nem foco (aria-hidden, sem tabindex). */
#board .sb-fixed-empty{pointer-events:none;background:#e9edf2;border:2px solid #d3d9e1;border-radius:14px;box-shadow:none;cursor:default}
#board .sb-fixed-empty::before,#board .sb-fixed-empty::after{content:none!important;display:none!important}
html[data-tema="escuro"] #board .sb-fixed-empty{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
body.sb-hc #board .sb-fixed-empty{background:transparent;border:2px dashed #555}
@media (forced-colors:active){#board .sb-fixed-empty{border:1px dashed GrayText;background:Canvas}}
.matrixprint .sb-fixed-empty{visibility:hidden;pointer-events:none}
/* Cabe na tela (27/09): a prancha responsiva inteira na altura livre (--sb-fixed-h, do sbFixedFit), sem
   mudar a ordem nem o lugar dos cartões. A célula sai da altura (linhas) e da largura (colunas), a menor
   das duas, com piso de 64 px; abaixo do piso a rolagem volta. Legenda e rodapé saem só na tela. */
#board.sb-cabe{--sb-cb-gap:8px;--sb-cb-w:max(64px,min(480px,calc((var(--sb-fixed-h,100vh) - (var(--sb-cabe-rows) - 1) * var(--sb-cb-gap)) / var(--sb-cabe-rows) * .88),calc((100% - (var(--sb-cabe-cols) - 1) * var(--sb-cb-gap)) / var(--sb-cabe-cols))));gap:var(--sb-cb-gap)!important;grid-auto-columns:var(--sb-cb-w)!important;grid-template-columns:repeat(var(--sb-cabe-cols),var(--sb-cb-w))!important;justify-content:center!important}
#board.sb-cabe>.cell{aspect-ratio:.88;height:auto!important;min-height:0!important;min-width:0;width:auto!important;overflow:hidden;container-type:inline-size;padding:7% 4% 5%!important;justify-content:center}
#board.sb-cabe>.cell img,#board.sb-cabe>.cell .imgwrap{height:auto!important;width:72%!important;max-width:100%;min-height:0!important;max-height:62%!important}
#board.sb-cabe>.cell .lbl{font-size:clamp(10px,6cqw + 6px,32px)!important;margin-top:4%}
@media screen{body:has(#board.sb-cabe) #legend,body:has(#board.sb-cabe) .footrow{display:none!important}}
/* Cabe na tela, páginas (27/09): quando o piso de 64 px não cabe, a prancha vira faixas de linhas. Setas
   grandes (64 px de altura, metade da largura cada) para toque, olhar e acionador; o cartão não troca de coluna. */
#board>.cell.sb-pg-fora{display:none!important}
#board.sb-cabe{grid-template-rows:repeat(var(--sb-cabe-rows),auto)!important}
.sb-cabe-pager{display:flex;gap:8px;align-items:stretch;margin:8px 0 0}
.sb-cabe-pager[hidden]{display:none}
.sb-cabe-pager button{flex:1 1 0;min-height:64px;border:2px solid #1250E0;border-radius:14px;background:#fff;color:#1250E0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.sb-cabe-pager button .ico{width:32px;height:32px}
.sb-cabe-pager button:disabled{opacity:.3;cursor:default}
.sb-cabe-pager button:focus-visible{outline:3px solid #F9BA1C;outline-offset:2px}
.sb-cabe-pager-info{align-self:center;font:800 18px/1.1 Inter,system-ui,sans-serif;color:#041534;min-width:64px;text-align:center}
.sb-cabe-pager .ico-flip{transform:scaleX(-1)}
html[data-tema="escuro"] .sb-cabe-pager button{background:transparent;color:#9dbcff;border-color:#9dbcff}
html[data-tema="escuro"] .sb-cabe-pager-info{color:#e9eef6}
@media (max-width:760px){.sb-cabe-pager{order:4}}
/* Tela larga e baixa: as setas viram colunas de 64 px nas laterais da grade; o contador vai na seta de avançar. */
#board.sb-cabe.sb-cabe-lado{padding-left:72px!important;padding-right:72px!important}
.sb-cabe-pager.sb-cabe-lado{display:block;position:relative;height:0;margin:0}
.sb-cabe-pager.sb-cabe-lado button{position:absolute;bottom:0;width:64px;height:var(--sb-cabe-bh,64px);min-height:64px;flex-direction:column;gap:4px}
.sb-cabe-pager.sb-cabe-lado button[data-arg="-1"]{left:0}
.sb-cabe-pager.sb-cabe-lado button[data-arg="1"]{right:0}
.sb-cabe-pager.sb-cabe-lado button[data-arg="1"]::after{content:attr(data-info);font:800 13px/1.1 Inter,system-ui,sans-serif}
.sb-cabe-pager.sb-cabe-lado .sb-cabe-pager-info{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media print{.sb-cabe-pager{display:none!important}#board>.cell.sb-pg-fora{display:revert!important}}
/* Grade fixa ocupa a tela inteira: legenda e rodapé saem só na tela (a impressão mantém o crédito). */
@media screen{body:has(#board.sb-fixed-grid) #legend,body:has(#board.sb-fixed-grid) .footrow{display:none!important}}
/* HIG H07: botões do cabeçalho com 44 px em qualquer largura (a faixa deitada já tinha). */
header :is(.focusbtn,.lgbtn,.sb-acctbtn,.sb-acctlogin){min-height:44px;min-width:44px}
/* HIG H12: o canto tem o mínimo AA de 24 px; o alvo de 44 px é o próprio cartão (segurar, botão
   direito ou seta para baixo). Um canto de 44 px tiraria área do toque que fala. */
/* Reserva só o canto para as variantes; o toque na figura continua selecionando o cartão. */
.cell .sb-var-trigger {
  width: var(--sb-target-variants,20px) !important;
  height: var(--sb-target-variants,20px) !important;
  min-width: var(--sb-target-variants,20px) !important;
  min-height: var(--sb-target-variants,20px) !important;
  top: 0 !important;
  right: 0 !important;
  place-items: start end !important;
  padding-right: 2px;
  box-sizing: border-box;
  color: var(--sb-var-trigger-cor, var(--cell-b, #ccc)) !important;
  background: transparent !important;
}
/* Títulos de área ficam disponíveis à leitura assistiva, sem ocupar a composição visual. */
.predzone .predtitle, .mt-sugestoes-titulo, .mt-compositor > label,
#breadcrumb .bc-cur, #breadcrumb:not(:has(.bc-link)) {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip-path: inset(50%); white-space: nowrap; border: 0 !important;
}
#breadcrumb .bc-sep:has(+ .bc-cur) { display: none; }
/* O seletor passa sobre a prancha, mas fica atrás do cabeçalho ao rolar. */
html body .ctxdd-pop { z-index: 90; }
html body.sb-shell.sb-dockshut .sb-pager { bottom: var(--sb-dock-h, 88px); }
html body.sb-shell .sb-shellbar { background: #fff; box-shadow: 0 -2px 12px #04153420; }
html body.sb-shell .sb-dockhandle { background: #e9eef6; color: #041534; }
html body.sb-shell .sb-shellbtn { min-height: 48px; }
/* Dois estados: só o puxador quando fechado, todos os comandos quando aberto. */
html body.sb-shell.sb-dockshut .sb-dockrows { display: none; }
html body.sb-shell.sb-dockshut #sbShellBar { padding: 4px 8px calc(8px + env(safe-area-inset-bottom,0px)); background: transparent; box-shadow: none; border: 0; pointer-events: none; }
html body.sb-shell.sb-dockshut #sbShellBar::before { display: none; }
html body.sb-shell.sb-dockshut .sb-dockhandle { width: 72px; min-width: 72px; min-height: 44px; padding: 2px 14px; border: 1px solid #d8e0eb; border-radius: 12px; box-shadow: 0 2px 8px #04153412; background: var(--sb-controls-surface, #fff); backdrop-filter: var(--sb-controls-blur); -webkit-backdrop-filter: var(--sb-controls-blur); color: #42566f; }
html body.sb-shell.sb-dockshut .sb-dockhandle::after, html body.sb-shell.sb-dockshut .sb-dockhandle-lbl { display: none; }
body.sb-shell:has(#typepanel:not([hidden])) .sb-pathspanel { display: none; }
body.mt-on header .ham { visibility: hidden; }
#modotexto .mt-campo { box-shadow: 0 1px 3px #04153410; }
.mt-sugestoes-titulo { font-size: 14px; color: #566472; font-weight: 700; }
.tp-scope { display: flex; gap: 8px; margin-block: 12px; }
.tp-scope button { min-height: 44px; flex: 1; border: 1px solid #d8e0ea; border-radius: 10px; padding: 8px; background: #fff; color: #14243d; font: inherit; }
.tp-scope [aria-pressed="true"] { background: #1250e0; color: #fff; }
body .typepanel .tp-card { min-height: 64px; }
body .sb-varpop { max-height: calc(100dvh - 24px); overflow-y: auto; align-content: start; }
body .sb-varpop [hidden] { display: none !important; }
.sb-varhead { position: sticky; top: -8px; width: 100%; background: #fff; padding: 12px 4px; font-weight: 700; z-index: 1; }
.sb-varall { width: 100%; min-height: 44px; font: inherit; border: 1px solid #d8e0ea; border-radius: 10px; padding: 8px; background: #fff; color: #14243d; }
.sb-varpop button:focus-visible { outline: 3px solid #1250e0; outline-offset: 2px; }
#modotexto #mtTeclado[hidden] { display: none !important; }
.sb-modebar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.sb-mode-switch { display: flex; gap: 4px; }
.sb-modebar .ctxdd-slot:not(:empty) { flex: 0 1 240px; min-width: 160px; }
html body .sb-modebar .ctxdd { margin: 0 !important; max-width: none; }
html body .sb-modebar .ctxdd-btn { min-height: 44px; padding: 8px 12px; }
.sb-modebar button, #sbModeToggle { min-height: 44px; box-sizing: border-box; padding: 12px; border-radius: 10px; border: 1px solid #d8e0ea; font: 700 14px Inter,system-ui,sans-serif; background: #fff; color: #14243d; }
#sbModeToggle { white-space: nowrap; }
#modotexto .mt-textos { position: fixed; inset: 12px; max-width: 720px; margin-inline: auto; background: #fff; }
.sb-mode-settings { display: inline-flex; gap: 8px; align-items: center; justify-content: center; margin-left: auto; }
.sb-modebar .ctxdd-slot:empty { display: none; }
.sb-message-search { min-width: 0; cursor: pointer; border-radius: 8px; }
.sb-message-search:focus-visible, #sbModeToggle:focus-visible { outline: 3px solid #1250e0; outline-offset: 3px; }
html body header .ham, body.sb-focus .sb-mode-settings { display: none !important; }
/* As ferramentas originais ficam no diálogo; nenhum segundo menu ocupa a comunicação. */
html body #config:not(.open) { display: none; }
body .sb-modebar button:focus-visible { outline: 3px solid #1250e0; outline-offset: 3px; }
body.mt-on .mt-topo .mt-modo { order: -1; margin-right: 0; }
body .config .cfg-quick > .mt-abrir, body .config .cfg-quick > [data-act="typeToggle"] { display: none; }
body .hin .sharebtn-h { display: none !important; }
/* O painel tem fundo inerte e sobrepõe a grade, cujo espaço original fica reservado. */
.sb-config-dialog { position: fixed; inset: 0; background: #04153488; display: flex; justify-content: flex-end; }
.sb-config-dialog[hidden] { display: none !important; }
/* AJ-01 (27/09): a folha vira coluna de 3 partes — cabeçalho fixo, corpo que rola (é o próprio
   #config.open, ver abaixo) e rodapé fixo com "Voltar à comunicação" (critério F1: sempre à
   vista, nunca no fim de um scroll). Antes, .sb-config-card inteira rolava (overflow:auto) e só
   o cabeçalho tinha um truque de sticky; agora só o meio rola. */
.sb-config-card { width: min(100%, 460px); height: 100%; overflow: hidden; background: var(--sb-surface, #fff); box-shadow: -8px 0 30px #04153430; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; }
.sb-config-head { flex: 0 0 auto; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: var(--sb-space-3, 12px) var(--sb-space-4, 16px); }
.sb-config-head h2 { font-size: 20px; font-weight: 700; margin: 0; color: var(--sb-color-ink, #14243d); }
.sb-config-head button { min-width: 44px; min-height: 44px; background: var(--sb-surface, #fff); border: 1px solid var(--sb-border, #d8e0ea); border-radius: var(--sb-radius-control, 10px); font-size: 22px; cursor: pointer; }
.sb-config-back { flex: 0 0 auto; width: calc(100% - 32px); min-height: var(--sb-target-comfort, 48px); margin: var(--sb-space-3, 12px) var(--sb-space-4, 16px); padding: 12px; background: var(--sb-color-primary, #1250e0); color: #fff; border: 0; border-top: 0; border-radius: var(--sb-radius-control, 10px); font: 700 16px Inter, system-ui, sans-serif; cursor: pointer; }
body .sb-config-dialog #config.open { position: static; display: block; width: auto; max-height: none; border: 0; background: transparent; box-shadow: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid var(--sb-border, #d8e0ea); }
.sb-config-dialog .cfgin { padding: 0; display: block; }
/* index.html tem uma regra de largura estreita que empilha `.cfg-quick` em coluna e cada botão
   em width:100% (era o "cada ação vira uma linha inteira" que a SPEC pediu para compactar numa
   única linha de 44px). Aqui dentro do diálogo ela é sempre revertida, em qualquer largura.
   As 3 ações (Imprimir A4/Compartilhar/Curso) viram colunas IGUAIS (`flex:1 1 0`) em vez de
   largura pelo conteúdo — com `width:auto!important` cada botão media pelo texto e "Curso"
   estourava a largura em 390px (ícone de 19px do `.pwabtn`, que só encolhia a partir de 761px).
   Aqui o ícone encolhe sempre, o texto trunca com reticências se precisar, e ninguém corta na
   borda nem pede rolagem horizontal. */
.sb-config-dialog .cfg-quick { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch; gap: 6px; padding: var(--sb-space-2, 8px) var(--sb-space-3, 12px); }
/* `:not([hidden])` importa: um `flex:1 1 0` sem essa guarda vira largura IGUAL também para o
   Digitar/Modo Texto/engrenagem de Ajustes, que este painel esconde por outras regras (o `hidden`
   do HTML, `style="display:none"` do Compartilhar condicional, `#cfgAdvBtn{display:none}` — nenhuma
   delas tem `!important`, então bastava eu não empurrar `display` aqui por cima). */
.sb-config-dialog .cfg-quick > *:not([hidden]) { flex: 1 1 0; min-width: 0; width: auto !important; min-height: 44px; padding-left: 6px; padding-right: 6px; text-align: center; }
.sb-config-dialog .cfg-quick > *:not([hidden]) .ico { width: 14px; height: 14px; flex: 0 0 auto; }
.sb-config-dialog .cfg-quick > *:not([hidden]) span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-config-dialog .cfg-quick #printBtn { margin-left: 0; }
.sb-config-dialog #cfgAdvBtn { display: none; }
body .sb-config-dialog #cfgAdv { display: block; position: static; width: auto; max-width: none; border: 0; padding: 0; box-shadow: none; }
/* Lista agrupada (HIG "Boxes": sem caixa fechada dentro de caixa). Cada `.cfgsec` é um grupo
   com fio embaixo, não borda fechada — a antiga `.cfgsec{border:1px solid...;border-radius:12px}`
   empilhava uma caixa por seção; agora o separador é o próprio fio da lista. */
.sb-config-dialog #cfgAdv .cfgsec { display: block; border: 0; border-bottom: 1px solid var(--sb-border, #d8e0ea); border-radius: 0; padding: 0; margin: 0; }
.sb-config-dialog #cfgAdv .cfgsec:first-of-type { border-top: 1px solid var(--sb-border, #d8e0ea); }
.sb-config-dialog #cfgAdv .cfgsec[hidden] { display: none; }
.sb-config-dialog #cfgAdv .cfgseclbl { width: 100%; min-height: var(--sb-target-comfort, 48px); display: flex; align-items: center; gap: var(--sb-space-2, 8px); padding: 0 var(--sb-space-4, 16px); background: transparent; border: 0; text-align: left; cursor: pointer; color: var(--sb-color-ink, #14243d); font: inherit; text-transform: none; }
.sb-config-dialog #cfgAdv .cfgseclbl:hover { background: var(--sb-control, #eef2f6); }
.sb-config-dialog #cfgAdv .cfgchev { width: 16px; height: 16px; flex: 0 0 auto; color: var(--sb-color-muted, #566472); transition: transform var(--sb-motion, 120ms); }
.sb-config-dialog #cfgAdv .cfgseclbl[aria-expanded="true"] .cfgchev { transform: rotate(90deg); }
.sb-config-dialog #cfgAdv .cfgsectitle { flex: 0 0 auto; font: 700 15px/1.2 var(--sb-font, inherit); white-space: nowrap; }
.sb-config-dialog #cfgAdv .cfgresumo { flex: 1 1 auto; min-width: 0; text-align: right; font: 400 13px/1.2 var(--sb-font, inherit); color: var(--sb-color-muted, #566472); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-config-dialog #cfgAdv .cfgseclbl[aria-expanded="true"] .cfgresumo { display: none; }
.sb-config-dialog #cfgAdv .cfgbody { padding: 0 var(--sb-space-4, 16px) var(--sb-space-3, 12px); }
.sb-config-dialog #cfgAdv .cfgbody[hidden] { display: none; }
/* Linha de ajuste (§4 da SPEC): rótulo à esquerda, controle à direita, fio entre linhas — nunca
   caixa própria por linha (era o padrão de `.sb-acctm .mi`/`.appearance-toggle` de largura cheia). */
.sb-config-dialog #cfgAdv .cfgrow { min-height: var(--sb-target, 44px); display: flex; align-items: center; gap: var(--sb-space-3, 12px); padding: var(--sb-space-2, 8px) 0; border-bottom: 1px solid var(--sb-border, #d8e0ea); }
.sb-config-dialog #cfgAdv .cfgrow.cfgrow-wrap { flex-wrap: wrap; }
/* "Cor da tela": rótulo em cima e seletor na largura da seção; em fr/de os três botões não cabem ao lado do rótulo (QA da Cris no #671). */
.sb-config-dialog #cfgAdv .cfgrow.cfgrow-stack { flex-direction: column; align-items: stretch; gap: var(--sb-space-2, 8px); }
.sb-config-dialog #cfgAdv .cfgrow-stack > .optgrp { min-width: 0; max-width: 100%; }
.sb-config-dialog #cfgAdv .cfgrow-stack .seg { display: flex; width: 100%; max-width: 100%; box-sizing: border-box; }
.sb-config-dialog #cfgAdv .cfgrow-stack .seg button { flex: 1 1 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.sb-config-dialog #cfgAdv .cfgrow:last-child, .sb-config-dialog #cfgAdv .cfgrow-full:last-child { border-bottom: 0; }
.sb-config-dialog #cfgAdv label.cfgrow { cursor: pointer; }
.sb-config-dialog #cfgAdv .cfgrowlbl { flex: 1 1 auto; min-width: 0; font: 500 15px/1.3 var(--sb-font, inherit); color: var(--sb-color-ink, #14243d); }
.sb-config-dialog #cfgAdv .cfgrowhint { display: block; font: 400 13px/1.3 var(--sb-font, inherit); color: var(--sb-color-muted, #566472); margin-top: 2px; font-weight: 400; }
.sb-config-dialog #cfgAdv .cfgrow-full { padding: var(--sb-space-2, 8px) 0; border-bottom: 1px solid var(--sb-border, #d8e0ea); }
.sb-config-dialog #cfgAdv .optgrp { flex: 0 0 auto; font-size: 13px; }
/* Número do tom de pele: 12px na página (usado também no editor.html, fora deste escopo) fica
   abaixo do piso de 13px pedido aqui — corrigido só dentro do painel de Ajustes. */
.sb-config-dialog #cfgAdv .tom-num { font-size: 13px; }
/* Switch binário — um só desenho para todo ajuste de dois estados (SPEC §4/§7: muda de checkbox
   nativo para o padrão de LINHA de lista do iOS, HIG-E07 registrado como exceção formal). Estado
   nunca depende só de cor: a bola muda de lado além do trilho mudar de tom, e o trilho desligado
   passa 3:1 de contraste nos dois temas (contas no SPEC). O `<input type=checkbox>` original
   segue no DOM com o mesmo id/data-change — só o desenho é substituído via `appearance:none`. */
.sb-config-dialog #cfgAdv input.cfgswitch { appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative; width: 44px; height: 26px; margin: 0; border: 0; border-radius: 999px; background: var(--sb-border-strong, #8495aa); cursor: pointer; transition: background-color var(--sb-motion, 120ms); }
.sb-config-dialog #cfgAdv input.cfgswitch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--sb-motion, 120ms); }
.sb-config-dialog #cfgAdv input.cfgswitch:checked { background: var(--sb-color-primary, #1250e0); }
.sb-config-dialog #cfgAdv input.cfgswitch:checked::before { transform: translateX(18px); }
/* Minúsculo/Inferior/Contraste eram três botões `aria-pressed` de largura cheia com desenho
   próprio cada um; viram o MESMO switch de linha, mantendo o botão (não o checkbox) porque o
   estado deles é lido por leitor de tela via `aria-pressed`, não por `:checked`. O `<button>`
   colide com a regra geral `#cfgAdv button{min-height:44px}` (linha abaixo) e virava um quadrado
   de 44x44 (`border-radius:999px` de um quadrado é um círculo) — por isso o botão aqui é só o
   alvo de toque (44x44, invisível) e o trilho visível (44x26, tamanho do desenho) é um `::before`
   central, com a bolinha em `::after`. */
.sb-config-dialog #cfgAdv .cfgswitchbtn { appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative; width: 44px; height: var(--sb-target, 44px); margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sb-config-dialog #cfgAdv .cfgswitchbtn::before { content: ''; position: absolute; top: 50%; left: 0; width: 44px; height: 26px; margin-top: -13px; border-radius: 999px; background: var(--sb-border-strong, #8495aa); transition: background-color var(--sb-motion, 120ms); }
.sb-config-dialog #cfgAdv .cfgswitchbtn::after { content: ''; position: absolute; top: 50%; left: 2px; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--sb-motion, 120ms); }
.sb-config-dialog #cfgAdv .cfgswitchbtn[aria-pressed="true"]::before { background: var(--sb-color-primary, #1250e0); }
.sb-config-dialog #cfgAdv .cfgswitchbtn[aria-pressed="true"]::after { transform: translateX(18px); }
/* "Usar sem internet": a seção reusa `.sb-offline-section`, que em editor.html é uma caixa
   própria (border+fundo+raio); dentro do painel de Ajustes ela já mora num grupo, então a caixa
   vira caixa-dentro-de-caixa — neutralizada só aqui. */
.sb-config-dialog #cfgAdv .sb-offline-section { border: 0; padding: 0; margin: 0; background: transparent; border-radius: 0; }
/* Conta & privacidade: lista de navegação (HIG "Lists and tables"), não pilha de botões com
   borda própria (era `.sb-acctm .mi{border:1px solid...;border-radius:10px}` seis vezes). */
.sb-config-dialog #cfgAdv .cfgnavlist { display: block; width: 100%; border-top: 1px solid var(--sb-border, #d8e0ea); }
.sb-config-dialog #cfgAdv .cfgnavlist .mhead { padding: var(--sb-space-2, 8px) 0; font: 400 13px/1.3 var(--sb-font, inherit); color: var(--sb-color-muted, #566472); border-bottom: 0; }
.sb-config-dialog #cfgAdv .cfgnavlist .mi, .sb-config-dialog #cfgAdv .cfgnavitem { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: var(--sb-target, 44px); padding: 0; border: 0; border-bottom: 1px solid var(--sb-border, #d8e0ea); border-radius: 0; background: transparent; color: var(--sb-color-ink, #14243d); font: 500 15px/1.3 var(--sb-font, inherit); text-align: left; cursor: pointer; }
.sb-config-dialog #cfgAdv .cfgnavlist .mi:last-child, .sb-config-dialog #cfgAdv .cfgnavitem:last-child { border-bottom: 0; }
.sb-config-dialog #cfgAdv .cfgnavlbl { display: inline-flex; align-items: center; gap: 8px; }
.sb-config-dialog #cfgAdv .cfgnavitem::after { content: '›'; color: var(--sb-color-muted, #566472); }
.sb-config-dialog #cfgAdv .cfgnavseta { color: var(--sb-color-muted, #566472); }
/* Vermelho só na zona destrutiva (Esquecer aprendizado, Sair) — Feedback fica fora, neutro. */
.sb-config-dialog #cfgAdv .cfgzona-destrutiva { margin-top: var(--sb-space-2, 8px); border-top: 2px solid var(--sb-border-strong, #8495aa); }
.sb-config-dialog #cfgAdv .cfgnavitem-danger, .sb-config-dialog #cfgAdv .cfgnavlist .mi.sair { color: var(--sb-color-danger, #a32319); border-top: 2px solid var(--sb-border-strong, #8495aa); margin-top: var(--sb-space-2, 8px); }
.sb-config-dialog #cfgAdv button, .sb-config-dialog #cfgAdv select { min-height: 44px; }
.sb-config-dialog button:focus-visible, .sb-config-dialog select:focus-visible, .sb-config-dialog input:focus-visible, .sb-config-dialog .cfgswitchbtn:focus-visible { outline: 3px solid #1250e0; outline-offset: 3px; }
body.sb-focus .mt-cfg { display: none !important; }
/* Composição: a mensagem confirmada tem precedência sobre sugestões (104 / 64 ≈ 1,618). */
html body.sb-shell .sentence { --sb-message-pic: 104px; display: grid; grid-template-columns: minmax(0,1fr) 208px; gap: 16px; min-height: 160px; padding: 12px; margin-bottom: 8px; align-items: center; }
html body.sb-shell .slots { min-width: 0; min-height: 132px; max-height: 208px; flex-wrap: nowrap; overflow: auto; gap: 8px; padding: 4px; }
html body.sb-shell .slots .chip { flex: 0 0 auto; width: calc(var(--sb-message-pic) + 8px); gap: 4px; }
html body.sb-shell .slots .chip > img, html body.sb-shell .slots .chip > .imgwrap { width: var(--sb-message-pic); height: var(--sb-message-pic); max-width: none; }
/* P17-MESMO (18/09, DESIGN-Motor-da-Lingua §6.7): o artigo `um` em chip compacto, figura a 65% (34 de 52 px); o conteudo fica em destaque. */
html body.sb-shell .slots .chip.chip-gram { width: calc(var(--sb-message-pic) * .65 + 8px); }
html body.sb-shell .slots .chip.chip-gram > img, html body.sb-shell .slots .chip.chip-gram > .imgwrap { width: calc(var(--sb-message-pic) * .65); height: calc(var(--sb-message-pic) * .65); }
html body.sb-shell .slots .chip span { font-size: 16px; line-height: 20px; overflow-wrap: anywhere; }
html body.sb-shell .slots .chip.chip-txt, html body.sb-shell .slots .chip.chip-ges-txt { width: auto; max-width: 240px; }
html body.sb-shell .sentence .controls { display: grid; grid-template-columns: repeat(4,minmax(44px,1fr)); gap: 8px; }
html body.sb-shell .sentence .controls #sayBtn { grid-column: 1 / -1; min-height: 56px; }
html body.sb-shell .sentence .controls .ctrl.alt { min-width: 44px; min-height: 44px; padding: 8px; }
.sb-undo-icon { font-size: 24px; line-height: 1; }
html body.sb-shell .predbox { padding: 8px; }
/* A largura decide quantos cartões cabem à vista, não quantos são oferecidos. */
html body.sb-shell .predrow {
  --sb-pred-visible: 6; --sb-pred-gap: 8px;
  display: flex; flex-wrap: nowrap;
  gap: var(--sb-pred-gap); align-items: stretch; min-width: 0;
  overflow-x: auto; padding: 4px; scroll-padding-inline: 4px;
  overscroll-behavior-x: contain;
}
html body.sb-shell .predrow:focus-visible { outline: 2px solid #1250e0; outline-offset: 1px; border-radius: 10px; }
html body.sb-shell .predrow .cell {
  flex: 0 0 max(76px,calc((100% - (var(--sb-pred-visible) - 1)*var(--sb-pred-gap))/var(--sb-pred-visible)));
  min-height: 100px; padding: 6px;
}
html body.sb-shell .predrow .cell > img, html body.sb-shell .predrow .cell > .imgwrap { width: 64px; height: 64px; max-width: 100%; }
html body.sb-shell .predrow .cell .lbl { font-size: 14px; line-height: 18px; margin-top: 4px; }
html body.sb-shell .predtitle { margin-bottom: 8px; }
@media (min-width: 1100px) {
  html body.sb-shell .predrow { --sb-pred-visible: 9; --sb-pred-gap: 6px; }
  html body.sb-shell .sb-shellbtn { flex-direction: row; gap: 8px; }
  body.mt-on #modotexto { padding-inline: max(16px, calc((100vw - 1280px) / 2)); }
}
@media (max-width: 760px) {
  html body.sb-shell .predrow { --sb-pred-visible: 4; --sb-pred-gap: 6px; }
  .sb-modebar { display: grid; grid-template-columns: minmax(0,1fr) auto 44px; gap: 8px; }
  .sb-mode-switch { grid-column: 2; grid-row: 1; }
  .sb-modebar .sb-mode-settings { grid-column: 3; grid-row: 1; padding: 8px; margin: 0; min-width: 44px; }
  .sb-mode-settings span[data-i18n] { display: none; }
  .sb-modebar .ctxdd-slot:not(:empty) { grid-column: 1; grid-row: 1; min-width: 0; }
  .sb-modebar button, #sbModeToggle { font-size: 13px; padding: 10px 8px; }
  html { --sb-message-reserve: 184px; }
  html body.sb-shell .sentence { --sb-message-pic: 72px; grid-template-columns: minmax(0,1fr); min-height: 0; padding: 8px; gap: 4px; margin-bottom: 0; }
  html body.sb-shell .slots { min-height: 96px; }
  html body.sb-shell .sentence .controls { grid-template-columns: minmax(80px,1fr) repeat(4,44px); gap: 6px; }
  html body.sb-shell .sentence .controls #sayBtn { grid-column: auto; min-height: 48px; padding: 8px; }
  html body.sb-shell .predbox { padding: 4px; }
  html body.sb-shell .predtitle { margin-bottom: 4px; }
  html body.sb-shell .predrow .cell { min-height: 68px; padding: 4px; }
  html body.sb-shell .predrow .cell > img, html body.sb-shell .predrow .cell > .imgwrap { width: 40px; height: 40px; }
  html body.sb-shell .predrow .cell .lbl { font-size: 12.5px; line-height: 16px; margin-top: 2px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  html { --sb-message-reserve: 124px; }
  html body.sb-shell .sentence { --sb-message-pic: 72px; min-height: 116px; padding: 8px; gap: 8px; margin-bottom: 6px; }
  html body.sb-shell .slots { min-height: 96px; max-height: 120px; }
  html body.sb-shell .sentence .controls #sayBtn { min-height: 44px; }
  html body.sb-shell .predbox { padding: 4px; }
  html body.sb-shell .predtitle { margin-bottom: 4px; }
  html body.sb-shell .predrow .cell { min-height: 72px; padding: 3px; }
  html body.sb-shell .predrow .cell > img, html body.sb-shell .predrow .cell > .imgwrap { width: 48px; height: 48px; }
  html body.sb-shell .predrow .cell .lbl { font-size: 12px; line-height: 14px; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-shellbar, .sb-dockrows, .sb-shellbtn, .mt-tecla { transition: none !important; }
}
@media print {
  .sb-modebar, .sb-config-dialog { display: none !important; }
  /* IMP-01: as reservas do dock pertencem à tela, não à área útil do A4. */
  html body.sb-shell { background:#fff!important; padding:0!important; }
  html body.sb-shell .wrap { padding:0!important; width:100%; min-width:0; }
  #boardPrint { min-width:0; min-height:0; break-inside:avoid; }
  #boardPrint>.cell { break-inside:avoid; box-sizing:border-box; }
}

/* Texto: cinco regiões dentro da altura disponível; o teclado nunca depende de rolagem. */
.mt-sr, body.mt-on #modotexto .mt-status[data-i18n] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip-path: inset(50%); white-space: nowrap; border: 0 !important;
}
#mtHeaderControls:empty, #modotexto #mtKeyboardRestore:empty { display: none; }
/* Altura extrema (proposta Gabriel, PR #206): em paisagem curta, a barra de modo é movida
   (sb-shell.js) para este mesmo slot que o Modo Texto usa. Se o Modo Texto está aberto, o
   `.mt-topo` dele já ocupa o slot — a barra fica presente no DOM (não precisa voltar de lugar
   a cada abertura) mas invisível, para não haver dois donos disputando a mesma altura. */
body.mt-on #mtHeaderControls .sb-modebar { display: none; }
body.mt-on #modotexto {
  height: calc(var(--mt-vh, 100dvh) - var(--hh, 56px) - var(--sb-dock-h, 80px));
  overflow: hidden; grid-template-columns: minmax(0,1fr);
  grid-template-rows: 44px minmax(88px,17fr) 48px 56px minmax(284px,23fr);
  align-content: stretch; gap: 8px; padding: 8px max(8px,calc((100vw - 1280px)/2));
  background: #f4f6f9;
}
body.mt-on #modotexto > * { min-width: 0; }
body.mt-on #modotexto #mtTopoSlot { grid-area: 1 / 1; }
body.mt-on .mt-topo { height: 44px; }
body.mt-on #modotexto .mt-compositor { grid-area: 2 / 1; min-height: 0; gap: 4px; }
body.mt-on #modotexto .mt-campo { flex: 1 1 0; min-height: 0; }
body.mt-on #mtBuffer { min-height: 0; }
body.mt-on #modotexto .mt-status { font-size: 12px; }
body.mt-on #modotexto .mt-acoes { grid-area: 3 / 1; display: flex; flex-wrap: nowrap; gap: 8px; overflow: visible; }
body.mt-on #modotexto .mt-acoes button { flex: 0 1 auto; min-height: 44px; padding: 8px 16px; flex-wrap: nowrap; }
body.mt-on #modotexto .mt-acoes [data-act="mtFalar"] { min-width: 144px; }
body.mt-on #modotexto .mt-acoes [data-act="mtDesfazer"] { margin-left: auto; }
body.mt-on #modotexto .mt-acoes .ico { width: 20px; height: 20px; }
body.mt-on #modotexto .mt-pred { grid-area: 4 / 1; display: flex; align-items: center; gap: 8px; min-height: 0; }
body.mt-on #modotexto .mt-sugestao { flex: 1 1 0; min-width: 0; height: 56px; min-height: 0; padding: 4px; overflow: hidden; }
body.mt-on #modotexto .mt-chip { flex: 1 1 0; width: 0; height: 48px; padding: 4px 6px; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
body.mt-on #modotexto .mt-seta-aceite { min-width: 44px; width: 44px; min-height: 48px; }
body.mt-on #modotexto .mt-entrada { flex: 0 0 184px; position: relative; min-width: 0; }
body.mt-on #modotexto .mt-entrada select { width: 100%; min-width: 0; height: 48px; padding: 8px; border: 1px solid #c7d0d8; border-radius: 10px; background: #fff; color: #14243d; font: inherit; font-size: 14px; }
.mt-entrada-icone { display: none; }
body.mt-on #modotexto .mt-teclado { grid-area: 5 / 1; min-height: 0; height: auto; max-height: none; align-self: stretch; padding: 6px; gap: 6px; border-radius: 14px; }
body.mt-on #modotexto .mt-linhas { display: contents; }
body.mt-on #modotexto .mt-linha { flex: 1 1 0; min-height: 44px; gap: 6px; }
body.mt-on #modotexto .mt-tecla, body.mt-on #modotexto .mt-esp { min-height: 44px; }
body.mt-on #modotexto .mt-linhas .mt-esp { min-width: 0; padding-inline: 0; }
body.mt-on #modotexto .mt-util { grid-template-columns: minmax(44px,1fr) minmax(44px,1fr) minmax(60px,3fr) minmax(44px,1fr) minmax(44px,1fr) minmax(44px,.65fr); }
body.mt-on #modotexto .mt-espaco { grid-column: auto; }
body.mt-on #modotexto .mt-recolher { padding: 8px; }
.mt-recolher svg { width: 24px; height: 24px; }
#modotexto #mtKeyboardRestore { grid-area: 5 / 1; display: flex; justify-content: flex-end; }
#mtKeyboardRestore .mt-recolher { width: 48px; height: 44px; border: 1px solid #c7d0d8; }
#mtKeyboardRestore .mt-recolher svg { transform: rotate(180deg); }
body.mt-on #modotexto.mt-sem-teclado { grid-template-rows: 44px minmax(0,1fr) 48px 56px 44px; }
body.mt-on .sb-shellbar { bottom: max(0px,calc(100dvh - var(--mt-vh,100dvh))); }
@media (max-width: 760px) {
  body.mt-on #modotexto { padding: 6px; gap: 6px; }
  body.mt-on #modotexto .mt-acoes { gap: 6px; }
  body.mt-on #modotexto .mt-acoes button { flex: 1 1 0; padding: 8px; }
  body.mt-on #modotexto .mt-acoes [data-act="mtFalar"] { min-width: 82px; }
  body.mt-on #modotexto .mt-acoes .danger { margin-left: 0; }
  body.mt-on #modotexto .mt-acoes button:not([data-act="mtFalar"]) span[data-i18n] {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 580px) {
  body.mt-on #modotexto .mt-entrada { flex-basis: 48px; }
  body.mt-on #modotexto .mt-entrada select { color: transparent; appearance: none; padding: 0; }
  body.mt-on #modotexto .mt-entrada option { color: #14243d; }
  .mt-entrada-icone { display: block; position: absolute; inset: 11px; width: 26px; height: 26px; pointer-events: none; color: #14243d; }
  body.mt-on #modotexto .mt-chip { font-size: 14px; }
  body.mt-on #modotexto .mt-teclado { padding: 4px; gap: 4px; }
  body.mt-on #modotexto .mt-linha { gap: 2px; }
  body.mt-on #modotexto .mt-util { gap: 4px; grid-template-columns: 44px 44px minmax(56px,1fr) 44px 44px 44px; }
}
/* A exceção do celular horizontal reúne os controles no cabeçalho azul. */
@media (max-width: 1000px) and (max-height: 560px) and (orientation: landscape) {
  /* A reserva do Texto independe de o rodapé ter sido recolhido no modo Imagem. */
  html body.mt-on.sb-shell .sb-shellbar { padding: 4px calc(8px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px)); }
  html body.mt-on.sb-shell .sb-dockrows { margin-top: 0; }
  body.mt-on header .hin { min-height: 52px; }
  body.mt-on #mtHeaderControls { margin-left: 12px; }
  body.mt-on #mtHeaderControls .mt-topo { gap: 8px; }
  body.mt-on #mtHeaderControls button { background: transparent; color: #fff; border-color: #8291a5; }
  body.mt-on #modotexto { grid-template-columns: minmax(220px,34%) minmax(0,1fr); grid-template-rows: minmax(0,1fr) 56px 94px; gap: 6px; padding: 6px; }
  body.mt-on #modotexto #mtTopoSlot { display: none; }
  body.mt-on #modotexto .mt-compositor { grid-area: 1 / 1; }
  body.mt-on #modotexto .mt-acoes { grid-area: 3 / 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,44px); gap: 6px; }
  body.mt-on #modotexto .mt-acoes button { min-width: 0; padding: 4px; margin: 0; font-size: 12px; }
  body.mt-on #modotexto .mt-acoes [data-act="mtFalar"] { min-width: 0; }
  body.mt-on #modotexto .mt-acoes [data-act="mtDesfazer"] { margin-left: 0; }
  body.mt-on #modotexto .mt-acoes button:not([data-act="mtFalar"]) span[data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.mt-on #modotexto .mt-pred { grid-area: 2 / 1; }
  body.mt-on #modotexto .mt-entrada { flex-basis: 48px; }
  body.mt-on #modotexto .mt-entrada select { color: transparent; appearance: none; padding: 0; }
  body.mt-on #modotexto .mt-entrada option { color: #14243d; }
  .mt-entrada-icone { display: block; position: absolute; inset: 11px; width: 26px; height: 26px; pointer-events: none; color: #14243d; }
  body.mt-on #modotexto .mt-chip { font-size: 14px; padding-inline: 2px; }
  body.mt-on #modotexto .mt-teclado { grid-area: 1 / 2 / 4 / 3; padding: 4px; gap: 4px; }
  body.mt-on #modotexto .mt-linha { gap: 3px; }
  body.mt-on #modotexto .mt-linhas[data-camada="letras"] [data-digitos] { display: none; }
  body.mt-on #modotexto #mtKeyboardRestore { grid-area: 3 / 2; align-items: flex-end; }
  body.mt-on #modotexto.mt-sem-teclado { grid-template-columns: minmax(0,1fr) 280px; grid-template-rows: 56px minmax(0,1fr) 94px; }
  body.mt-on #modotexto.mt-sem-teclado .mt-compositor { grid-area: 1 / 1 / 4 / 2; }
  body.mt-on #modotexto.mt-sem-teclado .mt-acoes { grid-area: 3 / 2; }
  body.mt-on #modotexto.mt-sem-teclado #mtKeyboardRestore { grid-area: 2 / 2; }
  body.mt-on #modotexto.mt-sem-teclado .mt-entrada { flex-basis: 48px; }
  body.mt-on #modotexto.mt-sem-teclado .mt-pred { grid-area: 1 / 2; }
}
/* Altura extrema dentro do Modo Texto (proposta Gabriel, medida no PR #206): a coluna da
   esquerda cede 24px e o vão das teclas cai de 3 para 2px — o que dá para ganhar sem tirar
   teclado, mensagem, sugestão ou Falar da tela. A menor tecla passa de 27 para 30px de LARGURA,
   mantendo os 44 de altura. 44px de largura é impossível em 568 CSS px: onze colunas de 44 mais
   dez vãos pedem 484px só de teclado, e o teclado tem 337 (374 com a coluna reduzida) — para
   chegar lá o teclado precisaria da largura inteira, e aí mensagem, sugestões e as cinco ações
   não cabem mais. 30×44 com tudo visível é melhor do que 44×44 com comandos escondidos. */
@media (orientation:landscape) and (max-width:1000px) and (max-height:360px) {
  body.mt-on #modotexto { grid-template-columns: minmax(196px,32%) minmax(0,1fr); }
  body.mt-on #modotexto .mt-teclado { padding: 3px; gap: 3px; }
  body.mt-on #modotexto .mt-linha { gap: 2px; }
  body.mt-on #modotexto .mt-tecla, body.mt-on #modotexto .mt-esp { min-width: 30px; }
  /* A mensagem não pode ficar cortada: sem isso, "ele ela nós" sumia pela metade. */
  body.mt-on #modotexto #mtBuffer { overflow-y: auto; overscroll-behavior: contain; }
}

/* Rotas e dock: vidro suave e respiro aprovados em 14/09/2026. */
@media(min-height:741px){
 /* Com o dock inteiro aberto, mensagem e teclado dividem a altura restante.
    Cinco fileiras de teclas de 44 px, quatro espaços de 6 px e moldura de 14 px. */
 body.mt-on:not(.sb-dockshut) #modotexto:not(.mt-sem-teclado){grid-template-rows:44px minmax(44px,17fr) 48px 56px minmax(258px,23fr);}
}
@media(orientation:portrait) and (max-height:740px){
 body.mt-on #modotexto{grid-template-rows:44px minmax(44px,1fr) 44px 48px minmax(208px,2fr);gap:6px;}
 body.mt-on #modotexto .mt-linhas[data-camada="letras"] [data-digitos]{display:none;}
 body.mt-on #modotexto:has(.mt-linhas[data-camada="simbolos"]){grid-template-rows:44px minmax(44px,1fr) 44px 48px minmax(244px,2fr);}
}
@media(max-width:360px){
 body.mt-on #modotexto .mt-acoes{gap:4px;}
 body.mt-on #modotexto .mt-acoes button{flex:1 1 0;min-width:0;padding:4px;}
 body.mt-on #modotexto .mt-acoes [data-act="mtFalar"]{min-width:0;font-size:12px;}
 body.mt-on #modotexto .mt-acoes [data-act="mtFalar"] svg{display:none;}
}
/* ALTURA EXTREMA (568×320 e abaixo), proposta Gabriel medida no PR #206, pedido do Emanuel
   17/09/2026. Defeito que esta faixa substitui: a regra antiga (`position:relative` na
   mensagem) soltava a mensagem e o Falar do topo; ao rolar até os cartões os dois saíam da
   tela (Falar ia a `top:-317`) e a criança perdia o botão que a faz falar depois de escolher a
   palavra. Princípio: a palavra e o Falar NUNCA saem da tela; o que rola é a prancha, nunca a
   fala. Três faixas fixas no topo (cabeçalho, mensagem, previsão), a grade rolando por baixo.
   Medido: 0 para 9 cartões visíveis sem rolar, Falar e mensagem sempre na tela ao rolar até o
   fim, painel de dor de 1 para 6 níveis visíveis, e os alvos abaixo de 44px na prancha caem de
   4 para 2 (os dois links de marca no cabeçalho, anteriores a esta proposta). */
@media (orientation:landscape) and (max-height:400px) {
  /* 1. A barra de modo (seletor de prancha, Modo Texto, Ajustes) sai da faixa própria e vai
        para o cabeçalho, no mesmo slot que o Modo Texto já usa (#mtHeaderControls). Devolve
        44px de altura. Quem move o nó é o sb-shell.js; aqui só se decide COMO ele aparece lá. */
  html body.sb-shell .sb-modebar { display: none; }
  html body.sb-shell #mtHeaderControls .sb-modebar { display: flex; gap: 6px; align-items: center; }
  html body.sb-shell #mtHeaderControls .sb-modebar .ctxdd-btn { min-height: 44px; padding: 6px 10px; font-size: 13px; }
  html body.sb-shell #mtHeaderControls .sb-modebar .ctxdd { max-width: 180px; }
  /* alvo de 44px também para os botões do cabeçalho, hoje em 40px nesta faixa */
  html body.sb-shell header .focusbtn, html body.sb-shell header .lgbtn, html body.sb-shell header .sb-acctbtn, html body.sb-shell header .sb-acctlogin { min-height: 44px; min-width: 44px; }
  html body.sb-shell header .hin { min-height: 48px; padding: 4px 10px; gap: 8px; }
  html body.sb-shell header .hin { min-width:0; overflow:hidden; }
  html body.sb-shell header .sb-acct { min-width:0; flex:0 1 auto; }
  html body.sb-shell header .sb-acctlogin { max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-inline:8px; }

  /* 2. A mensagem volta a ser fixa (desfaz o `position:relative` que a soltava) e encolhe de
        116 para 72px: uma fileira de chips, Falar e os quatro controles na mesma linha. */
  html body.sb-shell .sentence {
    position: sticky; top: var(--hc,48px); z-index: 22;
    grid-template-columns: minmax(0,1fr) 300px;
    min-height: 0; height: 72px; padding: 6px 8px; gap: 8px; margin-bottom: 6px;
    align-items: center; box-shadow: 0 2px 10px rgba(4,21,52,.10);
  }
  /* Os chips deslizam na horizontal em vez de empilhar: a barra nunca cresce e empurra a prancha. */
  html body.sb-shell .sentence .slots {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    min-height: 58px; max-height: 58px; padding-right: 0; scrollbar-width: none;
  }
  html body.sb-shell .sentence .slots::-webkit-scrollbar { display: none; }
  html body.sb-shell .sentence .chip { width: 56px; flex: 0 0 auto; }
  html body.sb-shell .sentence .chip img, html body.sb-shell .sentence .chip .imgwrap { width: 36px; height: 36px; }
  html body.sb-shell .sentence .chip span { font-size: 10px; line-height: 12px; }
  html body.sb-shell .sentence .controls { grid-template-columns: 108px repeat(4,44px); gap: 3px; }
  html body.sb-shell .sentence .controls #sayBtn { grid-column: 1; min-height: 48px; padding: 6px; font-size: 15px; }
  html body.sb-shell .sentence .controls .ctrl.alt { min-width: 44px; min-height: 48px; padding: 4px; }
  /* O botão de ampliar a mensagem fica no canto da faixa, sem roubar espaço dos chips. */
  html body.sb-shell .sb-message-zone .slots { padding-right: 0; }
  html body.sb-shell .sb-message-expand { top: -3px; right: -3px; width: 44px; height: 44px; }

  /* 3. A previsão também fica fixa, logo abaixo da mensagem, com a célula deitada. */
  html body.sb-shell .predzone {
    position: sticky; top: calc(var(--hc,48px) + 78px); z-index: 21;
    background: #f4f6f8; margin-bottom: 6px; padding-bottom: 2px;
  }
  html body.sb-shell .predbox { padding: 3px 4px 4px; border-width: 1px; box-shadow: none; }
  html body.sb-shell .predzone,html body.sb-shell .predbox,html body.sb-shell .predrow { min-width:0; max-width:100%; }
  html body.sb-shell .predbox { overflow:hidden; }
  html body.sb-shell .predtitle { display: none; }
  html body.sb-shell .predrow .cell { min-height: 48px; flex-direction: row; gap: 6px; padding: 2px 4px; justify-content: flex-start; }
  html body.sb-shell .predrow .cell > img, html body.sb-shell .predrow .cell > .imgwrap { width: 34px; height: 34px; flex: 0 0 auto; }
  html body.sb-shell .predrow .cell .lbl { font-size: 12px; line-height: 14px; margin-top: 0; text-align: left; }
  html body.sb-shell .quickbox { padding: 3px 4px 4px; }
  html body.sb-shell .yesno { min-height: 48px; font-size: 18px; }
  html body.sb-shell .yesno.type .kbd { font-size: 20px; }
  html body.sb-shell .yesno.type .kbl { font-size: 11px; }

  /* 4. A prancha é a única coisa que rola. O respiro embaixo para o puxador do dock já vem do
        body (--sb-dock-h + 12px); somar mais 60 px aqui deixava 85 px vazios no fim da rolagem
        (CRIS-101). O puxador vai para a direita, fora da coluna central de cartões. */
  html body.sb-shell .wrap { padding: 6px 8px 0; }
  html body.sb-shell .breadcrumb { padding: 2px; font-size: 12px; }
  html body.sb-shell.sb-dockshut #sbShellBar { justify-content: flex-end; padding-bottom: calc(4px + env(safe-area-inset-bottom,0px)); }
  html body.sb-shell.sb-dockshut .sb-dockhandle { margin-right: 2px; min-height: 44px; min-width: 44px; }

  /* 5. P1 (Emanuel 19/09): o puxador sai de cima da prancha e entra na faixa da mensagem, como
        mais um controle de 44px depois do Limpar. O sb-shell.js move o nó e liga .sb-pux-faixa. */
  html body.sb-shell.sb-pux-faixa .sentence { grid-template-columns: minmax(0,1fr) 347px; }
  html body.sb-shell.sb-pux-faixa .sentence .controls { grid-template-columns: 108px repeat(5,44px); }
  html body.sb-shell.sb-pux-faixa .sentence .sb-dockhandle {
    position: static; flex-direction: row; width: 44px; min-width: 44px; min-height: 48px; margin: 0;
    padding: 4px; border: 0; border-radius: 12px; box-shadow: none; overflow: visible;
    background: var(--sb-control,#e8edf2); color: var(--sb-color-ink,#041534);
  }
  html body.sb-shell.sb-pux-faixa .sentence .sb-dockhandle .sbi { font-size: 20px; }
  html body.sb-shell.sb-pux-faixa .sentence .sb-dockhandle::after,
  html body.sb-shell.sb-pux-faixa .sentence .sb-dockhandle-lbl { display: none; }
}
html body.sb-shell{--sb-controls-surface:#fff;--sb-controls-blur:none;}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html body.sb-shell{--sb-controls-surface:var(--sb-surface-glass,rgba(255,255,255,.92));--sb-controls-blur:var(--sb-blur,blur(16px) saturate(115%));}
}
html body.sb-shell #sbShellBar{background:transparent;box-shadow:none;isolation:isolate;}
html body.sb-shell #sbShellBar::before{content:"";position:absolute;inset:2px 8px 4px;border:1px solid #d8e0eb;border-radius:22px;background:var(--sb-controls-surface);backdrop-filter:var(--sb-controls-blur);-webkit-backdrop-filter:var(--sb-controls-blur);box-shadow:0 4px 18px #04153412;z-index:-1;pointer-events:none;}
html body.sb-shell .sb-dockhandle{background:transparent;color:#42566f;box-shadow:none;}
html body.sb-shell .sb-shellbtn{border-radius:14px;box-shadow:none;}
/* Respiro interno medido a partir da moldura, inclusive com o dock recolhido. */
html body.sb-shell #sbShellBar{padding-left:calc(20px + env(safe-area-inset-left,0px));padding-right:calc(20px + env(safe-area-inset-right,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));}
html body.sb-shell.mt-on:not(.sb-dockshut) #sbShellBar{padding-top:14px;}
html body.sb-shell .sb-dockrows{overflow:visible;}
html body.sb-shell .sb-shellbtn:focus-visible,
html body.sb-shell .sb-dockhandle:focus-visible{outline:3px solid #1250e0;outline-offset:2px;}
html body.sb-shell .sb-pathspanel{background:var(--sb-controls-surface);backdrop-filter:var(--sb-controls-blur);-webkit-backdrop-filter:var(--sb-controls-blur);border:1px solid #cbd7e5;border-radius:20px;box-shadow:0 8px 24px #04153418;right:10px!important;padding:8px;gap:6px;}
html body.sb-shell .sb-pathshead{min-height:44px;display:flex;align-items:center;padding-right:40px;}
html body.sb-shell .sb-pathstitle{color:#42566f;font-weight:700;text-transform:none;letter-spacing:0;}
html body.sb-shell .sb-pathsclose{color:#42566f;align-items:center;justify-content:center;padding:0;border-radius:12px;}
html body.sb-shell .sb-pathsclose svg{width:20px;height:20px;}
html body.sb-shell .sb-pathsclose:hover{background:#e9eef6;color:#041534;}
html body.sb-shell .sb-pathspanel .sb-pathslist{grid-template-rows:repeat(3,80px);gap:6px;flex:0 0 auto;}
html body.sb-shell .sb-pathcard{box-shadow:none;border-radius:12px;font-weight:700;}
html body.sb-shell .sb-pathpic{height:38px;}
html body.sb-shell .sb-pathsclose:focus-visible,
html body.sb-shell .sb-pathcard:focus-visible{outline:3px solid #1250e0;outline-offset:2px;}
/* Tablet horizontal: reserva espaço para a mensagem e o dock com alvo de 44 px. */
@media(min-width:761px) and (min-height:561px) and (max-height:850px){
 html body.sb-shell .sb-pathspanel .sb-pathslist{grid-template-rows:repeat(3,68px);}
 html body.sb-shell .sb-pathpic{height:30px;}
}
/* No celular em pé, três destinos na mesma faixa, acima do dock. */
@media(max-width:760px) and (orientation:portrait){
 html body.sb-shell .sb-pathspanel{left:8px!important;right:8px!important;width:auto!important;top:auto!important;bottom:calc(var(--sb-dock-h,159px) + 8px)!important;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;align-items:center;overflow:visible;padding:8px;}
 html body.sb-shell .sb-pathspanel[hidden]{display:none;}
 html body.sb-shell .sb-pathshead{grid-column:2;grid-row:1;width:44px;padding:0;}
 html body.sb-shell .sb-pathstitle{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;}
 html body.sb-shell .sb-pathspanel .sb-pathslist{grid-column:1;grid-row:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:80px;gap:6px;}
 html body.sb-shell .sb-pathcard{min-width:0;padding:6px 2px;font-size:12px;gap:4px;}
 html body.sb-shell .sb-pathpic{height:32px;}
}
@media(orientation:landscape) and (max-height:560px){
 html body.sb-shell #sbShellBar{padding-top:8px;padding-bottom:calc(13px + env(safe-area-inset-bottom,0px));}
 html body.sb-shell.mt-on:not(.sb-dockshut) #sbShellBar{padding-top:12px;}
 html body.sb-shell .sb-pathspanel{left:10px!important;right:10px!important;width:auto!important;top:auto!important;bottom:calc(var(--sb-dock-h,87px) + 8px)!important;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;align-items:center;padding:4px;overflow:visible;}
 html body.sb-shell .sb-pathspanel[hidden]{display:none;}
 html body.sb-shell .sb-pathshead{grid-column:2;grid-row:1;width:44px;padding:0;}
 html body.sb-shell .sb-pathstitle{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;}
 html body.sb-shell .sb-pathspanel .sb-pathslist{grid-column:1;grid-row:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:48px;gap:6px;}
 html body.sb-shell .sb-pathcard{flex-direction:row;min-height:48px;gap:8px;}
 html body.sb-shell .sb-pathpic{height:30px;}
}
html body.sb-shell.mt-on .sb-pathspanel{display:none!important;}
/* Texto em telas baixas: todos os comandos continuam visíveis sem cobrir as teclas. */
@media(orientation:landscape) and (max-width:1000px) and (max-height:560px){
 html body.sb-shell.mt-on:not(.sb-dockshut) #sbShellBar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 44px repeat(4,minmax(0,1fr));gap:6px;align-items:center;}
 html body.sb-shell.mt-on:not(.sb-dockshut) .sb-dockrows,
 html body.sb-shell.mt-on:not(.sb-dockshut) .sb-shellrow{display:contents;}
 html body.sb-shell.mt-on:not(.sb-dockshut) .sb-dockhandle{grid-area:1 / 5;min-width:44px;width:44px;padding:2px;}
}
@media(orientation:portrait) and (max-height:740px){
 body.mt-on:not(.sb-dockshut) #modotexto{gap:4px;}
 html body.sb-shell.mt-on:not(.sb-dockshut) #sbShellBar{padding-top:4px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));}
 html body.sb-shell.mt-on:not(.sb-dockshut) .sb-dockrows{margin-top:0;}
 html body.sb-shell.mt-on:not(.sb-dockshut) .sb-shellrow+.sb-shellrow{margin-top:4px;}
 html body.sb-shell.mt-on:not(.sb-dockshut) .sb-shellbtn{min-height:44px;padding:4px 2px;font-size:12px;gap:0;}
 html body.sb-shell.mt-on:not(.sb-dockshut) .sb-shellbtn .sbi{font-size:18px;}
}
@media(prefers-reduced-transparency:reduce){html body.sb-shell{--sb-controls-surface:#fff;--sb-controls-blur:none;}}
@media(prefers-reduced-motion:reduce){html body.sb-shell .sb-pathspanel{transition:none;}}
@media(prefers-contrast:more){html body.sb-shell{--sb-controls-surface:#fff;--sb-controls-blur:none;}html body.sb-shell .sb-pathspanel,html body.sb-shell #sbShellBar::before{border:2px solid #041534;}}
html body.sb-shell.sb-hc{--sb-controls-surface:#fff;--sb-controls-blur:none;}
html body.sb-shell.sb-hc .sb-pathspanel{border:2px solid #041534;}

/* Leitura e comunicação: controles dentro da mensagem, sem uma faixa adicional. */
html body.sb-shell .sb-dockhandle{min-height:44px!important;}
.sb-message-zone{position:relative;min-width:0;}
html body.sb-shell .sb-message-zone .slots{padding-right:52px;}
.sb-message-expand{position:absolute;right:4px;top:4px;z-index:3;width:44px;height:44px;padding:4px;border:0;border-radius:10px;background:transparent;color:#42566f;font:28px/1 system-ui;cursor:pointer;}
.sb-message-expand:hover{background:#e9eef6;}
.sb-message-restore{position:absolute;left:8px;bottom:8px;z-index:3;min-height:44px;max-width:calc(100% - 64px);border:1px solid #1250e0;border-radius:10px;padding:8px 12px;background:#eef4ff;color:#1250e0;font:600 13px/1.3 Inter,system-ui,sans-serif;cursor:pointer;}
.sb-message-restore[hidden]{display:none!important;}
.sb-cleared-image .slots>span{visibility:hidden;}
.sb-message-expand:focus-visible,.sb-message-restore:focus-visible{outline:3px solid #1250e0;outline-offset:2px;}
html body.sb-shell #mtBuffer{padding-right:56px;}
.sb-reading-settings select{min-height:44px;border:1px solid #bdcddd;border-radius:8px;padding:8px;font:inherit;max-width:100%;}
.sb-reading-settings .optgrp{gap:8px;align-items:center;}
.sb-config-dialog #cfgAdv .sb-reading-settings label{display:flex;min-height:44px;gap:8px;align-items:center;}
.sb-reading-preview{padding:16px;border:1px solid #cbd7e5;border-radius:12px;background:#fff;font-size:calc(20px + var(--sb-reading-add,0px));margin:8px 0 0;}
html body.sb-shell.sb-reading-large .cell .lbl{font-size:calc(14px + var(--sb-reading-add));line-height:1.2;white-space:normal;overflow-wrap:anywhere;}
html body.sb-shell.sb-reading-large .cell{height:auto;}
html body.sb-shell.sb-reading-large .slots .chip span{font-size:calc(16px + var(--sb-reading-add));line-height:1.2;}
html body.sb-shell.sb-reading-large #mtBuffer{font-size:calc(clamp(22px,2.2vw,32px) + var(--sb-reading-add));}
.sb-calm{--sb-controls-surface:#fff!important;--sb-controls-blur:none!important;}
html body.sb-calm .sb-pathspanel,html body.sb-calm .sb-dockrows,html body.sb-calm .sb-shellbtn,html body.sb-calm .cell,html body.sb-calm .mt-tecla{transition:none!important;animation:none!important;}
html body.sb-calm .cell:hover{transform:none;}
button[data-sb-voice]{position:relative;padding-bottom:17px!important;}
button[data-sb-voice]::after{content:attr(data-sb-voice);position:absolute;bottom:3px;left:2px;right:2px;text-align:center;font:10px/11px Inter,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;}
button[data-sb-speaking] svg{display:none;}
.sb-message-view{position:fixed;inset:0;z-index:14000;overflow:auto;padding:24px;background:#fff;color:#14243d;}
.sb-message-view[hidden]{display:none;}
.sb-message-view-head{display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;top:0;background:#fff;padding-bottom:16px;}
.sb-message-view-head button{min-width:0;min-height:48px;padding:10px 16px;border:1px solid #bdcddd;border-radius:12px;background:#fff;color:#14243d;font:600 16px/1.2 Inter,system-ui,sans-serif;cursor:pointer;}
.sb-message-view-head .sb-message-view-speak{display:inline-flex;align-items:center;justify-content:center;flex:0 1 200px;gap:8px;min-height:68px;background:#eef4ff;border-color:#b9cffe;color:#1250e0;font-size:18px;}
.sb-message-view-speak svg{width:22px;height:22px;flex:none;}
.sb-message-view-speak:hover:not(:disabled){background:#dde9ff;}
.sb-message-view-speak:disabled{opacity:.5;cursor:default;}
.sb-message-view-head button:focus-visible{outline:3px solid #1250e0;outline-offset:3px;}
.sb-message-view-natural{padding:12px 16px;border-radius:12px;background:#eef4ff;color:#14243d;font:16px/1.45 Inter,system-ui,sans-serif;overflow-wrap:anywhere;}
.sb-message-view-content{max-width:1280px;margin:5vh auto;display:flex;flex-wrap:wrap;gap:24px;align-items:start;}
.sb-message-view-content p{width:100%;margin:0;font:600 clamp(40px,7vw,100px)/1.25 Inter,system-ui,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;}
body.sb-shell .sb-message-view-content .chip{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(240px,40vw);}
.sb-message-view-content .pill{font-size:clamp(32px,5vw,60px);padding:16px 24px;}
body.sb-shell .sb-message-view-content .imgwrap{width:100%;height:min(240px,40vw,45dvh);overflow:hidden;}
body.sb-shell .sb-message-view-content .chip img{width:100%;height:auto;max-height:min(240px,45dvh);object-fit:contain;}
.sb-message-view-content .chip span{font-size:clamp(24px,4vw,40px);line-height:1.2;overflow-wrap:anywhere;text-align:center;}
@media(max-width:760px){.sb-message-view{padding:16px;}.sb-message-view-head button{font-size:14px;}.sb-message-view-head .sb-message-view-speak{font-size:16px;}}
@media(orientation:landscape) and (max-height:360px){
 html body.sb-shell.mt-on #sbShellBar{padding-top:11px;padding-bottom:calc(13px + env(safe-area-inset-bottom,0px));}
 html body.sb-shell.mt-on #sbShellBar .sb-shellbtn{min-height:44px;}
 body.mt-on #modotexto{grid-template-rows:minmax(44px,1fr) 48px 94px;gap:3px;padding:4px;}
 body.mt-on #modotexto .mt-teclado{gap:2px;}
 body.mt-on #modotexto .mt-sugestao{height:48px;padding:0;}
 body.mt-on #modotexto .sb-message-expand{top:0;right:0;}
 body.mt-on #modotexto .mt-teclado:has(.mt-linhas[data-camada="simbolos"]){gap:0;}
 body.mt-on #modotexto .mt-linhas[data-camada="simbolos"] .mt-linha,
 body.mt-on #modotexto .mt-linhas[data-camada="simbolos"] .mt-tecla,
 body.mt-on #modotexto .mt-linhas[data-camada="simbolos"] .mt-esp{min-height:34px;}
}

/* UX-03 · menu de formas do cartão (decisão do Emanuel, 18/09/2026): pronome em grade de duas colunas,
   verbo (e as outras classes) em grade arejada. O menu é montado no index-app.js (sbOpenVariants) com
   style.cssText e não diz a classe; quem diz é o cartão que o abriu (.cell <cor>, aria-expanded="true").
   Por isso body:has(...) e o !important contra o estilo inline. Só o menu comum (:has(> [data-forma])),
   não o do Gestalt. Sem :has() (Safari antes do 15.4), o menu de hoje continua. Proposta e medidas:
   _docs/UX/menu-formas-ux03-2026-09-18/. */

/* Tokens. Borda de controle ("-e", de edge) com pelo menos 3 : 1 contra o branco (WCAG 1.4.11).
   As cores da prancha (--yellow-b, --green-b...) não mudam: estas valem só para o menu.
   Proposta: subir estas nove linhas para o :root do deploy/assets/base.css, ao lado das -b. */
:root {
  --yellow-e: #a67c00;  /* 3,82 : 1  (a --yellow-b #e0a800 dá 2,15 : 1) */
  --green-e:  #2f7a22;  /* 5,35 : 1  (a --green-b #4a9e35 dá 3,37 : 1) */
  --bluec-e:  #2a7ec0;  /* 4,34 : 1, a própria --bluec-b */
  --purple-e: #7b52c4;  /* 5,46 : 1, a própria --purple-b */
  --teal-e:   #1b936d;  /* 3,86 : 1 */
  --orange-e: #c46b1d;  /* 3,84 : 1 */
  --pink-e:   #e14a86;  /* 3,80 : 1 */
  --red-e:    #d63a3b;  /* 4,64 : 1, a própria --red-b */
  --gray-e:   #7a838d;  /* 3,85 : 1 */
  --sb-var-line: #e1e6ee;
}

@media screen {
  /* Cor da classe, lida do cartão aberto. Borda escura no item, fundo claro atrás da figura. */
  body:has(.cell.yellow[aria-expanded="true"]) .sb-varpop { --var-edge: var(--yellow-e); --var-bg: var(--yellow); }
  body:has(.cell.green[aria-expanded="true"])  .sb-varpop { --var-edge: var(--green-e);  --var-bg: var(--green); }
  body:has(.cell.blue[aria-expanded="true"])   .sb-varpop { --var-edge: var(--bluec-e);  --var-bg: var(--bluec); }
  body:has(.cell.purple[aria-expanded="true"]) .sb-varpop { --var-edge: var(--purple-e); --var-bg: var(--purple); }
  body:has(.cell.teal[aria-expanded="true"])   .sb-varpop { --var-edge: var(--teal-e);   --var-bg: var(--teal); }
  body:has(.cell.orange[aria-expanded="true"]) .sb-varpop { --var-edge: var(--orange-e); --var-bg: var(--orange); }
  body:has(.cell.pink[aria-expanded="true"])   .sb-varpop { --var-edge: var(--pink-e);   --var-bg: var(--pink); }
  body:has(.cell.red[aria-expanded="true"])    .sb-varpop { --var-edge: var(--red-e);    --var-bg: var(--red); }
  body:has(.cell.gray[aria-expanded="true"])   .sb-varpop { --var-edge: var(--gray-e);   --var-bg: #eef2f7; }

  /* ── GRADE AREJADA (verbo, e toda classe que não é pronome) ─────────────────────────────
     Três colunas: com 5 formas fecha em 3 + 2, e cada forma é uma escolha separada por 12 px. */
  body .sb-varpop:has(> [data-forma]) {
    --var-cols: 3;
    display: grid !important;
    box-sizing: border-box;
    grid-template-columns: repeat(var(--var-cols), minmax(0, 1fr));
    gap: 12px !important;
    align-items: stretch;
    width: min(92vw, 360px);
    max-width: min(92vw, 360px) !important;
    max-height: calc(100dvh - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding: 56px 0;
    padding: 0 14px !important;
    border: 1px solid var(--sb-varpop-borda, #b8c2d0) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(4, 21, 52, .24) !important;
    color: var(--navy);
  }

  /* ── GRADE DE DUAS COLUNAS (pronome) ─────────────────────────────────────────────────────
     eu / nós, meu / minha, comigo / conosco: pares que se leem lado a lado, sem vazio à direita. */
  body:has(.cell.yellow[aria-expanded="true"]) .sb-varpop:has(> [data-forma]) {
    --var-cols: 2;
    width: min(92vw, 320px);
  }

  /* Título: faixa própria, separada das formas por uma linha. Fica grudado ao rolar. */
  body .sb-varpop:has(> [data-forma]) > .sb-varhead {
    grid-column: 1 / -1;
    top: 0;
    margin: 0 -14px;
    width: auto;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.25;
    border-bottom: 1px solid var(--sb-var-line);
  }

  /* A forma: cartão branco, borda da cor da classe, figura sobre o fundo claro da classe. */
  body .sb-varpop > [data-forma] {
    display: grid !important;
    grid-template-rows: auto 1fr;
    justify-items: center;
    align-items: start;
    gap: 6px !important;
    min-width: 0 !important;
    min-height: 96px !important;
    padding: 6px 6px 8px !important;
    background: var(--sb-varitem-fundo, #fff) !important;
    border: 2px solid var(--var-edge, var(--gray-e)) !important;
    border-radius: 14px !important;
    color: var(--sb-varitem-tinta, var(--navy)) !important;
    touch-action: manipulation;
  }
  /* O atributo hidden controla Formas frequentes/Ver todas. Esta regra precisa vir depois da grade:
     ambas usam !important, e a grade não pode tornar visível uma forma que o JS recolheu. */
  body .sb-varpop > [data-forma][hidden] { display: none !important; }
  body .sb-varpop > [data-forma] > img {
    box-sizing: border-box;
    width: 100% !important;
    height: 60px !important;
    padding: 6px;
    object-fit: contain !important;
    background: var(--var-bg, #eef2f7);
    border-radius: 9px;
  }
  /* Rótulo inteiro, nunca cortado: quebra na sílaba (hífen do pt-BR) antes de estourar a caixa. */
  body .sb-varpop > [data-forma] > span {
    font-size: 16px !important;
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  /* Abaixo de 360 px de tela, três colunas dariam 80 px por forma e 64 px de texto: "podemos",
     "queremos" e "colocamos" (78 a 85 px em 16 px negrito) quebrariam no meio. Medido em 320 px:
     9 verbos da prancha padrão. A grade arejada passa a duas colunas de 126 px e o rótulo fica
     inteiro; o espaço de 12 px e o cartão branco continuam. */
  @media (max-width: 359px) {
    body .sb-varpop:has(> [data-forma]) { --var-cols: 2; }
    /* CRIS-117 (19/09): em 320 px o menu do verbo media 456 px, não cabia nem acima nem abaixo do
       cartão, e o sbOpenVariants o prendia em top:6, POR CIMA do cartão: o dedo que o abriu ficava
       sobre "Voltar à comunicação", e soltar fechava o menu. Aqui o menu nunca passa de meia tela
       menos 40 px (280 px em 640 de altura, 244 em 568), então cabe no lado do cartão que tem mais
       espaço e nunca fica sob o dedo; o que não couber rola DENTRO do menu, com o título e o
       "Voltar" grudados. As formas ficam um pouco mais baixas (figura de 44 px). */
    body .sb-varpop:has(> [data-forma]) {
      max-height: calc(50dvh - 40px) !important;
      overflow-y: auto !important;
      overscroll-behavior: contain;
      scroll-padding: 48px 0 56px;  /* a forma rolada até a vista (foco, seta) fica fora do título e do "Voltar" grudados */
    }
    body .sb-varpop:has(> [data-forma]) > .sb-varhead { position: sticky; top: 0; z-index: 1; background: #fff; padding: 10px 16px; }
    body .sb-varpop:has(> [data-forma]) > .sb-varall:last-child { position: sticky; bottom: 0; z-index: 1; }
    body .sb-varpop > [data-forma] { min-height: 84px !important; }
    body .sb-varpop > [data-forma] > img { height: 44px !important; padding: 4px; }
  }

  /* Foco: anel azul de 3 px com respiro branco. Não depende só da cor da borda da forma. */
  body .sb-varpop > [data-forma]:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
  }

  /* Rodapé: "Ver todas as formas" e "Voltar à comunicação" viram ação de texto, não item. */
  body .sb-varpop:has(> [data-forma]) > .sb-varall {
    grid-column: 1 / -1;
    margin: 0 -14px;
    width: auto;
    min-height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    border: 0;
    border-top: 1px solid var(--sb-var-line);
    border-radius: 0;
    color: var(--blue);
    font-weight: 700;
    text-align: left;
  }
  /* A grade fecha sem gap extra antes do rodapé e sem sobra embaixo. */
  body .sb-varpop:has(> [data-forma]) > .sb-varall:last-child { margin-bottom: 0; border-radius: 0 0 15px 15px; }
  body .sb-varpop:has(> [data-forma]) > .sb-varall:focus-visible { outline-offset: -3px; }
}
/* CRIS-101 · celular deitado e baixo: os chips da mensagem param antes do botão de ampliar, em vez de
   passar por baixo dele (o 3º chip ficava com o canto coberto). A faixa continua rolando na horizontal. */
@media (orientation:landscape) and (max-height:400px){
  html body.sb-shell .sentence .sb-message-zone .slots{padding-right:0;margin-right:44px;}
}
/* FOTO-01: acesso direto; o PIN de foco mantém a edição fora da prancha. */
.sb-photo-add{min-height:44px;padding:8px 12px;border:1px solid var(--bd,#ccc);border-radius:12px;background:var(--surface,#fff);color:inherit;font:inherit;cursor:pointer}
html body.sb-focus .sb-photo-add,html body.mt-on .sb-photo-add{display:none!important}
.sb-photo-card{max-height:90dvh;overflow:auto;display:grid;gap:12px;text-align:start}
.sb-photo-card input{width:100%;box-sizing:border-box;min-height:44px;font:inherit}
#sbPhotoPreview{width:128px;height:128px;object-fit:contain;justify-self:center}
#sbPhotoList{display:flex;flex-wrap:wrap;gap:8px}
@media print{.sb-photo-add,#sbPhotoDialog,#sbPhotoSaved{display:none!important}}

@media (max-width:760px){
  .sb-modebar{grid-template-columns:minmax(0,1fr) auto auto 44px}
  .sb-modebar .sb-photo-picker{grid-column:2;grid-row:1}
  .sb-modebar .sb-mode-switch{grid-column:3;grid-row:1}
  .sb-modebar .sb-mode-settings{grid-column:4;grid-row:1}
}

/* PERS-01: preferência da prancha livre prevalece sobre a matriz automática P/M/G. */
#board.sb-responsive-custom{display:grid;grid-auto-flow:row!important;grid-template-columns:repeat(var(--mxcols),minmax(0,1fr))!important;grid-template-rows:none!important}
/* FALAR EM FIGURAS (27/09): botão na faixa de ferramentas e o painel "Disseram" logo abaixo dela.
   Celular: só o ícone, 44 px. Tela larga: ícone e rótulo. Ouvindo: vira Parar no mesmo lugar. */
.sb-modebar .sb-ff-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px 8px 10px; background: #eef4ff; border-color: #9db8f2; color: #1250e0; white-space: nowrap; }
.sb-modebar .sb-ff-btn[hidden] { display: none; }
.sb-ff-btn .ff-ico { width: 30px; height: 22px; flex: 0 0 auto; }
.sb-ff-btn .ff-stop { width: 18px; height: 18px; flex: 0 0 auto; }
.sb-ff-btn .ff-stop, .sb-ff-btn .ff-rot-on, .sb-ff-btn.ff-on .ff-ico, .sb-ff-btn.ff-on .ff-rot { display: none; }
.sb-ff-btn.ff-on .ff-stop, .sb-ff-btn.ff-on .ff-rot-on { display: inline; }
.sb-modebar .sb-ff-btn.ff-on { background: #1250e0; border-color: #1250e0; color: #fff; box-shadow: 0 0 0 4px #c9dafc; }
@media (max-width: 760px) {
  .sb-modebar .sb-ff-btn { padding: 8px; min-width: 44px; }
  .sb-ff-btn .ff-rot, .sb-ff-btn.ff-on .ff-rot-on { display: none; }
}
/* Celular estreito (27/09): a faixa numa linha só pede 390 px; abaixo disso o seletor de prancha sumia e
   Ajustes saía da tela (rolagem lateral em 320). Duas linhas: seletor e Ajustes em cima, ações embaixo. */
@media (max-width: 479px) {   /* ROT-03: com o relógio, a barra de uma linha espremia o seletor de prancha até 480 */
  .sb-modebar { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px; }
  .sb-modebar .ctxdd-slot:not(:empty) { grid-column: 1 / 3; grid-row: 1; }
  .sb-modebar .sb-mode-settings { grid-column: 3; grid-row: 1; }
  .sb-modebar .sb-photo-picker { grid-column: 1; grid-row: 2; }
  .sb-modebar .sb-photo-picker .sb-photo-add { width: 100%; }
  .sb-modebar .sb-mode-switch { grid-column: 2 / 4; grid-row: 2; justify-content: flex-end; }
}
/* MENU-390 (28/09, Emanuel): no celular, "Adicionar" vira + e "Modo Texto" vira o teclado, e o espaço vai para o
   seletor de prancha. O corte de 481 px foi medido (tools/e2e/_menu390_ponto_de_corte.js): com os rótulos por
   extenso o nome da prancha era espremido de 390 a 480 px em alemão, 470 em italiano e 464 em português. O nome
   inteiro fica no aria-label e no title. Em tablet e computador nada muda. */
.sb-modebar .sb-ico-curto { display: none; }
@media (max-width: 481px) {
  .sb-modebar #sbPhotoAdd .sb-rot-longo, .sb-modebar #sbModeToggle span { display: none; }
  .sb-modebar #sbPhotoAdd .sb-ico-curto, .sb-modebar #sbModeToggle .sb-ico-curto { display: block; width: 22px; height: 22px; }
  .sb-modebar #sbPhotoAdd, .sb-modebar #sbModeToggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 8px; }
  .sb-modebar .sb-photo-picker .sb-photo-add { width: auto; }
}
/* O menu aberto tem a largura do maior nome, nunca menos que o botão, e não passa da tela. */
html body .ctxdd-pop { right: auto; min-width: 100%; width: max-content; max-width: calc(100vw - 24px); box-sizing: border-box; }
/* Altura: tudo o que sobra do topo do menu até a borda da tela (dvh, por causa da barra do navegador no celular),
   com 12 px de folga; o topo vem de sbCtxOpen(). Em tela baixa, onde não cabe, o menu continua rolando. */
html body .ctxdd-pop { max-height: max(160px, calc(100vh - var(--ctxdd-topo, 60px) - 12px)); max-height: max(160px, calc(100dvh - var(--ctxdd-topo, 60px) - 12px)); }
html body .ctxdd-opt .cd-optname { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
html body .ctxdd-pop .ctxdd-opt { display: flex; }
.ff-painel { margin: 0 0 8px; padding: 10px 12px 12px; background: #fff; border: 1px solid #9db8f2; border-radius: 16px; box-shadow: 0 1px 2px rgba(20,36,61,.06); }
.ff-painel[hidden] { display: none; }
.ff-topo { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ff-titulo { margin: 0; font: 750 16px Inter,system-ui,sans-serif; color: #14243d; }
.ff-ouvindo { display: inline-flex; align-items: center; gap: 6px; font: 700 13px Inter,system-ui,sans-serif; color: #0b328e; }
.ff-ouvindo[hidden] { display: none; }
.ff-ponto { width: 9px; height: 9px; border-radius: 50%; background: #e67e22; animation: ff-pulso 1.2s ease-in-out infinite; }
@keyframes ff-pulso { 50% { opacity: .35; } }
.ff-acao { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 10px; border: 1px solid #d8e0ea; background: #fff; color: #14243d; cursor: pointer; }
.ff-acao[data-act="ffGrande"] { margin-left: auto; }
.ff-acao .ico { width: 20px; height: 20px; }
.ff-acao:focus-visible, .ff-cartoes .cell:focus-visible { outline: 3px solid #1250e0; outline-offset: 3px; }
.ff-cartoes { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; scroll-snap-type: x proximity; }
.ff-cartoes:empty { display: none; }
.ff-cartoes .cell { flex: 0 0 92px; min-height: 104px; padding: 6px; scroll-snap-align: start; }
.ff-cartoes .cell > img, .ff-cartoes .cell > .imgwrap { width: 64px; height: 64px; max-width: 100%; }
.ff-cartoes .cell .lbl { font-size: 14px; line-height: 18px; margin-top: 4px; }
.ff-cartoes .cell.cell-txt .lbl { font-size: 16px; font-weight: 700; }
.ff-recado { margin: 8px 0 0; font: 600 14px Inter,system-ui,sans-serif; color: #14243d; }
.ff-recado[hidden], .ff-ouvido[hidden] { display: none; }
.ff-ouvido { margin: 6px 0 0; font: 500 13px Inter,system-ui,sans-serif; color: #465773; }
.ff-ouvido.ff-provisorio { color: #8593a8; font-style: italic; }
/* Mostrar grande: o painel ocupa a tela, cartões maiores, para mostrar de longe. */
.ff-painel.ff-grande { position: fixed; inset: 12px; z-index: 900; margin: 0; overflow: auto; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(20,36,61,.25); }
.ff-painel.ff-grande .ff-titulo { font-size: 22px; }
.ff-painel.ff-grande .ff-cartoes { flex-wrap: wrap; overflow: visible; align-content: flex-start; gap: 12px; }
.ff-painel.ff-grande .ff-cartoes .cell { flex: 0 0 clamp(120px, 22vw, 200px); min-height: 0; aspect-ratio: 5/6; }
.ff-painel.ff-grande .ff-cartoes .cell > img, .ff-painel.ff-grande .ff-cartoes .cell > .imgwrap { width: 75%; height: auto; }
.ff-painel.ff-grande .ff-cartoes .cell .lbl { font-size: clamp(16px, 2.4vw, 24px); line-height: 1.2; }
.ff-painel.ff-grande .ff-ouvido { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .ff-ponto { animation: none; } }
/* ROT-03 (28/09): o painel Rotinas reusa o molde do Disseram (.ff-painel, .ff-topo, .ff-acao, .ff-cartoes). */
.sb-rot-btn .ico { width: 22px; height: 22px; }
@media (max-width: 900px) { .sb-modebar .sb-rot-btn { padding: 8px; min-width: 44px; } .sb-rot-btn .ff-rot { display: none; } }
.rot-painel .ff-acao[data-act="rotEditar"] { margin-left: auto; }
.rot-lista { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; }
.rot-lista[hidden], .rot-montar[hidden], .rot-painel .ff-cartoes[hidden] { display: none; }
.rot-item { display: inline-flex; flex-direction: column; align-items: flex-start; min-height: 44px; padding: 6px 12px; border: 1px solid #d8e0ea; border-radius: 12px; background: #fff; color: #14243d; font: 600 14px Inter,system-ui,sans-serif; cursor: pointer; }
.rot-item span { font-weight: 500; font-size: 13px; color: #45556e; }
.rot-item[aria-pressed="true"] { border-color: #1250e0; background: #eef4ff; box-shadow: 0 0 0 2px #c9dafc; }
.rot-nova { justify-content: center; color: #1250e0; }
.rot-item:focus-visible, .rot-tira:focus-visible, .sbrotina-tit:focus-visible { outline: 3px solid #1250e0; outline-offset: 3px; }
.rot-montando { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 6px 0; padding: 4px 4px 4px 12px; border-radius: 12px; background: #1250e0; color: #fff; font: 700 15px Inter,system-ui,sans-serif; }
.rot-montando > .rot-montando-txt { flex: 1 1 auto; }
#rotMontandoTxt { line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }   /* fr, it e de passam da largura em 390: quebra em linhas, sem cortar o nome */
/* No celular a prancha fica abaixo do painel: a faixa Montando acompanha a rolagem enquanto o modo está ligado. */
body.rot-montando-on { padding-bottom: calc(68px + 96px); }   /* folga: a última fileira da prancha rola para cima da faixa */
#sbRotinaFaixa.rot-repete { display: none; }
.rot-montando-txt { display: flex; flex-direction: column; min-width: 0; }
.rot-montando-txt small { font-weight: 600; font-size: 13px; opacity: .9; }
.rot-minis { display: flex; gap: 4px; flex: 0 0 auto; }
.rot-minis img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #fff; padding: 2px; }
body.rot-montando-on .rot-montando { position: fixed; left: 12px; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 800; max-width: 720px; margin: 0 auto; box-shadow: 0 6px 20px rgba(18,80,224,.35); }
/* Sem voz na língua, o aviso do sb-voz.js (estilo inline, daí o !important) sobe acima da faixa: ele
   explica ao adulto por que o cartão não fala e tem de ser lido inteiro (reteste da Cris, q7). */
body.rot-montando-on #sbVozAviso { bottom: calc(64px + var(--rot-montando-h, 72px) + 8px + env(safe-area-inset-bottom, 0px)) !important; }
.rot-campos { display: flex; flex-wrap: wrap; gap: 8px; }
.rot-campos input, .rot-campos select { min-height: 44px; }
.rot-campos input[type="text"] { flex: 1 1 160px; }
.rot-dica { margin: 8px 0 0; font: 500 14px Inter,system-ui,sans-serif; color: #45556e; }
.rot-rascunho { min-height: 0; }
.rot-tira { padding: 0; border: 0; background: none; cursor: pointer; flex: 0 0 auto; }
.rot-tira .cell { width: 92px; min-height: 104px; padding: 6px; pointer-events: none; }
.rot-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rot-botoes .sb-button[hidden] { display: none; }
.sbrotina-tit { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
html[data-tema="escuro"] body .rot-item { background: var(--sb-control, #243049); color: var(--sb-color-ink, #e8eef7); border-color: var(--sb-border-strong, #3a4a63); }
html[data-tema="escuro"] body .rot-item span, html[data-tema="escuro"] body .rot-dica { color: var(--sb-color-ink, #e8eef7); }
@media print { .ff-painel, .sb-ff-btn { display: none !important; } }
html[data-tema="escuro"] body .ff-painel { background: var(--sb-surface, #1b2536); border-color: var(--sb-border-strong, #3a4a63); }
html[data-tema="escuro"] body .ff-titulo, html[data-tema="escuro"] body .ff-recado { color: var(--sb-color-ink, #e8eef7); }
html[data-tema="escuro"] body .ff-ouvido { color: var(--sb-color-ink-soft, #b8c4d6); }
html[data-tema="escuro"] body .ff-ouvindo { color: #9db8f2; }
html[data-tema="escuro"] body .ff-acao { background: var(--sb-control, #243049); color: var(--sb-color-ink, #e8eef7); border-color: var(--sb-border-strong, #3a4a63); }

/* FOTO-03: escolha de origem junto ao botão Adicionar. */
.sb-photo-picker{position:relative}
.sb-photo-choices{position:absolute;inset-block-start:calc(100% + 6px);inset-inline-start:0;z-index:100;display:grid;gap:4px;min-width:180px;max-width:calc(100vw - 24px);padding:6px;border:1px solid var(--bd,#ccc);border-radius:12px;background:var(--surface,#fff);box-shadow:0 4px 16px #0003}
.sb-photo-choices[hidden]{display:none}
.sb-photo-choices button{min-height:44px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}
.sb-photo-choices button:hover{background:var(--bg,#eee)}
.sb-photo-choices button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
html body.sb-focus .sb-photo-picker,html body.mt-on .sb-photo-picker{display:none!important}
@media print{.sb-photo-picker{display:none!important}}