/* PCE — Explorador da Vida (vendorizado). TODO seletor escopado em .atlas-roda
   para não colidir com o shell do app (.card, .panel, svg.wheel, etc.). */
:root{ --doca-h: calc(90px + env(safe-area-inset-bottom,0px)); }   /* modo imersivo mobile · altura reservada p/ a doca do rodapé (v7) */
.atlas-roda .main-grid{display:grid;grid-template-columns:302px 1fr 336px;gap:14px;margin-top:4px;align-items:start}
@media(max-width:1120px){.atlas-roda .main-grid{grid-template-columns:302px 1fr;gap:12px}.atlas-roda .right-col{grid-column:1/-1}}
@media(max-width:820px){.atlas-roda .main-grid{grid-template-columns:1fr}}
.atlas-roda .left-col{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:12px}
.atlas-roda .left-col .wt{font-family:var(--disp);font-size:max(12px, calc(12px * var(--tscale,1)));letter-spacing:.04em;margin:0 0 2px}
.atlas-roda svg.wheel{width:100%;height:auto;display:block;max-width:none;margin:0}
.atlas-roda .seg{cursor:pointer;transition:opacity .25s,stroke-width .25s;stroke-linejoin:round}
.atlas-roda .wheel.dim .seg:not(.hl){opacity:.2}
.atlas-roda .seg.hl{stroke-width:2.8;filter:url(#gw)}
.atlas-roda .lbltxt{font-family:var(--mono);font-size:max(5.5px, calc(5.5px * var(--tscale,1)));fill:var(--faint);pointer-events:none}
.atlas-roda .center-col{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:8px;display:flex;flex-direction:column}
.atlas-roda .layer-bar{display:flex;gap:2px;margin:4px auto 6px;background:var(--panel2);border:1px solid var(--line);border-radius:2px;padding:2px}
.atlas-roda .layer-btn{font-family:var(--mono);font-size:max(6.5px, calc(6.5px * var(--tscale,1)));letter-spacing:.06em;padding:2px 8px;border:none;background:transparent;color:var(--faint);cursor:pointer;border-radius:1px;transition:.2s;white-space:nowrap}
.atlas-roda .layer-btn:hover{color:var(--muted)}
/* D · o ícone da camada NÃO aparece na barra Exibir do desktop — ele nasce oculto e só acende
   dentro da .folha-camadas (mobile). Ver o bloco da folha, mais abaixo. */
.atlas-roda .lay-ico{display:none}
.atlas-roda .layer-btn.active{background:var(--line2);color:var(--ink)}
.atlas-roda svg.tree{width:100%;height:auto;display:block;max-height:70vh}
.atlas-roda .pilar{fill:var(--line2);opacity:.16}
.atlas-roda .veil-line{stroke:var(--gold-lo);stroke-width:1;stroke-dasharray:2 6;opacity:.5}
.atlas-roda .veil-lbl{font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));letter-spacing:.16em;fill:var(--faint);text-transform:uppercase}
.atlas-roda .path{stroke:var(--line2);stroke-width:2;opacity:.4;transition:stroke .3s,opacity .3s,stroke-width .3s}
.atlas-roda .path.on{stroke:var(--gold);opacity:.85;stroke-width:3}
.atlas-roda .pathnum{font-family:var(--mono);font-size:max(7px, calc(7px * var(--tscale,1)));fill:var(--faint);opacity:.5}
.atlas-roda .seph{cursor:pointer;transition:opacity .3s}
.atlas-roda .tree.dim .seph:not(.hl){opacity:.25}
.atlas-roda .seph .ring{fill:none;stroke:var(--gold-lo);stroke-width:1.2;transition:stroke .3s,stroke-width .3s}
.atlas-roda .seph.hl .ring{stroke:var(--gold-hi);stroke-width:2.4}
.atlas-roda .seph.hl .disc{filter:url(#glow-seph)}
.atlas-roda .daat .ring{stroke-dasharray:3 4}
.atlas-roda .glyph{font-family:'Segoe UI Symbol','Noto Sans Symbols',serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.atlas-roda .snum{font-family:var(--disp);font-weight:700;text-anchor:middle;pointer-events:none;font-size:calc(13px * var(--tscale,1))}
.atlas-roda .sheb{font-family:'Noto Serif Hebrew',serif;text-anchor:middle;fill:var(--gold-hi);pointer-events:none;font-size:calc(16px * var(--tscale,1))}
.atlas-roda .spt{font-family:var(--disp);font-size:max(12px, calc(12px * var(--tscale,1)));letter-spacing:.06em;text-anchor:middle;fill:var(--ink);pointer-events:none}
.atlas-roda .satr{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.12em;text-transform:uppercase;text-anchor:middle;fill:var(--muted);pointer-events:none}
.atlas-roda .chakra-node{cursor:pointer;transition:opacity .3s,transform .3s}
.atlas-roda .chakra-node.hl{filter:url(#glow-chk)}
.atlas-roda .chakra-node.dim{opacity:.08}
.atlas-roda .chakra-node.mid{opacity:.25}
.atlas-roda .gland-node{cursor:pointer;transition:opacity .3s,transform .3s}
.atlas-roda .gland-node.hl{filter:url(#glow-gld)}
.atlas-roda .gland-node.dim{opacity:.04}
.atlas-roda .gland-node.mid{opacity:.12}
.atlas-roda .meridian{opacity:0;transition:opacity .6s}
.atlas-roda .meridian.on{opacity:.1}
.atlas-roda .chakra-label{font-family:var(--mono);font-size:max(6px, calc(6px * var(--tscale,1)));fill:var(--faint);pointer-events:none;transition:opacity .3s}
.atlas-roda .right-col{display:flex;flex-direction:column;gap:4px;max-height:calc(100vh - 80px);overflow-y:auto;padding-right:2px}
.atlas-roda .right-col::-webkit-scrollbar{width:2px}
.atlas-roda .right-col::-webkit-scrollbar-track{background:var(--track)}
.atlas-roda .right-col::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px}
/* B5 · a coluna direita (cards de leitura + card da câmera) SEGUE O TEMA. Só a barra de
   controles e o painel do instrumento (Roda/figura/campo) permanecem escuros por canon.
   Reaponta os tokens de entorno de volta aos valores do tema claro só nesta subárvore; os
   derivados (--panel/--panel2/--void = var(--surface/...)) acompanham por indireção.
   O ouro do card da câmera passa a seguir o tema (claro sobre creme) — é o que o G3 previu. */
:root[data-theme="light"] .atlas-roda .right-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;
  /* aliases legados: o var() num custom prop CONGELA no elemento que o declara (ver app.css:9),
     então re-declara aqui p/ recomputarem contra o --surface claro desta subárvore — senão
     --panel/--panel2 seguem congelados no escuro do .atlas-roda e os cards não clareiam. */
  --void:var(--shell); --panel:var(--surface); --panel2:var(--surface2); --track:var(--surface2);
}
.atlas-roda .area-card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:2px;padding:5px 7px;cursor:pointer;transition:.12s;flex:none}
.atlas-roda .area-card:hover,.atlas-roda .area-card.hl{border-color:var(--c);background:var(--panel2);transform:translateX(2px)}
.atlas-roda .ac-top{display:flex;align-items:center;justify-content:space-between;gap:3px}
.atlas-roda .ac-name{font-size:max(9.5px, calc(9.5px * var(--tscale,1)));font-weight:600;display:flex;align-items:center;gap:3px}
.atlas-roda .ac-dot{width:4px;height:4px;border-radius:50%;background:var(--c);box-shadow:0 0 4px var(--c);flex:none}
.atlas-roda .ac-score{font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));font-weight:600;color:var(--c)}
.atlas-roda .ac-bar{height:1.5px;background:var(--track);margin-top:3px;overflow:hidden}
.atlas-roda .ac-bar i{display:block;height:100%;background:var(--c);width:var(--w)}
.atlas-roda .ac-tags{display:flex;flex-wrap:wrap;gap:1px;margin-top:2px}
.atlas-roda .ac-tag{font-family:var(--mono);font-size:max(6px, calc(6px * var(--tscale,1)));letter-spacing:.02em;padding:1px 3px;border:1px solid var(--line2);color:var(--muted);border-radius:1px;cursor:pointer;transition:.1s}
.atlas-roda .ac-tag b{color:var(--ink);font-weight:500}
.atlas-roda .ac-tag.hl{border-color:var(--gold);color:var(--gold-hi);background:rgba(200,162,77,.08)}
.atlas-roda .info-box{background:var(--panel2);border:1px solid var(--line);border-radius:2px;padding:7px 9px;margin-top:5px;min-height:48px;transition:.3s;font-size:max(10px, calc(10px * var(--tscale,1)))}
.atlas-roda .info-box .it{font-family:var(--mono);font-size:max(7px, calc(7px * var(--tscale,1)));letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.atlas-roda .info-box .ib{color:var(--muted);line-height:1.5}
.atlas-roda .info-box .ib b{color:var(--ink)}
@media(max-width:820px){.atlas-roda .right-col{max-height:none;overflow-y:visible}}

/* Passo 1 (v35) · barra de topo + lista das 12 áreas sob a Roda + coluna direita de leitura */
.atlas-roda .instr-topbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:8px 10px;margin-bottom:10px;background:var(--panel);border:1px solid var(--line);border-radius:3px}
.atlas-roda .tb-grp{display:flex;align-items:center;gap:6px}
.atlas-roda .tb-lbl{font-family:var(--mono);font-size:max(8.5px, calc(8.5px * var(--tscale,1)));letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.atlas-roda .tb-soon{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.06em;padding:3px 8px;border:1px solid var(--line);background:var(--panel2);color:var(--faint);border-radius:2px;opacity:.6;cursor:not-allowed;display:inline-flex;align-items:center}
.atlas-roda .frame-btn{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.06em;padding:3px 8px;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);border-radius:2px;cursor:pointer}
.atlas-roda .frame-btn.active{border-color:var(--gold-lo);color:var(--gold)}
.atlas-roda .soon{font-family:var(--mono);font-size:max(7px, calc(7px * var(--tscale,1)));letter-spacing:.1em;padding:1px 4px;border-radius:3px;background:var(--surface2);color:var(--faint);margin-left:4px}
.atlas-roda .wt-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 2px}
.atlas-roda .wt-seal{font-family:var(--mono);font-size:max(7px, calc(7px * var(--tscale,1)));letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.atlas-roda .rlist{display:grid;gap:3px;margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.atlas-roda .rd-card{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:8px 10px}
.atlas-roda .rd-kick{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.atlas-roda .rd-hint{font-size:max(10px, calc(10px * var(--tscale,1)));line-height:1.5;color:var(--muted)}
.atlas-roda .rd-card .info-box{margin-top:0}
/* 5W2H no card de LEITURA (direita): cada área lit vira linha; a linha (44px) abre o plano.
   Conteúdo .w2h herda de app.css. A lista esquerda volta limpa (sem carets). */
.atlas-roda .ia-list{margin-top:6px;border-top:1px solid var(--line);padding-top:2px;display:flex;flex-direction:column}
.atlas-roda .info-area{border-radius:2px}
.atlas-roda .info-area+.info-area{border-top:1px solid var(--line)}
.atlas-roda .ia-hd{display:flex;align-items:center;gap:6px;min-height:44px;padding:4px 4px}
.atlas-roda .info-area.w2hable>.ia-hd{cursor:pointer}
.atlas-roda .info-area.w2hable:hover>.ia-hd{background:var(--panel2)}
.atlas-roda .ia-dot{width:6px;height:6px;border-radius:50%;flex:none}
.atlas-roda .ia-n{font-size:max(10px, calc(10px * var(--tscale,1)));font-weight:600;color:var(--ink);flex:1;line-height:1.3}
.atlas-roda .ia-v{font-family:var(--mono);font-size:max(9.5px, calc(9.5px * var(--tscale,1)));font-weight:600;color:var(--muted)}
.atlas-roda .ia-cv{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));color:var(--gold-lo);transition:transform .18s;flex:none}
.atlas-roda .info-area.open .ia-cv{transform:rotate(90deg);color:var(--gold)}
.atlas-roda .info-area .w2h-detail{display:none;padding:2px 4px 8px}
.atlas-roda .info-area.open .w2h-detail{display:block}
/* Q4 · selo de estado por linha de área (mesmas cores da legenda de estado; ≥8 saudável / 6–7,9 observação / <6 ação) */
.atlas-roda .ia-est{font-family:var(--mono);font-size:max(7px, calc(7px * var(--tscale,1)));letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;border-radius:3px;border:1px solid currentColor;flex:none;white-space:nowrap}
.atlas-roda .ia-est.fx-ok{color:var(--ok)} .atlas-roda .ia-est.fx-obs{color:var(--watch)} .atlas-roda .ia-est.fx-acao{color:var(--risk)}
/* Q4 · encaminhamento no pé da Leitura em repouso: faixa.proximo + CTA (molde .s-cta do app.css) */
.atlas-roda .rd-enc{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);text-align:center}
.atlas-roda .rd-enc-tx{font-size:max(10.5px, calc(10.5px * var(--tscale,1)));line-height:1.55;color:var(--muted);margin:0 0 9px;text-align:left}
.atlas-roda .rd-enc-cta{white-space:normal}

/* Passo 2 (v35) · filtro por elemento — dropdowns "Exibir" + máscara .filtered */
.atlas-roda .ex-unit{position:relative;display:flex;align-items:center}
/* D1 · o botão INTEIRO da camada abre o menu; o caret é só um marcador dentro dele */
.atlas-roda .dd-mk{font-size:max(8px, calc(8px * var(--tscale,1)));margin-left:6px;color:var(--faint);transition:.15s;display:inline-block}
.atlas-roda .layer-btn[aria-expanded="true"] .dd-mk{color:var(--gold);transform:rotate(180deg)}
.atlas-roda .ddmenu{position:absolute;top:100%;left:0;z-index:20;margin-top:3px;min-width:132px;max-height:250px;overflow-y:auto;background:var(--surface);border:1px solid var(--line2);border-radius:3px;padding:4px;box-shadow:0 12px 34px rgba(0,0,0,.4)}
.atlas-roda .ddmenu[hidden]{display:none}
.atlas-roda .dd-head{display:flex;gap:3px;margin-bottom:4px;border-bottom:1px solid var(--line);padding-bottom:4px}
.atlas-roda .dd-mini{flex:1;font-family:var(--mono);font-size:max(7px, calc(7px * var(--tscale,1)));letter-spacing:.06em;padding:4px;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);border-radius:2px;cursor:pointer}
.atlas-roda .dd-mini:hover{color:var(--ink);border-color:var(--gold-lo)}
.atlas-roda .dd-el{display:block;width:100%;text-align:left;font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.02em;padding:4px 6px;border:none;background:transparent;color:var(--faint);cursor:pointer;border-radius:2px}
.atlas-roda .dd-el[aria-pressed="true"]{color:var(--ink)}
.atlas-roda .dd-el[aria-pressed="false"]{opacity:.5;text-decoration:line-through}
.atlas-roda .dd-el:hover{background:var(--panel2)}
/* F3 · menu rico: cabeçalho + linha .el com miniatura da arte (20px) + nome + tag secundário +
   check ouro; rodapé Mostrar rótulos. A OPACIDADE da miniatura é o indicador de estado. */
