/* Side Atlas · UI reference styles · v1.3.1 · 2026-10-17 (copied from the design kit; colours only through --sa-* tokens)
   The component styles the prototype (07-mockups/app.html) uses. Copy these when building components.
   Rules that keep big colour + money from looking like a toy:
   1. One bold colour field per screen (.sa-hero). Lime and the semantic colours never fill a whole card.
   2. Money figures are ink or forest on white/sage. The only exception: the hero figure, white, ≥48px, on forest.
   3. Never small text on lime. Lime is for large shapes, bars and dots.
   4. Tables are calm: white, hairlines, tabular numbers, right-aligned money.            */
@import "./fonts.css";
@import "./tokens.css";

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--sa-page); color: var(--sa-ink); font: var(--sa-body); -webkit-font-smoothing: antialiased; }
.num, .sa-table td.money, .sa-fig { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.num, .sa-fig, .amt, .money, .sa-badge, .sa-chip, .sa-prism, .sa-seg button, .sa-who b, .sa-who span { white-space: nowrap; }
.cjk { font-family: var(--sa-font-cjk); }
.sa-icon { width: 20px; height: 20px; flex: none; }
.sa-icon.sm { width: 16px; height: 16px; }
.label { font: var(--sa-label); letter-spacing: var(--sa-tracking-label); text-transform: uppercase; color: var(--sa-meta); }
.meta { font: var(--sa-small); color: var(--sa-meta); }
.mid { color: var(--sa-text-mid); }

/* ---------- App frame ---------- */
.sa-app { display: grid; grid-template-columns: var(--sa-sidebar-w) 1fr; height: 100vh; }
.sa-side { background: var(--sa-surface); border-right: 1px solid var(--sa-line); padding: 24px 16px 20px; display: flex; flex-direction: column; gap: 24px; }
.sa-logo { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.sa-logo svg { width: 38px; height: 38px; }
.sa-logo b { display: block; font: 800 20px/1 var(--sa-font); letter-spacing: var(--sa-tracking-tight); }
.sa-logo span { display: block; font: 600 11px/1 var(--sa-font-cjk); letter-spacing: .18em; color: var(--sa-text-mid); margin-top: 5px; }
.sa-nav { display: flex; flex-direction: column; gap: 4px; }
.sa-nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-radius: var(--sa-r-pill); color: var(--sa-text-mid); font: 600 15px/1 var(--sa-font); text-decoration: none; }
.sa-nav a:hover { background: var(--sa-sage); color: var(--sa-ink); }
.sa-nav a.on { background: var(--sa-forest); color: var(--sa-on-forest); }
.sa-nav a .count { margin-left: auto; font: 700 12px/1 var(--sa-font); background: var(--sa-warn-tint); color: var(--sa-warn); border-radius: var(--sa-r-pill); padding: 4px 8px; }
.sa-side .foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 8px; }
.sa-side .tag { font: 700 14px/1.35 var(--sa-font); color: var(--sa-forest); }
.sa-main { overflow: auto; padding: 28px 36px 40px; }
.sa-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.sa-top h1 { font: var(--sa-h1); letter-spacing: var(--sa-tracking-tight); margin: 0 0 6px; }
.sa-top p { margin: 0; color: var(--sa-text-mid); max-width: 540px; }
.sa-top .right { flex: none; }
.sa-top .right { display: flex; align-items: center; gap: 12px; }
.sa-who { display: flex; align-items: center; gap: 10px; background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-r-pill); padding: 6px 14px 6px 6px; }
.sa-who .av { width: 32px; height: 32px; border-radius: 50%; background: var(--sa-forest-100); color: var(--sa-forest); display: grid; place-items: center; font: 700 14px/1 var(--sa-font-cjk); }
.sa-who b { font: 700 14px/1.1 var(--sa-font); display: block; }
.sa-who span { font: 500 12px/1.2 var(--sa-font); color: var(--sa-meta); }

