/* app.css — camada compartilhada do protótipo My Eruption Finance.
 * Importa o DNA (tokens → theme → motion) e define o shell + componentes. Contrato em app/SHELL.md.
 * REGRAS: zero hex/px de cor solto (tudo por token) · tipografia em tamanhos FIXOS de token (proibido clamp()/vw)
 * · corpo 13px, rótulo 11–12px, KPI 26px · card-pad 12 · gap 12 · linha 34. NÃO infle. */
@import url("../design/tokens.css");
@import url("../design/theme.css");
@import url("../design/motion.css");

/* ───────────── aliases de app (derivados de token; documentados em SHELL.md §2) ─────────────
   --card       fundo de widget: um degrau acima da página (escuro grafite #131417 com gradiente, claro papel)
   --line       hairline sutil entre linhas      --line-strong  borda de card/controle
   --fg-faint   3º nível de texto (eixos, marcas) — nunca para texto essencial */
:root{
  --card: var(--surface-muted);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --fg-faint: color-mix(in oklab, var(--fg-muted) 74%, var(--bg));
  --row-hover: var(--surface-raised);
  --tip-bg: var(--surface-raised);
  --rail-pad: var(--space-2);
  --z-sticky: 10; --z-menu: 30; --z-toast: 50;
}
:root[data-theme="light"]{ --card: var(--surface); --line: var(--border); --line-strong: var(--border-strong); --row-hover: var(--surface-inset); --tip-bg: var(--surface-raised); }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --card: var(--surface); --line: var(--border); --line-strong: var(--border-strong); --row-hover: var(--surface-inset); } }

/* ───────────── base ───────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:16px; -webkit-text-size-adjust:100%; scrollbar-color: var(--line-strong) transparent; }
body{ margin:0; min-height:100vh; background-color:var(--bg); background-image:var(--bg-gradient,none); background-attachment:fixed; color:var(--fg); font:400 var(--text-base)/var(--leading-normal) var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,p,ol,ul,figure{ margin:0; }
ol,ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
code{ font-family:var(--font-mono); font-size:.92em; }
::selection{ background:var(--accent); color:var(--on-accent); }
:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.skip-link{ position:absolute; left:var(--space-6); top:-60px; z-index:var(--z-toast); padding:var(--space-4) var(--space-6); border-radius:var(--radius-md); background:var(--accent); color:var(--on-accent); font:600 var(--text-sm)/1 var(--font-display); letter-spacing:var(--tracking-caps); text-transform:uppercase; transition:top var(--motion-base) var(--ease-standard); }
.skip-link:focus{ top:var(--space-4); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.i{ flex:none; display:block; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:var(--radius-pill); border:3px solid var(--bg); }
::-webkit-scrollbar-track{ background:transparent; }

/* números: SEMPRE Barlow Condensed tabular (theme.css define .num); nunca Instrument Serif em valor */
.num{ font-family:var(--font-numeric); font-variant-numeric:tabular-nums lining-nums; font-feature-settings:var(--num-feature); }
.pos{ color:var(--income); } .neg{ color:var(--expense); }
.muted{ color:var(--fg-muted); }
.eyebrow{ font:600 var(--text-eyebrow)/1.2 var(--font-display); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--fg-muted); }
.link{ display:inline-flex; align-items:center; gap:var(--space-1); font:600 var(--text-xs)/1 var(--font-display); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--accent); border-radius:var(--radius-sm); transition:color var(--motion-fast) var(--ease-standard); }
.link:hover{ color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px; }
.link .i{ transition:transform var(--motion-base) var(--ease-standard); }
.link:hover .i{ transform:translateX(2px); }

/* ───────────── shell: topbar + rail + coluna principal ───────────── */
.app{ display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); grid-template-rows:var(--topbar-h) minmax(0,1fr);
  column-gap:var(--space-6); max-width:calc(var(--content-max) + var(--rail-w) + var(--space-6) + 2 * var(--gutter)); min-height:100vh; margin:0 auto; padding:0 var(--gutter); }