.atlas-roda .ddmenu{min-width:210px}
.atlas-roda .mhead{display:flex;align-items:center;gap:6px;margin-bottom:5px;border-bottom:1px solid var(--line);padding-bottom:5px}
.atlas-roda .mh-nm{flex:1;font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.atlas-roda .mh-btns{display:flex;gap:3px}
.atlas-roda .el{display:flex;align-items:center;gap:10px;width:100%;padding:8px 8px;border-radius:7px;border:none;background:none;cursor:pointer;font-size:max(12px, calc(12px * var(--tscale,1)));color:var(--muted);min-height:38px;text-align:left;text-decoration:none}
.atlas-roda .el:hover{background:var(--surface2)}
.atlas-roda .el .bulm{width:20px;height:20px;flex:none;opacity:.45;transition:.15s;background-size:contain;background-repeat:no-repeat;background-position:center;border-radius:3px}
.atlas-roda .el .bulm.bulm-dot{background-image:none;background:radial-gradient(circle,currentColor 0 45%,transparent 55%);border-radius:50%}
.atlas-roda .el[aria-pressed="true"] .bulm{opacity:1}
.atlas-roda .el[aria-pressed="true"]{color:var(--ink)}
/* F3 · o indicador de estado é a OPACIDADE da miniatura (.45/1), não o risco/apagão do menu-texto
   antigo (.dd-el[aria-pressed=false]). Neutraliza aquilo só nas linhas .el. */
.atlas-roda .el[aria-pressed="false"]{opacity:1;text-decoration:none}
.atlas-roda .el .nm2{flex:1}
.atlas-roda .el .tagsec2{font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));letter-spacing:.1em;color:var(--faint)}
.atlas-roda .el .chk{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--gold);opacity:0}
.atlas-roda .el[aria-pressed="true"] .chk{opacity:1}
.atlas-roda .mrot{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
.atlas-roda .mrot span{font-family:var(--mono);font-size:max(9.5px, calc(9.5px * var(--tscale,1)));letter-spacing:.16em;text-transform:uppercase;color:var(--faint);flex:1}
.atlas-roda .mrot-b{font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));letter-spacing:.06em;padding:4px 12px;border-radius:999px;border:1px solid var(--line2);background:none;color:var(--muted);cursor:pointer;min-height:28px}
.atlas-roda .mrot-b[aria-pressed="true"]{background:rgba(var(--gold-rgb),.13);border-color:var(--line2);color:var(--gold)}
@media(max-width:640px){
  .atlas-roda .ddmenu{position:fixed;left:10px;right:10px;bottom:10px;top:auto;max-height:62vh;overflow:auto;border-radius:14px;padding:10px;min-width:0}
  .atlas-roda .el{min-height:46px;font-size:calc(14.5px * var(--tscale,1))}
  .atlas-roda .el .bulm{width:24px;height:24px}
}
.atlas-roda .filtered{display:none!important}

/* ===== Etapa 4 · toggle de vista (Árvore | No corpo) + vista "No corpo" ===== */
.atlas-roda .view-bar{display:flex;gap:2px;margin:2px auto 4px;background:var(--panel2);border:1px solid var(--line);border-radius:2px;padding:2px}
.atlas-roda .view-btn{font-family:var(--mono);font-size:max(7px, calc(7px * var(--tscale,1)));letter-spacing:.08em;padding:3px 12px;border:none;background:transparent;color:var(--faint);cursor:pointer;border-radius:1px;transition:.2s;white-space:nowrap;text-transform:uppercase}
.atlas-roda .view-btn:hover{color:var(--muted)}
.atlas-roda .view-btn.active{background:var(--gold-lo);color:var(--ink)}
.atlas-roda svg.body-view{width:100%;height:auto;display:block;max-height:70vh}
/* M3 · o fundo preto embutido da figura.webp (#010101) sobre o painel (#0C1111) desenhava um
   retângulo. Medido: painel rgb(12,17,17) ≠ cantos da imagem rgb(1,1,1). Correção do comando
   (pretos diferentes → IGUALAR o fundo do painel ao preto da imagem, sem mexer na arte): o painel
   do instrumento e o campo da figura recebem o MESMO preto (#010101), então a borda do retângulo
   some. A arte, os medalhões, as mandalas, as doze cores e as onze alturas ficam INTACTOS. O campo
   3D é coberto pelo próprio canvas; a Roda vive na .left-col (não muda). Vale nos dois temas. */
.atlas-roda .center-col, .atlas-roda #atlas-body{background:#010101}
.atlas-roda .bspine{stroke:var(--gold);stroke-width:.6;opacity:.28}
.atlas-roda .body-view .seph .disc{transition:opacity .3s}
.atlas-roda .body-view image{pointer-events:none}
/* D1 · rótulos do corpo por camada, INDEPENDENTES (não mais exclusivo .lay-*):
   cada camada mostra os seus quando EST[k].rot está ligado; as três coexistem. */
.atlas-roda .body-view .blbl,.atlas-roda .body-view .blead{display:none}
/* [MAICK] V2b · DUAS funções distintas de rótulo:
   1) TOQUE → revela SEMPRE o nome do elemento tocado (.sel), com ou sem Mostrar rótulos. O caminho
      intuitivo (tocar p/ descobrir "o que é isto?") funciona sem configuração prévia. Um por vez (soLabel).
   2) Mostrar rótulos (show-*) → governa só os nomes FIXOS da camada (a panorâmica "mostre tudo").
   O elemento tocado que também é fixo é o MESMO <text> (uma classe extra .sel) → nunca duplica. */
.atlas-roda .body-view .blbl.sel,.atlas-roda .body-view .blead.sel{display:block}
.atlas-roda .body-view.show-seph .b-seph{display:block}
.atlas-roda .body-view.show-chakra .b-chakra{display:block}
.atlas-roda .body-view.show-gland .b-gland{display:block}
/* V3b · texto do SVG escala pelo font-size (só o glifo cresce; x/y e as linhas-guia ficam fixos →
   geometria intacta, não deforma a figura). A régua "SVG não escala" vale p/ o desenho, não p/ texto. */
