:root {
  color-scheme: light dark;

  --cream-100:#F2F2F0;
  --cream-50:#FAFAF8;
  --sage-500:#A7B8A0;
  --sage-600:#8FA187;
  --sage-300:#C7D3C1;
  --navy-900:#2B343B;
  --navy-800:#333D45;
  --slate-500:#515C66;
  --slate-300:#89939C;
  --slate-100:#D7DBDE;
  --white:#FFFFFF;
  --black:#14181B;
  --success:#7FA872;
  --warning:#D6B35C;
  --danger:#C0665B;
  --accent:var(--sage-500);
  --accent-hover:var(--sage-600);
  --accent-soft:rgba(167,184,160,0.35);
  --accent-fg:var(--navy-900);

  --font-sans:'General Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --text-display-xl:clamp(2.75rem,4vw,4.5rem);
  --text-display-lg:2.5rem;
  --text-display-md:2rem;
  --text-title:1.5rem;
  --text-body-lg:1.125rem;
  --text-body:1rem;
  --text-body-sm:0.875rem;
  --text-caption:0.75rem;
  --text-eyebrow:0.75rem;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --leading-tight:1.1;
  --leading-snug:1.3;
  --leading-normal:1.5;
  --tracking-eyebrow:0.08em;

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --space-32:128px;
  --container-max:1200px;
  --container-pad:24px;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,24,27,0.06);
  --shadow-md:0 4px 16px rgba(20,24,27,0.08);
  --shadow-lg:0 12px 32px rgba(20,24,27,0.12);
  --shadow-dark-sm:0 1px 2px rgba(0,0,0,0.3);
  --shadow-dark-md:0 4px 20px rgba(0,0,0,0.35);
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --duration-fast:120ms;
  --duration-base:200ms;
  --duration-slow:360ms;
}

/* tea (claro) — padrão quando não há atributo */
:root, [data-theme="light"] {
  --bg-page:#F2F2F0;
  --bg-card:#FAFAF8;
  --bg-raised:#FFFFFF;
  --bg-chip:rgba(43,52,59,0.06);
  --text-primary:#2B343B;
  --text-secondary:#515C66;
  --border:rgba(43,52,59,0.12);
  /* 0.14 dava 1.22:1 sobre o card — a barra vazia sumia e '0 recebido'
     ficava igual a 'nao carregou'. 0.24 sobe para 1.43:1. */
  --track:rgba(81,92,102,0.24);
  --shadow-card:0 1px 2px rgba(20,24,27,0.06);
  --shadow-raised:0 4px 16px rgba(20,24,27,0.08);
  --mug-body:#FFFFFF;
}

/* coffee (escuro). O design system troca por atributo; aqui também respeitamos
   a preferência do sistema, porque muita gente nunca clica no toggle. Só os
   tokens mudam — nenhum componente estiliza dentro de media query. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page:#2B343B;
    --bg-card:#333D45;
    --bg-raised:#3A444C;
    --bg-chip:rgba(242,242,240,0.08);
    --text-primary:#F2F2F0;
    --text-secondary:#BDC6CD;
    --border:rgba(242,242,240,0.14);
    --track:rgba(242,242,240,0.30);
    --shadow-card:0 1px 2px rgba(0,0,0,0.3);
    --shadow-raised:0 4px 20px rgba(0,0,0,0.35);
    --mug-body:#1F2529;
  }
}

[data-theme="dark"] {
  --bg-page:#2B343B;
  --bg-card:#333D45;
  --bg-raised:#3A444C;
  --bg-chip:rgba(242,242,240,0.08);
  --text-primary:#F2F2F0;
  --text-secondary:#BDC6CD;
  --border:rgba(242,242,240,0.14);
  --track:rgba(242,242,240,0.30);
  --shadow-card:0 1px 2px rgba(0,0,0,0.3);
  --shadow-raised:0 4px 20px rgba(0,0,0,0.35);
  --mug-body:#1F2529;
}

/* Tinta de acento para TEXTO (UX-QA T-02/C-35). --accent/--accent-hover foram
   desenhados para preenchimento de pilula e botao: como cor de texto dao 1,87:1
   e 2,46:1 sobre o cream. --accent-ink e' o par de texto do mesmo acento —
   sage escurecido em direcao ao navy no tea (4,66:1 sobre o cream), o proprio
   sage-500 no coffee (6,0:1 sobre o navy). Mesma formula do ds2/tokens.ts;
   declarar aqui evita que a v1 dependa de uma pagina v2 carregar o ds2. */
/* --danger-ink (UX-QA T-13/R2-15): o mesmo par para texto de erro. --danger
   (#C0665B) e' cor de pilula; como texto da 3,79:1 sobre o card do coffee.
   Tea: 62% danger + 38% navy = 5,54:1 sobre o cream. Coffee: 55% danger + 45%
   cream = 5,16:1 sobre o card, 5,89:1 sobre a pagina, 4,63:1 sobre o raised. */
:root, [data-theme="light"] {
  --accent-ink: color-mix(in srgb, var(--sage-600) 55%, var(--navy-900) 45%);
  --danger-ink: color-mix(in srgb, var(--danger) 62%, var(--navy-900) 38%);
}
[data-theme="dark"] { --accent-ink: var(--sage-500); --danger-ink: color-mix(in srgb, var(--danger) 55%, var(--cream-100) 45%);
  /* R6: texto de botao de perigo em contorno sobre card elevado (4,1:1 com o ink acima) */
  --danger-ink-strong: color-mix(in srgb, var(--danger) 38%, var(--cream-100) 62%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent-ink: var(--sage-500); --danger-ink: color-mix(in srgb, var(--danger) 55%, var(--cream-100) 45%);
    --danger-ink-strong: color-mix(in srgb, var(--danger) 38%, var(--cream-100) 62%); }
}

@font-face {
  font-family: 'General Sans';
  src: url('/fonts/GeneralSans-Variable.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Ancora da faixa de fundo do hero 3D, que se posiciona contra o body para
     poder cobrir cabecalho e hero de uma vez. */
  position: relative;
  /* A faixa do hero passa da borda direita de proposito, para a orbita
     continuar fora da tela. Sem isto ela cria rolagem horizontal. Usamos clip
     em vez de hidden porque hidden transformaria o body em contexto de
     rolagem e quebraria position: sticky mais adiante. */
  overflow-x: clip;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* Foco visível sempre — requisito de acessibilidade, não decoração. */
/* R9-15 — anel unico = --ring (3px de --text-primary, >= 3:1 nos dois temas). "html" na frente
   para vencer o box-shadow de base de .btn e cia (senao o foco some em quem tem sombra propria). */
html :focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

a { color: var(--accent-ink); text-underline-offset: 0.2em; }
a:hover { color: var(--text-primary); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--bg-raised); color: var(--text-primary);
  padding: var(--space-3) var(--space-4); z-index: 10;
  border-radius: 0 0 var(--radius-sm) 0; box-shadow: var(--shadow-card);
}
.skip:focus { left: 0; }

.wrap {
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--space-6) var(--container-pad) var(--space-20);
  /* Acima da faixa de fundo do hero 3D. */
  position: relative; z-index: 1;
}
/* Coluna de leitura: o container de 1200px é para grades, não para texto. */
.prose { max-width: 66ch; }
/* Markdown de criador/IA renderizado (src/ui/md.ts). Títulos chegam como h3+ —
   a página já tem o h1/h2 dela. */
.fc-md { max-width: 64ch; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.fc-md > :first-child { margin-top: 0; }
.fc-md > :last-child { margin-bottom: 0; }
.fc-md :is(h3, h4, h5, h6) { margin: 1.25em 0 .4em; font-size: 1.0625rem; font-weight: 600;
  line-height: 1.3; color: var(--text-primary); }
.fc-md :is(h4, h5, h6) { font-size: 1rem; }
.fc-md p { margin: 0 0 .75em; text-wrap: pretty; }
.fc-md :is(ul, ol) { margin: 0 0 .75em; padding-left: 1.25em; }
.fc-md li { margin: .2em 0; }
.fc-md code { font-family: var(--font-mono); font-size: .875em;
  padding: .1em .35em; border-radius: var(--radius-sm); background: var(--bg-chip); }
.fc-md pre { margin: 0 0 .75em; padding: .75em 1em; overflow-x: auto; border-radius: var(--radius-md);
  background: var(--bg-chip); }
.fc-md pre code { padding: 0; background: none; }
.fc-md blockquote { margin: 0 0 .75em; padding-left: 1em; color: var(--text-secondary);
  box-shadow: inset 2px 0 0 var(--border); }
.fc-md blockquote p { margin: 0; }
.fc-md a { color: var(--text-primary); text-underline-offset: .2em; }
.fc-md hr { border: 0; height: 1px; margin: 1.25em 0; background: var(--border); }
.fc-md--sm { font-size: .875rem; line-height: 1.5; color: var(--text-secondary); }
.fc-md--sm :is(h3, h4, h5, h6) { font-size: .9375rem; }

/* Standard Commitment em modal (src/ui/v2/commitment_modal.ts). Reusa o
   <dialog class="modal"> (posição, scrim, trava de rolagem sem salto de layout,
   Esc e retorno de foco); aqui só o tamanho e o miolo que rola. */
dialog.modal.fc-cm { padding: 0; overflow: hidden; width: min(44rem, calc(100% - 2rem));
  max-height: min(85vh, 46rem); }
dialog.modal.fc-cm[open] { display: flex; flex-direction: column; }
.fc-cm-head { padding: var(--space-6) var(--space-6) var(--space-3); }
.fc-cm-head h2 { margin: 0; font-size: var(--text-body-lg); }
.fc-cm-sub { margin: var(--space-1) 0 0; font-size: var(--text-body-sm); color: var(--text-secondary); }
.fc-cm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 var(--space-3); padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md); background: var(--bg-raised); font-size: var(--text-body-sm);
  line-height: 1.6; color: var(--text-secondary); }
.fc-cm-body p { margin: 0 0 .8em; }
.fc-cm-body p:last-child { margin-bottom: 0; }
.fc-cm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-6); }
.fc-cm-page { margin-right: auto; font-size: var(--text-body-sm); color: var(--text-secondary);
  text-underline-offset: .2em; }

/* ---------------------------------------------------------------- cabeçalho */

/* A faixa do cabecalho vai de ponta a ponta; quem respeita o container e o
   .site-in de dentro. Antes o max-width estava no proprio <header>, entao o
   vidro e a borda so pintavam a faixa central e o resto da largura ficava
   descoberto (invisivel no mock, que tinha container do tamanho da janela). */
header.site {
  /* Acima da faixa de fundo do hero 3D. */
  position: relative; z-index: 1;
}
.site-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); max-width: var(--container-max); margin: 0 auto;
  padding: var(--space-5) var(--container-pad);
  transition: padding var(--duration-base) var(--ease-standard);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--text-primary); text-decoration: none;
  font-weight: var(--weight-semibold); letter-spacing: -0.01em;
}
.brand:hover { color: var(--text-primary); }
.site-actions { display: flex; align-items: center; gap: var(--space-2); }
.brand .dot { color: var(--accent-ink); }

/* ---------------------------------------------------------------- tipografia */

h1 {
  font-size: var(--text-display-lg); line-height: var(--leading-tight);
  letter-spacing: -0.03em; font-weight: var(--weight-bold);
  margin: 0 0 var(--space-3); text-wrap: balance;
}
/* Manchete em dois tons: linha forte, segunda linha em sage. Padrão de hero
   do design system, reaproveitável em qualquer título de destaque — não só
   h1: o watermark de "Every request is signed" (T-02/1b) usa em h2. */
h1 .second, h2 .second { display: block; color: var(--accent-ink); }

h2 {
  font-size: var(--text-title); font-weight: var(--weight-semibold);
  letter-spacing: -0.02em; margin: var(--space-12) 0 var(--space-4);
  text-wrap: balance;
}
h3 { font-size: var(--text-body); font-weight: var(--weight-semibold); margin: 0; }

.lede {
  font-size: var(--text-body-lg); color: var(--text-secondary);
  margin: 0 0 var(--space-6); max-width: 60ch;
}
.muted { color: var(--text-secondary); }
.small { font-size: var(--text-body-sm); }
.is-accent { color: var(--accent-ink); }
.tiny  { font-size: var(--text-caption); }

/* Único uso de caixa alta no sistema. */
.eyebrow {
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  font-size: var(--text-eyebrow); font-weight: var(--weight-medium);
  color: var(--text-secondary); margin: 0 0 var(--space-2);
}

/* ---------------------------------------------------------------- superfícies */

/* Cards não têm borda: separam do fundo por fill diferente e sombra suave. */
.card {
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-6);
}
.raised { background: var(--bg-raised); box-shadow: var(--shadow-raised); }

.stack > * + * { margin-top: var(--space-3); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: baseline; }

/* ---------------------------------------------------------------- controles */

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--accent); color: var(--accent-fg); border: 1px solid transparent;
  font: inherit; font-weight: var(--weight-medium);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill); cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--accent-hover); color: var(--accent-fg); }
.btn:active { transform: scale(0.98); }
.btn-quiet {
  background: var(--bg-raised); color: var(--text-primary);
  border-color: var(--border); box-shadow: var(--shadow-card);
}
.btn-quiet:hover { background: var(--bg-raised); color: var(--text-primary); }
.btn.tiny { padding: var(--space-2) var(--space-4); font-size: var(--text-body-sm); }


/* Pílula de estado. Tons do Badge do design system. */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-weight: var(--weight-semibold); font-size: var(--text-caption);
  padding: 4px 10px; border-radius: var(--radius-pill);
  line-height: 1.2; white-space: nowrap;
}
.badge-accent  { background: var(--accent); color: var(--accent-fg); }
.badge-neutral { background: var(--bg-chip); color: var(--text-secondary); }
.badge-outline { background: transparent; color: var(--text-secondary);
                 box-shadow: inset 0 0 0 1px var(--border); }

/* .badge.ok e .badge.bad eram usados em cinco lugares — erro do /apply, erro do
   roadmap, chave rotacionada no estudio — e NUNCA existiram no CSS. O resultado
   e' que toda mensagem de erro do produto saia com a cara de um badge neutro:
   a moldura de aviso estava escrita no HTML e nao chegava na tela.

   Fundo dessaturado em vez de solido porque estes badges carregam frase, nao
   rotulo de uma palavra: --danger cheio atras de texto corrido reprova no
   contraste, e o texto fica em --text-primary, que passa nos dois temas. */
.badge.ok  { background: color-mix(in srgb, var(--accent) 22%, transparent);
             color: var(--text-primary); white-space: normal; }
.badge.bad { background: color-mix(in srgb, var(--danger) 20%, transparent);
             color: var(--text-primary); white-space: normal;
             box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); }