/* ---------- Grid & cards ---------- */
.sa-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.sa-card { background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-r-card); padding: 24px; box-shadow: var(--sa-shadow-card); }
.sa-card h2 { font: var(--sa-h2); letter-spacing: -0.01em; margin: 0; }
.sa-card .head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sa-card.sage { background: var(--sa-sage); border-color: transparent; box-shadow: none; }

/* ---------- Hero: the one bold colour field per screen ---------- */
.sa-hero { position: relative; overflow: hidden; background: var(--sa-forest); color: var(--sa-on-forest); border-radius: var(--sa-r-card); padding: 30px 32px; min-height: 236px; }
.sa-hero .lead { font: 600 16px/1.4 var(--sa-font); color: var(--sa-on-forest-mid); max-width: 420px; position: relative; }
.sa-hero .sa-fig { font: var(--sa-display); letter-spacing: -0.03em; margin: 14px 0 10px; position: relative; }
.sa-hero .sub { color: var(--sa-on-forest-mid); font: 500 14px/1.4 var(--sa-font); position: relative; }
.sa-hero .orb { position: absolute; right: -150px; bottom: -190px; width: 340px; height: 340px; border-radius: 50%; background: var(--sa-lime); }
.sa-hero .orb::after { content: ""; position: absolute; inset: 58px; border-radius: 50%; border: 18px solid var(--sa-forest); border-left-color: transparent; border-bottom-color: transparent; transform: rotate(-20deg); }
.sa-hero .glass { position: relative; display: inline-flex; align-items: center; gap: 8px; background: var(--sa-on-forest-glass); border: 1px solid var(--sa-on-forest-glass-line); border-radius: var(--sa-r-pill); padding: 7px 14px; font: 600 13px/1 var(--sa-font); color: var(--sa-on-forest); }
.sa-hero.warn { background: var(--sa-warn); }
.sa-hero.warn .lead, .sa-hero.warn .sub { color: var(--sa-on-warn-mid); }

/* ---------- KPI ---------- */
.sa-kpi .label { display: flex; align-items: center; gap: 8px; }
.sa-kpi .sa-fig { font: 800 34px/1.05 var(--sa-font); letter-spacing: -0.02em; color: var(--sa-ink); margin: 10px 0 6px; }
.sa-kpi .sa-fig.forest { color: var(--sa-forest); }
.sa-kpi .note { font: var(--sa-small); color: var(--sa-text-mid); }
.sa-delta { display: inline-flex; align-items: center; gap: 4px; font: 700 13px/1 var(--sa-font); border-radius: var(--sa-r-pill); padding: 5px 10px; background: var(--sa-ok-tint); color: var(--sa-ok-text); }
.sa-delta.neg { background: var(--sa-warn-tint); color: var(--sa-warn-text); }

/* ---------- Bars ---------- */
.sa-bar { display: flex; height: 22px; border-radius: var(--sa-r-pill); overflow: hidden; background: var(--sa-sage); gap: 2px; }
.sa-bar span { display: block; height: 100%; min-width: 3px; }
.sa-legend { list-style: none; margin: 16px 0 0; padding: 0; }
.sa-legend li { display: grid; grid-template-columns: 14px 1fr auto 92px; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--sa-line); font: 600 14px/1.3 var(--sa-font); }
.sa-legend li:first-child { border-top: 0; }
.sa-legend .dot { width: 12px; height: 12px; border-radius: 4px; }
.sa-legend .amt { font-variant-numeric: tabular-nums; text-align: right; }
.sa-legend .pct { color: var(--sa-meta); font: 500 13px/1 var(--sa-font); text-align: right; font-variant-numeric: tabular-nums; }
.sa-legend li.total { font-weight: 800; color: var(--sa-forest); }