.atlas-roda .body-view .blbl{font-family:var(--mono);font-size:12px;dominant-baseline:middle;pointer-events:none}
.atlas-roda .body-view .blead{stroke-width:.7;opacity:.5}
/* J3 · rótulos legíveis no mobile. A razão de escala no celular (~278px sobre 778 un) derrubava o
   rótulo de 12 un a ~4,6px. O quadro alarga p/ viewBox -173 -56 888 1417 (setado por JS) e a fonte
   sobe de 12 p/ 25 UNIDADES → ~10px a braço estendido. Divergência declarada do v35 (quadro calibrado
   p/ ~452px). Coordenadas do canon inalteradas — muda só o enquadramento e o corpo da letra, só ≤820. */
@media(max-width:820px){ .atlas-roda .body-view .blbl{font-size:25px} }

/* Etapa 5 · vista "Campo" (canvas 3D sob demanda) */
.atlas-roda .campo-wrap{position:relative;width:100%;aspect-ratio:466/700;min-height:700px;background:#070909;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.atlas-roda .campo-canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.atlas-roda .campo-canvas:active{cursor:grabbing}
.atlas-roda .campo-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));line-height:1.6;color:var(--faint);text-align:center;max-width:82%;pointer-events:none}

/* Bloco A · joystick de câmera (injetado no container do Campo) */
.atlas-roda .campo-joy{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:5;font-family:var(--mono);user-select:none}
/* I2 · "Girar com" + Disco/Setas: rótulo na MESMA linha dos 2 botões, sem contêiner escuro
   (o segmentado de fundo escuro era o mesmo problema do H1). Pílulas independentes abaixo. */
.atlas-roda .cj-mode{display:flex;gap:6px;justify-content:center;align-items:center}
.atlas-roda .cj-m{font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.08em;padding:2px 7px;border:none;background:transparent;color:var(--faint);cursor:pointer;border-radius:2px}
.atlas-roda .cj-m.on{background:var(--line2);color:var(--gold)}
.atlas-roda .cj-disco{position:relative;width:78px;height:78px;border-radius:50%;border:1px solid var(--line2);background:rgba(7,9,9,.55);cursor:grab;touch-action:none}
.atlas-roda .cj-disco[data-on="1"]{cursor:grabbing;border-color:var(--gold-lo)}
.atlas-roda .cj-knob{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--line2);border:1px solid var(--gold-lo);pointer-events:none}
.atlas-roda .cj-setas{display:grid;justify-items:center;gap:2px}
.atlas-roda .cj-row{display:flex;gap:18px}
.atlas-roda .campo-joy button{font-family:var(--mono);cursor:pointer}
.atlas-roda .cj-s,.atlas-roda .cj-move button,.atlas-roda .cj-zoom button{min-width:26px;min-height:26px;font-size:max(11px, calc(11px * var(--tscale,1)));background:rgba(7,9,9,.7);border:1px solid var(--line2);color:var(--muted);border-radius:3px;line-height:1;display:flex;align-items:center;justify-content:center}
.atlas-roda .cj-zoom{display:flex;gap:4px}
.atlas-roda .cj-zoom button{min-width:30px;font-size:calc(15px * var(--tscale,1))}
.atlas-roda .cj-move{display:grid;justify-items:center;gap:2px}
.atlas-roda .campo-joy button:active{border-color:var(--gold-lo);color:var(--gold)}
@media(max-width:820px){.atlas-roda .cj-disco{width:88px;height:88px}.atlas-roda .cj-s,.atlas-roda .cj-move button,.atlas-roda .cj-zoom button{min-width:34px;min-height:34px;font-size:calc(13px * var(--tscale,1))}}

/* Bloco A · joystick — correções: respeitar [hidden] + compactar */
.atlas-roda .campo-joy [hidden]{display:none!important}
.atlas-roda .campo-joy{gap:5px;right:6px;bottom:6px;opacity:.92}
.atlas-roda .cj-disco{width:60px;height:60px}
.atlas-roda .cj-knob{width:24px;height:24px;margin:-12px 0 0 -12px}
.atlas-roda .cj-setas{display:grid}
.atlas-roda .cj-row{gap:14px}
.atlas-roda .cj-s,.atlas-roda .cj-move button,.atlas-roda .cj-zoom button{min-width:22px;min-height:22px;font-size:max(10px, calc(10px * var(--tscale,1)))}
.atlas-roda .cj-zoom button{min-width:26px;font-size:calc(13px * var(--tscale,1))}
@media(max-width:820px){.atlas-roda .cj-disco{width:66px;height:66px}.atlas-roda .cj-s,.atlas-roda .cj-move button,.atlas-roda .cj-zoom button{min-width:28px;min-height:28px;font-size:max(12px, calc(12px * var(--tscale,1)))}}

/* Bloco C · controles (opacidade + componentes) — canto superior-esquerdo do Campo */
.atlas-roda .campo-ctrl{position:absolute;left:8px;top:8px;z-index:5;display:flex;flex-direction:column;gap:6px;font-family:var(--mono);user-select:none}
.atlas-roda .cc-op{display:flex;align-items:center;gap:6px;font-size:max(9px, calc(9px * var(--tscale,1)));letter-spacing:.06em;color:var(--faint)}
.atlas-roda .cc-op input{width:74px;accent-color:var(--gold-lo)}
.atlas-roda .cc-comp{display:flex;flex-wrap:wrap;gap:3px;max-width:150px}
.atlas-roda .cc-comp button{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.05em;padding:2px 6px;border:1px solid var(--line2);background:rgba(7,9,9,.7);color:var(--faint);border-radius:3px;cursor:pointer}
.atlas-roda .cc-comp button.on{color:var(--gold);border-color:var(--gold-lo)}
@media(max-width:820px){.atlas-roda .cc-op input{width:88px}.atlas-roda .cc-comp button{font-size:max(10px, calc(10px * var(--tscale,1)));padding:3px 8px}}

/* #7 · chip "isolar" (modo: tocar um ponto mostra só ele) */
.atlas-roda .cc-iso{border-style:dashed!important}
.atlas-roda .cc-iso.on{color:var(--gold)!important;border-color:var(--gold)!important;background:rgba(200,162,77,.12)!important}

/* Etapa 1 mobile (v7) · trilho de 4 páginas + doca + indicador — aditivo, só ≤820px.
   Sem .doca-on = layout empilhado (failsafe). */
@media(max-width:820px){
  .atlas-roda{overflow-x:clip;overflow-y:visible}
  .atlas-roda .instr-topbar{display:none}                 /* a doca substitui a barra de topo no mobile */
  /* trilho: 3 páginas irmãs a 100% cada, transladadas por translateX (o deslize acompanha o dedo) */
  /* [MAICK] UM EIXO DE ROLAGEM · cada página mantém a sua altura natural e o JS sincroniza a altura
     do trilho com a página ativa. A rolagem fica no documento/app; nenhuma página cria uma barra
     vertical própria. align-items:flex-start evita esticar páginas curtas até a maior.
     [MAICK · candidato (a), leva Z] teto = 100dvh − 252px. Os 252 são o cromo REAL em fluxo fora da
     coluna, MEDIDO (mock 360/390, doca fixed): a reserva antiga de −200 deixava a JANELA rolar 50px
     (segundo eixo). DECOMPOSIÇÃO — refazer este número se QUALQUER parcela mudar (mesma dependência
     do quadro da figura e do passo dos rótulos):
        #app padding-top .......... 48  (limpa o .top fixo)
        viewhead (faixa Meu Atlas)  60
        .content padding-top ...... 14
        .instrument-wrap margin-top  6
        .inst-selo (2+12+8) ....... 22
        .atlas-roda padding-top ...  8
        .main-grid margin-top .....  4
        .content padding-bottom ... 90  (reserva da doca)
        ---------------------------------
        total ..................... 252
     Medido com −252: sobra externa = 0 nas duas larguras e a coluna termina no topo da doca. */
  .atlas-roda .main-grid.doca-on{display:flex;flex-wrap:nowrap;gap:0;align-items:flex-start;will-change:transform}
  .atlas-roda .main-grid.doca-on>.left-col,
  .atlas-roda .main-grid.doca-on>.center-col,
  .atlas-roda .main-grid.doca-on>.right-col{flex:0 0 100%;min-width:100%;max-width:100%;
    max-height:none;overflow:visible}
  /* ⚠️ ARMADILHA (decisão 3): a coluna é flex-column e o #atlas-body tem max-height:70vh — com
     max-height NA COLUNA a figura ENCOLHERIA (flex-shrink) p/ caber, falseando o "não rola" e
     violando a decisão 3. flex-shrink:0 nos filhos mantém o tamanho real e a página ROLA em vez de
     encolher. Vale p/ QUALQUER coluna flex que ganhe max-height. */
  .atlas-roda .main-grid.doca-on>.left-col>*,
  .atlas-roda .main-grid.doca-on>.center-col>*,
  .atlas-roda .main-grid.doca-on>.right-col>*{flex-shrink:0}
  /* banner da inteligência limitante como 1ª seção da página (clonado pelo JS em cada uma) */
  .atlas-roda .main-grid.doca-on .summary{margin:0 0 12px;flex:none}
  /* TRAP 1 · a página do campo NUNCA some por display:none (o canvas precisa de clientWidth/Height
     p/ o aspect da câmera); fica fora da tela por translateX. Vence o display:none inline do showView. */
  .atlas-roda .doca-on .page-campo #atlas-campo{display:block!important}
  .atlas-roda .doca-on .page-campo #campo-rodape,
  .atlas-roda .doca-on .page-campo #cam-panel{display:block!important}
  .atlas-roda .doca-on .page-figura #atlas-body{display:block!important}
  /* A leitura pertence à ação feita no humanoide. Mantém texto e a arte SVG no mesmo fluxo,
     logo abaixo da figura, com largura total e sem recorte lateral. */
  .atlas-roda .doca-on .page-figura>#atlas-body+.rd-card{margin-top:10px;scroll-margin-top:96px}
  .atlas-roda .doca-on .page-figura>.arte-ponto{width:100%;margin-top:8px}

  /* indicador de 4 pontos, ativo em pílula de 20px (uma fonte de verdade: pag → .on) */
  .atlas-roda .doca-dots{display:flex;gap:6px;justify-content:center;padding:6px 0 2px}
  .atlas-roda .doca-dots i{width:6px;height:6px;border-radius:50%;background:var(--line2);transition:.25s}
  .atlas-roda .doca-dots i.on{width:20px;border-radius:3px;background:var(--gold)}

  /* MODO IMERSIVO (opção B) · doca no RODAPÉ FIXO (valores literais do v7).
     wrapper .doca = pointer-events off (deixa o padder passar o toque); pílula .docain = a peça
     física. env(safe-area-inset-bottom) no PADDING (nunca margin) p/ o
     iPhone com barra de gesto. --doca-h reserva espaço no conteúdo (última linha não some sob a doca).
     AB1 · a APARÊNCIA da pílula (fundo, blur, borda, raio, sombra, padding — inclusive a luz
     interna 1px) SAIU daqui p/ .pce-pill, no pce-tokens.css, dentro da MESMA @media 820. A doca
     consome a classe pelo roda.js (initDoca). Aqui fica só o que é da DOCA: o toque, a
     distribuição dos 6 itens e a transição do recolher. Mudar a aparência = mexer no .pce-pill,
     e isso muda a tab bar junto — é esse o ponto da fonte única. */
  .atlas-roda .doca{position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:0 10px calc(8px + env(safe-area-inset-bottom,0px));pointer-events:none}
  .atlas-roda .doca-bar.docain{pointer-events:auto;display:flex;justify-content:space-around;gap:2px;
    background:rgba(12,17,16,.72);   /* C4 · o FUNDO voltou p/ cá: escuro porque o INSTRUMENTO é escuro, não porque é pílula */
    transition:transform .24s ease}
  .atlas-roda .di{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:40px;min-height:48px;
    padding:2px;border:none;background:transparent;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .atlas-roda .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}
  .atlas-roda .di svg{width:19px;height:19px;transition:transform .18s}
  .atlas-roda .di .tt{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.04em;color:rgba(237,230,214,.52)}
  .atlas-roda .di[aria-current="true"]{color:var(--gold-hi)}
  .atlas-roda .di[aria-current="true"] .tt{color:var(--gold-hi)}
  .atlas-roda .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)}
  .atlas-roda .di[aria-current="true"] svg{transform:scale(1.08)}
  .atlas-roda .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}
}