/* Barra de progresso — mesma geometria do ProgressBar do design system. */
.track { height: 10px; border-radius: var(--radius-pill); background: var(--track); overflow: hidden; }
.track > i {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: var(--accent);
}

/* ---------------------------------------------------------------- tabelas */

table { border-collapse: collapse; width: 100%; font-size: var(--text-body-sm); }
th, td {
  text-align: left; padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
th {
  font-weight: var(--weight-semibold); color: var(--text-secondary);
  font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; padding-right: 0; }

code, .mono { font-family: var(--font-mono); font-size: 0.875em; }

.scroll-x { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Glifo de tema do toggle (T-02/2a): mostra o glifo e o rótulo do tema ATIVO
   agora — o botão se autodescreve ("Theme: tea" enquanto tea está ligado),
   clicar troca para o outro. Título do botão é a ação genérica; o rótulo que
   aparece no hover é o estado, e os dois não podem discordar. Três-vias, mesmo
   padrão dos tokens de cor acima: explícito claro, explícito escuro, e
   preferência de sistema sem atributo algum. */
.btn-icon .th-coffee { display: none; }
[data-theme="dark"] .btn-icon .th-coffee { display: revert; }
[data-theme="dark"] .btn-icon .th-tea { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-icon .th-coffee { display: revert; }
  :root:not([data-theme="light"]) .btn-icon .th-tea { display: none; }
}

/* Texto do desvio previsto×real (T-02/1c-1d): mesmas cores que .dev-bar i.over
   e .delta.down já usam abaixo (UI_V2_CSS) — sob a meta é positivo (sage),
   acima é o mesmo terracota do resto do sistema de desvio. */
.dev-under { color: var(--accent-ink); font-weight: var(--weight-semibold); }
.dev-over { color: #A8582F; font-weight: var(--weight-semibold); }

.cup-gauge { display: block; color: var(--text-primary); }
.cup-gauge .liq { animation: cupFill 900ms var(--ease-standard) both; }
.cup-gauge .liq-b { animation-delay: 140ms; }
@keyframes cupFill { from { transform: translateY(150px); } to { transform: translateY(0); } }

.cup-gauge .bub { transform-box: fill-box; transform-origin: center;
  animation: cupBubble 1.5s var(--ease-standard) 2 both; }
.cup-gauge .bub-2 { animation-delay: .25s; }
.cup-gauge .bub-3 { animation-delay: .5s; }
.cup-card:hover .cup-gauge .bub { animation-name: cupBubbleLoop; animation-iteration-count: infinite; }
@keyframes cupBubbleLoop {
  0%   { opacity: 0; transform: translateY(70px) scale(.5); }
  30%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-70px) scale(1); }
}
@keyframes cupBubble {
  0%   { opacity: 0; transform: translateY(70px) scale(.5); }
  30%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-70px) scale(1); }
}

.spinner-cup { display: inline-block; width: 40px; height: 32px; color: var(--text-primary); }
.spinner-cup svg { width: 100%; height: 100%; overflow: visible; }
.spinner-cup circle { transform-box: fill-box; transform-origin: center;
  animation: cupBubble 1.5s var(--ease-standard) infinite; }
.spinner-cup .b2 { animation-delay: .25s; }
.spinner-cup .b3 { animation-delay: .5s; }

.gauge-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
                margin: var(--space-3) 0 0; padding: 0; list-style: none;
                font-size: var(--text-caption); color: var(--text-secondary); }
.gauge-legend li { display: flex; align-items: center; gap: var(--space-2); }
.gauge-legend i { width: .7rem; height: .7rem; border-radius: 2px; background: var(--accent); flex: none; }
.gauge-legend i.idle { opacity: .38; }
/* "unfunded", não "empty": UI_V2_CSS já usa .empty para o bloco de estado
   vazio (padding grande) — o mesmo nome no swatch pequeno do gauge colidia,
   e min-width:auto de item flex inflava o swatch para o tamanho do padding
   alheio. Nomes diferentes, sem ambiguidade de cascata. */
.gauge-legend i.unfunded { background: var(--track); }

/* ------------------------------------------------------------------ Jar */

.jar-glyph, .jar-gauge { display: block; color: var(--text-primary); }

/* O nivel do Jar NAO anima ao carregar como o da xicara. La a animacao conta
   "encheu"; aqui contaria "esvaziou", que e a leitura errada — o Jar comeca
   cheio e perde folga. Sem animacao, sem afirmacao falsa. */

/* Loader: declara a animacao INTEIRA. Escrever so animation-iteration-count e
   esperar herdar o resto de outro seletor nao liga animacao nenhuma — as
   bolhas ficam presas no opacity="0" inline e o loader renderiza um vaso vazio
   e estatico. overflow visible porque as bolhas ficam fora do viewBox. */
.jar-load { display: inline-block; width: 76px; height: 74px; color: var(--text-primary); }
.jar-load svg { width: 100%; height: 100%; overflow: visible; }
.jar-load .bub { transform-box: fill-box; transform-origin: center;
  animation: cupBubble 1.5s var(--ease-standard) infinite; }
.jar-load .bub-2 { animation-delay: .25s; }
.jar-load .bub-3 { animation-delay: .5s; }

/* Legenda de DOIS itens no maximo, nomeando as camadas desenhadas. Nao tres:
   nao existe terceira regiao pintada. */
.jar-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
              margin: var(--space-3) 0 0; padding: 0; list-style: none;
              font-size: var(--text-caption); color: var(--text-secondary); }
.jar-legend li { display: flex; align-items: center; gap: var(--space-2); }
.jar-legend i { width: .7rem; height: .7rem; border-radius: 2px; background: var(--accent); flex: none; }
.jar-legend i.free { opacity: .4; }

@media (prefers-reduced-motion: reduce) {
  .cup-gauge .liq, .cup-gauge .bub, .spinner-cup circle, .jar-load .bub { animation: none; }
}

/* =============================================================================
   FullCup — camada v2 (colar em src/ui/tokens.ts ou servir como arquivo).
   Só adiciona. Não reescreve nenhuma regra existente de TOKENS / PAGE_CSS.

   Resolve as três dores levantadas:
     1. densidade de dados   → .metrics, .dtable, .ledger, .spark
     2. marca fraca          → .sec, .eyebrow--bar, .watermark, .hl
     3. navegação frouxa     → .subnav, .crumbs, .pagenav
   E fecha as lacunas de sistema: formulários completos, slider, tooltip,
   glass mínimo, loaders (barra, spinner, skeleton), gráficos de área/linha.
   ========================================================================== */

/* Tokens invariantes: não dependem de tema, podem morar só no :root. */
:root {
  --glass-blur: 10px;
  --field-h: 44px;
  --field-radius: var(--radius-sm);
  /* R9-15 — --ring vive em cada escopo de tema (abaixo): é o anel do design, 3px de --text-primary. */
  --form-lbl-size: var(--text-body-sm); --form-lbl-weight: var(--weight-medium); --form-gap: var(--space-2);
}

/* Tokens derivados de superfície e texto. Precisam ser declarados DENTRO de
   cada escopo de tema: var() dentro de uma custom property resolve no elemento
   que a declara, então um único bloco :root congelaria o tema do documento e
   quebraria qualquer wrapper [data-theme] — e pior, herdaria a paleta coffee
   quando o SO está em dark mode. Mesmos seletores que tokens.ts já usa. */
:root, [data-theme="light"] {
  --glass-bg: color-mix(in srgb, var(--bg-page) 72%, transparent);
  --glass-border: color-mix(in srgb, var(--text-primary) 8%, transparent);
  /* Painel que flutua sobre o conteudo (menu da conta, picker, prévia): vidro de
     cartao, quase opaco. O vidro do cabecalho (--glass-bg, pagina a 72%/66%) e' fino
     demais para um painel: o texto de baixo aparecia atras dos itens. */
  --glass-pop-bg: color-mix(in srgb, var(--bg-card) 62%, transparent);
  --glass-pop-blur: 24px;
  --field-bg: var(--bg-raised);
  --field-border: var(--border);
  --field-border-hover: color-mix(in srgb, var(--text-primary) 24%, transparent);
  --chart-grid: color-mix(in srgb, var(--text-secondary) 16%, transparent);
  --ring: 0 0 0 3px var(--text-primary); /* R9-15: 3px navy no tea, creme no coffee (>= 3:1) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-bg: color-mix(in srgb, var(--bg-page) 66%, transparent);
    --glass-border: color-mix(in srgb, var(--text-primary) 8%, transparent);
    /* Painel que flutua sobre o conteudo (menu da conta, picker, prévia): vidro de
       cartao, quase opaco. O vidro do cabecalho (--glass-bg, pagina a 72%/66%) e' fino
       demais para um painel: o texto de baixo aparecia atras dos itens. */
    --glass-pop-bg: color-mix(in srgb, var(--bg-card) 62%, transparent);
    --glass-pop-blur: 24px;
    --field-bg: var(--bg-raised);
    --field-border: var(--border);
    --field-border-hover: color-mix(in srgb, var(--text-primary) 24%, transparent);
    --chart-grid: color-mix(in srgb, var(--text-secondary) 16%, transparent);
    --ring: 0 0 0 3px var(--text-primary); /* R9-15: 3px navy no tea, creme no coffee (>= 3:1) */
  }
}
[data-theme="dark"] {
  --glass-bg: color-mix(in srgb, var(--bg-page) 66%, transparent);
  --glass-border: color-mix(in srgb, var(--text-primary) 8%, transparent);
  /* Painel que flutua sobre o conteudo (menu da conta, picker, prévia): vidro de
     cartao, quase opaco. O vidro do cabecalho (--glass-bg, pagina a 72%/66%) e' fino
     demais para um painel: o texto de baixo aparecia atras dos itens. */
  --glass-pop-bg: color-mix(in srgb, var(--bg-card) 62%, transparent);
  --glass-pop-blur: 24px;
  --field-bg: var(--bg-raised);
  --field-border: var(--border);
  --field-border-hover: color-mix(in srgb, var(--text-primary) 24%, transparent);
  --chart-grid: color-mix(in srgb, var(--text-secondary) 16%, transparent);
  --ring: 0 0 0 3px var(--text-primary); /* R9-15: 3px navy no tea, creme no coffee (>= 3:1) */
}

/* L-UI3 — uma receita de vidro para toda previa e balao (balao do ".tip", previa do Cup, previa do criador,
   Verified, sino, dropdown): fundo de cartao translucido + blur (--glass-pop-*), borda sutil por token
   (--glass-border), sombra suave (--shadow-raised). Quem pede menos transparencia recebe o mesmo cartao,
   opaco e sem blur: o texto nunca depende do que passa por tras. */
@media (prefers-reduced-transparency: reduce) {
  :root, :root:not([data-theme="light"]), [data-theme] {
    --glass-bg: var(--bg-page);
    --glass-pop-bg: var(--bg-card);
    --glass-pop-blur: 0px;
  }
  header.site, header.site::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* ---------------------------------------------------------------- 0. rolagem
   Regra do produto: rolagem vertical, nunca horizontal. Tabelas largas passam
   a colapsar (ver .dtable) em vez de virar faixa arrastável. */
html { scrollbar-gutter: stable; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
* { scrollbar-width: thin; scrollbar-color: var(--track) transparent; }
*::-webkit-scrollbar { width: 10px; height: 0; }
*::-webkit-scrollbar-thumb { background: var(--track); border-radius: var(--radius-pill);
  border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--slate-300); background-clip: content-box; }
.scroll-y { overflow-y: auto; overscroll-behavior: contain; }
/* Aposentado: qualquer .scroll-x remanescente para de rolar de lado. */
.scroll-x { overflow-x: visible; }

/* ------------------------------------------------------- 1. cabeçalho + nav */

header.site {
  position: sticky; top: 0; z-index: 20;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-standard);
}
header.site.is-stuck { border-bottom-color: var(--glass-border); }
/* The frosted glass lives on a pseudo-element, not on the header itself: an element with
   backdrop-filter becomes a backdrop root, and then any popover inside the header (account menu,
   bell, search) can only blur what is inside the header, so it looked merely transparent over the
   page. With the glass on ::before the header is not a backdrop root and the popovers frost the
   real page behind them. */
header.site::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(var(--glass-blur));
  backdrop-filter: saturate(1.4) blur(var(--glass-blur)); }

/* Altura do cabecalho publicada como token: o subnav grudento se apoia nela.
   Medida = padding vertical * 2 + 40 do conteudo (botoes de 32 + folga). */
/* Fallback ate o script medir a altura real (e para quem roda sem JS). */
:root { --header-h: 84px; }
html.is-scrolled { --header-h: 60px; }

/* Em tela estreita a linha do cabecalho nao cabe: deixa quebrar em vez de
   empurrar a pagina para o lado. O transbordo era anterior a este trabalho,
   mas aparece agora que a faixa vai de ponta a ponta. */
@media (max-width: 40rem) {
  .site-in { flex-wrap: wrap; row-gap: var(--space-2); }
  .site-nav { margin-left: 0; }
}

/* Shrink ao rolar: o cabecalho perde respiro e a marca encolhe junto, para a
   faixa devolver altura de leitura sem sumir. */
html.is-scrolled .site-in { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.brand svg { transition: width var(--duration-base) var(--ease-standard),
                         height var(--duration-base) var(--ease-standard); }
html.is-scrolled .brand svg { width: 22px; height: 22px; }
html.is-scrolled .brand { font-size: var(--text-body-sm); }
@media (prefers-reduced-motion: reduce) {
  .site-in, .brand svg { transition: none; }
}
@supports not (backdrop-filter: blur(1px)) { header.site::before { background: var(--bg-page); } }

/* Links de seção no cabeçalho: o site tinha só marca + entrar + tema. */
.site-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-6); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-secondary); text-decoration: none; font-size: var(--text-body-sm);
  font-weight: var(--weight-medium); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill); white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.site-nav a:hover { color: var(--text-primary); background: var(--bg-chip); }
.site-nav a[aria-current="page"] { color: var(--text-primary); background: var(--bg-chip); }
header.site > .brand { margin-right: auto; }

/* Subnav contextual: aparece nas páginas de uma cup e liga as quatro visões
   que hoje só se alcançam por links soltos no fim do texto. */
/* top acompanha a altura real do cabecalho, encostado (sem folga): as duas
   faixas formam um bloco so. Estava fixo em 62px contra um cabecalho de 80px,
   e o CTA "Encher esta cup" ficava cortado por baixo. --header-h e medido em
   tempo real, entao acompanha o shrink e a quebra em duas linhas no mobile. */
.subnav {
  position: sticky; top: var(--header-h); z-index: 15;
  margin: 0 0 var(--space-8);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border);
}
/* Mesma logica do cabecalho: a faixa sangra ate as bordas da janela e o
   conteudo volta para o container. 50% - 50vw cancela o max-width do .wrap. */