.topbar{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); border-bottom:1px solid var(--line); }
.topbar-left,.topbar-right{ display:flex; align-items:center; gap:var(--space-4); min-width:0; }
.rail{ grid-row:2; align-self:start; position:sticky; top:var(--space-6); margin-top:var(--space-6); display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
  padding:var(--rail-pad); background:var(--surface-inset); border:1px solid var(--line); border-radius:var(--radius-pill); z-index:var(--z-sticky); }
.rail-group{ display:flex; flex-direction:column; gap:var(--space-2); }
.rail-sep{ width:16px; height:1px; background:var(--line-strong); }
.rail-link{ position:relative; display:grid; place-items:center; width:var(--control-h); height:var(--control-h); border-radius:var(--radius-pill); color:var(--fg-muted);
  transition:color var(--motion-fast) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.rail-link:hover{ color:var(--fg); background:var(--surface-raised); }
.rail-link[aria-current="page"]{ color:var(--accent); background:var(--budget-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.rail-link::after{ content:attr(data-tip); position:absolute; left:calc(100% + var(--space-5)); top:50%; transform:translate(-4px,-50%); opacity:0; pointer-events:none; white-space:nowrap;
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-md); background:var(--tip-bg); color:var(--fg); border:1px solid var(--line-strong);
  font:600 var(--text-xs)/1.2 var(--font-display); letter-spacing:.06em; text-transform:uppercase; transition:opacity var(--motion-fast) var(--ease-standard), transform var(--motion-base) var(--ease-standard); z-index:var(--z-menu); }
.rail-link:hover::after,.rail-link:focus-visible::after{ opacity:1; transform:translate(0,-50%); }
.rail-dot{ position:absolute; top:-2px; right:-3px; min-width:15px; height:15px; padding:0 var(--space-2); display:grid; place-items:center; border-radius:var(--radius-pill);
  background:var(--accent); color:var(--on-accent); font:600 var(--text-xs)/1 var(--font-numeric); box-shadow:0 0 0 2px var(--surface-inset); }
.rail-dot--alert{ background:var(--expense); }
.main{ grid-row:2; min-width:0; display:flex; flex-direction:column; gap:var(--widget-gap); padding:var(--space-6) 0 var(--space-3); }

/* marca: logo aprovada "Cratera-alvo" (app/marca/logo/). O símbolo é recortado contra o preto: sempre dentro de um chip preto. */
.brand{ display:inline-flex; align-items:center; gap:var(--space-4); border-radius:var(--radius-md); padding:var(--space-1) var(--space-2) var(--space-1) 0; }
.brand-glyph{ display:block; height:36px; width:auto; flex:none; background:#000; border-radius:var(--radius-md); padding:1px 3px; }
.brand-word{ display:inline-flex; align-items:baseline; gap:var(--space-3); white-space:nowrap; }
.brand-serif{ font:400 var(--text-2xl)/1 var(--font-headline); letter-spacing:var(--tracking-snug); color:var(--fg); }
.brand-caps{ font:600 var(--text-xs)/1 var(--font-display); letter-spacing:.24em; text-transform:uppercase; color:var(--accent); transform:translateY(-1px); }

.today-chip,.chip{ display:inline-flex; align-items:center; gap:var(--space-3); height:28px; padding:0 var(--space-5); border-radius:var(--radius-pill); border:1px solid var(--line-strong);
  color:var(--fg-muted); font:600 var(--text-xs)/1 var(--font-display); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.today-chip .num{ font-size:var(--text-sm); letter-spacing:.02em; color:var(--fg); }
.today-dow{ color:var(--fg-muted); }
.chip{ cursor:pointer; transition:border-color var(--motion-base) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.chip:hover{ color:var(--fg); border-color:var(--fg-muted); }
.chip--phase{ color:var(--accent); border-color:color-mix(in oklab, var(--accent) 45%, transparent); }
.avatar{ display:grid; place-items:center; width:30px; height:30px; border-radius:var(--radius-pill); background:var(--surface-raised); border:1px solid var(--line-strong);
  font:600 var(--text-xs)/1 var(--font-display); letter-spacing:.06em; color:var(--fg); transition:border-color var(--motion-base) var(--ease-standard); }
.avatar:hover{ border-color:var(--accent); }

/* menus nativos <details data-menu> */
.menu{ position:relative; }
.menu > summary{ list-style:none; } .menu > summary::-webkit-details-marker{ display:none; }
.menu-panel{ position:absolute; top:calc(100% + var(--space-3)); left:0; min-width:260px; max-width:320px; padding:var(--space-4); z-index:var(--z-menu);
  background:var(--tip-bg); border:1px solid var(--line-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-md); animation:eg-rise-soft var(--motion-base) var(--ease-standard) both; }
.menu--right .menu-panel{ left:auto; right:0; }
.menu-title{ margin:var(--space-3) var(--space-3) var(--space-2); font:600 var(--text-eyebrow)/1.2 var(--font-display); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--fg-muted); }
.menu-title:first-child{ margin-top:var(--space-1); }
.menu-list{ display:grid; }
.menu-item{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:28px; padding:0 var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-base); color:var(--fg);
  transition:background-color var(--motion-fast) var(--ease-standard); }
.menu-item:hover{ background:var(--row-hover); }
.menu-item[aria-current="true"]{ color:var(--accent); }
.menu-note{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-2) var(--space-3); font-size:var(--text-sm); color:var(--fg-muted); line-height:var(--leading-snug); }
.menu-note .i{ margin-top:2px; }
.menu-note--ok{ color:var(--fg); } .menu-note--ok .i{ color:var(--income); }
.menu-note--bad{ color:var(--expense); }

/* ───────────── cabeçalho de tela ───────────── */
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-6); flex-wrap:wrap; }
.page-title{ font:400 var(--text-4xl)/1 var(--font-headline); letter-spacing:var(--tracking-tight); }
.page-sub{ margin-top:var(--space-2); color:var(--fg-muted); font-size:var(--text-sm); }
.page-actions{ display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }

/* ───────────── botões ───────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3); min-height:var(--control-h); padding:0 var(--space-6); border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); background:transparent; color:var(--fg); font:600 var(--text-sm)/1 var(--font-display); letter-spacing:var(--tracking-caps); text-transform:uppercase;
  white-space:nowrap; cursor:pointer; user-select:none;
  transition:background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.btn:hover{ background:var(--surface-raised); border-color:var(--fg-muted); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn--danger{ border-color:color-mix(in oklab, var(--expense) 60%, transparent); color:var(--expense); }
.btn--danger:hover{ background:var(--expense-soft); border-color:var(--expense); }
.btn--ghost{ border-color:transparent; color:var(--fg-muted); }
.btn--ghost:hover{ color:var(--fg); background:var(--row-hover); border-color:transparent; }
.btn--sm{ min-height:26px; padding:0 var(--space-5); font-size:var(--text-xs); gap:var(--space-2); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn[aria-busy="true"]{ position:relative; color:transparent; pointer-events:none; }
.btn[aria-busy="true"]::after{ content:""; position:absolute; inset:0; margin:auto; width:14px; height:14px; border-radius:50%; border:2px solid var(--fg); border-top-color:transparent; animation:eg-spin var(--motion-d6) linear infinite; }
.btn-primary[aria-busy="true"]::after{ border-color:var(--on-accent); border-top-color:transparent; }
.icon-btn{ display:grid; place-items:center; width:24px; height:24px; padding:0; border-radius:var(--radius-pill); border:0; background:transparent; color:var(--fg-muted); cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.icon-btn:hover{ background:var(--row-hover); color:var(--fg); }
.icon-btn--lg{ width:var(--control-h); height:var(--control-h); }
.icon-btn > summary{ display:grid; place-items:center; width:100%; height:100%; cursor:pointer; }

/* segmentado / abas */
.tabs{ display:inline-flex; gap:var(--space-1); padding:var(--space-1); background:var(--surface-inset); border:1px solid var(--line); border-radius:var(--radius-pill); }
.tab{ min-height:24px; padding:0 var(--space-5); border:0; border-radius:var(--radius-pill); background:transparent; color:var(--fg-muted); cursor:pointer;
  font:600 var(--text-xs)/1 var(--font-display); letter-spacing:var(--tracking-caps); text-transform:uppercase; white-space:nowrap;
  transition:background-color var(--motion-base) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.tab:hover{ color:var(--fg); }
.tab[aria-selected="true"], .tabs--range .tab[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); }
.stepper{ display:inline-flex; align-items:center; gap:var(--space-1); height:var(--control-h); padding:0 var(--space-1); border:1px solid var(--line-strong); border-radius:var(--radius-pill); }
.stepper-label{ min-width:72px; text-align:center; font:600 var(--text-sm)/1 var(--font-display); letter-spacing:var(--tracking-caps); text-transform:uppercase; }
.stepper .icon-btn[disabled]{ opacity:.3; cursor:default; }

