/* Pele SPEC V2 vem de pce-tokens.css (contrato dos 2 temas + Roda-instrumento sempre
   escura). Aqui só os ALIASES dos nomes legados do app → nomes canônicos, p/ não renomear
   componentes nem a roda.css (vendorizada). Resolvem por tema via os tokens canônicos —
   e dentro de .atlas-roda resolvem para o escuro (instrumento). */
:root{
  --void:var(--shell); --panel:var(--surface); --panel2:var(--surface2);
  --track:var(--surface2); --warn:var(--watch); --danger:var(--risk);
  --tscale:1.15;
  --ambient-x:72vw;--ambient-y:28vh;--ambient-alpha:.34;
  --stars-x:0px;--stars-y:0px;
}
/* re-declara os aliases DENTRO da Roda: var() num custom prop congela no elemento que o
   declara, então precisam recomputar contra os tokens escuros do .atlas-roda (instrumento). */
.atlas-roda{
  --void:var(--shell); --panel:var(--surface); --panel2:var(--surface2);
  --track:var(--surface2); --warn:var(--watch); --danger:var(--risk);
}
/* regra do tema #2 — foil em texto: foil no escuro; no claro, ouro sólido (título <24px) */
.foil{background:var(--foil);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
[data-theme="light"] .foil{background:none;-webkit-text-fill-color:var(--gold);color:var(--gold)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--void);color:var(--ink);font-family:var(--sans);line-height:1.58;-webkit-font-smoothing:antialiased;isolation:isolate;min-height:100vh}
/* [ENRICK · 16/set] Atmosfera do funil, agora como camada compartilhada do app. As estrelas
   ficam atrás da interface e o foco acompanha o ponteiro; nenhum dos dois captura interação. */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{
  background-image:
    radial-gradient(circle at 18% 23%,rgba(229,201,110,.92) 0 1px,transparent 1.8px),
    radial-gradient(circle at 76% 14%,rgba(91,209,198,.75) 0 1px,transparent 1.7px),
    radial-gradient(circle at 42% 72%,rgba(237,230,214,.64) 0 1px,transparent 1.6px),
    radial-gradient(circle at 88% 68%,rgba(200,162,77,.78) 0 1.2px,transparent 2px),
    radial-gradient(circle at 9% 82%,rgba(86,194,184,.60) 0 1px,transparent 1.8px);
  background-size:173px 163px,227px 211px,293px 271px,347px 319px,419px 383px;
  background-position:var(--stars-x) var(--stars-y);
  opacity:.48;filter:drop-shadow(0 0 4px rgba(229,201,110,.38));
  animation:app-stars-breathe 5.8s ease-in-out infinite alternate,app-stars-drift 28s linear infinite;
}
body::after{
  background:radial-gradient(340px circle at var(--ambient-x) var(--ambient-y),rgba(31,118,111,calc(var(--ambient-alpha) * .22)),rgba(200,162,77,calc(var(--ambient-alpha) * .075)) 38%,transparent 72%);
  opacity:1;transition:background-position .12s linear;
}
.top,#app{position:relative;z-index:1}
@keyframes app-stars-breathe{from{opacity:.34}to{opacity:.62}}
@keyframes app-stars-drift{to{background-position:calc(var(--stars-x) + 24px) calc(var(--stars-y) + 18px)}}
[data-theme="light"] body::before{opacity:.22;filter:none}
[data-theme="light"] body::after{background:radial-gradient(340px circle at var(--ambient-x) var(--ambient-y),rgba(15,61,62,.08),rgba(122,95,20,.055) 42%,transparent 74%)}
a{color:inherit}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--void) 92%,transparent);backdrop-filter:blur(8px);z-index:60}
.bz{display:flex;align-items:center;gap:10px;min-width:0}
.brand-seal{width:34px;height:34px;border-radius:9px;background:var(--pce-teal-grad);border:1px solid var(--gold-lo);display:grid;place-items:center;flex:none;overflow:hidden}
.brand-logo{height:26px;width:auto;display:block}
.wm{font-family:var(--disp);font-weight:700;font-size:calc(15px * var(--tscale,1));letter-spacing:.2em}
.crumb{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:1px}
/* crumb do Atlas: no DESKTOP fica idêntico ao div antigo (sem sublinhado, não clicável, cor herdada
   do .crumb). Só vira SAÍDA clicável no mobile imersivo (regra em @media abaixo). Zero mudança desktop. */
.crumb-exit{display:block;text-decoration:none;pointer-events:none}
.top-actions{display:flex;align-items:center;gap:8px}
.who{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--muted);max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nivel-pill{font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));letter-spacing:.06em;color:var(--gold);border:1px solid var(--gold-lo);border-radius:2px;padding:2px 6px}
.btn{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));letter-spacing:.04em;padding:8px 13px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);border-radius:3px;cursor:pointer;transition:.18s;white-space:nowrap;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--gold-lo);color:var(--gold)}
.btn:focus-visible,.btn-secondary:focus-visible,.btn-cta:focus-visible,.btn-primary:focus-visible,.btn-wa:focus-visible,.s-cta:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.gold{border-color:var(--gold-lo);color:var(--gold)}
.btn.ghost{background:transparent}
.hamb{display:none;font-size:calc(18px * var(--tscale,1));line-height:1;padding:6px 10px}
/* shell */
.shell{display:grid;grid-template-columns:230px 1fr;align-items:start;min-height:calc(100vh - 51px)}
.sidebar{border-right:1px solid var(--line);padding:16px 12px;position:sticky;top:51px;height:calc(100vh - 51px);overflow-y:auto;background:var(--panel)}
.side-eyebrow{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:4px 10px;margin-top:8px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-family:var(--sans);font-size:calc(13.5px * var(--tscale,1));color:var(--muted);
  background:transparent;border:none;border-radius:4px;padding:10px 12px;cursor:pointer;transition:.16s;margin-bottom:2px}
.nav-item:hover{background:var(--panel2);color:var(--ink)}
.nav-item.active{background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold)}
.nav-item .ico{width:16px;text-align:center;flex:none;opacity:.9}
.nav-item.locked{opacity:.4;cursor:not-allowed}
.nav-item .lock{margin-left:auto;font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--faint)}
.content{padding:22px 26px 60px;min-width:0}
.eyebrow{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
h1.title{font-family:var(--disp);font-size:calc(23px * var(--tscale,1));letter-spacing:.03em;margin:2px 0 4px;
  background:var(--foil);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
[data-theme="light"] h1.title{background:none;-webkit-text-fill-color:var(--gold);color:var(--gold)}
.lead{color:var(--muted);font-size:max(12.5px, calc(12.5px * var(--tscale,1)))}
/* Meu Atlas */
.ma-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;margin-top:18px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:18px}
.panel h2{font-family:var(--disp);font-size:calc(15px * var(--tscale,1));letter-spacing:.02em;margin:0 0 2px}
.panel .cap{font-family:var(--mono);font-size:max(8.5px, calc(8.5px * var(--tscale,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.faixa-row{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.faixa-badge{font-family:var(--disp);font-weight:700;font-size:calc(26px * var(--tscale,1));color:var(--void);background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none}
.faixa-nome{font-family:var(--disp);font-size:calc(16px * var(--tscale,1))}
.faixa-media{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));color:var(--muted)}
svg.wheel{width:100%;height:auto;display:block;max-width:360px;margin:6px auto 0}
.wheel-legend{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;margin-top:12px}
.leg{display:flex;align-items:center;gap:7px;font-size:max(11px, calc(11px * var(--tscale,1)));color:var(--muted);padding:2px 0}
.leg .dot{width:9px;height:9px;border-radius:2px;flex:none}
.leg .sc{margin-left:auto;font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--ink)}
/* inteligências — item 6 (INVERTE as áreas): BARRA = doutrina (cor da inteligência),
   BORDA do bloco = estado (--risk/--watch/neutro). Ali o assunto É a inteligência. */
.intel{border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:9px;padding:9px 11px;margin-bottom:7px;background:var(--surface)}
.intel.rk{border-left-color:var(--risk)} .intel.wt{border-left-color:var(--watch)}
.intel-top{display:flex;align-items:center;gap:8px}
.intel-top .idot{width:9px;height:9px;border-radius:50%;flex:none}
.intel-top b{font-weight:600;font-size:max(12.5px, calc(12.5px * var(--tscale,1)));flex:1}
.intel-m{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--muted)}
.intel-bar{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;margin-top:5px}
.intel-bar i{display:block;height:100%;border-radius:3px}   /* cor = var(--i-slug), inline no JS */
.intel.limit .intel-top b{color:var(--risk)}
/* P2 · inteligência expansível: cabeçalho clicável (≥44px), caret, painel abaixo */
.intel-top{cursor:pointer;min-height:44px}
.intel-top .intel-cv{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));color:var(--gold-lo);flex:none;transition:transform .18s}
.intel.open .intel-top .intel-cv{transform:rotate(90deg);color:var(--gold)}
.intel-top:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.intel-det{display:none;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.intel.open .intel-det{display:block}
.intel-def{font-size:max(12px, calc(12px * var(--tscale,1)));color:var(--muted);line-height:1.6;margin:0 0 9px}
.intel-areas{display:flex;flex-direction:column;gap:4px}
.intel-arow{display:flex;align-items:center;gap:8px;font-size:max(12px, calc(12px * var(--tscale,1)));color:var(--ink)}
.intel-arow .ia-dot{width:8px;height:8px;border-radius:50%;flex:none}
.intel-arow .ia-n{flex:1}
.intel-arow .ia-v{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));color:var(--muted)}
.limit-tag{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.06em;text-transform:uppercase;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 55%,var(--line2));border-radius:2px;padding:1px 5px;margin-left:6px}
/* evolução */
.evo{margin-top:20px}
.evo-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
/* U1 · Sua evolução: cada item abre no lugar (caixa suspensa). .evo-item = contêiner; .evo-head = a
   linha tocável (>=44px); .evo-det = detalhe (uma aberta por vez, via classe .open no JS). */
.evo-item{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.evo-item.open{border-color:var(--line2);background:linear-gradient(100deg,rgba(var(--gold-rgb),.06),var(--panel) 62%)}
.evo-head{display:flex;align-items:center;gap:12px;padding:10px 12px;min-height:44px;cursor:pointer}
.evo-head:focus-visible{outline:2px solid var(--gold-lo);outline-offset:-2px}
.evo-item:focus-visible{outline:2px solid var(--gold-lo);outline-offset:2px}
.evo-date{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--muted);width:82px;flex:none}
.evo-bar{flex:1;height:8px;background:var(--track);border-radius:4px;overflow:hidden}
.evo-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}
.evo-val{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));color:var(--ink);width:96px;text-align:right;flex:none}
.evo-val small{color:var(--muted)}
.evo-cv{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));color:var(--gold-lo);flex:none;transition:transform .18s}
.evo-item.open .evo-cv{transform:rotate(90deg);color:var(--gold)}
.evo-det{display:none;padding:10px 12px 12px;border-top:1px solid var(--line)}
.evo-item.open .evo-det{display:grid;gap:8px}
.evo-drow{display:flex;align-items:center;gap:8px;font-size:max(11.5px, calc(11.5px * var(--tscale,1)));color:var(--ink)}
.evo-drow b{font-weight:600}
.evo-k{font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:74px;flex:none}
.evo-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.evo-acts .act{font-family:var(--mono);font-size:max(8.5px, calc(8.5px * var(--tscale,1)));letter-spacing:.05em;color:var(--muted);border:1px solid var(--line2);background:var(--panel2);padding:9px 11px;border-radius:6px;cursor:pointer;white-space:nowrap;min-height:40px}
.evo-acts .act:hover{border-color:var(--gold-lo);color:var(--gold)}
/* FAQ da aba Suporte · v1. So a PERGUNTA precisa de regra propria: o item, a linha tocavel de
   44px, a seta que gira e o detalhe sao os MESMOS do `.evo` logo acima — mesmo CSS, mesmo JS
   (`wireEvo`), uma implementacao so. A resposta usa `.lead`, que ja existe e ja escala. */
.faq-q{flex:1; font-size:max(12.5px, calc(12.5px * var(--tscale,1))); color:var(--ink); line-height:1.45}
/* estados */
.center{min-height:66vh;display:grid;place-items:center;padding:24px}
.card{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:26px}
.card h2{font-family:var(--disp);font-size:calc(19px * var(--tscale,1));margin:0 0 6px}
.card p{color:var(--muted);font-size:calc(13px * var(--tscale,1));margin:0 0 16px}
.field{display:block;margin-bottom:12px}
.field span{display:block;font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.field input{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:3px;color:var(--ink);font-family:var(--sans);font-size:calc(16px * var(--tscale,1));padding:11px 12px;outline:none} /* 16px evita o auto-zoom do iOS ao focar (login magic link) */
.field input:focus{border-color:var(--gold-lo)}
.msg{font-size:max(12px, calc(12px * var(--tscale,1)));margin-top:12px;min-height:18px}
.msg.err{color:var(--danger)}.msg.good{color:var(--ok)}
.spin{width:26px;height:26px;border:2px solid var(--line2);border-top-color:var(--gold);border-radius:50%;animation:sp .8s linear infinite;margin:0 auto}
@keyframes sp{to{transform:rotate(360deg)}}
.hint{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--muted);margin-top:14px;line-height:1.6}
.empty-ico{margin-bottom:12px;display:flex;justify-content:center}
.empty-ico svg{width:46px;height:46px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
/* responsivo */
@media(max-width:820px){
  .shell{grid-template-columns:1fr}
  .hamb{display:inline-block}
  .sidebar{position:fixed;left:0;top:51px;bottom:0;width:250px;z-index:55;transform:translateX(-100%);transition:transform .22s;height:auto}
  .sidebar.open{transform:translateX(0)}
  .scrim{position:fixed;inset:51px 0 0 0;background:var(--scrim);z-index:54;display:none}
  .scrim.open{display:block}
  .ma-grid{grid-template-columns:1fr;gap:16px}
  .who{max-width:30vw}
}
@media(min-width:821px){.scrim{display:none}}
/* próximo passo */
.next-step h2{font-family:var(--disp);font-size:calc(16px * var(--tscale,1));margin:2px 0 2px}
/* popup MAF (não-bloqueante, canto inferior) */
.maf-pop{position:fixed;right:18px;bottom:18px;max-width:340px;z-index:70;background:var(--panel);border:1px solid var(--gold-lo);border-radius:6px;padding:16px 16px 14px;box-shadow:var(--shadow)}
.maf-pop-x{position:absolute;top:7px;right:10px;background:none;border:none;color:var(--faint);font-size:calc(13px * var(--tscale,1));cursor:pointer;line-height:1}
.maf-pop-x:hover{color:var(--ink)}
.maf-pop-t{font-family:var(--disp);font-size:calc(14px * var(--tscale,1));color:var(--gold);margin:0 14px 6px 0}
.maf-pop-p{color:var(--muted);font-size:max(12.5px, calc(12.5px * var(--tscale,1)));line-height:1.5;margin:0 0 14px}
.maf-pop-btns{display:flex;gap:8px;flex-wrap:wrap}
/* modal MAF */
.maf-backdrop{position:fixed;inset:0;z-index:80;background:var(--scrim);backdrop-filter:blur(3px);display:grid;place-items:center;padding:18px;overflow-y:auto}
.maf-modal{position:relative;width:100%;max-width:520px;background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:26px 24px 24px;box-shadow:var(--shadow);margin:auto}
.maf-prog{height:4px;background:var(--track);border-radius:3px;overflow:hidden;margin:2px 0 10px}
.maf-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transition:width .3s}
.maf-step{font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.maf-q{font-family:var(--disp);font-size:calc(19px * var(--tscale,1));line-height:1.3;color:var(--ink);margin:0 0 18px}
.maf-scale{display:flex;flex-direction:column;gap:8px}
.maf-opt{display:flex;align-items:center;gap:13px;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:4px;color:var(--ink);font-family:var(--sans);font-size:calc(14px * var(--tscale,1));padding:12px 14px;cursor:pointer;transition:.14s}
.maf-opt:hover{border-color:var(--gold);transform:translateX(2px)}
.maf-opt.sel{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--panel2))}
.maf-opt-n{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:50%;font-family:var(--mono);font-size:max(12px, calc(12px * var(--tscale,1)));color:var(--gold);flex:none}
.maf-success-mark{width:48px;height:48px;display:grid;place-items:center;margin:0 0 14px;border:1px solid var(--gold-lo);border-radius:50%;background:color-mix(in srgb,var(--gold) 13%,var(--panel2));color:var(--gold-hi);font-family:var(--mono);font-size:24px;font-weight:700}
.maf-success-copy{color:var(--muted);font-size:max(13px, calc(13px * var(--tscale,1)));line-height:1.6;margin:-6px 0 18px}
.maf-success-copy b{color:var(--ink)}
.maf-success-actions{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap}
.maf-success-actions .btn-primary,.maf-success-actions .btn{display:flex;align-items:center;justify-content:center;min-height:44px}

/* Próximo passo editorial: integra MAF/protocolo ao conteúdo, sem competir com header ou doca. */
.journey-card{display:none}

@media(max-width:480px){.maf-pop{left:12px;right:12px;bottom:12px;max-width:none}}

@media(max-width:820px){
  .journey-card{position:relative;display:block;overflow:hidden;box-sizing:border-box;width:100%;margin:0 0 16px;padding:16px;border:1px solid var(--line2);border-radius:12px;background:linear-gradient(145deg,var(--panel),var(--panel2));box-shadow:0 12px 30px rgba(0,0,0,.2)}
  .journey-card::after{content:"";position:absolute;width:150px;height:150px;right:-86px;top:-84px;border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);border-radius:50%;box-shadow:0 0 0 24px color-mix(in srgb,var(--gold) 4%,transparent);pointer-events:none}
  .journey-head{position:relative;z-index:1;display:flex;align-items:center;gap:11px}
  .journey-head>div{min-width:0}
  .journey-symbol{width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid var(--gold-lo);border-radius:50%;background:color-mix(in srgb,var(--gold) 11%,var(--panel2));color:var(--gold)}
  .journey-symbol svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
  .journey-state{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
  .journey-card h2{font-family:var(--disp);font-size:calc(17px * var(--tscale,1));line-height:1.25;color:var(--ink);overflow-wrap:break-word;margin:0}
  .journey-card p{position:relative;z-index:1;margin:12px 0 14px;color:var(--muted);font-size:max(12.5px, calc(12.5px * var(--tscale,1)));line-height:1.55}
  .journey-action{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;padding:10px 13px;border:0;border-radius:8px;background:var(--foil-btn,var(--gold));color:var(--btn-txt,#171106);font-family:var(--mono);font-size:max(10.5px, calc(10.5px * var(--tscale,1)));font-weight:600;letter-spacing:.03em;text-decoration:none;cursor:pointer}
  .journey-action b{font-size:18px;line-height:1;font-weight:500}
  .journey-pending .journey-symbol{color:var(--risk);border-color:color-mix(in srgb,var(--risk) 55%,var(--line2));background:color-mix(in srgb,var(--risk) 8%,var(--panel2))}
  .maf-success-actions{flex-direction:column}
  .maf-success-actions .btn-primary,.maf-success-actions .btn{width:100%}
}

/* ============================================================
   Leva 2 · percurso — 4 destinos, /diagnostico, histórico, mobile.
   Só INTERFACE segue o tema; a Roda (.atlas-roda) segue instrumento (escura).
   ============================================================ */
/* layout: shell de altura fixa, conteúdo com scroll interno (desktop) */
/* linha do grid travada na altura da shell (minmax 0) para o #content rolar por dentro
   e a sidebar ficar parada — sem minmax, a linha cresce com o conteúdo e a página toda rola. */
.shell{grid-template-columns:230px 1fr;grid-template-rows:minmax(0,1fr);height:calc(100vh - 51px);align-items:stretch}
.sidebar{position:static;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.main-col{display:flex;flex-direction:column;min-height:0;min-width:0}
.viewhead{flex:none;padding:13px 26px 11px;border-bottom:1px solid var(--line);background:var(--void)}
.viewhead .crumb{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.viewhead h1.title{font-size:calc(19px * var(--tscale,1));margin:3px 0 0}
/* V4 · título + controle de texto na MESMA linha; controle à direita, no cabeçalho fixo */
.vh-row{display:flex;align-items:center;gap:10px}
.vh-row h1.title{flex:1;min-width:0}
.ts-head{display:flex;gap:4px;flex:none}
.ts-head button{min-width:32px;min-height:40px;padding:0 6px;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);border-radius:8px;font-family:var(--mono);font-weight:600;line-height:1;cursor:pointer}
.ts-head button:nth-child(1){font-size:max(11px, calc(11px * var(--tscale,1)))}
.ts-head button:nth-child(2){font-size:calc(13px * var(--tscale,1))}
.ts-head button:nth-child(3){font-size:calc(15px * var(--tscale,1))}
.ts-head button[aria-pressed="true"]{color:var(--gold);border-color:var(--gold-lo);background:color-mix(in srgb,var(--gold) 12%,var(--panel2))}
.content{flex:1;min-height:0;overflow-y:auto;padding:18px 26px 90px}
/* nav como âncoras + grupos */
.nav{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
a.nav-item{text-decoration:none}
.nav-item .nm{flex:1}
.nav-item.active{border:1px solid var(--line2)}
/* rodapé da sidebar (avatar + menu tema/sair) */
.railfoot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;position:relative}
.av{width:30px;height:30px;border-radius:50%;background:var(--seal-bg);border:1.5px solid var(--seal-bd);display:grid;place-items:center;font-family:var(--mono);font-size:max(12px, calc(12px * var(--tscale,1)));font-weight:600;color:var(--seal-ink);flex:none;cursor:pointer;position:relative}
.rf-nm{flex:1;min-width:0}
.rf-nm b{font-size:max(11px, calc(11px * var(--tscale,1)));font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-nm small{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));color:var(--faint)}
.rf-kebab{background:none;border:none;color:var(--muted);font-size:calc(16px * var(--tscale,1));cursor:pointer;padding:2px 6px;border-radius:4px;flex:none}
.rf-kebab:hover{background:var(--panel2)}
.rf-menu,.hdr-menu{position:absolute;background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:5px;box-shadow:var(--shadow);z-index:75}
.rf-menu{bottom:calc(100% + 6px);left:0;right:0}
.rf-mi{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);font-family:var(--sans);font-size:max(12px, calc(12px * var(--tscale,1)));padding:8px 10px;border-radius:5px;cursor:pointer}
.rf-mi:hover{background:var(--panel2);color:var(--gold)}
.hm-nm{padding:6px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.hm-nm b{font-size:max(12px, calc(12px * var(--tscale,1)))}.hm-nm small{display:block;font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));color:var(--faint)}
/* avatar no header (mobile) */
.hdr-av{display:none;width:32px;height:32px;border-radius:50%;background:var(--seal-bg);border:1.5px solid var(--seal-bd);place-items:center;font-family:var(--mono);font-size:max(12px, calc(12px * var(--tscale,1)));font-weight:600;color:var(--seal-ink);cursor:pointer;position:relative}
/* ponto âmbar = perfil incompleto (não é estado semântico do avatar) */
.av-flag{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--watch);border:2px solid var(--surface)}
.hdr-menu{top:calc(100% + 8px);right:12px;width:186px}
.top-actions{position:relative}
/* bloco-resumo (gramática --risk do admin) */
.summary{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:13px 15px;border-radius:12px;
  border:1px solid rgba(var(--risk-rgb),.30);background:linear-gradient(140deg,rgba(var(--risk-rgb),.12),var(--surface) 68%);margin-bottom:14px}
.summary .s-badge{width:44px;height:44px;border-radius:50%;background:var(--seal-bg);border:1.5px solid var(--seal-bd);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:calc(15px * var(--tscale,1));color:var(--seal-ink);flex:none}
/* item 3 · gap dimensionado p/ o PICO do halo do neon (scale 1,12 + blur 4px, ~12px de
   folga) — reserva a coluna da letra p/ o halo #C66947 não encostar em repouso nem no pico */
.summary .s-lb{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.16em;text-transform:uppercase;color:var(--risk);display:flex;align-items:center;gap:13px;padding-top:4px}
.summary .s-lb i{width:6px;height:6px;border-radius:50%;background:var(--risk);box-shadow:var(--halo) rgba(var(--risk-rgb),var(--halo-a));flex:none}
.summary .s-big{font-family:var(--disp);font-size:calc(16px * var(--tscale,1));margin:10px 0 2px;color:var(--ink)}
.summary .s-meta{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--muted)}
/* .s-cta usa o molde de CTA único (definido no addendum, item 4) — só o layout no resumo fica aqui */
/* selo de instrumento (fora da .atlas-roda) */
.instrument-wrap{margin-top:6px}
.inst-selo{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.14em;text-transform:uppercase;color:var(--gold-mid);margin:2px 0 8px;display:flex;align-items:center;gap:7px}
.inst-selo::before{content:"◆";font-size:max(7px, calc(7px * var(--tscale,1)))}
/* 12 áreas — lista de INTERFACE (segue o tema) */
.sorter{display:flex;align-items:center;gap:6px;margin:4px 0 10px}
.sorter b{font-family:var(--mono);font-size:max(7.5px, calc(7.5px * var(--tscale,1)));letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:400}
.sorter .so{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);cursor:pointer}
.sorter .so.on{background:rgba(var(--gold-rgb),.12);border-color:var(--line2);color:var(--gold)}
.arow{border:1px solid var(--line);border-left:2px solid var(--line2);border-radius:8px;margin-bottom:6px;background:var(--surface)}
.arow .hd{display:flex;align-items:center;gap:9px;padding:8px 11px}
.arow .n{font-size:max(11.5px, calc(11.5px * var(--tscale,1)));flex:1}
.arow .bar{height:4px;width:56px;border-radius:2px;background:var(--surface2);overflow:hidden;flex:none}
.arow .bar i{display:block;height:100%;background:var(--muted)}
/* W1 · barra = escala INTEIRA 0–10. Ouro [0..score*10] (o `i`); vermelho [score*10..75%] = a
   distância até a meta 7,5; acima de 7,5 sem vermelho, resto NEUTRO. Truque: o fundo do trilho é
   neutro e uma faixa vermelha FIXA de 0..75% (::before) marca o vão até a meta — o ouro (por cima)
   cobre o que já foi alcançado, então o vermelho que sobra é exatamente score→7,5, e acima de 7,5
   o ouro cobre toda a faixa. As faixas de estado seguem nas bordas/score, não na barra. */
