.navDetalhe{display:block;font-size:10px;line-height:12px;color:var(--wb-dim)}
.item:has(.navDetalhe){height:48px}
.papelConferir{margin-top:20px}.papelConferir>summary{cursor:pointer;color:var(--wb-soft);font-size:12px}
.diagTokenNome{display:flex;align-items:center;gap:12px;min-width:0;flex:1}.diagTokenTexto{min-width:0}.diagCor{display:block;width:32px;height:32px;flex:none;border:1px solid var(--wb-line-2);border-radius:2px;background-image:linear-gradient(var(--diag-cor),var(--diag-cor)),conic-gradient(#ddd 25%,#fff 0 50%,#ddd 0 75%,#fff 0);background-size:auto,8px 8px}
.diagTrilho,.diagTrilho .b{display:block;min-width:0}.diagLinha:hover{background:var(--wb-panel);text-decoration:none}.diagLinha[aria-pressed=true]{outline:none;text-decoration:none}
.diagDica{font-size:13px;color:var(--wb-soft);margin-top:20px;max-width:var(--medida-texto)}.diagPick{border:0;background:none;color:inherit;font:inherit;text-align:left;padding:0;cursor:pointer;max-width:100%;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}.diagPick:hover{color:var(--wb-text);text-decoration-color:var(--wb-line-2)}.diagPick[aria-pressed=true]{color:var(--wb-text);text-decoration-color:transparent}.diagToken{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:14px 0;border-top:1px solid var(--wb-line);text-decoration:none}.diagToken code{font:12px var(--wb-mono);overflow-wrap:anywhere}.diagToken small{display:block;color:var(--wb-soft);font:12px/1.6 var(--wb-mono);margin-top:5px;overflow-wrap:anywhere}.diagUso{font:10px var(--wb-mono);color:var(--wb-dim);flex:none}.diagTokens{margin-top:16px}.diagPapel{width:100%;display:flex;align-items:baseline;gap:12px}.diagPapel>span{margin-left:auto}.diagVazamento{font-weight:500}.diagPainel{min-width:0;display:flex;flex-direction:column}.diagPainel .produtoQuadro{height:100%;min-height:0;flex:1}.diagFechar{align-self:flex-end;padding:12px 0}.diagWorker{position:fixed!important;left:0;top:0;width:420px;height:700px;opacity:0;z-index:-10;pointer-events:none;overflow:hidden;contain:strict}.diagDialog{width:calc(100vw - 24px);max-width:760px;height:calc(100dvh - 24px);max-height:none;padding:16px;background:var(--wb-bg);color:var(--wb-text);border:1px solid var(--wb-line-2);margin:auto}.diagDialog::backdrop{background:rgba(0,0,0,.65)}.diagDialog .diagPainel{height:100%}.diagDialog .qBarra{padding:12px}
:root{--wb-center-width:480px}
.diagLayout{display:grid;grid-template-columns:var(--wb-texto-largura,clamp(400px,45%,480px)) minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden}.diagLayout>.paginaCorpo{grid-area:1/1;min-height:0;overflow:auto;max-width:none;padding:40px 28px 72px;min-width:0}.diagLayout>.diagPainel{grid-area:1/2;min-height:0;padding:24px 24px 24px 0;height:100%;overflow:hidden}.diagLayout .diagFechar{display:none}.diagLayout .resumoGrid{display:flex;flex-direction:column;gap:28px}.diagLayout .resumoColuna{display:contents}.diagLayout .resumoCard[data-overview="overview.type"]{order:1}.diagLayout .resumoCard[data-overview="overview.colors"]{order:2}.diagLayout .resumoCard[data-overview="overview.spacing"]{order:3}.diagLayout .resumoCard[data-overview="overview.shape"]{order:4}.diagLayout .soltos{grid-template-columns:minmax(0,1fr)}.diagLayout .flowFilters{flex-wrap:wrap}.diagLayout .flowFilters>label{flex:1;min-width:100px}.resumoMedidas li>button{display:flex;flex-direction:column;gap:5px;width:100%;padding:0}.resumoMedidas button .n{font:32px/1.2 var(--wb-sans);letter-spacing:-.025em;color:var(--wb-text)}.resumoMedidas button .sub{font-size:11px;color:var(--wb-dim)}.resumoMedidas button .inRot{font:10px/1.5 var(--wb-mono);text-transform:uppercase;color:var(--wb-soft)}
.diagLayout .flowEntrada{margin:20px 0}.diagLayout .grupo{margin-bottom:32px}.diagLayout #mapaTokens{padding:0;border:0;background:none}.diagLayout .paleta{grid-template-columns:repeat(4,minmax(0,1fr))}.diagLayout .propostaRodape{order:10}.diagLayout .papelLinha{grid-template-columns:minmax(0,1fr) minmax(64px,100px) 58px auto!important}.diagLayout .papelLinha>.restaurarPapel{grid-column:4!important}.diagLayout .papelLinha>.plOnde{display:none!important}
/* Abaixo (terceiro ato, item 3): sem .lado, o texto rola com a página, sem caixa própria, e a prévia vem depois. */
.diagLayout:not(.lado){grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max(427px,62dvh);overflow-x:hidden;overflow-y:auto;align-content:start}.diagLayout:not(.lado)>.paginaCorpo{grid-area:1/1;height:auto;min-height:auto;overflow:visible;padding:32px 16px}.diagLayout:not(.lado)>.diagPainel{grid-area:2/1;height:100%;padding:0}
@media(max-width:760px){.diagPapel{flex-wrap:wrap}.diagPapel>span{margin-left:0}.diagUso{max-width:90px}.diagToken{gap:10px}.diagToken code{font-size:11px}.diagLayout .papelLinha{grid-template-columns:minmax(0,1fr) minmax(60px,92px) 54px auto!important}}

/* Passagem 2: caminho do achado para a área de edição. Fox · Codex. */
.diagAjuste{flex:none;padding-top:12px;font-size:12px;color:var(--wb-soft)}
.diagAjuste .btn{white-space:normal}

/* Mesa D · alvos visíveis, trilhos e painel em três faixas. Fox · Codex. */
#pgCab{margin-bottom:32px}.pgLinhaTitulo{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.pgLinhaTitulo .fonteSelo{margin:0;flex:none}.pgSub{margin-top:12px}#pgCab>.flowEntrada{margin:12px 0 0}.flowEntradaLink{padding:0;border:0;color:var(--wb-soft);font:12px/1.6 var(--wb-mono);text-align:left;white-space:normal;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px}
.cabFam{gap:10px;flex-wrap:wrap}.cabFam .ajuda{margin-left:auto}
.inspPe .estadoFam{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;flex-basis:100%;min-width:0}.estadoData{white-space:nowrap}.inspPe .estadoFam:empty{display:none}
.inspCorpo .diagLayout .papelLinha{grid-template-columns:minmax(0,1fr) minmax(64px,100px) 58px 64px!important;column-gap:12px}.diagLayout .papelLinha>.restaurarPapel{justify-self:stretch;width:64px;margin:0}.diagLayout .papelLinha>.restaurarPapel[hidden]{display:inline-flex!important;visibility:hidden;pointer-events:none}
#ordem{margin-top:32px;padding:24px 0 0;border-top:1px solid var(--wb-line);font-size:13px;line-height:1.7}#ordem[hidden]{display:none}#ordem p{margin:0}#ordem p+p{margin-top:8px}
.diagLocalizar{width:16px;height:16px;flex:none;fill:none;stroke:var(--wb-soft);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.diagPick{position:relative;min-width:0}.diagPick[aria-pressed=true]{outline:none;font-weight:inherit;text-decoration:none}/* Selecionado (30/10): o mesmo fundo do papel ativo do Editor, sem traço. */.diagPick[aria-pressed=true],.diagPick[aria-pressed=true]:hover{background:var(--wb-panel)}.diagPick:focus-visible{outline:1px solid var(--wb-soft);outline-offset:3px}
/* Mesma linha de frequência em Visão geral, Papéis e Valores soltos. */
.resumoDegrau.diagPick,.cartao .diagLinha{display:grid;grid-template-columns:62px minmax(0,1fr) 32px 16px;gap:10px;align-items:center;width:100%;min-height:28px;padding:5px 6px;margin:0;border-radius:2px;text-decoration:none;font:400 12px/18px var(--wb-mono)}.resumoDegrau .resumoValor{width:auto;white-space:nowrap}.resumoDegrau .resumoTrilho{display:block;width:auto!important;min-width:0;height:10px}.resumoDegrau .resumoTrilho i{display:block;height:100%;max-width:100%}.resumoDegrau b{padding:0;margin:0;text-align:right;min-width:0}
.diagPaleta{display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:6px;align-items:start;width:100%;padding:6px;text-decoration:none}.diagPaleta>.sw{grid-column:1/-1}.diagPaleta small{margin:0;min-width:0}.diagPaleta .diagLocalizar{align-self:center}.diagForma{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px;min-width:0}.diagForma .resumoForma{flex-basis:100%}.diagForma .diagLocalizar{margin-left:auto}
.resumoMeta .diagPick,.resumoFamilia.diagPick{display:inline-flex;align-items:center;gap:8px;padding:6px;min-height:32px}.resumoFamilia.diagPick{width:100%;justify-content:space-between}.diagToken{padding-left:6px;padding-right:6px}.diagToken .diagUso{color:var(--wb-soft)}.diagPapel>.diagLocalizar{margin-left:auto}
.flowLeak.diagVazamento{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;width:100%;padding:16px 8px;text-decoration:none;font-weight:400}.diagVazamento code{grid-column:1/-1;overflow-wrap:anywhere}.diagVazamento .diagAcao{grid-column:1/-1;font:12px var(--wb-sans);color:var(--wb-soft);text-decoration:underline;text-underline-offset:3px}/* no eixo da seta de colapsar do card */
.diagVazamento .diagLocalizar{position:absolute;right:-1px;bottom:16px}.diagVazamento .diagAcao{padding-right:28px}
/* 0.10: Onde vaza com um card por elemento; cada linha é um cenário numa altura só: cenário · excesso · Mostrar no produto · seta */
.vazaElemento .diagGrupoTitulo code{font:400 14px var(--wb-mono);overflow-wrap:anywhere}
.vazaElemento .vazaSel{font:400 11px/20px var(--wb-mono);color:var(--wb-soft);overflow-wrap:anywhere}
.vazaSeletor{display:grid;gap:4px;margin:0;padding:4px 0 14px}.vazaSeletor span{font-size:12px;color:var(--wb-soft)}.vazaSeletor code{font:400 13px/20px var(--wb-mono);color:var(--wb-text);overflow-wrap:anywhere}
.vazaElemento .flowLeak.diagVazamento{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;padding:12px 28px 12px 0}
.vazaElemento .flowLeak.diagVazamento code{display:none}
.vazaElemento .diagVazamento .diagAcao{grid-column:auto;padding-right:0}
.vazaElemento .diagVazamento .diagLocalizar{bottom:auto;top:50%;transform:translateY(-50%)}
@media(max-width:760px){.vazaElemento .flowLeak.diagVazamento{grid-template-columns:minmax(0,1fr) auto}.vazaElemento .diagVazamento .diagAcao{grid-column:1/-1}}
.diagLayout>.diagPainel{padding:0}.diagPainel .quadroFaixas{border:0;height:100%;min-height:0}.quadroFaixas .qFaixaControles,.quadroFaixas .qFaixaMedidas{flex:none;min-width:0;border-bottom:1px solid var(--wb-line)}.quadroFaixas .qBarra{border:0}.quadroFaixas .qFaixaMedidas{min-height:56px;padding:12px 20px}.quadroFaixas .qStatus,.quadroFaixas .qStatus:not(:empty){padding:0;border:0}.quadroFaixas .qViewport{border:0}.diagDialog .quadroFaixas .qFaixaMedidas{padding:12px}
@media(max-width:760px){.diagPick{min-height:44px}.resumoDegrau.diagPick,.cartao .diagLinha,.resumoMeta .diagPick,.resumoFamilia.diagPick,.diagPapel{min-height:44px}.resumoDegrau.diagPick,.cartao .diagLinha{grid-template-columns:52px minmax(0,1fr) 28px 16px;gap:8px}.inspCorpo .diagLayout .papelLinha{grid-template-columns:minmax(0,1fr) minmax(44px,64px) 48px 60px!important;column-gap:8px}.diagLayout .papelLinha>.restaurarPapel{width:60px;padding-left:4px;padding-right:4px}.diagUso{max-width:80px}.flowEntradaLink{font-size:11px}.resumoMeta .diagPick{padding:8px}.diagToken .diagLocalizar{width:16px;height:16px}}

@media(max-width:760px){#pgCab .pgSub{line-height:1.4}}

/* Refinamento de leitura: só o contexto e os estados necessários. */
.quadroFaixas .qFaixaMedidas:has(.qStatus:empty){display:none}
.diagPick:hover{background:color-mix(in srgb,var(--wb-text) 3%,transparent);text-decoration:none}
.diagPick[aria-pressed=true]:focus:not(:focus-visible){outline:none}
.diagPercorrer{display:flex;align-items:center;gap:16px;margin-top:10px;font:12px var(--wb-mono)}
.diagPercorrer button{padding:4px 8px;min-width:32px}
.diagPercorrer button:disabled{opacity:.3;cursor:default}
.docsAcoes{flex-direction:column;align-items:flex-start;gap:12px}
.docsAcoes>.flowNota{margin:0;text-align:left}

/* Cards do Audit mantêm a sequência mesmo quando o preview vira diálogo. */
[data-pg="visao"] .resumoGrid{display:flex;flex-direction:column;gap:28px}
[data-pg="visao"] .resumoColuna{display:contents}
[data-pg="visao"] .resumoCard{width:100%;box-sizing:border-box}
[data-pg="visao"] .resumoCard[data-overview="overview.type"]{order:1}
[data-pg="visao"] .resumoCard[data-overview="overview.colors"]{order:2}
[data-pg="visao"] .resumoCard[data-overview="overview.spacing"]{order:3}
[data-pg="visao"] .resumoCard[data-overview="overview.shape"]{order:4}
[data-pg="soltos"] .soltos,[data-pg="papeis"] .soltos{grid-template-columns:minmax(0,1fr)}
.resumoFamilia.diagPick{display:flex;gap:16px;min-width:0}
.resumoFamiliaNome{min-width:0;overflow-wrap:anywhere}
.resumoFamilia.diagPick>.diagLocalizar{margin-left:auto;flex:0 0 16px}
.resumoDegrau.diagPick>b{padding:0;margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.inspPe .estadoFam{flex-basis:auto;overflow-wrap:anywhere}
.estadoInfo{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:8px;border:0;background:none;color:var(--wb-soft);cursor:help}
.estadoInfo>svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.estadoInfo:focus-visible{outline:1px solid var(--wb-soft);outline-offset:2px}
.estadoDica{display:none;position:absolute;left:0;bottom:calc(100% + 8px);z-index:10;width:max-content;max-width:min(280px,calc(100vw - 80px));padding:10px 12px;border:1px solid var(--wb-line-2);background:var(--wb-bg);color:var(--wb-soft);font:12px/1.6 var(--wb-sans);text-align:left;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}
.estadoInfo:hover>.estadoDica,.estadoInfo:focus>.estadoDica{display:block}

/* Diagnóstico · o mesmo card expansível em Visão geral, Tokens, Valores soltos e Papéis (Luma, 22/10 14:10).
   Seta de traço, a mesma da Proposta, à direita: para baixo fechado, para cima aberto. Fox · Claude Code · 0.9. */
:is(.paginaCorpo [data-pg="visao"],.paginaCorpo [data-pg="tokens"],.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"],.paginaCorpo [data-pg="vaza"]){--dg-pad:var(--wb-section-gap)}
:is(.paginaCorpo [data-pg="visao"],.paginaCorpo [data-pg="tokens"],.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"],.paginaCorpo [data-pg="vaza"]) .diagGrupo{display:block;min-width:0;margin:0;padding:0;border:1px solid var(--wb-line);border-radius:var(--wb-panel-radius);background:none;box-sizing:border-box}
:is(.paginaCorpo [data-pg="visao"],.paginaCorpo [data-pg="tokens"],.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"],.paginaCorpo [data-pg="vaza"]) .diagGrupoCab{display:flex;align-items:center;gap:var(--wb-control-gap);min-height:44px;padding:var(--dg-pad);list-style:none;cursor:pointer;box-sizing:border-box}
:is(.paginaCorpo [data-pg="visao"],.paginaCorpo [data-pg="tokens"],.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"],.paginaCorpo [data-pg="vaza"]) .diagGrupoCab::-webkit-details-marker{display:none}
:is(.paginaCorpo [data-pg="visao"],.paginaCorpo [data-pg="tokens"],.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"],.paginaCorpo [data-pg="vaza"]) .diagGrupoCab:hover{background:color-mix(in srgb,var(--wb-text) 3%,transparent)}
:is(.paginaCorpo [data-pg="visao"],.paginaCorpo [data-pg="tokens"],.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"],.paginaCorpo [data-pg="vaza"]) .diagGrupoCab:focus-visible{outline:1px solid var(--wb-soft);outline-offset:-1px}
:is(.paginaCorpo [data-pg="visao"],.paginaCorpo [data-pg="tokens"],.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"],.paginaCorpo [data-pg="vaza"]) .diagGrupoTexto{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
:is(.paginaCorpo [data-pg="visao"],.paginaCorpo [data-pg="tokens"],.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"],.paginaCorpo [data-pg="vaza"]) .diagGrupoTitulo{display:block;margin:0;font-size:15px;line-height:20px;font-weight:500;color:var(--wb-text)}
:is(.paginaCorpo [data-pg="visao"],.paginaCorpo [data-pg="tokens"],.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"],.paginaCorpo [data-pg="vaza"]) .diagGrupoResumo{font:400 12px/20px var(--wb-sans);color:var(--wb-soft);overflow-wrap:anywhere}
:is(.paginaCorpo [data-pg="visao"],.paginaCorpo [data-pg="tokens"],.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"],.paginaCorpo [data-pg="vaza"]) .diagGrupoCorpo{min-width:0;padding:8px var(--dg-pad) var(--dg-pad)}
:is(.paginaCorpo [data-pg="visao"],.paginaCorpo [data-pg="tokens"],.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"],.paginaCorpo [data-pg="vaza"]) .diagGrupoVazio{display:flex;flex-direction:column;gap:2px;padding:var(--dg-pad)}
.diagSeta{width:14px;height:14px;flex:none;fill:none;stroke:var(--wb-soft);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
details[open]>summary>.diagSeta{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.diagSeta{transition:none}}
/* o cabeçalho tem o mesmo tamanho aberto e fechado (nada pula no clique); o corpo começa 8px abaixo do hover (Lucas, 22/10) */
/* intervalos: 24px entre cards e entre famílias; 16px do título da família até a lista */
.paginaCorpo [data-pg="visao"] .resumoGrid,.paginaCorpo [data-pg="soltos"] .soltos,.paginaCorpo [data-pg="papeis"] .soltos{gap:var(--wb-section-gap)}
.paginaCorpo [data-pg="tokens"] #mapaTokens{display:grid;gap:var(--wb-section-gap);padding:0;border:0;background:none}
.paginaCorpo [data-pg="papeis"] .diagFamilia{margin-top:var(--wb-section-gap)}
.paginaCorpo [data-pg="papeis"] .diagFamilia:first-child{margin-top:0}
.paginaCorpo [data-pg="papeis"] .diagFamilia>h2{margin:0 0 16px}
/* Visão geral: os temas ficam subordinados ao card de cores */
.paginaCorpo [data-pg="visao"] .resumoCard.diagGrupo{padding:0}
.paginaCorpo [data-pg="visao"] .resumoTema{margin:0 0 8px;font-size:13px;line-height:20px;font-weight:500;color:var(--wb-text)}
.paginaCorpo [data-pg="visao"] .resumoTema~.resumoTema{margin-top:24px}
.paginaCorpo [data-pg="visao"] .resumoTema+.paleta{margin-top:0}
/* Tokens: a nota do grupo abre o corpo, com aparência secundária */
.paginaCorpo [data-pg="tokens"] .diagGrupoCorpo>.nota{margin:0;font-size:13px;line-height:20px;color:var(--wb-soft);max-width:var(--medida-texto)}
/* Papéis e Valores soltos: corpo do cartão */
:is(.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"]) .cartaoLinha{margin:0 0 12px}
.paginaCorpo [data-pg="papeis"] .diagPapelAcao{display:inline-flex;align-items:center;gap:var(--wb-control-gap);width:auto;min-height:32px;margin:0 0 12px -6px;padding:6px;font:400 13px/20px var(--wb-sans);color:var(--wb-soft)}
.paginaCorpo [data-pg="papeis"] .diagPapelAcao:hover{color:var(--wb-text)}
:is(.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"]) .cartaoPe{margin-top:16px;padding-top:0;border-top:1px solid var(--wb-line)}
:is(.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"]) .cartaoPe>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--wb-control-gap);min-height:44px;list-style:none;cursor:pointer;font:400 13px/20px var(--wb-sans);color:var(--wb-soft)}
:is(.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"]) .cartaoPe>summary::-webkit-details-marker{display:none}
:is(.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"]) .cartaoPe>summary:hover{color:var(--wb-text)}
:is(.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"]) .cartaoPe>summary:focus-visible{outline:1px solid var(--wb-soft);outline-offset:2px}
:is(.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"]) .cartaoPe .flowNota{margin:0 0 8px;font-size:13px;line-height:20px}
:is(.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"]) .cartaoPe .flowRules{padding-top:0}
:is(.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"]) .cartaoPe .flowRules code{font:400 13px/20px var(--wb-mono);overflow-wrap:anywhere}
@media(max-width:760px){:is(.paginaCorpo [data-pg="visao"],.paginaCorpo [data-pg="tokens"],.paginaCorpo [data-pg="soltos"],.paginaCorpo [data-pg="papeis"],.paginaCorpo [data-pg="vaza"]){--dg-pad:calc(2 * var(--wb-control-gap))}.paginaCorpo [data-pg="papeis"] .diagPapelAcao{min-height:44px}}
/* Ctrl F no próprio item: a seta do item tocado vira "‹ 1 / N ›" (Lucas, 22/10) */
.diagCasca{position:relative;display:block;min-width:0}
.diagCasca.linha>.diagComNav{padding-right:132px}.diagCasca>.diagComNav>.diagLocalizar{visibility:hidden}
.diagAchados{display:flex;align-items:center;gap:4px;font:12px/16px var(--wb-mono);color:var(--wb-text);z-index:2}
/* a seta das linhas fica no eixo da seta de colapsar do card: a folga de 6px da linha a empurrava 7px para dentro (Lucas, 23/10) */
:is(.diagLinha,.diagToken,.resumoDegrau,.resumoFamilia)>.diagLocalizar{translate:7px 0}
.diagCasca.linha>.diagAchados{position:absolute;right:-7px;top:50%;transform:translateY(-50%)}
.diagCasca.bloco>.diagAchados{position:absolute;left:0;top:calc(100% + 4px);padding:4px;border:1px solid var(--wb-line);border-radius:var(--wb-panel-radius);background:var(--wb-bg)}
.diagCasca.bloco>.diagAchados.diagDireita{left:auto;right:0}
.diagCasca.lado{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}.paginaCorpo [data-pg="papeis"] .diagCasca.lado>.diagPapelAcao{margin-bottom:0}
.diagAchados .diagPosicao{font-variant-numeric:tabular-nums;min-width:8ch;text-align:center;white-space:nowrap}
/* só a seta de traço, sem moldura; a área de toque continua com 28px */
.diagAchados .diagPasso{display:grid;place-items:center;width:28px;height:28px;padding:0;margin:0;border:0;border-radius:var(--wb-panel-radius);background:transparent;color:var(--wb-soft);cursor:pointer}
.diagAchados .diagPasso svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.diagAchados .diagPasso:hover:not(:disabled){color:var(--wb-text)}.diagAchados .diagPasso:focus-visible{outline:2px solid var(--wb-text);outline-offset:2px}
.diagAchados .diagPasso:disabled{opacity:.3;cursor:default}
.paginaCorpo [data-pg="vaza"] .diagGrupos{display:grid;gap:var(--wb-section-gap);margin-top:var(--wb-section-gap)}

/* A mesma referência de duas áreas também nas janelas estreitas. */


/* Terceiro ato, item 3: os três modos da prévia. Nenhum move nem esconde o iframe com display:none; ele segue medido. */
.freModos{display:inline-flex;flex:none;gap:2px;padding:2px;border:1px solid var(--wb-line-2);border-radius:var(--wb-control-radius)}.freModos[hidden]{display:none}
.freModo{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:calc(var(--wb-control-radius) - 2px);background:none;color:var(--wb-soft);cursor:pointer}
.freModo:hover{color:var(--wb-text)}.freModo[aria-pressed=true]{background:var(--wb-panel-2);color:var(--wb-text)}.freModo:focus-visible{outline:2px solid var(--wb-text);outline-offset:1px}
.freIcone{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
/* Recolher: a prévia sai de vista (invisível no canto, ainda dimensionada, sem estourar a área); o texto cresce até 720px, à esquerda */
.freRecolhida #pagina.diagLayout.lado{grid-template-columns:minmax(0,720px) minmax(0,1fr)}
.freRecolhida #pagina.diagLayout>.diagPainel{position:absolute;top:0;right:0;z-index:-1;width:min(640px,60vw);height:100%;visibility:hidden;pointer-events:none}
.freRecolhida #pagina.diagLayout:not(.lado)>.diagPainel{height:max(427px,62dvh)}
.freRecolhida .topoVista .qResumoCaixa,.freRecolhida .topoVista .qBarra>label{display:none}
.freAba{position:absolute;top:50%;right:0;z-index:9;transform:translateY(-50%);writing-mode:vertical-rl;min-height:96px;padding:12px 6px;border:1px solid var(--wb-line-2);border-right:0;border-radius:var(--wb-control-radius) 0 0 var(--wb-control-radius);background:var(--wb-bg);color:var(--wb-soft);font:400 12px/16px var(--wb-sans);letter-spacing:.02em;cursor:pointer}
.freAba[hidden]{display:none}.freAba:hover{color:var(--wb-text);border-color:var(--wb-text)}.freAba:focus-visible{outline:2px solid var(--wb-text);outline-offset:2px}
#pagina:not(.lado)>.freAba{position:static;grid-area:2/1;align-self:start;transform:none;writing-mode:horizontal-tb;min-height:44px;margin:0 16px 32px;border:1px solid var(--wb-line-2);border-radius:var(--wb-control-radius);font-size:14px}
/* Ampliar: a prévia ocupa a área da página; a lateral continua; o texto fica atrás, com a rolagem guardada */
.freAmpliada #pagina.diagLayout>.diagPainel{position:fixed;top:var(--fre-top,0);left:var(--fre-left,0);right:0;bottom:0;z-index:30;height:auto;padding:16px;background:var(--wb-bg)}
.freAmpliada #pagina.diagLayout>.paginaCorpo{visibility:hidden}
@media(max-width:760px){.freModo{width:40px;height:40px}}

/* A coluna continua rolável; a barra não ocupa a divisão com a prévia. */
.diagLayout.lado>.paginaCorpo{scrollbar-width:none}
.diagLayout.lado>.paginaCorpo::-webkit-scrollbar{display:none;width:0;height:0}