/* Side Atlas app styles: what the live product needs beyond the kit's ui-reference.css.
   Colours only through var(--sa-*) tokens (tokens.css is the one palette file). */

/* ---------- Shell ---------- */
.sa-logo { color: inherit; text-decoration: none; }
.sa-logo .mark { width: 40px; height: 40px; border-radius: 10px; display: block; }
.sa-nav .nav-label { padding: 18px 16px 6px; }
.sa-main { transition: opacity .15s; }
.sa-main.loading { opacity: .55; }
.mono { font-family: var(--sa-mono); }

.sa-seg a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; 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-seg a:hover { color: var(--sa-ink); }
.sa-seg a.on { background: var(--sa-forest); color: var(--sa-on-forest); }

.sa-who.picker { position: relative; cursor: pointer; padding-right: 12px; }
.sa-who.picker:hover { border-color: var(--sa-line-strong); }
.sa-who.picker .chev { color: var(--sa-meta); }
.sa-who.picker select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font: inherit; }

/* ---------- Cards & states ---------- */
.kpi-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }
.kpi-row .sa-fig { margin: 0; }
.sa-kpi .note b { color: var(--sa-ink); }
.sa-legend .dot.round { border-radius: 50%; }

.sa-warncard { display: grid; grid-template-columns: 40px 1fr 360px; gap: 18px; align-items: start; background: var(--sa-warn-tint); border: 1px solid var(--sa-warn-line); border-radius: var(--sa-r-card); padding: 22px 24px; }
.sa-warncard .wc-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--sa-surface); color: var(--sa-warn); display: grid; place-items: center; }
.sa-warncard > .sa-icon { color: var(--sa-warn); margin-top: 4px; }
.sa-warncard .label { color: var(--sa-warn-text); }
.sa-warncard h2 { font: var(--sa-h2); color: var(--sa-ink); margin: 6px 0 6px; letter-spacing: -0.01em; }
.sa-warncard p { margin: 0; color: var(--sa-text-mid); max-width: 560px; font: var(--sa-small); font-size: 14px; }
.sa-warncard p.err { margin-top: 10px; color: var(--sa-warn-text); font: 500 12.5px/1.4 var(--sa-mono); }
.sa-warncard .wc-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.sa-warncard .wc-record { background: var(--sa-surface); border-radius: var(--sa-r-inner); padding: 6px 16px; }
.sa-warncard .wc-record li { font-size: 13px; padding: 8px 0; }
.sa-warncard .wc-record li span:first-child { color: var(--sa-text-mid); font-weight: 500; }
.stack > .sa-warncard, .ask-col .sa-warncard { grid-template-columns: 40px 1fr; }

.sa-empty, .sa-error { display: flex; gap: 14px; align-items: flex-start; color: var(--sa-text-mid); }
.sa-error { color: var(--sa-warn-text); background: var(--sa-warn-tint); border-color: var(--sa-warn-line); }

.sa-ribbon { white-space: nowrap; }
.us-only { color: var(--sa-text-mid); }