.subnav { margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2);
  margin-right: calc(50% - 50vw + var(--sbw, 0px) / 2); }
.subnav-in { max-width: var(--container-max); margin: 0 auto;
  padding-left: var(--container-pad); padding-right: var(--container-pad); }
/* Barra de abas rola na horizontal quando nao cabe, em vez de empurrar a
   pagina inteira para o lado. Sem barra de rolagem visivel. */
@media (max-width: 52rem) {
  .subnav-in { overflow-x: auto; scrollbar-width: none; }
  .subnav-in::-webkit-scrollbar { display: none; }
  .subnav-in > * { flex: none; }
}

/* Bloco de contribuir: duas colunas no desktop, empilhado no estreito. Era
   grid-template-columns inline no HTML, que nenhuma media query alcanca. */
.contribute-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px;
  gap: var(--space-10); padding: var(--space-8); }
@media (max-width: 52rem) {
  .contribute-grid { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); }
}
.subnav-in { display: flex; align-items: center; gap: var(--space-1);
  max-width: var(--container-max); margin: 0 auto; }
.subnav a {
  position: relative; padding: var(--space-4) var(--space-1); margin-right: var(--space-5);
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--text-body-sm); font-weight: var(--weight-medium); white-space: nowrap;
}
.subnav a:hover { color: var(--text-primary); }
.subnav a[aria-current="page"] { color: var(--text-primary); }
/* A barra sage da marca (a "barra de potencial" do logo) vira o indicador. */
.subnav a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; border-radius: var(--radius-pill) var(--radius-pill) 0 0; background: var(--accent);
}
/* CTA do subnav: preenchido em sage. Como .btn base é vazado, sobre o fundo
   translúcido do subnav o texto ficava sem contraste nos dois temas. */
.subnav .subnav-cta { margin-left: auto; margin-right: 0;
  background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
  font-weight: var(--weight-medium); }
.subnav .subnav-cta:hover { background: color-mix(in srgb, var(--accent) 86%, #000);
  border-color: color-mix(in srgb, var(--accent) 86%, #000); }

/* Migalhas — studio, conta, roadmap. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-4); font-size: var(--text-body-sm); color: var(--text-secondary); }
.crumbs a { color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.crumbs li { display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.crumbs li + li::before { content: '/'; color: var(--border); }
.crumbs ol, .crumbs ul { display: contents; margin: 0; padding: 0; }

/* Par de próximos passos no rodapé de cada página: para onde ir daqui. */
.pagenav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  margin-top: var(--space-16); }
@media (max-width: 46rem) { .pagenav { grid-template-columns: 1fr; } }
.pagenav a {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit;
  background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.pagenav a:hover { box-shadow: var(--shadow-raised); transform: translateY(-1px); color: inherit; }
.pagenav .k { font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-secondary); }
.pagenav .v { font-weight: var(--weight-semibold); }
.pagenav .prev { text-align: left; }
.pagenav .next { text-align: right; }

/* ---------------------------------------------------------------- 2. marca */

/* Cabeçalho de seção: eyebrow com a barra sage + título em dois tons. Faz o
   H2 solto virar um marco visual em vez de um texto qualquer. */
.sec { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6); margin: var(--space-16) 0 var(--space-5); }
.sec > h2, .sec > h3 { margin: 0; }
.sec-aside { font-size: var(--text-body-sm); color: var(--text-secondary); white-space: nowrap; }
/* O nowrap da legenda de secao empurrava a pagina para o lado em tela
   estreita: ali ela desce para a linha de baixo e volta a quebrar. */
@media (max-width: 52rem) {
  .sec { flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
  .sec-aside { white-space: normal; }
}
.eyebrow--bar { display: flex; align-items: center; gap: var(--space-3); }
.eyebrow--bar::before { content: ''; width: 22px; height: 3px; border-radius: var(--radius-pill);
  background: var(--accent); flex: none; }
/* Segunda linha em sage — o padrão do hero, disponível em qualquer título. */
.hl { color: var(--accent-ink); }

/* Marca d'água da xícara atrás de um bloco de destaque. Fundo, nunca ilustração. */
.watermark { position: relative; overflow: hidden; isolation: isolate; }
.watermark > svg.mark-bg {
  position: absolute; right: -6%; bottom: -32%; width: 260px; height: 260px;
  opacity: .06; z-index: -1; pointer-events: none; color: var(--text-primary);
}

/* ------------------------------------------------------ 3. densidade de dados */

/* Grade de métricas: substitui o .stats em fila, que perdia hierarquia quando
   passava de três números. Cada célula pode carregar um sparkline. */
.metrics { display: grid; gap: 1px; background: var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  /* Sem isto o .mug-3d do hero (position:absolute, z-index:0) pinta por cima:
     conteudo estatico sem posicionamento fica ATRAS de descendente posicionado
     do mesmo contexto de empilhamento, nao importa a ordem no documento. */
  position: relative; z-index: 1; }
.metric { background: var(--bg-card); padding: var(--space-5) var(--space-6); min-width: 0; }
.metric .k { display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-secondary); margin: 0 0 var(--space-2); }
.metric .v { margin: 0; font-size: 1.75rem; font-weight: var(--weight-bold);
  line-height: var(--leading-tight); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.metric .v.is-accent { color: var(--accent-ink); }
.metric .sub { margin: var(--space-1) 0 0; font-size: var(--text-body-sm); color: var(--text-secondary); }
.metric .spark { display: block; width: 100%; height: 28px; margin-top: var(--space-3); }
.delta { font-size: var(--text-caption); font-weight: var(--weight-semibold); }
.delta.up { color: var(--accent-ink); }
.delta.down { color: #A8582F; }

/* Tabela de dados densa. Sem rolagem horizontal: em telas estreitas as colunas
   de menor prioridade somem (data-opt) e a linha vira duas linhas. */
.dtable-wrap { background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden; }
.dtable-bar { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.dtable-bar h3 { margin-right: auto; }
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-body-sm); }
.dtable thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-card); padding: var(--space-3) var(--space-4);
  font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-secondary);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.dtable td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border);
  vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr { transition: background var(--duration-fast) var(--ease-standard); }
.dtable tbody tr:hover { background: var(--bg-chip); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable .t-when { color: var(--text-secondary); white-space: nowrap; }
.dtable-scroll { max-height: 26rem; overflow-y: auto; }
@media (max-width: 60rem) { .dtable [data-opt] { display: none; } }
/* N01/R2-04 — a 375px a tabela estourava o cartao (coluna "Verificar" cortada) e
   o titulo "12 requests" quebrava letra a letra. Celula mais justa e cabecalho
   que pode descer de linha; o rotulo curto nao quebra. */
.dtable-bar h3 { white-space: nowrap; }
@media (max-width: 40rem) {
  .dtable-bar { flex-wrap: wrap; padding: var(--space-4); }
  .dtable thead th, .dtable td { padding: var(--space-3) var(--space-2); }
  .dtable thead th { letter-spacing: 0; }
  .dtable tr > :first-child { padding-left: var(--space-4); }
  .dtable tr > :last-child { padding-right: var(--space-4); }
}

/* Linha de razão: previsto × real lado a lado, com a barra do desvio embutida.
   Substitui o .ms-cols de duas colunas soltas. */
.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ledger > li { background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-5) var(--space-6); }
.ledger-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.ledger-head h3 { font-size: var(--text-body); margin-right: auto; flex: 1 1 12ch; min-width: 0; }
.ledger-head > .small, .ledger-head > .badge { flex: none; white-space: nowrap; }
.ledger-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4); margin-top: var(--space-4); }
@media (max-width: 52rem) { .ledger-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ledger-grid .k { font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-secondary); }
.ledger-grid .v { font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); }
/* Barra de desvio: centro = previsto, sage à esquerda (abaixo), terracota à direita. */
.dev-bar { position: relative; height: 6px; border-radius: var(--radius-pill);
  background: var(--track); margin-top: var(--space-2); }
.dev-bar::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 1px; background: var(--border); }
.dev-bar > i { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill);
  background: var(--accent); }
.dev-bar > i.over { background: #C08A6B; }

/* Chip de par chave/valor, para meta-informação que hoje vira frase corrida. */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--bg-chip); border-radius: var(--radius-pill);
  padding: 4px 10px; font-size: var(--text-caption); color: var(--text-secondary); }
.chip strong { color: var(--text-primary); font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- 4. formulários */

.form { display: grid; gap: var(--space-5); max-width: 40rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5); }
@media (max-width: 34rem) { .form-row { grid-template-columns: 1fr; } }

/* Formulário longo + âncora lateral fixa (T-13/1g, apply). Ordem no DOM
   continua form-primeiro: a âncora é reforço, não pré-requisito de leitura. */
.form-aside-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: var(--space-12); align-items: start; }
/* R3-03: em 1 coluna o '1fr' vale minmax(auto,1fr) e o form (min-content de
   364px) empurrava a grade para 388px em viewport de 375. minmax(0,1fr) +
   min-width:0 nos filhos deixa o conteudo encolher em vez de estourar. */
.form-aside-grid > * { min-width: 0; }
@media (max-width: 56rem) { .form-aside-grid { grid-template-columns: minmax(0, 1fr); } }
/* R5A-03 — o CTA de entrar do /apply anonimo quebra linha em vez de vazar
   do card (44 px em pt-BR a 375). */
.apply-login-cta { white-space: normal; max-width: 100%; min-height: 44px; height: auto; text-align: center; justify-content: center; }

/* Campo com afixo: prefixo curto ("$") e sufixo de leitura (estimativa em
   tokens) fora da caixa do input, sem virar um segundo campo editável. */
.inp-group { display: flex; align-items: center; gap: var(--space-3); }
.inp-group > .inp { flex: 1; min-width: 0; }
.inp-group .afix { flex: none; font-size: var(--text-body-sm); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

.f { display: grid; gap: var(--space-2); }
.f > .lbl { display: flex; align-items: baseline; gap: var(--space-2);
  font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.f .opt { font-size: var(--text-caption); color: var(--text-secondary); font-weight: var(--weight-regular); }
.f .req { color: var(--accent-ink); }
.f .help { font-size: var(--text-caption); color: var(--text-secondary); margin: 0; }
.f .err { font-size: var(--text-caption); color: var(--danger-ink); margin: 0;
  display: flex; align-items: center; gap: var(--space-2); }

.inp, .ta, .sel {
  width: 100%; font: inherit; color: var(--text-primary);
  background: var(--field-bg); border: 1px solid var(--field-border);
  border-radius: var(--field-radius); padding: 0 var(--space-4); height: var(--field-h);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

/* ==========================================================================
   RECONSTRUÍDO: este bloco foi perdido por um replace amplo no CSS.
   Valores conforme a especificação do lab: campo 42px, raio 8px, foco sage.
   ========================================================================== */
.ta { height: auto; min-height: 96px; padding: var(--space-3) var(--space-4);
  line-height: var(--leading-normal); resize: vertical; }
.ta.is-long { min-height: 220px; }
.inp::placeholder, .ta::placeholder { color: var(--slate-300); }
.inp:hover, .ta:hover { border-color: var(--slate-300); }
/* O anel de foco era o acento a 26% de alpha, nos sete controles do produto.
   Medido: 1.62:1 sobre o campo no coffee. A WCAG pede 3:1 para indicador de
   foco, e na pratica quem navega por teclado mal via onde estava.
   Acento CHEIO nao resolve: sage sobre creme da 2.1:1 no tea, e continuaria
   reprovando — o primeiro conserto so tinha arrumado o tema escuro.
   O anel usa --text-primary, que contrasta POR CONSTRUCAO nos dois temas
   (e' a propria cor do texto sobre aquele fundo): 12.67:1 no tea, 8.87:1 no
   coffee. O acento continua no border, entao a marca nao se perde.
   O 'outline: none' so e' aceitavel porque existe substituto visivel; sem ele
   seria remocao de indicador, nao substituicao. */
.inp:focus-visible, .ta:focus-visible { outline: none; border-color: var(--accent);
  box-shadow: var(--ring); }
.inp.is-bad, .ta.is-bad { border-color: var(--danger); }
.inp.is-bad:focus-visible { box-shadow: 0 0 0 3px var(--danger); }

/* Editor de texto rico: barra, corpo e rodapé num só campo. */
.rte { background: var(--field-bg); border: 1px solid var(--field-border);
  border-radius: var(--field-radius); overflow: hidden; }
.rte-bar { display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.rte-bar button { font: inherit; font-size: var(--text-body-sm); line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--text-secondary);
  padding: var(--space-2); border-radius: var(--radius-sm); min-width: 28px; }
.rte-bar button:hover { background: var(--bg-chip); color: var(--text-primary); }
.rte-bar .sep { width: 1px; height: 18px; background: var(--border);
  margin: 0 var(--space-2); }
.rte-body { padding: var(--space-4); font-size: var(--text-body-sm);
  line-height: var(--leading-normal); min-height: 120px; }
.rte-foot { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border);
  font-size: var(--text-caption); color: var(--text-secondary); }

/* Cartão de embed dentro do editor (link de evidência colado vira preview). */
.embed { display: flex; gap: var(--space-4); align-items: center; margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg-page); }
.embed .thumb { width: 56px; height: 40px; border-radius: var(--radius-sm);
  background: var(--track); flex: none; }
.embed > div { min-width: 0; }
.embed .t { font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embed .u { font-size: var(--text-caption); color: var(--text-secondary);
  font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Contador de caracteres: avisa antes de bloquear. */
.count { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.count.is-near { color: var(--warning); }
.count.is-over { color: var(--danger-ink); font-weight: var(--weight-medium); }

/* Marcador e interruptor: alvo de 44px mesmo com a caixa pequena. */
.check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer;
  font-size: var(--text-body-sm); line-height: var(--leading-normal); }
.check input { appearance: none; margin: 0; flex: none; width: 20px; height: 20px;
  border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  background: var(--field-bg); cursor: pointer; position: relative;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard); }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; position: absolute; inset: 0;
  background: var(--accent-fg); clip-path: polygon(20% 52%, 34% 66%, 78% 24%, 86% 34%, 36% 82%, 12% 60%); }
.check input[type="radio"]:checked::after { clip-path: circle(24% at 50% 50%); }
.check input:focus-visible { outline: none;
  box-shadow: var(--ring); }
.check .sub { display: block; color: var(--text-secondary); font-size: var(--text-caption);
  margin-top: 2px; }

/* ---------------------------------------------------------------- T-07
   Passada de sistema nos formulários. Quatro estados por controle — repouso,
   foco, erro, desabilitado — e o quarto não existia.

   O que estava faltando, e por que cada um importa:

   1. NENHUM controle tinha regra de desabilitado. '<button class="btn"
      disabled>' em '/apply/preview' ficava com a aparência inteira de botão
      vivo: mesmo contraste, mesmo hover, e inerte. A única regra de
      desabilitado no arquivo estava presa a '.npag', que é a paginação das
      notificações. Um controle que parece clicável e não é não é um detalhe
      estético — é o usuário clicando de novo achando que errou a mira.

   2. '.check' dizia "alvo de 44px mesmo com a caixa pequena" num comentário
      e não entregava: a caixa é 20px, o label é 'flex' sem altura mínima, e
      o alvo real de um rótulo de uma linha ficava em ~20px. O comentário
      descrevia a intenção; esta regra é a intenção.

   ':disabled' e '[readonly]' levam a mesma marcação de propósito: para quem
   lê a tela, os dois dizem "isto não é seu para mudar agora". A diferença
   entre não-editável e não-enviado é do formulário, não da cor. */
.inp:disabled, .ta:disabled, .sel:disabled,
.inp[readonly], .ta[readonly] {
  background: var(--bg-chip); color: var(--text-secondary);
  border-color: var(--border); cursor: not-allowed;
}
.inp:disabled:hover, .ta:disabled:hover,
.inp[readonly]:hover, .ta[readonly]:hover { border-color: var(--border); }

.check input:disabled, .switch input:disabled, .range input:disabled { cursor: not-allowed; }
.check:has(input:disabled), .switch:has(input:disabled) {
  color: var(--text-secondary); cursor: not-allowed;
}
.check:has(input:disabled) input { background: var(--bg-chip); }

/* Vale para '<button disabled>' e para '<span class="btn" disabled>' — o
   segundo não é inerte por natureza, só por estilo, então precisa do
   'pointer-events' para de fato não responder. */
.btn[disabled], .btn:disabled {
  opacity: .45; pointer-events: none;
}

/* O alvo de 44px que o comentário acima já prometia. 'align-items' continua
   em 'flex-start' porque rótulo de duas linhas tem que alinhar pelo topo com
   a caixa; o alvo cresce pela altura mínima do próprio label, que é o que o
   dedo acerta. */
.check, .switch { min-height: 44px; }

.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer;
  font-size: var(--text-body-sm); }
