/* Project Budget — concatenated from src/assets/css/partials/ */
/* ---- reset.css ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  min-height: 100vh;
  line-height: var(--lh-base);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 700;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

[x-cloak] { display: none !important; }


/* ---- tokens.css ---- */
/* Project Budget design tokens.

   Palette + typography mirror Project Broadsheet (paper / ink / vermillion /
   slate / gold) so the user's projects share an identity. Variable NAMES
   stay project-local (--bg, --fg, --accent, etc.) so the rest of the CSS
   doesn't need to change.

   Canonical breakpoints (do not introduce ad-hoc values):
     360 / 480 / 600 / 768 / 820 / 1024 / 1180 / 1280
   CSS custom properties cannot be used inside @media queries — the scale
   above is the contract for every responsive rule in the project.
*/

:root {
  /* Typography — Broadsheet stack. */
  --font-display:  "Playfair Display", Georgia, "Times New Roman", serif;
  --font-headline: "Lora", Georgia, "Times New Roman", serif;
  --font-body:     "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui:       "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.625rem;
  --fs-4xl:  3.25rem;

  --lh-tight: 1.2;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  --max-width:        1180px;
  --max-width-narrow: 720px;
  --container-pad:    clamp(1rem, 3vw, 2rem);

  --radius: 0;
  --radius-input: 0;

  /* Broadsheet light palette. */
  --paper:        #f4f1eb;
  --paper-raised: #fbf8f2;
  --paper-sunken: #ebe6db;
  --ink:          #1a1a1a;
  --ink-soft:     #2c2c2c;
  --muted:        #5c544a;
  --rule:         #8b6f47;
  --vermillion:   #c0392b;
  --vermillion-d: #9e2d22;
  --slate:        #2c5f8a;
  --slate-d:      #1e4462;
  --gold:         #b8862c;

  /* Project-local aliases used by the rest of the CSS. */
  --bg:           var(--paper);
  --bg-elevated:  var(--paper-raised);
  --bg-alt:       var(--paper-sunken);
  --fg:           var(--ink);
  --fg-muted:     var(--muted);
  /* --fg-subtle bumped from #6b6457 (~4.1:1 on --paper) to #524b43
     (~5.9:1) so field hints, eyebrow labels, and footer fine-print
     all clear WCAG 2.2 AA (4.5:1) for normal text. */
  --fg-subtle:    #524b43;
  --border:       rgba(26, 26, 26, 0.16);
  --border-soft:  rgba(26, 26, 26, 0.08);
  --accent:       var(--vermillion);
  --accent-hover: var(--vermillion-d);
  --accent-soft:  rgba(192, 57, 43, 0.10);
  --link:         var(--slate);
  --link-hover:   var(--slate-d);
  --danger:       var(--vermillion-d);
  --warn:         var(--gold);
  --ok:           #2f6e4d;

  /* D3 chart palette — read by charts/theme-colors.js. */
  --chart-1: #c0392b;
  --chart-2: #2c5f8a;
  --chart-3: #b8862c;
  --chart-4: #2f6e4d;
  --chart-5: #8b6f47;
  --chart-6: #5c544a;

  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06), 0 1px 4px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 2px 4px rgba(26, 26, 26, 0.08), 0 6px 16px rgba(26, 26, 26, 0.08);
  --shadow-lg: 0 4px 8px rgba(26, 26, 26, 0.10), 0 16px 48px rgba(26, 26, 26, 0.12);

  --t-fast: 150ms ease;
  --t-base: 200ms ease;
}

[data-theme="dark"] {
  /* Broadsheet dark palette. */
  --paper:        #12100e;
  --paper-raised: #1c1a17;
  --paper-sunken: #0a0908;
  --ink:          #e8e3d6;
  --ink-soft:     #d6d0c2;
  --muted:        #b3aba0;
  --rule:         #c2a878;
  --vermillion:   #e05a4b;
  --vermillion-d: #c0392b;
  --slate:        #6fa9d9;
  --slate-d:      #4e8dc0;
  --gold:         #d4a45a;

  --bg:           var(--paper);
  --bg-elevated:  var(--paper-raised);
  --bg-alt:       var(--paper-sunken);
  --fg:           var(--ink);
  --fg-muted:     var(--muted);
  --fg-subtle:    #908779;
  --border:       rgba(232, 227, 214, 0.18);
  --border-soft:  rgba(232, 227, 214, 0.10);
  --accent:       var(--vermillion);
  --accent-hover: var(--vermillion-d);
  --accent-soft:  rgba(224, 90, 75, 0.16);
  --link:         var(--slate);
  --link-hover:   var(--slate-d);
  --danger:       var(--vermillion);
  --warn:         var(--gold);
  --ok:           #6fbf95;

  --chart-1: #e05a4b;
  --chart-2: #6fa9d9;
  --chart-3: #d4a45a;
  --chart-4: #6fbf95;
  --chart-5: #c2a878;
  --chart-6: #b3aba0;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 4px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.40), 0 16px 48px rgba(0, 0, 0, 0.35);
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }


/* ---- base.css ---- */
html { font-family: var(--font-body); font-size: 17px; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
}

/* Inside the app shell, prefer DM Sans — serif body fonts feel
   literary for prose but slow down scanning of tables and inputs. */
body.layout-app {
  font-family: var(--font-ui);
  font-size: 1rem;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; }
h5, h6 { font-family: var(--font-headline); font-weight: 600; }
body.layout-app h1,
body.layout-app h2,
body.layout-app h3,
body.layout-app h4 { font-family: var(--font-display); }

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5, h6 { font-size: var(--fs-md); }