/* ---------- Ledger ---------- */
.sa-filters { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.sa-filters .sa-chip { text-decoration: none; cursor: pointer; }
.sa-filters .sa-chip:hover { border-color: var(--sa-forest); color: var(--sa-forest); }
.sa-filters .sa-btn.select { margin-left: auto; position: relative; }
.sa-filters .sa-btn.select select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sa-table td .fx.missing { color: var(--sa-warn-text); }

/* ---------- Tax items ---------- */
.tax-hero { display: grid; grid-template-columns: 1fr 210px; gap: 24px; min-height: 220px; }
.tax-hero .title { font: 800 30px/1.15 var(--sa-font); color: var(--sa-on-forest); letter-spacing: var(--sa-tracking-tight); }
.tax-hero .amount { margin-top: 20px; position: relative; }
.tax-hero .amount .sa-fig { margin: 0 0 6px; font-size: 48px; }
.tax-hero .sa-count { align-self: end; }
.tax-hero .sa-count .glass { margin-top: 12px; }
.withheld { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sa-line); }
.head + .withheld { border-top: 0; padding-top: 0; }
.withheld .meta { margin-top: 8px; }
.withheld .amt { text-align: right; }
.withheld .amt .sa-fig { font: 800 28px/1 var(--sa-font); color: var(--sa-tax-text); }
.gapcell { display: flex; align-items: center; gap: 10px; }
.sa-grid.notes { margin-top: 14px; gap: 12px; }
.accountant { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.sa-check button.box { background: transparent; padding: 0; cursor: pointer; }
.sa-check button.box:hover { border-color: var(--sa-forest); }

/* ---------- Report ---------- */
.sa-sheet .band .label { color: var(--sa-on-forest-mid); }
.sa-sheet .foot { margin-top: 16px; }
@media print {
  .sa-side, .sa-top, .no-print, .sa-warncard { display: none !important; }
  .sa-app { display: block; height: auto; }
  .sa-main { overflow: visible; padding: 0; }
  .sa-grid { display: block; }
  .sa-sheet { box-shadow: none; border: 0; }
  body { background: var(--sa-surface); }
  .sa-sheet .band, .sa-table th, .sa-table tr.total td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Ask ---------- */
.examples .example-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.examples .sa-chip { cursor: pointer; font-family: var(--sa-font); color: var(--sa-ink); }
.examples .sa-chip:hover { border-color: var(--sa-forest); color: var(--sa-forest); }
.sa-input input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--sa-ink); font: 500 15px/1 var(--sa-font); min-width: 0; }
.sa-input input::placeholder { color: var(--sa-meta); }
.sa-input:focus-within { border-color: var(--sa-forest); }
.sa-btn:disabled { opacity: .5; cursor: default; }
.sa-answer { min-height: 0; }
.sa-answer .clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 600px; }
a.sa-ref { text-decoration: none; }
.answer-lines { padding: 18px 24px; }
.answer-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.answer-lines .answer-foot:first-child { margin-top: 0; }
.answer-foot .promise { display: flex; gap: 6px; align-items: center; color: var(--sa-forest); font: var(--sa-small); }
a.sa-prism { text-decoration: none; }
.sa-steps .args { font-family: var(--sa-font); font-weight: 500; color: var(--sa-meta); }
.sa-steps li > .sa-icon { color: var(--sa-forest); margin-top: 8px; }
.sa-steps li.err .n { border-color: var(--sa-warn); color: var(--sa-warn); }
.sa-steps li.err .s { color: var(--sa-warn-text); }
.sa-steps li > .sa-icon.warnicon { color: var(--sa-warn); }
.sa-steps li.pending .n { border-style: dashed; border-color: var(--sa-line-strong); }
.sa-steps li.flash { background: var(--sa-flash); border-radius: 12px; }
.sa-steps li { transition: background .3s; }
.steps-empty { display: flex; gap: 12px; align-items: flex-start; color: var(--sa-meta); font: var(--sa-small); padding: 8px 0; }
.spin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--sa-line-strong); border-top-color: var(--sa-forest); animation: sa-spin .8s linear infinite; }
@keyframes sa-spin { to { transform: rotate(360deg); } }

/* ---------- Kit v1.1 components still in use (tokens only) ---------- */
.sa-range { width: 100%; accent-color: var(--sa-accent-on-primary); height: 26px; margin: 0; cursor: pointer; }
.sa-rateinput { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--sa-line-strong); border-radius: var(--sa-r-input); padding: 7px 12px; font: 800 16px/1 var(--sa-font); background: var(--sa-surface); color: var(--sa-ink); }
.sa-rateinput input { width: 40px; border: 0; font: inherit; color: inherit; background: transparent; text-align: right; outline: none; }
.sa-toggle { width: 40px; height: 24px; border-radius: var(--sa-r-pill); background: var(--sa-line-strong); position: relative; flex: none; border: 0; cursor: pointer; padding: 0; }
.sa-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--sa-surface); transition: left .15s; }
.sa-toggle.on { background: var(--sa-forest); }
.sa-toggle.on::after { left: 19px; }
.sa-togglelist { list-style: none; margin: 0; padding: 0; }
.sa-togglelist li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 7px 0; border-top: 1px solid var(--sa-line); font: 600 14px/1.3 var(--sa-font); color: var(--sa-ink); }
.sa-togglelist li:first-child { border-top: 0; }
.sa-togglelist li .amt { font-variant-numeric: tabular-nums; color: var(--sa-text-mid); }
.sa-togglelist li.off { color: var(--sa-meta); }
.sa-togglelist .tl-name { display: flex; align-items: center; gap: 8px; }
.sa-steps .n.range { font-size: 9.5px; letter-spacing: -.02em; }
.sa-platchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }

/* ---------- Nav & creator picker ---------- */
.sa-who .av { position: relative; }
.sa-who .warn-dot { position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--sa-warn); box-shadow: 0 0 0 2px var(--sa-surface); }