.switch input { appearance: none; margin: 0; flex: none; width: 42px; height: 24px;
  border-radius: var(--radius-pill); background: var(--track); cursor: pointer;
  position: relative; transition: background var(--duration-fast) var(--ease-standard); }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-standard); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(18px); }
.switch input:focus-visible { outline: none;
  box-shadow: var(--ring); }

/* Slider de contribuição + presets. */
.range { display: grid; gap: var(--space-2); }
.range input[type="range"] { appearance: none; width: 100%; height: 6px; margin: 0;
  border-radius: var(--radius-pill); cursor: pointer;
  background: linear-gradient(to right, var(--accent) var(--pct, 0%), var(--track) var(--pct, 0%)); }
.range input[type="range"]::-webkit-slider-thumb { appearance: none;
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--bg-card); box-shadow: var(--shadow-sm); cursor: pointer; }
.range input[type="range"]::-moz-range-thumb { width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-card);
  box-shadow: var(--shadow-sm); cursor: pointer; }
.range input[type="range"]:focus-visible { outline: none;
  box-shadow: var(--ring); }
.range-scale { display: flex; justify-content: space-between;
  font-size: var(--text-caption); color: var(--text-secondary); }
.presets { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.presets button { font: inherit; font-size: var(--text-body-sm); cursor: pointer;
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill);
  border: 1px solid var(--field-border); background: var(--bg-card);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-standard); }
.presets button:hover { border-color: var(--slate-300); }
.presets button[aria-pressed="true"] { background: var(--accent);
  border-color: var(--accent); color: var(--accent-fg);
  font-weight: var(--weight-medium); }

/* Zona de soltar arquivo de evidência. */
.drop { border: 1px dashed var(--field-border); border-radius: var(--radius-md);
  padding: var(--space-6); text-align: center; font-size: var(--text-body-sm);
  color: var(--text-secondary); background: var(--bg-card); }
.drop.is-over { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); }


.selmenu { position: relative; }
.selmenu > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: var(--space-3); width: 100%; font: inherit; color: var(--text-primary);
  background: var(--field-bg); border: 1px solid var(--field-border);
  border-radius: var(--field-radius); padding: 0 var(--space-4); height: var(--field-h);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard); }
.selmenu > summary::-webkit-details-marker { display: none; }
.selmenu > summary:hover { border-color: var(--slate-300); }
.selmenu > summary:focus-visible { outline: none; border-color: var(--accent);
  box-shadow: var(--ring); }
.selmenu .sel-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selmenu .sel-chev { flex: none; color: var(--text-secondary);
  transition: transform var(--duration-fast) var(--ease-standard); }
.selmenu[open] > summary { border-color: var(--accent); }
.selmenu[open] .sel-chev { transform: rotate(180deg); }
.selmenu-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-2); z-index: 60; display: grid; gap: 2px; }
.selmenu-pop a { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--text-primary); text-decoration: none; font-size: var(--text-body-sm); }
.selmenu-pop a:hover { background: var(--bg-chip); }
.selmenu-pop a[aria-current="true"] { background: var(--bg-chip); font-weight: var(--weight-medium); }

/* Medidor: enche até o valor no load; as bolhas sobem duas vezes e param (nada anima em repouso). */
.cup-gauge .liq { animation: cupFill 900ms var(--ease-standard) both; }
.cup-gauge .liq-b { animation-delay: 140ms; }
/* Bolhas do medidor: mesmas do loader (6.svg) — sage, subindo acima da xícara.
   overflow visible porque os pontos ficam fora do viewBox, como no .spinner-cup. */
.cup-gauge { overflow: visible; }
.cup-gauge .bub { transform-box: fill-box; transform-origin: center;
  animation: cupBubble 1.5s var(--ease-standard) 2 both; }
.cup-gauge .bub-2 { animation-delay: .25s; }
.cup-gauge .bub-3 { animation-delay: .5s; }
/* No hover não param. Precisa ser OUTRO nome: trocar só o iteration-count
   não reinicia uma animação já terminada. */
.cup-card:hover .cup-gauge .bub { animation-name: cupBubbleLoop;
  animation-iteration-count: infinite; }
@keyframes cupBubbleLoop {
  0%   { opacity: 0; transform: translateY(70px) scale(.5); }
  30%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-70px) scale(1); }
}
.cup-gauge .bub-b { animation-delay: .45s; }
@keyframes cupFill {
  from { transform: translateY(150px); }
  to   { transform: translateY(0); }
}

/* Folhagem de canto: textura de marca. Duas tonalidades da sage + caule slate,
   nenhuma cor fora da paleta. Opacidade menor porque agora tem cor própria. */
.sprig-bg { position: absolute; right: -3%; bottom: -12%; width: 250px; height: 250px;
  opacity: var(--sprig-o, .16); z-index: -1; pointer-events: none; }
.sprig-demo { width: 76px; height: 76px; }
/* Fundo, nunca ilustração (regra do desenho): o pai precisa de position:relative,
   overflow:hidden e isolation:isolate; uma por página, atrás de bloco de destaque
   com vão vazio. Em celular some, porque ali o vão não existe. */
@media (max-width: 40rem) { .sprig-bg, .watermark > svg.mark-bg { display: none; } }

/* Dica da taxa e do desvio. Estava quebrada em TRES frentes ao mesmo tempo, e
   por isso nunca apareceu para ninguem — nem no mouse:
     1. as regras de revelacao miravam '.tip', classe que nenhum elemento usa;
     2. nao existia regra de ::after com o texto — so a seta do ::before;
     3. '.tip-i' nao tinha position, entao o absolute do ::before ancorava no
        ancestral errado.
   A explicacao dos 8% e' exigencia do INV-03 na tela; ela estar muda nao era
   detalhe de estilo. Em pages.ts o gatilho virou <button> para o teclado
   alcancar e o leitor de tela anunciar. */
/* Gatilho "?" com area de toque de 44px (UX-QA T-17) e balao de vidro igual
   ao do v2 (UX-QA T-18, tip() em v2/components.ts). O circulo visivel continua
   com 15px: o resto e' borda transparente de 15px (hit-test inclui a borda;
   total 45px) e margem negativa devolve o espaco ao fluxo. O aro e' inset
   box-shadow porque o raio do padding-box (22,5px - 15px) da' exatamente o
   circulo de 15px. O balao
   ancora no padding-box, entao nao precisa compensar a borda. */
.tip-i { position: relative; display: inline-flex; align-items: center;
  justify-content: center; box-sizing: content-box; width: 15px; height: 15px;
  margin: -15px; border: 15px solid transparent; border-radius: 50%;
  background: transparent; background-clip: padding-box; padding: 0;
  box-shadow: inset 0 0 0 1px var(--border);
  font: inherit; font-size: 10px; font-weight: var(--weight-semibold);
  line-height: 1; color: var(--text-secondary); cursor: help; }
.tip-i:focus-visible { outline: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--accent-ink); }
.tip-i::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translate(-50%, 4px); width: max-content;
  max-width: min(30ch, calc(100vw - 64px));
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-raised);
  color: var(--text-primary); text-align: left;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-caption); font-weight: var(--weight-regular);
  line-height: var(--leading-normal); letter-spacing: 0; text-transform: none;
  white-space: normal; pointer-events: none;
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard),
                          transform var(--duration-fast) var(--ease-standard);
  z-index: 31; }
.tip-i::before { content: ''; position: absolute; bottom: calc(100% + 4.5px); left: 50%;
  width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard);
  z-index: 30; pointer-events: none; }
.tip-i:hover::after, .tip-i:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.tip-i:hover::before, .tip-i:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tip-i::after, .tip-i::before { transition: none; }
}

/* ---------------------------------------------------------- 6. carregamento */

/* Barra determinada e indeterminada — sobem no topo da página em navegação. */
.loadbar { position: relative; height: 3px; border-radius: var(--radius-pill);
  background: var(--track); overflow: hidden; }
.loadbar > i { display: block; height: 100%; background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width var(--duration-slow) var(--ease-standard); }
.loadbar.is-indeterminate > i { width: 40%; animation: fc-slide 1.4s var(--ease-standard) infinite; }
@keyframes fc-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
.loadbar.is-top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; border-radius: 0; }

/* Spinner: anel sage, sem sombra nem gradiente. */
.spinner { display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--track); border-top-color: var(--accent);
  animation: fc-spin .8s linear infinite; vertical-align: -3px; }
/* Loader grande: xícara do 6.svg, bolhas subindo (mesma cadência do spinner). */
.spinner-cup { display: inline-block; width: 40px; height: 32px; color: var(--text-primary); }
.spinner-cup svg { width: 100%; height: 100%; overflow: visible; }
.spinner-cup circle { transform-box: fill-box; transform-origin: center;
  animation: cupBubble 1.5s var(--ease-standard) infinite; }
.spinner-cup .b2 { animation-delay: .25s; }
.spinner-cup .b3 { animation-delay: .5s; }
@keyframes cupBubble {
  0%   { opacity: 0; transform: translateY(70px) scale(.5); }
  30%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-70px) scale(1); }
}
.spinner.lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes fc-spin { to { transform: rotate(1turn); } }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .spinner { border-color: color-mix(in srgb, var(--accent-fg) 30%, transparent);
  border-top-color: var(--accent-fg); }

/* Seletor de idioma. <details> puro: abre sem JavaScript, igual ao resto do
   site. Fechado é o glifo + o código ativo; "Auto" segue Accept-Language e é
   o padrão, então quem nunca escolhe nada nunca vê uma decisão pendente. */
/* O popover precisa vencer o subnav grudento (z-index 15) e qualquer card
   abaixo. As ações do cabeçalho ganham contexto próprio, acima de tudo. */
.site-actions { position: relative; z-index: 25; }
.langmenu { position: relative; }
.langmenu > summary { list-style: none; cursor: pointer; }
.langmenu > summary::-webkit-details-marker { display: none; }
.langmenu > summary .code { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.langmenu-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-2); z-index: 60; display: grid; gap: 2px; }
/* nowrap nos dois lados: "por localizacao . PT-BR" e quase o dobro de "by
   location . EN", e sem isso a dica quebrava em tres linhas e a opcao virava
   uma caixa de 70px. O popover e absoluto, entao cresce sozinho ate caber. */
.langmenu-pop a { display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--text-primary); text-decoration: none; font-size: var(--text-body-sm);
  white-space: nowrap; }
.langmenu-pop a:hover { background: var(--bg-chip); color: var(--text-primary); }
.langmenu-pop a .k { margin-left: auto; padding-left: var(--space-4);
  font-size: var(--text-caption); color: var(--text-secondary); white-space: nowrap; }
.langmenu-pop a[aria-current="true"] { background: var(--bg-chip); font-weight: var(--weight-medium); }
.langmenu-pop a[aria-current="true"] .k { color: var(--text-primary); }
.langmenu-pop hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-2) 0; }

/* Botão só-ícone que revela o rótulo no hover/foco. Usado no toggle de tema:
   fechado ele é um glifo; aberto ele diz para onde vai ("Theme: coffee").
   O rótulo continua no DOM, então leitor de tela e teclado nunca perdem nada. */
.btn-icon { gap: 0; padding: 0; width: 32px; height: 32px; justify-content: center;
  overflow: hidden; white-space: nowrap;
  transition: width var(--duration-base) var(--ease-standard),
              padding var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard); }
.btn-icon svg { flex: none; }
.btn-icon .lbl-x { max-width: 0; opacity: 0;
  transition: max-width var(--duration-base) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard),
              margin var(--duration-base) var(--ease-standard); }
.btn-icon:hover, .btn-icon:focus-visible { width: auto; padding: 0 var(--space-4) 0 var(--space-3); }
.btn-icon:hover .lbl-x, .btn-icon:focus-visible .lbl-x { max-width: 140px; opacity: 1; margin-left: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .btn-icon, .btn-icon .lbl-x { transition: none; } }

/* Pílula "live": o ponto pulsa devagar para dizer que a página está recebendo
   dados agora. Uma onda a cada 1,8s — presença, não alarme. */
.badge-live { gap: 7px; }
.badge-live .pulse { position: relative; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none; }
.badge-live .pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: currentColor; animation: fc-pulse 1.8s var(--ease-standard) infinite; }
@keyframes fc-pulse { 0% { transform: scale(1); opacity: .5; }
  70%, 100% { transform: scale(2.8); opacity: 0; } }
/* O número que o feed atualiza pisca uma vez quando muda. */
.is-tick { animation: fc-tick 1.2s var(--ease-standard) infinite; }
@keyframes fc-tick { 0%, 82%, 100% { color: inherit; } 88% { color: var(--accent-ink); } }
@media (prefers-reduced-motion: reduce) {
  .badge-live .pulse::after, .is-tick { animation: none; }
}