p { max-width: 70ch; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

/* WCAG 2.2 AA — every interactive element renders at >= 44x44 CSS pixels.
   Components that intentionally pack smaller controls opt out via
   [data-touch="compact"]. */
button:not([data-touch="compact"]),
input[type="submit"]:not([data-touch="compact"]),
input[type="button"]:not([data-touch="compact"]),
a.btn:not([data-touch="compact"]) {
  min-height: 44px;
  min-width: 44px;
}

/* <sup> inside flex containers — see CLAUDE.md mistake #6 */
sup {
  font-size: 0.55em;
  vertical-align: super;
  line-height: 0;
  font-weight: inherit;
  display: inline;
  position: relative;
  top: -0.3em;
}

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100px;
  z-index: 9999;
  background: var(--accent);
  color: #fff;
  padding: var(--space-2xs) var(--space-sm);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-input);
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--space-sm); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.prose > * + * { margin-top: var(--space-md); }
.prose h2 { margin-top: var(--space-xl); }
.prose h3 { margin-top: var(--space-lg); }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li + li { margin-top: var(--space-2xs); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-alt);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-input);
}
.prose pre {
  background: var(--bg-alt);
  padding: var(--space-sm);
  border-radius: var(--radius-input);
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }

.changelog-entry { margin-top: var(--space-xl); }
.changelog-entry__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-sm);
}
.changelog-entry__header h2 { font-size: var(--fs-xl); margin: 0; }
.changelog-entry__date { color: var(--fg-muted); font-size: var(--fs-sm); margin: 0; font-variant-numeric: tabular-nums; }

/* Blog */
.post-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.post-list__item { padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-soft); }
.post-list__meta { color: var(--fg-muted); font-size: var(--fs-sm); margin-bottom: var(--space-2xs); }
.post-list__title { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--space-2xs); }
.post-list__title a { color: var(--fg); text-decoration: none; }
.post-list__title a:hover { color: var(--accent); }
.post-list__summary { color: var(--fg-muted); margin: 0; }
.post-list__feed { margin-top: var(--space-2xl); color: var(--fg-muted); font-size: var(--fs-sm); }

.post__header { margin-top: var(--space-lg); margin-bottom: var(--space-xl); border-bottom: 1px solid var(--border-soft); padding-bottom: var(--space-md); }
.post__title { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1.1; margin-bottom: var(--space-sm); }
.post__subtitle { color: var(--fg-muted); font-size: var(--fs-md); margin: 0; }
.post__meta { color: var(--fg-muted); font-size: var(--fs-sm); margin-bottom: var(--space-sm); }
.post__footer { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--border-soft); color: var(--fg-muted); font-size: var(--fs-sm); }

/* Human-readable sitemap */
.sitemap-columns {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  margin-top: var(--space-lg);
}
@media (min-width: 600px) { .sitemap-columns { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sitemap-columns { grid-template-columns: repeat(3, 1fr); } }
.sitemap-column h2 { font-family: var(--font-headline); font-size: var(--fs-lg); margin-bottom: var(--space-sm); }
.sitemap-column ul { list-style: none; padding: 0; }
.sitemap-column li { padding: 0.2rem 0; }
.sitemap-column a { color: var(--fg); text-decoration: none; font-size: var(--fs-sm); }
.sitemap-column a:hover { color: var(--accent); }


/* ---- layout.css ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--max-width-narrow); }

.section { padding-block: var(--space-2xl); }
.section--alt { background: var(--bg-alt); }
.section__lead { color: var(--fg-muted); font-size: var(--fs-md); max-width: 60ch; }

.grid { display: grid; gap: var(--space-md); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.flow > * + * { margin-top: var(--space-md); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* App shell — sidebar + handle + main.
   The sidebar width is driven by --app-sidebar-width so the resize JS
   can write to it without touching layout markup. Default 260px; clamps
   are enforced in JS (180px..480px). */
.layout-app { background: var(--bg-alt); --app-sidebar-width: 260px; }
.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - 5rem);
}
@media (min-width: 1024px) {
  .app-shell { grid-template-columns: var(--app-sidebar-width) 6px 1fr; }
}

.app-sidebar-handle { display: none; }
@media (min-width: 1024px) {
  .app-sidebar-handle {
    display: block;
    cursor: col-resize;
    background: var(--border-soft);
    transition: background var(--t-fast);
    user-select: none;
    touch-action: none;
  }
  .app-sidebar-handle:hover,
  .app-sidebar-handle:focus-visible,
  .app-sidebar-handle.is-dragging { background: var(--accent); }
}

.app-main {
  padding: var(--space-lg) var(--container-pad);
  max-width: var(--max-width);
  width: 100%;
  margin-inline: auto;
}

.app-page__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}
.app-page__title { font-size: var(--fs-2xl); }
.app-page__lead { color: var(--fg-muted); }

/* Mobile tighten — reduce vertical chrome on phones so primary content
   sits higher in the viewport. */
@media (max-width: 599px) {
  .app-main { padding: var(--space-md) var(--container-pad); }
  .app-page { gap: var(--space-md); }
  .app-page__header { margin-bottom: var(--space-sm); gap: var(--space-2xs); }
  .app-page__title { font-size: var(--fs-xl); }
}


/* ---- components.css ---- */
/* Buttons — every variant meets WCAG 2.2 AAA target size (44×44 CSS px)
   for the default size, and AA (24×24) for the small variant used inside
   dense table rows. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.7rem 1.25rem;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
}
.btn:hover { color: #fff; text-decoration: none; }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }

.btn--secondary { background: var(--bg-elevated); color: var(--fg); border-color: var(--border); }
.btn--secondary:hover { background: var(--bg-alt); color: var(--fg); }

/* Ghost keeps the lowest visual weight in a cluster but still reads as
   a button: muted border + muted text + clear hover lift so users
   recognize it as interactive next to a Delete-style filled button. */
.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-soft);
}
.btn--ghost:hover {
  background: var(--bg-alt);
  color: var(--accent);
  border-color: var(--border);
}

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: var(--danger); color: #fff; opacity: 0.9; }

.btn--sm {
  padding: 0.45rem 0.85rem;
  font-size: var(--fs-sm);
  min-height: 36px;
}

/* Inline-edit trigger — looks like text in a table cell but clickable to
   enter rename / annotate mode. Reused by snapshot labels and daily-backup
   notes on the Settings page. */
