/* Organismo — Evolução (DESIGN.md, Evolução). A tela inteira, a faixa do evento, o fundo e a Raiz vêm do organismo.css.
   Aqui, a composição própria: a árvore é a composição (hexágonos ligados pelos pré-requisitos reais) e o detalhe do nó
   fica ao lado. Comprada = ativo (contorno de tecido, ícone tecido quente, um nó aceso no vértice; o hexágono não brilha
   por dentro); disponível = inativo (contorno risco forte, ícone em tinta); bloqueada = contorno e ícone apagados, com a
   conexão tracejada à vista. A compra manda um pulso do pai até o filho, uma vez. */
body.map-first #upgrades-dialog[open]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"top" "event" "body";row-gap:4px;padding-top:8px;padding-bottom:8px;overflow:hidden;color:var(--ink)}
/* Topo: título, a Raiz, as abas (navegação em tinta com sublinhado), o PE (número principal, da IA) e fechar. */
body.map-first #upgrades-dialog .evolution-top{grid-area:top;position:static;display:flex;align-items:center;gap:18px;min-height:44px;height:auto;margin:0;padding:0;background:none}
body.map-first #upgrades-dialog .evolution-top h2{flex:none;margin:0;color:var(--ink);font:600 24px/1.1 var(--display);letter-spacing:0}
body.map-first #upgrades-dialog .evolution-strip{position:static;flex:1;min-width:0;width:auto;height:auto;overflow:visible;clip-path:none;display:flex;align-items:center;justify-content:flex-end;gap:16px}
body.map-first #upgrades-dialog #evolution-categories{display:flex;flex:0 1 auto;min-width:0;gap:2px;margin:0;padding:0;border:0;border-radius:0;background:none}
body.map-first #upgrades-dialog #evolution-categories button{flex:none;display:block;min-height:44px;margin:0;padding:0 8px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink-soft);font:600 14px/1.2 var(--body);text-decoration:none;white-space:nowrap;cursor:pointer}
body.map-first #upgrades-dialog #evolution-categories button small{display:inline;color:var(--ink-soft);font:400 12px/1.2 var(--body);font-variant-numeric:tabular-nums;opacity:1}
body.map-first #upgrades-dialog #evolution-categories button[aria-pressed=true]{color:var(--ink);background:none;box-shadow:none;text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:2px;text-underline-offset:7px}
body.map-first #upgrades-dialog #evolution-categories button:not([aria-pressed=true]):hover{color:var(--ink)}
body.map-first #upgrades-dialog #evolution-categories button:focus-visible{outline:2px solid var(--tissue-core);outline-offset:-2px}
body.map-first #upgrades-dialog #upgrade-budget{flex:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--tissue-hot);font:600 26px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
body.map-first #upgrades-dialog .evolution-top .close{flex:none;color:var(--ink-soft);width:44px;height:44px;min-width:44px;min-height:44px;margin:0;border:1px solid var(--rule);border-radius:5px;background:transparent}
/* Corpo: a árvore à esquerda (maior), o detalhe à direita, separado por um risco. */
body.map-first #upgrades-dialog .evolution-layout{grid-area:body;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:minmax(0,1fr);column-gap:28px;align-items:stretch;height:auto;min-height:0}
body.map-first #upgrades-dialog #upgrades.category-map{position:relative;display:flex;width:100%;height:100%;min-height:0;overflow:hidden;border:0;border-radius:0;background:none;container-type:size}
/* O favo inteiro cabe na área: --s é o tamanho de uma unidade (um hexágono de largura), tirado da largura e da altura. */
body.map-first #upgrades-dialog .hex-tree{--s:min(calc(100cqw / var(--W)),calc(100cqh / var(--H)),72px);position:relative;flex:none;margin:auto;width:calc(var(--W) * var(--s));height:calc(var(--H) * var(--s))}
/* Conexões de pré-requisito: filamento de 1,2px sob os hexágonos; o traço não escala com a árvore. */
body.map-first #upgrades-dialog .hex-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
body.map-first #upgrades-dialog .hex-links path{fill:none;stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
body.map-first #upgrades-dialog .hex-links .is-owned{stroke:#ff7a2ebf}
body.map-first #upgrades-dialog .hex-links .is-open{stroke:#ff7a2e47}
body.map-first #upgrades-dialog .hex-links .is-locked{stroke:var(--rule-strong);stroke-dasharray:3 3}
body.map-first #upgrades-dialog .hex-links .is-idle{stroke:var(--rule)}
body.map-first #upgrades-dialog .hex-links .link-pulse{stroke:var(--tissue-hot);stroke-width:1.6;stroke-dasharray:.25 1.25;stroke-dashoffset:.25;opacity:0;animation:vein-pulse 1.1s cubic-bezier(.16,1,.3,1)}
/* Nó: a célula inteira do favo é o alvo de toque (as células encaixam, sem sobrepor); o hexágono desenhado ocupa 74%. */
body.map-first #upgrades-dialog .hex-node{position:absolute;left:calc((var(--cx) - var(--w) / 2) * var(--s));top:calc((var(--cy) - var(--h) / 2) * var(--s));display:grid;place-items:center;width:calc(var(--w) * var(--s));height:calc(var(--h) * var(--s));margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--ink);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);cursor:pointer;-webkit-tap-highlight-color:transparent}
body.map-first #upgrades-dialog .hex-tree.is-flat .hex-node{clip-path:polygon(0 50%,25% 0,75% 0,100% 50%,75% 100%,25% 100%)}
body.map-first #upgrades-dialog .hex-node .hex-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:none}
body.map-first #upgrades-dialog .hex-node .hx{fill:var(--slide);stroke:var(--rule-strong);stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke;animation:none;transition:stroke .2s}
body.map-first #upgrades-dialog .hex-node .hx-ring{fill:none;stroke:var(--rule-strong);stroke-width:1;vector-effect:non-scaling-stroke}
body.map-first #upgrades-dialog .hex-node .skill-icon{position:relative;width:calc(var(--s) * .4);height:calc(var(--s) * .4);stroke-width:1.6}
/* Comprada: contorno de tecido, ícone tecido quente e um nó aceso no vértice. */
body.map-first #upgrades-dialog .hex-node.is-owned{color:var(--tissue-hot)}
body.map-first #upgrades-dialog .hex-node.is-owned .hx,body.map-first #upgrades-dialog .hex-node.is-owned .hx-ring{stroke:var(--tissue)}
body.map-first #upgrades-dialog .hex-node .hx-dot{fill:url(#evo-node-core);filter:drop-shadow(0 0 3px #ff7a2e80)}
/* Disponível: contorno risco forte, ícone em tinta; sem PE suficiente, o ícone vai à tinta suave (continua legível). */
body.map-first #upgrades-dialog .hex-node.is-waiting{color:var(--ink-soft)}
/* Bloqueada (ou fechada por outra especialização): contorno e ícone apagados. */
body.map-first #upgrades-dialog .hex-node.is-locked{color:var(--ink-faint)}
body.map-first #upgrades-dialog .hex-node.is-locked .hx,body.map-first #upgrades-dialog .hex-node.is-locked .hx-ring{stroke:var(--rule)}
body.map-first #upgrades-dialog .hex-node:is(.is-ready,.is-waiting):hover .hx{stroke:var(--tissue-hot)}
/* Selecionada e foco do teclado: anel de núcleo de 2px. */
body.map-first #upgrades-dialog .hex-node[aria-pressed=true]{z-index:2}
body.map-first #upgrades-dialog .hex-node[aria-pressed=true] .hx,body.map-first #upgrades-dialog .hex-node:focus-visible .hx{stroke:var(--tissue-core);stroke-width:2}
body.map-first #upgrades-dialog .hex-node:focus-visible{outline:none}
/* Detalhe: acomoda-se ao conteúdo (sem espaço vazio embaixo) e não rola. */
body.map-first #upgrades-dialog #evolution-detail{align-self:start;display:flex;flex-direction:column;gap:8px;height:auto;min-height:0;margin:0;padding:0 0 0 18px;border:0;border-left:1px solid var(--rule);border-radius:0;background:none;overflow:visible}
body.map-first #upgrades-dialog #evolution-detail>*{flex:none;margin:0}
body.map-first #upgrades-dialog #evolution-detail .detail-head{display:grid;gap:2px}
body.map-first #upgrades-dialog #evolution-detail .detail-head h3{margin:0;color:var(--ink);font:600 14px/1.2 var(--body)}
body.map-first #upgrades-dialog #evolution-detail .detail-head small{color:var(--ink-soft);font:400 12px/1.3 var(--body);letter-spacing:0}
body.map-first #upgrades-dialog #evolution-detail .detail-desc{display:block;margin:0;color:var(--ink-soft);font:400 12px/1.3 var(--body);overflow:visible;cursor:auto}
body.map-first #upgrades-dialog #evolution-detail .detail-desc::after{content:none}
/* O que falta: um toque leva até o nó. */
body.map-first #upgrades-dialog #evolution-detail .tree-requires{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:0;margin:0;padding:0;border:0}
body.map-first #upgrades-dialog #evolution-detail .tree-requires>small{flex:none;display:block;color:var(--ink-soft);font:400 12px/1.3 var(--body);letter-spacing:0}
body.map-first #upgrades-dialog #evolution-detail .tree-requires button{display:block;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--ink);font:600 12px/1.3 var(--body);text-decoration:underline;text-decoration-color:#7d979880;text-underline-offset:4px;cursor:pointer}
body.map-first #upgrades-dialog #evolution-detail .tree-requires button:focus-visible{outline:2px solid var(--tissue-core);outline-offset:2px}
/* O que a compra muda (só quando muda): "Letalidade 11 → 12 de 100" numa linha; a regra atual, quando a subida não é do nó. */
body.map-first #upgrades-dialog #evolution-detail .detail-indicator{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;color:var(--ink-soft);font:400 12px/1.3 var(--body);font-variant-numeric:tabular-nums}
body.map-first #upgrades-dialog #evolution-detail .detail-indicator b{color:var(--tissue-hot);font:600 12px/1.3 var(--body)}
body.map-first #upgrades-dialog #evolution-detail .detail-indicator small{color:var(--ink-soft);font:400 12px/1.3 var(--body)}
body.map-first #upgrades-dialog #evolution-detail .detail-indicator em{flex-basis:100%;color:var(--ink-soft);font:400 12px/1.3 var(--body);font-style:normal}
body.map-first #upgrades-dialog #evolution-detail .detail-hidden{color:var(--ink-soft);font:400 12px/1.3 var(--body)}
/* Previsão e consequências da Ruptura: faixas de leitura (canto 6px, risco), a cor só no texto de quem ameaça. */
body.map-first #upgrades-dialog #evolution-detail :is(.forecast-verdict,.rupture-carry,.forecast-full){width:100%;min-height:44px;margin:0;padding:5px 8px;border:1px solid var(--rule);border-radius:6px;background:transparent;color:var(--ink);font:400 12px/1.3 var(--body);text-align:left;box-shadow:none;cursor:pointer}
body.map-first #upgrades-dialog #evolution-detail .forecast-verdict{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px}
body.map-first #upgrades-dialog #evolution-detail .forecast-verdict span:first-child{font-weight:600}
body.map-first #upgrades-dialog #evolution-detail .forecast-verdict span+span{color:var(--ink-soft)}
body.map-first #upgrades-dialog #evolution-detail .forecast-verdict.is-pending{display:flex;align-items:center;color:var(--ink-soft);cursor:default}
body.map-first #upgrades-dialog #evolution-detail .forecast-full{position:relative;background:var(--slide-2)}
body.map-first #upgrades-dialog #evolution-detail .forecast-full b{color:var(--ink);font-weight:600}
body.map-first #upgrades-dialog #evolution-detail .forecast-full small{color:var(--ink-soft);font-size:11px;opacity:1}
body.map-first #upgrades-dialog #evolution-detail .rupture-carry b{color:var(--tissue-hot);font-weight:600}
body.map-first #upgrades-dialog #evolution-detail .rupture-carry span{color:var(--ink-soft)}
body.map-first #upgrades-dialog #evolution-detail :is(.forecast-verdict,.rupture-carry,.forecast-full) i{color:var(--ink-soft);font:600 12px/1.2 var(--body);font-style:normal;text-decoration:underline;text-decoration-color:#7d979880;text-underline-offset:3px}
/* Tom do desfecho: perda em ferida; laboratórios acordando em ciano (é humano); risco da IA em tecido quente. */
body.map-first #upgrades-dialog #evolution-detail .forecast-verdict.is-lost span:first-child,body.map-first #upgrades-dialog #evolution-detail .forecast-full.is-lost b{color:var(--wound)}
body.map-first #upgrades-dialog #evolution-detail .forecast-verdict.is-wake span:first-child,body.map-first #upgrades-dialog #evolution-detail .forecast-full.is-wake b{color:var(--human)}
body.map-first #upgrades-dialog #evolution-detail .forecast-verdict.is-open span:first-child,body.map-first #upgrades-dialog #evolution-detail .forecast-full.is-open b{color:var(--tissue-hot)}
body.map-first #upgrades-dialog #evolution-detail :is(.forecast-verdict,.rupture-carry,.forecast-full):focus-visible{outline:2px solid var(--tissue-core);outline-offset:2px}
/* Compra: a conta (ou o motivo, ou o risco) na linha, o botão 104×44 no fim. Comprada vira estado escrito. */
body.map-first #upgrades-dialog #evolution-detail .detail-buy{display:flex;align-items:center;gap:12px}
body.map-first #upgrades-dialog #evolution-detail .detail-account{flex:1;min-width:0;display:grid;margin:0;color:var(--ink-soft);font:400 12px/1.3 var(--body);font-variant-numeric:tabular-nums}
body.map-first #upgrades-dialog #evolution-detail .detail-account.is-risk{color:var(--tissue-hot);font-weight:600}
body.map-first #upgrades-dialog #evolution-detail .evolve-buy{flex:none;display:block;width:auto;min-width:104px;min-height:44px;margin:0 0 0 auto;padding:3px 6px;border:1px solid var(--rule-strong);border-radius:5px;background:transparent;box-shadow:none;color:var(--ink);font:600 12px/1.2 var(--body);text-align:center;cursor:pointer;transition:background .2s,border-color .2s}
body.map-first #upgrades-dialog #evolution-detail .evolve-buy small{display:block;color:var(--ink-soft);font:400 12px/1.2 var(--body)}
body.map-first #upgrades-dialog #evolution-detail .evolve-buy:not(:disabled):hover{border-color:var(--tissue-hot);background:#ff7a2e14}
body.map-first #upgrades-dialog #evolution-detail .evolve-buy:focus-visible{outline:2px solid var(--tissue-core);outline-offset:2px}
body.map-first #upgrades-dialog #evolution-detail .evolve-buy.is-armed{border-color:var(--tissue-hot);background:var(--tissue);color:#1a0a03}
body.map-first #upgrades-dialog #evolution-detail .evolve-buy.is-armed small{color:#3a1606}
body.map-first #upgrades-dialog #evolution-detail .evolve-buy:disabled{opacity:1;border-color:var(--rule);color:var(--ink-soft);cursor:default}
body.map-first #upgrades-dialog #evolution-detail .detail-owned{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--tissue-hot);font:600 12px/1.3 var(--body)}
body.map-first #upgrades-dialog #evolution-detail .detail-owned::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,var(--tissue-core) 0 25%,var(--tissue) 60%,var(--tissue-deep) 90%);box-shadow:0 0 5px #ff7a2e80}
/* Rota até o nó selecionado (bloqueado): os nós e as conexões dela em tinta; o resto fica à vista, mais apagado. As compradas
   continuam inteiras (dizem o que já foi integrado). */