/* Esqueleto: mesma geometria do conteúdo que substitui. */
.sk { position: relative; overflow: hidden; background: var(--track);
  border-radius: var(--radius-sm); }
.sk::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--bg-raised) 60%, transparent), transparent);
  animation: fc-shimmer 1.4s infinite; }
@keyframes fc-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sk-line { height: 12px; margin-bottom: var(--space-3); }
.sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w80 { width: 80%; }
.sk-title { height: 22px; width: 52%; margin-bottom: var(--space-4); }
.sk-circle { border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .sk::after, .loadbar.is-indeterminate > i, .spinner, .spinner-cup circle,
  .cup-gauge .liq, .cup-gauge .bub { animation: none; }
}

/* ---------------------------------------------------------------- 7. gráficos */

.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis { fill: var(--text-secondary); font-size: 10px;
  font-family: var(--font-sans); letter-spacing: .02em; }
.chart .area { fill: url(#fc-area); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.chart .line.is-quiet { stroke: var(--slate-300); stroke-dasharray: 4 5; stroke-width: 1.5; }

/* T-20 (S10) — pace por marco. Declarado tracejado e apagado, real cheio no
   acento: a mesma gramatica do gauge (o que foi prometido fica de fundo, o que
   aconteceu fica na frente). Sem area preenchida — duas linhas comparaveis nao
   podem ter uma delas com peso visual de bloco. */
.chart.pace .declared { fill: none; stroke: var(--text-secondary); stroke-width: 1.5;
  stroke-dasharray: 5 5; stroke-linecap: round; stroke-linejoin: round; }
.chart.pace .real { fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; }
.chart.pace .ms { fill: var(--bg-card); stroke: var(--text-secondary); stroke-width: 1.5; }
/* Marco revisado e' maior e no acento: a revisao e' fato do roadmap, e o
   FC_PROJECT_MODEL trata revisao como transparencia, nao como mancha — por
   isso ela se destaca em vez de se esconder. */
.chart.pace .ms.revised { stroke: var(--accent); stroke-width: 2.5; }
.chart.pace .real-dot { fill: var(--accent); stroke: none; }
.jar-legend i.declared { background: var(--text-secondary); opacity: .55; }

/* S10 — achievements. Cada item e' LINK porque cada um leva ao evento que o
   prova; um selo que nao leva a lugar nenhum seria exatamente o que o CANON
   rejeita. Sem cor de "raridade", sem nivel: todos tem o mesmo peso visual,
   porque ranking interno seria julgamento pela porta dos fundos. */
.ach-list { list-style: none; padding: 0; margin: var(--space-4) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ach { display: inline-flex; align-items: baseline; gap: var(--space-2);
  background: var(--bg-chip); color: var(--text-primary); text-decoration: none;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  transition: background var(--duration-fast) var(--ease-standard); }
.ach:hover { background: var(--bg-raised); color: var(--text-primary); }
.ach-k { font-weight: var(--weight-medium); }
.ach-at { color: var(--text-secondary); font-size: var(--text-caption);
  font-variant-numeric: tabular-nums; }
.jar-legend i.revised { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.chart .dot { fill: var(--bg-raised); stroke: var(--accent); stroke-width: 2; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: var(--text-caption); color: var(--text-secondary); margin-top: var(--space-3); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-legend i { width: 14px; height: 3px; border-radius: var(--radius-pill);
  background: var(--accent); flex: none; }
.chart-legend i.quiet { background: var(--slate-300); }
.spark .line { stroke-width: 1.75; }
.spark .area { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
/* Desenha da esquerda para a direita ao carregar. */
.chart .line.is-draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000);
  animation: fc-draw 900ms var(--ease-standard) forwards; }
@keyframes fc-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .chart .line.is-draw { animation: none; stroke-dashoffset: 0; } }

/* -------------------------------------------------------------- 8. avulsos */

/* Aviso/nota com a barra sage, versão superfície (a .note atual é só borda). */
.callout { display: flex; gap: var(--space-4); background: var(--bg-card);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent); color: var(--text-secondary);
  font-size: var(--text-body-sm); }
.callout.warn { border-left-color: var(--warning); }
.callout.bad { border-left-color: var(--danger); }

/* Estado vazio: nunca uma frase solta em cinza. */
.empty { text-align: center; padding: var(--space-16) var(--space-6);
  background: var(--bg-card); border-radius: var(--radius-lg); }
.empty svg { opacity: .25; margin-bottom: var(--space-4); }
.empty h2, .empty h3, .empty h4 { font-size: var(--text-body-lg); margin-bottom: var(--space-2); }
.empty p { margin: 0 auto var(--space-5); max-width: 34ch; color: var(--text-secondary);
  font-size: var(--text-body-sm); }

/* Toast — confirmação de contribuição, chave rotacionada. Vidro mínimo. */
.toast { display: flex; align-items: center; gap: var(--space-3);
  background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5);
  box-shadow: var(--shadow-lg); font-size: var(--text-body-sm); }
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }


/* ==========================================================================
   T-07 Notificações — mailbox + sino + toasts com cooldown
   ========================================================================== */
.nbox { background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden; }
.nbar { display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border);
  flex-wrap: wrap; }
.ntabs { display: flex; gap: var(--space-1); }
.ntab { font: inherit; font-size: var(--text-body-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--text-secondary); }
.ntab:hover { background: var(--bg-chip); color: var(--text-primary); }
.ntab.is-on { background: var(--bg-chip); color: var(--text-primary);
  font-weight: var(--weight-medium); }
.ntab .n { font-variant-numeric: tabular-nums; font-size: var(--text-caption);
  color: var(--text-secondary); }
.nsearch { position: relative; flex: 1; min-width: 200px; margin-left: auto; }
.nsearch svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-secondary); pointer-events: none; }
.nsearch .inp { padding-left: 34px; }
.nchips { display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.nchip { font: inherit; font-size: var(--text-caption); cursor: pointer;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: none; color: var(--text-secondary); }
.nchip:hover { border-color: var(--slate-300); color: var(--text-primary); }
.nchip.is-on { background: var(--accent); border-color: var(--accent);
  color: var(--accent-fg); font-weight: var(--weight-medium); }
.nhead { display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border);
  font-size: var(--text-caption); flex-wrap: wrap; }
.nhead .check { font-size: var(--text-caption); }
.nrange { margin-left: auto; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; }
.nbulk { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.nbulk-n { font-weight: var(--weight-medium); }
.btn.is-danger { color: var(--danger-ink); }
.btn.is-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

.nlist { list-style: none; margin: 0; padding: 0; }
.nrow { display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border);
  transition: background var(--duration-fast) var(--ease-standard); }
.nlist > .nrow:last-child { border-bottom: 0; }
.nrow:hover { background: var(--bg-chip); }
.nrow.is-sel { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.nsel { appearance: none; margin: 3px 0 0; flex: none; width: 18px; height: 18px;
  border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  background: var(--field-bg); cursor: pointer; position: relative; }
.nsel:checked { background: var(--accent); border-color: var(--accent); }
.nsel:checked::after { content: ""; position: absolute; inset: 0;
  background: var(--accent-fg);
  clip-path: polygon(20% 52%, 34% 66%, 78% 24%, 86% 34%, 36% 82%, 12% 60%); }
.nsel:focus-visible { outline: none;
  box-shadow: var(--ring); }
/* O ponto de não lida é a única marca de estado na linha — sem negrito duplicado. */
.ndot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 8px;
  background: transparent; }
.nrow.is-unread .ndot { background: var(--accent); }
.nmain { flex: 1; min-width: 0; display: grid; gap: 3px; text-align: left;
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; }
.ntop { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-caption); color: var(--text-secondary); }
.ncup { font-weight: var(--weight-medium); color: var(--text-primary); }
.nrole { color: var(--text-secondary); }
.ntitle { font-size: var(--text-body-sm); }
.nrow.is-unread .ntitle { font-weight: var(--weight-semibold); }
.nprev { font-size: var(--text-caption); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nwhen { font-size: var(--text-caption); color: var(--text-secondary);
  white-space: nowrap; margin-top: 2px; }
.nacts { display: flex; gap: 2px; flex: none; opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard); }
.nrow:hover .nacts, .nrow:focus-within .nacts { opacity: 1; }
/* Tipo do evento: mesma pílula, cor só onde o tipo pede atenção. */
.nkind { padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--bg-chip); color: var(--text-secondary);
  font-size: var(--text-caption); }
.nkind.k-contribution, .nkind.k-milestone { background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text-primary); }
.nkind.k-pace { background: color-mix(in srgb, var(--warning) 22%, transparent);
  color: var(--text-primary); }
.npag { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border); }
.npag .btn[disabled] { opacity: .4; pointer-events: none; }

/* Sino: badge sempre visível, balanço só quando há não lidas. Uma vez a cada 6s. */
.bell { position: relative; }
/* R5A-19 — 18 px / 11 px: o 15/10 anterior era ilegivel no cabecalho. */
.bell-n { position: absolute; top: 1px; right: 1px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: var(--radius-pill); background: var(--accent);
  color: var(--accent-fg); font-size: 11px; line-height: 18px; text-align: center;
  font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.bell.has-new svg { transform-origin: 50% 15%;
  animation: fc-bell 6s var(--ease-standard) infinite; }
@keyframes fc-bell {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(11deg); }
  93% { transform: rotate(-9deg); }
  96% { transform: rotate(5deg); }
}

/* Avatar do header: .acct-avatar é o de 56px da página de conta — num header
   de 62px ele estoura e a inicial não fica centrada. Variante própria. */
.site-avatar { width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-fg);
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  line-height: 1; user-select: none; }
.site-avatar.site-avatar--img { object-fit: cover; padding: 0; background: var(--bg-chip); }

.cools { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cool { font-size: var(--text-caption); color: var(--text-secondary);
  background: var(--bg-chip); border-radius: var(--radius-pill); padding: 4px 10px; }
.cool strong { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.cool.is-cooling strong { color: var(--warning); }

/* Pilha de toasts: presa ao canto da JANELA.
   No arquivo de design era 'absolute' porque cada tela e uma maquete dentro de
   um card, e o toast precisava ficar preso aquele card. No produto o toast tem
   que acompanhar a janela, entao 'fixed' — right/bottom passam a se referir a
   viewport, que e o comportamento desejado. */
.toaststack { position: fixed; right: var(--space-6); bottom: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  align-items: flex-end; z-index: 40; pointer-events: none; }
/* Vidro: o toast flutua sobre o card da tela, então precisa de mais borrão e
   contraste do que o .toast em fluxo — mais um brilho de 1px no topo. */
.toaststack .toast { pointer-events: auto; position: relative; overflow: hidden;
  padding-right: var(--space-4);
  background: color-mix(in srgb, var(--bg-card) 34%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  box-shadow: var(--shadow-raised);
  animation: fc-toast-in var(--duration-base) var(--ease-standard) both; }
.toaststack .toast::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: color-mix(in srgb, var(--bg-card) 85%, transparent); }
@supports not (backdrop-filter: blur(1px)) {
  .toaststack .toast { background: var(--bg-card); }
}
/* Cooldown em linha: número + a barra fina que drena a janela de 8s. */
.tcool { display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-caption); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; }
.tcool i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: fc-cool-dot 1.6s var(--ease-standard) infinite; }
.tcool b { font-weight: var(--weight-medium); }
.tbar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.tbar i { display: block; height: 100%; background: var(--accent);
  transform-origin: left center; animation: fc-cool-bar 8s linear both; }
@keyframes fc-cool-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes fc-cool-dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.tmore { font-variant-numeric: tabular-nums; background: var(--bg-chip);
  border-radius: var(--radius-pill); padding: 1px 7px; font-size: var(--text-caption); }
/* Desfazer vive dentro do toast e some com ele: a janela de desfazer É a
   janela do cooldown, então a barra de 8s também mede o tempo de arrependimento. */
.tundo { font: inherit; font-size: var(--text-caption); font-weight: var(--weight-semibold);
  cursor: pointer; border: 0; padding: 5px 10px; min-height: 26px;
  border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-fg); }
.tundo:hover { background: var(--accent-hover); }
.tundo:focus-visible { outline: none;
  box-shadow: var(--ring); }

.tclose { font: inherit; line-height: 1; cursor: pointer; background: none; border: 0;
  color: var(--text-secondary); padding: 0 2px; margin-left: var(--space-1); }
.tclose:hover { color: var(--text-primary); }
@keyframes fc-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bell.has-new svg, .toaststack .toast, .tcool i { animation: none; }
  .tbar i { animation: none; transform: scaleX(0); }
}


/* --------------------------------------------------------------------------
   Hierarquia do header logado. Antes: nav, sino, idioma e tema todos com o
   mesmo botão elevado — quatro elementos disputando o mesmo peso. Agora um
   nível só é elevado (o sino, o único com estado), o resto é fantasma.
   -------------------------------------------------------------------------- */
/* Descendente, nao filho direto: o toggle de tema vive dentro de um <form>
   (precisa de POST para gravar o cookie), entao o '>' nao o alcancava e ele
   ficava com a caixa do .btn-quiet enquanto o globo ao lado ficava fantasma. */
header.site .site-actions .btn-icon:not(.bell),
header.site .langmenu > summary.btn {
  background: none; border-color: transparent; box-shadow: none;
  color: var(--text-secondary); }
header.site .site-actions .btn-icon:not(.bell):hover,
header.site .langmenu > summary.btn:hover {
  background: var(--bg-chip); color: var(--text-primary); }
header.site .langmenu[open] > summary.btn { background: var(--bg-chip);
  color: var(--text-primary); }
/* R9-15 — a regra acima zera box-shadow com especificidade maior que a do anel global. */
header.site .site-actions .btn-icon:not(.bell):focus-visible,
header.site .langmenu > summary.btn:focus-visible { box-shadow: var(--ring); }

/* O seletor de idioma carrega um rótulo, então nasce mais alto que os botões
   de 32px ao lado. Fixa a altura e aperta o padding para a linha bater. */
header.site .langmenu > summary.btn { height: 32px; padding: 0 var(--space-3);
  gap: var(--space-2); font-size: var(--text-caption); }
header.site .langmenu > summary.btn .code { letter-spacing: .04em; }

/* O sino é o único elevado — e o contador precisa sangrar fora dele,
   que .btn-icon corta com overflow:hidden. */
header.site .bell { overflow: visible; }
header.site .bell-n { top: -4px; right: -4px;
  border: 2px solid var(--bg-raised); }

/* O avatar fecha o grupo: um respiro o separa das ações. */
header.site .site-avatar { margin-left: var(--space-2); }