.arow .bar,.prio-bar,.evo-bar{position:relative}
.arow .bar::before,.prio-bar::before,.evo-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:75%;background:rgba(var(--risk-rgb),.5)}
.arow .bar i,.arow.rk .bar i,.arow.wt .bar i,.prio-bar i,.evo-bar i{position:relative;background:var(--gold)}
.prio-bar{display:block;height:4px;width:100%;border-radius:2px;overflow:hidden;margin:7px 0 1px;background:var(--surface2)}
.prio-bar i{display:block;height:100%}
.arow .v{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));font-weight:600;color:var(--muted);width:30px;text-align:right}
.arow.rk{border-left-color:var(--risk);background:linear-gradient(100deg,rgba(var(--risk-rgb),.10),var(--surface) 60%)}
.arow.wt{border-left-color:var(--watch);background:linear-gradient(100deg,rgba(var(--watch-rgb),.09),var(--surface) 60%)}
.arow.rk .v{color:var(--risk)} .arow.rk .bar i{background:var(--risk)}
.arow.wt .v{color:var(--watch)} .arow.wt .bar i{background:var(--watch)}
/* /diagnostico — texto */
.diag-hero{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.diag-hero .dh-badge{width:48px;height:48px;border-radius:50%;background:var(--seal-bg);border:1.5px solid var(--seal-bd);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:calc(17px * var(--tscale,1));color:var(--seal-ink);flex:none}
.dh-nome{font-family:var(--disp);font-size:calc(17px * var(--tscale,1))}
.dh-media{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--muted);margin-top:2px}
.diag-faixa h2{font-family:var(--disp);font-size:calc(16px * var(--tscale,1));margin-bottom:6px}
.vitoria{margin-top:12px;border:1px solid var(--line2);border-radius:9px;padding:11px 13px;background:rgba(var(--gold-rgb),.06);font-size:max(12.5px, calc(12.5px * var(--tscale,1)));color:var(--ink);line-height:1.6}
.vitoria .vt-lb{display:block;font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.intel-line{font-size:max(11px, calc(11px * var(--tscale,1)));color:var(--muted);margin:2px 0 5px}
.prio{border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:8px;background:var(--surface)}
.prio-h{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.prio-n{width:20px;height:20px;border-radius:50%;background:rgba(var(--gold-rgb),.14);color:var(--gold);font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));font-weight:600;display:grid;place-items:center;flex:none}
.prio-h b{flex:1;font-size:max(12.5px, calc(12.5px * var(--tscale,1)))}
.prio-sc{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));color:var(--risk);font-weight:600}
.prio-r{font-size:max(12px, calc(12px * var(--tscale,1)));color:var(--ink);line-height:1.55}
.prio-v{font-size:max(11.5px, calc(11.5px * var(--tscale,1)));color:var(--muted);margin-top:6px;line-height:1.55}
.prio-v b{color:var(--gold);font-weight:600}
/* 5W2H — Linguagem Universal (expand por área · cards prioritários · protocolo matinal) */
.arow.w2hable .hd{cursor:pointer}
.arow .cv{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--muted);transition:transform .18s;flex:none;margin-left:2px}
.arow.open .cv{transform:rotate(90deg);color:var(--gold)}
.arow.w2hable:hover{border-left-color:var(--gold-lo)}
.w2h-detail{display:none;padding:2px 12px 13px}
.arow.open .w2h-detail{display:block}
.w2h{display:flex;flex-direction:column;gap:11px}
.prio .w2h{margin-top:4px}
.w2h-lb{display:block;font-family:var(--mono);font-size:max(8.5px, calc(8.5px * var(--tscale,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.w2h-f p{font-size:max(12.5px, calc(12.5px * var(--tscale,1)));color:var(--ink);line-height:1.6;margin:0}
.w2h-do{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.w2h-do li{font-size:max(12.5px, calc(12.5px * var(--tscale,1)));color:var(--ink);line-height:1.55}
.w2h-do li::marker{color:var(--gold)}
.w2h-proto .w2h-do{margin-top:4px}
.w2h-const{margin-top:12px;border:1px solid var(--line2);border-radius:9px;padding:10px 13px;background:rgba(var(--gold-rgb),.06);font-size:max(12px, calc(12px * var(--tscale,1)));color:var(--ink);line-height:1.6}
/* materiais (biblioteca · ebooks) */
.mat-list{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.mat-card{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:var(--surface)}
.mat-mk{width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:rgba(var(--gold-rgb),.06);display:grid;place-items:center}
.mat-mk svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.mat-body h3{font-family:var(--disp);font-size:calc(16px * var(--tscale,1));font-weight:600;color:var(--ink);margin-bottom:3px}
.mat-body p{font-size:max(12.5px, calc(12.5px * var(--tscale,1)));color:var(--muted);line-height:1.5}
.mat-dl{white-space:nowrap}
.mat-locked{text-align:left}
.mat-locked .btn-primary{margin-top:2px}
@media(max-width:600px){.mat-card{grid-template-columns:38px 1fr;gap:12px}.mat-card .mat-dl{grid-column:1/-1;width:100%;margin-top:4px}}
/* histórico */
.hrow{display:grid;grid-template-columns:auto 1fr auto auto auto auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:6px;background:var(--surface)}
.hrow.cur{border-color:var(--line2);background:linear-gradient(100deg,rgba(var(--gold-rgb),.09),var(--surface) 62%)}
/* S1 · a linha inteira abre as respostas (alvo óbvio ≥44px pela altura da linha) */
.hrow.clickrow{cursor:pointer}
.hrow.clickrow:hover{border-color:var(--gold-lo)}
.hrow.clickrow:active{background:rgba(var(--gold-rgb),.07)}
.hrow.clickrow:focus-visible{outline:2px solid var(--gold-lo);outline-offset:2px}
.hrow .mb{width:30px;height:30px;border-radius:50%;background:var(--seal-bg);border:1.5px solid var(--seal-bd);display:grid;place-items:center;font-family:var(--disp);font-size:max(11px, calc(11px * var(--tscale,1)));font-weight:600;color:var(--seal-ink);flex:none}
.hrow .fx{font-size:max(11px, calc(11px * var(--tscale,1)))}
.hrow .fx small{display:block;font-family:var(--mono);font-size:max(8.5px, calc(8.5px * var(--tscale,1)));color:var(--faint);margin-top:1px}
.hrow .dt{font-family:var(--mono);font-size:max(9.5px, calc(9.5px * var(--tscale,1)));color:var(--muted);white-space:nowrap}
.hrow .sc{font-family:var(--mono);font-size:calc(13px * var(--tscale,1));font-weight:600}
.hrow .dl{font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));padding:3px 7px;border-radius:5px;white-space:nowrap}
.dl.up{background:rgba(var(--ok-rgb),.14);color:var(--ok)}
.dl.dn{background:rgba(var(--risk-rgb),.14);color:var(--risk)}
.dl.nw{background:rgba(var(--gold-rgb),.13);color:var(--gold)}
.hact{display:flex;gap:6px}
.hact .act{font-family:var(--mono);font-size:max(8.5px, calc(8.5px * var(--tscale,1)));letter-spacing:.05em;color:var(--muted);border:1px solid var(--line2);background:var(--panel2);padding:6px 9px;border-radius:6px;cursor:pointer;white-space:nowrap}
.hact .act:hover{border-color:var(--gold-lo);color:var(--gold)}
.hist-foot{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.ver-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line2);border-radius:9px;padding:9px 13px;margin-bottom:14px;background:rgba(var(--gold-rgb),.08);font-size:max(12px, calc(12px * var(--tscale,1)));color:var(--ink)}
.ma-empty{text-align:center;padding:44px 20px;display:grid;place-items:center}
/* tab bar (só mobile) + header colapsável */
.tabbar{display:none}
/* F1b · a folha Ajuda é peça do rodapé MÓVEL: nasce oculta e só liga dentro do @media(max-width:820px),
   mesmo padrão da .tabbar logo acima. SEM esta linha ela vaza para o desktop — medido: renderizava
   como bloco no fluxo, 2014px de altura e 953px de largura, somando 2014px à página. O montaAjuda()
   roda em qualquer largura (a folha é montada uma vez, no boot); quem decide onde ela aparece é o CSS. */
.aj-sheet,.aj-scrim{display:none}
.top{transition:transform .2s ease}
.top.hidden-top{transform:translateY(-100%)}

@media(max-width:820px){
  .top{position:fixed;top:0;left:0;right:0;z-index:60;padding:9px 14px}
  #app{padding-top:48px}
  .shell{grid-template-columns:1fr;height:auto}
  .sidebar{display:none}
  .main-col{height:auto}
  .viewhead{padding:12px 14px 8px}
  /* A · o ícone do controle de tamanho de texto [pedido ENRICK].
     MEDIDO ANTES DE DESENHAR (360×740 e 390×844, os 6 títulos, as 3 escalas de texto):
       · linha útil 332px em 360 (362 em 390) · controle 104px · gap 10px · viewhead 61px
       · o título que MANDA é "Diagnóstico" em A+ (--tscale 1.15): texto 160,23px
       · folga ANTES do ícone: 57,77px em 360 · 87,77px em 390
       · ORÇAMENTO = 40px de largura. Não é a largura que trava, é a ALTURA: a partir de 48px o
         ícone estica a linha e o viewhead vai de 61px para 69px. Em 40px ainda mede 61.
       · com 19px (o grid da barra): folga 34,77px em 360 e 64,77px em 390, viewhead 61px,
         título em 1 linha nas 6 rotas e nas 3 escalas. Cabe com 21px de sobra sobre o orçamento.
     NADA foi cedido: os três botões seguem 32×40 (alvo intocado) e nenhum rótulo mudou. */
  .ts-head .ts-ico{width:19px;height:19px;flex:none;color:var(--muted);align-self:center}
  .viewhead .crumb{display:none}   /* item 2: breadcrumb redundante no mobile (o título já basta) */
  /* AB1 C3 · a reserva do rodapé larga o literal 96px e passa a var(--doca-h) (roda.css:
     calc(90px + env(safe-area-inset-bottom,0px))). UMA pílula, UMA reserva: o .content do
     Atlas JÁ consome esse token, e agora as rotas de fora consomem o mesmo.
     O 96px era bug latente: literal SEM env(), então no iPhone a barra antiga ocupava
     65 + 34 = 99px contra 96px reservados — a última linha ficava 3px sob a barra. */
  .content{overflow:visible;padding:14px 14px var(--doca-h)}
  /* item 2b · balão do MAF acima da barra do rodapé; z acima dela (80).
     AB1 C5 · o literal `calc(72px + safe)` casava com a FAIXA antiga (65px + safe) e deixava
     7px de folga. Com a pílula do C2 a barra passou a ocupar exatamente 72px + safe (64 da
     pílula + 8 do recuo do wrapper), e a folga virou 0 — o balão encostava. MEDIDO: 0px nas
     quatro combinações (360×740 e 390×844, safe=0 e safe=34).
     Passa a referenciar var(--doca-h), a MESMA fonte de verdade da reserva do .content (D2):
     um número só descreve "quanto o rodapé ocupa", e o balão herda a folga junto. Serve às
     duas barras — 18px acima da pílula das rotas de fora, 6px acima da doca do Atlas. */
  .maf-pop{bottom:var(--doca-h);z-index:82}
  /* ===== FOLHA AJUDA · nível do APP (F1b) [SESSÃO · Enrick] =====
     As regras vieram do roda.css, onde pediam ancestral `.atlas-roda` — era esse escopo, e só ele,
     que prendia a folha ao Atlas. Aqui elas nascem escopadas em `.aj-sheet`, que é criada pelo
     app.js fora do instrumento, DENTRO de @media(max-width:820px).
     ⚠️ POR QUE DUPLICAR e não compartilhar: a folha CAMADAS continua no roda.css e continua sendo
     do instrumento. Se as duas dividissem uma classe, mexer numa mexeria na outra — e uma delas
     vive num arquivo que o ADMIN carrega sem `?v=`. É exatamente a armadilha da `.pce-pill`.
     São duas superfícies diferentes agora, e cada uma paga o seu CSS.
     ⚠️ CONSEQUÊNCIA VISÍVEL: fora do `.atlas-roda` a folha usa os tokens do APP, então passa a
     SEGUIR O TEMA. Dentro do Atlas ela era sempre escura (o instrumento força escuro nos 2 temas).
     No tema claro ela agora nasce clara. Medido e reportado — decisão de produto do [MAICK]. */
  /* ===== D2 · O EMPILHAMENTO DA FOLHA AJUDA =====
     DEFEITO [ENRICK]: "ao abrir a Ajuda, o cabeçalho fica por cima".
     MEDIDO (360×740, 390×844 e 360×560, com o markup real e o CSS real):
       · a folha NUNCA é ocluída pelo cabeçalho. Ela é `max-height:72vh` + `bottom:10px`, então
         sobra ~18vh livres acima dela: a folga até a base do `.top` mede 142,7px em 740,
         171,8px em 844 e ainda 92,3px em 560. `elementFromPoint` em 8 alturas da folha deu
         0/8 pontos cobertos nas três. O cabeçalho só encostaria numa viewport de menos de
         ~230px de altura. **A oclusão relatada não se reproduz.**
       · o que EXISTE e é o defeito: o `.top` é `fixed z-index:60` e o scrim era `45`. Com a folha
         aberta o cabeçalho ficava ACESO, colorido e CLICÁVEL por cima do escurecido, e tocá-lo
         não fechava a folha. `elementFromPoint` no centro do cabeçalho devolvia `div.top`, não o
         scrim. É isso que "o cabeçalho fica por cima" descreve.
     CONSERTO: pelo empilhamento, como mandado — nada de esconder o cabeçalho (mexer no `.top`
     mexeria no W2, o encavalamento que já custou uma investigação).
     OS NÚMEROS, e por que estes: scrim 77 e folha 78 ficam ACIMA de `.top` (60) e `#viewhead` (59),
     e ABAIXO de `.tabbar-wrap` (80) — a barra continua por cima da folha DE PROPÓSITO: é ela que
     abre e fecha a Ajuda, e o `padding-bottom:var(--doca-h)` da folha existe justamente porque a
     barra a cobre. Também passam por baixo do `.maf-backdrop` (80) e do `.logo-lightbox` (120),
     que são modais de cima; e por cima do `.maf-pop` (70), `.rf-menu`/`.hdr-menu` (75) e
     `.aviso-pop` (76), que não devem furar uma folha aberta.
     ⚠️ A FOLHA CAMADAS NÃO FOI TOCADA — é portão desta leva. Medida no mesmo harness, ela tem
     EXATAMENTE o mesmo empilhamento (fixed, z-46, scrim 45, zero criador de contexto acima) e
     portanto o MESMO defeito latente: o cabeçalho também fica por cima do scrim dela. Ela não
     chama atenção porque é curta (362px contra 532,8px da Ajuda em 740), e o `roda.css` é
     carregado pelo ADMIN sem `?v=`. Fica REPORTADA para o [MAICK], não corrigida aqui. */
  .aj-scrim{display:block;position:fixed;inset:0;z-index:77;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .22s}
  .aj-scrim.aberta{opacity:1;pointer-events:auto}
  .aj-sheet{display:block;position:fixed;left:10px;right:10px;bottom:10px;top:auto;z-index:78;
    max-height:72vh;overflow:auto;background:var(--surface);border:1px solid var(--line2);border-radius:16px;
    /* mesma reserva da folha Camadas: a barra do rodapé fica por cima; --doca-h já inclui a safe-area */
    padding:12px 12px calc(var(--doca-h) + 12px);box-shadow:0 -14px 44px rgba(0,0,0,.5);transform:translateY(135%);transition:transform .28s ease}
  .aj-sheet.aberta{transform:none}
  .aj-sheet::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 10px}
  .aj-sheet .folha-hd{display:flex;align-items:center;margin-bottom:8px}
  .aj-sheet .folha-ttl{flex:1;font-family:var(--disp);font-size:calc(15px * var(--tscale,1));color:var(--gold-hi)}
  .aj-sheet .folha-x{width:34px;height:34px;flex:none;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);border-radius:9px;font-size:calc(13px * var(--tscale,1));cursor:pointer}
  .aj-sheet .aj-body{display:flex;flex-direction:column;gap:10px}
  .aj-sheet .btn-cta,.aj-sheet .aj-wa{display:flex;width:100%;box-sizing:border-box}
  .aj-sheet .aj-glos{margin-top:2px;border-top:1px solid var(--line);padding-top:10px}
  .aj-sheet .aj-glos-hd{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
  .aj-sheet .aj-search{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--line2);border-radius:9px;color:var(--ink);font-size:calc(13px * var(--tscale,1));padding:9px 11px;margin-bottom:4px}
  .aj-sheet .aj-search::placeholder{color:var(--faint)}
  .aj-sheet .aj-search:focus{outline:none;border-color:var(--gold-lo)}
  .aj-sheet .aj-glos-list{display:flex;flex-direction:column}
  .aj-sheet .aj-item{border-bottom:1px solid var(--line)}
  .aj-sheet .aj-item-hd{width:100%;display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 2px;background:none;border:none;text-align:left;cursor:pointer;color:var(--ink)}
  .aj-sheet .aj-item-t{flex:1;font-size:calc(13px * var(--tscale,1));font-weight:600}
  .aj-sheet .aj-item-cv{font-family:var(--mono);font-size:max(12px, calc(12px * var(--tscale,1)));color:var(--gold-lo);transition:transform .18s;flex:none}
  .aj-sheet .aj-item.aberta .aj-item-cv{transform:rotate(90deg);color:var(--gold)}
  .aj-sheet .aj-item-def{display:none;font-size:max(12.5px, calc(12.5px * var(--tscale,1)));line-height:1.6;color:var(--muted);padding:0 2px 10px}
  .aj-sheet .aj-item.aberta .aj-item-def{display:block}
  .aj-sheet .aj-glos-vazio{font-size:max(12.5px, calc(12.5px * var(--tscale,1)));color:var(--faint);padding:10px 2px}
  .who,.nivel-pill{display:none}
  .hdr-av{display:grid}
  .hamb{display:none}
  /* item 3: tab bar dimensionada — ícone SVG 24px, rótulo 9,5px, item 48px, safe-area,
     par contorno-inativo / preenchido-ativo (padrão App Store)
     AB1 C2 · a tab bar deixou de ser uma FAIXA colada no rodapé e virou PÍLULA FLUTUANTE,
     com a MESMA superfície da doca — fundo, blur, borda, raio, sombra e padding vêm todos
     da .pce-pill (pce-tokens.css). Aqui não sobra nenhuma declaração de aparência.
     A ESTRUTURA espelha a doca: .tabbar-wrap = wrapper fixo (pointer-events off, dá o recuo
     lateral e a safe-area no PADDING, nunca margin) e a pílula vive por dentro. É o wrapper
     que carrega o recolher no Atlas — com a pílula flutuando 8px acima do rodapé, um
     translateY(100%) na PÍLULA deixaria uma fresta de 8px aparecendo; no wrapper (que inclui
     o recuo) ela sai inteira.
     A DISTRIBUIÇÃO não é aparência: seguem os 5 em repeat(5,1fr), como antes.
     O ESTADO segue em .active — a doca marca por aria-current e as duas convenções NÃO se
     unificam (decisão [MAICK via Enrick]: a doca está CONGELADA e não pode ser tocada). */
  .tabbar-wrap{position:fixed;left:0;right:0;bottom:0;z-index:80;
    padding:0 10px calc(8px + env(safe-area-inset-bottom,0px));pointer-events:none}
  /* ============================================================
     C2 · O ESPELHO DO COMPONENTE DA DOCA — regra a regra, não "parecido".
     A barra do app É a doca. O MARKUP já vem do mesmo construtor (roda.js · buildDocaBar), então o
     que falta aqui é a APARÊNCIA do componente: a distribuição, a cápsula `.cx`, o ícone, o rótulo
     `.tt`, o badge `.bg` e os quatro estados `[aria-current="true"]`. Cada declaração abaixo é a
     cópia LITERAL da sua irmã no `roda.css` (`.atlas-roda .doca-bar.docain` e `.atlas-roda .di*`) —
     mesmos valores, mesma ordem, para que a conferência seja linha contra linha.

     ⚠️ POR QUE ESPELHO E NÃO CLASSE COMPARTILHADA: a regra da doca mora no `roda.css` porque o
     ADMIN carrega esse arquivo por URL absoluta e SEM `?v=` — ele congela na versão que a CDN
     tiver. Mover a regra para um arquivo comum é exatamente o que quebrou a `.pce-pill` lá (o admin
     tem `pce-tokens.css?v=2` congelado). Duas superfícies, duas regras — mesmo motivo pelo qual as
     duas folhas se separaram no F1b.
     ⚠️ OS DOIS LADOS SE EDITAM JUNTOS. Mudou um valor aqui, muda no `roda.css`; mudou lá, muda aqui.
     Nenhum teste pega a divergência sozinho — o portão é a medição lado a lado (doca × barra,
     propriedade a propriedade), e é ela que tem de rodar a cada mexida nestes dois blocos.

     O QUE NÃO É ESPELHO, e por quê (as duas únicas exceções, as duas já decididas antes):
       · o FUNDO da pílula segue o TEMA (C4/AB1) — a doca é escura porque o INSTRUMENTO é escuro
         (`.atlas-roda` reaponta os tokens e ignora o tema); o app é claro no tema claro. Daí o
         bloco `[data-theme="light"]` no fim: no ESCURO os valores são idênticos aos da doca,
         no CLARO eles viram os que a barra já servia em produção. Sem isso o rótulo off-white e a
         cápsula branca sumiriam sobre a pílula branca — é a regressão de contraste 1,33 que o C4 já
         consertou uma vez.
       · o padding lateral da pílula e o vão entre itens: 7 itens não cabem com os números de 6.
         Medido, e o número está na linha.
     ============================================================ */
  /* A DISTRIBUIÇÃO — a única aritmética que 6 itens e 7 não compartilham. A doca usa `gap:2px` e a
     `.pce-pill` dá `padding:8px 8px 6px`; com 7 cápsulas de 44px isso não cabe em 360.
     MEDIDO (360×740, fonte real): a soma dos 7 pelo conteúdo é 322,42px
     ([44·44·44·56,33·44·44·46,09] — quem manda é a cápsula de 44, menos em Diagnóstico e Materiais,
     onde o rótulo é maior). Espaço útil dentro da pílula = 340 − 2×padding.
       · com os números da doca (padding 8, vão 2): 322,42 + 12 = 334,42 contra 324 → ESTOURA 10,42,
         e o flex encolhe os itens para 42,48 (abaixo do alvo de 44) e decapita "Diagnóstico".
         Foi exatamente o que a medição mostrou antes deste ajuste.
       · com vão 0 e padding 4 (os do G1, já em produção): 322,42 contra 332 → CABE, folga 9,58.
     Em 390 sobra 39,58 nos dois casos — 360 é quem manda.
     ⚠️ NÃO se mexeu em NENHUMA medida do COMPONENTE para isso: a cápsula segue 44×44 raio 14, o
     ícone 19, o rótulo 8px, o badge 18. O que mudou é só o espaço ENTRE itens — que é o que o
     portão desta correção libera ("a largura dos itens: 7 contra 6 muda a distribuição").
     A folga de 9,58 é a margem de segurança para uma fonte de aparelho maior que a do mock. */
  .tabbar{display:flex;justify-content:space-around;gap:0;pointer-events:auto;padding:8px 4px 6px;
    background:color-mix(in srgb,var(--surface) 96%,transparent)}   /* C4 · o FUNDO segue o TEMA (o app é claro no tema claro); o resto da superfície vem da .pce-pill */
  /* espelha `.atlas-roda .di` */
  .tabbar .di{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:40px;min-height:48px;
    /* o `padding:2px` da doca vira `2px 0`: o VERTICAL fica (é ele que dá os 61px de altura do item,
       idênticos aos da doca); o HORIZONTAL sai, e são os 14px (7×2) que fecham a conta acima.
       O alvo de toque não sofre: o item mede 44 de largura, que é o piso. */
    padding:2px 0;border:none;background:transparent;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
  /* A CÁPSULA — espelha `.atlas-roda .di .cx`. É a peça que faltava: sem ela o ícone fica solto e a
     barra inteira encolhe 13px, que é o que faz a pílula "parecer chapada" no print. */
  .tabbar .di .cx{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;
    border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));transition:.18s}
  .tabbar .di svg{width:19px;height:19px;transition:transform .18s}
  .tabbar .di .tt{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.04em;color:rgba(237,230,214,.52);
    /* F2b · A REDE, herdada do bloco anterior e mantida de propósito (é a única linha aqui que a doca
       não tem). Se num aparelho a fonte render mais larga que no mock e o item encolher, o rótulo
       corta em vez de invadir o vizinho. NENHUM rótulo deve chegar aqui — o portão mede texto ×
       item e exige folga positiva nos 7, nas duas larguras. Encurtar rótulo é CONTEÚDO, do [MAICK]. */
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar .di[aria-current="true"]{color:var(--gold-hi)}
  .tabbar .di[aria-current="true"] .tt{color:var(--gold-hi)}
  .tabbar .di[aria-current="true"] .cx{border-color:rgba(var(--gold-rgb),.50);
    background:linear-gradient(180deg,rgba(var(--gold-rgb),.24),rgba(var(--gold-rgb),.08));
    box-shadow:0 0 0 1px rgba(var(--gold-rgb),.28), 0 8px 20px -6px rgba(var(--gold-rgb),.55)}
  .tabbar .di[aria-current="true"] svg{transform:scale(1.08)}
  /* O BADGE — espelha `.atlas-roda .di .bg`. O número vem do a[3] do DOCA_ITEMS, pelo construtor;
     nunca do markup. */
  .tabbar .di .bg{position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--gold-hi);color:#171106;font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));font-weight:600}

  /* ---- C2 · O TEMA CLARO — a única parte que NÃO pode ser espelho literal ----
     A doca ignora o tema: `.atlas-roda` reaponta os tokens para o jogo ESCURO e fica escura sempre,
     porque o INSTRUMENTO é escuro. A barra do app segue o tema (decisão C4/AB1) — no claro a pílula
     é branca. Sobre branco, o off-white `rgba(237,230,214,.52)` do rótulo e o `rgba(255,255,255,.08)`
     da cápsula somem: é a mesma regressão de contraste 1,33 que o C4 já consertou uma vez, e por
     isso o espelho literal PARA aqui.
     REGRA DESTE BLOCO: no ESCURO nada é sobrescrito (os valores acima são os da doca, idênticos);
     no CLARO o rótulo volta a ser EXATAMENTE o que a barra já servia em produção (`--faint` inativo,
     `--gold` ativo), de modo que o tema claro não muda um pixel de cor em relação ao que o
     [ENRICK] já aprovou no device-test do AB1. Só a CÁPSULA é nova no claro — ela não existia. */
  /* o `:not()` é o que impede este bloco de apagar o ESTADO ATIVO: sem ele a regra teria a MESMA
     especificidade da irmã `[aria-current="true"] .cx` do espelho e, vindo depois, roubaria a borda
     dourada do item atual no tema claro. Assim ela só alcança os inativos, e o ativo segue a regra
     do espelho — que já é feita de tokens e acompanha o tema sozinha. */
  [data-theme="light"] .tabbar .di:not([aria-current="true"]) .cx{border-color:var(--line2);
    background:linear-gradient(180deg,rgba(0,0,0,.045),rgba(0,0,0,.015))}
  [data-theme="light"] .tabbar .di .tt{color:var(--faint)}
  [data-theme="light"] .tabbar .di[aria-current="true"] .tt{color:var(--gold)}
  .summary{grid-template-columns:auto 1fr;gap:11px}
  .summary .s-cta{grid-column:1/-1;text-align:center}
  .hrow{grid-template-columns:auto 1fr auto;row-gap:8px}
  .hrow .dt{grid-column:2/-1;font-size:max(9px, calc(9px * var(--tscale,1)));order:5}
  .hrow .hact{grid-column:1/-1}
}

/* ============================================================
   MODO IMERSIVO DO ATLAS (decisão Enrick) — SÓ MOBILE.
   A doca (roda.css) é a ÚNICA barra e fica sempre no rodapé. A nav inferior do app
   NUNCA aparece dentro do Atlas, em nenhuma posição de rolagem (a troca por rolagem
   foi REVOGADA). Saída única = breadcrumb, FIXO no topo p/ ser sempre alcançável.
   Desktop intocado.
   ============================================================ */
@media(max-width:820px){
  /* G2 · A REGRA QUE RECOLHIA A BARRA DENTRO DO ATLAS SAIU. Ela existia porque a doca assumia o
     rodapé lá dentro; agora a barra do app É a doca e vale em TODAS as rotas — recolhê-la deixaria
     o Atlas sem barra nenhuma. O `body.atlas-imersivo` continua vivo e continua governando a reserva
     do conteúdo, o viewhead grudado e a saída pelo breadcrumb (regras logo abaixo). */
  /* reserva no fim da PÁGINA do Atlas p/ a última linha não ficar sob a doca (inclui safe-area via --doca-h) */
  body.atlas-imersivo .content{padding-bottom:var(--doca-h)}
  /* saída ÚNICA: breadcrumb clicável, PRESO no topo (sticky) p/ alcançar de qualquer ponto da página.
     z abaixo do .top (60): quando o .top recolhe ao descer, o crumb fica no topo; ao subir, o .top cobre
     por um instante mas você já está indo ao topo. O .crumb genérico fica oculto no mobile; este vence. */
  /* W2 · o viewhead (faixa Meu Atlas + controle A−/A/A+) gruda ABAIXO do .top (fixo, z60), não em
     top:0 — senão, ao rolar p/ cima (quando o .top reaparece), o .top encavalava por cima dele.
     --top-h = altura real do .top (setada no JS). Quando o .top recolhe (rolar p/ baixo), o viewhead
     sobe p/ top:0 e preenche o vão (preserva o ganho de espaço do header colapsável). */
  body.atlas-imersivo .viewhead{position:sticky;top:var(--top-h,48px);z-index:59;background:var(--void)}
  body.atlas-imersivo .top.hidden-top ~ #app .viewhead{top:0}
  /* O card já identifica a página e o próximo passo; repetir “Meu Atlas” consumia a dobra. */
  body.atlas-imersivo .viewhead .vh-row{display:none}
  body.atlas-imersivo .viewhead .crumb-exit{display:inline-flex;align-items:center;gap:6px;min-height:40px;pointer-events:auto;
    font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));letter-spacing:.05em;color:var(--gold);text-decoration:none}
  body.atlas-imersivo .viewhead .crumb-exit::before{content:"‹";font-size:calc(15px * var(--tscale,1));line-height:1}
  body.atlas-imersivo .viewhead .crumb-exit:active{opacity:.7}
}
@media(prefers-reduced-motion:reduce){
  .top,.tabbar-wrap,.atlas-roda .doca-bar.docain{transition:none}   /* AB1 C2: o transform migrou p/ o wrapper */
}

