/* Casca v10 do Finance. Linkada DEPOIS de revision-v8.css, que não é desta frente.
   Seções com cor forte própria (AA medido em evidence/ultra-implementation/casca/contrast.json),
   índice agrupado, crédito final do Telemetry e correções de troca abrupta. */

/* 1. Tokens de seção: texto forte sobre papel/tinta (AA) e versão clara no escuro. */
:root{
 --sec-0:#0a58a8;--sec-1:#13684a;--sec-2:#5b2ea6;--sec-3:#8a4708;--sec-4:#0b5f6e;
 --sec-on:#ffffff;
}
:root[data-theme=dark]{
 --sec-0:#7cbcff;--sec-1:#5fd6a8;--sec-2:#c7a8ff;--sec-3:#f7b968;--sec-4:#5ad8e8;
 --sec-on:#010214;
}
[data-topic="0"]{--sec:var(--sec-0)}
[data-topic="1"]{--sec:var(--sec-1)}
[data-topic="2"]{--sec:var(--sec-2)}
[data-topic="3"]{--sec:var(--sec-3)}
[data-topic="4"]{--sec:var(--sec-4)}

/* 2. Header: item ativo na cor forte da seção; inativos com filete da própria cor.
   Mesma especificidade de revision-v8.css:62 e carregado depois: prevalece. */
.site-header .topic-link[data-topic]::after{background:var(--sec);opacity:.4;height:2px}
.site-header .topic-link[data-topic][aria-current=page]{background:color-mix(in srgb,var(--sec) 14%,#f8f9fe)!important;color:var(--sec)!important;border-color:var(--sec)!important}
:root[data-theme=dark] .site-header .topic-link[data-topic][aria-current=page]{background:color-mix(in srgb,var(--sec) 18%,#010214)!important}
.site-header .topic-link[data-topic][aria-current=page]::after{background:var(--sec);opacity:1;height:3px}
/* Marcadores das cenas da seção ativa (aria-hidden; o contador do dock é o anúncio). */
.site-header .topic-scenes{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;gap:2px;pointer-events:none}
.site-header .topic-scenes>i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.35}
.site-header .topic-scenes>i[data-state=done]{opacity:.7}
.site-header .topic-scenes>i[data-state=current]{opacity:1;width:10px;border-radius:2px}

/* Barra de progresso segmentada por seção, preenchida na cor da seção. */
.site-header .experience-progress{height:4px;bottom:-2px;background:transparent}
.site-header .experience-progress>i{display:none}
.site-header .progress-sections{display:flex;gap:2px;height:100%}
.site-header .progress-sections>b{display:block;flex-basis:0;min-width:0;height:100%;background:color-mix(in srgb,var(--sec) 22%,transparent);overflow:hidden}
.site-header .progress-sections>b>em{display:block;height:100%;background:var(--sec)}

/* 3. Índice agrupado: cabeçalho de seção colorido; cenas com faixa forte; atual em destaque. */
.index-dialog .chapter-grid.chapter-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-template-rows:none;grid-auto-rows:auto;gap:18px 22px;align-items:start}
.chapter-group{min-width:0;border-top:4px solid var(--sec);padding-top:8px}
.chapter-group-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sec)}
.chapter-group-heading .mono{font-size:14px;font-weight:600}
.chapter-group-items{display:grid;gap:6px}
.index-dialog .chapter-groups .chapter-card{min-height:58px;width:100%;border-top:0;border-left:4px solid var(--sec);border-radius:0 8px 8px 0;padding:8px 10px;background:color-mix(in srgb,var(--sec) 10%,var(--paper));color:var(--ink)}
.chapter-groups .chapter-card .chapter-number{color:var(--sec);font-weight:700}
.chapter-groups .chapter-card:hover .chapter-title{color:var(--sec)}
.chapter-groups .chapter-card:focus-visible{outline:3px solid var(--sec);outline-offset:2px}
.index-dialog .chapter-groups .chapter-card[aria-current=step]{background:var(--sec);color:var(--sec-on);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--sec)}
.chapter-groups .chapter-card[aria-current=step] .chapter-number,.chapter-groups .chapter-card[aria-current=step] .chapter-kind,.chapter-groups .chapter-card[aria-current=step]:hover .chapter-title{color:var(--sec-on)}
@media(max-width:760px){.index-dialog .chapter-grid.chapter-groups{grid-template-columns:1fr;gap:14px}.index-dialog .chapter-groups .chapter-card{min-height:52px}}

/* 4. Crédito final (copiado de telemetry/preview/style.css:313-335). */
.snap-scene>.experience-footer{flex:0 0 26px;min-height:26px;padding:4px 0 0;justify-content:center;color:var(--muted);font-size:14px;line-height:22px}
.experience-footer p{font-size:inherit;max-width:none;line-height:inherit}
@font-face {font-family:'Plus Jakarta Sans';src:url('../brand/plus-jakarta-sans.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap;}
@font-face {font-family:'Libre Baskerville';src:url('../brand/libre-baskerville.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap;}
:root {--font-logo:'Plus Jakarta Sans',system-ui,sans-serif;--font-logo-i:'Libre Baskerville',Georgia,serif;}
.snap-scene>.experience-footer {flex:0 0 36px;min-height:36px;line-height:30px;}
.experience-footer p {display:flex;align-items:center;justify-content:center;gap:8px;}
.experience-footer .logo-foot>span {margin:0;}
.logo-foot {display:inline-flex;align-items:center;gap:.02em;font-family:var(--font-logo);font-size:1.1rem;font-weight:700;letter-spacing:-.02em;text-decoration:none;line-height:1;background:#0c1018;border:1px solid #434b60;border-radius:4px;padding:1px 6px 2px;}
.logo-i { font-family:var(--font-logo-i); font-style:normal; font-weight:700; font-size:1.55em; color:#f97316; -webkit-text-fill-color:#f97316; }
.logo-cons { font-weight:800; color:#ffffff; -webkit-text-fill-color:#ffffff; }
.logo-ai { font-weight:800; color:#ef4444; -webkit-text-fill-color:#ef4444; }
[data-theme="dark"] .logo-cons { color:#ffffff; -webkit-text-fill-color:#ffffff; }

/* 5. Trocas abruptas (flashes.md). */
/* F1: antes do React montar, o corpo claro aparecia e logo a cortina escura cobria. */
body:has(#root:empty){background:#010214}
/* F2: troca de tema atômica; App.tsx marca data-theme-switch por dois quadros. */
:root[data-theme-switch] *,:root[data-theme-switch] *::before,:root[data-theme-switch] *::after{transition:none!important}
/* F3: índice e saída entram com fade curto, sem estalo do backdrop. */
@keyframes shell-v10-fade{from{opacity:0}to{opacity:1}}
@keyframes shell-v10-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.index-dialog[open],.exit-dialog[open]{animation:shell-v10-rise 160ms ease-out}
.index-dialog[open]::backdrop,.exit-dialog[open]::backdrop{animation:shell-v10-fade 160ms ease-out}
@media(prefers-reduced-motion:reduce){.index-dialog[open],.exit-dialog[open],.index-dialog[open]::backdrop,.exit-dialog[open]::backdrop{animation:none}}