/* --------------------------------------------------------------------------
   Preview do sino + modal de confirmação de exclusão
   -------------------------------------------------------------------------- */
.bellwrap { position: relative; display: inline-flex; }
/* Mesma linguagem do .langmenu-pop: vidro, raio md, borda dessaturada. */
.bellpop { position: absolute; top: calc(100% + 8px); right: 0; width: 340px;
  z-index: 80; text-align: left;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  border-radius: var(--radius-md); box-shadow: var(--shadow-raised);
  animation: fc-pop-in var(--duration-fast) var(--ease-standard) both; }
@keyframes fc-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bellpop-h { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border);
  font-size: var(--text-body-sm); }
.bellpop-l { list-style: none; margin: 0; padding: 0; max-height: 17rem; overflow-y: auto; }
.bellpop-l > li + li { border-top: 1px solid var(--border); }
.bellpop-l button { display: grid; gap: 3px; width: 100%; text-align: left;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  padding: var(--space-3) var(--space-4); }
.bellpop-l button:hover { background: var(--bg-chip); }
.bellpop-l .btitle { font-size: var(--text-body-sm); font-weight: var(--weight-medium); }
.bellpop-l .nwhen { margin-left: auto; }
.bellpop-e { margin: 0; padding: var(--space-8) var(--space-4); text-align: center;
  font-size: var(--text-body-sm); color: var(--text-secondary); }
.bellpop-f { display: flex; gap: var(--space-2); align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }

/* Modal preso a JANELA. Era 'absolute' no arquivo de design pelo mesmo motivo
   do toast (nao cobrir a pagina de exemplos). Aqui 'absolute' cobriria so o
   ancestral posicionado mais proximo — e como .wrap e varios cards criam
   contexto de posicionamento, o scrim cobriria um pedaco da pagina e deixaria
   header e resto clicaveis: um modal que nao bloqueia nada. */
.modal-scrim { position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--navy-900) 44%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: fc-fade-in var(--duration-fast) var(--ease-standard) both; }
.modal { position: fixed; z-index: 91; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: min(420px, calc(100% - 48px));
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised); padding: var(--space-8);
  animation: fc-modal-in var(--duration-base) var(--ease-standard) both; }
.modal-what { margin: 0 0 var(--space-3); font-size: var(--text-body-sm);
  font-weight: var(--weight-medium); background: var(--bg-chip);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  font-variant-numeric: tabular-nums; }
.modal-acts { display: flex; gap: var(--space-3); justify-content: flex-end; }
/* --danger puro sob cream dá 3.8:1 — abaixo de AA para 14px. Escurece 30%. */
.btn.is-danger-solid { background: color-mix(in srgb, var(--danger) 70%, #1a0f0d);
  border-color: color-mix(in srgb, var(--danger) 70%, #1a0f0d);
  color: var(--cream-50); }
.btn.is-danger-solid:hover { background: color-mix(in srgb, var(--danger) 56%, #1a0f0d);
  border-color: color-mix(in srgb, var(--danger) 56%, #1a0f0d); }
@keyframes fc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fc-modal-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.98); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .bellpop, .modal, .modal-scrim { animation: none; }
}

/* ---------------------------------------------------------------- modal nativo

   O visual continua vindo de .modal (nao mexido). O que entra aqui e so o que
   faz <dialog> se comportar: showModal() poe o elemento na top layer, o que
   resolve de graca as quatro coisas que o CSS sozinho nao resolve — trava de
   foco, Tab circulando so dentro do modal, Esc fechando, e o foco voltando ao
   botao que abriu.

   Por isso o scrim vira ::backdrop e .modal-scrim deixa de ser necessario como
   elemento (fica no arquivo para quem precisar de um overlay nao-modal). */

/* Zera o estilo de agente de usuario do <dialog>: borda, padding, fundo,
   max-width e o margin:auto que brigaria com o left/top/translate de .modal. */
dialog.modal { border: 0; margin: 0; padding: var(--space-8);
  max-width: none; max-height: none; color: inherit; overflow: visible; }
dialog.modal:not([open]) { display: none; }

/* var() dentro de ::backdrop nao herda em toda engine; o literal e a rede de
   seguranca. Mesmos valores do .modal-scrim. */
dialog.modal::backdrop {
  background: color-mix(in srgb, var(--navy-900, #2B343B) 44%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: fc-fade-in var(--duration-fast) var(--ease-standard) both; }

/* Trava de rolagem sem JS: com o dialog aberto a pagina de tras para de rolar.
   scrollbar-gutter:stable ja esta no html, entao nao ha salto de layout. */
html:has(dialog.modal[open]) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { dialog.modal::backdrop { animation: none; } }

/* ----------------------------------------------------------------------------
   UX-QA (3 passadas) — transversais.

   1. CONTRASTE (T-02/T-03/C-35). Sage como COR DE TEXTO reprova (1,87:1 o
      acento, 2,46:1 o sage-600 sobre o cream). O texto de acento passa a ser
      --accent-ink (declarado em TOKENS): 4,66:1 no tea, 6,0:1 no coffee. Sage
      continua valendo como preenchimento, aro e icone.
      As quatro regras abaixo cobrem CSS que vive em arquivos de outros donos
      (ds2/components.ts, pages.ts): o seletor ganha de um por 'main', sem
      !important, ate' cada dono trocar a variavel na origem.
   -------------------------------------------------------------------------- */
main .stat-value.is-accent, main .ds2-metric-v.is-accent { color: var(--accent-ink); }
main .ds2-delta--up, main .ds2-f-req, main .dev-under { color: var(--accent-ink); }

/* Chip de valor selecionado: o rotulo secundario ("= 31,39 M tokens") herdava
   --text-secondary sobre o preenchimento sage — 1,10:1 no coffee. Sobre sage
   o par certo e' o navy (--accent-fg), nos dois temas. */
.presets button[aria-pressed="true"] .muted,
.presets button[aria-pressed="true"] .small { color: var(--accent-fg); }

/* 2. TEXTO DE USUARIO (C-17). Bio, titulo e descricao digitados por criador e
   backer podem trazer uma palavra de 280 caracteres sem espaco; sem isto ela
   empurra o card e a pagina inteira para o lado. 'anywhere' (e nao
   'break-word') porque tambem reduz o min-content, entao item de flex/grid nao
   estica. :where() mantem especificidade zero: quem precisar de outro
   comportamento (codigo, hash) sobrescreve sem briga. Tabela fica de fora —
   numero quebrado no meio de celula e' pior que a rolagem. */
:where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, blockquote, figcaption, label, summary) {
  overflow-wrap: anywhere;
}
:where(td, th, code, pre, .mono, .nowrap) { overflow-wrap: normal; }
/* PILULAS (R2-04). O 'anywhere' acima e' herdado: a pilula "2-3 semanas" dentro
   de um <li>/<p> quebrava letra a letra a 375px ("seman/as"). Pilula, chip e
   selo sao rotulo curto — nunca quebram, nem por palavra. Zero de especificidade:
   quem carrega uma frase inteira (.badge.ok / .badge.bad) mantem o proprio
   white-space: normal. */
:where(.chip, .badge, .nchip, .nkind, .v3-chip, .v3-chip-n, .fid15-chip, .fid15-chip-n, .fid-chip, .pf-chip,
  .fo-chip, .fm-chip, .fid03-chip, .ds2-chip, .fb-pill, .fb31-pill, .fid33-pill, .fe-pill, .fp-pill, .fo-pill,
  .fm-pill, .fid-pill, .fid-mpill, .fidops-pill, .fe4-badge, .pf-badge, .fc22-kind, .fe18-kind, .fid09-tag,
  .fid02-tag, .fo-est-tag, .pill) {
  overflow-wrap: normal; word-break: normal; white-space: nowrap; }

/* 3. AREA DE TOQUE >= 44px (T-17). O visual fica como esta: o que cresce e' a
   zona clicavel, por pseudo-elemento transparente nos controles que nao cortam
   overflow, e por tamanho minimo nos que cortam (.btn-icon). */
.btn.tiny:not(.btn-icon), .site-nav a, .fid15-chip, .v3-chip { position: relative; }
.btn.tiny:not(.btn-icon)::after, .site-nav a::after, .fid15-chip::after, .v3-chip::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: max(100%, 44px); transform: translateY(-50%); }
header.site .site-actions .btn-icon,
header.site .site-actions .btn.tiny { min-height: 44px; }
header.site .site-actions .btn-icon { min-width: 44px; }
header.site .langmenu > summary.btn { min-height: 44px; height: 44px; min-width: 44px; justify-content: center; }
.brand { min-height: 44px; }
.presets button { min-height: 44px; }
/* Caixa/interruptor: o input em si (20x20, 42x24) tambem aceita o toque num
   quadrado de 44px — o aro visual nao muda. O ::after ja e' o marcador/botao. */
.check input::before, .switch input::before { content: ''; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%); }
/* Botoes pequenos do v2 que ficaram abaixo de 44px (T-17). */
.fid-btn-s.fid-btn-s, .fid15-chip.fid15-chip, a.fid-btn-m.fid-btn-m, .fid-fbtn.fid-fbtn,
.fid15-dd.fid15-dd > summary { min-height: 44px; }
.fid15-chip.fid15-chip { border-block: 4px solid transparent; background-clip: padding-box; }

/* 5. NOTA SOBRE CARTAO TINGIDO (R2-15). --text-secondary sobre o tint do cartao
   do /status no coffee da 4,00:1; o texto principal passa com folga. */
.fe-card--tint .fh-note { color: var(--text-primary); }

/* 4. ESC FECHA O BALAO (T-18, WCAG 1.4.13). O script do shell poe html.tips-off
   no Escape e tira no proximo movimento do ponteiro ou foco. */
html.tips-off .tip::after, html.tips-off .tip::before,
html.tips-off .tip-i::after, html.tips-off .tip-i::before,
html.tips-off .ds2-tip::after, html.tips-off .ds2-tip::before { opacity: 0 !important; }

/* 6. MUTED SOBRE FILL TINGIDO NO COFFEE (R3-05/R3-06, R6). O --text-secondary
   do coffee sobre um fill de acento a 20% (cartao tingido, caixa de tokens do
   passo 03) caia a 4,0:1. Nesses cartoes o token local sobe um degrau — o texto
   continua "muted", so deixa de ser o cinza que perde para o fundo. */
[data-theme="dark"] .fe-card--tint, [data-theme="dark"] .fo-tint,
[data-theme="dark"] .fo-est-box--tok, [data-theme="dark"] .fe4-stage.is-now { --text-secondary: #C8D0D6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fe-card--tint, :root:not([data-theme="light"]) .fo-tint,
  :root:not([data-theme="light"]) .fo-est-box--tok, :root:not([data-theme="light"]) .fe4-stage.is-now { --text-secondary: #C8D0D6; }
}

/* 7. HEATMAP MONOTONICO NO COFFEE (N32). No coffee o --track (branco 30%) deixava
   a celula vazia (lv-0) MAIS clara que lv-1 (sage 34%): a escala invertia no
   primeiro degrau. Aqui o lv-0 vira um degrau abaixo do lv-1. So seletor de CSS;
   a marcacao do heatmap nao muda. */
[data-theme="dark"] .v3-heat-cell.lv-0 { background: color-mix(in srgb, var(--text-primary) 11%, var(--bg-card)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v3-heat-cell.lv-0 { background: color-mix(in srgb, var(--text-primary) 11%, var(--bg-card)); }
}

/* 8. AVISO NO TOPO (R3-04, R2-08). Regiao aria-live fixa sob o cabecalho: a
   confirmacao de uma acao que acontece fora da vista (upload no fim da pagina,
   publicar, retratar) aparece onde o olho esta. window.fcToast() vive no script
   do shell (layout.ts); a regiao existe vazia desde o load para o leitor de tela
   anunciar de forma confiavel. */
.fc-toasttop { position: fixed; z-index: 45; left: 50%; transform: translateX(-50%);
  top: calc(var(--header-h, 60px) + var(--space-3)); width: max-content;
  max-width: min(36rem, calc(100vw - 2 * var(--space-4)));
  display: flex; flex-direction: column; gap: var(--space-2); align-items: center; pointer-events: none; }
.fc-toasttop .fc-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--space-3);
  background: var(--bg-raised); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-raised); font-size: var(--text-body-sm); line-height: var(--leading-normal);
  animation: fc-toast-top-in var(--duration-base) var(--ease-standard) both; }
.fc-toasttop .fc-toast::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-ink); }
.fc-toasttop .fc-toast.is-error::before { background: var(--danger-ink); }
.fc-toasttop .fc-toast .fc-toast-n { flex: none; font-size: var(--text-body-sm); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; }
.fc-toasttop .fc-toast a { color: var(--accent-ink); font-weight: var(--weight-medium); white-space: nowrap; }
.fc-toasttop .fc-toast button { font: inherit; background: none; border: 0; color: var(--text-secondary);
  cursor: pointer; min-width: 28px; min-height: 28px; padding: 0 var(--space-1); border-radius: var(--radius-sm); }
.fc-toasttop .fc-toast button:hover { color: var(--text-primary); }
.fc-toasttop .fc-toast button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
@keyframes fc-toast-top-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fc-toasttop .fc-toast { animation: none; } }

/* Linha de cooldown de TODO aviso (09/10). O script do shell (toastLife, layout.ts) acrescenta
   <span class="fc-cool"><i></i></span> ao aviso: a linha drena ao longo do prazo do aviso, que
   fecha sozinho no fim. Hover do mouse ou foco dentro dele poe .is-paused (a linha e o relogio
   param). Movimento reduzido: sem linha, o fechamento automatico continua. Reusa o keyframe
   fc-cool-bar da pilha .toaststack. So tokens. */
.fc-toasttop .fc-toast, .fc-undo-t { position: relative; overflow: hidden; }
.fc-cool { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: color-mix(in srgb, currentColor 12%, transparent); }
.fc-cool i { display: block; height: 100%; background: var(--accent-ink);
  transform-origin: left center; animation: fc-cool-bar 8s linear both; }
.fc-undo-t .fc-cool i { background: var(--bg-page); opacity: .75; }
.fc-toast.is-paused .fc-cool i, .fc-undo-t.is-paused .fc-cool i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .fc-cool { display: none; } .fc-cool i { animation: none; } }

/* 9. FAIXA QUE ROLA PARA O LADO (T-15, R3-07). Utilitario generico: acrescente
   scroll-x-hint no elemento que tem overflow-x:auto (abas, tabela embrulhada).
   O script do shell mede o transbordo e marca data-fade="start|end|both"; a
   mascara esmaece so a borda que ainda tem conteudo escondido, e a aba/linha
   ativa ([aria-current], .is-active, [aria-selected="true"]) e' trazida para a
   vista. Sem JS nada muda — a faixa continua rolando como antes. O script tambem
   liga sozinho nas faixas que ainda nao levam a classe (.fid-tabs das abas do
   projeto, .fh-table-wrap da tabela do painel). */