/* ---------- Overview ---------- */
.sa-legend li.best { font-weight: 700; }
.sa-legend li.best .sa-badge { margin-left: 6px; vertical-align: 1px; }
.tax-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sa-text-mid); font: var(--sa-small); padding: 16px 20px; }
.tax-link b { margin-left: auto; color: var(--sa-forest); font: 700 14px/1 var(--sa-font); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tax-link:hover { border-color: var(--sa-forest); }
.sa-icon.rot { transform: rotate(-90deg); }
.sa-icon.flip { transform: rotate(90deg); }

/* ---------- Tax: set-aside editor on the hero ---------- */
.rate-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--sa-on-forest-glass); border: 1px solid var(--sa-on-forest-glass-line); border-radius: var(--sa-r-pill); padding: 2px 9px; font: 700 14px/1.4 var(--sa-font); color: var(--sa-on-forest); cursor: pointer; }
.rate-chip:hover, .rate-chip[aria-expanded="true"] { background: var(--sa-on-forest-ref); border-color: var(--sa-on-forest-ghost-line); }
.sa-rateedit { margin-top: 16px; background: var(--sa-on-forest-glass); border: 1px solid var(--sa-on-forest-glass-line); border-radius: var(--sa-r-inner); padding: 14px 16px; color: var(--sa-on-forest); max-width: 520px; }
.sa-rateedit[hidden] { display: none; }
.sa-rateedit .row { display: flex; align-items: center; gap: 14px; }
.sa-rateedit .meta-row { margin-top: 10px; justify-content: space-between; font: var(--sa-small); color: var(--sa-on-forest-mid); }
.sa-rateedit .link { background: none; border: 0; padding: 0; color: var(--sa-on-forest); font: 700 13px/1 var(--sa-font); text-decoration: underline; cursor: pointer; }
.sa-rateedit .link[hidden] { display: none; }
.sa-seg.on-dark { background: var(--sa-on-forest-glass); border-color: var(--sa-on-forest-glass-line); }
.sa-seg.on-dark button { color: var(--sa-on-forest); }
.sa-seg.on-dark button.on { background: var(--sa-surface); color: var(--sa-forest); }
.sa-rateedit .advanced { margin-top: 10px; }
.sa-rateedit .advanced summary { cursor: pointer; font: 700 13px/1.4 var(--sa-font); color: var(--sa-on-forest-mid); }
.sa-rateedit .advanced .sa-togglelist { margin-top: 8px; background: var(--sa-surface); border-radius: var(--sa-r-inner); padding: 4px 14px; }