/* ---------- Chips & badges ---------- */
.sa-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: var(--sa-r-pill); background: var(--sa-surface); border: 1px solid var(--sa-line-strong); font: 600 13px/1 var(--sa-font); color: var(--sa-text-mid); white-space: nowrap; }
.sa-chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.sa-chip.on { background: var(--sa-forest-100); border-color: var(--sa-forest); color: var(--sa-forest); }
.sa-pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.sa-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--sa-r-badge); padding: 4px 8px; font: 700 12px/1.1 var(--sa-font); white-space: nowrap; }
.sa-badge.tax { background: var(--sa-tax-tint); color: var(--sa-tax-text); }
.sa-badge.warn { background: var(--sa-warn-tint); color: var(--sa-warn-text); }
.sa-badge.ok { background: var(--sa-ok-tint); color: var(--sa-ok-text); }
.sa-badge.sim { background: var(--sa-sage); color: var(--sa-text-mid); }
.sa-badge.fx { background: var(--sa-fx-tint); color: var(--sa-fx-text); }

/* ---------- Buttons (pill; pressed sinks 1px and darkens) ---------- */
.sa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--sa-r-pill); font: 700 15px/1 var(--sa-font); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: transform .06s, background .12s; }
.sa-btn:active, .sa-btn.pressed { transform: translateY(var(--sa-press-shift)); }
.sa-btn.primary { background: var(--sa-forest); color: var(--sa-on-forest); }
.sa-btn.primary:hover, .sa-btn.primary.pressed { background: var(--sa-forest-700); }
.sa-btn.secondary { background: var(--sa-surface); color: var(--sa-ink); border-color: var(--sa-line-strong); }
.sa-btn.secondary:hover { border-color: var(--sa-ink); }
.sa-btn.selected { background: var(--sa-forest-100); color: var(--sa-forest); border-color: var(--sa-forest); }
.sa-btn.on-dark { background: var(--sa-surface); color: var(--sa-forest); }
.sa-btn.ghost-dark { background: transparent; color: var(--sa-on-forest); border-color: var(--sa-on-forest-ghost-line); }
.sa-btn.sm { height: 34px; padding: 0 14px; font-size: 13px; }
.sa-seg { display: inline-flex; background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-r-pill); padding: 4px; gap: 2px; }
.sa-seg button { border: 0; background: transparent; height: 34px; padding: 0 14px; border-radius: var(--sa-r-pill); font: 700 13px/1 var(--sa-font); color: var(--sa-text-mid); cursor: pointer; }
.sa-seg button.on { background: var(--sa-forest); color: var(--sa-on-forest); }

/* ---------- Table (calm) ---------- */
.sa-tablewrap { background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: 20px; overflow: hidden; }
.sa-table { width: 100%; border-collapse: collapse; font: 500 13.5px/1.35 var(--sa-font); }
.sa-table th { background: var(--sa-sage); color: var(--sa-text-mid); font: var(--sa-label); letter-spacing: var(--sa-tracking-label); text-transform: uppercase; text-align: left; padding: 11px 14px; white-space: nowrap; position: sticky; top: 0; }
.sa-table td { padding: 11px 14px; border-top: 1px solid var(--sa-line); vertical-align: middle; white-space: nowrap; }
.sa-table th.money, .sa-table td.money { text-align: right; font-variant-numeric: tabular-nums; }
.sa-table td.fee { color: var(--sa-fee-text); } .sa-table td.payout { color: var(--sa-payout-text); }
.sa-table td.tax { color: var(--sa-tax-text); font-weight: 700; } .sa-table td.net { color: var(--sa-forest); font-weight: 800; }
.sa-table td .fx { display: block; font: 500 11.5px/1.2 var(--sa-mono); color: var(--sa-fx-text); margin-top: 3px; }
.sa-table td.zero { color: var(--sa-line-strong); }
.sa-table tr.total td { background: var(--sa-sage); font-weight: 800; border-top: 1px solid var(--sa-line-strong); }
.sa-table tr.missing td { background: var(--sa-warn-tint); }
.sa-table .ref { font: 500 12px/1 var(--sa-mono); color: var(--sa-meta); }