body.map-first #upgrades-dialog .hex-tree.has-route .hex-node:not(.is-route):not(.is-owned),body.map-first #upgrades-dialog .hex-tree.has-route .hex-links path:not(.in-route){opacity:.4}
body.map-first #upgrades-dialog .hex-node.is-route:not([aria-pressed=true]) .hx{stroke:var(--ink)}
body.map-first #upgrades-dialog .hex-node.is-route{color:var(--ink)}
body.map-first #upgrades-dialog .hex-links .in-route{stroke:var(--ink-soft)}
/* Próximo passo ainda oculto: só o contorno em risco, sem ícone; a conexão até ele também em risco. */
body.map-first #upgrades-dialog .hex-node.is-future .hx{stroke:var(--rule)}
body.map-first #upgrades-dialog .hex-node.is-future:hover .hx{stroke:var(--rule-strong)}
body.map-first #upgrades-dialog .hex-links .is-future{stroke:var(--rule)}
@media(prefers-reduced-motion:reduce){body.map-first #upgrades-dialog *{transition:none!important;animation:none!important}}
/* Lendo a previsão inteira (ou a lista do que continua depois da Ruptura): o texto toma o corpo inteiro, como um painel
   sobreposto; o botão segue embaixo e um toque no texto volta à árvore. */
body.map-first #upgrades-dialog .evolution-layout:has(:is(.forecast-full,.rupture-carry[aria-expanded=true])){grid-template-columns:minmax(0,1fr)}
body.map-first #upgrades-dialog .evolution-layout:has(:is(.forecast-full,.rupture-carry[aria-expanded=true])) #upgrades{display:none}
body.map-first #upgrades-dialog .evolution-layout:has(:is(.forecast-full,.rupture-carry[aria-expanded=true])) #evolution-detail{padding-left:0;border-left:0}