.inline-edit-trigger,
.snap-label-edit {
  display: inline-block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.25rem 0.4rem;
  margin: -0.25rem -0.4rem;
  color: inherit;
  font: inherit;
  cursor: text;
  border-radius: var(--radius);
  min-height: 1.5em;
}
.inline-edit-trigger:hover,
.snap-label-edit:hover {
  background: var(--bg-alt);
}
.inline-edit-trigger:focus-visible,
.snap-label-edit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.inline-edit-trigger--placeholder { color: var(--fg-muted); font-style: italic; }

/* Card */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  padding: var(--space-md);
  border-radius: var(--radius);
}
.card__title { font-size: var(--fs-lg); margin-bottom: var(--space-2xs); }
.card__body { color: var(--fg-muted); }

/* Inputs */
.input, .select, .textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: var(--fg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-muted); }
.field__hint { font-size: var(--fs-xs); color: var(--fg-subtle); }

/* Table */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th, .table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
.table th { font-weight: 600; color: var(--fg-muted); background: var(--bg-alt); }
.table tbody tr:hover { background: var(--bg-alt); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Any table inside a .card scrolls horizontally on narrow screens
   instead of forcing the whole page to overflow. The card wrap stays
   in place so the table doesn't escape its bounds. */
.card {
  /* let the table scroll without spilling out */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Badge */
.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.badge--warn { background: rgba(168, 107, 20, 0.12); color: var(--warn); }
.badge--danger { background: rgba(168, 52, 31, 0.12); color: var(--danger); }

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-input);
  color: var(--fg);
}
.theme-toggle:hover { background: var(--bg-alt); }
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }

/* Toast */
.toast-stack {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  z-index: 50;
  max-width: 360px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-md);
}
.toast--warn { border-left-color: var(--warn); }
.toast--danger { border-left-color: var(--danger); }
.toast__body { margin: 0; font-size: var(--fs-sm); flex: 1; }
.toast__close {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fg-muted);
  padding: 0;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-input);
  position: relative;
}
.toast__close::before {
  content: "";
  position: absolute;
  inset: -6px;
}
.toast__close:hover { color: var(--fg); background: var(--bg-alt); }
.toast__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Group collapse/expand toggle — chevron rotates to indicate state. */
.group-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  min-height: auto;
  min-width: auto;
}
.group-toggle:disabled { cursor: default; }
.group-toggle:not(:disabled):hover { color: var(--accent); }
.group-toggle__chevron {
  display: inline-block;
  transition: transform var(--t-fast);
  font-size: 0.75em;
  color: var(--fg-muted);
}
.group-toggle__chevron.is-collapsed { transform: rotate(-90deg); }

/* Tippy.js — Project Budget theme */
.tippy-box[data-theme~="projectbudget"] {
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--radius-input);
  font-size: var(--fs-xs);
  line-height: 1.4;
  padding: 4px 2px;
}
.tippy-box[data-theme~="projectbudget"] .tippy-arrow {
  color: var(--fg);
}
.tippy-box[data-theme~="projectbudget"] .tippy-content {
  padding: 4px 8px;
}

/* Hero */
.hero { padding-block: var(--space-3xl); }
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 600;
}
.hero__title {
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
  margin-top: var(--space-2xs);
  max-width: 22ch;
}
.hero__lead {
  margin-top: var(--space-md);
  font-size: var(--fs-md);
  color: var(--fg-muted);
  max-width: 60ch;
}
.hero__actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.hero__note {
  margin-top: var(--space-sm);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  max-width: 60ch;
}

/* Feature list */
.feature-list {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 768px) { .feature-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .feature-list { grid-template-columns: repeat(3, 1fr); } }

.feature {
  padding: var(--space-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
}
.feature__title { font-size: var(--fs-md); margin-bottom: var(--space-2xs); }
.feature__body { color: var(--fg-muted); font-size: var(--fs-sm); }


/* ---- nav.css ---- */
.site-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 30;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4rem;
}
/* App-mode header lays out three regions: hamburger | profile | actions.
   Grid keeps the profile centered even when actions are wider/narrower
   than the hamburger column. */
.site-header__inner--app {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-sm);
}
.site-header__brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  text-decoration: none;
  color: var(--fg);
  font-weight: 700;
}
.brand__mark {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: 0.04em;
}

/* Hamburger button — always visible in app mode, mobile-only in
   marketing mode (the horizontal nav covers desktop there). */
.site-header__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  border-radius: var(--radius-input);
}
.site-header__hamburger:hover { background: var(--bg-alt); color: var(--accent); }
.site-header__hamburger--mobile { display: inline-flex; }
@media (min-width: 1024px) { .site-header__hamburger--mobile { display: none; } }

/* Centered profile name link in the app header. Truncates on narrow
   screens so the hamburger and theme toggle stay anchored. */
.site-header__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--fg);
  min-width: 0;
  padding: 0.25rem var(--space-2xs);
  border-radius: var(--radius-input);
  transition: background var(--t-fast);
}
.site-header__profile:hover { background: var(--bg-alt); color: var(--accent); }
.site-header__profile-eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  font-weight: 600;
  line-height: 1;
}
.site-header__profile-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0.15rem;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px) { .site-header__profile-name { font-size: var(--fs-lg); } }

.site-nav { display: none; }
@media (min-width: 1024px) { .site-nav { display: block; } }

.site-nav__list {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}
.site-nav__link {
  text-decoration: none;
  color: var(--fg);
  font-weight: 500;
  font-size: var(--fs-sm);
  padding: 0.5rem 0;
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--accent); }
.site-nav__link[aria-current="page"]:not(.site-nav__link--cta) { color: var(--accent); }
/* CTA on its own active page: keep white text on accent bg — overriding to
   accent would collapse contrast to 1:1. */