/* ───────────── card / widget ───────────── */
.grid{ display:grid; grid-template-columns:repeat(var(--widget-cols),minmax(0,1fr)); gap:var(--widget-gap); }
.card{ position:relative; min-width:0; display:flex; flex-direction:column; background:var(--card); background-image:var(--card-gradient,none); border:1px solid var(--line-strong); border-radius:var(--radius-card); padding:var(--card-pad);
  transition:border-color var(--motion-base) var(--ease-standard); }
.card:hover{ border-color:color-mix(in oklab, var(--line-strong) 55%, var(--fg-muted)); }
.card:focus-within{ border-color:color-mix(in oklab, var(--accent) 70%, var(--line-strong)); }
.card--flush{ padding:0; overflow:hidden; }
.card--lg{ padding:var(--card-pad-lg); }
.card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-4); }
.card--flush > .card-head{ padding:var(--card-pad) var(--card-pad) var(--space-4); }
.card-title{ font:600 var(--text-eyebrow)/1.25 var(--font-display); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--fg); }
.card-sub{ margin-top:var(--space-1); font-size:var(--text-xs); color:var(--fg-muted); line-height:1.35; }
.card-tools{ display:flex; align-items:center; gap:var(--space-4); }
.card-foot{ margin-top:auto; padding-top:var(--space-4); }

/* KPI */
.kpi{ font:500 var(--text-kpi)/1 var(--font-numeric); font-variant-numeric:tabular-nums lining-nums; font-feature-settings:var(--num-feature); letter-spacing:.005em; white-space:nowrap; }
.kpi .cur{ font-size:.5em; color:var(--fg-muted); margin-right:.28em; letter-spacing:.04em; vertical-align:.32em; }
.kpi .dec{ font-size:.62em; color:var(--fg-muted); }
.kpi .sgn{ margin-right:.06em; }
.kpi.neg,.kpi.neg .dec,.kpi.neg .cur{ color:var(--expense); }
.kpi-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-4); margin:var(--space-5) 0 var(--space-4); }
.kpi-foot{ display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; font-size:var(--text-xs); color:var(--fg-muted); }
.kpi-note{ margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:var(--space-4); font-size:var(--text-xs); color:var(--fg-muted); }
.kpi-note b{ font:600 var(--text-sm)/1 var(--font-numeric); color:var(--fg); font-variant-numeric:tabular-nums; }
.spark{ flex:none; width:64px; height:20px; overflow:visible; }
.spark .spark-line{ fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.spark-line.is-drawing{ transition:stroke-dashoffset var(--motion-slow) var(--ease-standard) .2s; }
.spark .spark-area{ stroke:none; opacity:.16; }
.spark .spark-dot{ stroke:none; }

/* badges: cor + ícone + rótulo (nunca só cor) */
.badge{ display:inline-flex; align-items:center; gap:var(--space-2); max-width:100%; min-height:18px; padding:0 var(--space-4) 0 var(--space-3); border-radius:var(--radius-pill);
  font:600 var(--text-xs)/1 var(--font-display); letter-spacing:.03em; white-space:nowrap; border:1px solid transparent; }
.badge > span{ overflow:hidden; text-overflow:ellipsis; }
.badge .num,.badge--num{ font-family:var(--font-numeric); font-variant-numeric:tabular-nums; }
.badge--income{ color:var(--income); background:var(--income-soft); }
.badge--expense{ color:var(--expense); background:var(--expense-soft); }
.badge--debt{ color:var(--debt); background:var(--debt-soft); }
.badge--goal{ color:var(--goal); background:var(--goal-soft); }
.badge--budget{ color:var(--budget); background:var(--budget-soft); }
.badge--neutral{ color:var(--fg-muted); background:transparent; border-color:var(--line-strong); }

/* meter */
.meter{ position:relative; height:4px; border-radius:var(--radius-pill); background:color-mix(in oklab, var(--fg) 8%, var(--card)); overflow:visible; }
.meter > i{ display:block; height:100%; width:var(--v,0%); border-radius:inherit; background:var(--c,var(--income)); transition:width var(--motion-slow) var(--ease-standard); }
.js .meter[data-anim] > i{ width:0; }
.meter-mark{ position:absolute; top:-3px; bottom:-3px; left:var(--m); width:2px; margin-left:-1px; border-radius:1px; background:var(--fg-muted); }
.meter--lg{ height:6px; }
.meter--income{ --c:var(--income); } .meter--expense,.meter--over{ --c:var(--budget-over); } .meter--budget{ --c:var(--budget); }
.meter--debt{ --c:var(--debt); } .meter--goal{ --c:var(--goal); } .meter--neutral{ --c:var(--fg-muted); }

/* tabela densa */
.table-wrap{ overflow:auto; min-width:0; }
.table{ width:100%; border-collapse:collapse; font-size:var(--text-base); table-layout:fixed; }
.table th{ position:sticky; top:0; z-index:1; background:var(--card); height:28px; padding:0 var(--space-6); text-align:left; font:600 var(--text-eyebrow)/1 var(--font-display); letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--fg-muted); border-bottom:1px solid var(--line-strong); white-space:nowrap; }
.table td{ height:var(--row-h); padding:0 var(--space-6); border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.table tbody tr:last-child td{ border-bottom:0; }
.table th.num,.table td.num{ text-align:right; }
.table td.num{ font-size:var(--text-lg); font-weight:500; letter-spacing:.01em; }
.table tbody tr{ transition:background-color var(--motion-fast) var(--ease-standard); }
.table tbody tr[data-href]{ cursor:pointer; }
.table tbody tr:hover{ background:var(--row-hover); }
.table tbody tr:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-2px; }
.table tfoot td{ font-weight:600; border-top:1px solid var(--line-strong); }
.cell-main{ color:var(--fg); }
.cell-meta{ color:var(--fg-muted); }
.cell-date{ font-family:var(--font-numeric); font-variant-numeric:tabular-nums; font-size:var(--text-lg); font-weight:500; }
.cell-date small{ margin-left:var(--space-2); font:600 var(--text-xs)/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted); }
.cell-acct{ display:inline-flex; align-items:center; gap:var(--space-3); color:var(--fg-muted); }

/* formulários (para as telas da onda 2) */
.field{ display:grid; gap:var(--space-3); min-width:0; }
.field label{ font:600 var(--text-eyebrow)/1 var(--font-display); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--fg-muted); }
.field input,.field select,.field textarea{ min-height:var(--control-h); padding:0 var(--space-6); background:var(--surface-inset); color:var(--fg); border:1px solid var(--line-strong); border-radius:var(--radius-md);
  font:400 var(--text-base) var(--font-body); transition:border-color var(--motion-fast) var(--ease-standard); }