/* Commit 2 (v7) · folha Camadas: os três menus F3 num bottom-sheet; a doca abre. ≤820px.
   Reusa os .ddmenu (mesma estrutura/handlers); dentro da folha eles voltam ao fluxo normal
   (empilhados) em vez de virarem cada um um bottom-sheet fixo (regra ≤640 acima). */
@media(max-width:820px){
  .atlas-roda .folha-scrim{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .22s}
  .atlas-roda .folha-scrim.aberta{opacity:1;pointer-events:auto}
  .atlas-roda .folha-camadas{position:fixed;left:10px;right:10px;bottom:10px;top:auto;z-index:46;
    max-height:72vh;overflow:auto;background:var(--surface);border:1px solid var(--line2);border-radius:16px;
    /* V1 · a doca (fixed, z-60, --doca-h) fica POR CIMA da folha; sem esta reserva a última linha
       (ex.: Mostrar rótulos em Glândulas) ficava sob a doca e inalcançável. padding-bottom reserva a
       altura da doca (já inclui a safe-area) + folga, e a folha rola por dentro respeitando isso. */
    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}
  .atlas-roda .folha-camadas.aberta{transform:none}
  .atlas-roda .folha-camadas::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 10px}
  .atlas-roda .folha-hd{display:flex;align-items:center;margin-bottom:8px}
  .atlas-roda .folha-ttl{flex:1;font-family:var(--disp);font-size:calc(15px * var(--tscale,1));color:var(--gold-hi)}
  .atlas-roda .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}
  /* D2 (sanfona) · o `display:block!important` SAIU daqui. Ele vencia o
     `.atlas-roda .ddmenu[hidden]{display:none}` e era o que mantinha as três camadas abertas o
     tempo todo — com ele, o `hidden` que o D1 passou a setar não escondia nada (medido: display
     block, altura 551/459/459 mesmo com o atributo posto).
     ⚠️ Tirar o !important NÃO bastou, e a medição é que disse: as duas regras têm a MESMA
     especificidade (0,3,0) e esta vem DEPOIS no arquivo, então ganhava por ordem. Por isso o
     `display` saiu de vez daqui (um <div> já é block por padrão) e a linha [hidden] abaixo torna
     a intenção explícita, imune a alguém redeclarar display nesta regra depois.
     O `position:static!important` FICA: neutraliza o `position:fixed` que a regra ≤640px dá a cada
     .ddmenu (viraria bottom-sheet dentro de bottom-sheet), e aquela regra é mais específica. */
  .atlas-roda .folha-camadas .ddmenu{position:static!important;max-height:none;min-width:0;
    border:none;border-radius:0;box-shadow:none;background:none;padding:0;margin:0 0 14px;overflow:visible}
  .atlas-roda .folha-camadas .ddmenu[hidden]{display:none}   /* camada fechada — o estado que o .layer-btn alterna */
  .atlas-roda .folha-camadas .ddmenu:last-child{margin-bottom:0}
  /* D3 (sanfona) · a LINHA FECHADA da camada. O .layer-btn foi desenhado p/ a barra Exibir do
     desktop: medido dentro da folha ele vinha `inline-block`, 28px de altura e 214px de largura —
     reprova o alvo de toque. Aqui vira linha inteira, ≥44px. Mesmo padrão que o V1 já usou p/ o
     .mrot-b (28px no dropdown desktop, 44px na folha) — há precedente no arquivo.
     ESCOPADO em .folha-camadas, que só existe se o initDoca rodou (≤820px): o desktop não alcança.
     A seta ▾ (.dd-mk) vai p/ a direita e gira quando a camada abre — o giro lê aria-expanded, o
     hook que já existe; nenhum estado novo. `.cnt` fica como é (off / todos / n/tot): a contagem
     é conteúdo e é do [MAICK] — TREE_DATA tem 10 porque Da'at está fora do array, e o canon diz
     ONZE com Da'at, então rótulo de contagem inventado aqui publicaria doutrina errada. */
  /* E · A LINHA DA CAMADA COM A CARA DO APP [SESSÃO · Enrick, aguarda ratificação do MAICK].
     Os três valores saíram de peças que o app JÁ tem — nada foi inventado:
       · raio 999px (pílula) -> 7px, que é o raio do `.dd-el`, o item de menu logo abaixo dela.
         Nada mais no app é pílula; a linha era a única.
       · cor `--faint` (110,99,80) -> `--ink` (237,230,214), a mesma do `.dd-el`. A linha estava
         mais apagada que o próprio conteúdo que ela abre — medido, e é o que mais destoava.
       · `padding-left` 4px -> 8px, o mesmo do `.dd-el` (o painel do app usa 18px; 8 alinha a linha
         com os seus filhos, que é o que importa aqui).
     O tamanho da fonte NÃO foi mexido: mexer nele mudaria a altura da linha, e o alvo de 44px é
     portão. O `:hover` do desktop também não — esta regra é escopada na folha. */
  .atlas-roda .folha-camadas .layer-btn{display:flex;align-items:center;gap:8px;width:100%;
    min-height:44px;padding:6px 8px;text-align:left;border-radius:7px;color:var(--ink)}
  /* E · o `.cnt` deixa de ser texto solto e vira CHIP. Os valores são os do `.ia-est`, o chip que
     este MESMO arquivo já usa na lista de áreas do instrumento (mono, .06em, uppercase,
     padding 1px 5px, raio 3px, borda de `currentColor`) — mesma superfície, mesma gramática.
     A COR fica dourada, como já era: o `.cnt` é estado da camada, e ouro é o estado no instrumento.
     ⚠️ O TEXTO não muda (off / todos / n/tot) — contagem é conteúdo e é do [MAICK]. */
  .atlas-roda .folha-camadas .layer-btn .cnt{font-family:var(--mono);font-size:max(7px, calc(7px * var(--tscale,1)));letter-spacing:.06em;
    text-transform:uppercase;padding:1px 5px;border-radius:3px;border:1px solid currentColor;
    color:var(--gold);flex:none;white-space:nowrap}
  /* Os três SVGs compartilham caixa, traço e superfície; só aparecem na folha mobile. */
  .atlas-roda .folha-camadas .lay-ico{display:block;width:24px;height:24px;min-width:24px;padding:3px;box-sizing:border-box;flex:none;
    color:var(--gold-lo);border:1px solid var(--line);border-radius:7px;background:rgba(var(--gold-rgb),.035)}
  .atlas-roda .folha-camadas .layer-btn .cnt{margin-left:auto}
  .atlas-roda .folha-camadas .layer-btn .dd-mk{flex:none;transition:transform .18s}
  .atlas-roda .folha-camadas .layer-btn[aria-expanded="true"] .dd-mk{transform:rotate(180deg)}
  /* D5 [SESSÃO · Enrick] · o Restaurar como linha própria ao fim da folha. No desktop ele é um
     chip de 26px na barra Exibir; aqui é alvo de toque (≥44px), linha inteira, separado por um
     filete do bloco das camadas. ESCOPADO em .folha-camadas — o chip do desktop fica como está. */
  .atlas-roda .folha-camadas .ex-reset{display:flex;align-items:center;justify-content:center;width:100%;
    min-height:44px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
    border-left:none;border-right:none;border-bottom:none;border-radius:0;background:none;font-size:max(9px, calc(9px * var(--tscale,1)))}
  /* V1 · na folha (mobile) o toggle Mostrar rótulos é alvo de toque → >=44px (no dropdown desktop fica 28px) */
  .atlas-roda .folha-camadas .mrot-b{min-height:44px;padding:4px 16px}
  .atlas-roda .folha-camadas .mrot{min-height:44px}
  /* Q2 · folha Ajuda (menu): Ver o tutorial + Falar com o suporte + Glossário com busca. Reusa o bottom-sheet. */
  .atlas-roda .folha-ajuda .aj-body{display:flex;flex-direction:column;gap:10px}
  .atlas-roda .folha-ajuda .btn-cta,.atlas-roda .folha-ajuda .aj-wa{display:flex;width:100%;box-sizing:border-box}
  .atlas-roda .aj-glos{margin-top:2px;border-top:1px solid var(--line);padding-top:10px}
  .atlas-roda .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}
  .atlas-roda .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}
  .atlas-roda .aj-search::placeholder{color:var(--faint)}
  .atlas-roda .aj-search:focus{outline:none;border-color:var(--gold-lo)}
  .atlas-roda .aj-glos-list{display:flex;flex-direction:column}
  .atlas-roda .aj-item{border-bottom:1px solid var(--line)}
  .atlas-roda .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)}
  .atlas-roda .aj-item-t{flex:1;font-size:calc(13px * var(--tscale,1));font-weight:600}
  .atlas-roda .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}
  .atlas-roda .aj-item.aberta .aj-item-cv{transform:rotate(90deg);color:var(--gold)}
  .atlas-roda .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}
  .atlas-roda .aj-item.aberta .aj-item-def{display:block}
  .atlas-roda .aj-glos-vazio{font-size:max(12.5px, calc(12.5px * var(--tscale,1)));color:var(--faint);padding:10px 2px}
}