.site-nav__link--cta {
  background: var(--accent);
  color: #fff;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
}
.site-nav__link--cta:hover { background: var(--accent-hover); color: #fff; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-2xs); }

/* Site-menu slide-out (shared between marketing + app headers). Always
   reachable via the hamburger button. */
.site-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--t-base);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.site-menu.is-open { transform: translateX(0); }
.site-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.45);
  z-index: 99;
}
.site-menu__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-soft);
}
.site-menu__brand {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0;
}
.site-menu__close {
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-input);
}
.site-menu__close:hover { background: var(--bg-alt); color: var(--fg); }
.site-menu__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.site-menu__group-label {
  margin: 0;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  font-weight: 600;
}
.site-menu__list { list-style: none; padding: 0; margin: 0 0 var(--space-sm); }
.site-menu__link {
  display: block;
  padding: 0.55rem 0.65rem;
  color: var(--fg);
  text-decoration: none;
  font-size: var(--fs-sm);
  border-left: 3px solid transparent;
}
.site-menu__link:hover { background: var(--bg-alt); color: var(--accent); border-left-color: var(--accent); }

/* Header search button — same footprint as the hamburger / theme toggle. */
.site-header__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  border-radius: var(--radius-input);
}
.site-header__search:hover { background: var(--bg-alt); color: var(--accent); }

/* Search modal — lazy Pagefind UI. The [hidden] attribute is the source
   of truth; the layout rules only apply when not hidden so the modal
   doesn't intercept clicks while collapsed. */
.search-modal[hidden] { display: none !important; }
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
}
.search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, 0.55);
}
.search-modal__panel {
  position: relative;
  z-index: 1;
  width: min(640px, 92vw);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.search-modal__head {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-soft);
}
.search-modal__icon { color: var(--fg-muted); flex-shrink: 0; }
.search-modal__input {
  flex: 1;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--fg);
  outline: none;
  padding: 0.4rem 0;
}
.search-modal__close {
  background: none;
  border: 0;
  color: var(--fg-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-input);
}
.search-modal__close:hover { background: var(--bg-alt); color: var(--fg); }
.search-modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.search-modal__body {
  overflow-y: auto;
  padding: var(--space-sm) 0;
}
.search-modal__hint {
  padding: var(--space-md);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  margin: 0;
}
.search-modal__hint kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--bg-alt);
}
.search-modal__results { list-style: none; padding: 0; margin: 0; }
.search-result {
  display: block;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: var(--fg);
  border-bottom: 1px solid var(--border-soft);
}
.search-result:hover { background: var(--bg-alt); }
.search-result__title {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--fs-md);
  margin: 0 0 var(--space-3xs);
  color: var(--fg);
}
.search-result__excerpt {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0 0 var(--space-3xs);
}
.search-result__excerpt mark {
  background: rgba(184, 134, 44, 0.25);
  color: inherit;
  padding: 0 2px;
}
.search-result__url {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  margin: 0;
  font-family: var(--font-mono);
}

/* Footer */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  padding-block: var(--space-xl);
  margin-top: var(--space-2xl);
}
.site-footer__inner {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr auto; }
}
.site-footer__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; }
.site-footer__tagline { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: var(--space-3xs); }
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
}
.site-footer__nav a { color: var(--fg); text-decoration: none; font-size: var(--fs-sm); }
.site-footer__nav a:hover { color: var(--accent); }
.site-footer__copy {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}
.site-footer__copy a { color: var(--fg-subtle); text-decoration: underline; }

/* App sidebar */
.app-sidebar {
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-soft);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);

  position: fixed;
  inset: 0 30% 0 0;
  z-index: 25;
  transform: translateX(-100%);
  transition: transform var(--t-base);
  overflow-y: auto;
}
.app-sidebar.is-open { transform: translateX(0); }
.app-sidebar__close {
  align-self: flex-end;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fg-muted);
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-input);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.app-sidebar__close:hover { background: var(--bg-alt); color: var(--fg); }
.app-sidebar__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (min-width: 1024px) {
  .app-sidebar {
    position: sticky;
    top: 4rem;
    inset: auto;
    height: calc(100vh - 4rem);
    transform: none;
  }
  .app-sidebar__close { display: none; }
}

/* Floating sidebar toggle was replaced by the header hamburger. */
.app-sidebar-toggle { display: none; }

.app-nav__list { display: flex; flex-direction: column; gap: 2px; }
.app-nav__link {
  display: block;
  padding: 0.6rem 0.85rem;
  color: var(--fg);
  text-decoration: none;
  border-radius: var(--radius-input);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.app-nav__link:hover { background: var(--bg-alt); }
.app-nav__link[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.app-sidebar__footer {
  margin-top: auto;
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.last-saved { margin: 0 0 var(--space-2xs); }
.app-sidebar__exit { color: var(--fg-muted); }

/* Profile switcher */
.profile-switcher { position: relative; }
.profile-switcher__current {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-input);
  color: var(--fg);
  text-align: left;
}
.profile-switcher__label { font-size: var(--fs-xs); color: var(--fg-subtle); display: block; }
.profile-switcher__name { flex: 1; font-weight: 600; font-size: var(--fs-sm); }
.profile-switcher__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  z-index: 10;
  padding: var(--space-2xs) 0;
}
.profile-switcher__item {
  display: block;
  width: 100%;
  padding: 0.55rem 0.85rem;
  text-align: left;
  color: var(--fg);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.profile-switcher__item:hover { background: var(--bg-alt); }
.profile-switcher__divider {
  height: 1px;
  margin: var(--space-2xs) 0;
  background: var(--border-soft);
}

/* Account list in app sidebar */
.app-sidebar__accounts { display: flex; flex-direction: column; gap: var(--space-sm); }
.app-sidebar__heading {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  font-weight: 600;
}
.acct-group__name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: var(--space-3xs);
}
.acct-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  padding: 0.25rem 0;
  background: none;
  border: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-height: auto;
}
.acct-group__head:not(:disabled):hover { color: var(--accent); }
.acct-group__list { display: flex; flex-direction: column; gap: 0; }
.acct-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-input);
  text-decoration: none;
  color: var(--fg);
  font-size: var(--fs-sm);
  gap: var(--space-2xs);
}
.acct-link:hover { background: var(--bg-alt); }
.acct-link__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-link__balance {
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.acct-link__balance.is-negative { color: var(--danger); }
.acct-totals {
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--border-soft);
}
.acct-totals p {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin: 0;
}
.acct-totals p span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg); }