/* ---------- Form view vs bank view ---------- */
.sa-gap { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--sa-sage); width: 120px; gap: 1px; }
.sa-gap span { height: 100%; display: block; }
.sa-note { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--sa-r-inner); padding: 12px 14px; font: 500 13.5px/1.45 var(--sa-font); }
.sa-note.info { background: var(--sa-sage); color: var(--sa-text-mid); }
.sa-note.warn { background: var(--sa-warn-tint); color: var(--sa-warn-text); }
.sa-note .sa-icon { margin-top: 1px; }
.sa-ribbon { display: inline-flex; align-items: center; gap: 6px; background: var(--sa-payout-tint); color: var(--sa-payout-text); border-radius: var(--sa-r-pill); padding: 5px 10px; font: 700 12px/1 var(--sa-font); }

/* ---------- Countdown ---------- */
.sa-count { position: relative; text-align: right; }
.sa-count .days { font: 800 72px/0.9 var(--sa-font); letter-spacing: -0.04em; color: var(--sa-accent-on-primary); }
.sa-count .of { font: 700 14px/1.3 var(--sa-font); color: var(--sa-on-forest-mid); }

/* ---------- Checklist ---------- */
.sa-check { list-style: none; margin: 0; padding: 0; }
.sa-check li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--sa-line); font: 500 14px/1.45 var(--sa-font); }
.sa-check li:first-child { border-top: 0; }
.sa-check .box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--sa-line-strong); margin-top: 1px; }
.sa-check .box.done { background: var(--sa-forest); border-color: var(--sa-forest); position: relative; }
.sa-check .box.done::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--sa-on-forest); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* ---------- Ask: answer + step timeline ---------- */
.sa-bubble { align-self: flex-end; max-width: 78%; background: var(--sa-sage); border-radius: 22px 22px 6px 22px; padding: 14px 18px; font: 600 15px/1.45 var(--sa-font); }
.sa-answer .sa-fig { font: 800 52px/1 var(--sa-font); letter-spacing: -0.03em; margin: 10px 0 12px; }
.sa-ref { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; border-radius: 6px; background: var(--sa-on-forest-ref); color: var(--sa-on-forest); font: 700 11px/1 var(--sa-font); padding: 0 5px; margin-left: 4px; vertical-align: 3px; }
.sa-ref.light { background: var(--sa-forest-100); color: var(--sa-forest); }
.sa-lines { list-style: none; padding: 0; margin: 0; }
.sa-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sa-line); font: 600 14px/1.3 var(--sa-font); }
.sa-lines li:first-child { border-top: 0; }
.sa-lines .amt { font-variant-numeric: tabular-nums; }
.sa-input { display: flex; align-items: center; gap: 10px; background: var(--sa-surface); border: 1.5px solid var(--sa-line-strong); border-radius: var(--sa-r-pill); padding: 6px 6px 6px 20px; }
.sa-input span { flex: 1; color: var(--sa-meta); font: 500 15px/1 var(--sa-font); }
.sa-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.sa-steps::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: var(--sa-line); }
.sa-steps li { position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; padding: 7px 0; }
.sa-steps .n { width: 32px; height: 32px; border-radius: 50%; background: var(--sa-surface); border: 2px solid var(--sa-forest); color: var(--sa-forest); display: grid; place-items: center; font: 800 12px/1 var(--sa-font); position: relative; }
.sa-steps li.llm .n { border-color: var(--sa-line-strong); color: var(--sa-meta); }
.sa-steps li.final .n { background: var(--sa-forest); color: var(--sa-on-forest); }
.sa-steps .t { font: 700 13.5px/1.3 var(--sa-mono); color: var(--sa-ink); }
.sa-steps .s { font: 500 12.5px/1.35 var(--sa-font); color: var(--sa-text-mid); margin-top: 2px; }
.sa-prism { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--sa-r-pill); border: 1px solid var(--sa-line-strong); background: var(--sa-surface); padding: 7px 12px; font: 700 12.5px/1 var(--sa-font); color: var(--sa-ink); }
.sa-prism i { width: 8px; height: 8px; border-radius: 50%; background: var(--sa-lime); box-shadow: 0 0 0 3px var(--sa-lime-100); }