/* ---------- Ledger: Import statements drawer ---------- */
.sa-drawer-wrap { position: fixed; inset: 0; z-index: 50; }
.sa-drawer-backdrop { position: absolute; inset: 0; background: var(--sa-scrim); }
.sa-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 480px; background: var(--sa-page); box-shadow: var(--sa-shadow-float); padding: 24px 26px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.sa-drawer .head { display: flex; justify-content: space-between; align-items: center; }
.sa-drawer .head h2 { font: var(--sa-h2); margin: 0; }
.sa-drawer .label.section { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.sa-drawer .label.section .meta { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sa-drop { border: 2px dashed var(--sa-line-strong); border-radius: var(--sa-r-card); background: var(--sa-sage); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.sa-drop.compact { padding: 16px 18px; }
.sa-drop.over { border-color: var(--sa-forest); background: var(--sa-forest-100); }
.sa-drop .drop-row { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
.sa-drop .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--sa-surface); display: grid; place-items: center; color: var(--sa-forest); }
.sa-drop b { font: 800 16px/1.3 var(--sa-font); color: var(--sa-ink); }
.sa-drop p { margin: 0; color: var(--sa-text-mid); font: var(--sa-small); }
.sa-drawer .soon { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-drawer .soon .sa-btn:disabled { opacity: .55; }
[data-dropped]:empty { display: none; }
.sa-note a { color: inherit; font-weight: 700; }

/* ---------- Report ---------- */
.sa-btn.back { align-self: flex-start; }

/* ---------- Atlas the mascot ---------- */
/* Images show only once loaded; a missing file removes itself (see lib/mascot.js). Sizes are tokens. */
.sa-mascot { display: none; pointer-events: none; user-select: none; }
.sa-mascot.ok { display: block; width: auto; filter: drop-shadow(0 4px 10px var(--sa-mascot-shadow)); }
.sa-hero .hero-mascot { position: absolute; right: 28px; bottom: 16px; height: var(--sa-mascot-hero); z-index: 1; }
.sa-hero .hero-mascot.small { height: var(--sa-mascot-inline); }
.sa-answer { position: relative; overflow: hidden; }
.sa-answer .answer-mascot { position: absolute; right: 22px; bottom: 16px; height: var(--sa-mascot-card); }
.sa-answer.has-mascot { padding-right: calc(var(--sa-mascot-card) + 48px); }
.tax-hero .title .title-mascot.ok { display: inline-block; height: var(--sa-mascot-inline); vertical-align: -14px; margin-left: 10px; }
.sa-warncard .wc-icon { position: relative; }
.sa-warncard .wc-icon.has-mascot { width: var(--sa-mascot-inline); height: var(--sa-mascot-inline); background: transparent; }
.sa-warncard .wc-icon.has-mascot > svg { display: none; }
.sa-warncard .wc-icon .sa-mascot.ok { height: var(--sa-mascot-inline); max-width: var(--sa-mascot-inline); object-fit: contain; }
.sa-warncard:has(.wc-icon.has-mascot) { grid-template-columns: var(--sa-mascot-inline) 1fr 360px; }
.stack > .sa-warncard:has(.wc-icon.has-mascot), .ask-col .sa-warncard:has(.wc-icon.has-mascot) { grid-template-columns: var(--sa-mascot-inline) 1fr; }
.sa-empty.has-mascot > svg { display: none; }
.sa-empty .empty-mascot.ok { height: var(--sa-mascot-inline); }
.sa-drop .drop-mascot.ok { height: var(--sa-mascot-inline); }
.thinking { display: flex; align-items: center; gap: 12px; }
.thinking .think-mascot.ok { height: var(--sa-mascot-avatar); }

/* ---------- Welcome (demo entry; no real sign-in) ---------- */
.sa-app.bare { grid-template-columns: 1fr; }
.sa-app.bare .sa-side { display: none; }
.sa-app.bare .sa-main { padding: 0; }
.sa-signout { align-self: flex-start; background: none; border: 0; padding: 0; font: var(--sa-small); color: var(--sa-meta); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sa-signout:hover { color: var(--sa-ink); }
.sa-welcome { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; height: 100vh; min-height: 640px; padding: 28px; background: var(--sa-page); }
.wl-brand { position: relative; overflow: hidden; background: var(--sa-forest); color: var(--sa-on-forest); border-radius: var(--sa-r-card); padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; }
.wl-brand .wl-logo { position: absolute; top: 44px; left: 48px; }
.wl-logo { display: flex; align-items: center; gap: 12px; font: 800 22px/1 var(--sa-font); }
.wl-logo img { border-radius: 12px; display: block; }
.wl-brand h1 { font: 800 46px/1.1 var(--sa-font); letter-spacing: -0.025em; margin: 0 0 30px; }
.wl-brand h1 span { display: block; }
.wl-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; max-width: 470px; position: relative; z-index: 2; }
.wl-points li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; font: 500 15px/1.45 var(--sa-font); color: var(--sa-on-forest-mid); }
.wl-points .sa-icon { width: 32px; height: 32px; padding: 6px; border-radius: 10px; border: 1.5px solid var(--sa-on-forest-ghost-line); color: var(--sa-on-forest); }
.wl-brand .wl-mascot { position: absolute; right: 36px; bottom: 28px; height: 140px; width: auto; z-index: 1; }
.wl-panel { display: grid; place-items: center; background: var(--sa-forest-100); border-radius: var(--sa-r-card); padding: 44px; }
.wl-card { width: 100%; max-width: 540px; background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-r-card); box-shadow: var(--sa-shadow-float); padding: 52px 48px; display: flex; flex-direction: column; gap: 18px; }
.wl-card h2 { font: 800 44px/1.1 var(--sa-font); letter-spacing: -0.025em; margin: 0 0 8px; }
.wl-account { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--sa-line); border-radius: var(--sa-r-inner); background: var(--sa-page); }
.wl-account .av { width: 48px; height: 48px; border-radius: 50%; background: var(--sa-forest-100); color: var(--sa-forest); display: grid; place-items: center; font: 800 19px/1 var(--sa-font); }
.wl-account b { display: block; font: 700 18px/1.3 var(--sa-font); }
.wl-account span { font: var(--sa-small); color: var(--sa-meta); }
.wl-card .sa-btn { width: 100%; height: 56px; font-size: 16px; }
.wl-card .sa-btn[disabled] { color: var(--sa-meta); cursor: not-allowed; }
.wl-foot { margin: 6px 0 0; font: var(--sa-small); color: var(--sa-meta); }
.wl-built { align-self: flex-start; }

