/* ==========================================================================
   Bark Budget — design system
   Style: calm, data-dense finance dashboard. Neutral cool surfaces, one teal-blue
   accent, and colour reserved for meaning (green = money in / under budget,
   red = money out / over budget, amber = pending / warning).
   Type: IBM Plex Sans for UI + headings, IBM Plex Mono for money amounts only (self-hosted, see section 0).

   Theming: every colour token is defined once with light-dark(). The theme is
   System (follows the OS) by default; theme.js sets <html data-theme="light|dark">
   when the user picks one explicitly.
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted; IBM Plex, SIL Open Font License 1.1: see static/fonts/README.md) ---------- */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light dark;

  /* surfaces + text */
  --ground:     light-dark(#F5F7FA, #0B1220);
  --surface:    light-dark(#FFFFFF, #111A2B);
  --surface-2:  light-dark(#EDF1F6, #1A2538);
  --ink:        light-dark(#0F172A, #E6EDF7);
  --muted:      light-dark(#475569, #A8B5C8);
  --faint:      light-dark(#5B6B80, #8A9BB2);
  --border:     light-dark(#E2E8F0, #243049);
  --border-strong: light-dark(#CBD5E1, #36466A);

  /* accent (interactive) */
  --accent:      light-dark(#0E7490, #38BDF8);
  --accent-ink:  light-dark(#0B5A73, #7DD3FC);   /* accent used as text on --accent-soft */
  --accent-soft: light-dark(#E0F2F7, #0F2A3D);
  --on-accent:   light-dark(#FFFFFF, #04222E);

  /* semantic */
  --pos:      light-dark(#15803D, #4ADE80);
  --pos-soft: light-dark(#DCFCE7, #12301F);
  --neg:      light-dark(#B91C1C, #F87171);
  --neg-soft: light-dark(#FEE2E2, #3A1818);
  --warn:      light-dark(#B45309, #FBBF24);
  --warn-soft: light-dark(#FEF3C7, #3A2C0B);
  --on-neg:    light-dark(#FFFFFF, #2A0A0A);

  --shadow: light-dark(0 1px 2px rgba(15,23,42,.05), 0 1px 2px rgba(0,0,0,.4));
  --scrim:  rgba(8,12,22,.55);

  /* type */
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --fs-xs: 11.5px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 26px;

  /* shape + spacing (4px grid) */
  --radius: 10px; --radius-sm: 7px; --radius-pill: 99px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --dur: 150ms;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
button { font-family: var(--sans); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num, .amt { font-family: var(--mono); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- 3. Layout: sidebar + main ---------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
/* The sidebar is pinned to the viewport: brand on top, the menu scrolls if it must, and the account / theme / sign-out
   footer always sits at the bottom-left of the browser window. */
aside { background: var(--surface); border-right: 1px solid var(--border); padding: var(--sp-5) var(--sp-4) var(--sp-3);
  display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; height: 100dvh; align-self: start; overflow: hidden; }
aside .brand { flex: none; }
.sidescroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding-right: 2px; }
.sidefoot { flex: none; display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
main { padding: 22px 26px 40px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--sp-1); }
.brand .mark { width: 30px; height: 30px; flex: none; background: var(--ink);
  -webkit-mask: url(../brand/logo-mark-tight.svg) center / contain no-repeat; mask: url(../brand/logo-mark-tight.svg) center / contain no-repeat; }
.brand h1 { font-size: 18px; font-weight: 700; margin: 0; }

nav { display: flex; flex-direction: column; gap: 3px; }
nav button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--muted); border: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; text-align: left; width: 100%; transition: background var(--dur), color var(--dur); }
nav button:hover:not(.active) { background: var(--surface-2); color: var(--ink); }
nav button.active { background: var(--accent-soft); color: var(--accent-ink); }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.navlabel { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 0 6px; margin-bottom: 6px; }
.typefilter { width: 100%; font-weight: 600; margin-bottom: 6px; }
.scopehint { font-size: 10.5px; color: var(--faint); margin: 0 2px 10px; line-height: 1.3; }
.acct { padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 2px; cursor: pointer; background: var(--surface); width: 100%; text-align: left; color: var(--ink); transition: border-color var(--dur); }
.acct + .acct { margin-top: 8px; }
.acct:hover { border-color: var(--border-strong); }
.acct.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.acct .an { font-weight: 600; font-size: var(--fs-sm); }
.acct .ai { font-size: var(--fs-xs); color: var(--faint); }
.acct .ab { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-base); font-weight: 600; margin-top: 3px; }
.acct .ab.neg { color: var(--neg); }
.acct .atag { align-self: flex-start; margin-top: 4px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--muted); background: var(--surface-2); padding: 2px 7px; border-radius: var(--radius-pill); }

/* theme switch (System / Light / Dark) */
.themesw { display: flex; align-items: center; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: var(--radius); }
.themegroup { display: flex; flex: 3; gap: 2px; }
.themesw .sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 3px; flex: none; }
.themesw form { flex: 1; display: flex; margin: 0; }
.themesw form button { flex: 1; }
.themesw .signout:hover { color: var(--neg); }
.acctlink { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 7px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--muted); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; transition: background var(--dur), color var(--dur); }
.acctlink:hover { background: var(--surface-2); color: var(--ink); }
.acctlink .uemail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acctlink .atag { flex: none; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--accent-ink);
  background: var(--accent-soft); padding: 1px 6px; border-radius: var(--radius-pill); }
.themesw button { flex: 1; display: grid; place-items: center; height: 30px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; transition: background var(--dur), color var(--dur); }
.themesw button:hover { color: var(--ink); }
.themesw button[aria-pressed="true"] { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow); }

/* ---------- 4. Page header + controls ---------- */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.head h2 { font-size: var(--fs-xl); font-weight: 700; margin: 0 0 2px; letter-spacing: -.02em; }
.head p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.controls, .savebar { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.savebar { gap: var(--sp-3); }
.scope { display: flex; align-items: center; gap: 7px; }
.scope label { font-size: 12px; color: var(--faint); font-weight: 600; }
#scopesel { font-weight: 600; min-width: 170px; }
h3.sect { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 26px 2px 10px; }
h3.sect:first-of-type { margin-top: 6px; }

/* ---------- 5. Form controls ---------- */
select, input[type=search], input[type=text], input[type=password], input[type=number], input[list] {
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 10px; transition: border-color var(--dur);
}
select:hover, input:hover { border-color: var(--faint); }
input[type=search] { min-width: 200px; }
input::placeholder { color: var(--faint); }
.field { width: 100%; margin: 6px 0 10px; padding: 9px 10px; }
.flabel { font-size: 12px; font-weight: 600; color: var(--muted); }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; white-space: nowrap; cursor: pointer; }
.chk input { cursor: pointer; accent-color: var(--accent); }

/* buttons */
.btn, .primary, .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn, .primary { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 8px 15px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: filter var(--dur); }
.btn:hover:not(:disabled), .primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn:disabled, .primary:disabled { opacity: .55; cursor: default; }
.ghost { border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); border-radius: var(--radius-sm); padding: 6px 11px; font-size: 12px; cursor: pointer; transition: color var(--dur), border-color var(--dur); }
.ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--faint); }
.ghost:disabled { opacity: .5; cursor: default; }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; }
.btnrow { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* toggle switch */
.toggle { position: relative; width: 38px; height: 22px; flex: none; }
.toggle input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 1; }
.toggle span { position: absolute; inset: 0; background: var(--border-strong); border-radius: var(--radius-pill); transition: background var(--dur); }
.toggle span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left var(--dur); }
.toggle input:checked + span { background: var(--accent); }
.toggle input:checked + span::after { left: 19px; }
.toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 6. Surfaces ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel + .panel { margin-top: var(--sp-5); }
.panel h3 { font-size: var(--fs-md); font-weight: 600; margin: 0; padding: var(--sp-4); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px var(--sp-4); box-shadow: var(--shadow); }
.tile .k { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tile .v { font-size: var(--fs-2xl); font-weight: 600; margin-top: 6px; letter-spacing: -.02em; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tile .s { font-size: 12px; color: var(--faint); margin-top: 3px; }
.tile.income .v { color: var(--pos); }
.tile .v.neg { color: var(--neg); }
.grid2 { display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-5); align-items: start; }
.tiles.two { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
.foot { padding: 11px var(--sp-4); color: var(--faint); font-size: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.empty { max-width: 520px; margin: 12vh auto; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.empty h2 { margin: 0 0 8px; }
.empty code { font-family: var(--mono); background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }
.empty .ghost { margin-top: var(--sp-4); padding: 9px var(--sp-4); }
.setup { max-width: 520px; margin: 10vh auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.setup h2 { margin: 0 0 6px; }

/* ---------- 7. Text utilities (replace inline styles) ---------- */
.u-faint { color: var(--faint); }
.u-muted { color: var(--muted); }
.u-note { font-size: 12px; color: var(--faint); }
.u-center { text-align: center; }
.u-pad { padding: 22px var(--sp-4); color: var(--faint); }
.u-pad-sm { padding: 6px 2px; font-size: 12px; color: var(--faint); }
.u-hint { margin: 14px 2px 0; font-size: 12px; color: var(--faint); }
.u-w660 { max-width: 660px; } .u-w720 { max-width: 720px; } .u-w760 { max-width: 760px; } .u-w920 { max-width: 920px; }
.u-mono-faint { font-family: var(--mono); font-size: 12px; color: var(--faint); font-weight: 500; }
.u-sans-faint { font-size: 12px; color: var(--faint); font-weight: 500; }
.u-dim { opacity: .4; }
.u-minw { min-width: 700px; }
.u-w34 { display: inline-block; width: 34px; }
.u-block-input { width: 100%; margin-bottom: var(--sp-3); }
.u-lead { color: var(--muted); margin: 0 0 var(--sp-4); }
.u-small-muted { cursor: pointer; color: var(--muted); font-size: 12px; }
.u-spaced { margin-top: var(--sp-5); }
.u-mb { margin-bottom: var(--sp-3); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pad-4 { padding: var(--sp-4); }

/* ---------- 8. Category bars ---------- */
.catgroup { border-bottom: 1px solid var(--border); } .catgroup:last-child { border-bottom: 0; }
.cat { padding: var(--sp-3) var(--sp-4); }
.cat.sub { padding: 8px var(--sp-4) 8px 30px; position: relative; }
.cat.sub::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.cat.sub .nm { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.cat.unsplit .nm { font-style: italic; }
.cat .r1 { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin-bottom: 7px; gap: 10px; }
.cat .r1 .nm { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cat .r1 .am { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.cat .r1 .am b { color: var(--ink); }
.cat.over .am b { color: var(--neg); }
.cat.sub .bar { height: 5px; }
.swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.bar { height: 7px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--radius-pill); }
.bar > i.over { background: var(--neg); }

/* ---------- 9. Tables ---------- */
table { width: 100%; border-collapse: collapse; } .tblwrap { overflow-x: auto; }
th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: left; padding: var(--sp-3) 14px; border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none; }
th.sortable { cursor: pointer; } th.sortable:hover { color: var(--ink); }
th.r, td.r { text-align: right; }
th .caret { opacity: .4; font-size: 9px; } th.sorted .caret { opacity: 1; color: var(--accent); }
td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: middle; }
tbody tr:hover { background: var(--surface-2); } tbody tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 700; border-top: 2px solid var(--border-strong); border-bottom: 0; }
.merch { font-weight: 600; } .desc { color: var(--faint); font-size: var(--fs-xs); }
.amt { font-weight: 600; white-space: nowrap; } .amt.pos { color: var(--pos); }
.pendtag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); background: var(--warn-soft); padding: 1px 6px; border-radius: var(--radius-pill); vertical-align: middle; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: border-color var(--dur); }
.pill:hover { border-color: var(--border-strong); }
.pill .edit { opacity: .45; font-size: 10px; }
.catcell { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* ---------- 10. Charts + chips ---------- */
.chartbox { padding: var(--sp-4); } .chartwrap { position: relative; height: 340px; }
.sankeywrap { position: relative; height: 440px; padding: 14px var(--sp-4) 2px; }
.catchips, .legend { display: flex; flex-wrap: wrap; gap: 6px; }
.catchips { padding: 2px var(--sp-4) var(--sp-4); } .legend { padding: 0 var(--sp-4) 14px; }
.catchip, .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; color: var(--ink); transition: border-color var(--dur), background var(--dur); }
.catchip:hover { border-color: var(--accent); }
.catchip.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.chip.off { opacity: .5; text-decoration: line-through; }
.catchip .sw, .chip .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.charttop { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--sp-4) 6px; gap: var(--sp-3); flex-wrap: wrap; }
.charttop .tot { font-size: var(--fs-lg); font-weight: 600; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.charttop .hint { font-size: 12px; color: var(--faint); }

/* category picker menu */
#catmenu { position: absolute; z-index: 50; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 6px; min-width: 210px; max-height: 70vh; overflow: auto; display: none; }
#catmenu .mi { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); }
#catmenu .mi.sub { padding-left: 24px; font-size: 12.5px; color: var(--muted); }
#catmenu .mi:hover { background: var(--surface-2); }
#catmenu .mi.cur { font-weight: 700; }
#catmenu .mi.cur::after { content: '✓'; margin-left: auto; color: var(--accent); }
#catmenu .applyrow { border-top: 1px solid var(--border); margin-top: 6px; padding: 9px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
#catmenu .applyrow label { cursor: pointer; }

/* ---------- 11. Budget editor ---------- */
.brow { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); border-bottom: 1px solid var(--border); }
.brow:last-child { border-bottom: 0; }
.brow.parent { background: var(--surface-2); }
.brow .nm { flex: 1; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.brow.sub { padding-left: 34px; position: relative; }
.brow.sub::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.brow.sub .nm { font-weight: 500; color: var(--muted); }
.brow .tag { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.brow .rollup { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.brow .rollup small { font-weight: 500; color: var(--faint); font-family: var(--sans); }
.dh { cursor: grab; color: var(--faint); line-height: 1; padding: 2px 4px; border-radius: 6px; user-select: none; flex: none; display: inline-grid; place-items: center; }
.dh:hover { color: var(--ink); background: var(--surface-2); } .dh:active { cursor: grabbing; }
.promote, .del { border: 0; background: none; color: var(--faint); cursor: pointer; line-height: 1; padding: 4px 6px; border-radius: 6px; flex: none; display: inline-grid; place-items: center; transition: color var(--dur), background var(--dur); }
.promote:hover { color: var(--accent-ink); background: var(--accent-soft); }
.del:hover { color: var(--neg); background: var(--neg-soft); }
.del.locked { visibility: hidden; }
.catrow > .sublist { min-height: 4px; }
#brows > .catrow + .catrow { border-top: 1px solid var(--border); }
.sortable-ghost { opacity: .35; } .sortable-chosen { background: var(--accent-soft); } .sortable-drag { box-shadow: var(--shadow); border-radius: 8px; }
.dollar { position: relative; }
.dollar::before { content: '$'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); font-family: var(--mono); font-size: var(--fs-sm); }
.dollar input { width: 130px; padding: 8px 10px 8px 22px; font-family: var(--mono); font-size: var(--fs-sm); text-align: right; }
.addrow { display: flex; gap: 10px; align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border-top: 1px solid var(--border); flex-wrap: wrap; }
.addrow input[type=text] { flex: 1; min-width: 180px; max-width: 280px; }

/* ---------- 12. Rules editor ---------- */
.rrow { display: grid; grid-template-columns: 210px 1fr 160px 82px 34px; gap: 10px; align-items: center; padding: 10px var(--sp-4); border-bottom: 1px solid var(--border); }
.rrow.rhead { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.rrow.add { background: var(--surface-2); border-bottom: 0; }
.rrow select, .rrow input { width: 100%; padding: 7px 9px; border-radius: var(--radius-sm); }
.rrow input[type=number] { font-family: var(--mono); text-align: right; }
.rrow .del { justify-self: center; } .rrow .primary { width: 100%; padding: 8px 0; }

/* ---------- 13. Banks and Accounts ---------- */
.arow { display: flex; align-items: center; gap: 14px; padding: 13px var(--sp-4); border-bottom: 1px solid var(--border); }
.arow:last-child { border-bottom: 0; }
.arow .ainfo { flex: 1; min-width: 0; }
.arow .an { font-weight: 600; } .arow .as { font-size: 12px; color: var(--faint); }
.arow .abal { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.arow input[list] { width: 170px; }
.arow.off .ainfo, .arow.off .abal { opacity: .5; }
.conn { max-width: 760px; }
.conn + .conn { margin-top: var(--sp-4); }
.conn .chead { display: flex; align-items: center; gap: var(--sp-3); padding: 14px var(--sp-4); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.conn .chead:last-child { border-bottom: 0; }
.conn .logo { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: var(--surface-2); flex: none; }
.conn .cname { font-weight: 600; font-size: var(--fs-md); }
.conn .cmeta { font-size: 12px; color: var(--faint); }
.conn .cact { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.st { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); text-transform: capitalize; }
.st.active { background: var(--pos-soft); color: var(--pos); }
.st.expiring, .st.pending { background: var(--warn-soft); color: var(--warn); }
.st.expired, .st.invalidated, .st.revoked { background: var(--neg-soft); color: var(--neg); }
.syncbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 9px 14px; margin-bottom: var(--sp-4); border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); font-size: var(--fs-sm); font-weight: 500; }
.syncbar.ok { border-color: var(--pos); background: var(--pos-soft); }
.syncbar.err { border-color: var(--neg); background: var(--neg-soft); color: var(--neg); }
.synclog { margin: -8px 0 var(--sp-4); padding: var(--sp-3) 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
.saved { color: var(--pos); font-size: var(--fs-sm); font-weight: 600; opacity: 0; transition: opacity .2s; } .saved.show { opacity: 1; }
.formerr { color: var(--neg); font-size: var(--fs-sm); margin: 8px 0 0; }

/* modal + institution picker */
.modalbg { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: 60; padding: var(--sp-4); }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0,0,0,.3); width: min(520px, 100%); max-height: 86vh; display: flex; flex-direction: column; }
.modal .mh { padding: var(--sp-4) 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal .mh h3 { margin: 0; }
.modal .mb { padding: 14px 18px; overflow: auto; }
.inst { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: border-color var(--dur); }
.inst + .inst { margin-top: 8px; }
.inst:hover:not(:disabled) { border-color: var(--accent); } .inst:disabled { opacity: .5; cursor: default; }
.inst img { width: 30px; height: 30px; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface-2); }
.inst .in { font-weight: 600; } .inst .ic { font-size: var(--fs-xs); color: var(--faint); }

/* ---------- 14. Responsive ---------- */
@media (max-width: 1080px) { .grid2 { grid-template-columns: 1fr; } .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  aside { position: static; height: auto; align-self: stretch; overflow: visible; }
  .sidescroll { overflow: visible; }
  aside { border-right: 0; border-bottom: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  nav { flex-direction: row; overflow-x: auto; }
  nav button { width: auto; white-space: nowrap; }
  main { padding: var(--sp-4); }
  .sankeywrap { height: 340px; }
  .rrow { grid-template-columns: 1fr 1fr; }
  .arow { flex-wrap: wrap; }
}

/* ---------- 15. Sign-in pages + user bar ---------- */
.authwrap { min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: var(--sp-5); padding: var(--sp-4); }
.authbrand { justify-content: center; }
.authcard { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.authcard h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); }
.authcard .u-lead code { font-family: var(--mono); background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.authbtn { width: 100%; padding: 10px 15px; margin-top: var(--sp-2); }
.authlinks { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); text-align: center; }
.authlinks a, .authcard a { color: var(--accent-ink); }
.authinfo { color: var(--pos); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }

/* ---------- 16. Administration + account dialog ---------- */
.btnrow.end { justify-content: flex-end; }
.u-numin { width: 80px; }
.ghost.danger { color: var(--neg); border-color: var(--neg); }
.ghost.danger:hover:not(:disabled) { background: var(--neg-soft); color: var(--neg); border-color: var(--neg); }
.btn.danger { background: var(--neg); border-color: var(--neg); color: var(--on-neg); }
.subhead { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-md); font-weight: 600; }
.dangerzone { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.dangerzone .subhead { color: var(--neg); margin-top: 0; }
.authinfo:empty, .formerr:empty { display: none; }

/* ---------- 17. Email settings form ---------- */
[hidden] { display: none !important; }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-3); }
@media (max-width: 720px) { .formgrid { grid-template-columns: 1fr; } }
#mail_msg { margin-top: var(--sp-3); }
#mail_msg:empty { display: none; }
.pad-4 a { color: var(--accent-ink); }

/* ---------- 18. Sign-in code page ---------- */
.codeinput { font-family: var(--mono); font-size: 22px; letter-spacing: .3em; text-align: center; text-transform: uppercase; }
.inlineform { margin: var(--sp-3) 0 0; text-align: center; }

/* Six-box code field: the real input stays on top (invisible) so paste, autofill and screen readers work. */
.codewrap { position: relative; display: flex; justify-content: center; gap: 8px; margin: 6px 0 var(--sp-2); }
/* The real input is visually hidden (1px, clipped) rather than stretched over the boxes. A full-size field makes password
   managers draw their icon over the boxes; a 1px field gives them nothing to attach to. It is still focusable and in the
   accessibility tree, so typing, pasting, autofill and screen readers work as before. */
.codewrap.enhanced .codeinput { position: absolute; left: 50%; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; font-size: 16px; pointer-events: none; }
.codebox { width: 46px; height: 56px; display: grid; place-items: center; font: 600 26px/1 var(--mono); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; transition: border-color var(--dur), box-shadow var(--dur); }
.codebox:nth-child(3) { margin-right: 10px; }                 /* groups of three: ABC  234 */
.codebox.filled { border-color: var(--faint); }
.codebox.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.authbtn:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 380px) { .codebox { width: 38px; height: 48px; font-size: 22px; } .codewrap { gap: 6px; } }