/* Commit 3 (v7) · cabeçalho narrativo por página + gesto. ≤820px.
   Divergência declarada: o comando usa --serif (h2) / --foil-txt (clip) / --gold-txt (kick),
   que NÃO existem neste app → adaptados a --disp (Cinzel), ouro sólido --gold-hi e --gold. */
@media(max-width:820px){
  .atlas-roda .pg-head{padding:2px 2px 0;margin-bottom:2px}
  .atlas-roda .pg-head .kick{font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
  .atlas-roda .pg-head h2{font-family:var(--disp);font-size:calc(24px * var(--tscale,1));letter-spacing:.04em;margin:6px 0 4px;color:var(--gold-hi)}
  .atlas-roda .pg-head .sub{font-size:calc(13.5px * var(--tscale,1));color:var(--muted);line-height:1.65;margin:0 0 14px}
  .atlas-roda .doca-on .left-col .wt-head{display:none}   /* o narrativo substitui o head do card no mobile (evita "Roda da Vida" duplicado) */
  /* Reorg (Etapa 3) · página Diagnóstico: os 8 blocos empilham com respiro; a Roda (bloco 1) e a
     Leitura do ponto (bloco 2) ficam JUNTAS no topo (respiro mínimo entre elas = o portão de 360×740).
     A wt-head "Roda da Vida" volta a aparecer (rotula o bloco 1; o narrativo virou "Diagnóstico", não duplica). */
  .atlas-roda .page-diagnostico > *{margin-top:16px}
  .atlas-roda .page-diagnostico > .pg-head{margin-top:0}
  .atlas-roda .page-diagnostico > .wt-head{display:flex;margin-top:6px;margin-bottom:0}
  .atlas-roda .page-diagnostico > #atlas-wheel{margin-top:2px}
  .atlas-roda .page-diagnostico > .rd-card:not(.diag-criticas){margin-top:8px;scroll-margin-top:106px}   /* leitura do ponto, colada sob a Roda; 4a · scroll-margin compensa o cromo sticky (.top 47 + .viewhead 53) ao trazer o bloco 2 à vista */
  /* [MAICK] · X1: o banner da limitante AGORA aparece nas 3 páginas do trilho, INCLUSIVE Diagnóstico
     (repetir ao trocar é REFORÇO, não redundância — reverte a decisão de semanas atrás, quando ele era
     escondido aqui por "duplicar" as 7 inteligências + próximo passo). A regra antiga
     `html[data-tela="tela-diagnostico"] .summary{display:none}` foi REMOVIDA: era ELA que colapsava o
     banner clonado ao entrar no Diagnóstico (medido: display:none; NÃO era flex-shrink, que está 0 no banner). */
  /* R3b · controle A−/A/A+: pontos centrados, controle à direita, no topo. Alvos ≥44px (não escalam).
     (As regras de font-size do R3a/R3b ficam no FIM do arquivo — precisam vir DEPOIS das regras-base
     de .rd-dl/.rd-title/.ritem p/ vencer por ordem de origem.) */
  .atlas-roda .doca-toprow{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px}
  .atlas-roda .doca-toprow .doca-dots{padding:0}
  .atlas-roda .tscale-ctrl{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;gap:3px}
  .atlas-roda .tscale-ctrl button{min-width:34px;min-height:44px;padding:0 4px;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);border-radius:9px;font-family:var(--mono);font-weight:600;line-height:1;cursor:pointer}
  .atlas-roda .tscale-ctrl button:nth-child(1){font-size:max(11px, calc(11px * var(--tscale,1)))}
  .atlas-roda .tscale-ctrl button:nth-child(2){font-size:calc(13px * var(--tscale,1))}
  .atlas-roda .tscale-ctrl button:nth-child(3){font-size:calc(15px * var(--tscale,1))}
  .atlas-roda .tscale-ctrl button[aria-pressed="true"]{color:var(--gold);border-color:var(--gold-lo);background:color-mix(in srgb,var(--gold) 12%,var(--panel2))}
  /* GESTO · touch-action POR SUPERFÍCIE (K1+K2).
     K1 · o trilho permite rolagem vertical E PINÇA; só o arrasto horizontal fica reservado ao swipe
       de página (pan-y pinch-zoom devolve a pinça que o pan-y sozinho proibia).
     K2 · a figura 2D e a Roda NÃO têm arrasto próprio (toque seleciona) → devolvem rolagem e pinça;
       o range da opacidade devolve só a rolagem vertical (o arrasto horizontal é dele).
     O canvas do campo (.campo-canvas) e o disco (.cj-disco) seguem touch-action:none nas SUAS regras
     (linhas ~184/195) — giram/arrastam nos 2 eixos; são as ÚNICAS superfícies que continuam `none`. */
  .atlas-roda .main-grid.doca-on{touch-action:pan-y pinch-zoom}
  .atlas-roda #atlas-body,
  .atlas-roda #atlas-wheel{touch-action:pan-y pinch-zoom}
  .atlas-roda #cam-panel .cc-op input{touch-action:pan-y}
}

/* Leva 1 (v35) · controles do campo em PAINÉIS (não sobre a cena) */
.atlas-roda #cam-panel{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.atlas-roda #cam-panel .campo-joy{position:static;right:auto;bottom:auto;opacity:1;align-items:stretch;gap:6px}
.atlas-roda .cj-lbl{font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-right:3px}
/* I3 · linha de opacidade SEM fundo: filete no topo (separa do joystick), range flex:1 ocupando
   o livre, valor com min-width fixo alinhado à direita p/ o número não dançar de 9% a 93%. */
.atlas-roda .cc-op{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:max(9px, calc(9px * var(--tscale,1)));letter-spacing:.05em;color:var(--faint);margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.atlas-roda .cc-op span{white-space:nowrap;text-transform:uppercase;letter-spacing:.1em;flex:none}
.atlas-roda .cc-op input{flex:1;accent-color:var(--gold);height:22px}
.atlas-roda .cc-opv{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));color:var(--gold);min-width:38px;text-align:right}
.atlas-roda .campo-rodape{margin-top:8px}
.atlas-roda .campo-comp{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:8px 10px}
.atlas-roda .cc-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.atlas-roda .cc-lbl{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-right:2px}
.atlas-roda .cc-c{font-family:var(--mono);font-size:max(8.5px, calc(8.5px * var(--tscale,1)));letter-spacing:.04em;padding:5px 9px;min-height:32px;border:1px solid var(--line2);background:var(--panel2);color:var(--faint);border-radius:3px;cursor:pointer}
.atlas-roda .cc-c.on{color:var(--gold);border-color:var(--gold-lo)}
.atlas-roda .cc-row2{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.atlas-roda .cc-recentrar{font-family:var(--mono);font-size:max(8.5px, calc(8.5px * var(--tscale,1)));letter-spacing:.06em;padding:5px 12px;min-height:32px;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);border-radius:3px;cursor:pointer}
.atlas-roda .cc-recentrar:hover{color:var(--gold);border-color:var(--gold-lo)}
.atlas-roda .cc-legenda{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));color:var(--faint)}
@media(max-width:820px){
  .atlas-roda .cc-c,.atlas-roda .cc-recentrar{min-height:44px;padding:9px 12px;font-size:max(9.5px, calc(9.5px * var(--tscale,1)))}
  .atlas-roda #cam-panel .cj-disco{width:96px;height:96px}
}

/* Leva 1/R2 · mobile: canvas do campo limitado a 48dvh (controles ficam fora dele) */
@media(max-width:820px){ .atlas-roda .campo-wrap{height:min(56dvh,470px);aspect-ratio:auto;max-height:none;min-height:0} }

/* Campo 3D · menu funcional mobile. A cena volta a ser a peça principal da primeira dobra; os
   controles que ficavam abaixo dela continuam completos, agora agrupados e acessíveis no topo. */