.wl-about { display: block; margin-top: 14px; font: var(--sa-small); color: var(--sa-meta); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Your data (kit v1.3 / v1.3.1 components live in ui-reference.css) ---------- */
.tax-hero .title { margin: 0; max-width: none; }   /* the kit's .sa-hero .title is for the upload hero */
.tax-hero.cn { grid-template-columns: 1fr 230px; }
.tax-hero.both { grid-template-columns: 1fr auto; gap: 32px; min-height: 0; align-items: end; }
.tax-hero .sa-count .tag { font: var(--sa-label); letter-spacing: var(--sa-tracking-label); text-transform: uppercase; color: var(--sa-on-forest-mid); margin-bottom: 8px; }
.sa-facts b.tax { color: var(--sa-tax-text); }
.sa-kpi .meta b.ink { color: var(--sa-ink); }
.sa-kpi .meta b.warn { color: var(--sa-warn-text); }
.sa-who .av .sa-icon { color: var(--sa-forest); }
.sa-hero .mydata-speech { right: 150px; bottom: 138px; }
.sa-hero.drop.over::before { border-color: var(--sa-on-forest); }
.sa-grid.over { outline: 2px dashed var(--sa-forest); outline-offset: 8px; border-radius: var(--sa-r-card); }
.sa-dataact .btns { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.sa-dataact > div > input[hidden] { display: none; }
.sa-files td .acct + .acct { margin-left: 4px; }
.sa-files td.msg { white-space: normal; }
.sa-prism i { flex: none; }

/* Platform marks in front of platform names (replace the colour dots; the bars keep the palette) */
.sa-picon { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; flex: none; }
.sa-legend li { grid-template-columns: 18px 1fr auto 92px; }
.sa-legend .sa-picon { margin-right: 0; }
.sa-chip .sa-picon { width: 14px; height: 14px; margin-right: 0; vertical-align: -2px; }

/* Dropdowns (kit v1.4.1): one trigger height in the page header and one menu style everywhere */
.sa-top .right { gap: 10px; }
.sa-top .right > .sa-btn { height: 44px; padding: 0 18px; font-size: 14px; }
.sa-dd { position: relative; display: inline-flex; }
.sa-pick { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-r-pill); font: 700 14px/1 var(--sa-font); color: var(--sa-ink); white-space: nowrap; cursor: pointer; }
.sa-pick:hover, .sa-who.picker:hover { border-color: var(--sa-line-strong); }
.sa-pick > .sa-icon { color: var(--sa-meta); }
.sa-pick .g { color: var(--sa-forest); font-weight: 800; }
button.sa-who { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.sa-dd [aria-expanded="true"] .chev { transform: rotate(180deg); }
.sa-dd [aria-expanded="true"].sa-pick, .sa-dd [aria-expanded="true"].sa-who { border-color: var(--sa-forest); }
.th-pick { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; margin: -4px -8px; border: 0; background: none; border-radius: 8px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; white-space: nowrap; cursor: pointer; }
.th-pick:hover, .th-pick[aria-expanded="true"] { background: var(--sa-forest-100); color: var(--sa-forest); }
.th-pick .chev { width: 12px; height: 12px; color: var(--sa-meta); }
.th-pick.on { color: var(--sa-forest); background: var(--sa-forest-100); text-transform: none; letter-spacing: 0; }
.th-pick.on .chev { color: var(--sa-forest); }
.th-l { display: inline-flex; align-items: center; gap: 6px; }
.sa-table th .sa-icon.sm { width: 14px; height: 14px; flex: none; }
.sa-table th.money .th-l { justify-content: flex-end; }
.sa-menu { position: fixed; z-index: 60; min-width: 220px; max-height: min(420px, 70vh); overflow: auto; padding: 6px; background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: 16px; box-shadow: var(--sa-shadow-float); font: 600 14px/1.25 var(--sa-font); color: var(--sa-ink); text-transform: none; letter-spacing: 0; text-align: left; }
.sa-menu .grp { padding: 10px 10px 4px; font: var(--sa-label); letter-spacing: var(--sa-tracking-label); text-transform: uppercase; color: var(--sa-meta); }
.sa-menu .opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; background: none; border-radius: 10px; font: inherit; color: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.sa-menu .opt:hover, .sa-menu .opt:focus-visible { background: var(--sa-forest-100); outline: none; }
.sa-menu .opt.on { color: var(--sa-forest); font-weight: 800; }
.sa-menu .opt .t { flex: 1; }
.sa-menu .opt small { display: block; margin-top: 3px; font: 500 12px/1.3 var(--sa-font); color: var(--sa-meta); }
.sa-menu .opt .tick { color: var(--sa-forest); }
.sa-menu .opt .sa-picon { margin-right: 0; }
.sa-menu .sym { width: 18px; text-align: center; color: var(--sa-forest); font-weight: 800; }
.sa-menu .av-mini { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sa-forest-100); color: var(--sa-forest); font: 700 12px/1 var(--sa-font); }

/* One sidebar menu: the four screens, a thin rule, then My data and Settings & privacy */
.sa-navsep { border: 0; border-top: 1px solid var(--sa-line); margin: 10px 16px; }
.sa-nav a .r { margin-left: auto; font: 600 12px/1 var(--sa-font); opacity: .75; }
.sa-pagenote { margin: 28px 0 8px; font: 500 12.5px/1.4 var(--sa-font); color: var(--sa-meta); }
.sa-top .right .sa-who { height: 44px; padding-top: 0; padding-bottom: 0; }

/* Tax hero (kit v1.4.1): Atlas at the bottom right like Overview; countdowns sit under the amount */
.tax-hero, .tax-hero.cn, .tax-hero.both { display: block; min-height: 236px; }
.tax-hero > div:not(.orb) { position: relative; z-index: 2; padding-right: 170px; }
.tax-counts { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 20px; }
.tax-count { display: flex; align-items: center; gap: 14px; }
.tax-count + .tax-count { padding-left: 36px; border-left: 1px solid var(--sa-on-forest-glass-line); }
.tax-count .days { font: 800 52px/0.9 var(--sa-font); letter-spacing: -0.04em; color: var(--sa-accent-on-primary); }
.tax-count .of { font: 700 14px/1.3 var(--sa-font); color: var(--sa-on-forest); white-space: nowrap; }
.tax-count .glass { margin-top: 6px; }

/* Ask Atlas (kit v1.4.1): the pigeon avatar in the title, Atlas poses in every state, an icon per tool */
.sa-top h1.with-av { display: flex; align-items: center; gap: 14px; }
.sa-avatar { width: 44px; height: 44px; border-radius: 14px; flex: none; }
.examples { position: relative; min-height: 150px; padding-right: 150px; }
.examples .ex-mascot.ok { position: absolute; right: 18px; bottom: 10px; height: var(--sa-mascot-card); }
.thinking .think-mascot.ok { height: var(--sa-mascot-card); }
.steps-empty { align-items: center; }
.steps-empty .steps-mascot.ok { height: var(--sa-mascot-card); flex: none; }
.sa-steps .t .tool { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--sa-forest); }
.sa-steps li.err .t .tool { color: var(--sa-warn); }