/* ============================================================
   Leva 2 · addendum — cor canônica, movimento, drill-down, perfil.
   ============================================================ */
/* item 6 · 12 áreas: BOLINHA = doutrina (cor --a{n} inline), BARRA+BORDA = estado */
.arow .adot{width:9px;height:9px;border-radius:50%;flex:none}
.arow.drillable .hd{cursor:pointer}
.arow .cv{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--muted);width:12px;text-align:center;transition:transform .18s}
.arow.open .cv{transform:rotate(90deg)}

/* item 8 · MOVIMENTO — 3,6s (neon) e 2,4s (pulso) nunca sincronizam */
@keyframes neon-breath{0%,100%{opacity:.30;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes cta-pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),.42)}55%{box-shadow:0 0 0 9px rgba(var(--gold-rgb),0)}}
@keyframes wa-pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.40)}55%{box-shadow:0 0 0 9px rgba(37,211,102,0)}}
/* bolinha da limitante: respira (precisa de correção), NÃO convida ao clique */
.neon{position:relative;width:7px;height:7px;border-radius:50%;background:var(--risk);flex:none}
.neon::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:var(--risk);filter:blur(4px);animation:neon-breath 3.6s ease-in-out infinite;z-index:0}
/* item 4 · CTA ÚNICA (molde único) — a "Conversar sobre meu próximo passo" do Meu Atlas (.s-cta)
   é a referência de proporção/peso/respiração. .s-cta (resumo), .btn-primary (diagnóstico) e
   .btn-wa (suporte) partilham EXATAMENTE o mesmo molde; .btn-wa troca só o preenchimento pelo
   verde do canal WhatsApp. Sem estilo duplicado — um primário por tela. */
.s-cta,.btn-primary,.btn-wa{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));font-weight:600;letter-spacing:.08em;
  padding:10px 14px;border-radius:9px;border:none;background:var(--foil);color:var(--btn-ink);
  text-align:center;text-decoration:none;display:inline-block;cursor:pointer;white-space:nowrap;
  animation:cta-pulse 2.4s ease-out infinite}
.btn-wa{background:var(--wa);color:var(--wa-ink);animation:wa-pulse 2.4s ease-out infinite}
[data-theme="light"] .btn-wa{background:#0E7A38;color:#EFFCF3}
/* item 4 · contraste no tema CLARO: o foil (golds claros) reprova AA no canto gold-hi
   (3,76:1 sob --btn-ink #FBF7EC). Como o molde é ÚNICO, troca-se o preenchimento por OURO
   SÓLIDO só no claro — --gold (#7A5F14) = 5,65:1 uniforme (AA em TODO o botão, cantos inclusos).
   O escuro mantém o foil (lê ≥7,8). Uma mudança no molde tira a dívida de toda CTA de vez. */
[data-theme="light"] .s-cta,[data-theme="light"] .btn-primary{background:var(--gold)}
.btn-secondary{background:transparent;color:var(--gold);border:1px solid var(--line2);font-family:var(--mono);letter-spacing:.06em;border-radius:9px;padding:11px 15px;text-decoration:none;display:inline-block;cursor:pointer;animation:none}
/* CTA foil ESTÁTICA (login / emptyState / download) — mesmo molde do .btn-primary, sem pulso,
   alvo de toque >=46px (mobile-first). Escuro=foil; claro=ouro sólido (o foil reprova AA no claro). */
.btn-cta{font-family:var(--mono);font-weight:600;font-size:max(12px, calc(12px * var(--tscale,1)));letter-spacing:.06em;color:var(--btn-ink);
  background:var(--foil);border:none;border-radius:9px;padding:0 22px;min-height:46px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:.18s}
.btn-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-cta:disabled{opacity:.6;cursor:default;transform:none;filter:none}
[data-theme="light"] .btn-cta{background:var(--gold)}
/* obrigatório: reduced-motion desliga TUDO */
@media (prefers-reduced-motion:reduce){.neon::after,.s-cta,.btn-primary,.btn-wa{animation:none!important}}

/* item 7 · chips de legenda das 7 inteligências (entorno; arcos ficaram como pergunta) */
.ring-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ring-chips span{font-family:var(--mono);font-size:max(8.5px, calc(8.5px * var(--tscale,1)));letter-spacing:.03em;padding:4px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.ring-chips i{width:7px;height:7px;border-radius:50%;flex:none}

/* item A · drill-down do quiz (atrás de FLAGS.drilldown; conteúdo = placeholder) */
.drill{border-top:1px solid var(--line);padding:11px;display:none}
.arow.open .drill{display:block}
.qa{border:1px solid var(--line);border-radius:8px;padding:9px 10px;margin-bottom:7px;background:var(--surface2)}
.qa .q{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.qa .r{font-size:max(11.5px, calc(11.5px * var(--tscale,1)));margin:4px 0 5px;color:var(--ink);line-height:1.5}
.qa .resp{font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));color:var(--gold);margin-bottom:6px}
.qa .int{font-size:max(11px, calc(11px * var(--tscale,1)));color:var(--muted);line-height:1.6;border-left:2px solid var(--risk);padding-left:9px}
.qa .int b{color:var(--ink);font-weight:500}
.qa .prov{font-family:var(--mono);font-size:max(7px, calc(7px * var(--tscale,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:7px}

/* Etapa 4 · respostas de um diagnóstico (detalhe do histórico) — agrupadas por área, formato celular */
.resp-head{margin-bottom:16px}
.resp-head .crumb-back{display:inline-block;font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));letter-spacing:.04em;color:var(--muted);text-decoration:none;padding:4px 0;margin-bottom:6px}
.resp-head .crumb-back:hover{color:var(--gold)}
.resp-title{font-family:var(--disp);font-size:calc(19px * var(--tscale,1));color:var(--ink)}
.resp-sub{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--muted);margin-top:3px}
.resp-area{margin-bottom:18px}
.resp-ah{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.resp-ah .adot{width:9px;height:9px;border-radius:50%;flex:none}
.resp-ah h3{font-size:max(12.5px, calc(12.5px * var(--tscale,1)));font-weight:600;color:var(--ink);flex:1;margin:0}
.resp-ah .resp-sc{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));font-weight:600;color:var(--muted)}
.resp-card{border:1px solid var(--line);border-radius:8px;padding:10px 11px;margin-bottom:6px;background:var(--surface)}
.resp-q{font-size:max(12px, calc(12px * var(--tscale,1)));color:var(--ink);line-height:1.5}
.resp-a{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));margin-top:7px;color:var(--muted)}
.resp-a .resp-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--muted)}
.resp-a.hi{color:var(--ok)} .resp-a.hi .resp-dot{background:var(--ok)}
.resp-a.mid{color:var(--watch)} .resp-a.mid .resp-dot{background:var(--watch)}
.resp-a.lo{color:var(--risk)} .resp-a.lo .resp-dot{background:var(--risk)}
.resp-a.na{color:var(--faint)} .resp-a.na .resp-dot{background:var(--faint)}

/* 3 pontos de partida — bolinha numerada = cor da área (doutrina) */
.pp-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));font-weight:600;color:var(--a-ink);flex:none}

/* item B · perfil */
.prof{max-width:460px}
.prof-field{margin-bottom:14px}
.prof-field label{display:block;font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.prof-field .in{width:100%;background:var(--surface2);border:1px solid var(--line2);border-radius:5px;color:var(--ink);font-family:var(--sans);font-size:calc(14px * var(--tscale,1));padding:10px 12px;outline:none}
.prof-field .in:focus{border-color:var(--gold-lo)}
.prof-ro{font-family:var(--mono);font-size:max(11.5px, calc(11.5px * var(--tscale,1)));color:var(--muted);background:var(--surface2);border:1px solid var(--line);border-radius:5px;padding:10px 12px;word-break:break-all;display:flex;align-items:center;gap:8px;justify-content:space-between}
.prof-lock{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.06em;color:var(--faint);border:1px solid var(--line);border-radius:3px;padding:2px 6px;white-space:nowrap}

/* ============================================================
   Acabamento — itens 6 (chips no card), 8 (roda no mobile), 9 (logo ampliável).
   ============================================================ */
/* item 6 · chips das 7 inteligências DENTRO do card da Roda (.left-col), entre a roda e o
   detalhe (info-box). Injetados pós-mount por app.js. Herdam a pele escura do instrumento. */
.atlas-roda .left-col .ring-chips{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line)}
.atlas-roda .left-col .ring-chips span{font-size:max(8px, calc(8px * var(--tscale,1)));padding:3px 7px}

/* item 8 · mobile: roda menor p/ roda + chips + detalhe caberem na MESMA dobra
   (critério iPhone SE 375×667 — tocar numa fatia mostra o detalhe sem rolar). */
@media(max-width:820px){
  .atlas-roda svg.wheel{max-width:228px;margin:0 auto}
  .atlas-roda .left-col{padding:10px}
}

/* item 9 · logo ampliável — overlay escuro, centralizado, toque em qualquer lugar fecha */
.brand-seal{cursor:zoom-in}
.logo-lightbox{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.9);display:grid;place-items:center;padding:32px;cursor:zoom-out;opacity:0;transition:opacity .28s ease}
.logo-lightbox.on{opacity:1}
.logo-lightbox img{max-width:min(440px,84vw);max-height:82vh;width:auto;height:auto;display:block;filter:drop-shadow(0 24px 70px rgba(0,0,0,.6))}
@media (prefers-reduced-motion:reduce){.logo-lightbox{transition:none}}
.prof-msg{font-size:max(12px, calc(12px * var(--tscale,1)));margin-top:6px;min-height:16px}

/* Centro persistente de próximos passos — MAF, protocolo e futuros estados da jornada. */
.hdr-sino{position:relative;background:transparent;border:1px solid var(--line2);border-radius:8px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--gold);cursor:pointer;padding:0}
.hdr-sino[hidden]{display:none}
.hdr-sino:hover{border-color:var(--gold-lo);color:var(--gold-hi)}
.hdr-sino .sino-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--risk);box-shadow:0 0 5px var(--risk)}
@media(pointer:coarse){.hdr-sino{width:44px;height:44px}}
/* M4 · popover de avisos (ancorado no header, como o menu do avatar) */
.aviso-pop{position:absolute;top:calc(100% + 8px);right:12px;width:min(300px,calc(100vw - 24px));z-index:76;
  background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:10px;box-shadow:var(--shadow)}
.aviso-pop[hidden]{display:none}
.aviso-hd{font-family:var(--mono);font-size:max(8.5px, calc(8.5px * var(--tscale,1)));letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:2px 2px 8px}
.aviso-item{border:1px solid var(--line);border-radius:8px;padding:10px}
.aviso-t{font-family:var(--disp);font-size:calc(14px * var(--tscale,1));color:var(--ink);margin-bottom:4px}
.aviso-d{font-size:max(12px, calc(12px * var(--tscale,1)));color:var(--muted);line-height:1.55;margin-bottom:10px}
.aviso-acts{display:flex;gap:8px}
.aviso-cta{flex:1;font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));padding:9px 12px;min-height:40px;border-radius:8px;border:none;background:var(--foil-btn,var(--gold));color:var(--btn-txt,#171106);font-weight:600;cursor:pointer}
.aviso-x{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));padding:9px 12px;min-height:40px;border-radius:8px;border:1px solid var(--line2);background:none;color:var(--muted);cursor:pointer}
.aviso-cta:focus-visible,.aviso-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ============================================================
   T1/S2 · ESCALA DE TEXTO A−/A/A+ (--tscale, controle no instrumento, mobile).
   O roda.css ja escala a leitura do ponto e a lista ritem; aqui escala TODO o resto do texto
   do app. REGRA: so texto. Selos, badges, botoes (alvos de toque >=44px), a barra de chips
   (flex-wrap), canvas, SVG e a DOCA nao escalam. --tscale mora no :root e default 1, entao sem
   o controle os tamanhos ficam identicos aos de hoje.
   LICAO T1 (causa do bug): NUNCA escrever a sequencia estrela-barra dentro deste comentario,
   nem via seletores tipo .rd ponto-estrela-barra; ela fecha o comentario cedo e o parser engole
   o bloco @media inteiro como uma regra invalida (o bloco somia da CSSOM). */
@media(max-width:820px){
  /* cabecalhos de pagina, sobrancelha, lead, dicas, estado vazio */
  h1.title{font-size:calc(23px * var(--tscale,1))}
  .viewhead h1.title{font-size:calc(19px * var(--tscale,1))}
  .eyebrow{font-size:max(8px, calc(8px * var(--tscale,1)))}
  .lead{font-size:max(12.5px, calc(12.5px * var(--tscale,1)))}
  .hint{font-size:max(10px, calc(10px * var(--tscale,1)))}
  .ma-empty h2{font-size:calc(24px * var(--tscale,1))}
  /* cabecalhos e rotulos de bloco */
  .panel h2{font-size:calc(15px * var(--tscale,1))}
  .panel .cap{font-size:max(8.5px, calc(8.5px * var(--tscale,1)))}
  .next-step h2{font-size:calc(16px * var(--tscale,1))}
  .diag-faixa h2{font-size:calc(16px * var(--tscale,1))}
  .dh-nome{font-size:calc(17px * var(--tscale,1))}
  .dh-media{font-size:max(10px, calc(10px * var(--tscale,1)))}
  /* limitante (summary) — só o texto; selo e CTA ficam fixos */
  .summary .s-lb{font-size:max(8px, calc(8px * var(--tscale,1)))}
  .summary .s-big{font-size:calc(16px * var(--tscale,1))}
  .summary .s-meta{font-size:max(10px, calc(10px * var(--tscale,1)))}
  /* 12 áreas (.arow) */
  .arow .n{font-size:max(11.5px, calc(11.5px * var(--tscale,1)))}
  .arow .v{font-size:max(11px, calc(11px * var(--tscale,1)))}
  .arow .cv{font-size:max(10px, calc(10px * var(--tscale,1)))}
  /* 7 inteligências (.intel) */
  .intel-top b{font-size:max(12.5px, calc(12.5px * var(--tscale,1)))}
  .intel-m{font-size:max(10px, calc(10px * var(--tscale,1)))}
  .intel-top .intel-cv{font-size:max(11px, calc(11px * var(--tscale,1)))}
  .intel-def{font-size:max(12px, calc(12px * var(--tscale,1)))}
  .intel-line{font-size:max(11px, calc(11px * var(--tscale,1)))}
  .intel-arow{font-size:max(12px, calc(12px * var(--tscale,1)))}
  .intel-arow .ia-v{font-size:max(11px, calc(11px * var(--tscale,1)))}
  /* 3 pontos de partida (.prio) */
  .prio-h b{font-size:max(12.5px, calc(12.5px * var(--tscale,1)))}
  .prio-sc{font-size:max(11px, calc(11px * var(--tscale,1)))}
  .prio-r{font-size:max(12px, calc(12px * var(--tscale,1)))}
  .prio-v{font-size:max(11.5px, calc(11.5px * var(--tscale,1)))}
  /* histórico (.hrow) + Sua evolução (.evo) */
  .hrow .fx{font-size:max(11px, calc(11px * var(--tscale,1)))}
  .hrow .fx small{font-size:max(8.5px, calc(8.5px * var(--tscale,1)))}
  .hrow .dt{font-size:max(9px, calc(9px * var(--tscale,1)))}
  .hrow .sc{font-size:calc(13px * var(--tscale,1))}
  .hrow .dl{font-size:max(9px, calc(9px * var(--tscale,1)))}
  .evo-date{font-size:max(10px, calc(10px * var(--tscale,1)))}
  .evo-val{font-size:max(11px, calc(11px * var(--tscale,1)))}
  .evo-drow{font-size:max(11.5px, calc(11.5px * var(--tscale,1)))}
  .faq-q{font-size:max(12.5px, calc(12.5px * var(--tscale,1)))}
  .evo-k{font-size:max(9px, calc(9px * var(--tscale,1)))}
  /* V3a · 5W2H (o conteúdo mais longo da tela; herdado do app.css tanto na leitura do ponto
     quanto no diagnóstico) — faltava na escala. */
  .w2h-lb{font-size:max(8.5px, calc(8.5px * var(--tscale,1)))}
  .w2h-f p{font-size:max(12.5px, calc(12.5px * var(--tscale,1)))}
  .w2h-do li{font-size:max(12.5px, calc(12.5px * var(--tscale,1)))}
  .w2h-const{font-size:max(12px, calc(12px * var(--tscale,1)))}
  /* respostas de um diagnóstico (Etapa 4) */
  .resp-title{font-size:calc(19px * var(--tscale,1))}
  .resp-sub{font-size:max(10px, calc(10px * var(--tscale,1)))}
  .resp-ah h3{font-size:max(12.5px, calc(12.5px * var(--tscale,1)))}
  .resp-sc{font-size:max(11px, calc(11px * var(--tscale,1)))}
  .resp-q{font-size:max(12px, calc(12px * var(--tscale,1)))}
  .resp-a{font-size:max(10px, calc(10px * var(--tscale,1)))}
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   P5 · MOVIMENTO — as caixas que abrem deixam de abrir "secas"  ·  [ENRICK · 24/ago]

   As setinhas JÁ giravam por transição (`.intel-cv` app.css:84, `.evo-cv` :111,
   `.cv` :279), mas cada uma no seu tempo (.18s linear) enquanto a caixa abaixo abria
   de corte. Aqui elas passam a usar a MESMA curva e a MESMA duração da abertura das
   caixas, que é desenhada pelo JS (ver `p5Abre`/`p5Fecha` no app.js). Giro e abertura
   passam a andar juntos.

   ⚠️ DESKTOP-ONLY, e é DIVERGÊNCIA DECLARADA da proposta, que não se escopava. A leva é
   de UI de desktop e o portão é "mobile intocado": pôr isto em `min-width:821px` — a
   mesma fronteira que o `app.css:148` já usa — torna o portão verdadeiro por
   CONSTRUÇÃO, não por amostragem de larguras. Abaixo de 821 nada daqui existe.

   ⚠️ NENHUM SELETOR NOVO. Estas são as três regras que já existiam, com a curva trocada;
   por virem no fim do arquivo, vencem por ORDEM com a mesma especificidade — nada de
   `!important` e nada de classe de andaime (`.p5-*` era do protótipo, não sobe).
   ═══════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  .intel-top .intel-cv,
  .evo-cv,
  .arow .cv{transition:transform .19s cubic-bezier(.2,.8,.3,1), color .19s ease}
}
/* Quem pediu menos movimento não recebe movimento nenhum. Não é convenção nova: o
   produto já respeita esta consulta em três lugares (app.css:576, 622 e 692). O JS lê
   a MESMA consulta e pula a animação inteira; esta regra cobre o giro da setinha. */