@media(max-width:820px){
  .atlas-roda .campo-mobile-tools{position:relative;z-index:24;margin:0 0 10px;padding:1px 0}
  .atlas-roda .campo-mobile-trigger{width:100%;min-height:54px;display:grid;grid-template-columns:38px 1fr 22px;align-items:center;gap:10px;
    padding:7px 11px;border:1px solid var(--line2);border-radius:12px;background:color-mix(in srgb,var(--panel) 94%,transparent);
    color:var(--ink);box-shadow:0 10px 28px rgba(0,0,0,.34);backdrop-filter:blur(16px);text-align:left;cursor:pointer}
  .atlas-roda .campo-mobile-trigger-ico{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(var(--gold-rgb),.42);
    border-radius:10px;color:var(--gold);background:rgba(var(--gold-rgb),.08)}
  .atlas-roda .campo-mobile-trigger-ico svg{width:21px;height:21px}
  .atlas-roda .campo-mobile-trigger b{display:block;font-family:var(--mono);font-size:max(10px,calc(10px * var(--tscale,1)));letter-spacing:.09em;text-transform:uppercase;color:var(--gold-hi)}
  .atlas-roda .campo-mobile-trigger small{display:block;margin-top:2px;font-size:max(10px,calc(10px * var(--tscale,1)));color:var(--muted)}
  .atlas-roda .campo-mobile-chevron{width:20px;height:20px;color:var(--gold);transition:transform .2s ease}
  .atlas-roda .campo-mobile-tools.aberto .campo-mobile-chevron{transform:rotate(180deg)}
  .atlas-roda .campo-mobile-menu{position:relative;margin-top:6px;max-height:none;overflow:visible;
    padding:10px;border:1px solid var(--line2);border-radius:14px;background:color-mix(in srgb,var(--surface) 98%,transparent);
    box-shadow:0 22px 60px rgba(0,0,0,.68);backdrop-filter:blur(20px)}
  .atlas-roda .campo-mobile-menu[hidden]{display:none!important}
  .atlas-roda .campo-mobile-menu-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 9px;
    font-family:var(--mono);font-size:max(10px,calc(10px * var(--tscale,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
  .atlas-roda .campo-mobile-menu-hd button{width:38px;height:38px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);color:var(--muted);font-size:16px}
  .atlas-roda .campo-mobile-grupo{padding:5px 0;border-top:1px solid var(--line)}
  .atlas-roda .campo-mobile-grupo-titulo,.atlas-roda .campo-mobile-aba-trigger{width:100%;min-height:44px;display:grid;grid-template-columns:22px 1fr 18px;align-items:center;gap:8px;
    padding:7px 9px;border:1px solid var(--line2);border-radius:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--pce-moss-deep) 36%,var(--panel2)),var(--panel2));font-family:var(--mono);text-align:left;
    font-size:max(9px,calc(9px * var(--tscale,1)));letter-spacing:.11em;text-transform:uppercase;color:var(--gold-dk);cursor:pointer}
  .atlas-roda .campo-mobile-grupo-titulo[aria-expanded=true],.atlas-roda .campo-mobile-aba-trigger[aria-expanded=true]{border-color:var(--gold-dk);color:var(--gold-hi-dk);background:color-mix(in srgb,var(--pce-moss) 22%,var(--panel2))}
  .atlas-roda .campo-mobile-aba-icone,.atlas-roda .campo-mobile-aba-icone svg{width:18px;height:18px;display:block}
  .atlas-roda .campo-mobile-aba-chevron{width:17px;height:17px;justify-self:end;transition:transform .18s ease}
  .atlas-roda :is(.campo-mobile-grupo.aberto,.campo-mobile-aba.aberto)>.campo-mobile-grupo-titulo .campo-mobile-aba-chevron,
  .atlas-roda .campo-mobile-aba.aberto>.campo-mobile-aba-trigger .campo-mobile-aba-chevron{transform:rotate(180deg)}
  .atlas-roda .campo-mobile-grupo-corpo[hidden],.atlas-roda .campo-mobile-aba-corpo[hidden]{display:none!important}
  .atlas-roda .campo-mobile-grupo-corpo{padding-top:6px}
  .atlas-roda .campo-mobile-grupo-corpo>.campo-rodape,.atlas-roda .campo-mobile-grupo-corpo>.map-col,
  .atlas-roda .campo-mobile-grupo-corpo>#cam-panel{display:block!important;width:100%;margin:0}
  .atlas-roda .campo-mobile-grupo-corpo .campo-comp{padding:10px;background:var(--panel2)}
  .atlas-roda .campo-mobile-grupo-corpo #cam-panel{padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
  .atlas-roda .campo-mobile-mapa-titulo{display:flex;align-items:center;gap:7px;padding:8px 3px 5px;border-top:1px solid var(--line);font:600 max(8px,calc(8px * var(--tscale,1))) var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--gold-dk)}
  .atlas-roda .campo-mobile-mapa-titulo svg{width:16px;height:16px;flex:none}
  .atlas-roda .campo-mobile-menu>.map-col{display:grid!important;gap:6px;width:100%;margin:0!important}
  .atlas-roda .campo-mobile-menu>.map-col>.rd-card.campo-mobile-aba{margin:0!important;padding:0!important;border:0;background:transparent;overflow:hidden}
  .atlas-roda .campo-mobile-aba-trigger{grid-template-columns:1fr 18px}
  .atlas-roda .campo-mobile-aba-corpo{padding:7px 9px 9px;border:1px solid var(--line2);border-top:0;border-radius:0 0 10px 10px;background:var(--panel2)}
  .atlas-roda .campo-mobile-aba-corpo>.campo-mobile-kick-interno{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .atlas-roda .campo-mobile-aba-corpo :is(p,.map-result){margin:5px 0;font-size:max(10.5px,calc(10.5px * var(--tscale,1)));line-height:1.45}
  .atlas-roda .campo-mobile-aba-corpo .map-title{margin:2px 0 5px;font-size:max(14px,calc(14px * var(--tscale,1)));line-height:1.3}
  .atlas-roda .campo-mobile-aba-corpo .map-range{margin:2px 0;gap:8px}
  .atlas-roda .campo-mobile-aba-corpo .map-range output{font-size:max(20px,calc(20px * var(--tscale,1)))}
  .atlas-roda .campo-mobile-aba-corpo .map-orientation{padding-top:6px}

  /* Câmera e corpo ficam presos à própria cena, acessíveis sem abrir o menu de componentes. */
  .atlas-roda .campo-camera-hud{position:absolute;left:8px;right:8px;top:8px;z-index:12;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
  .atlas-roda .campo-camera-hud-trigger{pointer-events:auto;min-height:44px;display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(var(--gold-rgb),.52);border-radius:12px;background:rgba(7,12,11,.88);color:var(--gold-hi);box-shadow:0 10px 28px rgba(0,0,0,.48);backdrop-filter:blur(14px);font:600 max(9px,calc(9px * var(--tscale,1))) var(--mono);letter-spacing:.08em;text-transform:uppercase}
  .atlas-roda .campo-camera-hud-trigger svg{width:18px;height:18px;flex:none}
  .atlas-roda .campo-camera-hud-chevron{transition:transform .2s ease}
  .atlas-roda .campo-camera-hud.aberto .campo-camera-hud-chevron{transform:rotate(180deg)}
  .atlas-roda .campo-camera-hud-panel{pointer-events:auto;width:100%;margin-top:6px;padding:8px;border:1px solid var(--line2);border-radius:13px;background:rgba(7,12,11,.94);box-shadow:0 18px 46px rgba(0,0,0,.62);backdrop-filter:blur(18px)}
  .atlas-roda .campo-camera-hud-panel[hidden]{display:none!important}
  .atlas-roda .campo-camera-hud-panel #cam-panel{display:block!important;margin:0;padding:0;background:transparent;border:0}
  .atlas-roda .campo-camera-hud-panel #atlas-body-host{margin:0 0 6px}
  .atlas-roda .campo-camera-hud-panel .body-select{display:flex;align-items:center;justify-content:space-between;gap:10px}
}

/* Leva 2 · cartão de leitura preenchido (v35) + faixas + Restaurar + C1 mobile */
.atlas-roda .rd-eyebrow{font-family:var(--mono);font-size:max(7.5px, calc(7.5px * var(--tscale,1)));letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.atlas-roda .rd-title{font-family:var(--disp);font-size:calc(15px * var(--tscale,1));line-height:1.15;margin-bottom:7px}
/* H2 · hebraico DENTRO do título do ponto (span, não linha) + tag Secundário do chakra esplênico */
.atlas-roda .rd-title .hb{font-family:'Noto Serif Hebrew',serif;color:var(--gold-hi);margin-left:8px;font-size:.82em}
.atlas-roda .rd-title .tagsec{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-left:8px;vertical-align:middle}
.atlas-roda .rd-dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0 0 8px}
.atlas-roda .rd-dl dt{font-family:var(--mono);font-size:max(7.5px, calc(7.5px * var(--tscale,1)));letter-spacing:.1em;text-transform:uppercase;color:var(--faint);align-self:center}
.atlas-roda .rd-dl dd{margin:0;font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--ink)}
.atlas-roda .rd-dl .heb{font-family:'Noto Serif Hebrew',serif;color:var(--gold-hi);margin-left:4px}
.atlas-roda .rd-scorebox{display:flex;align-items:baseline;gap:8px;padding-top:6px;border-top:1px solid var(--line)}
.atlas-roda .rd-n{font-family:var(--disp);font-size:calc(26px * var(--tscale,1));line-height:1;color:var(--ink)}
.atlas-roda .rd-est{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:3px;border:1px solid currentColor}
.atlas-roda .rd-est.fx-ok{color:var(--ok)} .atlas-roda .rd-est.fx-obs{color:var(--watch)} .atlas-roda .rd-est.fx-acao{color:var(--risk)}
.atlas-roda .rd-medlbl{font-family:var(--mono);font-size:max(7px, calc(7px * var(--tscale,1)));letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-left:auto}
/* W1 · leitura do ponto: barra = escala 0–10. Trilho neutro + faixa vermelha fixa 0..75% (::before =
   distância até a meta 7,5); ouro [0..média*10] por cima. Acima de 7,5 o ouro cobre a faixa. */