/* ---- app.css ---- */
/* Force every direct child to have min-width: 0 so overflow-x: auto on
   .card / .register actually clips horizontally instead of letting the
   child push the page wider. Flex children default to min-width: auto
   which preserves intrinsic min-content, which defeats horizontal
   scroll containers. */
.app-page { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
.app-page > * { min-width: 0; max-width: 100%; }
.app-main { min-width: 0; overflow-x: hidden; }

.kpi-grid {
  display: grid;
  gap: var(--space-md);
  /* Each KPI value is a long currency string. Auto-fit so 1 column on
     small phones, 2 on bigger phones / tablet portrait, 4 on tablet
     landscape and up. minmax keeps the value from forcing horizontal
     overflow when it's too wide for the available column. */
  grid-template-columns: 1fr;
}
@media (min-width: 480px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kpi {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  padding: var(--space-md);
  min-width: 0;
}
.kpi__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  font-weight: 600;
}
.kpi__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-2xs);
  overflow-wrap: break-word;
}
.kpi__hint { color: var(--fg-muted); font-size: var(--fs-xs); margin-top: var(--space-2xs); }

.rta {
  background: var(--accent);
  color: #fff;
  padding: var(--space-lg);
}
.rta__label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: #f3eee0;
}
.rta__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 3vw, 2.625rem);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-2xs);
  color: #ffffff;
  overflow-wrap: break-word;
}
.rta__hint { margin-top: var(--space-2xs); color: #f3eee0; font-size: var(--fs-sm); }
.rta--negative { background: var(--danger); }

.sample-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-left-width: 4px;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}
.sample-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.sample-banner__body {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--fg);
  max-width: 70ch;
}
.sample-banner__actions {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

/* Mobile tighten — banner is informational, not the focal point. Trim
   padding, body size, and drop the long secondary sentence so only the
   essential "this is sample data" callout remains in view. */
@media (max-width: 599px) {
  .sample-banner {
    padding: var(--space-2xs) var(--space-sm);
    margin-bottom: var(--space-sm);
    border-left-width: 3px;
  }
  .sample-banner__inner { gap: var(--space-2xs); }
  .sample-banner__body { font-size: var(--fs-xs); line-height: 1.4; }
  .sample-banner__detail { display: none; }
}

/* Data summary on /app/settings/ */
.data-summary { display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0; }
.data-summary__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2xs);
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid var(--border-soft);
}
.data-summary__row dt { color: var(--fg-muted); font-size: var(--fs-sm); }
.data-summary__row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.data-summary__link { font-size: var(--fs-sm); }

.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-elevated);
  border: 1px dashed var(--border);
}
.empty-state__title { font-size: var(--fs-xl); }
.empty-state__body { color: var(--fg-muted); margin-top: var(--space-sm); }
.empty-state__actions { margin-top: var(--space-lg); display: flex; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; }


/* ---- register.css ---- */
.register {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.register__table { min-width: 720px; }
.register__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
  justify-content: space-between;
}

.register__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.register__table th,
.register__table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}
.register__table th {
  font-weight: 600;
  color: var(--fg-muted);
  background: var(--bg-alt);
  position: sticky;
  top: 0;
}
.register__table .num,
.register__table .col-amount,
.register__table .col-balance {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.register__table .col-cleared { width: 36px; text-align: center; }
.register__row--reconciled { background: rgba(31, 95, 73, 0.04); }
.register__row--reconciled td { color: var(--fg-muted); }
.register__row--editing { background: var(--accent-soft); }

/* Cleared toggle — 28×28 visual, but wrapped in 44×44 hit area via
   padding so it meets WCAG 2.2 AAA target size in dense table rows. */
.cleared-toggle {
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-input);
  position: relative;
  cursor: pointer;
}
.cleared-toggle::before {
  content: "";
  position: absolute;
  inset: -8px;
}
.cleared-toggle[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.cleared-toggle[data-locked="true"] { opacity: 0.6; cursor: not-allowed; }
.cleared-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.amount--outflow { color: var(--danger); }
.amount--inflow  { color: var(--accent); }

/* Payee auto-suggest dropdown — sits under the payee input in the add form */
.payee-suggest {
  position: absolute;
  z-index: 5;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  padding: var(--space-3xs) 0;
}
.payee-suggest li button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.7rem;
  font-size: var(--fs-sm);
  color: var(--fg);
}
.payee-suggest li button:hover { background: var(--bg-alt); }
.field { position: relative; }

/* Add-transaction form — responsive grid. 1 column on phones, 2 on small
   tablets, 5 on full-width desktop (matches the table column order:
   date / payee / category / amount / account). */
.register__add-grid { grid-template-columns: 1fr; gap: var(--space-sm); }
@media (min-width: 600px) {
  .register__add-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .register__add-grid { grid-template-columns: 1fr 2fr 1.2fr 1fr 1fr; }
}

/* Toolbar search — let it shrink on phones, expand on desktop. */
.register__search { width: 100%; }
@media (min-width: 600px) { .register__search { min-width: 220px; width: auto; } }

/* Mobile card list — replaces the wide table under 600px. Each card
   shows the most-used fields (date, payee, amount, category) at a
   glance; tapping the summary reveals account/memo and actions. */
.register__cards {
  list-style: none;
  margin: 0;
  padding: 0;
}
.register__card {
  border-bottom: 1px solid var(--border-soft);
}
.register__card.is-reconciled .register__card-summary { background: rgba(31, 95, 73, 0.04); }
.register__card.is-editing { background: var(--accent-soft); }