@media(min-width:821px) and (prefers-reduced-motion:reduce){
  .intel-top .intel-cv,
  .evo-cv,
  .arow .cv{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   P4 · A BARRA LATERAL QUE COLAPSA  +  P1 · A FOLHA DE PERFIL   ·  [ENRICK · 24/ago]

   ⚠️ TUDO AQUI VIVE EM `min-width:821px`, e isso é o PORTÃO, não organização: a leva é de
   UI de desktop e o aceite combinado é "mobile intocado por CONSTRUÇÃO". Abaixo de 821px
   não existe uma única declaração deste bloco — e a `.sidebar` já é `display:none` lá
   (app.css:341), então nem sequer há elemento para alcançar.
   ═══════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){

  /* ══ P4 · A TRILHA É FIXA, A BARRA FLUTUA ═════════════════════════════════════════
     ⚠️ A DECISÃO CENTRAL, e ela veio de medição da frente do protótipo: o componente de
     origem EMPURRA o conteúdo, e aqui isso significaria refazer o layout da página a 60
     quadros por segundo só porque o ponteiro passou perto — a página carrega o
     instrumento, um SVG de viewBox 778×1417. Pior: transição de propriedade de LAYOUT
     congela junto com o compositor, e com o painel oculto a trilha ficava presa no valor
     inicial PARA SEMPRE, sem estilo inline vencer.
     Saída: a TRILHA da grade fica fixa em 64px e a BARRA flutua por cima ao abrir. O
     conteúdo nunca se mexe, e a animação vira layout de uma subárvore de 8 elementos.
     ⚠️ CUSTO DECLARADO, e é do [ENRICK]: aberta, a barra cobre uma faixa do conteúdo. */
  .shell{grid-template-columns:64px minmax(0,1fr)}

  /* ⚠️ SEM ISTO A TELA DESABA: elemento `fixed` SAI DO FLUXO DA GRADE, e a coluna de
     conteúdo viraria o primeiro item em fluxo, caindo na trilha de 64px. Fixar na
     trilha 2 devolve o lugar dela e mantém os 64px reservados para a barra flutuante. */
  .main-col{grid-column:2}

  /* `top:var(--top-h)` e NÃO o 51 cravado: o `.shell` e a `.sidebar` cravam
     `calc(100vh - 51px)`/`top:51px` (app.css:40,41,179) mas o `.top` MEDE 60,5px —
     10px de erro, medido por duas vias independentes. Como o `.railfoot` é
     `margin-top:auto`, é justamente o PERFIL que cai na faixa invisível em janela baixa.
     O `--top-h` é publicado pelo `setupCollapsibleHeader()` a partir do `offsetHeight`
     real e recalculado no resize. ⚠️ O 51 cravado CONTINUA errado no `.shell` e no
     `#content` — contornado aqui, consertado noutra unidade (está no handoff). */
  .sidebar{position:fixed; left:0; top:var(--top-h,61px); bottom:0; z-index:61;
    width:64px; height:auto; overflow-x:hidden;
    transition:width .18s cubic-bezier(.2,.8,.3,1)}
  .sidebar:hover,.sidebar:focus-within{width:230px; box-shadow:var(--shadow)}

  /* z 61: acima do `.top` (60), com quem nunca divide espaço vertical (a `.shell` começa
     abaixo do cabeçalho). Nenhum degrau novo entra na escada do app.css:400. */

  /* OS RÓTULOS somem por LARGURA, não só por opacidade: com `opacity:0` sozinho eles
     continuariam ocupando espaço e a barra de 64px ganharia rolagem horizontal (a
     `.sidebar` é `overflow-y:auto`, então o `overflow-x` computa `auto`). */
  .nav-item .nm{transition:opacity .14s ease, transform .16s ease; white-space:nowrap}
  .sidebar:not(:hover):not(:focus-within) .nav-item .nm{opacity:0; transform:translateX(-6px);
    width:0; flex-grow:0; flex-basis:0; overflow:hidden; pointer-events:none}
  /* o "translate-x-1" do componente de origem */
  .sidebar:hover .nav-item:hover .nm{transform:translateX(3px)}

  /* as eyebrows de grupo colapsam INTEIRAS — são bloco com padding, e sem isto sobram
     duas faixas vazias na barra fechada. Sem transição de altura: é layout. */
  .side-eyebrow{overflow:hidden; transition:opacity .14s ease}
  .sidebar:not(:hover):not(:focus-within) .side-eyebrow{opacity:0; height:0;
    padding-top:0; padding-bottom:0; margin-top:0}

  /* O ÍCONE. O `.ico` do produto tinha 16px de largura e recebia um glifo de texto; agora
     recebe o SVG do TAB_SVG, que JÁ existia (regra 5: nada de ícone novo). A apresentação
     vem daqui, não de manipulação de string — é o mesmo par contorno/preenchido que o
     rodapé de 5 abas usava. */
  .nav-item .ico{display:flex; align-items:center; justify-content:center}
  .nav-item .ico svg{width:16px; height:16px; display:block;
    fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

  /* O PERFIL NO PÉ. Preso, com o fundo do painel por baixo, para o conteúdo não
     transparecer atrás dele se um dia a lista de rotas crescer e a barra rolar. */
  .railfoot{position:sticky; bottom:0; z-index:1; background:var(--panel)}
  .sidebar:not(:hover):not(:focus-within) .railfoot{justify-content:center; gap:0}
  .sidebar:not(:hover):not(:focus-within) .rf-nm,
  .sidebar:not(:hover):not(:focus-within) .rf-kebab{opacity:0; width:0; padding:0;
    overflow:hidden; pointer-events:none}

  /* ══ P1 · A FOLHA DE PERFIL ═══════════════════════════════════════════════════════
     Substitui a caixa de 186px com 3 links de texto puro. Mostra três coisas, na ordem
     em que se pergunta por elas: QUEM É · COMO SE FALA COM ELA · O QUE DÁ PARA FAZER.
     Nenhum dado novo: `telefone` e `instagram` já vêm no `select` do `route()` e até
     hoje só eram usados na rota `#/perfil`. Nenhuma query, nenhuma RPC.

     ⚠️ `position:fixed` e ancorada na JANELA, não no gatilho — divergência declarada da
     proposta, que usava um posicionador em JS com ponta. Motivo: a `.sidebar` é
     `overflow-y:auto`, então um popover `absolute` lá dentro é RECORTADO na horizontal
     (é o defeito que o `.rf-menu` de hoje tem, app.css:208-209); e um posicionador que
     eu não consigo ver na tela é justamente o que não se deve publicar sem olho. Preso
     ao canto inferior esquerdo, ele funciona com a barra aberta ou fechada.
     ⚠️ A PONTA (`.pf-arrow`) FICA DE FORA pelo mesmo motivo: sem navegador não há como
     conferir se ela encosta no lugar certo. Sem ponta a folha não fica errada; com ponta
     mal colocada, fica.

     z 75: o MESMO degrau do `.rf-menu` que ela substitui (app.css:400). Nenhum número
     novo. O elemento perdeu a classe `.rf-menu` e ficou só com `.pf-pop`, para não
     brigar com o `right:0` da regra antiga — e a `.hdr-menu` do MOBILE segue com a regra
     original dela, intocada. */
  .pf-pop{position:fixed; z-index:75; left:12px; bottom:12px; right:auto; top:auto;
    width:min(272px, calc(100vw - 24px));
    background:var(--panel); border:1px solid var(--line2); border-radius:12px;
    box-shadow:var(--shadow); overflow:hidden; padding:0;
    display:flex; flex-direction:column}
  .pf-pop[hidden]{display:none}
  @keyframes pf-abre{from{opacity:0; transform:translateY(4px) scale(.985)} to{opacity:1; transform:none}}
  .pf-pop:not([hidden]){animation:pf-abre .14s cubic-bezier(.2,.8,.3,1)}

  /* QUEM É */
  .pf-hd{display:flex; align-items:center; gap:11px; padding:12px 13px; border-bottom:1px solid var(--line)}
  .pf-av{flex:none; width:38px; height:38px; border-radius:50%;
    background:var(--seal-bg); border:1.5px solid var(--seal-bd); display:grid; place-items:center;
    font-family:var(--mono); font-size:calc(15px * var(--tscale,1)); font-weight:600; color:var(--seal-ink)}
  .pf-id{flex:1; min-width:0; display:block}
  .pf-nm{display:block; font-family:var(--disp); font-size:calc(14px * var(--tscale,1)); color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .pf-lv{display:block; font-family:var(--mono); font-size:max(8.5px, calc(8.5px * var(--tscale,1))); letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted); margin-top:2px}
  /* O ponto de estado é a MESMA conta do `.av-flag` de hoje (display_name && instagram) —
     não é presença/"online", que não existe neste produto. Aqui ele ganha a legenda que
     faltava: hoje o ponto âmbar aparece sem nada explicando o que ele quer dizer. */
  .pf-st{display:flex; align-items:center; gap:5px; margin-top:5px; color:var(--ok);
    font-family:var(--mono); font-size:max(8.5px, calc(8.5px * var(--tscale,1))); letter-spacing:.06em; text-transform:uppercase}
  .pf-st.pend{color:var(--watch)}
  .pf-st i{flex:none; width:6px; height:6px; border-radius:50%; background:currentColor}

  /* COMO SE FALA COM ELA — a mesma tríade que a migration 014 já decidiu por escrito que
     "são a mesma coisa: como falar com a pessoa". */
  .pf-ct{display:grid; gap:7px; padding:10px 13px; border-bottom:1px solid var(--line)}
  .pf-row{display:flex; align-items:center; gap:9px; min-width:0; font-size:max(12px, calc(12px * var(--tscale,1))); color:var(--muted)}
  .pf-row svg{flex:none; width:14px; height:14px; color:var(--faint);
    fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
  .pf-row span,.pf-row a{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    color:inherit; text-decoration:none}
  .pf-row a:hover{color:var(--gold); text-decoration:underline; text-underline-offset:2px}
  /* o estado vazio é o texto que o `renderPerfil` já usa — nenhuma frase nova */
  .pf-row.vazio span{color:var(--faint)}

  /* O QUE DÁ PARA FAZER */
  .pf-acts{padding:5px}
  .pf-mi{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    background:none; border:none; border-radius:7px; cursor:pointer; text-decoration:none;
    font-family:var(--sans); font-size:max(12.5px, calc(12.5px * var(--tscale,1))); color:var(--ink); padding:9px 10px}
  .pf-mi svg{flex:none; width:15px; height:15px; color:var(--muted);
    fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
  .pf-mi:hover,.pf-mi:focus-visible{background:var(--panel2); color:var(--gold); outline:none}
  .pf-mi:hover svg,.pf-mi:focus-visible svg{color:var(--gold)}
  /* `currentColor` e não `--gold-lo`: assim o anel de foco do "Sair" sai vermelho sozinho,
     sem uma segunda regra que teria de ser mantida em par com a primeira. */
  .pf-mi:focus-visible{box-shadow:inset 0 0 0 1px currentColor}
  .pf-sep{height:1px; margin:4px 6px; background:var(--line)}
  .pf-mi.sai,.pf-mi.sai svg{color:var(--risk)}
  .pf-mi.sai:hover,.pf-mi.sai:focus-visible{background:color-mix(in srgb,var(--risk) 12%,transparent); color:var(--risk)}
  .pf-mi.sai:hover svg,.pf-mi.sai:focus-visible svg{color:var(--risk)}
}
/* quem pediu menos movimento não recebe movimento nenhum — a mesma consulta que o
   produto já respeita em três lugares (app.css:576, 622 e 692). */
@media(min-width:821px) and (prefers-reduced-motion:reduce){
  .sidebar,.nav-item .nm,.side-eyebrow{transition:none}
  .pf-pop:not([hidden]){animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   GEOMETRIA · o instrumento ocupa a tela  ·  [ENRICK · 25/ago, protótipo aprovado]

   REFERÊNCIA: `web/proto/propostas/P6-instrumento.mjs`, commitado em
   `preview/proto-ui-desktop`. Pela regra 1 ele vence a implementação, e CADA regra
   abaixo cita a linha de onde veio. Nada foi arredondado.
   ⚠️ ISTO SUPERA A DECISÃO B: ela dizia "empilhar antes"; o protótipo diz "alargar o
   instrumento". São respostas opostas, e a aprovada olhando foi esta.

   ⚠️ ESCOPADO EM `.instrument-wrap`, E ISSO É O PORTÃO DO ADMIN, não organização.
   O `roda.css` é carregado pelo painel do facilitador, que monta a MESMA `.atlas-roda`
   (D-ADMIN-INSTR). Os dois montam em contêineres diferentes:
       app   → `.instrument-wrap > #meu-atlas-roda`   (app.js:894-896)
       admin → `.diag-rodawrap   > #diag-roda`        (admin.js:668)
   Medido: `instrument-wrap` aparece 1× no `app.js`, e **0×** no `admin.js`, no
   `admin/index.html` e no MARKUP que o `roda.js` injeta. A regra não tem como alcançar
   o painel, e o `roda.css` fica fora do diff.

   ⚠️ AS CLASSES `.p6-*` NÃO SOBEM. Elas eram andaime do protótipo, que não podia
   redefinir seletor do produto. Aqui cada uma vira a regra sobre o elemento real, que é
   o que o próprio módulo previu (P6:319-321).
   ═══════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){

  /* ── 1 · O INVÓLUCRO SAI DO RECUO DO CONTEÚDO ────────────── P6:131-132 (`.p6-wrap`)
     `margin-left:  calc(var(--p6-folga-esq,26px) - var(--p6-recuo,26px))` = 26 − 26 = 0
     `margin-right: calc(-1 * var(--p6-recuo,26px))`                        = −26px
     ⚠️ AS DUAS PAREDES NÃO SÃO IGUAIS, e isso veio de um achado do [ENRICK · 24/ago]
     ("está quase indo pra trás da barra lateral"): à DIREITA a parede é a janela e o card
     pode encostar; à ESQUERDA a parede é a BARRA, que a P4 deixa em 64px mas ABRE para
     230 POR CIMA do conteúdo. Colando dos dois lados, o rail aberto cobria 58% do card da
     Roda. A folga da esquerda é, por isso, o mesmo recuo que a página já usa — e é o que
     mantém o instrumento alinhado com o banner, o miolo de pão e o título.
     ⚠️ O −26 ESPELHA `.content{padding:18px 26px 90px}` (app.css:194). No protótipo esse
     valor era MEDIDO em tempo de execução (`--p6-recuo`, P6:336). Aqui é literal: se o
     recuo do `.content` mudar, ESTA LINHA MUDA JUNTO. */
  .instrument-wrap{margin-left:0; margin-right:-26px}

  /* ── 2 · O HOSPEDEIRO PERDE TETO, MARGEM E RECUO LATERAL ───── P6:136 (`.p6-host`)
     São 129 dos 244px de recuo que o P6 recupera. O teto de 1180px continua escrito no
     `roda.css:551`, intocado — quem o anula é esta linha, e só dentro do app.
     O padding VERTICAL fica (34 em cima, 80 embaixo): só o lateral sai. */
  .instrument-wrap .atlas-roda{max-width:none; margin-left:0; margin-right:0;
    padding-left:0; padding-right:0}

  /* ── 3 · A BARRA DO INSTRUMENTO ENCOLHE ──────────────── P6:182-184 (`.p6-barra`)
     Ela mede 115px e ROUBA ALTURA DIRETO DA FIGURA — é o último bloco antes da grade.
     Quebra em duas linhas porque os 5 grupos somam 1.916px contra ~1.320 disponíveis
     (medição do [DIRETOR], já no handoff). O P6 encolheu os TRÊS que são FOLGA e nenhum
     que é conteúdo: o vão vertical (20→8, e ele só precisava valer na horizontal), o
     padding (8→5) e as margens verticais das barrinhas. Medido lá: 115 → 87px.
     ⚠️ Fonte, altura de botão e o interruptor NÃO mudam — encolher alvo de clique é
     outra conversa e não foi pedido. */
  .instrument-wrap .instr-topbar{padding:5px 10px; row-gap:8px; column-gap:20px;
    margin-bottom:6px}
  .instrument-wrap .instr-topbar > * > div{margin-top:0; margin-bottom:0}

  /* ── 4 · A COLUNA DA RODA ENCOSTA NA PAREDE ────────────────── P6:141 (`.p6-roda`)
     Some só a aresta que não tem mais o que separar; as outras três bordas ficam. */
  .instrument-wrap .atlas-roda .left-col{border-left-width:0;
    border-top-left-radius:0; border-bottom-left-radius:0}

  /* ── 5 · A COLUNA DE LEITURA ENCOSTA NA OUTRA PAREDE ── P6:142-143 (`.p6-leitura`) */
  .instrument-wrap .atlas-roda .right-col{padding-right:0}
  .instrument-wrap .atlas-roda .right-col > *{border-right-width:0;
    border-top-right-radius:0; border-bottom-right-radius:0}

  /* ── 6 · OS TETOS DA FIGURA ───────────────────────────────── P6:152 (`.p6-figura`)
     ⚠️ SÃO TRÊS TETOS, NÃO DOIS — errata do comando, e é o que faz a figura crescer:
         roda.css:22   svg.tree      { max-height: 70vh  }
         roda.css:174  svg.body-view { max-height: 70vh  }
         roda.css:609  svg.body-view { max-width: 452px  }   ← este prende a LARGURA
     Sem o terceiro, a figura ficaria em 452px e o alvo de 620 seria inalcançável.
     Valores LITERAIS do P6:152 (`--p6-fig-larg:620px`, `--p6-fig-alt:112vh`). O `vh` é o
     idioma que o próprio produto já usa nesses tetos, e encolhe sozinho em janela baixa.
     A classe repetida sobe do P6 (P6:101) — o alvo `.atlas-roda svg.body-view` é (0,2,1)
     e a repetição garante a vitória sem depender da ordem de carga dos arquivos. */
  .instrument-wrap .atlas-roda svg.body-view.body-view,
  .instrument-wrap .atlas-roda svg.tree.tree{max-width:min(100%, 620px); max-height:112vh}
}

/* ── 7 · A GRADE REDISTRIBUI — E TEM PISO PRÓPRIO DE 1121px ──── P6:199-200 (`.p6-grid`)
   ⚠️ O PISO NÃO É ARREDONDAMENTO MEU NEM DO P6: veio de uma MEDIÇÃO que pegou uma
   regressão. O produto tem `@media(max-width:1120px)` (roda.css:5) que joga a coluna de
   leitura para a linha de baixo (`grid-column:1/-1`) e deixa a grade em duas colunas.
   Com a regra de três trilhas valendo desde 821, a leitura descia — o `grid-column` do
   produto continua ganhando — mas as TRÊS trilhas ficavam de pé, a terceira vazia.
   Medido no protótipo a 1000px: a coluna do humanoide caía para 282px, contra os ~592
   que o fallback de duas colunas do próprio produto dá. Piorava exatamente o que esta
   leva existe para melhorar.
   Acima de 1120 a grade é nossa; de 1120 para baixo o breakpoint do produto manda,
   intocado — e ainda assim ganha largura, porque as peças 1, 2, 4 e 5 valem nas duas
   faixas.
   As duas laterais estreitam (302→284 e 336→316) e TODO o resto vai para o meio. */
@media(min-width:1121px){
  .instrument-wrap .atlas-roda .main-grid{grid-template-columns:284px minmax(0,1fr) 316px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   B1 · A FONTE DOS MÓDULOS LATERAIS  ·  [MAICK · 25/ago] "aumentar o tamanho da fonte
   nos módulos laterais"
   ═══════════════════════════════════════════════════════════════════════════════════
   ⚠️ ESCRITO AQUI, NÃO NO `roda.css` — de propósito, e é o portão do ADMIN.
   Todas as fontes do instrumento moram no `roda.css`, que o painel do facilitador carrega
   SEM VERSÃO (`?v=`). Tocá-lo obrigaria a provar o admin e a inventar um caminho de cache
   para ele. As 7 peças da geometria já resolveram isso com o mesmo padrão: regra nova no
   `app.css`, escopada em `.instrument-wrap`, vencendo por especificidade. `.instrument-wrap
   .atlas-roda .left-col .ritem` é (0,4,0) contra os (0,2,0) do `roda.css` — vence sem
   depender da ordem de carga dos arquivos.
   ⚠️ ESCOPADO NAS DUAS COLUNAS LATERAIS. Nada do `.center-col` entra: a figura, a barra do
   instrumento e os chips do campo ficam byte a byte como estavam. O pedido é "módulos
   laterais", e é só isso que muda.

   ⚠️⚠️ O ACHADO QUE MUDOU A FORMA DESTA PEÇA — o `--tscale` NÃO ALCANÇA O INSTRUMENTO NO
   DESKTOP. Medido: as regras que multiplicam as fontes do instrumento pelo `--tscale`
   (`roda.css:674-688`) vivem TODAS dentro de `@media(max-width:820px)` — são as levas R3a/R3b,
   que são de trilho. No desktop o A−/A/A+ move o texto do APP, mas o instrumento é imune
   (a única exceção é o `.blbl` dos rótulos DENTRO da figura, `roda.css:199`, sem media).
   CONSEQUÊNCIA: aumentar a base aqui NÃO cria um segundo multiplicador brigando com o
   primeiro — porque no desktop não há primeiro. Por isso estas regras são px, e não
   `calc(base * var(--tscale))`: escrever o `calc` faria o A−/A/A+ passar a mexer no
   instrumento no desktop, que é MUDANÇA DE COMPORTAMENTO NÃO PEDIDA. Fica registrado como
   pergunta no ATLAS-ESTADO, não consertado de carona.

   O FATOR É 1,15 E NÃO FOI INVENTADO: nasceu do antigo degrau "A+" e agora também é a
   base padrão de leitura (`TS_STEPS = [1, 1.15, 1.3]`). Aplicá-lo preserva a
   proporção da escala D2 — "decisão de produto do Maick" (`roda.css:640`) —, que uma
   escolha livre por elemento destruiria. Cada base abaixo traz a linha de onde veio.

   ⚠️ MODO DE FALHA, MEDIDO NO CSS: na lista das 12 áreas o nome é `.ritem .nm{flex:1}`
   (`roda.css:617`), SEM `nowrap`, SEM `text-overflow`, SEM `overflow:hidden`. Portanto texto
   que não cabe QUEBRA EM DUAS LINHAS — não corta o rótulo e não empurra nada para fora da
   coluna. O portão da B ("não pode ser empurrada para fora, nem cortar rótulo") está fechado
   POR CONSTRUÇÃO, em qualquer largura. O que sobra é altura de linha, e isso é olho. */
@media(min-width:821px){
  .instrument-wrap .atlas-roda{--b1:1.15}   /* fator B1 preservado; o controle global continua separado */

  /* ── coluna da Roda (.left-col): cabeçalho + a lista das 12 áreas ── */
  .instrument-wrap .atlas-roda .left-col .wt{font-size:calc(17px * var(--b1) * var(--tscale,1))}        /* roda.css:645 */
  .instrument-wrap .atlas-roda .left-col .wt-seal{font-size:max(calc(10px * var(--b1)), calc(10px * var(--b1) * var(--tscale,1)))}   /* roda.css:644 */
  .instrument-wrap .atlas-roda .left-col .ritem{font-size:calc(12px * var(--b1) * var(--tscale,1))}     /* roda.css:646 */
  .instrument-wrap .atlas-roda .left-col .ritem .v{font-size:calc(11.5px * var(--b1) * var(--tscale,1))}/* roda.css:647 */
  .instrument-wrap .atlas-roda .left-col .ritem .ri-cv{font-size:max(calc(11px * var(--b1)), calc(11px * var(--b1) * var(--tscale,1)))}/* roda.css:622 */

  /* ── coluna de leitura (.right-col): o card do ponto e as áreas da inteligência ── */
  .instrument-wrap .atlas-roda .right-col .rd-kick{font-size:max(calc(8px * var(--b1)), calc(8px * var(--b1) * var(--tscale,1)))}      /* roda.css:99 */
  .instrument-wrap .atlas-roda .right-col .rd-hint{font-size:max(calc(10px * var(--b1)), calc(10px * var(--b1) * var(--tscale,1)))}     /* roda.css:100 */
  .instrument-wrap .atlas-roda .right-col .rd-eyebrow{font-size:max(calc(7.5px * var(--b1)), calc(7.5px * var(--b1) * var(--tscale,1)))} /* roda.css:513 */
  .instrument-wrap .atlas-roda .right-col .rd-title{font-size:calc(15px * var(--b1) * var(--tscale,1))}    /* roda.css:514 */
  .instrument-wrap .atlas-roda .right-col .rd-dl dt{font-size:max(calc(7.5px * var(--b1)), calc(7.5px * var(--b1) * var(--tscale,1)))}   /* roda.css:519 */
  .instrument-wrap .atlas-roda .right-col .rd-dl dd{font-size:max(calc(10px * var(--b1)), calc(10px * var(--b1) * var(--tscale,1)))}    /* roda.css:520 */
  .instrument-wrap .atlas-roda .right-col .rd-n{font-size:calc(26px * var(--b1) * var(--tscale,1))}        /* roda.css:523 */
  .instrument-wrap .atlas-roda .right-col .rd-est{font-size:max(calc(8px * var(--b1)), calc(8px * var(--b1) * var(--tscale,1)))}       /* roda.css:524 */
  .instrument-wrap .atlas-roda .right-col .rd-medlbl{font-size:max(calc(7px * var(--b1)), calc(7px * var(--b1) * var(--tscale,1)))}    /* roda.css:526 */
  .instrument-wrap .atlas-roda .right-col .rd-enc-tx{font-size:max(calc(10.5px * var(--b1)), calc(10.5px * var(--b1) * var(--tscale,1)))} /* roda.css:122 */
  .instrument-wrap .atlas-roda .right-col .ia-n{font-size:max(calc(10px * var(--b1)), calc(10px * var(--b1) * var(--tscale,1)))}        /* roda.css:111 */
  .instrument-wrap .atlas-roda .right-col .ia-v{font-size:max(calc(9.5px * var(--b1)), calc(9.5px * var(--b1) * var(--tscale,1)))}       /* roda.css:112 */
  .instrument-wrap .atlas-roda .right-col .ia-cv{font-size:max(calc(11px * var(--b1)), calc(11px * var(--b1) * var(--tscale,1)))}       /* roda.css:113 */
  .instrument-wrap .atlas-roda .right-col .ia-est{font-size:max(calc(7px * var(--b1)), calc(7px * var(--b1) * var(--tscale,1)))}       /* roda.css:118 */
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   B2 · AS COLUNAS LATERAIS CRESCEM — SÓ ONDE É DE GRAÇA  ·  [MAICK · 25/ago]
   ═══════════════════════════════════════════════════════════════════════════════════
   O PORTÃO É ARITMÉTICO, NÃO UMA PROMESSA: zero pixel de figura perdido em QUALQUER
   largura. O crescimento por lado é exatamente a metade da folga que sobra depois do teto
   da figura — nunca mais do que isso —, então o miolo nunca desce abaixo de 620px.

   ⚠️ O LIMIAR NÃO ESTÁ ESCRITO: ele é DERIVADO, e por isso se conserta sozinho. Não há
   `@media(min-width:1446px)` em lugar nenhum — se o teto de 620, os 284/316, o gap ou o
   padding do centro mudarem um dia, o ponto em que as colunas começam a crescer anda junto,
   sem ninguém lembrar de mexer aqui. Cada termo, com a linha de onde veio:

     100%          a largura do `.main-grid` = o instrumento (peças 1 e 2, acima)
     284px + 316px as duas laterais de hoje ................. app.css (peça 7, logo acima)
     2 × 14px      os dois gaps da grade .................... roda.css:4  (`gap:14px`)
     2×8px + 2×1px padding e borda do `.center-col` ......... roda.css:14
     620px         o teto EFETIVO da figura ................. app.css (peça 6, acima)
                   ⚠️ NÃO é o `452px` do `roda.css:609` — aquele perde por especificidade
                   aqui dentro e só vale FORA do `.instrument-wrap` (admin e trilho).

   Consequência medida da fórmula (derivada, não escrita): as colunas ficam paradas até a
   janela ter ~1356px, crescem proporcionalmente à folga entre ~1356 e ~1446, e travam no
   máximo daí para cima. Em 1280 o X é ZERO — que é o certo, porque lá a figura já está em
   544px, ABAIXO do próprio teto: ela não está travada, está espremida, e não tem gordura
   para ceder.

   O MÁXIMO DE 45px TAMBÉM É DERIVADO, não escolhido no olho: é o mesmo degrau da B1
   (`--b1:1.15`, +15%) aplicado à média das duas laterais — 300px × 0,15 = 45px. Assim a
   caixa cresce na mesma proporção em que o texto dela cresceu, e a lateral continua sendo
   apoio: 284→329 e 316→361. **Este é o único número desta peça que é decisão, e é
   derrubável pelo [MAICK].**

   ⚠️ E ELA DEGRADA PARA O COMPORTAMENTO DE HOJE: a peça 7 continua acima, intacta. Um
   navegador que não entenda `clamp()` ignora a declaração abaixo e fica com 284/1fr/316 —
   exatamente a tela publicada em `3d19701`. */
@media(min-width:1121px){
  .instrument-wrap .atlas-roda .main-grid{
    --b2-folga: calc(100% - (284px + 316px) - (2 * 14px) - (2 * 8px + 2 * 1px) - 620px);
    --b2-x: clamp(0px, var(--b2-folga) / 2, 45px);
    grid-template-columns:calc(284px + var(--b2-x)) minmax(0,1fr) calc(316px + var(--b2-x));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   PERCURSO · a Mentoria na tela de Materiais  ·  [ENRICK · 25/ago]

   ⚠️ SÓ CLASSES NOVAS (`.pc-*`). Nenhum seletor do produto é redefinido — a única
   composta é `.mat-card.pc-off`, que é classe do produto MAIS a minha, e por isso
   alcança só os cartões da vitrine bloqueada, nunca os de quem comprou.
   ⚠️ NÃO escopado por largura, de propósito: os cinco estados valem nas duas
   superfícies, e estas classes não existiam — não há comportamento de mobile a mudar.
   ═══════════════════════════════════════════════════════════════════════════════════ */

.mat-card.pc-off{opacity:.72}
.mat-card.pc-off .btn-cta{background:var(--surface2); color:var(--faint); border:1px solid var(--line2); cursor:not-allowed; filter:none; transform:none}

/* avisos de bloco — carregando · vazio · erro · em produção. A Fase 0 mediu que
   NENHUMA das duas superfícies tinha carregamento por bloco; estes são os primeiros. */
.pc-aviso{display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--surface); margin-bottom:12px}
.pc-aviso b{font-size:calc(13px * var(--tscale,1)); color:var(--ink)}
.pc-aviso span{font-size:max(12.5px, calc(12.5px * var(--tscale,1))); color:var(--muted); line-height:1.55}
.pc-aviso .spin{margin:0}
.pc-erro{border-left:3px solid var(--risk)}
.pc-erro b{color:var(--risk)}
.pc-prod{border-left:3px solid var(--watch)}
.pc-prod b{color:var(--watch)}

/* a barra de progresso do topo */
.pc-barra{margin:0 0 14px}
.pc-bl{font-family:var(--mono); font-size:max(11px, calc(11px * var(--tscale,1))); color:var(--muted); margin-bottom:6px}
.pc-bt{height:6px; border-radius:999px; background:var(--surface2); border:1px solid var(--line); overflow:hidden}
.pc-bt i{display:block; height:100%; border-radius:999px; background:var(--foil)}

/* o palco do vídeo */
.pc-palco{margin:0 0 16px}
.pc-player{position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  background:#000; border:1px solid var(--line)}
.pc-player iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}

/* a árvore: protocolo > grupo > aula */
.pc-proto{border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--surface); overflow:hidden}
.pc-proto.on{border-color:var(--line2)}
.pc-hd{display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:none; padding:12px 14px; min-height:46px;
  color:var(--ink); font-family:var(--sans); font-size:calc(13px * var(--tscale,1)); transition:.15s}
.pc-hd:hover:not(:disabled){background:var(--surface2)}
.pc-hd:disabled{cursor:not-allowed; color:var(--muted)}
.pc-hd2{font-size:max(12.5px, calc(12.5px * var(--tscale,1))); padding:10px 14px 10px 26px; min-height:44px}
.pc-mk{flex:none; width:16px; text-align:center; font-size:max(11px, calc(11px * var(--tscale,1))); color:var(--muted); transition:transform .18s}
.pc-proto.on > .pc-hd .pc-mk,.pc-grupo .pc-hd[aria-expanded="true"] .pc-mk{transform:rotate(90deg)}
.pc-t{flex:1; min-width:0}
.pc-t small{display:block; font-size:max(11px, calc(11px * var(--tscale,1))); color:var(--muted); margin-top:2px}
.pc-c{flex:none; font-family:var(--mono); font-size:max(11px, calc(11px * var(--tscale,1))); color:var(--muted)}
/* a etiqueta de nível ocupa o lugar do contador quando o protocolo não abre —
   "existe, e não é para você ainda". Mesma gramática da `.nivel-pill` do cabeçalho. */
.pc-nv{flex:none; font-family:var(--mono); font-size:max(9px, calc(9px * var(--tscale,1))); letter-spacing:.06em; color:var(--gold);
  border:1px solid var(--gold-lo); border-radius:2px; padding:2px 6px}
.pc-corpo{border-top:1px solid var(--line)}
.pc-grupo + .pc-grupo{border-top:1px solid var(--line)}

.pc-aula{display:flex; align-items:center; gap:8px; padding:4px 14px 4px 30px; border-top:1px solid var(--line)}
.pc-aula.on{background:color-mix(in srgb,var(--gold) 8%,transparent)}
.pc-ok{flex:none; width:22px; height:22px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line2); background:transparent; color:var(--ok);
  font-size:max(12px, calc(12px * var(--tscale,1))); line-height:1; display:grid; place-items:center; transition:.15s}
.pc-ok:hover{border-color:var(--ok)}
.pc-aula.feita .pc-ok{background:color-mix(in srgb,var(--ok) 18%,transparent); border-color:var(--ok)}
.pc-ab{display:flex; align-items:center; gap:10px; flex:1; min-width:0; text-align:left; cursor:pointer;
  background:transparent; border:none; padding:9px 0; min-height:40px;
  color:var(--ink); font-family:var(--sans); font-size:max(12.5px, calc(12.5px * var(--tscale,1)))}
.pc-ab:hover{color:var(--gold)}
.pc-an{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pc-aula.feita .pc-an{color:var(--muted)}
.pc-ad{flex:none; font-family:var(--mono); font-size:max(10px, calc(10px * var(--tscale,1))); color:var(--faint)}

.pc-cta{margin-top:16px; border-color:var(--gold-lo)}

/* alvo confortável onde o ponteiro é grosso — a mesma régua que o app já aplica */
@media(pointer:coarse){.pc-ok{width:26px; height:26px} .pc-hd{min-height:48px}}

/* ═══════════════════════════════════════════════════════════════════════════════════
   ARTE DO PONTO EM TAMANHO AMPLO · `[MAICK · 26/ago]`   (motor: app.js · ligaArteAmpla)
   O bloco é um `.rd-card` IRMÃO do cartão de leitura: herda fundo, borda e raio do
   `roda.css:98` e, no desktop, herda também a aresta direita aberta da geometria
   (`app.css:1035`, `.right-col > *`). Nasce alinhado com os vizinhos POR CONSTRUÇÃO —
   nenhuma regra de cor, borda ou raio precisou ser escrita aqui.
   ⚠️ ISTO NÃO PODE MORAR NO `roda.css`, e não é organização: o painel administrativo
   carrega `roda.css` e `roda.js` SEM VERSÃO (`web/admin/index.html:13` e `:330`) e NÃO
   carrega `app.css` nem `app.js`. Escrever aqui é o que deixa o admin intocado por
   construção — o portão fechado sem depender de ninguém lembrar dele. */
.atlas-roda .arte-ponto{
  /* ⭐ ═══ O BOTÃO DO TAMANHO DA ARTE — mude ESTE número e mais nada ═══
     `--arte-max` é o teto da arte ampliada, nos DOIS eixos (largura e altura). É a única
     coisa que decide o tamanho: o resto do bloco se ajusta sozinho.
     ⚠️ ELE EXISTE PORQUE O NÚMERO VAI MUDAR DE NOVO. Já mudou uma vez em poucas horas
     (`[ENRICK · 26/ago]`: "diminuir um pouco, está muito grande") e o `[MAICK]` ainda não
     viu. Trocar tem de ser um número, num lugar só, sem procurar.
     MEDIDO ANTES (sem teto, a arte ocupava a coluna inteira):
       · desktop ≥1121px ... 299px (coluna de 316) a 344px (com os 45 da B2)
       · desktop 821-1120 ... ~919px — ali a coluna de leitura ocupa a GRADE INTEIRA
         (`roda.css:5`, `.right-col{grid-column:1/-1}`), e era o pior caso, não o de 1280
       · celular 390px ..... ~302px (a leitura é página inteira do trilho)
     `[SESSÃO · ponto de partida, DERRUBÁVEL]` 200px: enquanto a arte for tão alta quanto a
     coluna é larga, ela vira o assunto da coluna — e o assunto da coluna é a leitura. */
  --arte-max:200px;
  padding:8px; margin-top:4px}
.atlas-roda .arte-ponto[hidden]{display:none}
.atlas-roda .arte-ponto .spin{margin:18px auto}
/* A arte ocupa a largura que houver, até o teto, e guarda a proporção sozinha
   (`preserveAspectRatio="xMidYMid meet"`, escrito no SVG). ⚠️ O `object-fit:contain` NÃO é
   enfeite: com `width:100%` e o teto mordendo, a caixa do `<img>` deixa de respeitar a
   razão intrínseca — sem ele a arte ESTICA. */
.atlas-roda .arte-ponto .arte-img{display:block; width:100%; height:auto;
  max-width:var(--arte-max); max-height:var(--arte-max); margin:0 auto; object-fit:contain}
@media(max-width:820px){
  /* ⚠️ O CELULAR FICA COMO ESTAVA, e o `52vh` é o MESMO teto que já vigorava aqui — não é
     número novo. Lá a leitura é PÁGINA INTEIRA do trilho (o `initDoca` move o cartão para
     ela): a arte mede ~302px numa tela de 390, proporcional à página, sem disputar coluna
     nenhuma. O retorno veio de quem olhou o DESKTOP, e o portão da leva é "não mexa nas duas
     superfícies sem medir as duas".
     PROVA DE QUE O CELULAR NÃO SENTE, em retrato (390x844): 52vh = 438,9px, e a largura já
     estava presa em ~302px pela coluna — então o `max-width` novo NUNCA morde, e o
     `max-height` é o mesmo de antes. Idêntico por aritmética, não por semelhança.
     ⚠️ DIVERGÊNCIA DECLARADA, e é só ela: em celular DEITADO (altura ~390) o `52vh` passa a
     limitar também a largura, e a arte fica menor do que ficava. Superfície não testada, e o
     efeito é encolher — nunca esticar nem cortar. */
  .atlas-roda .arte-ponto{--arte-max:52vh; padding:10px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   DIAGNÓSTICO EM DUAS FILEIRAS · o par âncora   `[ENRICK · 27/ago]` `[SESSÃO · forma]`
   *"ficar os itens em 2 fileiras. Ex.: 7 Inteligências | 12 áreas da vida"*

   ⚠️ SÓ CSS, E É ISSO QUE MANTÉM O CELULAR E O `#/atlas` FORA DO DIFF. Os onze painéis já são
   FILHOS DIRETOS do `#content` (o `diagCorpoHtml` é interpolado no mesmo template literal),
   então a grade não precisa de invólucro, e nenhum painel é movido no DOM: a ordem
   doutrinária fica intocada e só a COLOCAÇÃO muda. Forma, não ordem.

   ⚠️ A ROTA SE IDENTIFICA SEM UMA LINHA DE JS. `.diag-hero` é emitido num lugar só
   (`app.js`, dentro do `diagCorpoHtml`), e o `diagCorpoHtml` só roda sob `fusaoDesk`
   (`!ehTrilho() && routeOf()==="diagnostico"`). Logo `#content:has(> .diag-hero)` é
   EXATAMENTE "desktop em #/diagnostico", e nada mais. Sem `:has()` nada disto se aplica e a
   tela é a de hoje — degrada para o estado anterior, como a rodada B.

   ⚠️ POR QUE ESTE PAR, E SÓ ELE. Medido: dos onze painéis, só cinco NÃO REFLUEM ao ter a
   largura dividida (são listas de nome e número, não prosa) — e prosa pela metade CRESCE, o
   que gastaria rolagem em vez de poupar. Os dois maiores dentre os que não refluem são
   justamente os que o `[ENRICK]` nomeou, e são DUAS LEITURAS DO MESMO DADO: uma por área,
   outra pelo agrupamento que as inteligências fazem das áreas. Lado a lado, os dois cortes
   se leem de uma vez.
   ⚠️ O OUTRO PAR CANDIDATO (`.summary` | `.diag-hero`) CAIU NA MEDIÇÃO: os dois repetem
   TRÊS campos — o selo `M{n}`, o nome da faixa e a média geral MOS. Lado a lado, o mesmo
   número duas vezes na mesma linha do olho. Ficam empilhados como hoje, e a repetição virou
   pergunta ao `[MAICK]`, não conserto desta sessão.

   ⚠️ `#diag-areas` À ESQUERDA, `#atlas-intel` À DIREITA `[ENRICK]`: o olho desce pela margem
   esquerda, então ele desce pelas doze áreas e chega ao raio-x sem passar pelo painel vivo
   no caminho. Reduz a colisão sem mover conteúdo nenhum.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* O limiar é DERIVADO, não escrito à mão. A linha mais larga do par é a do `#atlas-intel`:
   ícone + "Inteligência Intelectual" (12,5px) + a etiqueta `limitante` + "Em desenvolvimento
   · 6.50" (10px mono) + a seta ≈ 440px. A metade disponível é (janela − 64 do rail − 52 do
   recuo do `.content` − 16 do vão) / 2. Igualando: janela ≥ 2×440 + 116 + 16 = 1012px.
   Abaixo disso não há grade nenhuma e a tela volta a ser a de hoje, na ordem do DOM. */
@media(min-width:1012px){
  #content:has(> .diag-hero){display:grid; grid-template-columns:1fr 1fr;
    /* ⚠️ VÃO SÓ NA HORIZONTAL. O vertical continua vindo do `margin-top:16px` que os painéis
       já trazem no markup — com `row-gap` o espaçamento viraria 32px e o ritmo da página
       mudaria inteiro, que é mexer no que ninguém pediu. */
    column-gap:16px; row-gap:0;
    /* cada painel guarda a PRÓPRIA altura em vez de esticar até o mais alto da fileira, e as
       fileiras não se esticam para preencher a altura do contêiner. */
    align-items:start; align-content:start}
  /* o padrão é o de hoje: fileira inteira. Só os dois do par saem dele. */
  #content:has(> .diag-hero) > *{grid-column:1 / -1}
  #content:has(> .diag-hero) > #diag-areas{grid-column:1}
  /* ⚠️ O `order` É O QUE DISPENSA MEXER NO TEMPLATE. O `#atlas-intel` vem ANTES do
     `#diag-areas` no DOM (e continua vindo — a ordem doutrinária não mudou). Estas três
     linhas reordenam só a COLOCAÇÃO: tudo que vem depois das áreas é empurrado para depois
     do painel vivo, e o vivo cai na coluna 2 da mesma fileira das áreas. */
  #content:has(> .diag-hero) > #atlas-intel{grid-column:2; order:1}
  #content:has(> .diag-hero) > #diag-areas ~ *{order:2}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   DIAGNÓSTICO · A MEDIDA DO TEXTO   `[ENRICK · 27/ago]` `[SESSÃO · medido]`
   O incômodo era LINHA LONGA, não espaço vazio. Medido antes de escrever, painel a painel:
   a prosa desta rota roda a **176–200 caracteres por linha em 1280** e **278–316 em 1920**,
   contra a faixa legível de 45–75 e o limite de ~90 em que o olho perde o começo da linha
   seguinte. Dois a quatro vezes o teto, na página inteira — e NENHUM dos onze painéis tinha
   limite de texto (varredura completa do `app.css`: os únicos `max-width` do arquivo são o
   `.who`, o `.maf-pop`, o `.prof`, a roda no mobile e o lightbox da marca).

   ⭐ ═══ O BOTÃO DA MEDIDA — mude ESTE número e mais nada ═══
   `--medida` é a largura máxima do TEXTO CORRIDO. Em `ch`, não em pixels, e isso não é
   estilo: `ch` é a largura do "0" na fonte DO PRÓPRIO ELEMENTO, então UM número serve os
   quatro tamanhos que a rota usa (11 · 11,5 · 12 · 12,5px) sem quatro pixels escritos à mão.
   `[SESSÃO]` começa em **75ch** — o topo da faixa ideal. ⚠️ AFROUXAR ATÉ ~85ch É NEGOCIÁVEL
   se a página ficar comprida demais no olho do `[ENRICK]` (cada 10ch a mais encolhe a prosa
   em ~12%). VOLTAR PARA OS ~180 DE HOJE NÃO É.

   ⚠️ SÓ NOS ELEMENTOS DE PROSA. Lista, barra, contador, selo, título e botão NÃO têm medida
   — não são texto corrido e o teto não se aplica a eles. Os nove seletores abaixo são a
   lista inteira de prosa da rota; as outras classes ficam intocadas por não estarem aqui.
   ⚠️ Nos dois que são CAIXA (`.vitoria`, `.w2h-const`) o teto prende a caixa, então o texto
   dentro fica ~26px mais estreito que os demais — alinhado com eles pela borda esquerda, que
   é o que o olho segue.
   ⚠️ `#content:has(> .diag-hero)` já é "desktop em #/diagnostico" por construção (a
   `.diag-hero` só é emitida pelo `diagCorpoHtml`, que só roda sob `fusaoDesk`). O
   `min-width:821px` está aqui para tornar "só desktop" LEGÍVEL no arquivo, não por dúvida.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  #content:has(> .diag-hero){--medida:75ch}
  #content:has(> .diag-hero) .lead,
  #content:has(> .diag-hero) .hint,
  #content:has(> .diag-hero) .intel-line,
  #content:has(> .diag-hero) .intel-def,
  #content:has(> .diag-hero) .prio-r,
  #content:has(> .diag-hero) .prio-v,
  #content:has(> .diag-hero) .vitoria,
  #content:has(> .diag-hero) .w2h-const,
  #content:has(> .diag-hero) .w2h-do li{max-width:var(--medida)}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   DIAGNÓSTICO · OS PARES, AGORA COM AS ALTURAS MEDIDAS   `[ENRICK · 27/ago]`

   ⛔ HISTÓRICO, PARA NINGUÉM REFAZER O ARRANJO VELHO: em 27/ago subiram três pares que
   emparelhavam o painel MAIS ALTO com o MAIS BAIXO — as três vezes. Os prints do `[ENRICK]`
   mostraram vazios de **590px, 254px e 294px**: não eram folgas, eram buracos de meia tela, e
   quem olha acha que a página quebrou. Foram desfeitos no mesmo dia.
   ⚠️ A aritmética que os justificava continua correta (`max(A,B) ≤ A+B`: emparelhar nunca
   custa altura). Foi a CONCLUSÃO que estava errada — vazio de meia tela é pior que página
   mais longa, e "é reversível" descreve o conserto, não o custo de ter ido ao ar.

   ⭐ O ARRANJO ATUAL SAI DAS ALTURAS MEDIDAS NOS PRINTS, não de suposição:
       3 pontos de partida ~1465  ·  raio-x das 7 ~795  ·  sua evolução ~500 (com 9 diagnósticos)
       protocolo matinal 414      ·  próximo passo 206  ·  encaminhamento 160
   Os DOIS GIGANTES ficam sozinhos, que é o que o tamanho deles pede; os QUATRO MENORES formam
   dois pares quase da mesma altura. **Nenhum vazio acima de ~86px** (contra 590 no arranjo
   anterior).
   ⚠️ A "sua evolução" CRESCE com o número de diagnósticos da pessoa. Otimizado para o caso com
   MAIS conteúdo (o print tem nove); quem tiver um ou dois verá esse par mais desigual. Não dá
   para otimizar os dois ao mesmo tempo.

   ⚠️ UMA ÚNICA MUDANÇA DE POSIÇÃO, e ela tem argumento de conteúdo: o PROTOCOLO MATINAL desce
   para o fim, ao lado da "sua evolução". É o painel que a própria sessão classificou como
   APOIO — *"base transversal, aplica-se às 12 áreas; é constante, não depende do diagnóstico
   dela. Consulta-se, não se percorre."* Material de consulta ao lado do histórico é onde ele
   pertence. Nenhum outro painel muda de lugar.

   ⚠️ POR QUE TODO SELETOR PASSA POR `#diag-areas ~`: não é enfeite, é ESPECIFICIDADE. A regra
   `#content:has(> .diag-hero) > #diag-areas ~ *{order:2}` do bloco de 1012px vale (2,1,0) e
   venceria um `> .w2h-proto{order:3}`, que vale (1,2,0) — id domina classe. Passando pelo
   `#diag-areas ~` os dois lados ficam com dois ids e a classe extra decide. Sem isso o
   `order` novo é silenciosamente ignorado.

   ⚠️ Os dois painéis sem classe são agarrados pelo CONTEÚDO: o raio-x é o único `.panel` com
   `.intel` que não é o `#atlas-intel`; o dos 3 pontos é o único com `.prio`.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:1146px){
  /* os DOIS GIGANTES em fileira inteira, explícito e não por omissão */
  #content:has(> .diag-hero) > #diag-areas ~ .panel:has(.intel):not(#atlas-intel){grid-column:1 / -1}
  #content:has(> .diag-hero) > #diag-areas ~ .panel:has(.prio){grid-column:1 / -1}
  /* par A · encaminhamento (160) | próximo passo (206) — vazio medido: 46px */
  #content:has(> .diag-hero) > #diag-areas ~ .diag-encaminhamento{grid-column:1}
  #content:has(> .diag-hero) > #diag-areas ~ .next-step{grid-column:2}
  /* par B · protocolo matinal (414) | sua evolução (~500) — vazio medido: ~86px.
     O `order` é o que desce o protocolo para o fim sem tocar no template. */
  #content:has(> .diag-hero) > #diag-areas ~ .w2h-proto{grid-column:1; order:3}
  #content:has(> .diag-hero) > #diag-areas ~ .evo{grid-column:2; order:4}
}


/* ═══════════════════════════════════════════════════════════════════════════════════════
   RAIO-X DAS 7 INTELIGÊNCIAS · DUAS COLUNAS **DENTRO DO BLOCO**  `[MAICK]` `[ENRICK · 27/ago]`

   ⛔ A CORREÇÃO QUE ESTE BLOCO REPRESENTA, e ela vale mais que o CSS: o pedido sempre foi
   DENTRO do bloco, não entre blocos. O `[MAICK]` escreveu na primeira mensagem — *"o que está
   em 1 bloco, dividir a tela em 2 NO MESMO BLOCO"* — e o `[ENRICK]` repetiu — *"não está lado
   a lado os ITENS"*. Cinco rodadas de "duas colunas de painéis" responderam a uma pergunta que
   ninguém fez. **As palavras do cliente eram a especificação.**

   ⭐ E ISSO EXPLICA O SINTOMA QUE JÁ TINHA SIDO MEDIDO E MAL LIDO: as barras deste painel iam
   de 846 a 1205px e o nome da inteligência ficava a ~1400px do número que o descreve. Foi
   diagnosticado como "linha esticada" e tratado com o teto `--medida`. **Era a mesma causa:
   uma lista de sete itens numa coluna só, dentro de um bloco largo demais para ela.** Em duas
   colunas a barra encurta e o número volta para perto do nome — sem regra de largura nenhuma.

   ⚠️ POR QUE `columns` E NÃO `grid`: em fluxo de colunas a leitura **desce** pela coluna 1 e
   recomeça na 2 (itens 1–4 à esquerda, 5–7 à direita), que é como se lê lista ordenada. Uma
   grade colocaria os itens alternando esquerda-direita e quebraria a comparação entre vizinhos.
   O `column-span:all` no `h2` e no `.cap` mantém o cabeçalho por cima das duas colunas, e o
   `break-inside:avoid` impede que um item se parta ao meio.

   ⚠️ ESTE É O ÚNICO DOS SEIS QUE SOBE AGORA, e o motivo é medido: **é o único que não
   expande**. Nos que expandem (`#atlas-intel`, `#diag-areas`, `.evo`) o balanceador do
   multicol **redistribui as colunas quando um item cresce**, e o item que a pessoa acabou de
   tocar pode pular de coluna. Duas colunas que pulam ao toque são piores que uma coluna longa.

   ⚠️ ALTURA: 7 itens × 98px + 109px de cabeçalho = **795px** (medido nos prints do `[ENRICK]`).
   Em 4 + 3 → 109 + 4×98 = **501px**. **Economia de 294px, e nenhum item cresce**: o
   `.intel-line` já está preso pelo `--medida` (413px a 11px), e a meia coluna tem ~545px —
   o teto continua mandando, então a contagem de linhas de cada item não muda.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:1146px){
  #content:has(> .diag-hero) > #diag-areas ~ .panel:has(.intel):not(#atlas-intel){
    columns:2; column-gap:24px}
  #content:has(> .diag-hero) > #diag-areas ~ .panel:has(.intel):not(#atlas-intel) > h2,
  #content:has(> .diag-hero) > #diag-areas ~ .panel:has(.intel):not(#atlas-intel) > .cap{
    column-span:all}
  #content:has(> .diag-hero) > #diag-areas ~ .panel:has(.intel):not(#atlas-intel) .intel{
    break-inside:avoid}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C1 · O BLOCO SUPERIOR CEDE FOLGA — E SÓ FOLGA  ·  [MAICK · item 3] "aproveitar melhor o
   bloco superior"
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⚠️ ESTA LEVA NÃO É O ITEM 4 DISFARÇADO. Ela NÃO move o instrumento e NÃO toca nos tetos da
   figura (`112vh` e `max-width:620px` seguem intactos, peça 6). Ela tira folga de quem está
   ACIMA dele. O item 4 ("subir o módulo") continua PARADO: a medição provou que ele não
   resolve o corte — a figura já fica 108px fora da tela em 900 e 49px em 1080 com cromo ZERO.

   ⭐ A REGRA QUE DEFINIU O ESCOPO: **só cede FOLGA, nada cede INFORMAÇÃO.** Entra `padding`,
   `margin` e altura fixa maior que o conteúdo. NÃO entra remover texto, esconder elemento,
   encolher fonte nem fundir peças. **Ninguém perde uma palavra nesta leva.**

   ⭐ O GANHO É DERIVÁVEL E NÃO PRECISA DE NAVEGADOR, e é por isso que ele pôde ser somado
   antes de subir: todos os valores abaixo estão declarados em **px**, não em `vh`/`%`/`em`.
   Logo **o ganho é o MESMO em 900 e em 1080** — 40px nas duas. O que ainda depende do
   Chromium é o ABSOLUTO (em que pixel o instrumento passa a começar), e isso é a medição
   `docs/medicoes/2.3-dobra-atlas-desktop.js`, que segue pendente.

   A CONTA, peça por peça — cada linha diz de onde o valor antigo veio:

     .top            padding 12→9  (×2 lados) ........ 6px   app.css:21
     .viewhead       padding 13/11→9/8 ............... 7px   app.css:186
     .summary        padding 13→10 (×2 lados) ........ 6px   app.css:225
     .summary .s-big margin-top 10→6 ................. 4px   app.css:232
     .inst-selo      margin-bottom 8→5 ............... 3px   app.css:237
     .instrument-wrap margin-top 6→2 ................. 4px   app.css:236
     .instr-topbar   margin-bottom 6→4 ............... 2px   app.css:1029 (JÁ era 6, não 10)
     .main-grid      margin-top 4→0 .................. 4px   roda.css:4
     .center-col     padding-top 8→4 ................. 4px   roda.css:14
                                                      ────
                                              TOTAL = 40px

   ⚠️ O QUE FICOU DE FORA, E POR QUÊ — as duas só cedem INFORMAÇÃO:
   · o **breadcrumb** do `.viewhead`. É a peça mais barata em pixels e o produto já a considera
     redundante no mobile (`app.css:359` a oculta porque "o título já basta"). **Mas ocultar um
     elemento é tirar informação da tela, e a regra desta leva proíbe.** Fica como proposta para
     o `[MAICK]`, não como conserto.
   · **encolher a fonte** de qualquer peça. Legibilidade é informação.
   E uma terceira ficou de fora por não ser derivável: a `.layer-bar` (`roda.css:15`) parecia
   ceder 6px de margem, mas ela vive **DENTRO da `.instr-topbar`** (`roda.js` MARKUP), num flex
   row — a margem dela só viraria altura se ela fosse o item mais alto da linha, e isso o CSS
   não responde. **Tirada da conta em vez de estimada.**

   ⚠️ O `.top` É GLOBAL: ele aparece em TODAS as rotas do desktop, não só no `#/atlas`. Os 6px
   valem em todas. O mobile NÃO sente — `app.css:342` já sobrescreve `.top` com `padding:9px
   14px` dentro do `@media(max-width:820px)`, e este bloco inteiro vive em `min-width:821px`.

   TUDO POR SOBRESCRITA, NADA REESCRITO NO LUGAR: as regras originais continuam onde estavam,
   e este bloco vence por vir depois (mesma especificidade) ou por ser mais específico (os dois
   alvos do `roda.css`, que continua FORA do diff). Reverter = apagar este bloco.

   ⏳ DEVICE-TEST OBRIGATÓRIO, e é o risco desta leva: folga tirada demais vira texto encostado
   na borda. Os valores residuais foram deixados generosos de propósito — nenhum padding caiu
   abaixo de 4px, e os dois painéis com texto ficaram em 9px e 10px. Mas isso o olho confirma,
   não a aritmética. Entra no `CHECKLIST-prontidao-acumulada` como item próprio.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  .top{padding:9px 20px}
  .viewhead{padding:9px 26px 8px}
  .summary{padding:10px 15px}
  .summary .s-big{margin:6px 0 2px}
  .inst-selo{margin:2px 0 5px}
  .instrument-wrap{margin-top:2px}
  .instrument-wrap .instr-topbar{margin-bottom:4px}
  .instrument-wrap .atlas-roda .main-grid{margin-top:0}
  .instrument-wrap .atlas-roda .center-col{padding:4px 8px 8px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C2 · O BREADCRUMB SAI DO DESKTOP  ·  [MAICK · item 3, via DIRETOR] — a decisão que o
   mobile já tinha tomado
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⚠️ NÃO É TIRAR INFORMAÇÃO, É COERÊNCIA. O `app.css:359` já oculta este mesmo breadcrumb no
   mobile, com o motivo escrito na linha: *"breadcrumb redundante no mobile (o título já
   basta)"*. Ele repete, em 8px, a palavra que o `<h1>` ao lado dele diz em 19px. Aplicar no
   desktop a decisão que o projeto já tomou no mobile não acrescenta juízo novo — remove uma
   divergência entre as duas superfícies.

   MEDIDO no navegador desta sessão (bancada `docs/medicoes/2.4-bancada-atlas.html`):
   devolve **13px** — 12 de altura + 1 de `margin-top` (`app.css:26`).

   ⚠️ NO MOBILE NADA MUDA: lá ele já estava oculto desde a leva do trilho. E a SAÍDA do Atlas
   não se perde — no mobile o `.crumb-exit` é a saída clicável e continua exatamente como
   estava, porque esta regra vive em `min-width:821px`.

   ⛔ O QUE NÃO SUBIU JUNTO, E ESTÁ MEDIDO NO §0.7: o teto de altura da figura. A condição de
   parada do comando reprovou — a 900 o DESENHO ficaria com 302,3px de largura contra os 316px
   da coluna direita. Figura que perde a hierarquia é defeito pior que o corte.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  .viewhead .crumb{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C3 · O HUMANOIDE CABE — ACIMA DO LIMIAR MEDIDO  ·  [MAICK] "o humanoide está sendo
   cortado ao abrir"
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⭐ O LIMIAR NÃO FOI ESCOLHIDO — SAIU DA MEDIÇÃO (bancada `docs/medicoes/2.4-*`, Edge
   headless, viewport fixado por CDP). A condição de parada do `[DIRETOR]` era: o DESENHO tem
   de ficar mais largo que a coluna direita (316px). Varredura a 1280 de largura:

       altura 900 → desenho 287,4px   ⛔ abaixo de 316
       altura 952 → desenho 316,0px   ⛔ EMPATA, não passa
       altura 953 → desenho 316,5px   ✅ primeiro que passa

   Por isso `min-height:953px`. Abaixo dele **nada muda** e o `112vh` continua mandando.

   ⚠️ O DESENHO NÃO É A CAIXA. O `<svg class="body-view">` não declara `preserveAspectRatio`,
   então vale `xMidYMid meet`: quando a ALTURA limita, a caixa mantém a largura e o desenho é
   centralizado dentro dela. `getBoundingClientRect` devolve a CAIXA; o número que decide é o
   DESENHO = altura ÷ 1,8213 (a razão do `viewBox` `-118 -56 778 1417`).

   ⚠️ OS 377px SÃO O CROMO MEDIDO (376,5 arredondado para cima) — cabeçalho + faixa "Meu
   Atlas" + banner da limitante + selo + barra de controles, com o breadcrumb JÁ fora (C2).
   ⛔ SE O CROMO MUDAR, ESTE NÚMERO PRECISA SER MEDIDO DE NOVO — ele é a única peça desta
   regra que não se conserta sozinha. Rodar a bancada 2.4 responde em um minuto.

   PROVA DAS DUAS FAIXAS (medida, não deduzida):
     ACIMA  953 → cabe (−0,5px), desenho 316,3   ·  1000 → desenho 342,1  ·  1080 → 386,0
     ABAIXO 768 → `max-height` 860,16px (=112vh) ·  900 → 1008px  ·  952 → 1066,24px
            caixa 860,2 / 936,2 / 936,2 — IDÊNTICAS ao estado sem esta regra.

   ⚠️ SÓ O `body-view`. A vista Árvore isolada saiu do produto (B7, `roda.js:1232` abre em
   `corpo`), e a queixa do `[MAICK]` nomeia o humanoide. O `svg.tree` fica com o teto de antes.
   ⛔ `max-width:min(100%, 620px)` INTOCADO — em 1280 quem limita a largura é a coluna (532px),
   não o teto de 620.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* ⛔ A REGRA DESTE BLOCO FOI APOSENTADA EM 01/set — o C4, no fim do arquivo, faz o mesmo com o
   cromo NOVO (a faixa saiu): limiar 953 → 895 e teto `100vh − 377px` → `100vh − 319px`.
   Deixar as duas vivas faria o arquivo discordar de si mesmo — duas constantes de cromo, e a
   segunda vencendo por ordem. O texto acima fica porque explica COMO o limiar se mede; a
   regra saiu para haver uma fonte só. Ver o C4. */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C4 · A FAIXA SAI DO ATLAS · O 3D PASSA A CABER · O LIMIAR CAI  ·  [HENRIQUE · 01/set]
   ═══════════════════════════════════════════════════════════════════════════════════════
   PEDIDO, na letra dele: "tirar a faixa do topo escrita Atlas com os controles de tamanho de
   fonte, e alocar os controles de fonte, temporariamente, no painelzinho de controle" · "o
   humanoide, principalmente o 3D, aparece cortado ao entrar".

   ── 1 · A FAIXA SAI, E SÓ NA ROTA DO ATLAS ──────────────────────────────────────────────
   ⚠️ SÓ NO ATLAS, e o motivo é duro: o `A−/A/A+` é da PÁGINA e vive nesta faixa em TODAS as
   rotas. Escondê-la em todas apagaria o controle de quatro telas que não têm barra de
   instrumento para hospedá-lo — seria "controle removido", pior que controle fora do lugar.
   O seletor usa o mesmo `:has` que o arquivo já usa para o Diagnóstico (peça do `--medida`):
   a `.instrument-wrap` só existe na rota do Atlas, por construção (`app.js`, `comInstrumento`).
   ⚠️ O controle em si é MOVIDO por JS para a barra (`app.js`, `moveTsParaBarra`) — não é
   recriado, e a escuta vai junto. Ver o comentário lá, que explica por que a delegação é
   repetida em vez de o `app.js:666` ser tocado.

   ── 2 · O 3D OBEDECE À ALTURA, COMO O 2D JÁ OBEDECE ─────────────────────────────────────
   ⛔ A REGRA DE ONTEM NÃO ALCANÇAVA O 3D — ela mira `svg.body-view`. O campo é outro elemento,
   e o que o prendia era `min-height:700px` + `aspect-ratio:466/700` (`roda.css:208`): 772,1px
   FIXOS em qualquer altura de janela, 248,6px fora da tela a 900. `min-height` VENCE
   `max-height`, então soltar o piso é obrigatório — não basta pôr um teto.
   ⭐ E NÃO PRECISOU ENTRAR NO `roda.css`: a regra é escopada em `.instrument-wrap`, que aparece
   **1× no `app.js` e 0× no `admin.js`/`admin/index.html`** (medido). A especificidade (0,3,0)
   vence a do produto (0,2,0) sem tocar no arquivo compartilhado.
   ⚠️ PROVA DO ADMIN, feita antes de escrever esta regra: o painel do facilitador NÃO alcança o
   campo. Ele monta o instrumento (`admin.js:760`), mas o `admin/index.html` esconde
   `.atlas-roda .instr-topbar` com `display:none!important` (commit `0960a24`), e os `.view-btn`
   que trocam para "Campo toroidal 3D" vivem DENTRO dessa barra (`roda.js:157`). Sem ela não há
   como chegar ao campo, e ele nasce `style="display:none"` (`roda.js:246`). O portão do
   `roda.css` não protegia nada aqui — e mesmo assim ele não foi aberto.
   ⚠️ O 3D acompanha a caixa sem distorcer: `campo3d.js:381` recalcula `cam.aspect` no resize.

   ── 3 · ⛔ O TETO DE ALTURA DA FIGURA 2D SAIU EM 01/set — E NÃO VOLTA SEM RÉGUA NOVA ────
   Existiu por um dia (limiar 953, depois 895, depois 953 de novo) e **foi removido por decisão
   do `[DIRETOR]`, com a medição na mão.** O que o matou:

   **O portão que o justificava era um PROXY, e o proxy falhou.** A regra era *"o desenho tem de
   ser mais largo que a coluna direita (316px)"* — substituto de *"a figura ainda funciona como
   instrumento"*. Medido: a 895 o portão PASSA e **os nomes das Sephirot ficam ilegíveis**.
   ⭐ **O piso não é a largura do desenho: é o tamanho do RÓTULO na tela.** O `.blbl` é
   `font-size:12px` em unidades de `viewBox`, então vale `12 × escala` — e a escala cai junto
   com a figura. Medido, a 1280 de largura:
       original (sem teto) .. caixa 936,2 · escala 0,661 · rótulo **7,93px** · LÊ-SE
       teto a 1080 ......... caixa 761   · escala 0,537 · rótulo **6,44px** · quase
       teto a 1000 ......... caixa 681   · escala 0,481 · rótulo **5,77px** · NÃO
       teto a  953 ......... caixa 634   · escala 0,447 · rótulo **5,37px** · NÃO
   **Nenhuma altura passava.** Uma regra que só pode escolher entre *cortado* e *inteiro e
   pequeno demais* — e o segundo é o PIOR dos três estados — não sobe de valor.

   ⚠️ O INSTRUMENTO TEM TRÊS ESTADOS, NÃO DOIS: **cortado**, **inteiro e legível**, **inteiro e
   pequeno demais para servir**. Corte a pessoa entende e rola; **painel vazio ela acha que
   quebrou.**

   ⛔ **NÃO REINTRODUZA UM TETO DE ALTURA NA FIGURA sem antes desacoplar o rótulo da escala.**
   Enquanto o `.blbl` depender do `viewBox`, encolher a figura apaga a doutrina — e é a doutrina
   que faz o instrumento servir.

   ── 4 · O QUE FICOU NESTE BLOCO, E POR QUE ──────────────────────────────────────────────
   ⚠️ **DIVERGÊNCIA DECLARADA `[SESSÃO · 01/set]`:** o comando mandava sumir com o `@media` de
   altura inteiro. **O `@media` hospedava DUAS regras**, e o argumento que matou a primeira **não
   alcança a segunda**: o `.campo-wrap` é um **canvas**, não tem rótulo preso ao `viewBox`, e
   encolhê-lo **não apaga texto nenhum**. Tirá-lo devolveria o 3D ao corte de 248,6px a 900 —
   desfazendo, sem argumento, um pedido do `[HENRIQUE]` que está medido e funcionando.
   **Por isso só a regra da figura saiu.** Se a intenção era tirar as duas, é uma linha.
   ⚠️ OS 319px SÃO O CROMO MEDIDO. Se o cromo mudar, remedir: bancada `docs/medicoes/2.4-*`.

   ⚠️ ABAIXO DO LIMIAR NADA MUDA, nas DUAS vistas — o `112vh` do 2D e o `min-height:700px` do
   3D seguem mandando, e isso está provado por varredura, não suposto.
   ⛔ A COLUNA ESQUERDA NÃO FOI TOCADA. É ela que sobra embaixo quando a figura encolhe, e a
   proposta dela existe só como CAPTURA, para o [HENRIQUE] decidir olhando.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  #viewhead:has(~ #content > .instrument-wrap){display:none}
}
/* ⛔ SUBSTITUÍDO EM 01/set PELO BLOCO C7, no fim do arquivo. O limiar de 953 e o cromo de 319px
   eram DUAS CONSTANTES MEDIDAS — e o cromo mudou doze horas depois de ser medido, deixando a
   figura 47,5px fora da tela. O texto acima fica porque explica a natureza do `.campo-wrap`
   (`min-height` vence `max-height`); a regra saiu para haver uma fonte só. */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C5 · O TETO DA FIGURA VOLTA — AGORA COM O RÓTULO DESACOPLADO  ·  [DIRETOR · 01/set]
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⭐ O QUE MUDOU DESDE QUE O TETO SAIU, E É TUDO: a troca que prendeu a semana **não era uma
   lei da física — era um ACOPLAMENTO.** Os nomes encolhiam porque estavam presos à escala do
   desenho (`<text>` dentro do `viewBox`). **Desacoplados, a figura cabe sem que nada fique
   ilegível.** O `app.js` (`ajustaRotuloFigura`) publica `--blbl-comp` com a fonte já
   compensada; esta regra a consome, mantendo o `--tscale` do `roda.css:199`.

   ⚠️ O ALVO É O TAMANHO DE HOJE, NÃO MAIOR `[DIRETOR]`. A promessa é *"não fica pior que
   hoje"* — deixar maior seria outra decisão, de desenho, e não foi pedida. E margem é o que
   faz a regra sobreviver a conteúdo que ainda não existe: um nome mais longo, uma tradução,
   um rótulo novo.

   ── O PISO É 800px, E SAIU DA MEDIÇÃO DE COLISÃO ────────────────────────────────────────
   Com o rótulo no tamanho de hoje (7,92px na tela) e os 11 nomes visíveis, a 1280 de largura:
       768 → cabe · ⚠️ **1 colisão: `Binah × Da'at`**
       780 → cabe · ⚠️ 1 colisão   ·   790 → cabe · ⚠️ 1 colisão
       800 → cabe · **0 colisões**  ← o piso
       820 · 900 · 1080 → cabem · **0 colisões**
   ⚠️ `Binah` e `Da'at` são vizinhos por doutrina e já ficam a milímetros um do outro; abaixo
   de 800 a compensação os encosta. **Por isso o piso não é mais baixo — e não é arbitrário.**

   ⛔ ABAIXO DE 800 NADA MUDA: sem teto e sem compensação, exatamente como hoje.
   ⛔ NÃO SUBA O ALVO ACIMA DO TAMANHO DE HOJE sem remedir a colisão: a folga até o primeiro
   par que se toca é de ~19%, e ela é o que protege rótulo novo.
   ⚠️ A REGRA DO `.campo-wrap` (bloco C4) NÃO FOI TOCADA — ela tem limiar próprio (953) e um
   argumento próprio: canvas não tem rótulo preso ao `viewBox`.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* ⛔ SUBSTITUÍDO EM 01/set PELO BLOCO C7, no fim do arquivo. O piso de 800 e o cromo de 319px
   saíram: quem mede e decide agora é o `app.js`, e o CSS só reage à marca que ele põe. A tabela
   de colisão acima continua valendo como HISTÓRIA de como o piso foi derivado na primeira vez —
   mas ele deixou de ser um número escrito. */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C7 · O CROMO E O PISO DEIXAM DE SER NÚMEROS  ·  [DIRETOR · 01/set] — conserto de defeito
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⛔ O DEFEITO QUE ISTO CONSERTA, e ele estava NO AR: o `calc(100vh - 319px)` assumia um cromo
   de 319px. O real virou **366,5px** quando o `A−/A/A+` mudou de casa e a barra do instrumento
   ganhou uma TERCEIRA fileira (87px → 135px). Resultado medido: **a figura ficava 47,5px fora
   da tela a 900 E a 1080**, depois de eu ter reportado que cabia.

   ⭐ E NÃO SE TROCOU 319 POR 367. Repor constante medida por constante medida é repetir o erro
   com número novo — e a prova é que a de ontem durou **doze horas**. O número deixa de existir.

   ⚠️ O PISO TAMBÉM SAIU, E NÃO POR `var()` NUMA MEDIA QUERY: `@media (min-height:…)` é avaliada
   **fora do elemento** e **não lê variável de CSS**. A conclusão do `[DIRETOR]` é mais forte:
   **regra que depende de número medido não devia ser media query.** Quem sabe o número é o
   `app.js` — ele mede o topo real, decide se cabe, e **marca o elemento**. O CSS só reage.

   COMO FUNCIONA, e é tudo que há:
     `app.js` (`ajustaFigura`) mede o topo do instrumento → publica `--cromo-topo`
                              → põe `data-fig-cabe` no `.instrument-wrap`
                              → compensa o rótulo (`--blbl-comp`)
                              → **se os rótulos se tocarem, TIRA a marca** e tudo volta ao normal.
   ⭐ **O piso passa a ser o que sempre foi de verdade: a menor altura em que os rótulos não
   colidem** — calculada a cada layout, não escrita. Ele acompanha sozinho qualquer mudança de
   cromo, de fonte, de rótulo novo ou de tradução mais longa.

   ⚠️ ANTES DE O `app.js` RODAR, NADA DISTO EXISTE: sem o atributo, nenhuma regra casa, e vale o
   `112vh` de sempre (peça 6). **Não há estado intermediário inválido** — o teto só aparece
   depois de o número existir, porque é o mesmo ato que o cria.
   ⚠️ O `.campo-wrap` usa a MESMA marca de propósito: ele não tem rótulo para colidir, mas
   encolhê-lo só quando a figura também cabe mantém uma condição só para as duas vistas — e
   evita inventar um terceiro critério que ninguém mediu.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  .instrument-wrap[data-fig-cabe] .atlas-roda svg.body-view.body-view,
  .instrument-wrap[data-fig-cabe] .atlas-roda .campo-wrap{max-height:calc(100vh - var(--cromo-topo))}
  .instrument-wrap[data-fig-cabe] .atlas-roda .campo-wrap{min-height:0}
  .instrument-wrap[data-fig-cabe] .atlas-roda .body-view .blbl{font-size:var(--blbl-comp, 12px)}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C8 · O ACABAMENTO DA BARRA  ·  referência `docs/referencias/barra-instrumento-2set.png`
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⛔ SÓ O QUE CUSTA ZERO ALTURA — medido: a barra fica em 135px antes e depois.
   ⛔ O EMPILHAMENTO DO "CORPO FÍSICO" NÃO SUBIU, decisão do `[DIRETOR]` com o número na mão:
   empilhar troca largura por altura, a barra iria a ~178px, e devolveria ~91px do cromo que a
   semana recuperou — encolhendo a figura em cada janela e subindo o piso de colisão.
   *A referência resolve um problema de largura que este produto não tem, cobrando na moeda que
   lhe falta.*

   ⚠️ TRÊS ITENS DA LISTA JÁ EXISTIAM — medidos antes de escrever, e por isso não estão aqui:
   rótulos em maiúsculas/pequenos/espaçados (`roda.css:90`) · pílulas (`roda.css:590`) · o valor
   dentro do controle (`roda.js:884`).
   ⛔ E UM QUARTO FICOU DE FORA POR CUSTAR ALTURA: o rótulo ACIMA do grupo. O comando dizia
   *"já ficam acima — custo zero"*; **medido, estão AO LADO**, e pô-los acima levaria os grupos
   de 18–35px para 50–97px.

   O QUE ESTA REGRA FAZ: cantos e fundo da barra · divisórias verticais entre grupos vizinhos,
   por `::before` de 1px — **largura mínima, altura nenhuma** (a barra é `align-items:center`).
   ⚠️ SÃO ENTRE OS GRUPOS QUE EXISTEM, não entre as "zonas" da referência: a ordem no DOM é
   `Vista · Exibir · Corpo físico · Tema · Moldura`, e a referência agrupa `[Vista+Moldura]`.
   **Reordenar mudaria quem cai em qual fileira, e a fileira decide a altura** — que é justamente
   o número que acabou de causar um defeito. **Reportado, não feito.**

   ⛔ FICOU DE FORA, e é `roda.js`: os dois botões circulares do tema (hoje é UM interruptor,
   `.tswitch`) · e o rótulo `EXIBIR` FICA, porque é informação e a barra não precisa da largura.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  .instrument-wrap .atlas-roda .instr-topbar{border-radius:12px; background:var(--surface)}
  .instrument-wrap .atlas-roda .tb-grp + .tb-grp{position:relative; padding-left:20px}
  .instrument-wrap .atlas-roda .tb-grp + .tb-grp::before{content:""; position:absolute;
    left:0; top:50%; transform:translateY(-50%); width:1px; height:22px; background:var(--line2)}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C10 · A BARRA IGUAL À REFERÊNCIA v2 — arranjo, cores e proporções  ·  [MAICK · 02/set]
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⭐ A LEVA ANTERIOR (C9) SUBIU SÓ A APARÊNCIA, e a recusa do arranjo estava errada: eu tinha
   escrito que empilhar custava 113px de piso. A conta certa é 18px — os 113 vinham de comparar
   com um estado FUTURO (o A−/A/A+ fora da barra, piso 744) que ainda não foi decidido. A linha
   de base é o que está no ar: 839. `[DIRETOR · 02/set]`
   ⭐ E empilhar não só custa pouco: ele PAGA LARGURA. Sem empilhar, os grupos somam 2.376px
   MEDIDOS e a barra quebra em três fileiras a 1280. A referência não é organizada apesar de
   empilhar — é organizada PORQUE empilha.

   ── 1 · AS CORES SAÍRAM DA IMAGEM, PIXEL A PIXEL ────────────────────────────────────────
   ⛔ O `[ENRICK]` reprovou a superfície do C9 ("clara demais e fora da paleta") e tinha razão.
   A causa foi minha: eu escolhi `#141D1C` a partir de um adjetivo. A imagem é medível, e a
   medição desmentiu a escolha por inteiro — a referência tem o painel MAIS ESCURO que o meu,
   e quem separa o painel da página lá é a BORDA, não o preenchimento.

       papel                    amostrado da imagem   token que casa       valor do token
       página (fora do painel)  #060708               --shell              #070909
       fundo do painel          #0A0C0E               --surface (=--panel) #0C1111
       borda do painel          #292D2F               --line2              #213432
       divisória                #17191B               --line               #182422
       pílula inativa · fundo   #111315               --surface2           #101817
       pílula inativa · borda   #292D2F               --line2              #213432
       pílula ativa · fundo     #241F15               rgba(--gold-rgb,.12) #232218 (roda.css:591)
       pílula ativa · borda     #B88736               --gold-mid           #B8922A
       dourado ativo (ícone)    #FFE994 (pico)        --gold-hi-dk         #E5C96E
       texto inativo            #B3B3B2               --muted              #A99B7E
       rótulo de grupo          #A1A4A5               --muted              #A99B7E
       "em breve" · fundo       #101214               --surface2           #101817
       "em breve" · texto       #6E7173               --faint              #6E6350
       anel do tema ativo       #CBA64E               --gold-dk            #C8A24D

   ⭐ AS TREZE AMOSTRAS CASAM COM TOKEN QUE JÁ EXISTE. Zero literais nesta leva — e as TRÊS
   literais que o C9 tinha aberto como dívida (`#141D1C`, `#33504C`, `#2A413E`) MORREM AQUI.
   A dívida fecha por medição, não por decisão de desenho.
   ⚠️ A ÚNICA divergência é de MATIZ: a maquete renderiza os cinzas NEUTROS; a nossa paleta é
   quente (bege) no texto e leva um traço de teal nas linhas. A luminância bate em todas. O
   matiz é a "paleta A · Carbono", decisão Maick/Enrick registrada no `pce-tokens.css:14` —
   então aqui o TOKEN vence a maquete, e é o único lugar onde ele vence.
   ⚠️ A imagem tem um brilho de 1px no TOPO do painel (#3F4243, mais claro que os outros três
   lados, que medem #292D2F) — é gradiente de maquete, não borda. Não reproduzido.

   ── 2 · A ESCALA — por que os números da imagem não entram crus ─────────────────────────
   MEDIDO na imagem: altura de caixa alta dos rótulos = 14px; "Figura 2D" com descida = 19px.
   Os nossos são 11px e 12,5px de corpo → caixa alta ~7,7px. ⭐ A maquete está a **1,70×** da
   nossa escala tipográfica. Então espaçamento e altura entram por RAZÃO, não por pixel:
       padding do painel     30px na imagem ÷ altura de botão 61px = 0,49 → 15px aqui
       divisória → conteúdo  26 ÷ 61 = 0,43 → 13px
       entre pílulas          13 ÷ 61 = 0,21 → 7px   (é o que já tínhamos)
       rótulo → conteúdo      18 ÷ 61 = 0,30 →  6px
       fileira → fileira      40 ÷ 61 = 0,66 → 12px
       círculo do tema        68 ÷ 61 = 1,11 → 34px
   ⚠️ Entrar com os pixels crus daria botão de 36px e padding de 18px — e o piso é o portão.

   ── 3 · AS DIVISÓRIAS AGORA SÃO ESTRUTURAIS ─────────────────────────────────────────────
   Eram `::before` escolhidos por `data-grp` (C9) — o que só funcionava enquanto ninguém
   reordenasse o DOM. Agora são `border-left` de zona: a divisória É a fronteira, e não tem
   como cair no lugar errado.
   ⚠️ A IMAGEM TEM QUATRO, não três: além das três entre zonas, há uma curta entre a MOLDURA
   e o A−/A/A+, só na segunda fileira (medida em x=312, #171A1C, a mesma cor das outras).
   Segui a imagem, que é o que o comando manda fazer quando ela e o texto discordam.

   ── 4 · O QUE NÃO FICOU IGUAL — e por quê ───────────────────────────────────────────────
   ⛔ MOLDURA: a imagem mostra UMA pílula "[⌗ Moldura ⌄]". O que existe são DOIS controles
   ("Instrumento escuro" e "Segue o tema"), e o portão diz nenhum controle removido. Ficaram
   os dois, sob o rótulo MOLDURA como na imagem. O portão vence a imagem — é o único item.
   ⚠️ TAMANHO DO TEXTO: a imagem não tem o rótulo; ele fica, por decisão escrita do `[DIRETOR]`
   — aqueles três botões mudam a fonte da PÁGINA INTEIRA, não da moldura ao lado.
   ⚠️ EXIBIR: a imagem não tem o rótulo do grupo, e as três pílulas já se nomeiam sozinhas
   ("Árvore da Vida", "Chakras", "Glândulas"). O rótulo não foi apagado — foi para
   `clip-path`, continua no acessível. Nenhum controle ficou sem nome.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  /* ── o painel ─────────────────────────────────────────────────────────────────────── */
  .instrument-wrap .atlas-roda .instr-topbar{display:flex; flex-wrap:wrap; align-items:stretch;
    padding:0; gap:0; background:var(--panel); border-color:var(--line2)}

  /* ── as quatro zonas, e as três divisórias entre elas ─────────────────────────────── */
  /* ⛔ O APERTO VAI PARA A ZONA 2, NUNCA PARA A BARRA. Medido: as quatro zonas somam 1.272px
     e a barra tem 1.160 a 1280 — sem isto a zona 4 cai para uma segunda LINHA DE ZONAS e a
     barra vai de 138,5px para 272px, levando o piso a ~976. Com isto, quem cede é a fileira de
     pílulas da zona 2, que quebra POR DENTRO, e as quatro zonas continuam lado a lado. */
  .instrument-wrap .atlas-roda .tb-zona{flex:0 0 auto}
  /* ⚠️ base ZERO + teto max-content: com base automática o flex QUEBRA A LINHA antes de
     encolher, e era isso que jogava a zona 4 para baixo. Com base 0 a zona 2 nunca provoca a
     quebra, cresce só até o tamanho natural dela (o teto) e cede o resto por dentro. */
  .instrument-wrap .atlas-roda .tb-zona[data-zona="2"]{flex:1 1 0; min-width:0;
    max-width:max-content}
  .instrument-wrap .atlas-roda .tb-grp[data-grp="exibir"] .layer-bar{flex-wrap:wrap;
    justify-content:center}
  .instrument-wrap .atlas-roda .tb-zona{display:flex; flex-direction:column;
    justify-content:center; gap:12px; padding:15px 13px}
  .instrument-wrap .atlas-roda .tb-zona + .tb-zona{border-left:1px solid var(--line)}
  .instrument-wrap .atlas-roda .tb-fila{display:flex; align-items:flex-end; gap:13px}

  /* ── zona 1 · VISTA com rótulo AO LADO; MOLDURA e TAMANHO DO TEXTO com rótulo ACIMA ── */
  .instrument-wrap .atlas-roda .tb-grp[data-grp="moldura"],
  .instrument-wrap .atlas-roda .tb-grp[data-grp="ts"],
  .instrument-wrap .atlas-roda .tb-grp[data-grp="corpo"],
  .instrument-wrap .atlas-roda .tb-grp[data-grp="tema"]{flex-direction:column;
    align-items:flex-start; gap:6px}
  /* a quarta divisória da imagem — curta, só na segunda fileira */
  .instrument-wrap .atlas-roda .tb-fila .tb-grp[data-grp="ts"]{
    border-left:1px solid var(--line); padding-left:13px; align-self:stretch;
    justify-content:flex-end}
  /* o par de botões da MOLDURA fica lado a lado sob o rótulo */
  .instrument-wrap .atlas-roda .tb-grp[data-grp="moldura"]{position:relative}
  .instrument-wrap .atlas-roda .tb-grp[data-grp="moldura"] .frame-btn{margin-right:0}

  /* ── zona 2 · três pílulas em cima, Restaurar centralizado embaixo ─────────────────── */
  .instrument-wrap .atlas-roda .tb-grp[data-grp="exibir"]{flex-direction:column;
    align-items:stretch; gap:8px}
  /* o rótulo EXIBIR sai da vista mas NÃO do acessível — a imagem não o tem */
  .instrument-wrap .atlas-roda .tb-grp[data-grp="exibir"] > .tb-lbl{position:absolute;
    width:1px; height:1px; padding:0; overflow:hidden; white-space:nowrap;
    clip-path:inset(50%)}
  .instrument-wrap .atlas-roda .tb-grp[data-grp="exibir"] .layer-bar{margin:0}
  .instrument-wrap .atlas-roda .tb-grp[data-grp="exibir"] .ex-reset{align-self:center}

  /* ⚠️ A CAIXA EM VOLTA DAS TRÊS PÍLULAS SAI. A referência mostra três pílulas SOLTAS; o que
     estava na tela era o quadro do .layer-bar (roda.css:15 — fundo --panel2 + borda --line).
     O .view-bar já tinha sido solto assim (roda.css:605); o .layer-bar tinha ficado para trás. */
  .instrument-wrap .atlas-roda .layer-bar{background:none; border:none; border-radius:0; padding:0}

  /* ⚠️ A PÍLULA APAGADA TAMBÉM TEM CONTORNO NA REFERÊNCIA (amostrado #292D2F = --line2). Sem
     isto ela fica 2px MENOR que a acesa, porque só a acesa recebia borda (roda.css:591) — o
     desalinhamento estava lá desde antes e só aparece agora, com as pílulas soltas. */
  .instrument-wrap .atlas-roda .view-btn,
  .instrument-wrap .atlas-roda .layer-btn{border:1px solid var(--line2)}
  /* ── zona 3 · CORPO FÍSICO empilhado, "em breve" encostado à direita ───────────────── */
  .instrument-wrap .atlas-roda .tb-grp[data-grp="corpo"]{align-items:stretch}
  .instrument-wrap .atlas-roda .tb-grp[data-grp="corpo"] .tb-soon{width:100%;
    justify-content:space-between; border-color:transparent}
  .instrument-wrap .atlas-roda .tb-grp[data-grp="corpo"] .soon{margin-left:14px}

  /* ── zona 4 · o TEMA em dois círculos ──────────────────────────────────────────────── */
  /* ⚠️ CONTINUA SENDO UM BOTÃO SÓ (roda.js:175, role="switch"). Os dois círculos existiam no
     markup — `.tfl` (sol) e `.tfd` (lua) —, então a APARÊNCIA é CSS, como o comando previu.
     ⛔ MAS O COMPORTAMENTO NÃO VIRA UM PAR: clicar no círculo já aceso ALTERNA, porque o nó
     clicável é um só. Um par de verdade é markup, e markup é roda.js. `[DIRETOR]` decide. */
  :root .instrument-wrap .atlas-roda .tswitch{width:auto; height:auto; padding:0; gap:8px;
    border:none; background:none; align-items:center}
  :root .instrument-wrap .atlas-roda .tknob{display:none}
  :root .instrument-wrap .atlas-roda .tfixo{position:static; width:34px; height:34px; top:auto;
    left:auto; right:auto; border-radius:50%; border:1px solid var(--line2);
    background:var(--surface2); color:var(--faint); opacity:1; flex:none}
  :root .instrument-wrap .atlas-roda .tswitch svg{width:16px; height:16px}
  /* o aceso é o tema corrente: escuro → lua, claro → sol */
  :root:not([data-theme="light"]) .instrument-wrap .atlas-roda .tfd,
  :root[data-theme="light"] .instrument-wrap .atlas-roda .tfl{border-color:var(--gold-dk);
    color:var(--gold-dk); background:rgba(var(--gold-rgb-dk),.12)}


  /* ⛔⛔ REMENDO DECLARADO, NÃO SOLUÇÃO — o par que mentia `[DIRETOR · 02/set]` ⛔⛔
     O DEFEITO: dois círculos parecem um par de opções, mas por baixo é UM botão
     (roda.js:175). Clicar no círculo JÁ ACESO alternava o tema — quem clica no sol aceso
     espera que nada aconteça e leva uma troca de tema. ⭐ É a família catalogada de cabeça
     para baixo: antes era rótulo maior que o escopo; aqui é APARÊNCIA que promete uma coisa
     e COMPORTAMENTO que faz outra.
     O REMENDO: o botão inteiro deixa de receber ponteiro e só o círculo APAGADO o recebe de
     volta. `pointer-events` mexe em acerto de alvo, não em propagação — então o clique no
     apagado continua subindo até o <button> e o handler do roda.js dispara igual.
     ⚠️ O QUE ISTO NÃO CONSERTA, e por isso é remendo: para LEITOR DE TELA continua sendo um
     `role="switch"`, um controle só, que anuncia "ligado/desligado" — não um par. Par de
     verdade é MARKUP, markup é roda.js, e o roda.js está fechado (o painel do facilitador o
     carrega sem versão). A solução espera a outra frente.
     ⚠️ O TECLADO NÃO PASSA POR AQUI: `pointer-events` não afeta foco nem ativação por Enter/
     Espaço. MEDIDO com evento de entrada real (Input.dispatchKeyEvent), não simulado. */
  /* ⚰️ AQUI VIVIA O REMENDO `pointer-events:none` DO SOL/LUA — saiu em 03/set, e o motivo
     e o que a medicao achou: ele so funcionava porque havia uma METADE INATIVA para onde
     mirar. O sol/lua virou um ciclo de TRES valores (auto/claro/escuro), e num ciclo nao
     existe metade inativa — o mesmo no precisa aceitar todo clique. ⭐ E o defeito que o
     remendo cobria (clicar no circulo ja aceso alternava o tema) deixou de existir junto:
     agora TODO clique avanca o ciclo, que e exatamente o que a aparencia promete. */
  :root .instrument-wrap .atlas-roda .tswitch{pointer-events:auto; cursor:pointer}
  /* ── o que o arranjo antigo (C8/C9) deixava e agora estorva ────────────────────────── */
  .instrument-wrap .atlas-roda .tb-grp + .tb-grp{padding-left:0}
  .instrument-wrap .atlas-roda .tb-grp + .tb-grp::before{content:none}
  .instrument-wrap .atlas-roda .view-bar{margin:0}

  /* ── os ícones (C9) — a imagem NÃO os tem nos rótulos de grupo, só nos controles ───── */
  .instrument-wrap .atlas-roda .view-btn::before,
  .instrument-wrap .atlas-roda .ex-reset::before,
  .instrument-wrap .atlas-roda .frame-btn::before,
  .instrument-wrap .atlas-roda [data-grp="moldura"] .tb-soon::before{
    content:""; display:inline-block; width:9px; height:9px; margin-right:3px;
    vertical-align:-1px; background-color:currentColor; opacity:.85;
    mask:var(--ico) no-repeat center / contain;
    -webkit-mask:var(--ico) no-repeat center / contain}
  /* ⚠️ 9px/3px são MEDIDOS, não escolhidos: a 11px/6px os dez ícones somavam ~170px de
     largura, empurravam uma fileira a mais e levavam o piso de 839 para 877. Remedir o piso
     antes de aumentá-los. */
  /* ⚠️ A pílula de camada NÃO recebe ícone do C9: o markup do roda.js já emite DOIS glifos nela
     (o .led e o layerIcoSvg), e a referência mostra UM. O terceiro era invenção minha — e ele
     custava 12px de largura em cada uma das três, na zona que é justamente a que aperta. */
  .instrument-wrap .atlas-roda .layer-btn::before,
  .instrument-wrap .atlas-roda [data-grp="corpo"] > .tb-lbl::before,
  .instrument-wrap .atlas-roda [data-grp="tema"] > .tb-lbl::before{content:none}

  .instrument-wrap .atlas-roda .view-btn[data-view="corpo"]{--ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="5" r="3"/><path d="M12 8v8M7 11l5-1 5 1M8 22l4-5 4 5"/></svg>')}
  .instrument-wrap .atlas-roda .view-btn[data-view="campo"]{--ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><ellipse cx="12" cy="12" rx="10" ry="4.5"/><ellipse cx="12" cy="12" rx="4.5" ry="10"/></svg>')}
  .instrument-wrap .atlas-roda .layer-btn[data-layer="sephirah"]{--ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><circle cx="12" cy="4" r="2.6"/><circle cx="5" cy="14" r="2.6"/><circle cx="19" cy="14" r="2.6"/><circle cx="12" cy="21" r="2.6"/></svg>')}
  .instrument-wrap .atlas-roda .layer-btn[data-layer="chakra"]{--ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.5"/></svg>')}
  .instrument-wrap .atlas-roda .layer-btn[data-layer="gland"]{--ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"><path d="M12 2l8 10-8 10-8-10z"/></svg>')}
  .instrument-wrap .atlas-roda .ex-reset{--ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M20 12a8 8 0 1 1-2.6-5.9M20 3v5h-5"/></svg>')}
  .instrument-wrap .atlas-roda .frame-btn{--ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="12" cy="12" r="9"/><circle cx="8.5" cy="9.5" r="1.4" fill="black" stroke="none"/><circle cx="15" cy="9" r="1.4" fill="black" stroke="none"/><circle cx="15.5" cy="15" r="1.4" fill="black" stroke="none"/></svg>')}
  .instrument-wrap .atlas-roda [data-grp="moldura"] .tb-soon{--ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z"/></svg>')}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C12 · O MENU DO CAMPO — os controles do 3D sobem para a barra  ·  [MAICK · 02/set]
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⛔ ESTE BLOCO SUBSTITUI O C11 ("menu de painéis"), que era um erro de leitura meu: o
   `[MAICK]` pediu os controles do CAMPO num menu, e eu construí um menu que escondia PAINÉIS
   DE INFORMAÇÃO — coisa que ninguém pediu. Ele chamou de totalmente errado e estava certo.

   ⭐ E o motivo do pedido apareceu na medição, não no pedido: a 1280×900 a faixa `CAMPO`
   começa em y=908, **8px abaixo da dobra** — numa tela de notebook comum ninguém vê Toro,
   Fluxo, Vórtices, Flor da Vida, Corpo nem Recentrar sem rolar. Não era organização: era um
   conjunto de controles fora do alcance. Na barra eles ficam na PRIMEIRA TELA.

   ⚠️ O ABRIDOR SÓ EXISTE NO 3D, e a regra lê o `.active` que o `roda.js:449` (showView) JÁ
   escreve em cada `.view-btn` — estado que outro arquivo mantém, em vez de estado paralelo, e
   sem tocar no `roda.js`. Provado nos três estados: Figura 2D não casa · Campo 3D casa · de
   volta na 2D não casa.
   ⛔ Menu de 3D visível no 2D é controle que não controla nada.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  /* a 2ª fileira da zona 2 — o `Restaurar` e o abridor, centralizados. Ela nasceu na leva
     revogada e FICA: é ela que hospeda o abridor sem custar fileira nova (medido: a barra
     continua em 138,5px e sobram 289px nesta fileira a 1280). */
  .instrument-wrap .atlas-roda .tb-fila2{display:flex; align-items:center;
    justify-content:center; gap:7px}
  /* ⭐ E · 10/set · [ENRICK]: o abridor "Campo ▾" e o menu SAÍRAM. Os seis moram numa faixa
     PRÓPRIA no topo do painel 3D — o arranjo que ele escolheu ("faixa própria") sobre a captura
     simulada da 2.47, depois de ver no print dele o toro ENCOSTANDO no topo do painel: faixa
     por cima cobriria o desenho. A faixa TOMA altura: o canvas começa abaixo dela e encolhe o
     mesmo tanto (ele mede a própria caixa, campo3d.js:380), então nenhuma opção fica sobre o
     desenho — e o painel NÃO cresce: a caixa do `.campo-wrap` vem da proporção e do teto, não
     do conteúdo. Só no computador; no telefone os seis seguem no rodapé do campo.
     ⚠️ O `display:flex` só vale quando o painel aparece: o `showView` (roda.js:453) escreve
     `display:none` INLINE no 2D, que vence esta regra — e devolve '' no 3D, que a deixa valer. */
  /* ⛔ ALTURA FIXA, e foi medido (2.51/2.52): com a faixa crescendo quando os seis chegavam (e de
     novo quando a fonte deles chegava), o canvas precisava ser remedido depois — e o único jeito de
     remedir sem tocar no roda.js era um `resize` na janela, que refazia o `ajustaFigura` e mudava
     o 2D. Com altura fixa, desde que o 3D aparece, a caixa do canvas já nasce final. A altura
     acompanha o tamanho do texto (A−/A/A+), porque as pílulas acompanham.
     ⚠️ UMA FILEIRA SEMPRE: se o painel for mais estreito que as seis (392px + respiro), a faixa
     rola de lado em vez de quebrar em duas — quebrar mudaria a altura, e esconder uma opção não é
     escolha minha. */
  .instrument-wrap .atlas-roda .campo-wrap{display:flex; flex-direction:column}
  /* ⚠️ MEDIDO (2.52+): as seis somam 392px; a largura útil do painel é 345 a 821, 390 a 1180 —
     2px curta —, 424 a 900, 548 a 1024, 490 a 1280. Respiro de 10px (e não 12) faz 1180 caber;
     a 821 a faixa rola. O centro vem das margens automáticas da primeira e da última: sobra espaço,
     centraliza; falta, elas zeram e a rolagem começa na primeira — nenhuma fica inalcançável à
     esquerda (o que `justify-content:center` faria ao transbordar). */
  .instrument-wrap .atlas-roda .campo-wrap > .cf-faixa{flex:none; box-sizing:border-box;
    height:calc(53px * var(--tscale,1)); display:flex; flex-wrap:nowrap; overflow-x:auto;
    justify-content:flex-start; align-items:center; gap:6px; padding:0 10px;
    border-bottom:1px solid var(--line)}
  .instrument-wrap .atlas-roda .campo-wrap > .cf-faixa > *{flex:none}
  .instrument-wrap .atlas-roda .campo-wrap > .cf-faixa > :first-child{margin-left:auto}
  .instrument-wrap .atlas-roda .campo-wrap > .cf-faixa > :last-child{margin-right:auto}
  .instrument-wrap .atlas-roda .campo-wrap > .campo-canvas{flex:1 1 0; min-height:0; height:auto}

  /* ⛔ A FILEIRA VAZIA SÓ SOME DEPOIS QUE OS SEIS SAÍRAM DE VERDADE. O atributo é escrito pelo
     `app.js` só quando o movimento dos SEIS deu certo — sem ele, esta regra esconderia os
     controles em vez de mudá-los de casa. */
  .instrument-wrap[data-campo-recolhido] .atlas-roda .campo-comp .cc-row{display:none}
  /* ⭐ E a legenda FICA: controle se recolhe, doutrina não. "7 vórtices geram · o esplênico
     recolhe" afirma o que o campo significa, e doutrina dentro de menu some para quem não
     abre o menu — sem que ninguém perceba que sumiu. */
  .instrument-wrap[data-campo-recolhido] .atlas-roda .campo-comp .cc-row2{justify-content:flex-start}
}


/* ═══════════════════════════════════════════════════════════════════════════════════════
   C13 · A COLUNA DO MEIO COM A LARGURA DA TINTA — ⛔ REVERTIDA EM 02/set, e por que
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⛔ ESTE BLOCO EXISTIU E FOI DESFEITO NO MESMO DIA. Fica aqui como lápide, sem uma linha de
   regra, porque a lição é mais cara que o código.

   O QUE ELE FAZIA: dava à coluna do meio a largura da TINTA do instrumento (o desenho + folga
   de 26px), devolvendo às laterais os 256px de preto vazio que a coluna tinha a 1280×900 — e
   722px a 1920. Vinha com o teto da Roda na largura de hoje e com a lista das 12 em duas
   colunas quando coubessem.

   ⭐ ELE PASSOU NAS TRÊS PROVAS QUE O COMANDO EXIGIU, todas medidas com grupo de controle:
       a largura do DESENHO ... idêntica em 1280×900, 1366×768, 1920×1080, 2560×1440, 1280×1440
       a fonte do RÓTULO ...... idêntica na tela em todas as cinco (7,93px a 1280×900)
       o PISO ................. 843, e a barra 138,5px
   ⛔ E MESMO ASSIM FICOU ERRADO NA TELA. O `[ENRICK]` viu no ar e reprovou: a figura 2D ficou
   ESPREMIDA numa faixa estreita entre painéis largos.

   ⭐⭐ PROVA TÉCNICA NÃO SUBSTITUI OLHO. `[DIRETOR · 02/set]`
   ⚠️ As três provas mediam o que eu tinha MEDO DE PERDER — o desenho encolher, o rótulo
   encolher, o piso subir. Nenhuma delas mede se a tela ficou BOA. Eu escrevi três portões e
   nenhum deles era "parece certo".
   ⚠️ E o defeito não estava em nenhuma peça: cada uma media certo. Estava na PROPORÇÃO entre
   elas — que é justamente o que nenhum número isolado enxerga.

   ⭐ O QUE FOI DESFEITO JUNTO, e por quê:
     · o desacoplamento do `semTeto` (`--fig-sem-aperto`, no `app.js`) — só existia para o
       estreitamento não apagar a compensação do rótulo. Sem ele, volta a ser `r.width`.
     · o teto da Roda em 284px — sem o estreitamento a coluna esquerda volta a 329px a 1920, e
       o teto passaria a ENCOLHER a Roda de 304 para 284. Deixar seria criar um defeito novo
       ao desfazer um antigo.
     · a lista das 12 em `auto-fill minmax(280px,1fr)` — sem coluna larga ela nunca alcança
       duas colunas; ficaria regra morta amarrada a uma leva revogada.

   ⭐ O QUE FICOU DE PÉ, e é a razão de a reversão ter sido cirúrgica: o menu `Campo` (C12), a
   saída do menu `Painéis`, a barra, os ícones e o par de tema. ⭐ A reversão escrita SEPARADA
   POR PARTE, que o `[DIRETOR]` vinha exigindo em cada leva, foi o que permitiu desfazer um erro
   sem perder duas entregas boas da MESMA leva. É a primeira vez que ela paga sozinha.

   ⚠️ E o vazio continua lá, medido no §0.22: 256px a 1280×900, 722px a 1920. O diagnóstico do
   `[MAICK]` continua certo — o que reprovou foi ESTA solução, não o problema.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C14 · A BARRA DEIXA DE ATRAVESSAR A PÁGINA  ·  [ENRICK · 02/set]
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⛔ O PEDIDO QUE EU LI ERRADO TRÊS VEZES: *"diminuir a largura do painel interativo e encaixar
   os dois painéis informativos dos dois lados, em cima"*. Eu li como encolher a coluna do meio
   (subiu e foi reprovado no olho), como esconder painéis (leva revogada) e como recolher a
   faixa do campo. ⭐ Ele fala da BARRA: ela atravessa a página inteira e empurra a Roda da Vida
   e a Leitura do ponto para BAIXO dela.
   ⭐ O ALVO: a barra ocupa só a largura da coluna do meio, e as três colunas começam na MESMA
   altura — as duas laterais sobem a altura inteira da barra.

   ── A CONTA, e ela é de LÍQUIDO ────────────────────────────────────────────────────────
   As laterais sobem **142px** (elas passam a começar onde a barra começa). O centro afunda
   **só o quanto a barra crescer** por estar mais estreita — e esse crescimento vai direto para
   o `--cromo-topo`, que encolhe a figura. ⛔ **O portão é "desenho idêntico", então a barra não
   pode crescer um pixel.**

   ── O LIMIAR NÃO FOI ESCOLHIDO: SAIU DA VARREDURA ─────────────────────────────────────
   A barra precisa de **1.030px de largura** para continuar em 138,5px numa fileira só. Abaixo
   disso ela vai a 161, depois 163, 247,5 e 294,5. Varrendo a janela com a barra confinada:

       1760 → coluna do meio  922 → barra 161px    ⛔ o desenho cairia de 389,8 para 377,5
       1840 → coluna do meio 1002 → barra 161px    ⛔
       1860 → coluna do meio 1022 → barra 138,5px  ✅ desenho idêntico
       1920 → coluna do meio 1082 → barra 138,5px  ✅

   ⭐ Por isso `min-width:1860px` — **a menor largura MEDIDA que passa**, não um número redondo.
   ⚠️ E abaixo dela **nada muda**: entregar em parte das telas é melhor que não entregar em
   nenhuma, e foi assim que o teto da figura subiu.

   ── OS DOIS REGIMES, e o de baixo tem de ser INVISÍVEL ────────────────────────────────
   A barra passa a morar dentro da `.main-grid` em TODA largura (o `app.js` move o nó uma vez —
   um move condicional teria de ser desfeito a cada redimensionamento). ⛔ Então o regime de
   baixo tem de reproduzir a tela de hoje EXATAMENTE, ou a leva não poderia subir nem nas telas
   largas. Medido: barra 138,5px e largura cheia, `--cromo-topo` 370, largura do desenho e o
   topo das três colunas — **tudo idêntico** em 1280×900, 1536×864, 1920×1080 e 2560×1440.

   ⚠️ `row-gap:4px` NÃO É GOSTO: é o valor em que o `--cromo-topo` sai exatamente 370,0px, o
   mesmo de hoje. Com 10px ele dava 376 e a figura encolhia 3,3px sem a barra ter crescido —
   o portão teria reprovado a leva por um motivo que não era o dela. Varrido: 10→376 · 6→372 ·
   4→**370** · 2→368 · 0→366.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  /* a barra agora é item da grade; o vão até o conteúdo é o `row-gap`, não a margem dela */
  .instrument-wrap .atlas-roda .main-grid{grid-template-rows:auto 1fr; row-gap:4px}
  .instrument-wrap .atlas-roda .main-grid > .instr-topbar{grid-column:1/-1; grid-row:1;
    margin-bottom:0}
}
/* ⚠️ ENTRE 821 E 1120 A GRADE TEM TRES LINHAS (barra · [esquerda|centro] · direita, que o
   roda.css:5 manda ocupar a linha inteira), e o row-gap de 4px vale entre TODAS elas. MEDIDO
   naquela faixa: a barra (161px), o --cromo-topo (392,5px), a largura do desenho (553,4) e o
   fim da coluna esquerda (1295) ficam IDENTICOS aos de hoje; o unico efeito e a coluna DIREITA
   subir 8px, o que encurta a pagina. Testei devolver 10px de vao ali e ficou PIOR: o cromo ia
   a 398,5 e a pagina crescia 4px. Entao a faixa fica com os mesmos 4px, e os 8px estao aqui
   declarados em vez de escondidos. */
@media(min-width:1121px){
  /* ⚠️ só onde a grade é de TRÊS colunas. Entre 821 e 1120 o `roda.css:5` põe a coluna direita
     em `grid-column:1/-1`, e forçar linha aqui a empilharia por cima das outras duas. */
  .instrument-wrap .atlas-roda .main-grid > .left-col,
  .instrument-wrap .atlas-roda .main-grid > .center-col,
  .instrument-wrap .atlas-roda .main-grid > .right-col{grid-row:2}
}
@media(min-width:1860px){
  /* ⭐ O REGIME DE CIMA: a barra encolhe para a coluna do meio e as duas laterais sobem para o
     topo, ao lado dela. Medido a 1920×1080: laterais sobem 142px, a largura do desenho fica
     idêntica (389,8) e o que sobra abaixo da dobra cai de 193 para 51. */
  .instrument-wrap .atlas-roda .main-grid > .instr-topbar{grid-column:2}
  .instrument-wrap .atlas-roda .main-grid > .left-col{grid-column:1; grid-row:1/3}
  .instrument-wrap .atlas-roda .main-grid > .right-col{grid-column:3; grid-row:1/3}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C15 · O MENU DA MOLDURA — os dois controles do instrumento recolhidos  ·  [ENRICK · 02/set]
   ═══════════════════════════════════════════════════════════════════════════════════════
   Mesmo padrão do menu do `Campo`, já provado. O rótulo `MOLDURA` do grupo FICA acima do
   abridor — é o que a referência v2 desenha, e é a mesma dupla do `TAMANHO DO TEXTO` ao lado.

   ⛔⛔ O QUE A MEDIÇÃO ACHOU E ESTE BLOCO NÃO CONSERTA: **nenhum dos dois controles funciona.**
   O `Segue o tema` é `.tb-soon disabled`, e o `Instrumento escuro` **não tem escuta em lugar
   nenhum** — `frame-btn` não aparece em um `addEventListener` sequer em todo o `web/app/`.
   ⚠️ O par inteiro é decorativo. Reportado, não corrigido: o portão diz que nenhum controle
   muda de comportamento, e o que custaria ter instrumento claro é decisão de produto.

   ⚠️ O menu abre para a DIREITA (`left:0`): este grupo é o primeiro da segunda fileira, e um
   `right:0` jogaria a folha para fora da zona.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  .instrument-wrap .atlas-roda .md-unit{position:relative}
  .instrument-wrap .atlas-roda .md-menu{left:0; right:auto; min-width:180px}
  .instrument-wrap .atlas-roda .md-menu .frame-btn,
  .instrument-wrap .atlas-roda .md-menu .tb-soon{display:block; width:100%; margin:0 0 4px;
    text-align:left}
  .instrument-wrap .atlas-roda .md-menu .tb-soon{margin-bottom:0}
  /* o "em breve" continua encostado à direita dentro da linha, como nas três do Corpo Físico */
  .instrument-wrap .atlas-roda .md-menu .tb-soon{display:flex; justify-content:space-between}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C16 · A OPÇÃO ATIVA DA MOLDURA DEIXA DE RECEBER CLIQUE — remendo declarado  ·  [DIRETOR]
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⛔⛔ REMENDO DECLARADO, NÃO SOLUÇÃO — o mesmo do par sol/lua, pelo mesmo motivo.
   ⚠️ E ANTES DELE, A CORREÇÃO DE UM DIAGNÓSTICO MEU: eu tinha proposto marcar o `Instrumento
   escuro` como "em breve" também, já que ele não tem escuta nenhuma. ⛔ Estava errado, e a
   distinção importa: **"em breve" diria que o ESTADO ATUAL está por vir — e o instrumento ESTÁ
   escuro agora. A etiqueta mentiria ao contrário.**
   ⭐ ISTO NÃO É UM CONTROLE QUEBRADO: É UM SELETOR COM UMA OPÇÃO SÓ IMPLEMENTADA. `Instrumento
   escuro` descreve a verdade; `Segue o tema` anuncia o que falta. **Os dois rótulos já estão
   certos** — o que estava errado era a opção ativa PARECER clicável.

   O REMENDO: a opção ATIVA deixa de receber ponteiro. O grupo passa a ser honesto por
   construção — um selecionado que não se clica, um "em breve" que não se clica, e nada mais.
   ⚠️ O QUE ISTO NÃO CONSERTA: para LEITOR DE TELA continua sendo um `<button>` comum, alcançável
   por Tab e ativável por Enter (o que não faz nada, porque não há handler). Um seletor de
   verdade é `role="radiogroup"` no markup, e markup é `roda.js`, que está fechado.

   ⚠️ SEXTA OCORRÊNCIA DA FAMÍLIA "controle cujo escopo é menor que o rótulo" — e seis é padrão,
   não coincidência: **este produto tende a desenhar o controle antes de construir o
   comportamento.** ⭐ A lista de "em breve" é a forma honesta que ele já encontrou para isso, e
   por isso ela não deve ser esvaziada por conveniência — ela é o registro visível da dívida.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  :root .instrument-wrap .atlas-roda .md-menu .frame-btn.active{pointer-events:none;
    cursor:default}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C17 · O TÍTULO ILEGÍVEL DA COLUNA DIREITA NO TEMA CLARO — defeito vivo  ·  [DIRETOR]
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⛔ O DEFEITO, medido NA FOTO (pixel a pixel, na captura da própria bancada):
       fundo do card ....... #EFEBE1 (creme, --surface2 claro)
       "Seus 3 pontos de partida" .. #EDE6D6 — o off-white do tema ESCURO
       contraste ........... ~1,03   ILEGÍVEL
       o texto de ajuda ao lado .... #5E5545, legível, porque DECLARA color:var(--muted)

   ⭐ A CAUSA, e ela é de classe, não deste caso:
   O `.rd-title` não declara `color` (roda.css:514) — ele HERDA. E o `pce-tokens.css:102` fixa
   `color:var(--ink)` no `.atlas-roda`, onde `--ink` ainda é o off-white do instrumento escuro.
   ⚠️ **`color` herda o VALOR COMPUTADO, não a fórmula.** Redeclarar `--ink` na `.right-col`
   (roda.css:62) alcança quem LÊ o token naquele nó — e não alcança quem já recebeu a cor
   resolvida de um ancestral.
   ⭐ É o MESMO defeito que o comentário do roda.css:64-66 descreve para os aliases ("o var()
   num custom prop CONGELA no elemento que o declara"): lá lembraram de re-declarar
   --panel/--panel2/--void/--track, e ESQUECERAM do `color`.

   ⭐ POR QUE A REGRA É POR SUBÁRVORE E NÃO POR CLASSE: são OITO os elementos da coluna direita
   que herdam `color` — .rd-card, .rd-title, .rd-dl, .rd-est, .faixas, .info-box, .ia-list e
   .rd-enc. Hoje só o `.rd-title` tem texto direto em repouso; o `.rd-dl` e o `.rd-est` aparecem
   quando se seleciona uma Sephirah. Uma regra por classe consertaria um e deixaria sete
   esperando. Esta re-resolve o `color` para a subárvore inteira, inclusive para o que ainda
   nem foi escrito.

   ⚠️ E NÃO É DEFEITO na esquerda, no centro nem na barra: aquelas subárvores são escuras nos
   DOIS temas por canon, e ali o off-white é o correto. Varrido: 141 elementos herdam a tinta
   do escuro fora da coluna direita, e todos sobre fundo escuro (contraste ≥ 15,3).
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .instrument-wrap .atlas-roda .right-col{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C18 · O ENTORNO PASSA A SEGUIR O TEMA — e o palco vira VISOR  ·  [MAICK] via [DIRETOR]
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⭐ O PEDIDO ERA "Segue o tema". O QUE FOI ENTREGUE É MENOS, E O RÓTULO DIZ ISSO: segue o
   ENTORNO (painéis, bordas, divisórias, rótulos, a barra, a Roda, a lista das 12). NÃO seguem a
   figura (a arte traz o preto dentro do .webp), o campo 3D (o campo3d.js:435 declara "sempre
   carbono") nem a aura das Sephirot (o estado é lido por BRILHO, que não se enxerga no claro).
   As três são decisão do `[MAICK]`, e a arte com canal alfa destrava a primeira.

   ⚠️ A DÍVIDA, DECLARADA COM A SAÍDA: os 13 valores abaixo são CÓPIA LITERAL do roda.css:61-63.
   Não há conjunto `--l-*` publicado (medido: zero ocorrências de "--l-" no pce-tokens.css), e o
   pce-tokens.css está fora do portão desta leva. **Não são hex novos** — são os mesmos que o
   roda.css já escreve; esta é a TERCEIRA cópia. ⭐ A saída nomeada: publicar `--l-shell`,
   `--l-ink`, … no pce-tokens.css e fazer as três cópias apontarem para eles. Entrou no pedido
   da outra frente (docs/PARA-A-OUTRA-FRENTE-versao-do-instrumento.md).

   ⭐ POR QUE ESTE CAMINHO E NÃO MEXER NO roda.css: o pce-tokens.css:90 prende os tokens em
   `.atlas-roda` com especificidade (0,1,0). A regra abaixo é (0,6,0) — vence com folga a partir
   do app.css, que carrega depois. O arquivo fechado não é tocado.

   ⛔ E A LIÇÃO QUE CUSTOU DUAS TENTATIVAS — a primeira versão desta leva foi REPROVADA PELO OLHO:
   com o entorno claro, sobrava um retângulo preto de ~1082×700 sem borda nenhuma a 1920. Não
   lia como palco: lia como área que não carregou. ⭐ O conserto não foi clarear o palco (a
   figura precisa do preto) — foi dar-lhe ARESTA E RESPIRO: a COLUNA vira painel claro e o preto
   encolhe para a caixa da figura, com borda e cantos iguais aos dos outros painéis. Aí ele lê
   como VISOR colocado dentro de um painel, que é como se apresenta um instrumento.
   ⚠️ É a terceira vez que a mesma lição decide uma leva: **sobre fundo contrastante, o que
   separa duas camadas é a ARESTA, não o preenchimento.**
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:is(.instrument-wrap[data-moldura="claro"],
    :root[data-theme="light"] .instrument-wrap[data-moldura="auto"]) .atlas-roda .left-col,
:is(.instrument-wrap[data-moldura="claro"],
    :root[data-theme="light"] .instrument-wrap[data-moldura="auto"]) .atlas-roda .center-col,
:is(.instrument-wrap[data-moldura="claro"],
    :root[data-theme="light"] .instrument-wrap[data-moldura="auto"]) .atlas-roda .instr-topbar{
  --shell:#F7F5F0; --surface:#FFFFFF; --surface2:#EFEBE1; --line:#E3DDCE; --line2:#CFC5AE;
  --ink:#262114; --muted:#5E5545; --faint:#92866F;
  --gold:#7A5F14; --gold-hi:#9C7A22; --gold-mid:#6B5210; --gold-lo:#4A3406; --gold-rgb:122,95,20;
  --void:var(--shell); --panel:var(--surface); --panel2:var(--surface2); --track:var(--surface2);
}
/* ⚠️ O MESMO DEFEITO DO C17, e por isso ele vem junto: `color` herda o VALOR COMPUTADO, não a
   fórmula — redefinir `--ink` acima NÃO recalcula o color que o pce-tokens.css:102 já resolveu
   no `.atlas-roda`. Sem estas três linhas, o entorno fica claro com a tinta do tema escuro. */
:is(.instrument-wrap[data-moldura="claro"],
    :root[data-theme="light"] .instrument-wrap[data-moldura="auto"]) .atlas-roda .left-col,
:is(.instrument-wrap[data-moldura="claro"],
    :root[data-theme="light"] .instrument-wrap[data-moldura="auto"]) .atlas-roda .instr-topbar{
  color:var(--ink)}
/* ⭐ a COLUNA deixa de ser preta e vira painel, como os outros.
   (o roda.css:181 pinta `.center-col, #atlas-body` de #010101 — aqui só a coluna é devolvida) */
:is(.instrument-wrap[data-moldura="claro"],
    :root[data-theme="light"] .instrument-wrap[data-moldura="auto"]) .atlas-roda .center-col{
  background:var(--panel)}
/* ⭐ e o PALCO continua preto, agora com aresta e respiro. Sem cor literal: a borda é `--line2`,
   que a regra acima já devolveu ao claro. Cantos 3px = os mesmos dos painéis (roda.css:14). */
:is(.instrument-wrap[data-moldura="claro"],
    :root[data-theme="light"] .instrument-wrap[data-moldura="auto"]) .atlas-roda svg.body-view{
  border:1px solid var(--line2); border-radius:3px}
/* ⚠️ SEM `margin` AQUI, e foi medido: um `margin:2px auto` custava +4px de piso a 1280 (1273 ->
   1277) e ZERO a 1920 (a figura la e limitada por altura e absorve). ⭐ Nao valia: o respiro que
   o olho ve vem do padding da propria `.center-col`, que ja existe. O `box-sizing:border-box`
   faz a borda nao crescer a caixa — por isso a aresta sai de graca e a margem nao saia. */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C19 · A COLUNA DE LEITURA ALINHA COM O CARTÃO DO MAF  ·  [ENRICK] via [DIRETOR]
   ═══════════════════════════════════════════════════════════════════════════════════════
   O pedido, nas palavras dele: *"a borda dos painéis dos 3 pontos de partida, leitura de estado…
   alinhada com a borda do MAF"*. ⭐ O pedido já nomeia a REFERÊNCIA (o MAF) e o que SE MOVE (os
   painéis) — não havia o que perguntar, e perguntar de novo foi o meu erro da rodada anterior.

   MEDIDO ANTES (docs/medicoes/2.26 e 2.27):
       cartão do MAF (.summary) ....... 1224 (a 1280)   1864 (a 1920)
       painéis (.rd-card) ............. 1250            1890
       diferença ...................... +26px, constante nas duas larguras e nos dois temas

   A CAUSA era a sangria do `app.css:1012` (`.instrument-wrap{margin-right:-26px}`), que cancela
   o `padding-right:26px` do `.content` (app.css:194). O MAF respeita o recuo da página; o
   instrumento sai dele. ⚠️ NÃO era a barra de rolagem: a calha mede 2px (roda.css:52) e só
   aparece em janela abaixo de ~600px de altura. Aquilo é outro defeito, menor, e segue reportado.

   ⭐⭐ E ISTO **NÃO DESFAZ** O ACHADO DO `[ENRICK] · 24/ago` — leia com cuidado antes de "corrigir".
   Aquele achado (documentado em app.css:1004-1010) diz que as duas paredes não são iguais: à
   ESQUERDA o rail abre para 230px POR CIMA do conteúdo e chegou a cobrir 58% do card da Roda; à
   DIREITA a parede é a janela e o card **PODE** encostar. ⭐ **"Pode" é permissão, não obrigação.**
   O que aquela decisão protegia era a parede ESQUERDA — e **a esquerda não muda: continua em 90,
   alinhada com o banner, o miolo de pão e o título.** Deixar de usar uma permissão não é revogar
   a decisão que a concedeu. ⛔ Quem ler isto depois **não** deve tratar como reversão.

   ⚠️ A SEGUNDA REGRA NÃO É OPCIONAL, e é por isso que são duas: o `app.css:1040-1042` removeu a
   borda direita e os cantos dos painéis **porque eles encostavam na parede** (item 5 do bloco P6).
   Recolher sem devolvê-los deixaria os painéis CORTADOS na aresta nova.

   O CUSTO, medido e declarado: a coluna de leitura encolhe 26px (361→335 a 1920, 316→290 a 1280).
   ⭐ Reversão em uma linha se fizer falta — é o `margin-right` e mais nada.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  .instrument-wrap .atlas-roda .right-col{margin-right:26px}
  /* ⚠️ devolve o que o item 5 do P6 tinha tirado — cantos 3px = os mesmos dos outros painéis
     (roda.css:14). Sem cor literal: a borda usa a que o card já declara. */
  .instrument-wrap .atlas-roda .right-col > *{border-right-width:1px;
    border-top-right-radius:3px; border-bottom-right-radius:3px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C20 · UM CONTROLE POR ESCOPO — o tema do site no cabeçalho, o do Atlas no sol/lua
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⭐ O REFINO QUE O `[DIRETOR]` FEZ DA PRÓPRIA REGRA, e ele decide o que fica: **a duplicata
   que faz mal é a de ESTADO DIVERGENTE — duas fontes que podem discordar. Dois caminhos até
   o MESMO estado não são duplicata: são acesso.** Por isso o `#rf-theme` do Perfil e o
   `#hm-theme` do menu do avatar FICAM — os três chamam `toggleTheme()`, que escreve num lugar
   só. ⛔ O que não podia existir era dois controles com ESCOPOS DIFERENTES e a mesma cara.

   ⚰️ O que morreu nesta leva, e onde ler o porquê:
     C15 (o menu da Moldura) e C16 (a opção ativa sem clique) ficaram sem alvo — o
     `.md-menu` não existe mais. As regras seguem escritas acima porque não custam nada e
     documentam o caminho; se o `.md-unit` nunca voltar, elas saem numa rodada de limpeza.
     ⚠️ Não saem AQUI de carona: apagar CSS que ninguém mediu é como o projeto perde histórico.

   ⭐ O SOL/LUA AGORA TEM TRÊS VALORES e o rótulo diz qual. As palavras têm procedência:
     `Segue o tema` .. roda.js:186, do botão que saiu nesta mesma leva
     `Claro`/`Escuro` .. roda.js:175, do aria-label "Alternar entre tema escuro e claro"
   ⚠️ Nenhuma palavra nova — era portão do comando, e o `automático` (que NÃO está na tela)
   foi deliberadamente evitado em favor de `Segue o tema`, que já é vocabulário do produto.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · o tema do SITE ganha botão sempre à vista no cabeçalho ─────────────────────────
   ⭐ Reusa o molde `.hdr-sino` (app.css:700), que já traz tamanho, borda, cor e o alvo de
   44px em ponteiro grosso. O único acréscimo é o tamanho do ícone, porque o SVG da doca
   (`pfTema()` → `PCE_RODA.docaSpec().svg.tema`) não traz width/height próprios. */
.hdr-tema svg{width:18px;height:18px;display:block}
.hdr-tema .sino-dot{display:none}

/* ── 2 · o item `Tema` da DOCA some onde o do cabeçalho aparece ─────────────────────────
   ⭐ A doca é `@media(max-width:820px)` (roda.css:318) e só existe na rota Atlas; o
   `#hdr-tema` vive no cabeçalho, que não colapsa (a `@media(max-width:820px)` esconde
   `.who` e `.nivel-pill`, app.css:438, e NÃO o `.hdr-sino`). ⚠️ MEDIDO a 390: o botão do
   cabeçalho está visível e clicável lá — é o que autoriza esconder este.
   ⛔ Isto NÃO revoga a decisão do `[ENRICK]` que pôs o `Tema` na doca: o item continua no
   `roda.js`, intocado, e basta apagar esta regra para ele voltar. Esconder onde há outro
   caminho é o oposto de remover. */
@media(max-width:820px){
  .atlas-roda .doca .di[data-k="tema"]{display:none}
}

/* ── 3 · o sol/lua lê o VALOR do ciclo, não o tema do site ──────────────────────────────
   ⚠️ O `roda.css:660-667` acende os círculos por `:root[data-theme]` — o que era certo
   quando o botão ERA o tema do site. Agora o estado é o `data-modo` que o `app.js` escreve.
   Especificidade: o `#thToggle` dá (1,x,x) e vence o (0,4,0) do `roda.css`. */
@media(min-width:821px){
  /* ⛔ O ROTULO AO LADO DOS CIRCULOS CUSTOU 74px E QUEBROU A BARRA: o grupo foi de ~90 para
     164px e a barra de 136,5 para 161 — o portao desta leva diz INALTERADA. ⭐ O rotulo desce
     para uma segunda linha DENTRO do proprio botao: a largura passa a ser a dos dois circulos
     (70px, menos do que os 90 de antes) e a altura cresce onde ha folga, nao onde ha aperto. */
  :root .instrument-wrap .atlas-roda #thToggle{display:inline-grid;
    grid-template-columns:auto auto; justify-items:center; align-items:center;
    gap:1px 2px; width:auto; height:auto; padding:0; background:none; border:0}
  :root .instrument-wrap .atlas-roda #thToggle .tknob{display:none}
  :root .instrument-wrap .atlas-roda #thToggle .th-rot{grid-column:1/-1}
  :root .instrument-wrap .atlas-roda #thToggle .tfixo{opacity:.26; transition:opacity .25s}
  :root .instrument-wrap .atlas-roda #thToggle[data-modo="claro"] .tfl,
  :root .instrument-wrap .atlas-roda #thToggle[data-modo="escuro"] .tfd{opacity:1;
    color:var(--gold)}
  /* ⭐ em `Segue o tema` NENHUM dos dois acende — e é o certo: o valor não é claro nem
     escuro, é "o que a página disser". O rótulo ao lado é quem carrega o sentido. */
  :root .instrument-wrap .atlas-roda #thToggle .th-rot{font-family:var(--mono);
    font-size:max(10px, calc(10px * var(--tscale,1))); letter-spacing:.02em; color:var(--muted); white-space:nowrap}
  :root .instrument-wrap .atlas-roda #thToggle[data-modo="claro"] .th-rot,
  :root .instrument-wrap .atlas-roda #thToggle[data-modo="escuro"] .th-rot{color:var(--gold)}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C21 · A COLUNA DIREITA ENTRA NO ESCOPO "PAINÉIS DO ATLAS"  ·  [DIRETOR · 03/set]
   ═══════════════════════════════════════════════════════════════════════════════════════
   ⛔ ACHADO PELA FOTO, não pela medição: com o site ESCURO e o Atlas em `Claro`, a Roda, a
   barra e o palco clarearam — e a coluna direita ficou PRETA ao lado deles. O contrário
   também: com o site CLARO e o Atlas em `Escuro`, ela ficava clara sozinha.

   A CAUSA: o bloco B5 do `roda.css:55-63` faz a coluna direita seguir `:root[data-theme]`, ou
   seja, o tema do SITE. Era coerente enquanto o instrumento não tinha tema próprio — e virou
   incoerência no instante em que passou a ter. ⭐ A coluna direita É um painel do Atlas; se o
   controle se chama "tema dos painéis do Atlas", ela obedece a ele.

   ⭐⭐ E O RAMO `escuro` NÃO ESCREVE UMA COR SEQUER: `inherit` num custom property pega o valor
   COMPUTADO do pai — e o pai (`.atlas-roda`) já tem os tokens escuros do `pce-tokens.css:90`.
   Desfazer o B5 é, literalmente, mandar herdar. **Zero hex novo neste ramo.**
   ⚠️ O ramo `claro` repete os 13 valores porque não há `--l-*` publicado — é a MESMA dívida já
   declarada no C18, e a MESMA saída (publicar `--l-*` no pce-tokens.css). Não é hex novo: são
   os do `roda.css:61-63`, agora numa quarta cópia. ⛔ Quando os `--l-*` existirem, as quatro
   cópias viram uma.

   ⚠️ E O `color` VEM JUNTO PELA MESMA RAZÃO DO C17: `color` herda o VALOR COMPUTADO, não a
   fórmula. Sem a linha do `color`, o `Claro` com site escuro traria de volta EXATAMENTE o
   título ilegível que o C17 consertou — off-white sobre creme, contraste ~1,03.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:is(.instrument-wrap[data-moldura="claro"],
    :root[data-theme="light"] .instrument-wrap[data-moldura="auto"]) .atlas-roda :is(.right-col,.map-col){
  --shell:#F7F5F0; --surface:#FFFFFF; --surface2:#EFEBE1; --line:#E3DDCE; --line2:#CFC5AE;
  --ink:#262114; --muted:#5E5545; --faint:#92866F;
  --gold:#7A5F14; --gold-hi:#9C7A22; --gold-mid:#6B5210; --gold-lo:#4A3406; --gold-rgb:122,95,20;
  --void:var(--shell); --panel:var(--surface); --panel2:var(--surface2); --track:var(--surface2);
  color:var(--ink)}
/* ⭐ o caminho de volta, sem cor nenhuma: herdar do `.atlas-roda`, que é escuro por canon */
:root[data-theme="light"] .instrument-wrap[data-moldura="escuro"] .atlas-roda :is(.right-col,.map-col){
  --shell:inherit; --surface:inherit; --surface2:inherit; --line:inherit; --line2:inherit;
  --ink:inherit; --muted:inherit; --faint:inherit;
  --gold:inherit; --gold-hi:inherit; --gold-mid:inherit; --gold-lo:inherit; --gold-rgb:inherit;
  --void:inherit; --panel:inherit; --panel2:inherit; --track:inherit;
  color:inherit}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C21 · OS BOTÕES DA CÂMERA SEGUEM O PAINEL, NÃO O SITE  ·  [ENRICK] via [DIRETOR] · 10/set
   ═══════════════════════════════════════════════════════════════════════════════════════
   "Quando troca os temas está bugando as cores." MEDIDO (docs/medicoes/2.43), e a causa NÃO é
   estado escrito uma vez — trocar o tema duas vezes devolve as mesmas cores. É ESCOPO: o cartão
   da câmera troca de cor pelo tema do ATLAS (`data-moldura`, o sol/lua), mas três peças dentro
   dele estão escritas para o tema do SITE:
     · o fundo dos botões ▲◀▶▼⌾+− — `roda.css:226` pinta rgba(7,9,9,.7) sempre, e o claro
       (`roda.css:577-579`) só entra com `:root[data-theme="light"]`;
     · o disco — o mesmo par, `roda.css:564` e `:576`;
     · o polegar — `var(--foil)`, CALCULADO na raiz (`pce-tokens.css:21`): chega aqui com os ouros
       do site, não com os que o painel redefiniu (o mecanismo do C17 — custom property herda o
       VALOR, não a fórmula).
   Os dois discordam exatamente quando site e Atlas discordam — site escuro + Atlas Claro: botão
   cinza sobre cartão branco, glifo a 1,06:1; site claro + Atlas Escuro: botão branco sobre
   cartão escuro, 1,84:1. Nas duas larguras. Nas outras quatro combinações, certo.
   ⭐ O CONSERTO É RE-ESCOPAR, SEM COR NOVA: os MESMOS valores do roda.css, pendurados nos MESMOS
   seletores de escopo que os painéis já usam (C18/C20, acima). O polegar volta a ser a fórmula do
   --foil avaliada DENTRO do painel, com os ouros dele. Onde site e Atlas concordam o resultado é,
   byte a byte, o de antes (provado na 2.43).
   ⚠️ No app.css e não no roda.css: o painel do facilitador carrega o roda.css e NÃO carrega o
   app.css — não tem sol/lua nem `data-moldura`, e fica exatamente como está.
   ⚠️ Os rgba abaixo são CÓPIAS dos do roda.css (a mesma dívida de token já declarada no C18):
   quando os `--l-*` existirem, viram token junto com as outras.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* Atlas CLARO (Claro, ou Segue o tema com o site claro) → o visual claro do roda.css:576-579 */
:is(.instrument-wrap[data-moldura="claro"],
    :root[data-theme="light"] .instrument-wrap[data-moldura="auto"]) .atlas-roda #cam-panel .cj-disco{
  background:radial-gradient(circle at 50% 42%,rgba(122,95,20,.12),rgba(247,245,240,.80))}
:is(.instrument-wrap[data-moldura="claro"],
    :root[data-theme="light"] .instrument-wrap[data-moldura="auto"]) .atlas-roda #cam-panel :is(.cj-s,.cj-zoom button,.cj-move button){
  background:rgba(255,255,255,.82)}
/* Atlas ESCURO com o site claro → o visual escuro do roda.css:226 e :564 */
:root[data-theme="light"] .instrument-wrap[data-moldura="escuro"] .atlas-roda #cam-panel .cj-disco{
  background:radial-gradient(circle at 50% 42%,rgba(200,162,77,.10),rgba(9,14,13,.72))}
:root[data-theme="light"] .instrument-wrap[data-moldura="escuro"] .atlas-roda #cam-panel :is(.cj-s,.cj-zoom button,.cj-move button){
  background:rgba(7,9,9,.7)}
/* o polegar: a fórmula do --foil (pce-tokens.css:21), avaliada com os ouros DO PAINEL */
:is(.instrument-wrap[data-moldura="claro"],
    :root[data-theme="light"] .instrument-wrap[data-moldura="auto"],
    :root[data-theme="light"] .instrument-wrap[data-moldura="escuro"]) .atlas-roda #cam-panel .cj-knob{
  background:linear-gradient(135deg,var(--gold-hi) 0%,var(--gold) 44%,var(--gold-lo) 100%)}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   C22 · UM CTA SÓ — todo botão de preenchimento OURO ganha o molde do "Conversar sobre meu
   próximo passo"  ·  [ENRICK · 10/set] "todos os botões que tenham a mesma paleta"
   ═══════════════════════════════════════════════════════════════════════════════════════
   MEDIDO ANTES (docs/medicoes/2.46): o molde `.s-cta`/`.btn-primary` (10px, .08em, respiro 10px
   14px, canto 9, pulso) e dois botões OURO fora dele — `.btn-cta` ("Ver o tutorial", "Baixar",
   "Completar meu diagnóstico", "Falar com a PCE", "Fazer meu diagnóstico", "Completar agora",
   "Enviar link de acesso": 12px, .06em, 0 22px, 46px de altura, sem pulso) e `.aviso-cta`
   ("Completar": 11px, 9px 12px, ouro SÓLIDO — o `--foil-btn` que ele pede não existe).
   ⭐ Mesma paleta = mesmo molde: tipografia, respiro, canto, preenchimento e pulso da referência.
   ⛔ FORA, porque NÃO são da mesma paleta: `.btn-secondary` (contorno) e `.btn-wa` (verde).
   ⛔ NENHUM TEXTO MUDA — texto de botão é do [MAICK]; aqui só a forma.
   ⚠️ O ALVO DE TOQUE NÃO DESCE: a referência tem 35px, e copiá-la levaria os `.btn-cta` de 46px
      para baixo dos 44px no celular — defeito novo. Em tela de TOQUE eles mantêm a altura de hoje
      (46 e 40): só nela diferem da referência, e só na altura. A própria referência tem 35px no
      toque — defeito que JÁ está no ar; fica FORA desta leva e vai ao registro com dono.
   ⚠️ Botão desligado não pulsa (`:disabled`, e o cartão bloqueado dos Materiais): pulso é convite.
   ⚠️ No FIM do arquivo de propósito: o `.aviso-cta` é declarado na linha ~713 e venceria por
      ordem. O claro (`[data-theme="light"] .btn-cta`, ouro sólido) e o cartão bloqueado
      (`.mat-card.pc-off .btn-cta`) seguem vencendo por especificidade — como antes.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* ⛔ A 1ª VERSÃO SAIU COM 33px E NÃO 35, e foi medido (2.46/2.50): a referência é um `<a>` e HERDA a
   entrelinha da página (1,5 → 15px a 10px); os ouro são `<button>`, que o navegador zera para
   `normal` (~13px). `inherit` faz o botão herdar do MESMO jeito que a referência herda — igual em
   qualquer tamanho de texto (A−/A/A+), sem copiar número. */
.btn-cta,.aviso-cta{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));font-weight:600;
  letter-spacing:.08em;line-height:inherit;padding:10px 14px;border-radius:9px;border:none;background:var(--foil);color:var(--btn-ink);
  min-height:0;animation:cta-pulse 2.4s ease-out infinite}
[data-theme="light"] .aviso-cta{background:var(--gold)}
.btn-cta:disabled,.mat-card.pc-off .btn-cta{animation:none}
@media (pointer:coarse){ .btn-cta{min-height:46px} .aviso-cta{min-height:40px} }
@media (prefers-reduced-motion:reduce){ .btn-cta,.aviso-cta{animation:none!important} }

/* [MAICK · prompt mapa] Quarta coluna apenas na vista Campo. [SESSÃO] 270px. */
@media(min-width:1600px){
  .instrument-wrap .atlas-roda.map-view .main-grid{grid-template-columns:329px minmax(0,1fr) 270px 361px;grid-template-rows:auto 1fr}
  .instrument-wrap .atlas-roda.map-view .main-grid>.instr-topbar{grid-column:2/4;grid-row:1}
  .instrument-wrap .atlas-roda.map-view .main-grid>.left-col{grid-column:1;grid-row:1/3}
  .instrument-wrap .atlas-roda.map-view .main-grid>.center-col{grid-column:2;grid-row:2;min-width:0}
  .instrument-wrap .atlas-roda.map-view .main-grid>.map-col{grid-column:3;grid-row:2}
  .instrument-wrap .atlas-roda.map-view .main-grid>.right-col{grid-column:4;grid-row:1/3}
}
@media(min-width:821px) and (max-width:1599px){
  .instrument-wrap .atlas-roda.map-view .center-col>.map-col{margin-top:12px}
  .instrument-wrap .atlas-roda.map-view .main-grid>.center-col{grid-column:2;grid-row:2;min-width:0}
}
@media(min-width:821px) and (max-width:1120px){
  .instrument-wrap .atlas-roda.map-view .main-grid>.left-col{grid-column:1;grid-row:2}
  .instrument-wrap .atlas-roda.map-view .main-grid>.right-col{grid-column:1/-1;grid-row:3}
}
@media(min-width:821px){
  .instrument-wrap .atlas-roda.map-view .campo-wrap{aspect-ratio:1.18;height:auto;max-height:740px;min-height:0}
}

/* [SESSÃO · 14/09] A lista existente é a alternativa de seleção acessível do mapa. */
.instrument-wrap .ritem:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Feminino / Masculino pertence ao contexto do corpo, não ao painel de câmera. */
.instrument-wrap #atlas-body-host{width:100%}
.instrument-wrap .body-select{display:grid;grid-template-columns:auto minmax(92px,1fr);align-items:center;gap:8px;width:100%;color:var(--muted);font:600 8px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.instrument-wrap .body-options{display:grid;grid-template-columns:1fr 1fr;gap:4px;min-width:0}
.instrument-wrap .body-option{min-width:0;min-height:30px;border:1px solid var(--line2);border-radius:999px;padding:4px 8px;background:transparent;color:var(--muted);font:600 9px var(--mono);letter-spacing:.04em;cursor:pointer}
.instrument-wrap .body-option[aria-pressed="true"]{border-color:var(--gold-lo);background:rgba(var(--gold-rgb),.13);color:var(--gold)}
.instrument-wrap .body-option:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.instrument-wrap .body-option:disabled{opacity:.38;cursor:not-allowed}
.instrument-wrap .body-load-status{grid-column:1/-1;color:var(--faint);font-size:7px;letter-spacing:.04em}

/* Os seletores e chips técnicos seguem a mesma linguagem; as cores de áreas,
   chakras e inteligências permanecem intocadas. */
.instrument-wrap .physical-controls select{
  color-scheme:dark;border-color:color-mix(in srgb,var(--gold) 58%,var(--pce-moss));
  background:linear-gradient(135deg,color-mix(in srgb,var(--pce-moss-deep) 82%,var(--panel)),var(--panel2));
  color:var(--d-gold-hi);accent-color:var(--gold)
}
.instrument-wrap .physical-controls select option{background:var(--pce-moss-deep);color:var(--d-gold-hi)}

/* ═══════════════════════════════════════════════════════════════════════════
   ACESSIBILIDADE VISUAL + CONTINUIDADE COM OS FUNIS · [ENRICK · 16/set]
   O instrumento canônico mantém a sua régua própria; estas regras alcançam a
   leitura e a interface compartilhada das rotas do aplicativo.
   ═══════════════════════════════════════════════════════════════════════════ */
.panel,.card,.evo-item,.prio,.mat-card,.resp-card,.qa,.summary,.next-step,.maf-modal,.maf-pop{
  background-color:color-mix(in srgb,var(--panel) 92%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 18px 48px rgba(0,0,0,.13);
}
.top,.viewhead,.sidebar{
  background-color:color-mix(in srgb,var(--void) 92%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.lead,.card p,.faq-q,.intel-def,.intel-arow,.vitoria,.prio-r,.prio-v,
.w2h-f p,.w2h-do li,.mat-body p,.resp-q,.qa .r,.qa .int,.maf-pop-p,.pf-row{
  font-size:max(15px,calc(14px * var(--tscale,1)));line-height:1.65;
}
.nav-item,.maf-opt{font-size:max(15px,calc(13.5px * var(--tscale,1)))}
.btn,.btn-cta,.btn-primary,.btn-secondary,.btn-wa,.s-cta,.aviso-cta,.act{
  font-size:max(13px,calc(12px * var(--tscale,1)));letter-spacing:.055em;
}
.crumb,.eyebrow,.side-eyebrow,.panel .cap,.inst-selo,.vt-lb,.w2h-lb,.field span,
.maf-step,.summary .s-lb,.qa .q,.qa .prov{
  font-size:max(11px,calc(10px * var(--tscale,1)));line-height:1.5;
}
.s-cta,.btn-primary,.btn-cta,.aviso-cta{
  filter:drop-shadow(0 0 10px rgba(var(--gold-rgb),.24));
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.s-cta:hover,.btn-primary:hover,.btn-cta:hover,.aviso-cta:hover{
  filter:brightness(1.07) drop-shadow(0 0 16px rgba(var(--gold-rgb),.42));
  transform:translateY(-2px);
}
@media(max-width:820px){
  body::before{opacity:.42;background-size:149px 139px,197px 181px,257px 239px,311px 283px,379px 347px}
  .content{padding-left:18px;padding-right:18px}
}
@media(prefers-reduced-motion:reduce){
  body::before{animation:none;opacity:.42}
  body::after{display:none}
  .s-cta,.btn-primary,.btn-cta,.aviso-cta{transition:none;filter:none}
}