.scroll-x-hint { overflow-x: auto; overscroll-behavior-x: contain; }
.scroll-x-hint[data-fade="end"], [data-fade="end"].fid-tabs, [data-fade="end"].fh-table-wrap, [data-fade="end"].subnav-in { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.scroll-x-hint[data-fade="start"], [data-fade="start"].fid-tabs, [data-fade="start"].fh-table-wrap, [data-fade="start"].subnav-in { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px);
  mask-image: linear-gradient(90deg, transparent, #000 28px); }
.scroll-x-hint[data-fade="both"], [data-fade="both"].fid-tabs, [data-fade="both"].fh-table-wrap, [data-fade="both"].subnav-in { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.scroll-x-hint:focus-visible { outline: none; box-shadow: var(--ring); }

/* 10. TEXTO SO PARA LEITOR DE TELA (descricao dos baloes, R3-09). */
.fc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

:root { --header-h: 66px; }
html.is-scrolled { --header-h: 58px; }
header.site .site-in { justify-content: flex-start; gap: 12px 16px; padding-top: 12px; padding-bottom: 12px; }
header.site .brand { margin-right: 0; flex: none; min-height: 40px; gap: 8px; font-size: 1.125rem;
  font-weight: 700; letter-spacing: -0.02em; }
html.is-scrolled header.site .brand { font-size: 1.125rem; }
.hd-nav { display: flex; align-items: center; gap: 20px; margin-left: 8px; }
.hd-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 2px; white-space: nowrap;
  font-size: .875rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; }
.hd-nav a:hover { color: var(--text-primary); }
.hd-nav a[aria-current="page"] { font-weight: 600; color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--accent); }
.hd-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; position: relative; z-index: 25; }
.hd-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--text-primary); cursor: pointer; text-decoration: none; }
.hd-ico:hover { background: var(--bg-chip); color: var(--text-primary); }
.hd-ico svg { flex: none; }
.hd-ico .bell-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-hover); box-shadow: 0 0 0 2px var(--bg-page); }
.hd-ico.bell.has-new svg { animation: none; }
.hd-create { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  padding: 0 16px; border-radius: 999px; border: 1px solid transparent; background: var(--accent);
  color: var(--accent-fg); font: inherit; font-size: .875rem; font-weight: 600; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background var(--duration-base) var(--ease-standard); }
.hd-create:hover { background: var(--accent-hover); color: var(--accent-fg); }
.hd-create:active { transform: scale(.98); }
.hd-signin { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: .875rem; font-weight: 500; color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.hd-signin:hover { background: var(--bg-chip); color: var(--text-primary); }
.hd-menu { position: relative; }
.hd-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 3px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--text-primary); }
.hd-menu > summary::-webkit-details-marker { display: none; }
.hd-menu > summary:hover, .hd-menu[open] > summary { background: var(--bg-chip); }
header.site .hd-menu .site-avatar { width: 34px; height: 34px; margin-left: 0; font-size: .875rem; }
.hd-menu .site-avatar--ph { background: var(--bg-chip); color: var(--text-primary); }
.hd-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 280px; max-width: calc(100vw - 48px);
  max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; padding: 8px; border-radius: 18px;
  background: var(--glass-pop-bg); -webkit-backdrop-filter: blur(var(--glass-pop-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-pop-blur)) saturate(1.6); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-raised); display: grid; gap: 2px; }
@supports not (backdrop-filter: blur(1px)) { .hd-pop { background: var(--bg-card); } }
.hd-who { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid var(--border); }
.hd-who .site-avatar { width: 36px; height: 36px; }
.hd-who span.t { display: grid; min-width: 0; }
.hd-who b { font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-who i { font-style: normal; font-size: .75rem; color: var(--text-secondary); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.hd-grp { display: grid; gap: 2px; padding-top: 6px; }
.hd-k { margin: 0; padding: 4px 10px; font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-secondary); }
.hd-it { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0;
  border-radius: 10px; background: transparent; font: inherit; font-size: .875rem; color: var(--text-primary);
  cursor: pointer; text-align: left; text-decoration: none; box-sizing: border-box; }
.hd-it:hover { background: var(--bg-chip); color: var(--text-primary); }
.hd-it > span.l { flex: 1 1 auto; min-width: 0; }
.hd-it[aria-current="page"] { font-weight: 600; background: var(--bg-chip); }
.hd-it kbd { font-family: var(--font-mono); font-size: .6875rem; padding: 2px 7px; border-radius: 999px;
  background: var(--bg-chip); color: var(--text-primary); }
.hd-it:hover kbd { background: var(--bg-card); }
.hd-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent);
  color: var(--accent-fg); font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; box-sizing: border-box; }
.hd-set { display: grid; gap: 8px; padding: 10px; margin-top: 4px; border-top: 1px solid var(--border); }
.hd-row { display: flex; align-items: center; gap: 10px; margin: 0; }
.hd-row > label, .hd-row > span.rk { font-size: .8125rem; color: var(--text-secondary); width: 52px; flex: none; }
.hd-seg { flex: 1; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-chip); }
.hd-seg > button, .hd-seg > a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary);
  font: inherit; font-size: .75rem; font-weight: 500; text-decoration: none; cursor: pointer; }
.hd-seg > button:hover, .hd-seg > a:hover { color: var(--text-primary); }
.hd-seg > a[aria-current="true"],
[data-theme="light"] .hd-seg > button[data-theme-set="tea"],
[data-theme="dark"] .hd-seg > button[data-theme-set="coffee"] { background: var(--bg-card);
  color: var(--text-primary); box-shadow: var(--shadow-card); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hd-seg > button[data-theme-set="tea"] {
  background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-card); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hd-seg > button[data-theme-set="coffee"] {
  background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-card); } }
.hd-out { border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; }
.hd-out-f { margin: 0; }
.hd-lt-nav, .hd-lt-m { display: none; }
.hd-ctx { border-top: 1px solid var(--border); }
.hd-ctx-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: var(--container-max);
  margin: 0 auto; padding: 12px var(--container-pad); min-height: 44px; box-sizing: border-box; font-size: .8125rem; }
.hd-ctx-in a { color: var(--text-secondary); text-decoration: none; }
.hd-ctx-in a:hover { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--accent-hover); }
.hd-ctx-in [aria-current="page"] { font-weight: 600; color: var(--text-primary); }
.hd-ctx-in svg { flex: none; color: var(--text-secondary); }
.hd-lt-nav + .hd-set { border-top: 0; margin-top: 0; padding-top: 4px; }
@media (max-width: 45rem) {
  .hd-nav { display: none; }
  .hd-lt-nav { display: grid; }
  .hd-lt-nav + .hd-set { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; }
}
@media (max-width: 40rem) {
  header.site::before { display: none; }
  header.site { background: var(--bg-page); -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom-color: var(--glass-border); }
  header.site .site-in { flex-wrap: nowrap; padding-left: var(--space-4); padding-right: var(--space-4); }
  .hd-create, .hd-search, .hd-kbdit { display: none; }
  .hd-lt-m { display: flex; }
  .hd-actions { gap: 2px; }
  .hd-ctx-in { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding: 10px var(--space-4); min-height: 40px;
    scrollbar-width: none; }
  .hd-ctx-in::-webkit-scrollbar { display: none; }
}
/* Alto contraste: secundário vira primário, bordas e campos ganham tinta. */
html[data-contrast="1"], html[data-contrast="1"] * { --text-secondary: var(--text-primary);
  --border: color-mix(in srgb, var(--text-primary) 48%, transparent); --field-border: var(--text-primary);
  --glass-border: color-mix(in srgb, var(--text-primary) 48%, transparent); }
html[data-contrast="1"]:not([data-theme="dark"]) { --accent-ink: #3F5139; }
html[data-contrast="1"] a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
/* Menos movimento: nada anima, nada transita, rolagem seca. */
html[data-calm="1"], html[data-calm="1"] *, html[data-calm="1"] *::before, html[data-calm="1"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* Gatilho da paleta no cabeçalho (design: pílula "Buscar ou executar… ⌘K"). */
.fc-cmdk-btn { gap: var(--space-3); padding: 0 6px 0 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary); font-size: .8125rem; min-height: 36px; }
.fc-cmdk-btn:hover { border-color: var(--slate-300); color: var(--text-primary); }
.fc-cmdk-btn svg { flex: none; }
.fc-kbd-chip { font-family: var(--font-mono); font-size: .6875rem; padding: 3px 7px; border-radius: 999px;
  background: var(--bg-chip); color: var(--text-primary); line-height: 1.2; }
@media (max-width: 64rem) { .fc-cmdk-btn .fc-cmdk-lbl { display: none; } .fc-cmdk-btn { padding: 0 6px 0 10px; } }
@media (max-width: 40rem) { header.site .fc-cmdk-btn, header.site .prefmenu { display: none; } }
.prefmenu .langmenu-pop { min-width: 15rem; }
.langmenu-pop [role="switch"] { justify-content: space-between; }
.fc-sw { flex: none; position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--track);
  transition: background var(--duration-fast, .12s) var(--ease-standard, ease); }
.fc-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-raised); box-shadow: var(--shadow-card); transition: transform var(--duration-fast, .12s) var(--ease-standard, ease); }
[role="switch"][aria-checked="true"] .fc-sw { background: var(--accent); }
[role="switch"][aria-checked="true"] .fc-sw::after { transform: translateX(14px); }
.langmenu-pop kbd { margin-left: auto; font-family: var(--font-mono); font-size: .75rem; padding: 2px 8px;
  border-radius: 8px; background: var(--bg-chip); box-shadow: inset 0 -1px 0 var(--border); }

/* Paleta de comandos (design 170–186). <dialog> nativo: foco preso, Esc, topo. */
dialog.fc-cmdk, dialog.fc-kbd { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary);
  box-shadow: var(--shadow-raised); padding: 0; width: calc(100% - 32px); }
dialog.fc-cmdk::backdrop, dialog.fc-kbd::backdrop { background: color-mix(in srgb, #0B1622 40%, transparent); }
dialog.fc-cmdk { max-width: 560px; border-radius: 18px; margin: 12vh auto auto; overflow: hidden; }
.fc-cmdk-q { display: block; width: 100%; box-sizing: border-box; min-height: 56px; padding: 0 20px; border: 0;
  border-bottom: 1px solid var(--border); background: transparent; font: inherit; font-size: 1rem;
  color: var(--text-primary); outline: none; }
.fc-cmdk-q::placeholder { color: var(--text-secondary); }
.fc-cmdk-list { max-height: 52vh; overflow: auto; padding: 6px 8px 8px; }
.fc-cmdk-g { margin: 0; padding: 12px 12px 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-secondary); }
.fc-cmdk-it { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0;
  border-radius: 10px; font: inherit; font-size: .9375rem; text-align: left; cursor: pointer; color: var(--text-primary);
  background: transparent; text-decoration: none; box-sizing: border-box; }
.fc-cmdk-it:hover, .fc-cmdk-it[aria-selected="true"] { background: var(--bg-chip); }
.fc-cmdk-it .l { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-cmdk-it .h { flex: none; font-size: .75rem; color: var(--text-secondary); max-width: 45%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.fc-cmdk-none { margin: 0; padding: 20px 12px; font-size: .9375rem; color: var(--text-secondary); }
.fc-cmdk-foot { margin: 0; padding: 10px 20px; border-top: 1px solid var(--border); font-size: .75rem; color: var(--text-secondary); }

/* Folha de atalhos (design 188–197). */
dialog.fc-kbd { max-width: 420px; border-radius: 20px; }
.fc-kbd-in { padding: 22px; display: grid; gap: 14px; }
.fc-kbd-top { display: flex; align-items: center; gap: 8px; }
.fc-kbd-top h2 { margin: 0 auto 0 0; font-size: 1.0625rem; font-weight: 600; }
.fc-kbd-x { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0;
  border-radius: 10px; background: transparent; color: var(--text-primary); cursor: pointer; }
.fc-kbd-x:hover { background: var(--bg-chip); }
.fc-kbd dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; }
.fc-kbd dt { justify-self: start; }
.fc-kbd dd { margin: 0; font-size: .875rem; }
.fc-kbd kbd { font-family: var(--font-mono); font-size: .75rem; padding: 4px 9px; border-radius: 8px;
  background: var(--bg-chip); color: var(--text-primary); box-shadow: inset 0 -1px 0 var(--border); }

/* Aviso com Desfazer (design 199–204): embaixo, centralizado, tinta invertida. */
.fc-undo { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 55; display: flex;
  flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content;
  max-width: calc(100vw - 32px); }
.fc-undo-t { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 100%;
  padding: 6px 6px 6px 18px; border-radius: var(--radius-md); background: var(--text-primary); color: var(--bg-page);
  box-shadow: var(--shadow-raised); font-size: .875rem; line-height: 1.4;
  animation: fc-undo-in var(--duration-base, .2s) var(--ease-standard, ease) both; }
.fc-undo-t.is-plain { padding: 12px 18px; }
.fc-undo-t button { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 0; flex: none;
  background: color-mix(in srgb, var(--bg-page) 14%, transparent); color: inherit; font: inherit; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.fc-undo-t button:hover { background: color-mix(in srgb, var(--bg-page) 24%, transparent); }
.fc-undo-t button:focus-visible { outline: 2px solid var(--bg-page); outline-offset: 2px; }
.fc-undo-s { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; opacity: .8; min-width: 2ch; }
.fc-undo-n { flex: none; font-family: var(--font-mono); font-size: .75rem; font-weight: 500; opacity: .8; }
@keyframes fc-undo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fc-undo-t { animation: none; } }

/* Linha cuja ação espera a janela de desfazer. */
.is-deferred-gone { display: none !important; }
.is-deferred-wait { opacity: .62; }
.is-deferred-wait .fb-acts, .is-deferred-wait [data-deferred-lock] { pointer-events: none; }

/* Sem conexão (tela 27): faixa fixa, a página continua como estava. */
.fc-net { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--header-h, 60px) + var(--space-3));
  z-index: 46; width: max-content; max-width: min(36rem, calc(100vw - 32px)); display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px 14px; padding: 12px 12px 12px 18px; border-radius: var(--radius-md); background: var(--bg-raised);
  color: var(--text-primary); box-shadow: var(--shadow-raised);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); font-size: .875rem; }
.fc-net[hidden] { display: none; }
.fc-net strong { font-weight: 600; }
.fc-net p { margin: 0; color: var(--text-secondary); flex: 1 1 14rem; }
.fc-net button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-primary); font: inherit; font-weight: 500; cursor: pointer; }

