/* ============================================================================================================
   NSEA Accounting: look and feel. Built on the NS Enterprise Apps design system (claude.ai/artifact/STUPHF42pZ7DQHBVW73gde):
   warm olive ground, clay accent, cream text; Newsreader (display), Hanken Grotesk (text), JetBrains Mono (figures); Lucide icons.
   Loaded AFTER styles.css: it re-points the old variables at the design tokens and restyles every component.
   App-level deviations from the system, all for legibility (WCAG AA, checked with a script):
     - small text uses --text-muted (#B5AC95 on olive, #6A6250 on cream), never the system's taupe-400 (2.7:1 on a card);
     - status TEXT uses lighter dark-theme / darker light-theme steps (--pos-text, --neg-text, --warn-text);
     - control borders use --border-control (3:1) instead of the hairline.
   Chart series colours are a validated 8-slot categorical set per theme (see charts.js).
   ============================================================================================================ */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/hanken-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- tokens: dark (default, the design system's own theme) -------------------------------------------------- */
:root {
  color-scheme: dark;
  --olive-950: #181A12; --olive-900: #21241A; --olive-850: #282C1F; --olive-800: #2F3424; --olive-700: #3A4030; --olive-600: #4A513D; --olive-500: #5C634D;
  --clay-700: #A84B2E; --clay-600: #C25E3F; --clay-500: #D97757; --clay-400: #E59177; --clay-300: #EFB29E; --clay-200: #F6D2C5;
  --cream-50: #FAF7F0; --cream-100: #F3EEE2; --taupe-200: #C4BBA4; --taupe-300: #A79D83; --taupe-500: #6A6250;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --touch-min: 44px;
  --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 360ms;

  --surface-inverse: #FAF7F0; --text-inverse: #21241A;
  --surface-base: #2F3424; --surface-sunken: #21241A; --surface-raised: #3A4030; --surface-overlay: #282C1F; --surface-hover: #444B38;
  --surface-accent-soft: rgba(217, 119, 87, 0.14);
  --text-primary: #FAF7F0; --text-secondary: #C4BBA4; --text-muted: #B5AC95; --text-accent: #EFB29E; --text-on-accent: #181A12;
  --border-subtle: rgba(250, 247, 240, 0.08); --border-default: rgba(250, 247, 240, 0.16); --border-strong: rgba(250, 247, 240, 0.26); --border-control: #8D917F; --border-accent: #D97757;
  --focus-ring: #E59177; --focus-border: #E59177;
  --pos-text: #9FBF72; --neg-text: #EE9A86; --warn-text: #E0A33E; --info-text: #8FB3C4;
  --shadow-sm: 0 1px 2px rgba(15, 17, 11, 0.30), 0 2px 6px rgba(15, 17, 11, 0.32);
  --shadow-md: 0 2px 4px rgba(15, 17, 11, 0.28), 0 8px 24px rgba(15, 17, 11, 0.42);
  --shadow-lg: 0 4px 8px rgba(15, 17, 11, 0.30), 0 20px 52px rgba(15, 17, 11, 0.52);
  --shadow-card: 0 2px 4px rgba(15, 17, 11, 0.22), 0 8px 22px rgba(15, 17, 11, 0.30);
  --inset-top: inset 0 1px 0 rgba(250, 247, 240, 0.06);
  --glass: rgba(42, 46, 31, 0.78);
  --s1: #4a95ec; --s2: #e0642f; --s3: #199e70; --s4: #c98500; --s5: #dd5c8b; --s6: #2fa02f; --s7: #8f84ea; --s8: #e56565;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  color-scheme: light;
  --surface-inverse: #21241A; --text-inverse: #FAF7F0;
  --surface-base: #FAF7F0; --surface-sunken: #F3EEE2; --surface-raised: #FFFFFF; --surface-overlay: #FFFFFF; --surface-hover: #F3EEE2;
  --surface-accent-soft: rgba(168, 75, 46, 0.10);
  --text-primary: #21241A; --text-secondary: #6A6250; --text-muted: #6A6250; --text-accent: #A84B2E; --text-on-accent: #181A12;
  --border-subtle: rgba(33, 36, 26, 0.08); --border-default: rgba(33, 36, 26, 0.14); --border-strong: rgba(33, 36, 26, 0.22); --border-control: #8A8470; --border-accent: #C25E3F;
  --focus-ring: #A84B2E; --focus-border: #A84B2E;
  --pos-text: #4A6628; --neg-text: #B23F29; --warn-text: #8F5F0E; --info-text: #4E7383;
  --shadow-sm: 0 1px 2px rgba(60, 52, 34, 0.08), 0 2px 6px rgba(60, 52, 34, 0.08);
  --shadow-md: 0 2px 4px rgba(60, 52, 34, 0.07), 0 8px 24px rgba(60, 52, 34, 0.12);
  --shadow-lg: 0 4px 8px rgba(60, 52, 34, 0.08), 0 20px 52px rgba(60, 52, 34, 0.16);
  --shadow-card: 0 1px 3px rgba(60, 52, 34, 0.08), 0 10px 28px rgba(60, 52, 34, 0.10);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass: rgba(250, 247, 240, 0.82);
  --s1: #2a78d6; --s2: #e2531f; --s3: #168a62; --s4: #b87a00; --s5: #d6537f; --s6: #007a00; --s7: #4a3aa7; --s8: #d63c3c;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --surface-inverse: #21241A; --text-inverse: #FAF7F0;
  --surface-base: #FAF7F0; --surface-sunken: #F3EEE2; --surface-raised: #FFFFFF; --surface-overlay: #FFFFFF; --surface-hover: #F3EEE2;
  --surface-accent-soft: rgba(168, 75, 46, 0.10);
  --text-primary: #21241A; --text-secondary: #6A6250; --text-muted: #6A6250; --text-accent: #A84B2E; --text-on-accent: #181A12;
  --border-subtle: rgba(33, 36, 26, 0.08); --border-default: rgba(33, 36, 26, 0.14); --border-strong: rgba(33, 36, 26, 0.22); --border-control: #8A8470; --border-accent: #C25E3F;
  --focus-ring: #A84B2E; --focus-border: #A84B2E;
  --pos-text: #4A6628; --neg-text: #B23F29; --warn-text: #8F5F0E; --info-text: #4E7383;
  --shadow-sm: 0 1px 2px rgba(60, 52, 34, 0.08), 0 2px 6px rgba(60, 52, 34, 0.08);
  --shadow-md: 0 2px 4px rgba(60, 52, 34, 0.07), 0 8px 24px rgba(60, 52, 34, 0.12);
  --shadow-lg: 0 4px 8px rgba(60, 52, 34, 0.08), 0 20px 52px rgba(60, 52, 34, 0.16);
  --shadow-card: 0 1px 3px rgba(60, 52, 34, 0.08), 0 10px 28px rgba(60, 52, 34, 0.10);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass: rgba(250, 247, 240, 0.82);
  --s1: #2a78d6; --s2: #e2531f; --s3: #168a62; --s4: #b87a00; --s5: #d6537f; --s6: #007a00; --s7: #4a3aa7; --s8: #d63c3c;
}

/* ---- the old variables, re-pointed so every existing rule picks up the new look ------------------------------ */
:root {
  --bg: var(--surface-base); --card: var(--surface-raised); --fg: var(--text-primary); --muted: var(--text-muted); --line: var(--border-default);
  --accent: var(--text-accent); --neg: var(--neg-text); --pos: var(--pos-text); --warn: var(--warn-text);
}

/* ---- base ---------------------------------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h, 4.5rem) + .75rem); }
body { font: 400 1rem/1.55 var(--font-sans); background: var(--surface-base); color: var(--text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga"; }
::selection { background: var(--clay-500); color: var(--text-on-accent); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.3rem; margin: 0 0 .75rem; }
h3 { font-size: 1.05rem; }
a { color: var(--text-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
.muted { color: var(--text-muted); }
.small { font-size: .86rem; }
.note { font-size: .9rem; }
code, pre, .mono { font-family: var(--font-mono); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* ---- header and navigation ---------------------------------------------------------------------------------- */
header { background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-default); padding: .6rem 1.25rem; gap: .75rem 1rem; }
h1.brand img { width: 36px; height: 36px; border-radius: 10px; box-shadow: var(--shadow-sm); }
header { align-items: center; }
header nav { order: 10; flex: 1 1 100%; gap: .2rem; margin: .1rem -.25rem -.2rem; padding-top: .45rem; border-top: 1px solid var(--border-subtle); overflow-x: auto; scrollbar-width: none; }
header nav::-webkit-scrollbar { display: none; }
header .alerts-wrap { margin-left: auto; }
header .brand-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.015em; }
nav button, .tabbar button { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .3rem .75rem; min-height: 34px; color: var(--text-secondary); font-weight: 500; font-size: .92rem; background: transparent; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
nav button:hover, .tabbar button:hover { background: var(--surface-hover); color: var(--text-primary); border-color: transparent; }
nav button.active, .tabbar button.active { background: var(--surface-accent-soft); color: var(--text-accent); font-weight: 600; }
#who { color: var(--text-muted); font-size: .88rem; }
header a { font-size: .92rem; }
.org-select { font-weight: 600; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--border-default); color: var(--text-secondary); }
.icon-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); border-color: var(--border-strong); }