.atlas-roda .rd-bar{position:relative;height:3px;background:var(--track);border-radius:2px;overflow:hidden;margin:5px 0 2px}
.atlas-roda .rd-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:75%;background:rgba(var(--risk-rgb),.5)}
.atlas-roda .rd-bar i{position:relative;display:block;height:100%;background:var(--gold)}
.atlas-roda .faixas{display:flex;flex-direction:column;gap:3px;margin:2px 0 7px}
.atlas-roda .fx{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.04em;color:var(--muted)}
.atlas-roda .fx i{width:6px;height:6px;border-radius:50%;flex:none}
.atlas-roda .fx i.fx-ok{background:var(--ok)} .atlas-roda .fx i.fx-obs{background:var(--watch)} .atlas-roda .fx i.fx-acao{background:var(--risk)}
.atlas-roda .ex-reset{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.06em;padding:3px 9px;min-height:26px;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);border-radius:2px;cursor:pointer}
.atlas-roda .ex-reset:hover{color:var(--gold);border-color:var(--gold-lo)}
@media(max-width:820px){ .atlas-roda #atlas-cam-card{display:none!important} }  /* C1 · câmera migra p/ baixo do canvas */

/* Leva 2 · alvos 44px do joystick no mobile (pointer:coarse) — a câmera migrou p/ baixo do canvas */
@media(max-width:820px){
  .atlas-roda #cam-panel .cj-m{min-height:44px;padding:0 16px;font-size:max(11px, calc(11px * var(--tscale,1)))}
  .atlas-roda #cam-panel .cj-s,
  .atlas-roda #cam-panel .cj-move button,
  .atlas-roda #cam-panel .cj-zoom button{min-width:44px;min-height:44px;font-size:calc(16px * var(--tscale,1))}
  .atlas-roda #cam-panel .cj-disco{width:112px;height:112px}
  .atlas-roda #cam-panel .cj-knob{width:40px;height:40px;margin:-20px 0 0 -20px}
}

/* v3.1 §4.1 · teto do container (v35 .wrap): sem isto o 1fr central infla e a composição colapsa */
.atlas-roda{max-width:1180px;margin:0 auto;padding:34px 24px 80px;box-sizing:border-box}

/* N1 · mobile não leva o padding grande do desktop (o reserva da doca fica no #content da página,
   no app.css — a .atlas-roda não é o último elemento da rota Atlas, então padding aqui abriria um vão). */
@media(max-width:820px){ .atlas-roda{padding:8px 10px 0} }

/* E1 (R4) · joystick em LINHA + valores do v35, adaptado às classes do app */
.atlas-roda #cam-panel .campo-joy{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:6px 0 2px}
.atlas-roda #cam-panel .cj-mode{flex:0 0 100%;margin-bottom:11px}
/* I2 · pílulas independentes (segue o tema no card claro do B5): base sem fundo + borda fina,
   ativa em ouro translúcido 13% + texto/borda ouro. Nada de caixa cheia. */
.atlas-roda #cam-panel .cj-m{font-size:max(9.5px, calc(9.5px * var(--tscale,1)));letter-spacing:.08em;padding:6px 12px;min-height:32px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--muted)}
.atlas-roda #cam-panel .cj-m.on{background:rgba(var(--gold-rgb),.13);border-color:var(--line2);color:var(--gold)}
.atlas-roda #cam-panel .cj-disco{width:92px;height:92px;background:radial-gradient(circle at 50% 42%,rgba(200,162,77,.10),rgba(9,14,13,.72))}
/* H1 · o polegar usa o --foil do TEMA. No escuro o disco é escuro (regra acima) e o foil é
   brilhante; no claro o disco vira pálido (regra light abaixo) e o foil do tema é ouro escuro,
   que acende sobre o pálido (ponta escura ~10.9:1). Reverte o --foil-dk do G2, que foi montado
   supondo o disco sempre escuro — o v35 clareia o disco no tema claro (3 sobreposições). */
.atlas-roda #cam-panel .cj-knob{width:36px;height:36px;margin:-18px 0 0 -18px;background:var(--foil);box-shadow:0 3px 12px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.22)}
.atlas-roda #cam-panel .cj-s{width:36px;height:36px;border-radius:10px}
.atlas-roda #cam-panel .cj-zoom button{width:38px;height:38px;border-radius:11px}
.atlas-roda #cam-panel .cj-move button{width:34px;height:34px;border-radius:9px}
/* H1 · tema claro no painel de câmera (card creme do B5): disco pálido + botões brancos, as
   3 sobreposições do v35 (.jbase/.js/.jz) adaptadas aos nomes do app. Glifo dos botões = --muted
   (escuro no claro) fica legível sobre o branco. No tema escuro nada muda. */
:root[data-theme="light"] .atlas-roda #cam-panel .cj-disco{background:radial-gradient(circle at 50% 42%,rgba(122,95,20,.12),rgba(247,245,240,.80))}
:root[data-theme="light"] .atlas-roda #cam-panel .cj-s,
:root[data-theme="light"] .atlas-roda #cam-panel .cj-zoom button,
:root[data-theme="light"] .atlas-roda #cam-panel .cj-move button{background:rgba(255,255,255,.82)}
@media(max-width:820px){
  .atlas-roda #cam-panel .campo-joy{gap:16px;padding:6px 0}
  .atlas-roda #cam-panel .cj-disco{width:112px;height:112px}
  .atlas-roda #cam-panel .cj-knob{width:44px;height:44px;margin:-22px 0 0 -22px}
  .atlas-roda #cam-panel .cj-s{width:46px;height:46px;font-size:calc(16px * var(--tscale,1))}
  .atlas-roda #cam-panel .cj-zoom button{width:48px;height:48px;font-size:calc(19px * var(--tscale,1))}
  .atlas-roda #cam-panel .cj-move button{width:44px;height:44px;font-size:calc(15px * var(--tscale,1))}
}

/* E4 · pílula + ativo translúcido (fidelidade estrutural; a intensidade .12→.20 é do v3-Paleta) */
.atlas-roda .view-btn,.atlas-roda .layer-btn{border-radius:999px}
.atlas-roda .view-btn.active,.atlas-roda .layer-btn.active{background:rgba(var(--gold-rgb),.12);border:1px solid var(--line2);color:var(--gold)}

/* E2 · contador .cnt + LED nos três botões de camada */
.atlas-roda .layer-btn .led{width:6px;height:6px;border-radius:50%;background:var(--faint);display:inline-block;margin-right:6px;vertical-align:1px;transition:.15s}
.atlas-roda .layer-btn[aria-pressed="true"] .led{background:var(--gold);box-shadow:0 0 7px var(--gold)}
.atlas-roda .layer-btn .cnt{font-family:var(--mono);font-size:max(8px, calc(8px * var(--tscale,1)));letter-spacing:.06em;color:var(--gold);margin-left:6px}
.atlas-roda .layer-btn[aria-pressed="false"] .cnt{color:var(--faint)}

/* E1 · zoom em coluna (v35) para os quatro blocos caberem numa linha só */
.atlas-roda #cam-panel .cj-zoom{flex-direction:column;gap:4px}
.atlas-roda #cam-panel .cj-disco,.atlas-roda #cam-panel .cj-setas,.atlas-roda #cam-panel .cj-zoom,.atlas-roda #cam-panel .cj-move{align-self:center;flex:0 0 auto}

/* B2 · tipografia da barra (v35): botões em caixa de sentença, 11px, pílulas independentes */
.atlas-roda .view-btn,.atlas-roda .layer-btn{font-size:max(11px, calc(11px * var(--tscale,1)));letter-spacing:.06em;padding:5px 11px;text-transform:none;white-space:nowrap}
.atlas-roda .view-bar{background:none;border:none;border-radius:0;padding:0;gap:7px}
.atlas-roda .instr-topbar{gap:20px}
.atlas-roda .tb-grp{gap:7px}
/* B4 · figura 2D nunca cortada: teto de largura, altura por conteúdo (o viewBox agora cabe a figura inteira) */
.atlas-roda svg.body-view{max-width:452px;margin:0 auto}

/* B2 · meio pixel do v35: 11.5px, letter-spacing .08em, padding 6px 11px */
.atlas-roda .view-btn,.atlas-roda .layer-btn{font-size:max(11.5px, calc(11.5px * var(--tscale,1)));letter-spacing:.08em;padding:6px 11px}

/* B1 · lista de áreas = uma linha por área (v35): ponto · nome · score. .dim a 42% na seleção */
.atlas-roda .ritem{display:flex;align-items:center;gap:7px;padding:7px 6px;border-radius:6px;cursor:pointer;font-size:max(10px, calc(10px * var(--tscale,1)));color:var(--muted);touch-action:manipulation}
.atlas-roda .ritem .dot{width:8px;height:8px;border-radius:50%;flex:none}
.atlas-roda .ritem .nm{flex:1;line-height:1.25;color:var(--ink)}
.atlas-roda .ritem .v{font-family:var(--mono);font-size:max(9.5px, calc(9.5px * var(--tscale,1)));font-weight:600;color:var(--muted)}
.atlas-roda .ritem[aria-selected="true"]{background:rgba(200,162,77,.13)}
.atlas-roda .ritem.dim{opacity:.42}
/* U2 · caret + painel 5W2H expansível NA LISTA (conteúdo .w2h herda de app.css) */
.atlas-roda .ritem .ri-cv{font-family:var(--mono);font-size:max(11px, calc(11px * var(--tscale,1)));color:var(--gold-lo);flex:none;transition:transform .18s}
.atlas-roda .ritem.aberta .ri-cv{transform:rotate(90deg);color:var(--gold)}
.atlas-roda .ritem.aberta{background:rgba(200,162,77,.13)}
.atlas-roda .ritem-det{display:none;padding:4px 8px 12px}
.atlas-roda .ritem.aberta + .ritem-det{display:block}
.atlas-roda .ri-vazio{font-family:var(--mono);font-size:max(10px, calc(10px * var(--tscale,1)));letter-spacing:.04em;color:var(--faint);padding:8px 2px}
@media (hover:hover){ .atlas-roda .ritem:hover{background:rgba(200,162,77,.08)} }
@media (pointer:coarse){ .atlas-roda .ritem{min-height:44px} }

/* C2 · pílula nos chips do campo (.fin do v35), Todos/Nenhum (.dd-mini), Disco/Setas (.cj-m) */
.atlas-roda .cc-c,.atlas-roda .cc-recentrar,.atlas-roda .dd-mini,.atlas-roda .cj-m{border-radius:999px}
.atlas-roda .cc-c.on,.atlas-roda .cj-m.on{background:rgba(200,162,77,.14);border-color:#4A3F26;color:#C8A24D}
/* C3a · selo do cabeçalho: pílula dourada translúcida, caixa baixa */
.atlas-roda .wt-seal{text-transform:none;background:rgba(var(--gold-rgb),.14);color:var(--gold);border-radius:5px;padding:3px 7px;font-size:max(8.5px, calc(8.5px * var(--tscale,1)));letter-spacing:.16em}
/* C3b · título do painel: serif (Cinzel) 15px, caixa de sentença, tinta --ink */
.atlas-roda .wt{font-size:calc(15px * var(--tscale,1));letter-spacing:.05em;color:var(--ink)}

/* D2 · escala tipográfica (decisão de produto do Maick; aqui o v35 deixa de ser a referência) */
.atlas-roda .tb-lbl{font-size:max(11px, calc(11px * var(--tscale,1)))}
.atlas-roda .view-btn,.atlas-roda .layer-btn{font-size:max(12.5px, calc(12.5px * var(--tscale,1)))}
.atlas-roda .layer-btn .cnt{font-size:max(11px, calc(11px * var(--tscale,1)))}
.atlas-roda .soon{font-size:max(9.5px, calc(9.5px * var(--tscale,1)))}
.atlas-roda .wt-seal{font-size:max(10px, calc(10px * var(--tscale,1)))}
.atlas-roda .wt{font-size:calc(17px * var(--tscale,1))}
.atlas-roda .ritem{font-size:max(12px, calc(12px * var(--tscale,1)))}
.atlas-roda .ritem .v{font-size:max(11.5px, calc(11.5px * var(--tscale,1)))}
.atlas-roda .lbltxt{font-size:max(8.5px, calc(8.5px * var(--tscale,1)))}
.atlas-roda .dd-el{font-size:calc(14.5px * var(--tscale,1))}
.atlas-roda .blbl{font-size:15px}

/* D3 · interruptor de tema (fica na barra, que é sempre escura → tokens dark do escopo .atlas-roda;
   o botão desliza e troca lua/sol para indicar o tema ativo) */
.atlas-roda .tswitch{position:relative;display:inline-flex;align-items:center;width:64px;height:32px;padding:4px;border-radius:999px;cursor:pointer;border:1px solid var(--line2);background:var(--surface2);transition:background .3s,border-color .3s;flex:none}
.atlas-roda .tswitch:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.atlas-roda .tswitch svg{width:15px;height:15px;display:block}
.atlas-roda .tknob{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line2);color:var(--gold);transition:transform .3s cubic-bezier(.4,0,.2,1),background .3s;z-index:2}
.atlas-roda .tknob svg:nth-child(1){display:block}
.atlas-roda .tknob svg:nth-child(2){display:none}
.atlas-roda .tfixo{position:absolute;top:4px;width:24px;height:24px;display:grid;place-items:center;color:var(--faint);opacity:.75;transition:opacity .3s;z-index:1}
.atlas-roda .tfl{right:4px}
.atlas-roda .tfd{left:4px;opacity:0}
:root[data-theme="light"] .atlas-roda .tknob{transform:translateX(32px)}
:root[data-theme="light"] .atlas-roda .tknob svg:nth-child(1){display:none}
:root[data-theme="light"] .atlas-roda .tknob svg:nth-child(2){display:block}
:root[data-theme="light"] .atlas-roda .tfl{opacity:0}
:root[data-theme="light"] .atlas-roda .tfd{opacity:.75}
@media(max-width:820px){ .atlas-roda .tswitch{width:70px;height:38px;padding:5px} .atlas-roda .tknob,.atlas-roda .tfixo{width:28px;height:28px} .atlas-roda .tknob{top:5px;left:5px} .atlas-roda .tfixo{top:5px} :root[data-theme="light"] .atlas-roda .tknob{transform:translateX(32px)} .atlas-roda .tswitch svg{width:17px;height:17px} }

/* ===== R3a/R3b · escala de texto do instrumento (FIM do arquivo p/ vencer as regras-base por ordem) =====
   R3a: correspondência da leitura maior (era dt 7.5 / dd 10). R3b: TODO o texto legível escala com o
   controle A−/A/A+ via --tscale (0.9/1/1.15). SÓ texto — canvas, SVG e min-height dos alvos NÃO mudam. */
@media(max-width:820px){
  .atlas-roda .rd-dl dt{font-size:max(9px, calc(9px * var(--tscale,1)))}
  .atlas-roda .rd-dl dd{font-size:max(12.5px, calc(12.5px * var(--tscale,1)))}
  .atlas-roda .rd-eyebrow{font-size:max(8px, calc(8px * var(--tscale,1)))}
  .atlas-roda .rd-hint{font-size:max(11px, calc(11px * var(--tscale,1)))}
  .atlas-roda .rd-title{font-size:calc(16px * var(--tscale,1))}
  .atlas-roda .rd-n{font-size:calc(26px * var(--tscale,1))}
  .atlas-roda .rd-est{font-size:max(8.5px, calc(8.5px * var(--tscale,1)))}
  .atlas-roda .ia-n{font-size:max(11px, calc(11px * var(--tscale,1)))}
  .atlas-roda .ia-v{font-size:max(10.5px, calc(10.5px * var(--tscale,1)))}
  .atlas-roda .ia-est{font-size:max(7.5px, calc(7.5px * var(--tscale,1)))}
  .atlas-roda .ritem{font-size:max(10.5px, calc(10.5px * var(--tscale,1)))}
  /* S2 · os filhos da lista das 12 tinham tamanho fixo e anulavam a escala do .ritem (nome herdava,
     valor/seta não). Agora o valor e a seta também escalam. .dot fica fixo (marca de cor, não texto). */
  .atlas-roda .ritem .v{font-size:max(11.5px, calc(11.5px * var(--tscale,1)))}
  .atlas-roda .ritem .ri-cv{font-size:max(11px, calc(11px * var(--tscale,1)))}
}

/* [SESSÃO] Mapa modular: cards isolados, Carbono herdado do instrumento. */
.atlas-roda .map-col{min-width:0;color:var(--ink)}
.atlas-roda .map-col[hidden]{display:none!important}
.atlas-roda .map-col .rd-card{padding:14px;margin-bottom:12px}
.atlas-roda .map-col .rd-kick{font-size:11px;line-height:1.5}
.atlas-roda .map-col p,.atlas-roda .map-result{font-size:13px;line-height:1.65;color:var(--muted);overflow-wrap:anywhere}
.atlas-roda .map-title{font-family:var(--disp);font-size:17px;line-height:1.5;margin:8px 0;color:var(--ink)}
.atlas-roda .map-range{display:flex;align-items:center;gap:12px;margin:8px 0}
.atlas-roda .map-range input{width:100%;min-width:0;min-height:44px;accent-color:var(--gold)}
.atlas-roda .map-range output{font:26px var(--mono);color:var(--gold);min-width:3ch;text-align:right}
.atlas-roda .map-modes{display:flex;flex-wrap:wrap;gap:6px}
.atlas-roda .map-modes button{flex:1;}
.atlas-roda .map-modes button,.instrument-wrap .atlas-roda :is(.cc-c,.cc-recentrar){min-height:44px;padding:6px 8px;border:1px solid var(--line2);border-radius:8px;background:var(--panel2);color:var(--ink);font:12px var(--mono);cursor:pointer}
.atlas-roda .map-modes button[aria-pressed=true],.instrument-wrap .atlas-roda .cc-c[aria-pressed=true]{background:var(--gold-dim);border-color:var(--gold);color:var(--gold)}
.atlas-roda .map-col :is(button,input):focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.atlas-roda .map-orientation{border-top:1px solid var(--line);padding-top:10px}
@media(max-width:820px){.atlas-roda .page-campo .map-col{width:100%;flex-shrink:0;margin-top:12px}}

/* [MAICK · refinement V2] Shared segmented controls; retain the field's 53px strip. */
.instrument-wrap .atlas-roda :is(.cc-c,.cc-recentrar){letter-spacing:.025em;box-sizing:border-box;flex:none}
.instrument-wrap .atlas-roda :is(.cc-c,.cc-recentrar):hover{border-color:var(--gold);color:var(--gold)}
.instrument-wrap .atlas-roda :is(.cc-c,.cc-recentrar):focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.instrument-wrap .atlas-roda .campo-comp{border-radius:3px;background:var(--panel);gap:12px;padding:14px}
.instrument-wrap .atlas-roda .cc-lbl{font:11px var(--mono);letter-spacing:.14em;color:var(--gold)}
.instrument-wrap .atlas-roda .cc-row{gap:6px}
@media(min-width:821px) and (max-width:1599px){.instrument-wrap .atlas-roda :is(.cc-c,.cc-recentrar){font-size:10px;letter-spacing:0;padding-inline:6px}}

.instrument-wrap .atlas-roda .cc-c[aria-pressed=true]{background:var(--panel2);box-shadow:inset 0 -2px var(--gold)}

/* MOBILE · hover da Roda é apenas um realce ótico. A leitura completa acontece no clique,
   evitando reflow do trilho quando um mouse atravessa várias fatias. */
@media(max-width:820px) and (hover:hover){
  .atlas-roda .seg:hover{opacity:1;stroke:var(--gold);stroke-width:2.2px}
}

/* MOBILE · câmera/corpo compacto e preso ao canto da cena. As regras ficam no fim do arquivo
   para vencer os alvos grandes do painel quando ele ainda ocupava um bloco próprio. */
@media(max-width:820px){
  .atlas-roda .campo-camera-hud{left:7px;right:7px;top:7px;width:auto}
  .atlas-roda .campo-camera-hud-trigger{min-height:40px;padding:6px 9px;gap:6px;border-radius:10px}
  .atlas-roda .campo-camera-hud-trigger svg{width:16px;height:16px}
  .atlas-roda .campo-camera-hud-panel{width:100%;margin-top:5px;padding:6px;border-radius:11px;background:rgba(7,12,11,.80)}
  .atlas-roda .campo-camera-hud-panel #atlas-body-host{margin-bottom:4px}
  .atlas-roda .campo-camera-hud-panel .body-select{gap:6px}
  .atlas-roda .campo-camera-hud-panel #cam-panel .campo-joy{display:grid;grid-template-columns:minmax(86px,1fr) 52px 102px 34px;align-items:center;justify-content:stretch;gap:5px;padding:1px 0}
  .atlas-roda .campo-camera-hud-panel #cam-panel .cj-mode{min-width:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:3px}
  .atlas-roda .campo-camera-hud-panel #cam-panel .cj-mode .cj-lbl{grid-column:1/-1;margin:0;text-align:left;font-size:max(7px,calc(7px * var(--tscale,1)))}
  .atlas-roda .campo-camera-hud-panel #cam-panel .cj-m{min-width:0;min-height:30px;padding:0 5px;font-size:max(8px,calc(8px * var(--tscale,1)))}
  .atlas-roda .campo-camera-hud-panel #cam-panel .cj-disco{width:52px;height:52px}
  .atlas-roda .campo-camera-hud-panel #cam-panel .cj-knob{width:24px;height:24px;margin:-12px 0 0 -12px}
  .atlas-roda .campo-camera-hud-panel #cam-panel .cj-row{gap:2px}
  .atlas-roda .campo-camera-hud-panel #cam-panel .cj-s,
  .atlas-roda .campo-camera-hud-panel #cam-panel .cj-move button{width:32px;min-width:32px;height:30px;min-height:30px;font-size:calc(12px * var(--tscale,1))}
  .atlas-roda .campo-camera-hud-panel #cam-panel .cj-zoom{gap:3px}
  .atlas-roda .campo-camera-hud-panel #cam-panel .cj-zoom button{width:34px;min-width:34px;height:30px;min-height:30px;font-size:calc(15px * var(--tscale,1))}
  .atlas-roda .campo-camera-hud-panel #cam-panel .cc-op{margin-top:4px;padding-top:4px;gap:6px}
  .atlas-roda .campo-camera-hud-panel #cam-panel .cc-op input{min-width:0;height:18px}
  .atlas-roda .campo-camera-hud-panel #cam-panel .cc-opv{min-width:30px}

  /* Atalhos de enquadramento ficam na própria cena, fora do painel de câmera. Assim as três
     ações mais frequentes permanecem visíveis sem cobrir o humanoide ou alongar o menu. */
  .atlas-roda .campo-view-presets{position:absolute;left:7px;bottom:7px;z-index:11;display:flex;gap:4px;padding:4px;
    border:1px solid var(--line2);border-radius:11px;background:rgba(7,12,11,.88);box-shadow:0 12px 30px rgba(0,0,0,.46);backdrop-filter:blur(14px)}
  .atlas-roda .campo-view-presets button{min-height:36px;display:flex;align-items:center;gap:5px;padding:0 8px;border:1px solid transparent;border-radius:8px;
    background:transparent;color:var(--muted);font:600 max(8px,calc(8px * var(--tscale,1)))/1 var(--mono);letter-spacing:.05em;cursor:pointer}
  .atlas-roda .campo-view-presets button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;flex:none}
  .atlas-roda .campo-view-presets button:is(:hover,:focus-visible,.is-active){border-color:var(--gold-lo);background:rgba(var(--gold-rgb),.13);color:var(--gold-hi)}
  .atlas-roda .campo-view-presets button:active{transform:scale(.96)}
  .atlas-roda .campo-preset-status{position:absolute;left:50%;bottom:54px;z-index:12;max-width:calc(100% - 28px);padding:7px 10px;border-radius:9px;
    background:rgba(7,12,11,.92);color:var(--gold-hi);font:600 max(8px,calc(8px * var(--tscale,1)))/1.25 var(--mono);text-align:center;transform:translateX(-50%);pointer-events:none}
  .atlas-roda .campo-preset-status:empty{display:none}
}

@media(max-width:390px){
  .atlas-roda .campo-view-presets button{padding-inline:7px}
  .atlas-roda .campo-view-presets button span{display:none}
}