.field textarea{ padding:var(--space-4) var(--space-6); min-height:72px; resize:vertical; }
.field input.num{ font-family:var(--font-numeric); font-size:var(--text-lg); text-align:right; }
.field input:hover,.field select:hover{ border-color:var(--fg-muted); }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px; border-color:var(--accent); }
.field input[aria-invalid="true"]{ border-color:var(--expense); }
.field input[data-state="valid"]{ border-color:var(--income); }
.field .hint{ font-size:var(--text-xs); color:var(--fg-muted); }
.field-error{ display:flex; gap:var(--space-2); align-items:center; font-size:var(--text-xs); color:var(--expense); }

/* alerta de faixa */
.alert{ display:flex; align-items:center; gap:var(--space-5); min-height:36px; padding:var(--space-2) var(--space-2) var(--space-2) var(--space-6); border-radius:var(--radius-md);
  border:1px solid color-mix(in oklab, var(--expense) 55%, transparent); background:var(--expense-soft); color:var(--fg); font-size:var(--text-base); }
.alert > .i{ color:var(--expense); }
.alert-title{ font:600 var(--text-xs)/1 var(--font-display); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--expense); white-space:nowrap; }
.alert-body{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alert-body .num{ font-size:var(--text-lg); font-weight:600; }
.alert-actions{ display:flex; align-items:center; gap:var(--space-2); }
.alert.is-hidden{ display:none; }

/* estados: vazio / erro / sem permissão / carregando */
.state{ flex:1; display:grid; place-items:center; align-content:center; gap:var(--space-3); text-align:center; min-height:96px; padding:var(--space-8); border:1px dashed var(--line-strong);
  border-radius:calc(var(--radius-card) - var(--space-3)); color:var(--fg-muted); font-size:var(--text-sm); }
.state h3{ font:400 var(--text-2xl)/1.1 var(--font-headline); color:var(--fg); }
.state p{ max-width:36ch; }
.state .btn{ margin-top:var(--space-2); }
.state-icon{ display:grid; place-items:center; width:32px; height:32px; border-radius:var(--radius-pill); background:var(--surface-inset); color:var(--fg-muted); }
.state--error{ border-style:solid; border-color:color-mix(in oklab, var(--expense) 50%, transparent); background:var(--expense-soft); }
.state--error .state-icon{ color:var(--expense); }
.state--forbidden .state-icon{ color:var(--budget); }
.state--compact{ min-height:0; padding:var(--space-6); gap:var(--space-2); }
.state--compact h3{ font-size:var(--text-xl); }
.skel{ display:grid; gap:var(--space-4); padding-top:var(--space-2); }
.skeleton{ display:block; height:10px; border-radius:var(--radius-sm); background:color-mix(in oklab, var(--fg) 9%, var(--card)); animation:eg-skeleton var(--motion-d6) var(--ease-2) infinite alternate; }
.skeleton--kpi{ height:26px; width:72%; }
.skeleton--row{ height:20px; }
.skeleton--chart{ height:140px; border-radius:var(--radius-md); }

/* toasts */
.toasts{ position:fixed; right:var(--space-8); bottom:var(--space-8); z-index:var(--z-toast); display:grid; gap:var(--space-4); justify-items:end; }
.toast{ display:flex; align-items:center; gap:var(--space-4); max-width:420px; padding:var(--space-4) var(--space-3) var(--space-4) var(--space-6); background:var(--tip-bg); border:1px solid var(--line-strong);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md); font-size:var(--text-base); animation:eg-rise-soft var(--motion-slow) var(--ease-standard) both; }
.toast--income > .i{ color:var(--income); } .toast--expense > .i{ color:var(--expense); } .toast--neutral > .i{ color:var(--fg-muted); }
.toast-act{ border:0; background:transparent; color:var(--accent); cursor:pointer; font:600 var(--text-xs)/1 var(--font-display); letter-spacing:var(--tracking-caps); text-transform:uppercase; padding:var(--space-3); border-radius:var(--radius-sm); }
.toast-act:hover{ background:var(--row-hover); }
.toast-x{ border:0; background:transparent; color:var(--fg-muted); cursor:pointer; display:grid; place-items:center; width:24px; height:24px; border-radius:var(--radius-pill); }
.toast-x:hover{ color:var(--fg); background:var(--row-hover); }
.toast.is-leaving{ opacity:0; transform:translateY(6px); transition:opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard); }