/* ---- controls ------------------------------------------------------------------------------------------------ */
button, input, select, textarea { font: inherit; }
input, select, textarea { color: var(--text-primary); background: var(--surface-sunken); border: 1px solid var(--border-control); border-radius: var(--radius-sm); padding: .3rem .65rem; min-height: 32px; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
:root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background-color: #fff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) input, :root:not([data-theme="dark"]) select, :root:not([data-theme="dark"]) textarea { background-color: #fff; } }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .9; }
input:hover, select:hover, textarea:hover { border-color: var(--text-secondary); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring); }
select { appearance: none; padding-right: 2.1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B5AC95' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; }
input[type=checkbox], input[type=radio] { min-height: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--clay-500); padding: 0; vertical-align: -0.2em; }
input[type=date] { color-scheme: inherit; }
button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 32px; padding: .3rem .85rem; font-weight: 600; font-size: .9rem; color: var(--text-primary); background: var(--surface-raised); border: 1px solid var(--border-control); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
button:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--text-secondary); }
button:active:not(:disabled) { transform: translateY(1px) scale(.99); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--clay-500); border-color: transparent; color: var(--text-on-accent); box-shadow: var(--shadow-sm); }
button.primary:hover:not(:disabled) { background: var(--clay-400); border-color: transparent; box-shadow: 0 6px 20px rgba(217, 119, 87, 0.28); }
button.link { display: inline; min-height: 0; padding: 0; background: none; border: 0; color: var(--text-accent); font-weight: 500; font-size: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
button.link:hover:not(:disabled) { background: none; text-decoration-color: currentColor; transform: none; }
button.link.danger, .danger { color: var(--neg-text); }
button.link.cat { color: inherit; text-decoration-style: dotted; font-weight: 500; text-align: left; }
.sorthead { min-height: 0; display: inline; }

/* ---- layout, cards, tiles ------------------------------------------------------------------------------------ */
main { max-width: 80rem; padding: 1.25rem 1.25rem 3rem; }
.card { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), var(--inset-top); padding: 1.25rem; }
.tile { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-card), var(--inset-top); padding: 1rem 1.15rem; }
.tile-label { color: var(--text-secondary); font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.tile-value { font-family: var(--font-display); font-weight: 600; font-size: 1.95rem; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; margin: .15rem 0; }
.tile-sub { color: var(--text-muted); font-size: .84rem; }
.tile-button { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.tile-button:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md), var(--inset-top); background: var(--surface-raised); }
.pos { color: var(--pos-text); } .neg { color: var(--neg-text); }
.banner { border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-raised); padding: .7rem 1rem; display: flex; gap: .6rem; align-items: center; }
.banner.warn { border-color: var(--warn-text); color: var(--text-primary); background: color-mix(in srgb, var(--warn-text) 12%, var(--surface-raised)); }
.empty { color: var(--text-muted); }