/* ---------- Report sheet ---------- */
.sa-sheet { background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-r-card); overflow: hidden; box-shadow: var(--sa-shadow-float); }
.sa-sheet .band { background: var(--sa-forest); color: var(--sa-on-forest); padding: 28px 36px; position: relative; overflow: hidden; }
.sa-sheet .band h1 { font: 800 30px/1.15 var(--sa-font); letter-spacing: var(--sa-tracking-tight); margin: 14px 0 8px; max-width: 560px; position: relative; }
.sa-sheet .band .meta { color: var(--sa-on-forest-mid); position: relative; }
.sa-sheet .body { padding: 26px 36px 30px; }
.sa-sheet h3 { font: var(--sa-label); letter-spacing: var(--sa-tracking-label); text-transform: uppercase; color: var(--sa-meta); margin: 22px 0 10px; }
.sa-totals { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--sa-line); border-radius: 18px; overflow: hidden; }
.sa-totals div { padding: 14px 14px; border-left: 1px solid var(--sa-line); }
.sa-totals .label { font-size: 11px; white-space: nowrap; }
.sa-totals div:first-child { border-left: 0; }
.sa-totals b { display: block; white-space: nowrap; font: 800 18px/1.1 var(--sa-font); font-variant-numeric: tabular-nums; margin-top: 6px; }
.sa-totals .net b { color: var(--sa-forest); }

/* ---------- Dense table (ledger) & KPI strip ---------- */
.sa-table.dense { font-size: 13px; }
.sa-table.dense th, .sa-table.dense td { padding: 10px 11px; }
.sa-table.dense th { font-size: 11px; }
.sa-table td .sub { display: block; font: 500 11.5px/1.2 var(--sa-mono); color: var(--sa-meta); margin-top: 3px; }
.sa-kpirow { display: grid; grid-template-columns: repeat(4, 1fr) 1.35fr; gap: 16px; margin-bottom: 18px; }
.sa-kpirow .sa-card { padding: 16px 20px; }
.sa-kpirow .sa-fig { font: 800 24px/1.1 var(--sa-font); letter-spacing: -0.02em; margin-top: 8px; }
.sa-hero .chips { position: relative; display: flex; flex-wrap: wrap; gap: 10px; max-width: 62%; margin-top: 22px; }

/* ---------- From kit v1.1: import check list (used by My data) ---------- */
.sa-checklist { list-style: none; margin: 0; padding: 0; }
.sa-checklist li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--sa-line); font: 500 13.5px/1.35 var(--sa-font); color: var(--sa-ink); }
.sa-checklist li:first-child { border-top: 0; }
.sa-checklist li .ok { color: var(--sa-ok-text); }
.sa-checklist li .bad { color: var(--sa-warn); }
.sa-checklist li .r { color: var(--sa-meta); font-size: 12.5px; }

/* ---------- v1.3 · Your data, privacy, tax home, display currency ---------- */
/* Data-mode switch (sidebar, under the logo): which ledger the whole app shows. */
.sa-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--sa-sage); border-radius: var(--sa-r-pill); padding: 4px; }
.sa-mode a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: var(--sa-r-pill); font: 700 13px/1 var(--sa-font); color: var(--sa-text-mid); text-decoration: none; white-space: nowrap; }
.sa-mode a.on { background: var(--sa-surface); color: var(--sa-forest); box-shadow: var(--sa-shadow-card); }
/* Utility links in the sidebar foot (My data, Settings & privacy). Not nav items: the nav stays at four. */
.sa-util { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--sa-line); margin: 0 -8px; }
.sa-util a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: var(--sa-r-pill); color: var(--sa-text-mid); font: 600 14px/1 var(--sa-font); text-decoration: none; }
.sa-util a:hover { background: var(--sa-sage); color: var(--sa-ink); }
.sa-util a.on { background: var(--sa-forest-100); color: var(--sa-forest); }
.sa-util a .r { margin-left: auto; font: 600 12px/1 var(--sa-font); color: var(--sa-meta); }
.sa-util .sa-icon { width: 18px; height: 18px; }