.register__card-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "date  payee  amount"
    "meta  meta   meta";
  gap: var(--space-3xs) var(--space-sm);
  align-items: baseline;
  width: 100%;
  background: transparent;
  border: 0;
  padding: var(--space-sm);
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-height: 56px;
}
.register__card-summary:hover { background: var(--bg-alt); }
.register__card-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.register__card-date {
  grid-area: date;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.register__card-payee {
  grid-area: payee;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.register__card-amount {
  grid-area: amount;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.register__card-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.register__card-cleared-flag { color: var(--accent); }

.register__card-details,
.register__card-edit {
  padding: 0 var(--space-sm) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.register__card-dl { display: grid; gap: var(--space-2xs); margin: 0; }
.register__card-dl > div { display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-sm); font-size: var(--fs-sm); }
.register__card-dl dt { color: var(--fg-muted); }
.register__card-dl dd { margin: 0; }

.register__card-empty {
  padding: var(--space-lg);
  text-align: center;
  color: var(--fg-muted);
}

/* Below 600px, the toolbar count line gets hidden — already shown
   implicitly via the card list length. */
@media (max-width: 599px) {
  .register__toolbar { gap: var(--space-2xs); padding: var(--space-2xs); }
  .register__toolbar .cluster { flex: 1 1 100%; gap: var(--space-2xs); }
}


/* ---- budget.css ---- */
.budget {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
}
.budget__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-bottom: 1px solid var(--border-soft);
}
.budget__month {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
}
.budget__month-button {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  font-size: 1.1rem;
}

.budget__group {
  border-bottom: 1px solid var(--border-soft);
}
/* Mobile-first: 3 columns (category / assigned / available). Activity
   column is hidden below 600px to fit. From 600px up, show all 4. */
.budget__group-header,
.budget__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem 5rem;
  gap: var(--space-2xs);
  align-items: center;
  padding: 0.55rem var(--space-sm);
  font-size: var(--fs-sm);
}
.budget__group-header { background: var(--bg-alt); font-weight: 600; }
.budget__row { border-top: 1px solid var(--border-soft); }

.budget__activity { display: none; }
.budget__group-header > :nth-child(3) { display: none; }

@media (min-width: 600px) {
  .budget__group-header,
  .budget__row {
    grid-template-columns: minmax(0, 1fr) 6.5rem 6.5rem 6.5rem;
    gap: var(--space-sm);
  }
  .budget__activity { display: block; text-align: right; font-variant-numeric: tabular-nums; }
  .budget__group-header > :nth-child(3) { display: block; }
}
.budget__category { font-weight: 500; }
/* Right-edge of the input text must line up with the right-edge of the
   group total spans in the same column. Zero horizontal padding +
   transparent border keeps the editable input visually flush with the
   read-only totals above it; the focus state pulls the border back in. */
.budget__assigned input {
  width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 0.3rem 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-input);
}
.budget__assigned input:focus {
  background: var(--bg-elevated);
  border-color: var(--accent);
  padding: 0.3rem 0.45rem;
}
.budget__activity, .budget__available {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.budget__available--green { color: var(--ok); }
.budget__available--zero { color: var(--fg-muted); }
.budget__available--red { color: var(--danger); }

.goal-badge {
  display: inline-block;
  margin-left: var(--space-2xs);
  padding: 0.05rem 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.goal-badge--funded  { background: var(--accent-soft); color: var(--accent); }
.goal-badge--partial { background: rgba(168, 107, 20, 0.12); color: var(--warn); }
.goal-badge--needed  { background: rgba(168, 52, 31, 0.12); color: var(--danger); }
.goal-badge--over    { background: var(--accent-soft); color: var(--accent); }



/* ---- reports.css ---- */
.report {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  padding: var(--space-md);
  /* Tables and SVG charts inside should never push the page wider than
     the viewport on phones; let them scroll horizontally instead. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 599px) {
  .report { padding: var(--space-sm); }
}
.report__title { font-size: var(--fs-xl); margin-bottom: var(--space-2xs); }
.report__lead { color: var(--fg-muted); margin-bottom: var(--space-md); font-size: var(--fs-sm); }

.chart {
  width: 100%;
  min-height: 280px;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-subtle);
  font-size: var(--fs-sm);
}
.chart svg { display: block; width: 100%; height: auto; }
.chart text { fill: var(--fg); font-family: var(--font-body); font-size: 12px; }
.chart .axis line, .chart .axis path { stroke: var(--border); }
.chart .axis text { fill: var(--fg-muted); }
.chart .legend { fill: var(--fg-muted); }

.report-tiles {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .report-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .report-tiles { grid-template-columns: repeat(3, 1fr); } }

.report--link { text-decoration: none; color: inherit; transition: border-color var(--t-fast), background var(--t-fast); }
.report--link:hover { border-color: var(--accent); background: var(--bg-alt); }

.small-multiples {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .small-multiples { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .small-multiples { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .small-multiples { grid-template-columns: repeat(4, 1fr); } }

.small-multiple {
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  padding: var(--space-sm);
}
.small-multiple__title {
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: 2px;
}
.small-multiple__sub {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  margin-bottom: var(--space-2xs);
  font-variant-numeric: tabular-nums;
}

.btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }


/* ---- docs.css ---- */
/* Docs system — three-column layout (sidebar / article / TOC) on desktop,
   single-column on mobile with a sidebar toggle. */

.doc-shell {
  padding-block: var(--space-xl) var(--space-3xl);
}

.container--wide { max-width: 1320px; }

.breadcrumbs {
  margin-bottom: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.breadcrumbs a { color: var(--fg-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs__sep { margin-inline: 0.4em; color: var(--fg-subtle); }

.docs-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.5rem 0.85rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  margin-bottom: var(--space-sm);
}
.docs-sidebar-toggle__label--closed { display: none; }
.docs-layout[data-sidebar="closed"] ~ .docs-sidebar-toggle .docs-sidebar-toggle__label--open,
.docs-layout[data-sidebar="closed"] .docs-sidebar-toggle__label--open { display: none; }
.docs-layout[data-sidebar="closed"] ~ .docs-sidebar-toggle .docs-sidebar-toggle__label--closed,
.docs-layout[data-sidebar="closed"] .docs-sidebar-toggle__label--closed { display: inline; }

.docs-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 1024px) {
  .docs-layout { grid-template-columns: 240px 1fr 220px; gap: var(--space-xl); }
}
@media (min-width: 1024px) {
  .docs-layout[data-sidebar="closed"] { grid-template-columns: 1fr 220px; }
  .docs-layout[data-sidebar="closed"] .docs-layout__sidebar { display: none; }
}

.docs-layout__sidebar { min-width: 0; }
.docs-sidebar {
  position: sticky;
  top: var(--space-md);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding-right: var(--space-2xs);
}
.docs-sidebar__heading {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--fg);
}
.docs-sidebar__group { margin-bottom: var(--space-md); }
.docs-sidebar__title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  font-weight: 600;
  margin-bottom: var(--space-3xs);
}
.docs-sidebar__link {
  display: block;
  padding: 0.4rem 0.55rem;
  color: var(--fg);
  text-decoration: none;
  font-size: var(--fs-sm);
  border-left: 3px solid transparent;
}
.docs-sidebar__link:hover { background: var(--bg-elevated); color: var(--accent); }
.docs-sidebar__link[aria-current="page"] {
  background: var(--bg-elevated);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.docs-sidebar__empty {
  color: var(--fg-subtle);
  font-size: var(--fs-sm);
  padding: 0.25rem 0.55rem;
}

.doc-content { min-width: 0; }
.doc-content > h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 1.1;
  margin-bottom: var(--space-sm);
}
.doc-lead {
  color: var(--fg-muted);
  font-size: var(--fs-md);
  margin-bottom: var(--space-lg);
  max-width: 60ch;
}
.doc-content__prose > * + * { margin-top: var(--space-md); }
.doc-content__prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  margin-top: var(--space-xl);
  scroll-margin-top: 6rem;
}
.doc-content__prose h3 {
  font-family: var(--font-headline);
  font-size: var(--fs-lg);
  margin-top: var(--space-lg);
  scroll-margin-top: 6rem;
}
.doc-content__prose p,
.doc-content__prose li { line-height: var(--lh-loose); }
.doc-content__prose ul,
.doc-content__prose ol { padding-left: 1.5em; }
.doc-content__prose code {
  font-family: var(--font-mono);
  background: var(--bg-elevated);
  padding: 0.1em 0.35em;
  font-size: 0.92em;
}
.doc-content__prose pre {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  padding: var(--space-sm);
  overflow-x: auto;
}
.doc-content__prose pre code { background: none; padding: 0; }
.doc-content__prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-sm);
  color: var(--fg-muted);
  font-style: italic;
}