/* Ledger KPI row (kit v1.4.1): icons on the labels; Net is a small hero card with the orb and Atlas */
.sa-kpirow { grid-template-columns: repeat(4, 1fr) 1.6fr; }
.sa-kpirow:has(.sa-kpi.net + .sa-card) { grid-template-columns: repeat(3, 1fr) 1.6fr 1.35fr; }
.sa-kpi .label .sa-icon { width: 14px; height: 14px; color: var(--sa-meta); }
.sa-kpi.net { position: relative; overflow: hidden; padding: 16px 20px; border-radius: var(--sa-r-card); background: var(--sa-forest); color: var(--sa-on-forest); }
.sa-kpi.net .label, .sa-kpi.net .label .sa-icon { color: var(--sa-on-forest-mid); }
.sa-kpi.net .sa-fig { color: var(--sa-on-forest); position: relative; z-index: 2; }
.sa-kpi.net .orb { position: absolute; right: -60px; bottom: -86px; width: 170px; height: 170px; border-radius: 50%; background: var(--sa-lime); }
.sa-kpi.net .kpi-mascot.ok { position: absolute; right: 12px; bottom: 2px; height: 74px; z-index: 1; }
.sa-gap { width: 88px; }

/* Tax already withheld: a flag per country, the platform under it */
.withheld .who { display: flex; align-items: flex-start; gap: 12px; }
.sa-flag { width: 24px; height: 16px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px var(--sa-line); margin-top: 3px; object-fit: cover; }
.withheld .who b { display: block; font: 800 16px/1.3 var(--sa-font); color: var(--sa-ink); }
.withheld .who .by { display: inline-flex; align-items: center; margin-top: 4px; font: 600 13px/1.2 var(--sa-font); color: var(--sa-text-mid); }
.withheld .who .by .sa-picon { width: 14px; height: 14px; margin-right: 6px; }
.sa-table td:has(> .sa-badge) { white-space: normal; }
.sa-table td .sa-badge { white-space: normal; line-height: 1.25; max-width: 100%; }

/* Settings: Tilly with the globe in the card's empty corner */
.sa-settings { position: relative; }
.sa-settings .settings-mascot.ok { position: absolute; right: 22px; bottom: 18px; height: var(--sa-mascot-card); pointer-events: none; }

/* ---------- v1.4 · entries, expenses, goal, milestones (from the design kit, 05-css) ---------- */
/* ---------- v1.4 · all side income: entries, expenses, goal, milestones ---------- */
/* Right-hand sheet (Add entry, Set goal). Same frame as the product's Import statements drawer. */
/* Form fields: label 12 uppercase, control 48px, radius 14, help line under. */
.sa-field { display: flex; flex-direction: column; gap: 7px; }
.sa-field > .label { font-size: 11px; }
.sa-field .ctl { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; background: var(--sa-surface); border: 1.5px solid var(--sa-line-strong); border-radius: var(--sa-r-input); font: 600 15px/1 var(--sa-font); color: var(--sa-ink); }
.sa-field .ctl.focus { border-color: var(--sa-forest); box-shadow: 0 0 0 3px var(--sa-forest-100); }
.sa-field .ctl .pre { color: var(--sa-meta); font-weight: 700; }
.sa-field .ctl .end { margin-left: auto; color: var(--sa-meta); }
.sa-field .ctl.big { height: 60px; font: 800 26px/1 var(--sa-font); letter-spacing: -0.01em; }
.sa-field .ctl.area { height: 76px; align-items: flex-start; padding-top: 12px; font: 500 14px/1.4 var(--sa-font); color: var(--sa-meta); }
.sa-field .help { font: var(--sa-small); color: var(--sa-meta); display: flex; gap: 6px; align-items: center; }
.sa-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Income | Expense toggle: a two-option segmented pill that fills the sheet width. */
.sa-seg.wide { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.sa-seg.wide button { height: 40px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* Category pills (expenses): radio chips that wrap. */
.sa-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-cats .sa-chip { cursor: pointer; }
/* "Added by you": tag on rows the person entered by hand. */
.sa-you { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; border-radius: var(--sa-r-badge); padding: 3px 7px; background: var(--sa-lime-100); color: var(--sa-accent-text); font: 700 11px/1.1 var(--sa-font); white-space: nowrap; vertical-align: 1px; }
.sa-you .sa-icon { width: 12px; height: 12px; }
/* Dots: platforms are filled; your own sources are hollow rings; expenses use a dark square. */
.sa-pdot.own { background: transparent; box-shadow: inset 0 0 0 2px var(--sa-accent-text); }
.sa-pdot.exp { border-radius: 3px; background: var(--sa-text-mid); }
.sa-bar span.own { background: repeating-linear-gradient(135deg, var(--sa-lime) 0 4px, var(--sa-lime-100) 4px 8px); }
.sa-table td.exp { color: var(--sa-ink); font-weight: 700; }
.sa-table tr.expense td { background: var(--sa-page); }
/* Filter chips with counts. */
.sa-chip .n { font-variant-numeric: tabular-nums; color: var(--sa-meta); font-weight: 600; }
.sa-chip.on .n { color: var(--sa-forest); }
/* Expenses by category: one bar per row, one colour (expenses are not a platform deduction). */
.sa-catbars { list-style: none; margin: 0; padding: 0; }
.sa-catbars li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 9px 0; border-top: 1px solid var(--sa-line); font: 600 14px/1.3 var(--sa-font); }
.sa-catbars li:first-child { border-top: 0; }
.sa-catbars .amt { font-variant-numeric: tabular-nums; }
.sa-catbars .track { grid-column: 1 / -1; height: 6px; border-radius: var(--sa-r-pill); background: var(--sa-sage); overflow: hidden; }
.sa-catbars .track i { display: block; height: 100%; background: var(--sa-text-mid); border-radius: var(--sa-r-pill); }
/* Kept after expenses: a three-line sum. */
.sa-kept { margin-top: 14px; border-radius: var(--sa-r-inner); background: var(--sa-sage); padding: 10px 16px; }
.sa-kept li { display: flex; justify-content: space-between; padding: 5px 0; font: 600 14px/1.3 var(--sa-font); font-variant-numeric: tabular-nums; list-style: none; }
.sa-kept ul { margin: 0; padding: 0; }
.sa-kept li.total { border-top: 1px solid var(--sa-line-strong); margin-top: 4px; padding-top: 9px; font-weight: 800; color: var(--sa-forest); }
/* Monthly goal card: progress, then the reached state. */
.sa-goal .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sa-goal .fig { font: 800 30px/1.1 var(--sa-font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 8px; }
.sa-goal .fig small { font: 600 15px/1 var(--sa-font); color: var(--sa-meta); margin-left: 6px; letter-spacing: 0; }
.sa-progress { height: 12px; border-radius: var(--sa-r-pill); background: var(--sa-sage); overflow: hidden; margin: 12px 0 8px; }
.sa-progress i { display: block; height: 100%; border-radius: var(--sa-r-pill); background: var(--sa-forest); }
.sa-goal .note { font: var(--sa-small); color: var(--sa-text-mid); display: flex; justify-content: space-between; gap: 10px; }
.sa-goal .note a { color: var(--sa-forest); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sa-goal.reached { background: var(--sa-lime-100); border-color: transparent; display: grid; grid-template-columns: 1fr var(--sa-mascot-card); gap: 16px; align-items: center; }
.sa-goal.reached .sa-progress { background: var(--sa-surface); }
.sa-goal.reached h3 { margin: 4px 0 4px; font: 800 20px/1.25 var(--sa-font); letter-spacing: var(--sa-tracking-tight); }
.sa-goal.reached p { margin: 0; font: var(--sa-small); font-size: 14px; color: var(--sa-text-mid); }
.sa-goal.reached img { height: var(--sa-mascot-card); width: auto; }
/* Badge tile: Atlas pose, name, the reason in numbers or what's left. Locked tiles are greyed with a lock. */
.sa-badgegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sa-badgetile { position: relative; background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-r-card); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 236px; }
.sa-badgetile .art { height: 96px; display: grid; place-items: center; background: var(--sa-lime-100); border-radius: var(--sa-r-inner); margin-bottom: 6px; }
.sa-badgetile .art img { height: 84px; width: auto; }
.sa-badgetile b { font: 800 15.5px/1.25 var(--sa-font); color: var(--sa-ink); }
.sa-badgetile .d { font: var(--sa-small); color: var(--sa-text-mid); }
.sa-badgetile .why { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--sa-line); font: 600 12.5px/1.35 var(--sa-font); color: var(--sa-forest); font-variant-numeric: tabular-nums; }
.sa-badgetile .why span { display: block; color: var(--sa-meta); font-weight: 500; }
.sa-badgetile.locked .art { background: var(--sa-sage); }
.sa-badgetile.locked .art img { filter: grayscale(1); opacity: .45; }
.sa-badgetile.locked .lock { position: absolute; top: 26px; right: 26px; width: 28px; height: 28px; border-radius: 50%; background: var(--sa-surface); color: var(--sa-meta); display: grid; place-items: center; box-shadow: var(--sa-shadow-card); }
.sa-badgetile.locked .why { color: var(--sa-text-mid); }
.sa-badgetile .sa-progress { height: 6px; margin: 6px 0 2px; }
.sa-badgetile.latest { border: 2px solid var(--sa-forest); }
/* Latest badge on Overview: compact row. */
.sa-latest { display: grid; grid-template-columns: var(--sa-mascot-inline) 1fr auto; gap: 14px; align-items: center; padding: 16px 20px; }
.sa-latest img { height: var(--sa-mascot-inline); width: auto; }
.sa-latest b { display: block; font: 800 16px/1.25 var(--sa-font); }
.sa-latest span.s { font: var(--sa-small); color: var(--sa-text-mid); }
.sa-latest a { color: var(--sa-forest); font: 700 13px/1 var(--sa-font); text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: 4px; }


/* v1.4 · built pieces the kit draws as pictures: real inputs in the sheets, links as buttons */
.sa-drawer .head { align-items: flex-start; gap: 16px; }
.sa-drawer .head p { margin: 6px 0 0; font: var(--sa-small); color: var(--sa-text-mid); }
.sa-drawer .foot { margin-top: auto; display: flex; gap: 10px; padding-top: 8px; flex-wrap: wrap; }
.entry-sheet, .goal-sheet { gap: 16px; }
.sa-field .ctl:focus-within { border-color: var(--sa-forest); box-shadow: 0 0 0 3px var(--sa-forest-100); }
.sa-field .ctl input, .sa-field .ctl select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; letter-spacing: inherit; }
.sa-field .ctl select { appearance: none; cursor: pointer; }
.sa-field .ctl input[type=date] { font: 600 15px/1 var(--sa-font); }
.sa-field textarea.ctl { height: 76px; padding: 12px 14px; resize: vertical; font: 500 14px/1.4 var(--sa-font); color: var(--sa-ink); outline: 0; }
.sa-field .help .sa-icon { width: 14px; height: 14px; }
.sa-field.gap { margin-top: 12px; }
.sa-cats .sa-chip { font-family: var(--sa-font); }
.sa-cats .sa-chip .sa-pdot { margin-right: 0; }
.sa-form-err { margin: 0; color: var(--sa-warn-text); font: 600 13px/1.4 var(--sa-font); }
.goal-sheet .quick { grid-template-columns: repeat(4, 1fr); }
.goal-months { padding: 16px 18px; }
.goal-months .label { margin-bottom: 6px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--sa-forest); font: 700 13px/1.2 var(--sa-font); cursor: pointer; white-space: nowrap; }
.sa-goal.empty .meta { margin: 8px 0 12px; }
.sa-goal .label, .sa-latest .label { display: flex; align-items: center; gap: 6px; }
a.sa-latest { text-decoration: none; color: inherit; }
.sa-latest .go { color: var(--sa-forest); font: 700 13px/1 var(--sa-font); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.sa-legend .dot.round.own { background: transparent; box-shadow: inset 0 0 0 2px var(--sa-accent-text); width: 12px; height: 12px; }
.no-exp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 4px; }
.ledger-v14 tr.entry { cursor: pointer; }
.ledger-v14 tr.entry:hover td { background: var(--sa-forest-100); }
.ledger-v14 tr.entry:focus-visible { outline: 2px solid var(--sa-forest); outline-offset: -2px; }
.ledger-v14 td .sa-you { display: table; margin: 4px 0 0 18px; }
.milestones-hero { min-height: 0; padding-top: 26px; padding-bottom: 26px; }
.milestones-hero .sa-fig { font-size: 44px; margin: 10px 0 8px; }
.sa-lines li.total { font-weight: 800; }
.sa-lines.small li { font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.sa-latest .sa-mascot.ok { height: var(--sa-mascot-inline); }
.sa-goal.reached .sa-mascot.ok { height: var(--sa-mascot-card); }
.sa-field .ctl.big .end { font: 600 14px/1 var(--sa-font); letter-spacing: 0; }
.sa-tablewrap { overflow-x: auto; }
/* A long rate line (rate · date · source) wraps under the amount instead of widening the table */
.ledger-v14 td.money:has(.rate) { white-space: normal; min-width: 150px; }
.ledger-v14 td .rate { white-space: normal; }
/* Goal card: a small Tilly with the flag instead of the target icon */
.sa-goal .label { display: flex; align-items: center; gap: 8px; }
.sa-goal .goal-tilly { width: 28px; height: 28px; object-fit: contain; flex: none; margin: -6px 0; }