/* ===================================================================== devolutiva.css — a retrospectiva visual da Fase B (11/09/2026) Carregado DEPOIS de skins.css. Tudo aqui lê os tokens da skin em uso (--btn, --acento, --marca, --halo, --tx/--tx2/--tx3, --sup, --line, --r) com fallback para a skin A ("Ilhas"), que não define token nenhum e é escura. É por isso que nenhuma cor abaixo é literal: os --rt-* resolvem no , onde a skin põe os dela. Regras do pedido: nenhum texto abaixo de 13px; números em tabular-nums; gráficos em SVG/CSS gerados por função, sem biblioteca; animação leve de entrada, desligada em prefers-reduced-motion. ===================================================================== */ html{ --rt-tx:var(--tx,#FFFFFF); --rt-tx2:var(--tx2,rgba(255,255,255,.72)); --rt-tx3:var(--tx3,rgba(255,255,255,.50)); --rt-sup:var(--sup,rgba(255,255,255,.05)); --rt-sup2:var(--sup2,rgba(255,255,255,.10)); --rt-line:var(--line,rgba(255,255,255,.16)); --rt-line2:var(--line2,rgba(255,255,255,.10)); --rt-btn:var(--btn,#E8384A); --rt-acento:var(--acento,#FFC53D); --rt-marca:var(--marca,#FF5B4A); --rt-halo:var(--halo,232,56,74); --rt-r:var(--r,16px); } /* ---- o comum às cinco telas ---- */ .rt{text-align:left} .rt-frase{margin:14px 0 0;font:800 17px/1.35 Inter,system-ui,sans-serif;color:var(--rt-tx)} .rt-frase b{color:var(--rt-acento)} .rt-sub{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--rt-tx2)} .rt-leg{margin:6px 0 0;display:flex;gap:14px;align-items:center;flex-wrap:wrap; font-size:13px;line-height:1.4;color:var(--rt-tx3)} .rt-leg i{display:inline-block;width:18px;height:0;margin-right:6px;vertical-align:middle; border-top:3px solid var(--rt-btn)} .rt-leg i.rt-leg-media{border-top:2px dashed var(--rt-tx2)} .rt-num-l{display:flex;align-items:center;gap:14px;margin:6px 0 0} .rt-num{font:900 48px/1 Inter,system-ui,sans-serif;color:var(--rt-acento); font-variant-numeric:tabular-nums;letter-spacing:-.02em;flex:0 0 auto} .rt-num-l span{font-size:14px;line-height:1.35;color:var(--rt-tx2)} .rt-det{margin-top:14px} .rt-det summary{color:var(--rt-tx2)} /* ---- 2 · a carta do arquétipo ---- */ .rt-carta .cartaArq{margin:0} .rt-carta .cartaArq img{max-height:44vh} /* ---- 3 · o radar ---- Os rótulos são HTML, fora do SVG: 13px garantidos em qualquer largura e a cor da skin sem calcular escala. Ordem de EIXOS: 0 topo, 1 e 2 à direita, 3 base, 4 e 5 à esquerda. */ /* fit-content: a palavra mais longa do rótulo dita a coluna (até 30%), e o radar fica com o resto — sem cortar "Vocabulário" nem quebrá-lo no meio, inclusive na skin E, de fonte mono larga */ .rt-radar{display:grid;grid-template-columns:fit-content(30%) minmax(0,1fr) fit-content(30%); grid-template-rows:auto auto auto;align-items:center;margin-top:4px} .rt-radar-topo{grid-column:2;grid-row:1;text-align:center;padding-bottom:2px} .rt-radar-base{grid-column:2;grid-row:3;text-align:center;padding-top:2px} .rt-radar-svg{grid-column:2;grid-row:2} .rt-radar-svg svg{display:block;width:100%;height:auto} .rt-radar-esq,.rt-radar-dir{grid-row:2;display:flex;flex-direction:column; justify-content:space-around;align-self:stretch;min-width:0;gap:8px} .rt-radar-esq{grid-column:1;align-items:flex-end;text-align:right;padding-right:6px} .rt-radar-dir{grid-column:3;align-items:flex-start;text-align:left;padding-left:6px} .rt-rot{font:800 13px/1.2 Inter,system-ui,sans-serif;color:var(--rt-tx2);letter-spacing:0} .rt-rot.max{color:var(--rt-acento)} .rt-rot.min{color:var(--rt-tx);text-decoration:underline dashed;text-underline-offset:3px; text-decoration-color:var(--rt-tx3)} .rt-radar-grade{fill:none;stroke:var(--rt-line);stroke-width:1} .rt-radar-eu{fill:rgba(var(--rt-halo),.24);stroke:var(--rt-btn);stroke-width:2.5; stroke-linejoin:round;transform-box:view-box;transform-origin:50% 50%; animation:rt-pop .7s cubic-bezier(.2,.9,.25,1) both} .rt-radar-pt{fill:var(--rt-btn)} .rt-radar-media{fill:none;stroke:var(--rt-tx2);stroke-width:1.8;stroke-dasharray:4 3; stroke-linejoin:round} /* ---- barras horizontais (ferramentas, comparação, meta) ---- */ .rt-bar{position:relative;height:14px;border-radius:calc(var(--rt-r) / 2); background:var(--rt-sup2);border:1px solid var(--rt-line);overflow:hidden} .rt-bar i{display:block;height:100%;width:var(--v,0%);background:var(--rt-btn); border-radius:inherit;transform-origin:left center; animation:rt-cresce .8s cubic-bezier(.2,.9,.25,1) both; animation-delay:calc(var(--i,0) * 60ms)} .rt-barras{margin-top:16px;display:flex;flex-direction:column;gap:10px} .rt-linha{display:grid;grid-template-columns:minmax(96px,38%) 1fr auto;gap:10px; align-items:center;animation:rt-surge .5s both;animation-delay:calc(var(--i,0) * 60ms)} .rt-linha-r{font-size:13px;line-height:1.25;font-weight:700;color:var(--rt-tx)} .rt-linha-r em{display:block;font-style:normal;font-weight:600;color:var(--rt-tx3)} .rt-linha-e{font:700 13px 'IBM Plex Mono',ui-monospace,monospace;color:var(--rt-tx3); min-width:64px;text-align:right} .rt-bar[data-e="coberta"] + .rt-linha-e{color:var(--rt-acento)} .rt-bar[data-e="iniciada"] i{opacity:.62} .rt-bar[data-e="lacuna"] i{background:var(--rt-tx3);opacity:.5} /* ---- 5 · a escada do mergulho ---- */ .rt-esc{display:grid;grid-template-columns:auto 1fr;gap:0 10px;margin:18px 0 46px} .rt-esc-y{display:flex;flex-direction:column-reverse;justify-content:space-between; height:166px;margin:-8px 0;text-align:right} .rt-esc-y span{display:block;height:16px;line-height:16px;white-space:nowrap; font:700 13px/16px 'IBM Plex Mono',ui-monospace,monospace;color:var(--rt-tx3)} .rt-esc-plot{display:flex;gap:12px;height:150px; background:repeating-linear-gradient(to top,var(--rt-line2) 0 1px,transparent 1px 25%); border-top:1px solid var(--rt-line2);border-bottom:1px solid var(--rt-line)} .rt-esc-g{flex:var(--n,4) 1 0;display:flex;flex-direction:column;justify-content:flex-end; position:relative;min-width:0} .rt-esc-bs{flex:1;display:flex;gap:4px;align-items:flex-end} .rt-esc-b{flex:1 1 0;display:block;height:calc(var(--d,0) * 25%);min-height:3px; background:var(--rt-btn);border-radius:3px 3px 0 0;transform-origin:bottom center; animation:rt-sobe .7s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--i,0) * 70ms)} .rt-esc-b.d0{background:var(--rt-tx3);opacity:.45} .rt-esc-b.max{background:var(--rt-acento)} .rt-esc-f{position:absolute;top:100%;left:0;right:0;padding-top:7px;text-align:center; font-size:13px;line-height:1.15;font-weight:700;color:var(--rt-tx3)} /* ---- 6 · você × os outros ---- */ .rt-comp{margin-top:12px;display:flex;flex-direction:column;gap:14px} .rt-comp-l{animation:rt-surge .5s both;animation-delay:calc(var(--i,0) * 80ms)} .rt-comp-r{display:block;margin-bottom:6px;font-size:13.5px;font-weight:700;color:var(--rt-tx)} .rt-comp-b{display:grid;grid-template-columns:60px 1fr 48px;gap:8px;align-items:center;margin-top:4px} .rt-comp-b span{font:700 13px 'IBM Plex Mono',ui-monospace,monospace;color:var(--rt-tx3)} .rt-comp-b b{font:900 15px Inter,system-ui,sans-serif;color:var(--rt-tx); font-variant-numeric:tabular-nums;text-align:right} .rt-bar-ref i{background:var(--rt-tx3);opacity:.7} .rt-bar-meta{height:16px;margin:14px 0 0} .rt-bar-meta i{background:var(--rt-acento)} /* o "bate?": a caixa em largura total, com corpo de texto legível */ .rt-porque{margin-top:14px} .rt-porque textarea{width:100%;min-height:96px;box-sizing:border-box;padding:12px; font-size:15px;line-height:1.4;border-radius:calc(var(--rt-r) / 1.4)} /* ---- movimento ---- */ @keyframes rt-cresce{from{transform:scaleX(0)}} @keyframes rt-sobe{from{transform:scaleY(0)}} @keyframes rt-pop{from{transform:scale(.2);opacity:0}} @keyframes rt-surge{from{opacity:0;transform:translateY(6px)}} @media (prefers-reduced-motion:reduce){ .rt-bar i,.rt-esc-b,.rt-radar-eu,.rt-linha,.rt-comp-l{animation:none !important} } /* ---- computador: a retrospectiva não estica além do que se lê ---- */ @media (min-width:900px){ .rt,.fb-bate{max-width:560px;margin-left:auto;margin-right:auto} }