/* J / K: o item da lista em foco ganha a borda do acento. */
.fc-jk { outline: 2px solid var(--accent-ink) !important; outline-offset: 4px; border-radius: 12px; }

/* fidelity:A */
/* Paleta: o foco do campo e o cursor; o anel global (box-shadow) vazava como uma linha grossa sob o campo, cortado pelo overflow do diálogo. */
html .fc-cmdk-q:focus-visible { box-shadow: none; }
/* Folha de atalhos: o desenho mede 420 de conteúdo, 466 de caixa. */
dialog.fc-kbd { max-width: 466px; }
/* /fidelity:A */
/* lane-ui:verified-seal */
.vseal { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 8px 0 6px; margin-inline-start: 4px;
  border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-fg);
  font-size: .6875rem; font-weight: 600; letter-spacing: 0; line-height: 1; white-space: nowrap;
  vertical-align: middle; cursor: help; text-transform: none;
  transition: background var(--duration-fast) var(--ease-standard); }
.vseal:hover, .vseal:focus-visible { background: var(--accent-hover); color: var(--accent-fg); }
.vseal .vseal-ck { flex: none; }
.vseal-t { display: inline-block; }
.pf-h1-in .vseal { margin-inline-start: 0; }
/* O balão do selo (perfil): o mesmo vidro do balão de prévia da Cup (.fid15-peek), abre PARA BAIXO (o selo fica
   no topo da página, sob o cabeçalho fixo: para cima ele saía da tela) e fica acima do cabeçalho (z 20). */
.vseal.tip::after { z-index: 80; width: max-content; max-width: min(34ch, calc(100vw - 32px)); padding: 12px 16px; border-radius: 16px;
  background: var(--glass-pop-bg, var(--bg-card)); -webkit-backdrop-filter: blur(var(--glass-pop-blur, 20px)) saturate(1.4);
  backdrop-filter: blur(var(--glass-pop-blur, 20px)) saturate(1.4); border: 1px solid var(--glass-border, var(--border));
  box-shadow: var(--shadow-raised); font-size: .8125rem; line-height: 1.5; }
.vseal.tip::before { z-index: 79; background: var(--glass-pop-bg, var(--bg-card)); }
.vseal--lg { height: 24px; padding: 0 10px 0 8px; font-size: .75rem; gap: 5px; }
/* Fora do perfil o selo é só o ícone sobre o avatar (decisão de 11/10): o tamanho (--vav-s), o anel (--vav-r) e o
   deslocamento (--vav-o) saem do tamanho do avatar (sealOverlay, v2/components.ts). O anel usa a cor do fundo da
   página; as superfícies de cartão trocam --vav-ring para a cor do cartão. */
.vav { --vav-ring: var(--bg-page); position: relative; display: inline-flex; flex: none; border-radius: 50%; }
.vav-seal { position: absolute; right: var(--vav-o, -2px); bottom: var(--vav-o, -2px); box-sizing: content-box;
  display: inline-flex; width: var(--vav-s, 14px); height: var(--vav-s, 14px); padding: var(--vav-r, 2px);
  border-radius: 50%; background: var(--vav-ring); color: var(--accent-fg); line-height: 0; pointer-events: auto; }
.vav-seal .ico { display: block; width: 100%; height: 100%; }
.vav-seal .ico path:first-child { fill: var(--accent); stroke: var(--accent); stroke-width: 1.5; }
.vav-seal .ico path:last-child { stroke: var(--accent-fg); stroke-width: 2.6; }
.fid21-card .vav, .fid21-grid .vav, .fid21-row .vav, .fc22-card .vav, .hub-card .vav, .pf-card .vav, .hm-cup .vav,
.fid28-row .vav, .ib-row .vav, .mg-pane .vav { --vav-ring: var(--bg-card); }
/* /lane-ui:verified-seal */

@keyframes fc-live-flash { from { outline-color: var(--accent-soft); } to { outline-color: transparent; } }
.fc-live-flash { outline: 3px solid transparent; outline-offset: 2px; border-radius: var(--radius-md);
  animation: fc-live-flash 1.2s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .fc-live-flash { animation: none; outline: 0; } }

/* ---------------------------------------------------------------- link do criador */
.fc-cl { color: inherit; font-weight: inherit; text-decoration: none; border-radius: 4px; }
.fc-cl:hover { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-hover);
  text-decoration-thickness: 2px; text-underline-offset: .2em; }
.fc-cl:focus-visible { outline: none; box-shadow: var(--ring); }

/* ------------------------------------------------- vidro: uma receita para toda previa
   Fundo de cartao translucido + blur, borda sutil por token, sombra suave. As variaveis moram em
   tokens.ts (--glass-pop-bg / --glass-pop-blur / --glass-border) e viram opacas em
   prefers-reduced-transparency. */
.fc-cp, .fc-bell-pop, .fc-dd-pop {
  background: var(--glass-pop-bg);
  -webkit-backdrop-filter: blur(var(--glass-pop-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-pop-blur)) saturate(1.4);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-raised); }
@supports not (backdrop-filter: blur(1px)) { .fc-cp, .fc-bell-pop, .fc-dd-pop { background: var(--bg-card); } }

/* ------------------------------------------------------------- previa do criador */
.fc-cp { position: fixed; z-index: 70; width: 296px; max-width: calc(100vw - 16px); padding: 14px; border-radius: 16px;
  display: flex; align-items: flex-start; gap: 12px; pointer-events: none; color: var(--text-primary);
  opacity: 0; transform: translateY(4px); transition: opacity 120ms ease, transform 120ms ease; }
.fc-cp.is-on { opacity: 1; transform: none; }
.fc-cp[hidden] { display: none; }
.fc-cp-av { flex: none; }
.fc-cp-av .v3-avatar { box-shadow: 0 0 0 1px var(--border); }
.fc-cp .vav { --vav-ring: var(--bg-card); }
.fc-cp-b { min-width: 0; display: grid; gap: 4px; }
.fc-cp-n { font-size: .9375rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.fc-cp-h { font-size: .75rem; color: var(--text-secondary); }
.fc-cp-bio { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--text-primary);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.fc-cp-s { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .75rem; color: var(--text-secondary); }
.fc-cp-s strong { color: var(--text-primary); font-weight: 600; }
/* Cartao fixado (orbita da home): o mesmo vidro, mas clicavel (e' o link para /creators/:handle) e tambem no toque. */
.fc-cp--pin { pointer-events: auto; cursor: pointer; text-decoration: none; }
.fc-cp--pin:hover { color: var(--text-primary); text-decoration: none; }
.fc-cp--pin:focus-visible { outline: none; box-shadow: var(--shadow-raised), var(--ring); }
@media (hover: none) { .fc-cp:not(.fc-cp--pin) { display: none; } }
@media (prefers-reduced-motion: reduce) { .fc-cp { transition: none; transform: none; } }
html[data-calm="1"] .fc-cp { transition: none; transform: none; }

/* ------------------------------------------------------- dropdown canonico (.fc-dd)
   Mesma gramatica do "Sort" do /explore: gatilho em pilula com seta, popover em lista, check no
   item escolhido. O <select> nativo fica no DOM (invisivel, fora do foco): o formulario posta,
   a validacao nativa e os ouvintes de "change" continuam funcionando. */
.fc-dd { position: relative; display: inline-flex; vertical-align: middle; max-width: 100%; }
.fc-dd--block { display: flex; width: 100%; }
.fc-dd > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.fm-select:has(.fc-dd)::after { display: none; } /* a seta propria do seletor da midia sai: o gatilho ja tem a sua */
.fc-dd-btn { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 0 12px 0 16px; border-radius: 999px; font: inherit; font-size: .875rem; font-weight: 500;
  text-align: left; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--field-border);
  cursor: pointer; }
.fc-dd-btn:hover { border-color: var(--field-border-hover); }
.fc-dd-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.fc-dd-btn[aria-expanded="true"] { border-color: var(--accent-hover); }
.fc-dd-btn:disabled { cursor: not-allowed; opacity: .6; }
.fc-dd-val { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-dd-btn.is-placeholder .fc-dd-val { color: var(--text-secondary); }
.fc-dd-chev { display: inline-flex; flex: none; transition: transform 160ms; }
.fc-dd-btn[aria-expanded="true"] .fc-dd-chev { transform: rotate(180deg); }
.fc-dd.is-invalid .fc-dd-btn { border-color: var(--danger); }
.fc-dd-pop { position: fixed; z-index: 80; padding: 6px; border-radius: var(--radius-md); display: grid; gap: 2px;
  align-content: start; overflow-y: auto; max-width: calc(100vw - 16px); overscroll-behavior: contain; }
.fc-dd-pop[hidden] { display: none; }
.fc-dd-grp { padding: 8px 12px 4px; font-size: .6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-secondary); }
.fc-dd-opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  font-size: .875rem; color: var(--text-primary); cursor: pointer; }
.fc-dd-opt > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-dd-opt svg { flex: none; visibility: hidden; }
.fc-dd-opt.is-active { background: var(--bg-chip); }
.fc-dd-opt[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 22%, transparent); font-weight: 600; }
.fc-dd-opt[aria-selected="true"] svg { visibility: visible; }
.fc-dd-opt[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.fc-dd-nokey .fc-dd-opt { cursor: pointer; }
@media (pointer: coarse) { .fc-dd-opt { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .fc-dd-chev { transition: none; } }

/* ----------------------------------------------------------------- previa do sino */
.fc-bell-pop { position: fixed; z-index: 70; width: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 88px);
  display: flex; flex-direction: column; border-radius: 18px; color: var(--text-primary); overflow: hidden;
  opacity: 0; transform: translateY(-4px); transition: opacity 120ms ease, transform 120ms ease; }
.fc-bell-pop.is-on { opacity: 1; transform: none; }
.fc-bell-pop[hidden] { display: none; }
.fc-bell-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 8px; margin: 0;
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); }
.fc-bell-list { list-style: none; margin: 0; padding: 0 6px; overflow-y: auto; display: grid; gap: 2px; }
.fc-bell-it { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 8px 10px; border-radius: 12px; color: var(--text-primary); text-decoration: none; }
.fc-bell-it:hover, .fc-bell-it:focus-visible { background: var(--bg-chip); color: var(--text-primary); }
.fc-bell-it:focus-visible { outline: none; box-shadow: var(--ring); }
.fc-bell-av { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--bg-chip); color: var(--text-primary); font-size: .8125rem; font-weight: 600;
  object-fit: cover; position: relative; }
.fc-bell-av > i { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat; display: block; }
.fc-bell-t { font-size: .875rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fc-bell-w { font-size: .6875rem; color: var(--text-secondary); white-space: nowrap; }
.fc-bell-p { grid-column: 2 / -1; font-size: .8125rem; line-height: 1.35; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fc-bell-it.is-unread .fc-bell-t { font-weight: 600; }
.fc-bell-it.is-unread .fc-bell-w::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: var(--accent-hover); vertical-align: middle; }
.fc-bell-empty { margin: 0; padding: 12px 16px 16px; font-size: .875rem; color: var(--text-secondary); }
.fc-bell-all { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 6px; border-radius: 12px;
  font-size: .875rem; font-weight: 600; color: var(--text-primary); text-decoration: none; background: var(--bg-chip); }
.fc-bell-all:hover, .fc-bell-all:focus-visible { background: color-mix(in srgb, var(--bg-chip) 70%, var(--text-primary) 10%);
  color: var(--text-primary); }
.fc-bell-all:focus-visible { outline: none; box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce) { .fc-bell-pop { transition: none; transform: none; } }
html[data-calm="1"] .fc-bell-pop { transition: none; transform: none; }

/* ------------------------------------------------------- heatmap: rastro do ponteiro
   A fading trail (Felipi 11/10): each cell the pointer passes over lights up at once and fades out
   slowly, so the path leaves a trail; the 4 neighbours more faintly. Coffee: white light; tea: the trail
   darkens with the ink token instead (Felipi). No sage tint, low intensity. The light-in has no
   transition; the fade-out runs on the base transition.
   Off for touch and reduced motion. Intensity per theme in vars. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not([data-calm="1"]) .v3-heatmap { --hm-ink: rgb(255 255 255); --hm-hit: 20%; --hm-near: 10%; --hm-far: 4%; }
  html[data-theme="light"] .v3-heatmap { --hm-ink: var(--text-primary); --hm-hit: 16%; --hm-near: 8%; --hm-far: 3%; }
  html:not([data-calm="1"]) .v3-heatmap > i { box-shadow: inset 0 0 0 20px color-mix(in srgb, var(--hm-ink) 0%, transparent); transition: box-shadow 2200ms cubic-bezier(.15,.6,.25,1); }
  html:not([data-calm="1"]) .v3-heatmap.v3-heatmap > i.hm-hit { transition: none; box-shadow: inset 0 0 0 20px color-mix(in srgb, var(--hm-ink) var(--hm-hit), transparent); }
  html:not([data-calm="1"]) .v3-heatmap.v3-heatmap > i.hm-near { transition: none; box-shadow: inset 0 0 0 20px color-mix(in srgb, var(--hm-ink) var(--hm-near), transparent); }
  html:not([data-calm="1"]) .v3-heatmap.v3-heatmap > i.hm-far { transition: none; box-shadow: inset 0 0 0 20px color-mix(in srgb, var(--hm-ink) var(--hm-far), transparent); }
  html:not([data-calm="1"]) .v3-heatmap.v3-heatmap > i.hm-hold { transition: none; box-shadow: inset 0 0 0 20px color-mix(in srgb, var(--hm-ink) var(--hm-hit), transparent); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (prefers-color-scheme: light) {
  html:not([data-theme]) .v3-heatmap { --hm-ink: var(--text-primary); --hm-hit: 16%; --hm-near: 8%; --hm-far: 3%; }
}

/* ---------------------------------------------------- ancoras sob o cabecalho grudento
   --fc-sticky-h e' escrita pelo script (altura medida do cabecalho + subnav grudento). Ate ele rodar, e sem
   JavaScript, vale --header-h (tokens: 84px, 60px depois de rolar). 16px de folga abaixo da faixa. */
html { scroll-padding-top: calc(var(--fc-sticky-h, var(--header-h, 84px)) + 16px); }

/* ------------------------------------------------------------------ @ mencoes */
.fc-mn-pop { min-width: 240px; }
.fc-mn-opt { gap: 10px; min-height: 44px; }
.fc-mn-opt .v3-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px var(--border); }
.fc-mn-opt .v3-avatar--mono { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-chip);
  color: var(--text-primary); font-weight: 600; box-shadow: none; }
.fc-mn-t { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.25; }
.fc-mn-n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-mn-h { font-size: .75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-mn-role { flex: none; font-size: .6875rem; color: var(--text-secondary); }