.doc-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-soft);
}
.doc-nav__item {
  display: block;
  padding: var(--space-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--fg);
}
.doc-nav__item:hover { border-color: var(--accent); }
.doc-nav__item--next { text-align: right; }
.doc-nav__eyebrow {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  margin-bottom: var(--space-3xs);
}
.doc-nav__title {
  display: block;
  font-family: var(--font-headline);
  font-weight: 600;
  color: var(--fg);
}

/* Right-rail TOC — sticky and collapsible. Hidden below 1024px since
   the layout drops to one column at that breakpoint. */
.docs-layout__toc { min-width: 0; display: none; }
@media (min-width: 1024px) { .docs-layout__toc { display: block; } }
.docs-toc {
  position: sticky;
  top: var(--space-md);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}
.docs-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  padding: 0 0 var(--space-2xs);
  font-family: var(--font-headline);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  cursor: pointer;
  text-align: left;
  min-height: auto;
}
.docs-toc__chevron {
  font-size: 0.8em;
  transition: transform var(--t-fast);
}
.docs-toc__toggle.is-collapsed .docs-toc__chevron { transform: rotate(-90deg); }
.docs-toc__list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-sm);
}
.docs-toc__list li { margin-block: 0.25rem; }
.docs-toc__list .toc-h3 { padding-left: var(--space-sm); }
.docs-toc__list a {
  display: block;
  padding: 0.2rem 0.4rem;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  border-left: 2px solid transparent;
}
.docs-toc__list a:hover { color: var(--accent); }
.docs-toc__list a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

/* Docs hub — category cards on /docs/ */
.docs-categories {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  margin-top: var(--space-lg);
}
@media (min-width: 768px) { .docs-categories { grid-template-columns: repeat(2, 1fr); } }
.docs-category {
  display: block;
  padding: var(--space-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--fg);
  transition: border-color var(--t-fast);
}
.docs-category:hover { border-color: var(--accent); }
.docs-category__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2xs);
}
.docs-category__summary {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  margin: 0;
}


/* ---- forms.css ---- */
/* Project Budget has no form-provider integration (Web3Forms, Fillout, etc.).
   Every "form" in the app is a local data-entry surface that writes to
   localStorage via the Alpine store. These styles cover those surfaces. */

.form-stack { display: flex; flex-direction: column; gap: var(--space-md); }
.form-row {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .form-row { grid-template-columns: repeat(2, 1fr); } }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.form-help {
  background: var(--bg-alt);
  border-left: 4px solid var(--accent);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-md);
  z-index: 60;
  overflow-y: auto;
}
.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  max-width: 540px;
  width: 100%;
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
  margin-top: 10vh;
}
.modal__title { font-size: var(--fs-xl); margin-bottom: var(--space-sm); }
.modal__close {
  float: right;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fg-muted);
  padding: 0.25rem 0.5rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-input);
}
.modal__close:hover { background: var(--bg-alt); color: var(--fg); }
.modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ---- style-guide.css ---- */
/* Style guide page — lives at /style-guide/. Styles are scoped under
   .style-guide so they don't leak into the rest of the marketing CSS. */

.style-guide { padding-block: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-xl); }
.style-guide__toc {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  padding: var(--space-md);
}
.style-guide__toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}
.style-guide__toc a { color: var(--link); }
.style-guide__toc a:hover { color: var(--link-hover); }