/* ---- tables: dense, NetSuite-list style (one header band, ~30px rows, hairline separators), in our colours ------------- */
:root { --row-pad-y: .18rem; --row-pad-x: .6rem; --table-font: .875rem; }
table { border-collapse: separate; border-spacing: 0; font-size: var(--table-font); line-height: 1.3; }
th { position: sticky; top: 0; z-index: 1; background: var(--surface-sunken); color: var(--text-secondary); font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: 0; padding: .4rem var(--row-pad-x); border-bottom: 1px solid var(--border-strong); border-left: 1px solid var(--border-subtle); white-space: nowrap; text-align: left; }
th:first-child { border-left: 0; }
th.num { text-align: right; }
td { padding: var(--row-pad-y) var(--row-pad-x); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
tbody tr { transition: background var(--duration-fast) var(--ease-out); }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-hover) 55%, var(--surface-raised)); }
tbody tr:last-child td { border-bottom: 0; }
.num { font-family: var(--font-mono); font-size: .82rem; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
th.num { font-family: var(--font-sans); letter-spacing: 0; font-size: .8rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
tr.pending td { color: var(--text-secondary); }
tr.selected td, tr.selected:hover td { background: var(--surface-accent-soft); }
tr.focused td { outline: 0; box-shadow: inset 0 2px 0 var(--focus-border), inset 0 -2px 0 var(--focus-border); }
tr.focused td:first-child { box-shadow: inset 0 2px 0 var(--focus-border), inset 0 -2px 0 var(--focus-border), inset 2px 0 0 var(--focus-border); }
tr.focused td:last-child { box-shadow: inset 0 2px 0 var(--focus-border), inset 0 -2px 0 var(--focus-border), inset -2px 0 0 var(--focus-border); }
tr.ignored td { opacity: 1; color: var(--text-secondary); }
tr.disabled td { opacity: 1; }
tr.disabled td:not(:last-child) { color: var(--text-muted); font-style: italic; }
td.col-date, td.col-actions { white-space: nowrap; }
/* controls inside rows are compact too (phones restore 44px targets in the phone block below) */
td select { height: 24px; min-height: 24px; line-height: 1.1; padding: 0 1.7rem 0 .5rem; font-size: .85rem; border-radius: var(--radius-xs); background-position: right .5rem center; }
td input[type=text], td input[type=number], td input[type=search] { height: 24px; min-height: 24px; padding: 0 .45rem; font-size: .85rem; border-radius: var(--radius-xs); }
td button:not(.link):not(.primary) { min-height: 24px; padding: 0 .55rem; font-size: .85rem; border-radius: var(--radius-xs); }
td input[type=checkbox] { width: 1rem; height: 1rem; }
td.col-account { white-space: nowrap; }
td .badge { margin-left: .3rem; padding: 0 .4rem; font-size: .7rem; line-height: 1.25; }
td button.link { font-size: .85rem; }
.chart-table { font-size: .82rem; }
.chart-table td, .chart-table th { padding: .22rem .5rem; }

/* ---- badges, chips ------------------------------------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; margin-left: .4rem; padding: .12rem .55rem; font-size: .75rem; font-weight: 600; letter-spacing: .02em; line-height: 1.35; color: var(--text-secondary); background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-pill); }
.badge.warn { color: var(--warn-text); background: color-mix(in srgb, var(--warn-text) 6%, var(--surface-raised)); border-color: color-mix(in srgb, var(--warn-text) 45%, transparent); }
.badge.book { color: var(--text-accent); background: var(--surface-accent-soft); border-color: transparent; }
.badge.tag { background: transparent; border-style: dashed; }
.chip { border-radius: var(--radius-pill); }

/* ---- budgets progress, charts -------------------------------------------------------------------------------- */
.meter { height: .6rem; background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.meter .fill { background: var(--s1); transition: width var(--duration-slow) var(--ease-out); }
.meter .fill.warn { background: var(--s4); } .meter .fill.over { background: var(--s8); }
.chart figcaption { font-family: var(--font-display); font-size: 1.05rem; }

/* ---- drawer, panels, toasts ---------------------------------------------------------------------------------- */
.drawer { background: var(--surface-raised); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-lg); padding: 1.25rem 1.4rem 2.5rem; animation: ns-drawer-in var(--duration-slow) var(--ease-out) both; }
.drawer h2 { font-size: 1.35rem; }
.drawer h3 { font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--text-secondary); margin: 1.4rem 0 .45rem; }
.drawer-amount { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
#toasts { position: fixed; left: 0; right: 0; bottom: calc(1.2rem + var(--safe-bottom)); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; }
.toast { width: max-content; max-width: min(90vw, 38rem); pointer-events: auto; display: flex; align-items: center; gap: .6rem; background: var(--surface-inverse); color: var(--text-inverse); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: .7rem 1.1rem; font-weight: 500; overflow-wrap: anywhere; animation: ns-fade-in-up var(--duration-base) var(--ease-out) backwards; }
.toast.error { background: #B23F29; color: #fff; border-color: transparent; }
.alerts-panel, .palette { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.alerts-panel { animation: ns-scale-in var(--duration-base) var(--ease-out) backwards; transform-origin: top right; }
.alerts-btn { position: relative; }
.alerts-count { background: var(--clay-500); color: var(--text-on-accent); }
.alerts-count.critical { background: #E56565; color: #181A12; }
.alert-item { border-top: 1px solid var(--border-subtle); }
.alert-item.critical .alert-icon { color: var(--neg-text); } .alert-item.warn .alert-icon { color: var(--warn-text); } .alert-item.info .alert-icon { color: var(--info-text); }
.palette-item:hover { background: var(--surface-hover); }

/* ---- Ask ----------------------------------------------------------------------------------------------------- */
.transcript { background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: none; }
.msg { border-radius: var(--radius-md); border: 1px solid var(--border-default); }
.msg.user { background: var(--clay-500); color: var(--text-on-accent); border-color: transparent; }
.msg.assistant { background: var(--surface-raised); border-color: var(--border-subtle); }
.takeaway { border-left-color: var(--clay-500); background: var(--surface-sunken); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.md code { font-size: .88em; }
.md pre { background: var(--surface-sunken); border-color: var(--border-subtle); border-radius: var(--radius-sm); }

/* ---- form rows ----------------------------------------------------------------------------------------------- */
.filter-panel, .bulkbar { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.bulkbar { border-color: var(--clay-500); box-shadow: var(--shadow-md); }
label.inline { color: var(--text-secondary); }
.field { color: var(--text-secondary); }
.steps a, .card a { color: var(--text-accent); }
.tx-groups details.group { background: var(--surface-raised); border-color: var(--border-subtle); border-radius: var(--radius-md); }
.alerts-wrap { position: relative; }

/* ---- motion: soft and brief; everything stops under prefers-reduced-motion --------------------------------- */
@keyframes ns-fade-in-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ns-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ns-drawer-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes ns-sheet-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ns-shimmer { from { background-position: -180% 0; } to { background-position: 180% 0; } }
main > section:not([hidden]) { animation: ns-fade-in-up var(--duration-base) var(--ease-out) backwards; }
.tiles > .tile { animation: ns-fade-in-up var(--duration-base) var(--ease-out) backwards; }
.tiles > .tile:nth-child(2) { animation-delay: 45ms; } .tiles > .tile:nth-child(3) { animation-delay: 90ms; } .tiles > .tile:nth-child(4) { animation-delay: 135ms; } .tiles > .tile:nth-child(5) { animation-delay: 180ms; }
.card, .tx-groups details.group { animation: ns-fade-in-up var(--duration-base) var(--ease-out) backwards; } /* backwards, never both: a fill-forwards transform animation makes the element a containing block for position: fixed (drawer, sheet) and traps z-index (popovers) */
.skeleton { background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface-hover) 50%, var(--surface-raised) 75%); background-size: 200% 100%; animation: ns-shimmer 1.4s linear infinite; border-radius: var(--radius-sm); min-height: 1rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- mobile: bottom tab bar, bottom-sheet drawer, 44px targets ------------------------------------------------ */
.tabbar { display: none; }
.sheet-backdrop { position: fixed; inset: 0; background: rgba(15, 17, 11, 0.55); z-index: 30; animation: ns-fade-in-up var(--duration-fast) linear backwards; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; background: var(--surface-raised); border-top: 1px solid var(--border-default); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); padding: 1rem 1rem calc(1rem + var(--safe-bottom)); max-height: 80vh; overflow: auto; animation: ns-sheet-in var(--duration-slow) var(--ease-out) both; }
.sheet h2 { font-size: 1.1rem; }
.sheet .sheet-list { display: grid; gap: .25rem; }
.sheet .sheet-list button { justify-content: flex-start; width: 100%; min-height: var(--touch-min); background: transparent; border-color: transparent; font-weight: 500; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  body { padding-bottom: calc(4.4rem + var(--safe-bottom)); font-size: 1.0625rem; }
  header { position: sticky; top: 0; padding: .5rem .85rem; }
  header nav { display: none; }
  #who { display: none; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--border-default); padding: .3rem .25rem calc(.3rem + var(--safe-bottom)); justify-content: space-around; }
  .tabbar button { flex-direction: column; gap: .15rem; flex: 1; min-height: var(--touch-min); padding: .35rem .1rem; font-size: .72rem; border-radius: var(--radius-sm); }
  .tabbar button .icon { width: 1.4rem; height: 1.4rem; }
  main { padding: .9rem .85rem 2rem; }
  button, input, select, textarea { min-height: var(--touch-min); }
  button.link { min-height: var(--touch-min); display: inline-flex; align-items: center; }
  input[type=checkbox], input[type=radio], td input[type=checkbox] { width: 1.5rem; height: 1.5rem; min-height: 0; }
  td:has(> input[type=checkbox]) { padding: .6rem .5rem; }
  summary, .steps-log summary, details > summary, label.radio, label.inline, .switch { min-height: var(--touch-min); display: flex; align-items: center; }
  td select { min-height: var(--touch-min); font-size: 1rem; }
  td input[type=text], td input[type=number], td input[type=search], td button:not(.link):not(.primary) { min-height: var(--touch-min); font-size: 1rem; }
  td { padding: .5rem var(--row-pad-x); }
  .icon-btn, .alerts-btn { min-width: var(--touch-min); min-height: var(--touch-min); }
  input, select, textarea { font-size: 1rem; } /* 16px: no zoom on focus in iOS */
  h2 { font-size: 1.2rem; }
  .tile-value { font-size: 1.6rem; }
  .card { padding: 1rem; border-radius: var(--radius-md); }
  .drawer { animation: ns-sheet-in var(--duration-slow) var(--ease-out) both; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: calc(5rem + var(--safe-bottom)); box-shadow: var(--shadow-lg); }
  .alerts-panel { position: fixed; left: .5rem; right: .5rem; top: 3.8rem; width: auto; max-height: calc(100vh - 8rem); }
  #toasts { bottom: calc(5.2rem + var(--safe-bottom)); }
  .table-scroll th { position: static; }
  .period, .tx-toolbar, .bar { gap: .5rem; }
}
@media (min-width: 701px) and (min-height: 501px), (min-width: 701px) and (pointer: fine) { .sheet, .sheet-backdrop { display: none; } }

/* ---- print: the monthly report on paper ---------------------------------------------------------------------- */
@media print {
  :root { color-scheme: light; --surface-base: #fff; --surface-raised: #fff; --surface-sunken: #fff; --text-primary: #000; --text-secondary: #333; --text-muted: #444; --text-accent: #7a2e17; --border-default: #bbb; --border-subtle: #ddd; --fg: #000; --muted: #444; --line: #bbb; --pos: #1f5c1f; --neg: #9b1c1c; --pos-text: #1f5c1f; --neg-text: #9b1c1c; --warn-text: #6b4200; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .card, .tile { box-shadow: none; background: #fff; border-color: #bbb; animation: none; }
  th { position: static; background: #fff; }
  .tabbar, .sheet, .sheet-backdrop { display: none !important; }
}

/* ---- icons, toast, sheet details ----------------------------------------------------------------------------------- */
button .icon, a .icon { width: 1.1em; height: 1.1em; }
button.link .icon { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: .25rem; }
button.link[data-icon-after] .icon, [data-icon-after] .icon { margin: 0 0 0 .25rem; }
.chip-x { margin-left: .2rem; }
.chip-x .icon { margin: 0 !important; width: .95em; height: .95em; }
.toast .icon { flex: none; width: 1.2em; height: 1.2em; }
.toast.error .icon { color: #fff; }
.toast.leaving { animation: ns-fade-out var(--duration-fast) var(--ease-in-out) both; }
@keyframes ns-fade-out { from { opacity: 1; } to { opacity: 0; } }
.alert-icon { display: inline-flex; padding-top: .15rem; }
.alert-icon .icon { width: 1.15rem; height: 1.15rem; }
.banner .icon { flex: none; }
.sheet-signout, .sheet > button, .sheet .with-label { font-size: 1rem; display: flex; align-items: center; gap: .55rem; min-height: var(--touch-min); padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; font-weight: 500; }
.sheet .with-label { width: 100%; background: transparent; border-color: transparent; justify-content: flex-start; }
.sheet-signout:hover { background: var(--surface-hover); }
#txns th, .table-scroll th { top: var(--header-h, 4rem); }
.table-scroll th { top: 0; }
.bulkbar { top: calc(var(--header-h, 4rem) + .25rem); }
th .sorthead { display: inline-flex; align-items: center; gap: .25rem; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
th .sorthead:hover { color: var(--text-primary); }
.org-select { min-height: 40px; }
@media (max-width: 700px) {
  header a.signout, header #orgname { display: none; }
  header { gap: .5rem; }
}
@media (hover: none) { button:hover:not(:disabled) { background: var(--surface-raised); border-color: var(--border-control); } button.primary:hover:not(:disabled) { background: var(--clay-500); box-shadow: var(--shadow-sm); } }

.tile-button { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; text-align: left; }

/* the select chevron needs a darker stroke on light surfaces */
:root[data-theme="light"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236A6250' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236A6250' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } }

@media (max-width: 700px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile { padding: .8rem .9rem; }
  .tile-value { font-size: 1.45rem; }
  .tile-label { font-size: .8rem; }
  .tile-sub { font-size: .78rem; }
}
.month-nav .icon-btn, .month-nav button[data-icon] { min-width: 44px; }

header a.signout { color: var(--text-secondary); }
header a.signout:hover { color: var(--text-primary); }

/* ---- Balances tab ------------------------------------------------------------------------------------------------ */
.bal-controls { display: grid; gap: .75rem; }
.acct-filter { position: relative; }
.acct-filter summary { cursor: pointer; padding: .45rem .8rem; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-sunken); font-weight: 600; font-size: .95rem; list-style: none; min-height: 32px; display: inline-flex; align-items: center; }
.acct-filter summary::-webkit-details-marker { display: none; }
.acct-menu { position: absolute; z-index: 8; top: calc(100% + .35rem); left: 0; min-width: 16rem; max-height: 18rem; overflow: auto; padding: .6rem .75rem; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: ns-scale-in var(--duration-base) var(--ease-out) backwards; transform-origin: top left; }
.acct-actions { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.acct-list { display: grid; gap: .15rem; margin-top: .4rem; }
.acct-list .radio { display: flex; gap: .45rem; align-items: center; padding: .25rem 0; font-size: .95rem; }
.bal-table td.est, .bal-table td.partial { font-style: italic; }
.bal-table td.est { color: var(--text-secondary); }
.bal-table td.strong { font-weight: 600; }
.bal-table .sticky-col { position: sticky; left: 0; z-index: 1; background: var(--surface-raised); text-align: left; white-space: nowrap; font-weight: 600; }
.bal-table tbody tr:hover .sticky-col { background: var(--surface-hover); }
.bal-table th.num { white-space: normal; min-width: 7.5rem; }
@media (max-width: 700px) { .acct-filter { position: static; } .acct-menu { position: absolute; left: 0; right: 0; top: auto; margin-top: .35rem; max-height: 60vh; } .bal-controls { position: relative; } }
/* touch: every control in the Balances tab is at least 44px tall */
@media (max-width: 700px), (pointer: coarse) {
  .acct-filter summary, .bal-controls select, .bal-controls input[type=month], .acct-actions .link, .bal-controls .inline, #balances-body details > summary { min-height: 44px; }
  .acct-actions .link, #balances-body .chart .link, .bal-controls label.inline { display: inline-flex; align-items: center; }
  .acct-list .radio { min-height: 44px; padding: .25rem 0; }
  .acct-list input[type=checkbox], .bal-controls input[type=checkbox] { width: 22px; height: 22px; }
  #balances-body .chart .link { min-height: 44px; }
  #balances-body td select { min-height: 44px; }
}
.bal-controls { margin-bottom: .75rem; }

/* ---- Ask: steps, proposals (manual mode), follow-up questions --------------------------------------------------------- */
.steps-log { margin: 0 0 .75rem; font-size: .9rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: .4rem .7rem; background: var(--surface-sunken); }
.steps-log summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.steps-log ol { margin: .5rem 0 .2rem; padding-left: 1.2rem; display: grid; gap: .25rem; }
.step-sum { color: var(--text-primary); }
.proposal { margin: .75rem 0; padding: .9rem 1rem; border: 1px solid var(--border-accent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--clay-500) 8%, var(--surface-raised)); display: grid; gap: .6rem; animation: ns-scale-in var(--duration-base) var(--ease-out) backwards; }
.proposal.applied { border-color: var(--pos-text); background: color-mix(in srgb, var(--pos-text) 10%, transparent); }
.proposal.cancelled { border-color: var(--border-default); background: var(--surface-sunken); }
.proposal-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.proposal-head .badge { margin-left: 0; }
.proposal-merchants { display: grid; gap: .15rem; }
.proposal-merchants .radio { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.proposal-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.proposal table.compact td { padding: .25rem .5rem; font-size: .88rem; }
.question-card { margin: .75rem 0; padding: .8rem 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-raised); }
.question-text { margin: 0 0 .5rem; font-weight: 600; }
.question-card .chips { justify-content: flex-start; margin-top: .25rem; }

/* chart data tables scroll sideways inside their card on phones (they are the accessible version of the chart) */
.chart .table-scroll { max-width: 100%; }
.chart-table th { text-align: left; }
.chart-table th:not(:first-child), .chart-table td.num { text-align: right; }
th.num .sorthead { display: flex; justify-content: flex-end; width: 100%; }
.proposal .badge.warn { color: var(--warn-text); }
.proposal.applied .badge { color: var(--pos-text); background: color-mix(in srgb, var(--pos-text) 8%, var(--surface-raised)); border-color: color-mix(in srgb, var(--pos-text) 45%, transparent); }
.proposal .muted { color: var(--text-secondary); }
/* number boxes wide enough to show their placeholder ("Monthly $", "Amount", "Balance $") */
.rule-form input[type=number], .amount-input { width: 8.5rem; }
.budget-add .amount-input { width: 9rem; }
td .amount-input { width: 6.5rem; }
.card > table + .rule-form, .card > .table-scroll + .rule-form, .card > .table-scroll + form { margin-top: .9rem; }

/* QA round 3 (safe-area: main content, header, tab bar and sheet each add the side insets themselves) */
main { padding-left: max(1.25rem, env(safe-area-inset-left, 0px)); padding-right: max(1.25rem, env(safe-area-inset-right, 0px)); }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) { main { padding-left: max(.85rem, env(safe-area-inset-left, 0px)); padding-right: max(.85rem, env(safe-area-inset-right, 0px)); } }
.badge.warn { color: color-mix(in srgb, var(--warn-text) 78%, var(--text-primary)); }
.proposal .badge.warn, .proposal.applied .badge { color: color-mix(in srgb, var(--warn-text) 78%, var(--text-primary)); }
.proposal.applied .badge { color: color-mix(in srgb, var(--pos-text) 80%, var(--text-primary)); }
.bal-table th.sticky-col { background: var(--surface-sunken); }
.bal-table tbody tr:hover .sticky-col { background: color-mix(in srgb, var(--surface-hover) 55%, var(--surface-raised)); }
#q { min-width: 17rem; }
.tabbar { padding-left: max(.25rem, env(safe-area-inset-left, 0px)); padding-right: max(.25rem, env(safe-area-inset-right, 0px)); }
.sheet { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); }
header { padding-left: max(1.25rem, env(safe-area-inset-left, 0px)); padding-right: max(1.25rem, env(safe-area-inset-right, 0px)); }
.retry-box { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }