/* Observatório de Mercado — estrutura herdada do console ByFel, componentes próprios. Cores/tipos SÓ via tokens.css. */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{background:var(--bg);color:var(--ink);font-family:var(--font-ui); font-size:var(--fs-base);line-height:var(--lh-body); -webkit-font-smoothing:antialiased;display:grid;grid-template-columns:var(--rail) 1fr;overflow:hidden} /* Em janela estreita o shell vira duas FAIXAS. Sem o grid-template-rows explícito, rail e main empilhavam com 100vh cada dentro de um body overflow:hidden — o painel inteiro ficava abaixo da dobra e inalcançável. */ @media (max-width:760px){ body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)} .rail{height:auto;max-height:40vh;border-right:0;border-bottom:2px solid var(--sf-alto)} .main{height:auto;min-height:0} } /* ---- rolagem: suave, contida e visível ---- O painel tem 4 níveis de rolagem aninhados (main › tira horizontal › coluna › drawer). Sem `contain`, terminar de rolar uma coluna empurrava a página inteira; e no trackpad o overscroll horizontal dispara o "voltar" do navegador, que num app por hash tira o Felipe da view no meio da leitura. */ .main,.rail,.drawer,.tela-vp,.feed-vp,.telas-wrap,.feeds-wrap,.mirror-wrap,.deck-grade{ scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--line) transparent; } .tela-vp,.feed-vp,.drawer,.mirror-wrap{overscroll-behavior:contain} .telas-wrap,.feeds-wrap,.mirror-wrap{overscroll-behavior-x:contain} .main{scrollbar-gutter:stable} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line);background-clip:content-box; border:3px solid transparent;border-radius:0} ::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box} /* ---- foco visível: o painel inteiro é navegável por teclado ---- */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:0} :focus:not(:focus-visible){outline:none} /* ---- texto: hex, slug e URL não estouram mais a coluna ---- */ .mirror .cell,.pcard,.uso,.gap-card,.s-card,.feed-col,.drawer .body,.achado{overflow-wrap:anywhere} /* ---- rail ---- */ .rail{background:var(--sf-base);border-right:2px solid var(--sf-alto);display:flex;flex-direction:column; padding:20px 14px;gap:4px;height:100vh;overflow-y:auto} .brand{display:flex;align-items:center;gap:9px;padding:4px 8px 18px} .brand .mark{width:26px;height:26px;border-radius:0;background:var(--accent);color:var(--accent-ink); display:grid;place-items:center;font-family:var(--font-text);font-size:15px;font-weight:400} .brand b{font-family:var(--font-text);font-weight:400;font-size:16px;letter-spacing:-.01em} .brand small{display:block;font-family:var(--font-data);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--faint)} .rail-label{font-family:var(--font-data);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--faint);padding:10px 10px 4px} .nav{display:flex;flex-direction:column;gap:2px} .nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none; color:var(--muted);font:inherit;font-size:13px;padding:9px 10px;border-radius:0;cursor:pointer;transition:var(--m-dur-1) var(--m-ease)} .nav button:hover{background:var(--surface-2);color:var(--ink)} .nav button.active{background:var(--accent-soft);color:var(--accent)} .nav button .ic{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none} .nav button .cnt{margin-left:auto;font-family:var(--font-data);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums} .nav button small{display:block;font-size:11px;color:var(--faint);font-family:var(--font-ui)} .nav .livedot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--idle);flex:none} .nav .livedot.on{background:var(--ok);animation:pulse 1.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}} .rail-foot{margin-top:auto;padding-top:14px;border-top:2px solid var(--sf-alto);display:flex;flex-direction:column;gap:8px} .rail-foot .themebtn{background:var(--sf-alto);border:0;border-radius:0;color:var(--muted); font-family:var(--font-data);font-size:11px;padding:8px;cursor:pointer;letter-spacing:.04em} .rail-foot .themebtn:hover{color:var(--ink);border-color:var(--faint)} .rail-foot .stamp{font-family:var(--font-data);font-size:9.5px;color:var(--faint);letter-spacing:.03em;line-height:1.5} .rail-foot .stamp .b{color:var(--bad)} /* ---- main ---- */ .main{height:100vh;overflow-y:auto;display:flex;flex-direction:column} .topbar{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(8px);border-bottom:2px solid var(--sf-alto); display:flex;align-items:center;gap:16px;padding:16px clamp(18px,4vw,40px)} .topbar h1{font-family:var(--font-display);font-weight:400;font-size:24px;letter-spacing:-.01em} .topbar h1 span{color:var(--muted)} .topbar .demo-tag{font-family:var(--font-data);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--warn);border:1px solid var(--warn);border-radius:0;padding:2px 7px} .content{padding:var(--space-18);padding-top:0;flex:1} .view-head{margin-bottom:20px} .view-head p{color:var(--muted);font-size:13px;max-width:70ch;margin-top:4px} .empty{color:var(--muted);font-family:var(--font-text);font-style:normal;font-size:16px;padding:40px 0;max-width:60ch;line-height:1.6} .empty code{font-family:var(--font-data);font-style:normal;font-size:12px;color:var(--ink); background:var(--sf-alto);border:0;border-radius:0;padding:3px 8px; display:inline-block;margin-top:10px} .loading{color:var(--faint);font-family:var(--font-data);font-size:12px;padding:40px 0} /* três pontos respirando enquanto a view busca o dado */ .carregando{display:flex;gap:7px;padding:56px 0} .carregando span{width:8px;height:8px;border-radius:50%;background:var(--faint); animation:respira 1.1s ease-in-out infinite} .carregando span:nth-child(2){animation-delay:.14s} .carregando span:nth-child(3){animation-delay:.28s} @keyframes respira{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.9;transform:translateY(-4px)}} /* ---- hero: o mercado em 1 frase ---- */ .hero-frase{font-family:var(--font-display);font-weight:400;font-style:normal;font-size:clamp(22px,3.2vw,32px); line-height:1.28;letter-spacing:-.01em;max-width:26em;margin:6px 0 4px} .hero-frase.vazia{color:var(--faint)} .hero-meta{font-family:var(--font-data);font-size:10.5px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase} /* ---- faixa de staleness / watchdog ---- */ .band{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);background:var(--surface); background:var(--sf-base);padding:10px 14px;margin:16px 0} .band .dot{width:9px;height:9px;border-radius:50%;flex:none} .dot.ok{background:var(--stale-ok)} .dot.warn{background:var(--stale-warn)} .dot.bad{background:var(--stale-bad)} .dot.nunca{background:var(--idle)} .band b{color:var(--ink);font-weight:400} /* ---- matriz de estratos (grid HTML: dado categórico) ---- */ /* minmax(0,1fr): sem o piso zero, um card de player com nome longo empurrava a coluna e a matriz vazava para fora da tela */ .matrix{display:grid;grid-template-columns:110px repeat(3,minmax(0,1fr));gap:10px;margin-top:18px} .matrix .mhead{font-family:var(--font-data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);text-align:center;padding-bottom:2px} .matrix .mhead i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;font-style:normal; position:relative;vertical-align:middle} /* residual: contorno vazado, sem preenchimento — está saindo de cena */ .matrix .mhead.residual i{background:var(--strata-residual)} /* dominante: sólido, cheio — ocupa */ .matrix .mhead.dominante i{background:var(--strata-dominante)} /* emergente: sólido com anel — está crescendo para fora */ .matrix .mhead.emergente i{background:var(--strata-emergente)} .matrix .mhead.residual{color:var(--strata-residual)} .matrix .mhead.dominante{color:var(--strata-dominante)} .matrix .mhead.emergente{color:var(--strata-emergente)} .matrix .mhead.residual i{background:var(--strata-residual)} .matrix .mhead.dominante i{background:var(--strata-dominante)} .matrix .mhead.emergente i{background:var(--strata-emergente)} .matrix .mrow{font-family:var(--font-data);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--faint);display:flex;align-items:center} .matrix .mcell{background:var(--sf-base);border-radius:0;min-height:84px; padding:10px;display:flex;flex-direction:column;gap:7px} .matrix .mcell.emergente{border-color:var(--line)} .pcard{display:flex;align-items:center;gap:9px;background:var(--sf-alto); border-radius:0;padding:7px 9px;cursor:pointer;transition:var(--m-dur-1) var(--m-ease);text-align:left;font:inherit;color:var(--ink)} .pcard:hover{border-color:var(--accent);transform:translateY(-1px)} .pcard .letra{width:26px;height:26px;border-radius:0;flex:none;display:grid;place-items:center; font-family:var(--font-text);font-size:14px;font-weight:400; background:var(--player-color,var(--surface-2));color:#fff; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent)} .pcard .letra.sem{background:var(--surface-2);color:var(--muted)} .pcard b{font-family:var(--font-text);font-weight:400;font-size:14.5px;line-height:1.1;display:block} .pcard small{font-size:10.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pcard .mov{margin-left:auto;font-family:var(--font-data);font-size:9px;letter-spacing:.04em;text-transform:uppercase; color:var(--strata-emergente);white-space:nowrap} .pcard .mov.down{color:var(--muted)} .codechip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-data);font-size:10.5px; color:var(--muted);background:var(--sf-alto);border-radius:var(--radius-chip); padding:4px 9px;cursor:default} .codechip .letra{width:14px;height:14px;font-size:8px} /* o .tp sobrevive só na lista da RDE, onde o glifo é marcador de item antes da frase. No chip ele saiu: lá o código é palavra-chave, sem símbolo. */ .rde-codigos li .tp{color:var(--faint);font-size:9px} .mcell .wrap{display:flex;flex-wrap:wrap;gap:5px} .mcell .nada{color:var(--faint);font-size:11.5px;font-style:italic;font-family:var(--font-text);margin:auto 0} .indef{margin-top:12px;font-size:12.5px;color:var(--muted)} .indef .codechip{margin-left:6px} /* ---- seção ---- */ .section-title{font-family:var(--font-data);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--faint);margin:28px 0 12px;display:flex;align-items:center;gap:10px} .section-title::after{content:"";flex:1;height:1px;background:var(--line)} /* ---- módulos: a página cresce em blocos, padding estreito e constante ---- */ .modulos{display:flex;flex-direction:column;gap:var(--space-16);padding-top:var(--space-16)} .modulo{display:flex;flex-direction:column;gap:var(--space-10);min-width:0} .modulo-rot{font-family:var(--font-display);font-weight:400;font-size:30px;letter-spacing:.02em; line-height:1;color:var(--ink)} .colunas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16);align-items:start} .colunas[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))} .colunas[data-n="1"]{grid-template-columns:minmax(0,1fr)} .coluna{background:var(--surface);padding:var(--space-12);display:flex;flex-direction:column;gap:var(--space-8);min-width:0} .coluna-rot{font-family:var(--font-text);font-size:var(--fs-11);letter-spacing:.12em;text-transform:uppercase;line-height:1.3} .coluna.residual .coluna-rot{color:var(--strata-residual)} .coluna.dominante .coluna-rot{color:var(--strata-dominante)} .coluna.emergente .coluna-rot{color:var(--strata-emergente)} .coluna .nada{color:var(--faint);font-size:var(--fs-11);font-family:var(--font-text)} .coluna .pcard{background:transparent;border:0;padding:9px;gap:var(--space-10);width:100%} .coluna .pcard:hover{background:var(--surface-2);transform:none} .coluna .pcard .letra{width:34px;height:34px;font-size:var(--fs-11)} .coluna .pcard b{font-size:var(--fs-14);line-height:1.2} .coluna .pcard small{font-size:var(--fs-11);color:var(--faint);-webkit-line-clamp:1} .modulo-cor{display:grid;grid-template-columns:minmax(0,1fr) min(328px,34%);gap:var(--space-16);align-items:center} .modulo-cor .cor-roda{margin:0;justify-content:center} .modulo-cor .cor-roda svg{width:min(505px,100%)} .takeaways{display:flex;flex-direction:column;gap:3px;align-self:center;min-width:0} .take-head{background:var(--surface);padding:10px} .take-head .eyebrow{font-family:var(--font-data);letter-spacing:.08em} .take{background:var(--surface-2);padding:9px;display:flex;flex-direction:column;gap:5px} .take b{font-family:var(--font-text);font-weight:400;font-size:var(--fs-14);line-height:1.2;letter-spacing:.02em} .take p{margin:0;font-family:var(--font-text);font-size:var(--fs-11);line-height:1.4;color:var(--faint)} .imp{display:flex;flex-direction:column;gap:10px;max-width:760px} .imp-lead{margin:0 0 4px;font-family:var(--font-text);font-size:var(--fs-13);line-height:1.45;color:var(--muted)} .imp-card{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:8px} .imp-card.is-ok{opacity:.72} .imp-card h3{margin:0;font-family:var(--font-text);font-weight:400;font-size:var(--fs-16);line-height:1.3} .imp-meta{display:flex;align-items:center;gap:8px} .imp-nota,.imp-motivo{margin:0;font-family:var(--font-text);font-size:var(--fs-12);line-height:1.45;color:var(--faint)} .imp-motivo{font-style:italic} .imp-ops{display:grid;grid-template-columns:1fr 1fr;gap:8px} .imp-op{text-align:left;background:var(--surface-2);border:0;color:inherit;padding:10px;cursor:pointer; display:flex;flex-direction:column;gap:4px;font:inherit} .imp-op b{font-family:var(--font-text);font-weight:400;font-size:var(--fs-14);line-height:1.25} .imp-op p{margin:0;font-size:var(--fs-11);line-height:1.4;color:var(--faint)} .imp-op.is-on{box-shadow:inset 2px 0 0 var(--ink);background:var(--sf-alto)} .imp-escolha{background:var(--surface-2);padding:10px;display:flex;flex-direction:column;gap:4px} .imp-escolha b{font-family:var(--font-text);font-weight:400;font-size:var(--fs-14)} .imp-escolha p{margin:0;font-size:var(--fs-11);line-height:1.4;color:var(--faint)} .imp-campo{display:flex;flex-direction:column;gap:5px} .imp-campo span{font-family:var(--font-data);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .imp-campo .e-in{width:100%} .imp-rodape{display:flex;align-items:center;gap:10px;flex-wrap:wrap; font-family:var(--font-data);font-size:11px;color:var(--muted)} .imp-add{margin-top:12px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px} @media (max-width:720px){.imp-ops{grid-template-columns:1fr}} @media (max-width:980px){ .colunas{grid-template-columns:1fr} .modulo-cor{grid-template-columns:1fr} } /* ---- picker de players (chips) ---- */ .filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px} .chip{font-family:var(--font-data);font-size:11px;letter-spacing:.05em;text-transform:uppercase;background:var(--surface); background:var(--sf-alto);color:var(--muted);padding:6px 11px;border-radius:var(--radius-chip);cursor:pointer;transition:var(--m-dur-1) var(--m-ease)} .chip:hover{background:var(--sf-topo);color:var(--ink)} .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg)} .chip .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle} /* ---- quadro espelho (comparador) ---- */ /* rola nos dois eixos: o cabeçalho de cada player fica grudado no topo (lendo "Promises" você continua sabendo de quem é a coluna) e o rótulo grudado à esquerda. Sem máscara à direita — ela escondia a última coluna e o scroll parecia travado. Largura FIXA por coluna: 1fr encolhia o quadro ao viewport e matava o overflow. */ .main:has(.mirror-wrap){overflow:hidden;scrollbar-gutter:auto} .content:has(.mirror-wrap){display:flex;flex-direction:column;min-height:0;overflow:hidden; padding-inline-end:0} .content:has(.mirror-wrap) .view-head--tira{flex:none;position:sticky;top:0;z-index:4; background:var(--bg);padding-bottom:12px;margin-bottom:0} .mirror-wrap{overflow:auto;flex:1;min-height:0;margin-top:0; border-radius:0;background:transparent; max-height:none;scroll-snap-type:x proximity;scroll-padding-inline-start:104px; overscroll-behavior:contain;cursor:grab;scrollbar-width:none} .mirror-wrap::-webkit-scrollbar{width:0;height:0} .mirror-wrap.arrastando{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none} .mirror{display:grid;width:max-content;min-width:100%} .mirror .cell{padding:16px 18px;width:var(--compare-col);min-width:var(--compare-col);box-sizing:border-box; border-bottom:1px solid var(--line-soft)} .mirror[data-modo="verbal"] .cell:not(.lbl){width:var(--compare-verbal);min-width:var(--compare-verbal)} .mirror .cell.lbl{position:sticky;left:0;z-index:2;min-width:104px;width:104px; font-family:var(--font-data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint); background:var(--bg);display:flex;align-items:flex-start;padding-top:20px; box-shadow:none} .mirror .ph{display:flex;flex-direction:column;gap:5px; position:sticky;top:0;z-index:3;background:var(--bg);scroll-snap-align:start; border-bottom:1px solid var(--line)} .mirror .cell.lbl.ph{z-index:4} .mirror .ph .nome{display:flex;align-items:center;gap:9px;min-width:0} .mirror .ph .letra{width:22px;height:22px;font-size:11px;flex:none} /* nome longo não pode empurrar o cabeçalho para sete linhas: "Local tech recruitment agencies (Brainy, CVO Recruitment, IT Talent, DevsData)" é um player real, e o quadro compara COLUNAS — a altura do topo tem que ser a mesma nas quatro. */ .mirror .ph .nome b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mirror .ph b{font-family:var(--font-text);font-weight:400;font-size:17px} .mirror .ph .pill{margin-left:auto} .mirror .ph .quando{font-family:var(--font-data);font-size:10px;color:var(--faint)} .mirror .ph .quando .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle} .mirror .vazio{color:var(--faint);font-family:var(--font-text);font-style:italic;font-size:13px} .mirror .ph.vazia{background:color-mix(in srgb,var(--warn) 6%,transparent)} .mirror .sem-leitura{color:var(--warn)} .mirror .slogan{font-family:var(--font-text);font-style:italic;font-size:17px;line-height:1.35} .mirror .headline{font-size:13.5px;color:var(--ink);line-height:1.45} .mirror .vb-h{display:block;font-family:var(--font-display);font-weight:400; font-size:22px;line-height:1.2;letter-spacing:-.015em;color:var(--ink)} .mirror .vb-s{display:block;font-family:var(--font-text);font-style:italic; font-size:15px;line-height:1.35;color:var(--ink)} .mirror .tx--cel{margin:0} .mirror .tx--cel .t-frase{font-size:16px} .mirror .tx--cel .t-porque{font-family:var(--font-text);font-size:12.5px;color:var(--muted); margin-top:6px;line-height:1.45} .mirror .vb-apelo{display:inline-block;font-family:var(--font-data);font-size:10px; letter-spacing:.08em;text-transform:uppercase;color:var(--ink); padding:3px 0;border-bottom:1px solid var(--ink)} .mirror ul{list-style:none;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)} .mirror ul li::before{content:"— ";color:var(--faint)} .mirror .wrap{display:flex;flex-wrap:wrap;gap:5px} .paleta{display:flex;flex-wrap:wrap;gap:8px} .swatch{display:flex;flex-direction:column;gap:3px;align-items:center} .swatch i{width:34px;height:24px;border-radius:0;border:1px solid var(--line);display:block} .swatch code{font-family:var(--font-data);font-size:9px;color:var(--faint)} .tipo-item{display:flex;flex-direction:column;margin-bottom:6px} .tipo-item b{font-size:14px;font-weight:400} .tipo-item small{font-family:var(--font-data);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} .kv{display:flex;flex-direction:column;gap:4px;font-size:12.5px} .kv .par{display:flex;gap:8px} .kv .k{font-family:var(--font-data);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint); min-width:64px;padding-top:2px} /* flex:none + nowrap: dentro do card o pill encolhia e partia a palavra ("PROPOS TA") */ .pill{display:inline-block;flex:none;white-space:nowrap;font-family:var(--font-data);font-size:9px; letter-spacing:.06em;text-transform:uppercase;padding:2.5px 8px;border-radius:var(--radius-chip)} .pill.residual{background:transparent;color:var(--strata-residual);box-shadow:inset 0 0 0 1px var(--strata-residual)} .pill.dominante{background:transparent;color:var(--strata-dominante);box-shadow:inset 0 0 0 1px var(--strata-dominante)} .pill.emergente{background:transparent;color:var(--strata-emergente);box-shadow:inset 0 0 0 1px var(--strata-emergente)} .pill.indefinido{background:transparent;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line-soft); opacity:.7} /* Human in the loop. Quem grita é o que falta fazer: pendência tem traço cheio e tracejado, "validado" é o estado em repouso e fica quieto. */ .pill.val.v-nada{color:var(--faint);box-shadow:inset 0 0 0 1px var(--line-soft)} .pill.val.v-espera{color:var(--st-espera);background:var(--sf-baixo)} .pill.val.v-ok{color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)} .pill.val.v-nao{color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)} .pill.val.v-venceu{color:var(--warn);background:var(--sf-baixo)} /* o bloco do gate: estado, quem assinou, e o que dá para fazer a respeito */ .gate{display:flex;align-items:center;flex-wrap:wrap;gap:8px} .gate-quem{font-family:var(--font-data);font-size:10px;color:var(--muted)} .gate-nota{font-family:var(--font-text);font-size:12px;font-style:italic;color:var(--warn);flex-basis:100%} .gate-vazio{font-family:var(--font-text);font-size:12px;font-style:italic;color:var(--faint)} .gate-acoes{display:flex;gap:6px;margin-left:auto} .btn.mini{font-size:10.5px;padding:3px 9px;white-space:nowrap} .e-gate{width:172px} .e-gate .gate{gap:5px} .e-gate .gate-acoes{margin-left:0;flex-wrap:nowrap} .e-gate .gate-quem,.e-gate .gate-nota{flex-basis:100%} .conf{font-family:var(--font-data);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)} .conf.baixa{color:var(--warn)} /* ---- telas lado a lado (home inteira de cada player) ---- */ .tela-ctl{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap} /* o controle e a bússola formam um bloco só: nada entre eles e a tira */ .view-head--tira{margin-bottom:12px} .seg{display:inline-flex;align-items:center;background:var(--sf-alto);border-radius:0;padding:2px;gap:2px} .seg-b{font-family:var(--font-data);font-size:11px;letter-spacing:.05em;text-transform:uppercase;background:none;border:none; color:var(--muted);padding:6px 12px;border-radius:0;cursor:pointer;transition:var(--m-dur-1) var(--m-ease)} .seg-b:hover{color:var(--ink)} .seg-b.on{background:var(--ink);color:var(--bg)} .seg-v{font-family:var(--font-data);font-size:11px;color:var(--muted);min-width:44px;text-align:center;font-variant-numeric:tabular-nums} .tela-aviso{font-family:var(--font-data);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--warn)} /* position:relative para que offsetLeft da coluna seja a posição DENTRO da tira — é isso que o "ir para" e a bússola leem. */ /* Y no #content (é o painel que o Felipe rola). A tira só anda no X — overflow-x auto sozinho viraria um scrollport e comeria o wheel. A direita sem folga: o próximo site é cortado pela janela. A trilha some para não virar moldura. */ .main:has(.telas-wrap){overflow:hidden;scrollbar-gutter:auto} .content:has(.telas-wrap){display:flex;flex-direction:column;min-height:0; overflow-x:hidden;overflow-y:auto;padding-inline-end:0;scrollbar-width:none} .content:has(.telas-wrap)::-webkit-scrollbar{width:0;height:0} .content:has(.telas-wrap) .view-head--tira{flex:none;position:sticky;top:0;z-index:4; background:var(--bg);padding-bottom:12px;margin-bottom:0} .telas-wrap{position:relative;display:flex;gap:16px;flex:none;overflow-x:auto;overflow-y:hidden; padding:4px 0 18px;align-items:flex-start; scroll-snap-type:x proximity;scroll-padding-inline:2px;cursor:grab;user-select:none; overscroll-behavior-x:contain;scrollbar-width:none} .telas-wrap::-webkit-scrollbar{width:0;height:0} .telas-wrap.arrastando,.telas-wrap.arrastando .tela-head{cursor:grabbing} .telas-wrap.arrastando{scroll-behavior:auto} .telas-wrap:focus-visible,.feeds-wrap:focus-visible{outline:1px solid var(--ink);outline-offset:2px} .feeds-wrap .feed-head{cursor:grab;user-select:none} .feeds-wrap.arrastando,.feeds-wrap.arrastando .feed-head{cursor:grabbing} .feeds-wrap.arrastando{scroll-behavior:auto} /* ---- a bússola da tira: onde estou, e como chego na coluna 15 ---- */ .tira-rail{display:flex;gap:6px;margin-top:12px;overflow-x:auto;padding-bottom:4px; scrollbar-width:none;cursor:grab;user-select:none} .tira-rail::-webkit-scrollbar{height:0} .tira-rail.arrastando{cursor:grabbing;scroll-behavior:auto} /* nome longo não pode empurrar a bússola: o chip trunca e o título completo fica no title. "Agências de recrutamento tech locais (Brainy, CVO…)" é um player real. */ .tira-rail .chip{flex:none;cursor:pointer;max-width:220px;overflow:hidden; display:inline-flex;align-items:center;gap:6px; text-overflow:ellipsis;white-space:nowrap;color:var(--faint)} .tira-rail .chip .letra{width:16px;height:16px;font-size:8px;flex:none} /* "estou aqui" sem fio: um degrau de superfície (1,11 — acima do limiar onde dois tons colam) somado ao salto de tinta de --faint para --ink. Dezoito chips em --muted eram dezoito chips gritando o mesmo volume. */ .tira-rail .chip[data-aqui]{background:var(--sf-topo);color:var(--ink)} .tela-col{scroll-snap-align:start;flex:0 0 calc(420px * var(--tela-zoom,1));display:flex;flex-direction:column;gap:0; background:var(--sf-base)} /* A BARRA DA COLUNA — o que a imagem não sabe dizer, e nada além disso. O nome saiu: a captura já é a identidade do player, e repeti-la 18 vezes em caixa alta era legenda sobre a própria foto. Fica o estrato (chip de preenchimento, como manda o catálogo), a data, o histórico e a saída. A barra recua um degrau — é cromo, não conteúdo — e continua sendo o punho do arrasto. */ .tela-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--sf-baixo); font-family:var(--font-data);font-size:10px;color:var(--faint);min-height:31px} .tela-head .letra{width:18px;height:18px;font-size:9px;flex:none} .tela-quando{display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tela-quando .dot{width:7px;height:7px;border-radius:50%;flex:none} .tela-head a{color:var(--faint);text-decoration:none;margin-left:auto;font-size:13px;line-height:1; transition:color var(--m-dur-1) var(--m-ease)} .tela-head a:hover{color:var(--ink)} .tela-head .card__est{margin-right:1px} /* a coluna sob o ponteiro se acende no rail: o nome mora lá, e não em cima da foto */ .tira-rail .chip[data-sobre]{color:var(--ink)} /* ESTADO no próprio item, não numa frase acima dele. A aresta de 2px em --st-espera é o mesmo vocabulário do card e do menu de filtro: "N sem leitura de site: fulano, beltrano, sicrano — rode a análise" virava parágrafo com lista de nomes, e o nome já está escrito no chip. */ .chip--espera{position:relative;padding-left:14px} .chip--espera::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--st-espera)} /* o seletor de data É a data quando há histórico — por isso ele veste a mesma roupa do texto que substitui, e não a de um controle de formulário */ .tela-hist{appearance:none;-webkit-appearance:none;background:var(--sf-alto);border:0;border-radius:0; color:var(--muted);font-family:var(--font-data);font-size:10px;font-variant-numeric:tabular-nums; padding:2px 16px 2px 6px;cursor:pointer;transition:var(--m-dur-1) var(--m-ease); background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 8px) 55%,calc(100% - 5px) 55%; background-size:3px 3px,3px 3px;background-repeat:no-repeat} .tela-hist:hover{background-color:var(--sf-topo);color:var(--ink)} .tela-vp{height:var(--tela-alta,auto);min-height:200px;overflow:hidden;background:var(--bg);position:relative} .tela-img{display:block;width:100%;height:auto;pointer-events:none} .tela-arrasto{position:absolute;inset:0;z-index:2} /* scale() só aceita número — passar um COMPRIMENTO invalidava a declaração inteira e o transform virava none: o iframe renderizava em 1440px dentro de uma coluna de 420px (via-se só o canto superior esquerdo, e o zoom não fazia nada no modo ao vivo). */ .tela-frame{position:absolute;top:0;left:0;width:1440px;height:2600px;border:0;background:#fff; transform:scale(calc(420 * var(--tela-zoom,1) / 1440));transform-origin:0 0} /* devolve ao fluxo a altura REAL (já escalada) do iframe, senão sobra rolagem morta */ .tela-vp:has(.tela-frame)::after{content:"";display:block; height:calc(2600px * 420 * var(--tela-zoom,1) / 1440)} /* O VAZIO é o único lugar da tira onde escrever o nome é informação. Aqui não há captura para identificar o player, então entram a marca colhida e o nome por extenso — a mesma cadeia do letra(): símbolo → logo → inicial sobre a cor medida. */ .tela-vazia{display:flex;flex-direction:column;align-items:center;gap:10px; padding:56px 24px;color:var(--faint);font-size:12.5px;line-height:1.6;text-align:center} .tela-vazia .letra{width:40px;height:40px;border-radius:0;flex:none;display:grid;place-items:center; font-family:var(--font-text);font-size:19px;font-weight:400; background:var(--player-color,var(--sf-alto));color:#fff;overflow:hidden} .tela-vazia .letra.sem{background:var(--sf-alto);color:var(--muted)} .tela-vazia .letra img{width:100%;height:100%;object-fit:contain} .tela-vazia b{font-family:var(--font-text);font-weight:400;font-size:16px;color:var(--ink); max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:1.3} .tela-vazia span{max-width:30ch} .tela-vazia code{font-family:var(--font-data);font-size:10.5px;color:var(--muted);background:var(--surface-2); background:var(--sf-baixo);border-radius:0;padding:3px 7px;display:inline-block;margin-top:6px;word-break:break-all} .tela-vazia a{color:var(--accent);text-decoration:none} /* ---- social: a mesma tira das Telas, um feed por coluna ---- */ .achado{background:var(--sf-base);border-left:3px solid var(--accent); border-radius:0 12px 12px 0;padding:16px 20px;margin:16px 0 4px;max-width:78ch} .achado p{font-family:var(--font-display);font-size:19px;line-height:1.45;letter-spacing:-.005em;margin-top:6px} .view-head--tira .achado{margin:0 0 4px;max-width:none} /* TIRA, não pilha. O grid de 3 do Instagram pedia 326px por célula e cada player tomava a página inteira. A coluna tem a mesma medida das Telas (420) — o post cabe em uma fileira, o próximo vem abaixo, o player do lado está ao lado. */ .feeds-wrap{position:relative;display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:4px 0 18px; align-items:flex-start;scroll-snap-type:x proximity;scroll-padding-inline:2px; cursor:grab;user-select:none} .feed-col:last-child{margin-inline-end:clamp(18px,4vw,40px)} .feed-col{scroll-snap-align:start;flex:0 0 420px;background:var(--sf-base);border-radius:0; overflow:hidden;box-shadow:none;display:flex;flex-direction:column;gap:0;min-width:0} .feed-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--sf-baixo); font-family:var(--font-data);font-size:10px;color:var(--faint);min-height:31px} .feed-head .letra{width:18px;height:18px;font-size:9px;flex:none} .feed-head .card__est{margin-right:1px} .feed-quando{display:flex;align-items:center;gap:7px;min-width:0;flex:1;overflow:hidden; font-variant-numeric:tabular-nums;white-space:nowrap} .feed-handle{font-family:var(--font-text);font-size:12px;color:var(--ink)} .feed-head a{color:var(--faint);text-decoration:none;margin-left:auto;font-size:13px;line-height:1; transition:color var(--m-dur-1) var(--m-ease)} .feed-head a:hover{color:var(--ink)} /* Grid do Instagram dentro da coluna: 3 quadrados por linha, gap de 2px. A miniatura preenche o quadrado; reel ganha o triângulo no canto. */ .ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--bg)} .ig-cell{position:relative;aspect-ratio:1;overflow:hidden;background:var(--sf-alto);display:block} .ig-cell img{width:100%;height:100%;object-fit:cover;display:block} .ig-cell--reel::after{content:"";position:absolute;top:7px;right:7px;width:0;height:0; border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff; filter:drop-shadow(0 1px 2px #0008);pointer-events:none} .ig-mais{margin:8px 0 4px;width:100%;font-family:var(--font-text);font-size:12px;letter-spacing:.04em; text-transform:uppercase;background:var(--sf-alto);color:var(--ink);border:0;padding:10px 16px;cursor:pointer} .ig-mais:hover{background:var(--sf-baixo)} .ig-fim{margin:8px 10px 12px;font-family:var(--font-text);font-size:11px;color:var(--faint)} .feed-vp{overflow-y:auto;overflow-x:hidden;background:var(--bg);position:relative; overscroll-behavior-y:contain;overscroll-behavior-x:auto} .feed-vp:has(.ig-grid){max-height:min(70vh,760px)} .feed-vp:has(.feed-img){max-height:min(70vh,760px)} .feed-vp:has(.tela-vazia){min-height:240px} .feed-img{display:block;width:100%;height:auto} .feed-cor{padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px;background:var(--sf-baixo); border-top:1px solid var(--line-soft)} .fc-linha{display:flex;align-items:center;gap:10px} .fc-rot{font-family:var(--font-data);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--faint);width:34px;flex:none} .fc-sw{display:flex;gap:4px;flex-wrap:wrap;min-width:0} .fc-sw i{width:22px;height:16px;border-radius:0;display:block;cursor:pointer;transition:transform .12s; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent)} .fc-sw i:hover{transform:translateY(-2px)} .fc-sw em{font-style:normal;color:var(--faint);font-size:12px} .fc-div{font-size:11px;color:var(--muted);line-height:1.4;padding:2px 0 0} .fc-div b{font-family:var(--font-data);font-size:12px} .fc-div.perto b{color:var(--ok)} .fc-div.meio b{color:var(--warn)} .fc-div.longe b{color:var(--accent)} .metodo-nota{font-family:var(--font-data);font-size:10.5px;color:var(--faint);max-width:80ch;margin-top:6px} /* ---- cor / brand gap ---- */ .cor-topo{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:18px 0 4px} .stat{background:var(--sf-base);border-radius:var(--radius-card);padding:18px 20px; display:flex;flex-direction:column;gap:6px} .stat b{font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1;letter-spacing:-.02em} /* hex e número tabular pedem mono — é dado, não afirmação */ .stat b.dado{font-family:var(--font-data);font-size:25px;letter-spacing:0} .stat span{font-size:12.5px;color:var(--muted);line-height:1.5} .stat i{font-style:normal;font-family:var(--font-data);font-size:10.5px;color:var(--faint)} .leitura-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 22px} @media (max-width:980px){.leitura-grid{grid-template-columns:1fr}} .leitura{max-width:none} .leitura .eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .leitura .dado{font-family:var(--font-display);font-weight:400;font-size:28px;letter-spacing:-.02em;line-height:1.1} .leitura p{margin:0;font-size:13px;color:var(--muted);line-height:1.5;max-width:48ch} .leitura i{font-style:normal;font-family:var(--font-data);font-size:10.5px;color:var(--faint)} .cor-roda{display:flex;justify-content:center;margin:0} .cor-roda svg,.cor-roda-svg{width:min(505px,100%);height:auto;display:block} .cor-roda g[data-player]{transform-box:fill-box;transform-origin:center;transition:transform .12s var(--m-ease)} .cor-roda g[data-player]:hover{transform:scale(1.08)} /* Colour page: a roda lê o grid inteiro; takeaways sentam ABAIXO, em três colunas. Lentes (cluster / janela aberta) e a régua são o zoom — o tracejado sozinho não carregava a oportunidade. */ .cor-page{padding-top:4px;gap:var(--space-16)} .cor-page .modulo--cor-page{display:flex;flex-direction:column;gap:var(--space-12);min-width:0} .cor-page .cor-roda{width:100%;min-height:0;justify-content:center} .cor-page .cor-roda svg,.cor-page .cor-roda-svg{width:100%;max-width:100%;height:auto} .cor-lentes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0} .cor-lentes .rot{font-family:var(--font-data);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--faint);margin-left:4px} .cor-lentes .rot:first-child{margin-left:0} .cor-lentes-vazio{font-family:var(--font-text);font-size:var(--fs-11);color:var(--faint)} .cor-chip{display:inline-flex;align-items:center;gap:7px;border:0;padding:6px 10px 6px 7px;cursor:pointer; background:var(--surface);color:var(--ink);font:inherit;font-family:var(--font-text);font-size:var(--fs-12)} .cor-chip i{width:10px;height:10px;border-radius:50%;background:var(--sw);flex:none} .cor-chip em{font-style:normal;font-family:var(--font-data);font-size:10px;color:var(--faint)} .cor-chip:hover{background:var(--surface-2)} .cor-chip.is-on{background:var(--ink);color:var(--bg)} .cor-chip.is-on em{color:color-mix(in srgb,var(--bg) 70%,transparent)} .cor-chip--op i{border-radius:0;width:12px;height:8px} .cor-chip--reset{margin-left:auto;letter-spacing:.06em;text-transform:uppercase; font-family:var(--font-data);font-size:10px} .cor-regua{width:100%;min-width:0} .cor-regua-svg{width:100%;height:auto;display:block} .takeaways--row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;align-items:stretch} .takeaways--row .eyebrow{grid-column:1/-1;font-family:var(--font-data);font-size:10px; letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:2px 0 4px} .takeaways--row .take{padding:12px 14px} .take--lido{padding:20px 22px;gap:10px;background:var(--surface);min-width:0} .take-rot{font-family:var(--font-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} .take-num{font-family:var(--font-display);font-weight:400;font-size:44px;letter-spacing:-.03em;line-height:.95} .take--lido .tx .t-frase{font-size:18px;color:var(--ink);margin:0} .take--lido .tx .t-porque{font-size:13px;color:var(--muted);max-width:44ch} .take--lido p{font-family:inherit;font-size:inherit;color:inherit;line-height:inherit} @media (max-width:880px){ .takeaways--row{grid-template-columns:1fr} } /* três filas, não uma: "sem captura", "captura reprovada" e "acromático por escolha" eram mostrados como um rótulo só ("no measured hue"), e o terceiro nem é lacuna — é achado. Quem espera colheita leva a aresta --st-espera. */ .cor-fora{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px; padding:12px 0} .cor-fora:last-child{margin-bottom:28px} .cor-fora--espera{padding-left:12px} .cor-fora--espera::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--st-espera)} .cor-fora .rot{font-family:var(--font-data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .cor-fora .it{display:flex;align-items:center;gap:8px;padding:0;background:none;border:0;font:inherit; color:var(--ink);cursor:pointer} .cor-fora .it:hover{color:var(--accent)} .cor-fora .letra{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--player-color,var(--surface-2));color:var(--bg);font-size:12px} .cor-fora .letra.logo{background:#fff;border:1px solid var(--line-soft);overflow:hidden} .cor-fora .letra.logo img{width:100%;height:100%;object-fit:contain;padding:3px} .cor-fora .letra.sem{background:var(--surface-2);color:var(--muted)} .pal-bloco{display:flex;flex-direction:column;gap:8px;margin:8px 0 28px} .pal-bloco .rot{font-family:var(--font-data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:6px} .pal-faixa{display:flex;height:28px;width:100%;overflow:hidden;border:1px solid var(--line-soft)} .pal-faixa button{min-width:2px;border:0;padding:0;background:var(--sw);cursor:pointer} .pal-faixa button:hover{outline:1px solid var(--ink);outline-offset:-1px;z-index:1} .pal-faixa.neutra{height:14px} .pal-lead{margin:0 0 14px;font-family:var(--font-text);font-size:var(--fs-13);line-height:1.45;color:var(--muted);max-width:62ch} .pal-split{display:grid;grid-template-columns:1fr 1fr;gap:2px} .pal-split article{background:var(--surface);padding:18px 22px;display:flex;flex-direction:column;gap:6px} .pal-split strong{font-family:var(--font-display);font-weight:400;font-size:44px;letter-spacing:-.03em;line-height:.95} .pal-split span{font-family:var(--font-text);font-size:var(--fs-12);color:var(--muted)} .pal-barra{display:flex;height:8px;width:100%;margin:2px 0 22px} .pal-barra i{display:block;min-width:2px} .polos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0 0 22px} .polo{background:var(--surface);padding:20px 22px;display:flex;flex-direction:column;gap:10px;min-width:0} .polo-head{display:flex;align-items:center;gap:12px} .polo-sw{width:28px;height:28px;flex:none;background:var(--sw);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent)} .polo-emo{display:block;font-family:var(--font-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} .polo-leitor{display:block;font-family:var(--font-text);font-size:var(--fs-11);color:var(--faint);margin-top:2px} .polo .tx .t-frase{font-size:18px} .polo .tx .t-porque{font-size:13px;max-width:44ch} .pal-bloco--evidencia{margin-top:8px;opacity:.85} .gap-card .tx .t-frase{font-size:18px;margin:0} .gap-card .tx .t-porque{font-size:13px;color:var(--muted)} @media (max-width:880px){ .pal-split,.polos-grid{grid-template-columns:1fr} } .gaps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px} .gap-card{background:var(--sf-base); border-radius:var(--radius-card);padding:16px 18px;display:flex;flex-direction:column;gap:10px} .gap-head{display:flex;align-items:baseline;gap:10px} .gap-head b{font-family:var(--font-display);font-weight:400;font-size:19px} .gap-w{font-family:var(--font-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint); background:var(--sf-baixo);border-radius:var(--radius-chip);padding:3px 9px;margin-left:auto} .gap-sub{font-size:12.5px;color:var(--muted);line-height:1.5} .gap-vars{display:flex;flex-direction:column;gap:7px} .gap-var{display:flex;align-items:center;gap:11px;background:var(--bg);border:1px solid var(--line-soft); border-radius:0;padding:8px 10px;cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:var(--m-dur-1) var(--m-ease)} .gap-var:hover{border-color:var(--accent);transform:translateY(-1px)} .gap-chip{width:38px;height:38px;border-radius:0;flex:none;background:var(--sw); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 15%,transparent)} .gap-meta{display:flex;flex-direction:column;gap:1px;min-width:0} .gap-meta b{font-size:13px;font-weight:400;text-transform:capitalize} .gap-meta code{font-family:var(--font-data);font-size:10.5px;color:var(--muted)} .gap-wcag{font-family:var(--font-data);font-size:9.5px;letter-spacing:.03em} .gap-wcag.ok{color:var(--ok)} .gap-wcag.warn{color:var(--warn)} .gap-wcag.bad{color:var(--bad)} .paleta-auto{display:flex;flex-wrap:wrap;gap:8px} .sw-btn{display:flex;flex-direction:column;gap:5px;background:none;border:none;padding:0;cursor:pointer;font:inherit;width:88px} .sw-chip{display:block;width:88px;height:56px;border-radius:0;background:var(--sw); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 15%,transparent);transition:var(--m-dur-1) var(--m-ease)} .sw-btn:hover .sw-chip{transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 15%,transparent),var(--shadow)} .sw-chip.grande{width:42px;height:42px;border-radius:0;flex:none} .sw-txt{display:flex;flex-direction:column;gap:1px;align-items:flex-start} .sw-txt code{font-family:var(--font-data);font-size:9.5px;color:var(--muted)} .sw-txt em{font-style:normal;font-family:var(--font-data);font-size:9.5px;color:var(--faint)} .paleta-auto.neutra .sw-chip{height:40px} .usos{display:flex;flex-direction:column;gap:6px} .uso{display:flex;align-items:baseline;gap:8px;background:var(--bg);border:1px solid var(--line-soft); border-radius:0;padding:7px 11px;cursor:pointer;font-size:12.5px} .uso:hover{border-color:var(--accent)} .uso b{font-family:var(--font-text);font-weight:400;font-size:14px} .uso i{font-style:normal;font-family:var(--font-data);font-size:10px;color:var(--faint);margin-left:auto} .wcag-linha{display:flex;align-items:center;gap:10px;margin-bottom:6px} .wcag-am{flex:1;border:1px solid var(--line);border-radius:0;padding:8px 11px;font-size:12.5px;font-weight:400} .wcag-v{font-family:var(--font-data);font-size:10px;white-space:nowrap} .wcag-v.ok{color:var(--ok)} .wcag-v.warn{color:var(--warn)} .wcag-v.bad{color:var(--bad)} /* ---- roda cromática ---- */ .wheel-grid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:26px;align-items:center;margin-top:8px} @media (max-width:900px){.wheel-grid{grid-template-columns:1fr}} .wheel-side h3{font-family:var(--font-display);font-weight:400;font-size:19px;margin-bottom:8px} .wheel-side p{font-size:13.5px;color:var(--muted);max-width:48ch} .wheel-legend{display:flex;flex-direction:column;gap:7px;margin-top:14px;font-size:12.5px;color:var(--muted)} .wheel-legend .it{display:flex;align-items:center;gap:9px;cursor:pointer} .wheel-legend .it:hover{color:var(--ink)} .wheel-legend .sw{width:11px;height:11px;border-radius:50%;border:1px solid var(--line);flex:none} .wheel-legend .nm{font-family:var(--font-ui)} .wheel-legend code{font-family:var(--font-data);font-size:10px;color:var(--faint)} /* ---- drawer ---- */ .scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.2s;z-index:20} .scrim.open{opacity:1;pointer-events:auto} .drawer{position:fixed;top:0;right:0;height:100vh;width:min(var(--drawer),94vw); background:color-mix(in srgb,var(--sf-base) 62%,transparent); -webkit-backdrop-filter:var(--glass-blur) saturate(1.4);backdrop-filter:var(--glass-blur) saturate(1.4); border:0;box-shadow:none;transform:translateX(100%); transition:transform .22s cubic-bezier(.4,0,.1,1);z-index:21;display:flex;flex-direction:column;overflow-y:auto} .drawer.open{transform:translateX(0)} .drawer header{position:sticky;top:0;background:var(--sf-topo); padding:18px 22px;display:flex;align-items:center;gap:12px;z-index:2} .drawer header h2{font-family:var(--font-display);font-weight:400;font-size:22px} .drawer header .x{margin-left:auto;background:var(--sf-alto);border:0;border-radius:0;color:var(--muted); width:32px;height:32px;cursor:pointer;font-size:16px} .drawer header .x:hover{color:var(--ink);border-color:var(--faint)} .drawer .body{padding:20px 22px;display:flex;flex-direction:column;gap:16px} .eyebrow{font-family:var(--font-data);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .dfield{display:flex;flex-direction:column;gap:4px} .dfield .v{font-size:13.5px} .dfield .v.destaque{font-family:var(--font-text);font-style:italic;font-size:16px} .hist{display:flex;flex-direction:column;gap:8px} .hist .h{background:var(--bg);border:1px solid var(--line-soft);border-radius:0;padding:9px 12px;font-size:12.5px} .hist .h .quando{font-family:var(--font-data);font-size:10px;color:var(--faint)} .hist .h .st{font-family:var(--font-data);font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px; border-radius:0;margin-left:6px} .hist .h .st.proposta{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)} .hist .h .st.confirmado{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)} .hist .h ul{list-style:none;margin-top:4px;color:var(--muted)} .hist .h ul li::before{content:"· "} .fontes{display:flex;flex-direction:column;gap:4px;font-size:12px} .fontes a{color:var(--muted);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fontes a:hover{color:var(--accent)} /* ---- toast ---- */ .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink); color:var(--bg);padding:11px 20px;border-radius:0;font-size:13.5px;pointer-events:none;z-index:40;box-shadow:none; visibility:hidden;transition:transform .2s var(--m-ease),visibility 0s linear .2s} .toast.show{visibility:visible;transform:translateX(-50%) translateY(0);transition:transform .2s var(--m-ease),visibility 0s} /* ---- tooltip svg (dataviz: hover em tudo) ---- */ .tip{position:fixed;pointer-events:none;border:0;border-radius:0; padding:8px 11px;font-size:12px;color:var(--ink);box-shadow:none;z-index:50;max-width:260px; /* NÃO anima opacity: opacity<1 vira backdrop root e cega o vidro. A tinta É a opacidade. */ background:color-mix(in srgb,var(--sf-base) 0%,transparent); -webkit-backdrop-filter:none;backdrop-filter:none; transform:translateY(-3px);visibility:hidden; transition:background .1s var(--m-ease),transform .1s var(--m-ease),visibility 0s linear .1s} .tip.show{visibility:visible;transform:translateY(0); background:color-mix(in srgb,var(--sf-base) 72%,transparent); -webkit-backdrop-filter:var(--glass-blur) saturate(1.4);backdrop-filter:var(--glass-blur) saturate(1.4); transition:background .1s var(--m-ease),transform .1s var(--m-ease),visibility 0s} .tip .t-k{font-family:var(--font-data);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);display:block} .tip.show{opacity:1} @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto!important} } /* ---- escopo: a mesa de configuração do projeto ---- */ .e-proj{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:16px 0 6px; padding:16px;background:var(--surface);border:1px solid var(--line-soft)} .e-proj label{display:flex;flex-direction:column;gap:5px;min-width:160px} .e-proj label.cresce{flex:1;min-width:260px} .e-proj label span{font-family:var(--font-data);font-size:var(--fs-micro);letter-spacing:.1em; text-transform:uppercase;color:var(--faint)} /* campo que promete demais precisa se explicar: o link do Figma é atalho, não sincronia */ .e-proj .e-dica{font-family:var(--font-text);font-style:italic;font-size:11.5px;line-height:1.45; color:var(--faint);max-width:62ch} .e-in{background:var(--sf-alto);border:0;color:var(--ink);font:inherit; font-size:12px;padding:7px 9px;border-radius:0;transition:var(--m-dur-1) var(--m-ease)} .e-in:focus{outline:none;border-color:var(--ink)} .e-in.ok{box-shadow:inset 2px 0 0 var(--st-ok)} .e-in.erro{box-shadow:inset 2px 0 0 var(--strata-residual)} select.e-in{cursor:pointer} .e-resumo{display:flex;gap:26px;flex-wrap:wrap;margin:14px 0;padding:12px 14px;background:var(--sf-base)} .e-resumo span{font-size:12px;color:var(--faint)} .e-resumo b{font-family:var(--font-data);font-size:19px;color:var(--ink);margin-right:5px} .e-tab-wrap{overflow-x:auto;background:var(--sf-base);margin-top:6px} .e-tab{width:100%;border-collapse:collapse;font-size:12px} .e-tab th{text-align:left;font-family:var(--font-data);font-size:var(--fs-micro);letter-spacing:.1em; text-transform:uppercase;color:var(--faint);font-weight:400;padding:11px 12px; position:sticky;top:0;background:var(--sf-topo);z-index:2} .e-tab td{padding:11px 12px;vertical-align:top} .e-tab tbody tr:nth-child(odd){background:var(--sf-alto)} .e-tab tr:hover td{background:var(--surface-2)} .e-nome{display:grid;grid-template-columns:22px 1fr;column-gap:10px;align-items:start} .e-nome .letra{grid-column:1;grid-row:1;width:22px;height:22px;font-size:11px;margin-top:1px} .e-nome b,.e-nome .pill,.e-nome code{grid-column:2} .e-nome b{display:block;font-size:13px} .e-nome code{font-family:var(--font-data);font-size:var(--fs-micro);color:var(--faint);display:block;margin-top:3px} .e-nome .pill{margin-top:4px;display:inline-block} .e-fonte{min-width:210px} .e-fonte .e-in{width:100%} .e-colhido{display:block;margin-top:4px;font-family:var(--font-data);font-size:var(--fs-micro)} .e-colhido.tem{color:var(--ok)} .e-colhido.vazio{color:var(--faint)} .e-acao{width:36px} .e-rm{background:var(--sf-alto);border:0;color:var(--faint);cursor:pointer; width:24px;height:24px;font-size:12px;transition:var(--m-dur-1) var(--m-ease)} .e-rm:hover{color:var(--bad);border-color:var(--bad)} .e-novo{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .e-novo #n-nome{min-width:200px} .e-novo #n-site{flex:1;min-width:260px} .btn{font:inherit;font-size:12px;padding:8px 16px;cursor:pointer;border-radius:0; border:1px solid var(--line);background:var(--surface-2);color:var(--ink); transition:var(--m-dur-1) var(--m-ease)} .btn:hover{border-color:var(--ink)} .btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)} .e-como p{font-size:12px;color:var(--muted);max-width:70ch;margin-bottom:10px} .e-como code{display:block;font-family:var(--font-data);font-size:11px;color:var(--muted); background:var(--surface);border:1px solid var(--line-soft);padding:8px 11px;margin-bottom:5px;max-width:64ch} .wheel-largo{margin:14px 0 6px} /* ---- RDE ---- */ .rde-def{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:6px 0 14px} .rde-def .d{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:12px 14px; background:var(--surface);border:1px solid var(--line-soft)} .rde-def .d b{font-family:var(--font-data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .rde-def .d p{grid-column:2;font-size:12px;color:var(--muted);line-height:1.45;margin:0} .letra-rde{grid-row:1/3;font-family:var(--font-display);font-size:40px;line-height:1;color:var(--ink);width:38px} .rde-def .residual .letra-rde{color:var(--faint)} .rde-def .emergente .letra-rde{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px} .rde-matrix .mrow small{display:block;font-size:10px;color:var(--faint);letter-spacing:0;text-transform:none;margin-top:2px} .rde-matrix .mcell.vazia{background:var(--sf-baixo);opacity:.5} .rde-matrix .mcell.vazia .nada{color:var(--ink);font-family:var(--font-data);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase} .pcard.fora-mapa{opacity:.55} .pcard.rde-p.proposta{position:relative} .pcard.rde-p.proposta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--st-espera)} .pill.proposta{background:var(--sf-baixo);color:var(--st-espera);margin-left:auto} .rde-continuo{display:flex;align-items:center;gap:10px;margin:10px 0 0 120px;font-family:var(--font-data);font-size:9.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .rde-continuo i{flex:1;height:1px;background:linear-gradient(90deg,var(--line),var(--ink))} .rde-quadro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start} @media (max-width:980px){.rde-quadro,.rde-def{grid-template-columns:1fr}} .rde-col{background:var(--surface);border:1px solid var(--line-soft);padding:0 0 14px;display:flex;flex-direction:column;gap:10px} .rde-col.emergente{border-color:var(--line)} .rde-mosaico{display:grid;gap:3px;background:var(--bg);aspect-ratio:4/3;overflow:hidden} .rde-mosaico.n1{grid-template-columns:1fr}.rde-mosaico.n2{grid-template-columns:1fr 1fr} .rde-mosaico.n3,.rde-mosaico.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr} .rde-mosaico.n3 img:first-child{grid-row:1/3} .rde-mosaico img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;cursor:pointer; filter:saturate(.85);transition:filter var(--m-dur-1) var(--m-ease)} .rde-mosaico img:hover{filter:saturate(1)} .rde-mosaico.vazio{display:grid;place-items:center;color:var(--faint);font-family:var(--font-data);font-size:11px} .rde-head{display:flex;align-items:baseline;gap:8px;padding:0 14px} .rde-head i{width:9px;height:9px;border-radius:50%;flex:none;align-self:center} .rde-col.residual .rde-head i{box-shadow:inset 0 0 0 1.5px var(--strata-residual)} .rde-col.dominante .rde-head i{background:var(--strata-dominante)} .rde-col.emergente .rde-head i{background:var(--strata-emergente);box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--strata-emergente)} .rde-head h3{font-family:var(--font-data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin:0} .rde-head small{margin-left:auto;font-family:var(--font-data);font-size:10px;color:var(--faint)} .rde-leitura{padding:0 14px;font-family:var(--font-text);font-size:14px;line-height:1.55;color:var(--ink);margin:0} .rde-leitura.vazia{color:var(--faint)} .rde-codigos{list-style:none;padding:0 14px;margin:0;display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line-soft);padding-top:10px} .rde-codigos li{display:flex;gap:8px;align-items:baseline;font-size:12px;color:var(--muted);line-height:1.4} .rde-codigos .tp{color:var(--faint);font-size:10px;flex:none;width:12px} .rde-codigos code{margin-left:auto;flex:none;font-family:var(--font-data);font-size:10.5px;color:var(--ink); border:1px solid var(--line);padding:1px 6px;cursor:help} .rde-sintese{max-width:60ch} .rde-sintese .serif{font-family:var(--font-display);font-size:clamp(20px,2.6vw,28px);line-height:1.28;letter-spacing:-.01em;margin:0} .rde-sintese .sans{font-size:clamp(20px,2.6vw,28px);line-height:1.28;letter-spacing:-.02em;font-weight:400;margin:8px 0 0} .rde-oport{margin-top:18px;padding:14px 16px;background:var(--sf-alto);position:relative} .rde-oport::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--st-espera)} .rde-oport .eyebrow{font-family:var(--font-data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .rde-oport p{margin:6px 0 0;font-size:14px;line-height:1.55} .rde-contesta{max-width:70ch;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.5;color:var(--ink)} .rde-contesta li::marker{font-family:var(--font-data);color:var(--faint)} /* ---- a cor do estrato acompanha o player e o código, discreta: um fio à esquerda ---- */ .pcard.est-residual{border-left:2px solid var(--strata-residual)} .pcard.est-dominante{border-left:2px solid var(--strata-dominante)} .pcard.est-emergente{border-left:2px solid var(--strata-emergente)} .pcard.proposta{position:relative} .pcard.proposta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--st-espera)} .codechip.est-residual{border-left:2px solid var(--strata-residual)} .codechip.est-dominante{border-left:2px solid var(--strata-dominante)} .codechip.est-emergente{border-left:2px solid var(--strata-emergente)} .matrix .mcell.residual{border-top:1px solid color-mix(in srgb,var(--strata-residual) 55%,transparent)} .matrix .mcell.dominante{border-top:1px solid color-mix(in srgb,var(--strata-dominante) 55%,transparent)} .matrix .mcell.emergente{border-top:1px solid color-mix(in srgb,var(--strata-emergente) 55%,transparent)} .pill.proposta{color:var(--st-espera);background:var(--sf-baixo)} /* RDE: definição, colunas do quadro e o contínuo */ .rde-def .d.residual{border-top:2px solid var(--strata-residual)} .rde-def .d.dominante{border-top:2px solid var(--strata-dominante)} .rde-def .d.emergente{border-top:2px solid var(--strata-emergente)} .rde-def .residual .letra-rde{color:var(--strata-residual)} .rde-def .dominante .letra-rde{color:var(--strata-dominante)} .rde-def .emergente .letra-rde{color:var(--strata-emergente);text-decoration:none} .rde-col.residual{border-top:3px solid var(--strata-residual)} .rde-col.dominante{border-top:3px solid var(--strata-dominante)} .rde-col.emergente{border-top:3px solid var(--strata-emergente)} .rde-col.residual .rde-head i{background:var(--strata-residual);box-shadow:none} .rde-col.dominante .rde-head i{background:var(--strata-dominante)} .rde-col.emergente .rde-head i{background:var(--strata-emergente);box-shadow:none} .rde-col.residual .rde-head h3{color:var(--strata-residual)} .rde-col.dominante .rde-head h3{color:var(--strata-dominante)} .rde-col.emergente .rde-head h3{color:var(--strata-emergente)} .rde-continuo i{background:linear-gradient(90deg,var(--strata-residual),var(--strata-dominante),var(--strata-emergente))} .wheel-legend .it .est{width:6px;height:6px;border-radius:50%;flex:none} /* ---- arena (home) ---- */ .arena-wrap{position:relative;margin:0;width:100%;overflow:visible} .arena-wrap svg{display:block;width:100%;height:auto;min-width:0} .arena-pecas{position:absolute;inset:0;pointer-events:none} .arena-chip{position:absolute;transform:translate(-50%,-50%);pointer-events:auto; display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px 0 4px; font-family:var(--font-ui);font-size:12px;line-height:1;white-space:nowrap; background:var(--bg);color:var(--ink);border:1px solid var(--line);cursor:pointer} .arena-chip .letra{width:18px;height:18px} .arena-chip .letra.logo img{padding:2px} .arena-chip.est-residual{border-color:var(--strata-residual)} .arena-chip.est-dominante{border-color:var(--strata-dominante)} .arena-chip.est-emergente{border-color:var(--strata-emergente)} .arena-chip.proposta{border-style:dashed} .arena-chip:hover{background:var(--surface);border-width:1.5px} .modulo-eixos{min-width:0} .eixos-leituras{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px} .eixos-tab{font:inherit;font-family:var(--font-text);font-size:var(--fs-12);letter-spacing:.04em; text-transform:uppercase;padding:5px 10px;background:transparent;color:var(--faint); border:1px solid var(--line);cursor:pointer} .eixos-tab i{font-style:normal;margin-left:6px;text-transform:none;letter-spacing:0;color:var(--muted)} .eixos-tab.is-on{color:var(--ink);border-color:var(--ink)} .eixos-campo{display:grid;grid-template:"n n n" auto "w g e" minmax(0,1fr) "s s s" auto / minmax(4.5rem,auto) minmax(0,1fr) minmax(4.5rem,auto); gap:10px 12px;width:100%;min-width:0; height:min(52vh,520px);min-height:320px} .eixos-n,.eixos-s,.eixos-w,.eixos-e{font-family:var(--font-text);font-size:var(--fs-13); letter-spacing:.04em;color:var(--ink);line-height:1.25} .eixos-n{grid-area:n;justify-self:center;align-self:end} .eixos-s{grid-area:s;justify-self:center;align-self:start} .eixos-w{grid-area:w;justify-self:end;align-self:center;text-align:right;max-width:7.5rem} .eixos-e{grid-area:e;justify-self:start;align-self:center;max-width:7.5rem} .eixos-grade{grid-area:g;position:relative;width:100%;height:100%;min-height:0;min-width:0; border:1px solid var(--line);background:var(--bg)} .eixos-grade::before,.eixos-grade::after{content:"";position:absolute;background:var(--line);pointer-events:none;z-index:0} .eixos-grade::before{left:50%;top:0;bottom:0;width:1px} .eixos-grade::after{top:50%;left:0;right:0;height:1px} .eixos-grade.is-alvo{cursor:crosshair;outline:1px dashed var(--line);outline-offset:-5px} .eixos-gap{font-family:var(--font-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--faint);pointer-events:none} .eixos-grade .eixos-p{position:absolute;z-index:1;transform:translate(-50%,-50%);max-width:42%; touch-action:none} .eixos-grade .eixos-p.is-sel{z-index:2} .eixos-p{font:inherit;font-size:var(--fs-12);line-height:1.2;padding:4px 10px 4px 4px; display:inline-flex;align-items:center;gap:6px; overflow:hidden;white-space:nowrap;cursor:pointer; background:var(--surface);color:var(--ink);border:1px solid var(--line)} .eixos-p > span{overflow:hidden;text-overflow:ellipsis} .eixos-p .letra{width:16px;height:16px;font-size:8px;flex:none} .eixos-p .letra.logo img{padding:1px} .eixos-p.is-prop{border-style:dashed;color:var(--muted)} .eixos-p.is-ok{border-style:solid} .eixos-p.is-solto{border-style:dotted;color:var(--ink)} .eixos-p.is-sel{outline:1px solid var(--ink);outline-offset:1px} .eixos-p.is-fora{opacity:.42} .eixos-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 4px; font-family:var(--font-text);font-size:var(--fs-12);color:var(--ink)} .eixos-barra .btn{margin-left:0} .eixos-soltos .eixos-p{margin:0} .eixos-nota{margin:0 0 4px;font-family:var(--font-text);font-size:var(--fs-11);line-height:1.4;color:var(--faint)} /* ---- bentos ---- */ /* bento: bloco reescrito no fim do arquivo (sem rótulo sobreposto) */ /* ---- o avatar é a marca: ícone colhido em caixa reta; a cor medida vira o fio de baixo ---- */ .letra{display:inline-grid;place-items:center;flex:none;width:18px;height:18px; font-family:var(--font-text);font-size:10px;line-height:1;color:#fff; background:var(--player-color,var(--surface-2));overflow:hidden} .letra.sem{background:var(--surface-2);color:var(--muted)} .letra.logo{background:var(--bg);border:1px solid var(--line-soft);padding:0;overflow:hidden;position:relative} .letra.logo img{width:100%;height:100%;object-fit:contain;display:block;padding:3px;background:#fff} .letra.logo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--player-color)} /* ---- Fase 0: números tabulares e mono só em código ---- */ code,kbd,pre,.e-como code,.empty code{font-family:var(--mono)} .stat b,.nota b,.rde-codigos code,.e-resumo b{font-family:var(--font-num);font-variant-numeric:tabular-nums} .rde-codigos code{font-family:var(--font-num)} .pcard .letra,.tela-head .letra,.feed-head .letra,.brand .mark,.brand b,.band b,.pcard b,.mirror .ph b,.tipo-item b,.tela-head .nome b,.feed-head .nome b{font-weight:400} /* ---- Fase 0: sem negrito em lugar nenhum (as fontes só existem em 400); ênfase é face e luz ---- */ b,strong{font-weight:400} .wheel-legend code,.pcard small code,.dfield code,.b-cel small{font-family:var(--font-num);font-variant-numeric:tabular-nums} h1,h2,h3,h4,h5,h6,th,legend,summary,dt,label{font-weight:400} /* tinta fraca sobre superfície elevada: #828282 não passa em contraste sobre #1a1a1a/#232323 */ .pcard,.drawer,.tip,.gap-card,.stat,.direcao,.bento,.b-cel,.rde-col,.e-proj,.mcell,.imp-card,.imp-add{--faint:var(--faint-raised)} /* ============================================================================ FASE 1 — CASCA SaaS. Bloco único, acrescentado ao FIM de styles.css. Vem depois de TUDO (inclusive do remapeamento de --faint da última linha), então ganha por ordem de cascata sem precisar de !important. O que ele substitui, e por quê os seletores antigos ficam órfãos: .rail / .brand / .rail-label / .nav / .rail-foot → não há mais