/* Organismo — pele dos menus (PRODUCT.md, Brand Commitments). O tecido vivo do logo fica nas bordas e nas conexões; o
   centro, onde se lê e decide, fica limpo. Um filamento liga as operações e seus nós respondem ao estado real: aceso só
   com a operação em curso, um pulso quando ela começa. Destaque forte só com motivo. Primeira tela: Processamento. */
:root{
 --tissue:#ff7a2e;--tissue-hot:#ffb15c;--tissue-core:#ffe3ad;--tissue-deep:#8a2f0d;
 --slide:#071419;--slide-2:#0b1d23;--rule:#1c3a42;--rule-soft:#14303780;
 --ink:#e8efe8;--ink-soft:#a9bfbe;--ink-faint:#7d9798;--human:#5fd8e8;--wound:#ff6b5a;
}
/* Tela inteira: o Processamento, a Pesquisa, a Evolução e o Mundo cobrem os controles do mapa em vez de dividir a tela com eles. */
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub)[open]{inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));border:0;border-top:1px solid #ff7a2e8c;border-radius:0;background:linear-gradient(180deg,var(--slide-2),var(--slide) 40%);box-shadow:none;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"top" "event" "state" "body";row-gap:6px}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub)::backdrop{background:#020809d9}
/* Faixa da economia: título, saldo do dia, reserva e Detalhar, numa linha. */
body.map-first #economy-dialog .economy-top{grid-area:top;display:flex;align-items:center;gap:18px;margin:0;min-height:44px}
body.map-first #economy-dialog .economy-top h2{flex:none;margin:0;color:var(--ink);font-size:24px}
body.map-first #economy-dialog .economy-strip{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:16px}
body.map-first #economy-dialog #economy-net-strip{flex:none;font:600 26px/1 var(--display);color:var(--tissue-hot);font-variant-numeric:tabular-nums}
body.map-first #economy-dialog #economy-net-strip.is-deficit{color:#ff6b5a}
body.map-first #economy-dialog .economy-reserve{flex:none;display:grid;gap:4px;font:12px/1.2 var(--body);color:var(--ink-soft);font-variant-numeric:tabular-nums}
body.map-first #economy-dialog .economy-reserve-bar{display:block;width:120px;height:3px;border-radius:3px;background:var(--rule);overflow:hidden}
body.map-first #economy-dialog .economy-reserve-bar em{display:block;height:100%;background:var(--tissue);transform-origin:left center;transform:scaleX(var(--w,0));transition:transform .5s cubic-bezier(.16,1,.3,1)}
body.map-first #economy-dialog .economy-more{flex:none;min-height:44px;padding:0 6px;border:0;background:none;color:var(--ink-soft);font:600 13px var(--body);text-decoration:underline;text-decoration-color:#7d979880;text-underline-offset:4px;cursor:pointer}
body.map-first #economy-dialog .economy-top .close{flex:none;width:44px;height:44px;border:1px solid var(--rule);border-radius:5px;background:transparent}
/* A Raiz: pende da borda superior logo depois do título, como a cauda do "0" do logo (DESIGN.md, Shapes). Assinatura da
   IA, não contador: adormecida (filamentos frios, pontas apagadas), acordada com alguma operação em curso, um pulso do
   caule às pontas quando algo começa e uma contração quando uma operação termina. */
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz{flex:none;align-self:flex-start;width:72px;height:56px;margin:-11px -10px 0 -6px;overflow:visible;pointer-events:none;transform-origin:12px 1px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz path{fill:none;stroke-linecap:round}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz .raiz-stem{stroke:#ff7a2e;stroke-opacity:.8}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz .raiz-b1{stroke:#ff7a2e;stroke-opacity:.45;transition:stroke-opacity .5s}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz .raiz-b2{stroke:#ff7a2e;stroke-opacity:.36;transition:stroke-opacity .5s}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz .raiz-b3{stroke:#ff7a2e;stroke-opacity:.28;transition:stroke-opacity .5s}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz .raiz-tip{fill:var(--slide);stroke:#ff7a2e8c;stroke-width:1;transition:fill .5s,stroke .5s}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz[data-awake="1"] .raiz-b1{stroke-opacity:.7}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz[data-awake="1"] .raiz-b2{stroke-opacity:.6}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz[data-awake="1"] .raiz-b3{stroke-opacity:.5}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz[data-awake="1"] .raiz-tip{fill:#ff7a2e;stroke:#ffb15c}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz .raiz-flow{stroke:var(--tissue-core);stroke-width:1.6;stroke-dasharray:.18 1.3;stroke-dashoffset:.18;opacity:0}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz.is-flow .raiz-flow{animation:raiz-flow 1.2s cubic-bezier(.16,1,.3,1)}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz.is-flow .raiz-flow.f2{animation-delay:.08s}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz.is-flow .raiz-flow.f3{animation-delay:.16s}
@keyframes raiz-flow{0%{opacity:1;stroke-dashoffset:.18}80%{opacity:1}to{opacity:0;stroke-dashoffset:-1.1}}
body.map-first :is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) .raiz.is-shrink{animation:raiz-shrink .9s cubic-bezier(.16,1,.3,1)}
@keyframes raiz-shrink{35%{transform:scale(.9);opacity:.55}to{transform:none;opacity:1}}
/* Evento pendente: uma faixa própria, sem sobrepor nada (Processamento, Pesquisa, Evolução e Mundo). */
body.map-first dialog:is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) #live-event.compact{grid-area:event;position:static;inset:auto;transform:none;width:auto;max-width:none;justify-self:stretch;height:44px;max-height:44px;margin:0;padding:0 12px 0 4px;border:1px solid #ffb15c66;border-radius:6px;background:#ff7a2e14}
/* O prazo do evento fica num lugar fixo, na ponta direita; o ponto de exclamação encolhe para não pesar mais que as operações. */
body.map-first dialog:is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) #live-event.compact .event-chip{flex:1}
body.map-first dialog:is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) #live-event.compact .event-chip b{margin-left:auto}
body.map-first dialog:is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) #live-event.compact .event-chip i{width:22px;height:22px}
body.map-first dialog:is(#economy-dialog,#research-dialog,#upgrades-dialog,#world-hub) #live-event.compact .event-chip svg{width:14px;height:14px}
/* Estado (não é compra): a expansão automática numa linha só. */
body.map-first #economy-dialog .economy-state{grid-area:state}
body.map-first #economy-dialog .economy-state .economy-row{min-height:44px;padding:0 0 6px;border-bottom:1px solid var(--rule)}
/* Ações: duas colunas, nomes inteiros, efeito e custo juntos. */
body.map-first #economy-dialog .economy-cols{grid-area:body;display:block;position:relative;min-height:0}
body.map-first #economy-dialog .economy-actions{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-content:start;height:100%}
body.map-first #economy-dialog .economy-actions>h3,body.map-first #economy-dialog .economy-balance>h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body.map-first #economy-dialog .economy-row{position:relative;display:flex;align-items:center;gap:10px;min-height:54px;margin:0;padding:4px 0 4px 20px;background:none;border:0;border-radius:0;box-shadow:none}
body.map-first #economy-dialog .economy-state .economy-row{padding-left:0}
body.map-first #economy-dialog .economy-row[hidden]{display:none}
body.map-first #economy-dialog .economy-row .economy-info{flex:1;min-width:0;padding:0;background:none;border:0}
body.map-first #economy-dialog .economy-row strong{white-space:normal;color:var(--ink);font:600 14px/1.2 var(--body)}
body.map-first #economy-dialog .economy-row strong>span{overflow:visible;text-overflow:clip}
body.map-first #economy-dialog .economy-row strong i{width:14px;height:14px;border-color:#7d979880;color:var(--ink-faint);font-size:11px}
/* Duas linhas são limite editorial, não corte: o que passar aparece (e o measure-scroll acusa) para ser reescrito. */
body.map-first #economy-dialog .economy-effect{display:block;white-space:normal;color:var(--ink-soft);font:12px/1.3 var(--body)}
/* Investigação: uma frase em duas linhas; tom calmo enquanto a prevista fica abaixo do limite, laranja só com risco. */
body.map-first #economy-dialog .economy-account{display:block;color:var(--ink-soft);font:12px/1.3 var(--body);font-variant-numeric:tabular-nums}
body.map-first #economy-dialog .economy-account[hidden]{display:none}
/* Avisos de operação: término neutro; perda em ferida, com o nó em contorno ferida e uma contração (DESIGN.md, Perda). */
body.map-first #economy-dialog .economy-notice{display:block;color:var(--ink-soft);font:600 12px/1.3 var(--body)}
body.map-first #economy-dialog .economy-notice[hidden]{display:none}
body.map-first #economy-dialog .economy-notice.is-loss{color:var(--wound)}
body.map-first #economy-dialog .economy-actions>.economy-row[data-loss="1"]::before{box-shadow:0 0 0 2px var(--wound);animation:node-loss .9s cubic-bezier(.16,1,.3,1)}
@keyframes node-loss{35%{transform:scale(.6)}to{transform:none}}
body.map-first #economy-dialog .economy-deadline{white-space:pre-line;color:var(--ink-soft);font:12px/1.3 var(--body)}
body.map-first #economy-dialog .economy-deadline.is-risk{color:var(--tissue-hot);font-weight:600}
/* O filamento: um tronco irregular por coluna e um ramo até o nó de cada operação (SVG em cada linha, economy-ui.mjs).
   Apagado = parada; aceso = em curso (só o ramo e o nó, a luz fica local). O traço não escala com a altura da linha. */
body.map-first #economy-dialog .economy-actions>.economy-row{padding-left:26px;max-height:none}
body.map-first #economy-dialog .vein{position:absolute;left:0;top:0;width:20px;height:100%;overflow:visible;pointer-events:none}
body.map-first #economy-dialog .vein path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
body.map-first #economy-dialog .vein-trunk{stroke:#ff7a2e38;stroke-width:1.2}
body.map-first #economy-dialog .vein-branch{stroke:#ff7a2e30;stroke-width:1;transition:stroke .4s}
body.map-first #economy-dialog .vein-pulse{stroke:var(--tissue-hot);stroke-width:1.6;stroke-dasharray:.25 1.25;stroke-dashoffset:.25;opacity:0}
body.map-first #economy-dialog .economy-actions>.economy-row::before{content:"";position:absolute;z-index:1;left:10px;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:50%;border:1px solid #3d5f66;background:var(--slide);transition:background .4s,border-color .4s,box-shadow .4s}
body.map-first #economy-dialog .economy-actions>.economy-row[data-live="1"] .vein-branch{stroke:#ff7a2ebf}
body.map-first #economy-dialog .economy-actions>.economy-row[data-live="1"]::before{border-color:transparent;background:radial-gradient(circle,var(--tissue-core) 0 25%,var(--tissue) 60%,var(--tissue-deep) 90%);box-shadow:0 0 5px #ff7a2e80}
/* Pulso: quando a operação começa, a luz desce pelo tronco e entra no ramo até o nó, uma vez. */
body.map-first #economy-dialog .economy-actions>.economy-row.is-pulse .vein-pulse{animation:vein-pulse 1.1s cubic-bezier(.16,1,.3,1)}
@keyframes vein-pulse{0%{opacity:1;stroke-dashoffset:.25}85%{opacity:1}to{opacity:0;stroke-dashoffset:-1}}
/* Botões: pequenos, cantos discretos; neutros por padrão, tecido aceso só com motivo (armado ou recomendado). */
body.map-first #economy-dialog .economy-row :is(#compact-spread,#erase-traces,[data-project],.economy-ops-open){flex:none;width:104px;min-height:44px;padding:3px 6px;border:1px solid #3d5f66;border-radius:5px;background:transparent;color:var(--ink);font:600 12px/1.2 var(--body);box-shadow:none;cursor:pointer;transition:background .2s,border-color .2s}
body.map-first #economy-dialog .economy-row :is(#compact-spread,#erase-traces,[data-project],.economy-ops-open) small{display:block;color:var(--ink-soft);font:400 12px/1.2 var(--body)}
body.map-first #economy-dialog .economy-row :is(#compact-spread,#erase-traces,[data-project],.economy-ops-open):not(:disabled):hover{border-color:var(--tissue-hot);background:#ff7a2e14}
body.map-first #economy-dialog .economy-row :is(#compact-spread,#erase-traces,[data-project],.economy-ops-open):focus-visible{outline:2px solid var(--tissue-core);outline-offset:2px}
body.map-first #economy-dialog .economy-row :is(#erase-traces,[data-project]).is-armed{border-color:var(--tissue-hot);background:var(--tissue);color:#1a0a03}
body.map-first #economy-dialog .economy-row :is(#erase-traces,[data-project]).is-armed small{color:#3a1606}
/* Recomendado não é armado: só a borda de tecido; o motivo vem escrito na linha ("· Apagar resolve"). */
body.map-first #economy-dialog .economy-row :is(#erase-traces,[data-project]).is-urge:not(.is-armed){border-color:var(--tissue-hot);background:#ff7a2e0f}
body.map-first #economy-dialog .economy-row :is(#compact-spread,#erase-traces,[data-project],.economy-ops-open):disabled{opacity:1;border-color:var(--rule);color:var(--ink-soft);cursor:default}
body.map-first #economy-dialog .economy-row :is(#compact-spread,#erase-traces,[data-project]):disabled small{color:var(--ink-soft)}
/* Painel das três operações e os textos do "i": sobre a coluna de ações. */
body.map-first #economy-dialog .economy-ops{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-content:start;background:var(--slide)}
body.map-first #economy-dialog .economy-ops[hidden]{display:none}
body.map-first #economy-dialog .economy-ops-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;min-height:40px}
body.map-first #economy-dialog .economy-tip{background:var(--slide-2);border-color:var(--rule)}
/* Detalhar: o balanço inteiro por cima das ações; fora dele, o balanço não ocupa a tela. */
body.map-first #economy-dialog .economy-balance{display:none}
body.map-first #economy-dialog[data-view=all] .economy-balance{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;gap:6px;background:var(--slide);overflow:auto;overscroll-behavior:contain}
body.map-first #economy-dialog[data-view=all] .economy-balance .economy-net{display:none}
body.map-first #economy-dialog .economy-sum li{border-bottom:1px solid var(--rule-soft)}
body.map-first #economy-dialog .economy-sum li span{color:var(--ink-soft)}
body.map-first #economy-dialog .economy-sum li b{color:var(--ink);font-variant-numeric:tabular-nums}
.economy-veins{display:grid;gap:4px;margin:6px 2px 8px}
.economy-veins i{display:block;height:3px;border-radius:3px;transform-origin:left center;transform:scaleX(var(--w,0));transition:transform .6s cubic-bezier(.16,1,.3,1)}
.economy-veins .vein-in{background:linear-gradient(90deg,var(--tissue-deep),var(--tissue) 60%,var(--tissue-hot))}
.economy-veins .vein-out{background:linear-gradient(90deg,var(--rule),var(--rule-strong))}
body.map-first #economy-dialog .economy-links{justify-content:flex-start}
body.map-first #economy-dialog .economy-links button{flex:none;width:auto;border:0;background:none;color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px}
body.map-first #economy-dialog .economy-help-link[hidden]{display:none}
@media(prefers-reduced-motion:reduce){body.map-first #economy-dialog *{transition:none!important;animation:none!important}}