.style-guide__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  scroll-margin-top: 6rem;
}
.style-guide__section h2 {
  font-size: var(--fs-2xl);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-2xs);
}
.style-guide__section h3 {
  font-size: var(--fs-md);
  color: var(--fg-muted);
  margin-bottom: var(--space-2xs);
}

.example {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  padding: var(--space-md);
}
.example__title {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  font-weight: 600;
}
.example__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* Color swatches — 1fr cards with a strong color top half, label below. */
.swatch-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  border: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  min-height: 110px;
  justify-content: flex-end;
}
.swatch code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 5px;
  align-self: flex-start;
}
[data-theme="dark"] .swatch code { background: rgba(255, 255, 255, 0.10); }
.swatch__hint { color: var(--fg-muted); font-size: var(--fs-xs); }
.swatch--bg          { background: var(--bg); }
.swatch--bg-elevated { background: var(--bg-elevated); }
.swatch--bg-alt      { background: var(--bg-alt); }
.swatch--fg          { background: var(--fg); color: var(--bg); }
.swatch--fg-muted    { background: var(--fg-muted); color: var(--bg); }
.swatch--fg-subtle   { background: var(--fg-subtle); color: var(--bg); }
.swatch--accent      { background: var(--accent); color: #fff; }
.swatch--link        { background: var(--link); color: #fff; }
.swatch--ok          { background: var(--ok); color: #fff; }
.swatch--warn        { background: var(--warn); color: var(--ink); }
.swatch--danger      { background: var(--danger); color: #fff; }
.swatch--fg code,
.swatch--fg-muted code,
.swatch--fg-subtle code,
.swatch--accent code,
.swatch--link code,
.swatch--ok code,
.swatch--danger code { background: rgba(0, 0, 0, 0.25); color: inherit; }

/* Typography specimens — label / sample columns. */
.type-spec {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-soft);
}
.type-spec__label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  font-weight: 600;
}
@media (max-width: 599px) {
  .type-spec { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

/* Spacing scale — bar grows with each step. */
.space-spec {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
  margin: 0;
}
.space-spec li {
  display: grid;
  grid-template-columns: 8rem 1fr 5rem;
  gap: var(--space-sm);
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
.space-spec code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.space-spec__bar {
  display: inline-block;
  height: 14px;
  background: var(--accent);
}

.modal-preview {
  background: var(--bg-alt);
  display: flex;
  justify-content: center;
}

.a11y-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}
.a11y-checklist li {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-elevated);
  border-left: 3px solid var(--accent);
}


/* ---- print.css ---- */
@media print {
  /* Force a light, high-contrast palette for paper. */
  :root, [data-theme="dark"] {
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --bg-alt: #ffffff;
    --fg: #000000;
    --fg-muted: #333333;
    --fg-subtle: #555555;
    --border: #999999;
    --border-soft: #cccccc;
    --accent: #000000;
    --danger: #000000;
    --ok: #000000;
    --warn: #000000;
  }

  body { background: #fff; color: #000; }

  /* Hide chrome */
  .site-header,
  .site-footer,
  .app-sidebar,
  .app-sidebar-toggle,
  .toast-stack,
  .skip-link,
  .theme-toggle,
  .register__toolbar,
  .budget__toolbar,
  .empty-state__actions,
  .modal-backdrop,
  .form-actions,
  .field input,
  .field select,
  .field button,
  .profile-switcher__menu,
  .btn,
  .nav-toggle,
  .acct-link__balance { display: none !important; }

  /* Collapse the app shell into a single column */
  .app-shell { display: block; }
  .app-main { padding: 0; max-width: 100%; }
  .container { max-width: 100%; padding: 0; }

  /* Make the page title clear at the top of every printout */
  .app-page__header { display: block; margin-bottom: 12pt; }
  .app-page__title { font-size: 16pt; }
  .app-page__lead { color: #333; font-size: 10pt; }

  /* Always show URLs alongside links */
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after,
  a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }

  /* Tables — borders + breaks */
  .table, .register__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
  }
  .table th, .register__table th { background: #f5f5f5; border-bottom: 1px solid #999; }
  .table td, .table th, .register__table td, .register__table th { padding: 4pt 6pt; border-bottom: 1px solid #ccc; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }

  /* Headings shouldn't dangle alone at the bottom of a page */
  h1, h2, h3 { break-after: avoid; }

  /* ---- /app/budget/ ---- */
  .budget__group {
    break-inside: avoid;
    page-break-inside: avoid;
    border-bottom: 1px solid #ccc;
    margin-bottom: 6pt;
  }
  .budget__group-header { background: #f5f5f5; padding: 4pt 6pt; font-weight: 600; }
  .budget__row { padding: 3pt 6pt; }
  .budget__row .budget__assigned input {
    border: 0; background: transparent; padding: 0;
    color: #000;
  }
  /* Show RTA at the top of the budget printout */
  .rta {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000;
    padding: 8pt;
    margin-bottom: 12pt;
  }
  .rta__label { font-size: 9pt; }
  .rta__value { font-size: 18pt; }

  /* ---- /app/register/ ---- */
  .register { border: 1px solid #999; }
  .col-cleared, .cleared-toggle { display: none !important; }
  .register__row--reconciled td::before { content: "R "; color: #666; }

  /* ---- /app/reports/* ---- */
  .report {
    border: 1px solid #999;
    padding: 8pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .report__title { font-size: 14pt; margin-bottom: 4pt; }
  .chart { background: #fff; min-height: 0; }
  .chart svg { max-width: 100%; height: auto; }
  /* Spending treemap text is unreadable in print — fall back to table */
  /* (the table is already rendered next to the chart) */

  .small-multiples {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6pt !important;
  }
  .small-multiple {
    border: 1px solid #999;
    padding: 4pt;
    background: #fff;
    break-inside: avoid;
  }

  /* ---- /app/settings/ ---- */
  .empty-state { border: 1px dashed #999; }

  /* Force every page printout to start on its own sheet when chained */
  .app-page + .app-page { page-break-before: always; }

  /* Print URL & date footer */
  @page {
    margin: 0.75in;
  }
}