/* Upload hero: the screen's one bold field doubles as the drop zone (dashed inner rule). */
.sa-hero.drop { min-height: 262px; padding: 36px 40px; }
.sa-hero.drop::before { content: ""; position: absolute; inset: 12px; border: 2px dashed var(--sa-on-forest-ghost-line); border-radius: calc(var(--sa-r-card) - 10px); pointer-events: none; }
.sa-hero .title { position: relative; font: 800 34px/1.12 var(--sa-font); letter-spacing: var(--sa-tracking-tight); color: var(--sa-on-forest); margin: 10px 0 8px; max-width: 620px; }
.sa-hero .actions { position: relative; display: flex; gap: 12px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.sa-hero .hint { position: relative; margin-top: 14px; font: 500 13px/1.4 var(--sa-font); color: var(--sa-on-forest-mid); }
/* Atlas speech bubble (empty states only; one short line). */
.sa-speech { position: absolute; z-index: 2; background: var(--sa-surface); color: var(--sa-ink); border-radius: 18px 18px 4px 18px; padding: 10px 14px; font: 700 13px/1.35 var(--sa-font); max-width: 230px; box-shadow: var(--sa-shadow-float); }

/* Privacy promise strip: three facts with an icon each. Same words everywhere it appears. */
.sa-promise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-r-card); }
.sa-promise li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 18px 20px; border-left: 1px solid var(--sa-line); font: 700 14px/1.35 var(--sa-font); color: var(--sa-ink); }
.sa-promise li:first-child { border-left: 0; }
.sa-promise .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--sa-forest-100); color: var(--sa-forest); display: grid; place-items: center; }
.sa-promise small { display: block; font: 500 12.5px/1.35 var(--sa-font); color: var(--sa-meta); margin-top: 3px; }

/* Where each export lives: 4 × 2 grid of small panels. */
.sa-where { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sa-where > div { border: 1px solid var(--sa-line); border-radius: var(--sa-r-inner); padding: 12px 14px; background: var(--sa-page); }
.sa-where b { display: flex; align-items: center; font: 800 14px/1.2 var(--sa-font); color: var(--sa-ink); }
.sa-where .path { font: 500 12.5px/1.4 var(--sa-font); color: var(--sa-text-mid); margin-top: 6px; }
.sa-where .mono { display: block; font: 500 11.5px/1.2 var(--sa-mono); color: var(--sa-meta); margin-top: 5px; }

/* Upload list: one row per imported statement; account IDs only as pseudonymised labels. */
.sa-files td { padding-top: 7px; padding-bottom: 7px; }
.sa-files td .acct { font: 500 12px/1 var(--sa-mono); color: var(--sa-meta); margin-left: 6px; }
.sa-files td .file { font: 500 12.5px/1 var(--sa-mono); color: var(--sa-text-mid); }
.sa-files tr.bad td { background: var(--sa-warn-tint); color: var(--sa-warn-text); }
.sa-files tr.bad td .file { color: var(--sa-warn-text); }
.sa-linkbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 10px; border-radius: var(--sa-r-pill); font: 700 13px/1 var(--sa-font); color: var(--sa-text-mid); cursor: pointer; text-decoration: none; }
.sa-linkbtn:hover { background: var(--sa-warn-tint); color: var(--sa-warn-text); }

/* Settings sheet: label + control on one line, help text under it. */
.sa-settings { padding-top: 8px; padding-bottom: 8px; }
.sa-settings .row { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; padding: 18px 0; border-top: 1px solid var(--sa-line); }
.sa-settings .head + .row { border-top: 0; }
.sa-settings .row h3 { margin: 0; font: 800 16px/1.3 var(--sa-font); color: var(--sa-ink); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sa-settings .row p { grid-column: 1 / -1; margin: 0; font: var(--sa-small); color: var(--sa-text-mid); max-width: 560px; }
.sa-settings .row .ctl { display: flex; align-items: center; gap: 10px; }
/* Currency switch: the segmented control with a currency glyph per option. */
.sa-seg.cur button { min-width: 64px; }
.sa-seg.cur button span { opacity: .7; margin-right: 4px; }

/* Privacy center map (on the hero): where each kind of data goes. */
.sa-datamap { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.sa-datamap li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; background: var(--sa-on-forest-glass); border: 1px solid var(--sa-on-forest-glass-line); border-radius: var(--sa-r-inner); padding: 10px 14px; }
.sa-datamap .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--sa-on-forest-ref); color: var(--sa-on-forest); display: grid; place-items: center; }
.sa-datamap b { display: block; font: 700 14px/1.3 var(--sa-font); color: var(--sa-on-forest); }
.sa-datamap span { font: 500 13px/1.4 var(--sa-font); color: var(--sa-on-forest-mid); }

/* Danger button: delete actions only. White pill, warn text and line; never filled. */
.sa-btn.danger { background: var(--sa-surface); color: var(--sa-warn-text); border-color: var(--sa-warn-line); }
.sa-btn.danger:hover { background: var(--sa-warn-tint); border-color: var(--sa-warn); }
.sa-dataact { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.sa-dataact > div { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: center; align-content: center; padding: 4px 24px; }
.sa-dataact > div + div { border-left: 1px solid var(--sa-line); }
.sa-dataact h3 { margin: 0; font: 800 16px/1.3 var(--sa-font); }
.sa-dataact p { margin: 0; grid-column: 1; font: var(--sa-small); color: var(--sa-text-mid); }
.sa-dataact .sa-btn { grid-row: 1 / span 2; grid-column: 2; }

/* Grouped table rows (China tax home: inside / outside China). */
.sa-table tr.group td { background: var(--sa-page); font: var(--sa-label); letter-spacing: var(--sa-tracking-label); text-transform: uppercase; color: var(--sa-text-mid); padding-top: 9px; padding-bottom: 9px; }
.sa-table tr.group td .sa-badge { text-transform: none; letter-spacing: 0; margin-left: 8px; }

/* ---------- v1.3.1 · empty card, Both hero, facts rows, rate line, dialog ---------- */
/* Empty-state card (Your data mode, before any import): Atlas thinking, one title, one sentence, one link. */
.sa-emptycard { display: grid; grid-template-columns: var(--sa-mascot-inline) 1fr auto; gap: 18px; align-items: center; background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-r-card); padding: 20px 24px; }
.sa-emptycard img { height: var(--sa-mascot-inline); width: auto; }
.sa-emptycard b { display: block; font: 800 18px/1.3 var(--sa-font); color: var(--sa-ink); }
.sa-emptycard p { margin: 4px 0 0; font: var(--sa-small); font-size: 14px; color: var(--sa-text-mid); }
.sa-emptycard.ghost { background: transparent; border-style: dashed; border-color: var(--sa-line-strong); }
.sa-skeleton { border-radius: var(--sa-r-card); background: var(--sa-sage); opacity: .55; }
/* Two countdowns on one hero (tax home Both). */
.sa-counts { display: flex; gap: 28px; align-items: flex-end; position: relative; }
.sa-counts .sa-count { text-align: left; }
.sa-counts .sa-count + .sa-count { padding-left: 28px; border-left: 1px solid var(--sa-on-forest-glass-line); }
.sa-counts .tag { font: var(--sa-label); letter-spacing: var(--sa-tracking-label); text-transform: uppercase; color: var(--sa-on-forest-mid); margin-bottom: 8px; }
/* Facts row: one country section as label/value cells. */
.sa-facts { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--sa-line); border-radius: var(--sa-r-inner); overflow: hidden; }
.sa-facts > div { padding: 14px 16px; border-left: 1px solid var(--sa-line); }
.sa-facts > div:first-child { border-left: 0; }
.sa-facts .label { font-size: 11px; }
.sa-facts b { display: block; margin-top: 6px; font: 800 20px/1.15 var(--sa-font); color: var(--sa-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-facts span.s { display: block; margin-top: 4px; font: var(--sa-small); color: var(--sa-text-mid); }
.sa-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sa-section-head h2 { margin: 0; }
.sa-section-head a { margin-left: auto; }
/* Rate line under a converted amount: rate · rate date · source. */
.sa-table td .rate { display: block; font: 500 11.5px/1.25 var(--sa-mono); color: var(--sa-fx-text); margin-top: 3px; white-space: nowrap; }
.sa-table td .rate .src { font-family: var(--sa-font); font-weight: 700; }
.sa-table td .rate.miss { color: var(--sa-warn-text); }
/* Confirmation dialog (delete only). Scrim over the page; the filled danger button lives only here. */
.sa-scrim { position: fixed; inset: 0; background: var(--sa-scrim); z-index: 40; }
.sa-dialog { position: fixed; z-index: 41; left: calc(50% + var(--sa-sidebar-w) / 2); top: 50%; transform: translate(-50%, -50%); width: 580px; background: var(--sa-surface); border-radius: var(--sa-r-card); box-shadow: var(--sa-shadow-float); padding: 28px 28px 24px; }
.sa-dialog .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--sa-warn-tint); color: var(--sa-warn); display: grid; place-items: center; }
.sa-dialog h2 { font: 800 24px/1.2 var(--sa-font); letter-spacing: var(--sa-tracking-tight); margin: 16px 0 8px; }
.sa-dialog p { margin: 0; font: 500 14.5px/1.5 var(--sa-font); color: var(--sa-text-mid); }
.sa-dialog ul { list-style: none; margin: 16px 0 0; padding: 4px 16px; background: var(--sa-page); border-radius: var(--sa-r-inner); }
.sa-dialog li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--sa-line); font: 600 13.5px/1.3 var(--sa-font); }
.sa-dialog li:first-child { border-top: 0; }
.sa-dialog li span:last-child { color: var(--sa-text-mid); font-weight: 500; }
.sa-dialog .actions { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.sa-dialog .actions .sa-btn { white-space: nowrap; }
.sa-dialog .actions .cancel { margin-left: auto; }
.sa-btn.danger.solid { background: var(--sa-warn); border-color: var(--sa-warn); color: var(--sa-surface); }
.sa-btn.danger.solid:hover { box-shadow: inset 0 0 0 999px var(--sa-scrim); }
.sa-btn.ghost { background: transparent; border-color: transparent; color: var(--sa-text-mid); }
.sa-btn.ghost:hover { color: var(--sa-ink); }

/* v1.4.1 · My data empty state, trimmed */
.sa-hero.drop.slim { display: flex; flex-direction: column; justify-content: center; min-height: 240px; }
.sa-promise.short { grid-template-columns: repeat(3, 1fr) auto; }
.sa-promise.short li { padding: 14px 20px; }
.sa-promise.short li.more { display: flex; font: 700 13px/1.2 var(--sa-font); }
.sa-promise.short li.more a { color: var(--sa-forest); text-decoration: none; white-space: nowrap; }
.sa-howto { padding: 0; }
.sa-howto > summary { list-style: none; cursor: pointer; padding: 18px 24px; font: 700 15px/1.2 var(--sa-font); color: var(--sa-ink); display: flex; justify-content: space-between; align-items: center; }
.sa-howto > summary::-webkit-details-marker { display: none; }
.sa-howto > summary::after { content: "+"; font: 600 20px/1 var(--sa-font); color: var(--sa-meta); }
.sa-howto[open] > summary::after { content: "\2212"; }
.sa-howto .sa-where { padding: 0 24px 20px; }