/* linha de status do protótipo (montada pelo shell no fim de .main) */
.statusline{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-8); margin-top:auto; font:500 var(--text-xs)/1.4 var(--font-display); letter-spacing:.04em; color:var(--fg-muted); }
.statusline span{ display:inline-flex; align-items:center; gap:var(--space-2); }
.statusline .num{ font-weight:600; color:var(--fg); }
.statusline .is-ok .i{ color:var(--income); } .statusline .is-bad{ color:var(--expense); }
.statusline .is-state{ color:var(--accent); } .statusline a{ text-decoration:underline; text-underline-offset:2px; }

/* gráficos (charts.js) — cor por classe → troca de tema sem redesenhar */
.chart-host{ position:relative; min-height:0; }
.chart-svg{ position:absolute; left:0; top:0; display:block; overflow:visible; } /* absoluto: o SVG nunca dita a altura do container (evita loop de resize) */
.ch-grid line{ stroke:var(--chart-grid); stroke-width:1; shape-rendering:crispEdges; }
.ch-grid .ch-zero{ stroke:var(--line-strong); }
.ch-tick{ fill:var(--fg-muted); font:500 var(--text-xs)/1 var(--font-numeric); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.ch-tick--x{ font-family:var(--font-display); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.ch-label{ fill:var(--fg-muted); font:600 var(--text-xs)/1 var(--font-display); letter-spacing:.08em; text-transform:uppercase; }
.ch-label--budget{ fill:var(--budget); }
.ch-cat{ fill:var(--fg); font:400 var(--text-sm)/1 var(--font-body); }
.ch-val{ fill:var(--fg); font:500 var(--text-sm)/1 var(--font-numeric); }
.s-income{ fill:var(--income); stroke:var(--income); } .s-expense{ fill:var(--expense); stroke:var(--expense); }
.s-debt{ fill:var(--debt); stroke:var(--debt); } .s-goal{ fill:var(--goal); stroke:var(--goal); } .s-budget{ fill:var(--budget); stroke:var(--budget); }
.s-prev{ background:var(--fg-muted); } .s-net{ background:var(--chart-line); }
.ch-line{ fill:none !important; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ch-line.is-drawing{ transition:stroke-dashoffset 1.1s var(--ease-standard); }
.ch-area{ stroke:none !important; opacity:.12; }
.ch-area.is-fading{ transition:opacity var(--motion-slow) var(--ease-standard) .5s; }
.chart-svg .ch-prev{ fill:none; stroke:var(--fg-muted); stroke-width:1.5; stroke-dasharray:3 4; opacity:.8; }
.chart-svg .ch-budget{ stroke:var(--budget); stroke-width:1; stroke-dasharray:6 4; }
.ch-today{ stroke:var(--fg-muted); stroke-width:1; stroke-dasharray:2 3; }
.ch-halo{ stroke:none !important; opacity:.22; }
.ch-dot{ stroke:var(--card) !important; stroke-width:2; }
.ch-dot-prev{ fill:var(--fg-muted); stroke:var(--card); stroke-width:2; }
.ch-cross{ stroke:var(--fg-muted); stroke-width:1; }
.ch-bar{ stroke:none !important; }
.ch-bar.is-growing{ transition:transform var(--motion-slow) var(--ease-standard); }
.ch-track{ fill:color-mix(in oklab, var(--fg) 6%, var(--card)); }
.ch-compare{ stroke:var(--fg); stroke-width:2; stroke-linecap:round; opacity:.7; }
.ch-net{ fill:none; stroke:var(--chart-line); stroke-width:1.5; stroke-dasharray:4 4; }
.ch-net-dot{ fill:var(--chart-line); }
.ch-hit{ fill:transparent; cursor:crosshair; outline:none; }
.ch-hit.is-on{ fill:var(--row-hover); opacity:.5; }
.ch-hit:focus-visible{ stroke:var(--focus-ring); stroke-width:2; }
.chart-tip{ position:absolute; left:0; top:0; z-index:var(--z-menu); display:grid; gap:var(--space-2); min-width:150px; padding:var(--space-4) var(--space-5); pointer-events:none;
  background:var(--tip-bg); border:1px solid var(--line-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-md); font-size:var(--text-sm); transition:transform var(--motion-fast) var(--ease-standard); }
.chart-tip[hidden]{ display:none; }
.tip-head{ font:600 var(--text-eyebrow)/1.2 var(--font-display); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--fg-muted); }
.tip-row{ display:flex; align-items:center; gap:var(--space-3); white-space:nowrap; }
.tip-row b{ margin-left:auto; padding-left:var(--space-6); font-size:var(--text-lg); font-weight:500; }
.tip-key{ width:8px; height:8px; border-radius:var(--radius-pill); }
.tip-key.s-income{ background:var(--income); } .tip-key.s-expense{ background:var(--expense); } .tip-key.s-prev{ background:var(--fg-muted); } .tip-key.s-net{ background:var(--chart-line); }
.tip-muted{ color:var(--fg-muted); font-size:var(--text-xs); }
.tip-muted b{ padding-left:var(--space-1); font-size:var(--text-sm); color:var(--fg); }
.legend{ display:flex; gap:var(--space-6); flex-wrap:wrap; align-items:center; font-size:var(--text-xs); color:var(--fg-muted); }
.legend span{ display:inline-flex; align-items:center; gap:var(--space-2); white-space:nowrap; }
.legend i{ display:inline-block; width:8px; height:8px; border-radius:var(--radius-pill); background:var(--c); }
.legend i.dash{ width:14px; height:0; border-radius:0; border-top:2px dashed var(--c); background:none; }

/* placeholder honesto (telas da onda 2 ainda não construídas) */
.placeholder{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--widget-gap); }
.placeholder .state{ min-height:280px; }
.placeholder ul{ display:grid; gap:var(--space-3); margin-top:var(--space-4); }
.placeholder li{ display:flex; gap:var(--space-3); align-items:flex-start; color:var(--fg); font-size:var(--text-base); }
.placeholder li .i{ margin-top:3px; color:var(--accent); }
.placeholder code{ color:var(--accent); }

/* reveal (motion.js): distância curta, easing de assinatura, stagger 70ms */
:root{ --mo-reveal-distance: 10px; }
.js [data-reveal-group] > *:not(.is-revealed),.js [data-reveal]:not(.is-revealed){ opacity:0; }
[data-reveal-group] > .is-revealed,[data-reveal].is-revealed{ animation:eg-rise var(--motion-slow) var(--ease-standard) both; }

/* ───────────── responsivo ───────────── */
@media (max-width:1100px){
  .app{ grid-template-columns:minmax(0,1fr); grid-template-rows:var(--topbar-h) auto minmax(0,1fr); }
  .rail{ grid-row:2; position:static; flex-direction:row; justify-self:start; max-width:100%; overflow-x:auto; margin-top:var(--space-4); }
  .rail-group{ flex-direction:row; } .rail-sep{ width:1px; height:16px; }
  .rail-link::after{ display:none; }
  .main{ grid-row:3; }
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .placeholder{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .grid{ grid-template-columns:1fr; }
  .today-dow,.brand-caps,.chip--phase span{ display:none; }
  .page-actions{ width:100%; }
  .toasts{ left:var(--space-6); right:var(--space-6); }
}
@media (pointer:coarse){
  .btn,.tab,.icon-btn,.rail-link,.menu-item,.field input,.field select{ min-height:var(--hit-min); min-width:var(--hit-min); }
}
@media (prefers-reduced-motion: reduce){
  .js [data-reveal-group] > *,.js [data-reveal]{ opacity:1 !important; animation:none !important; }
  .skeleton{ animation:none; }
}