/* Evenbead web app. Mobile-first; light + dark from prefers-color-scheme; brand tokens from brand/BRAND.md
   (ink #14181a / paper #ffffff; accent "ledger green" #17684a, dark-mode #6fcf9f). Every interactive target is at
   least 44px; tables collapse to cards under 640px; no horizontal scrolling at 360px. No inline styles (strict CSP). */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --ink: #14181a;
  --paper: #ffffff;
  --surface: #f5f7f6;
  --raised: #ffffff;
  --line: #d5dbd8;
  --muted: #56615c;
  --accent: #17684a;
  --mark-accent: #17684a;   /* brand v0.2: the mark's rod and beads */
  --accent-ink: #ffffff;
  --accent-soft: #e4f1eb;
  --danger: #a8322d;
  --danger-soft: #fbeceb;
  --danger-ink: #ffffff;
  --warn: #7f5300;
  --warn-soft: #fbf1df;
  --focus: #17684a;
  --radius: 10px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9eceb;
    --paper: #14181a;
    --surface: #1a1f22;
    --raised: #1f2528;
    --line: #343b3e;
    --muted: #a6b0ab;
    --accent: #6fcf9f;
    --mark-accent: #6fcf9f;
    --accent-ink: #0f1412;
    --accent-soft: #1b3229;
    --danger: #ff8f86;
    --danger-soft: #3a1f1d;
    --danger-ink: #1a0f0e;
    --warn: #f0b75a;
    --warn-soft: #3a2c14;
    --focus: #8fe0c0;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  overflow-wrap: anywhere;
}
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; font-weight: 700; margin: 0.5rem 0 0.75rem; }
h2 { font-size: 1.15rem; font-weight: 650; margin: 1.75rem 0 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
p { margin: 0.5rem 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; background: var(--surface); padding: 0.05rem 0.3rem; border-radius: 4px; }
a { color: var(--accent); }
.icon { flex: none; }

/* Focus: always visible for keyboard users. */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
main:focus { outline: none; }

.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; border-radius: var(--radius); min-height: 44px;
}
.skip:focus { top: 0.5rem; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ───────── header (the navigation tray itself is in tray.css) ───────── */
.top { gap: 0.5rem; }
.brand {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; min-width: 44px; padding-right: 0.25rem;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; flex: none;
}
.brand .mark { width: 28px; height: 28px; }
.eb-accent { color: var(--mark-accent, currentColor); }
.top-context { flex: 1 1 auto; min-width: 0; font-weight: 650; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .search-link { margin-left: auto; }
@media (min-width: 64rem) { .top-context { display: none; } }   /* desktop: the app bar's .top-who (tray.css) names company and person */
.top-who + .top-context { margin-left: 0.25rem; }
.tabs a { min-width: 44px; justify-content: center; }
.count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.8rem; font-weight: 700;
}

main { max-width: 72rem; margin: 0 auto; padding: 0.75rem 1rem 3rem; }
.foot { max-width: 72rem; margin: 0 auto; padding: 1rem; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line); }
.lede { color: var(--muted); max-width: 48rem; }
.hint { color: var(--muted); font-size: 0.9rem; }
.empty { color: var(--muted); padding: 1rem; background: var(--surface); border-radius: var(--radius); }
.sub { display: block; color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.narrow { max-width: 28rem; margin: 2rem auto; }
.crumbs { margin: 0.25rem 0 0; }

/* ───────── buttons + forms ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px; min-width: 44px; padding: 0.5rem 1rem;
  font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2;
  color: var(--ink); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: var(--danger); color: var(--danger-ink); border-color: var(--danger); }
.btn.ghost { background: transparent; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

label { font-weight: 600; font-size: 0.9rem; }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.55rem 0.75rem; min-height: 44px; max-width: 100%;
}
textarea { min-height: 88px; width: 100%; }
input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; accent-color: var(--accent); }
input[type="file"] { width: 100%; padding: 0.45rem; }
.stack { display: flex; flex-direction: column; gap: 0.5rem; }
.stack input, .stack select { width: 100%; }
.grid-form { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.grid-form .field { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 12rem; min-width: 0; }
.grid-form .field.wide { flex-basis: 100%; }
.grid-form .field input, .grid-form .field select { width: 100%; }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.inline-form select { flex: 1 1 11rem; min-width: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; margin-top: 0.75rem; }
.actions form { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { border-color: var(--accent); }
details.reject[open], details.mini[open] { flex-basis: 100%; }
details[open] form { margin-top: 0.5rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.panel { margin-top: 2rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.panel h2 { margin-top: 0; }

/* ───────── messages, badges ───────── */
.flash { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.75rem 1rem; border-radius: var(--radius); margin: 0.75rem 0; font-weight: 550; }
.flash.ok { background: var(--accent-soft); color: var(--ink); border-left: 4px solid var(--accent); }
.flash.error { background: var(--danger-soft); color: var(--ink); border-left: 4px solid var(--danger); }
.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 650; border: 1px solid var(--line); white-space: nowrap; }
.s-unmatched, .s-pending, .s-in_progress { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.s-proposed { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.s-categorized, .s-matched, .s-approved, .s-auto_posted, .s-finished { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.s-rejected { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.s-excluded { color: var(--muted); }
.s-open, .s-partial { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.s-paid, .s-applied, .s-posted { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.s-void, .s-undone { color: var(--muted); }
.s-overdue { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

/* ───────── tiles ───────── */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.tile > a, .tile > div {
  display: flex; flex-direction: column; gap: 0.2rem; min-height: 44px; height: 100%; padding: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); color: var(--ink); text-decoration: none;
}
.tile > a:hover { border-color: var(--accent); }
.tile-label { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.tile-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
.tile-note { color: var(--muted); font-size: 0.85rem; }

/* ───────── tabs ───────── */
.tabs { margin: 0.5rem 0 1rem; border-bottom: 1px solid var(--line); }
.tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
.tabs a {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.75rem;
  color: var(--muted); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent;
}
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs .n { font-size: 0.8rem; color: var(--muted); }

/* ───────── proposals ───────── */
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 0 0 1rem; background: var(--raised); }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; }
.card-head h2 { margin: 0; font-size: 1.05rem; }
.card-head .date { color: var(--muted); font-weight: 600; margin-right: 0.35rem; }
.card-head .amount { font-size: 1.2rem; font-weight: 700; }
.meta { color: var(--muted); font-size: 0.9rem; }
.reasons { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.reasons li { background: var(--warn-soft); color: var(--warn); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.8rem; font-weight: 650; }

/* ───────── tables (collapse to cards under 640px) ───────── */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money.out { color: var(--ink); }
.money.in { color: var(--accent); }
table.grid { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.grid th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 650; }
table.grid th, table.grid td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid .num { text-align: right; }
table.grid tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 650; }
.check { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }

@media (max-width: 640px) {
  table.grid, table.grid tbody, table.grid tfoot, table.grid tr, table.grid td { display: block; width: 100%; }
  table.grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.grid tr { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 0.75rem; margin-bottom: 0.6rem; background: var(--raised); }
  table.grid tfoot tr { border-top: 2px solid var(--ink); }
  table.grid td, table.grid tfoot td { border: 0; padding: 0.35rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  table.grid td::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: left; flex: none; max-width: 45%; }
  table.grid td[data-label=""]::before { content: none; }
  table.grid td[data-label=""], table.grid td[data-label="Action"] { display: block; text-align: left; }
  table.grid td[data-label="Action"]::before { display: block; margin-bottom: 0.35rem; }
  table.grid td .v { min-width: 0; }
  table.grid td .sub { text-align: right; }
  table.grid td[data-label="Action"] .v, table.grid td[data-label=""] .v { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  table.grid td.num { text-align: right; }
  .brand .wordmark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  h1 { font-size: 1.4rem; }
}

/* ───────── documents (invoices, bills) ───────── */
h1 .sub { display: block; font-size: 1rem; font-weight: 600; margin-top: 0.25rem; }
.doc-form h2 { margin-top: 1.5rem; }
.doc-lines { display: flex; flex-direction: column; gap: 0.75rem; }
.doc-line {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-end; min-width: 0; margin: 0;
  padding: 0.5rem 0.75rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.doc-line legend { font-weight: 650; font-size: 0.9rem; padding: 0 0.25rem; }
.doc-line .field { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 12rem; min-width: 0; }
.doc-line .field.wide { flex-basis: 100%; }
.doc-line .field.narrow-field { flex: 1 1 7rem; }
.doc-line input, .doc-line select { width: 100%; }
label .hint { font-weight: 400; }
/* A text link inside a table or a sentence, still a 44px touch target. */
.tlink { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 600; }
.filters { margin-bottom: 0.5rem; }

/* ───────── reconciliation ───────── */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.5rem; margin: 1rem 0; }
.summary > div { padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.summary dt { color: var(--muted); font-size: 0.8rem; font-weight: 650; }
.summary dd { margin: 0.15rem 0 0; font-size: 1.15rem; font-weight: 700; }
.summary .diff.zero { border-color: var(--accent); background: var(--accent-soft); }
.summary .diff.off { border-color: var(--warn); background: var(--warn-soft); }
.tieout { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 600; }
.tieout.ok { color: var(--accent); }
.tieout.bad { color: var(--danger); }
.total-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem; border-top: 1px solid var(--line); font-weight: 650; }
.total-line.strong { border-top: 2px solid var(--ink); font-size: 1.1rem; }
.report-title .sub { display: inline; margin-left: 0.25rem; }

@media (min-width: 900px) {
  h1 { font-size: 1.85rem; }
  main { padding-top: 1.25rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .tabs a, .tile > a { transition: border-color 120ms ease, color 120ms ease, filter 120ms ease; }
}

/* ───────── migration (M4) ───────── */
progress { display: block; width: 100%; height: 0.9rem; margin: 0.35rem 0 0.5rem; accent-color: var(--accent); border-radius: 999px; overflow: hidden;
  appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: var(--surface); }
progress::-webkit-progress-bar { background: var(--surface); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }
.secret { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: 0.02em; margin: 0.35rem 0; }
ol.steps { padding-left: 1.25rem; margin: 0.5rem 0; }
ol.steps li { margin: 0.35rem 0; }
.check-label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; }
.check-label > input[type="checkbox"], .stack input[type="checkbox"], .stack input[type="radio"] { flex: none; width: 24px; margin: 0; }   /* never stretched by .stack */
.stack .check-row { align-self: flex-start; }
.stack .check-row + .hint { margin-top: -0.35rem; }

/* ───────── bank feed account mapping (bank-feeds.ts): rows on desktop, cards under 640px ───────── */
.feed-list { list-style: none; margin: 0.5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.feed-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem 1rem; padding: 0.75rem; margin: 0 0 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.feed-row.off { color: var(--muted); background: var(--surface); }
.feed-row.off strong { font-weight: 600; }
.feed-acct { min-width: 0; align-items: flex-start; }
.feed-acct > input { margin-top: 0.6rem !important; }
.feed-name, .feed-acct { display: flex; flex-direction: column; min-width: 0; }
label.feed-acct { flex-direction: row; }
.feed-name { padding-top: 0.55rem; }
.feed-acct strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-status { align-self: start; padding-top: 0.55rem; }
.feed-map { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.feed-into { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.feed-into > span { font-weight: 600; font-size: 0.9rem; }
.feed-into select { flex: 1 1 12rem; min-width: 0; max-width: 22rem; }
.feed-new { margin: 0; overflow-wrap: anywhere; }
.feed-new[hidden] { display: none; }
.feed-more > summary { min-height: 44px; }
.feed-more[open] .grid-form { margin-top: 0.5rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.feed-more .field .hint { font-size: 0.8rem; color: var(--muted); }
.feed-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.feed-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0.75rem 0 0; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.feed-summary { margin: 0; font-weight: 600; flex: 1 1 12rem; }
@media (min-width: 641px) {
  .feed-list { border-top: 0; }
  .feed-row { grid-template-columns: minmax(12rem, 1.1fr) 8.5rem minmax(0, 2fr); align-items: start; }
}
.panel h3 { font-size: 1rem; margin: 1rem 0 0.25rem; }

/* ───────── accountant console (M5) ───────── */
fieldset.scopes { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.25rem 0.75rem 0.5rem; margin: 0; display: flex; flex-wrap: wrap; gap: 0 1rem; }
fieldset.scopes legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.25rem; }
.console table.grid th { white-space: nowrap; overflow-wrap: normal; }

/* Milestone 5: estimate, recurring and payment states; the sub-navigation under Invoices/Bills. */
.s-accepted, .s-converted, .s-active { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.s-declined, .s-refused { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.s-pending_approval { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.s-paused { color: var(--muted); }
.subnav { margin-top: 0; }

/* Milestone 6: month-end close checklist and the firm's approval queue (src/close.ts). */
.checklist { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.75rem; }
.check-item { display: flex; gap: 0.75rem; align-items: flex-start; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); padding: 0.85rem 1rem; background: var(--raised); }
.check-item .state { flex: none; display: inline-flex; padding-top: 0.15rem; }
.check-item .state .icon { width: 24px; height: 24px; }
.check-item .body { flex: 1 1 auto; min-width: 0; }
.check-item h2 { margin: 0 0 0.25rem; font-size: 1.02rem; }
.check-item p { margin: 0.25rem 0; }
.check-item.c-pass { border-left-color: var(--accent); }
.check-item.c-pass .state { color: var(--accent); }
.check-item.c-fail { border-left-color: var(--warn); }
.check-item.c-fail .state { color: var(--warn); }
.check-item.c-not_applicable { border-left-color: var(--line); }
.check-item.c-not_applicable .state { color: var(--muted); }
.progress-line { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-weight: 600; }
.filters { margin: 0.75rem 0 1rem; }
.card-head .client { display: block; font-size: 0.85rem; color: var(--accent); font-weight: 700; }
.card-head .check { margin: -0.5rem 0 -0.5rem -0.5rem; }
details.lines > summary { margin-top: 0.25rem; }
.todo { margin: 0; padding-left: 1.1rem; }
.decide textarea { width: 100%; }

/* Chart of accounts, bank accounts, periods, the setup checklist (src/setup.ts) and the document line account picker. */
fieldset.choices { border: 0; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
fieldset.choices legend { font-weight: 650; margin-bottom: 0.5rem; padding: 0; }
.choice { display: flex; gap: 0.75rem; align-items: flex-start; min-height: 44px; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); cursor: pointer; font-weight: 400; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input[type="radio"] { width: 24px; height: 24px; min-height: 0; margin: 0.1rem 0 0; flex: none; accent-color: var(--accent); }
.choice .sub { margin-top: 0.15rem; }
.flags { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.acct .code { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 650; margin-right: 0.15rem; }
.with-action { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; }
.with-action select { flex: 1 1 10rem; min-width: 0; width: auto; }
.with-action .btn { flex: none; }
.empty-state p:last-child { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
details.fy { margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
details.fy > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; min-height: 48px; padding: 0.6rem 1rem; cursor: pointer; }
details.fy > summary .fy-title { font-weight: 700; font-size: 1.05rem; }
details.fy[open] > summary { border-bottom: 1px solid var(--line); }
details.fy > table.grid, details.fy > .fy-lock { margin: 0.5rem 1rem 1rem; width: calc(100% - 2rem); }
details.fy[open] form.fy-lock { margin-top: 0.5rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.setup .check-item h3 { margin: 0 0 0.25rem; font-size: 1.02rem; }
.setup .check-item p:last-child { margin-bottom: 0; }
.setup { margin-top: 0.5rem; }

/* Milestone 10 "daily driver" (src/daily.ts, src/charts.ts): header search, quick actions, dashboard charts, search
   results, receipts, the journal-entry balance. Chart colors validated for color-vision deficiency in light and dark
   (income ledger green, expenses indigo; overdue = the reserved warning color, always labelled). */
:root { --chart-1: #17845a; --chart-2: #5b57d1; --chart-track: #eef1ef; }
@media (prefers-color-scheme: dark) { :root { --chart-1: #33a674; --chart-2: #8a7ff0; --chart-track: #242b2e; } }
.search-link { flex: none; }
@media (max-width: 640px) { .search-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.quick ul { list-style: none; margin: 0.5rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.75rem; }
.chart { margin: 0; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); min-width: 0; }
.chart-wide { grid-column: 1 / -1; }
.chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.5rem; }
.chart-title { font-weight: 700; }
.chart-net { color: var(--muted); font-size: 0.9rem; }
.chart-net strong { color: var(--ink); }
.chart-note { color: var(--muted); font-size: 0.85rem; margin: 0.4rem 0 0; }
svg.viz { display: block; width: 100%; height: auto; overflow: visible; }
.viz-wide { display: none !important; }
@media (min-width: 720px) { .viz-narrow { display: none !important; } .viz-wide { display: block !important; } }
svg.viz .t-label { fill: var(--muted); font: 600 12px var(--font); }
svg.viz .t-value { fill: var(--ink); font: 700 12px var(--font); font-variant-numeric: tabular-nums; }
svg.viz .t-axis { fill: var(--muted); font: 500 10px var(--font); font-variant-numeric: tabular-nums; }
svg.viz .track { fill: var(--chart-track); }
svg.viz .c-income { fill: var(--chart-1); }
svg.viz .c-expense { fill: var(--chart-2); }
svg.viz .c-current { fill: var(--chart-1); }
svg.viz .c-overdue { fill: var(--warn); }
svg.viz .mark-zero { fill: var(--muted); }
svg.viz .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
svg.viz .baseline { stroke: var(--muted); stroke-width: 1; }
svg.viz .c-cash { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.viz .c-cash-dot { fill: var(--chart-1); stroke: var(--raised); stroke-width: 2; }
svg.viz .hit { fill: transparent; }
svg.viz .hit:hover + *, svg.viz g:hover .c-cash-dot { r: 6; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.4rem 0 0; padding: 0; color: var(--muted); font-size: 0.85rem; }
.legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.key.k-current { background: var(--chart-1); }
.key.k-overdue { background: var(--warn); }
.hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.hit { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding: 0.6rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); color: var(--ink); text-decoration: none; }
.hit:hover { border-color: var(--accent); }
.hit-main { min-width: 0; }
.hit-side { flex: none; text-align: right; }
fieldset.receipt { margin: 1rem 0; padding: 0.5rem 0.75rem 0.75rem; border: 1px dashed var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 0.35rem; }
fieldset.receipt legend { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 650; padding: 0 0.25rem; }
.je-balance .diff.zero { border-color: var(--accent); background: var(--accent-soft); }
.je-balance .diff.off { border-color: var(--warn); background: var(--warn-soft); }
.subnav a[aria-current="true"] { border-color: var(--accent); color: var(--accent); }

/* ───────── account combobox (app.js, select[data-combo]; desktop with a fine pointer) ───────── */
.combo { position: relative; display: block; min-width: 0; width: 100%; }
.inline-form .combo { flex: 1 1 11rem; width: auto; }
.with-action .combo { flex: 1 1 10rem; width: auto; }
.feed-into .combo { flex: 1 1 12rem; max-width: 22rem; width: auto; }
.combo-input { width: 100%; padding-right: 2.25rem; text-overflow: ellipsis; cursor: pointer; }
.combo-input:focus { cursor: text; }
.combo-chev { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--muted); cursor: pointer; }
.combo-chev svg { width: 18px; height: 18px; }
.combo.open .combo-chev { transform: translateY(-50%) rotate(180deg); }
.combo-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; opacity: 0; pointer-events: none; }
.combo-panel {
  position: fixed; z-index: 70; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 0.25rem;
  background: var(--raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 28px rgb(0 0 0 / 0.18);
  scrollbar-width: thin;
}
.combo-h { position: sticky; top: -0.25rem; z-index: 1; padding: 0.45rem 0.6rem 0.2rem; background: var(--raised); color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.combo-opt { display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.35rem 0.6rem; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
.combo-opt.active { background: var(--accent-soft); color: var(--ink); }
.combo-opt[aria-selected="true"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.combo-action { margin-top: 0.25rem; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; color: var(--accent); font-weight: 650; }
.combo-sug { margin-left: auto; flex: none; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 0.72rem; font-weight: 700; }
.combo-empty { margin: 0; padding: 0.6rem; color: var(--muted); }
.sub.suggest { color: var(--warn); }

/* Milestone 13 (src/suggest.ts, ADR-0029): suggestion chips on bank lines, "Always code …?" prompts, Accept all, the Rules
   and suggestions page. Mobile-first; strength is said in words, never by colour alone. */
.sug { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.3rem; font-size: 0.82rem; font-weight: 400; }
.sug-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-weight: 700; font-size: 0.75rem;
  background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; }
.sug-tag .icon { width: 14px; height: 14px; }
.sug.s-medium .sug-tag { background: var(--surface); color: var(--ink); border-color: var(--line); }
.sug.s-weak .sug-tag { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
.sug-why { color: var(--muted); overflow-wrap: anywhere; }
table.grid td .sug { justify-content: flex-end; }
@media (min-width: 641px) { table.grid td .sug { justify-content: flex-start; } }
.prompts { display: grid; gap: 0.75rem; margin: 1rem 0; }
.prompt { padding: 0.75rem 1rem; border: 1px solid var(--accent); border-left-width: 4px; border-radius: var(--radius); background: var(--accent-soft); }
.prompt p { margin: 0 0 0.25rem; }
.prompt .toolbar { margin: 0.5rem 0 0; }
.accept-all { margin-top: 1rem; }
.accept-all h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; }
.accept-all .choice { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.accept-all .choice .n { color: var(--muted); font-weight: 600; margin-left: 0.25rem; }
.accept-all input[type="radio"] { width: 22px; height: 22px; accent-color: var(--accent); }
.summary-line { margin: 1rem 0; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.summary-line p { margin: 0.25rem 0; }
.cat-list, .cat-list ul { list-style: none; margin: 0; padding: 0; }
.cat-list > li { padding: 0.6rem 0; border-top: 1px solid var(--line); }
.cat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.cat-name { flex: 1 1 14rem; min-width: 0; font-weight: 600; }
.cat-row .inline-form { flex: 1 1 18rem; }
.cat-more { margin: 0.4rem 0 0 1rem; }
.cat-more > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--accent); }
.cat-more li { padding: 0.4rem 0; }
details.history > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--accent); }
@media (min-width: 64rem) { .accept-all fieldset.choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ───────── Milestone 14 (src/email.ts, src/receipts.ts): send by email, outbound email approvals, receipts, the inbox ───────── */
.s-queued, .s-sending { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.s-sent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.s-failed, .s-suppressed { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.s-cancelled { color: var(--muted); }
.kv { display: grid; gap: 0; margin: 0.75rem 0; border-top: 1px solid var(--line); }
.kv > div { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); gap: 0.25rem 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); font-weight: 650; font-size: 0.9rem; }
.kv dd { margin: 0; min-width: 0; }
.kv dd.pre { white-space: pre-wrap; }
@media (max-width: 640px) { .kv > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } }

/* The compose sheet: a centred panel on desktop, the whole width on phones. */
.sheet-wrap { display: flex; justify-content: center; }
.sheet { width: 100%; max-width: 44rem; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sheet-head h1 { margin: 0.25rem 0; }
.sheet-close { flex: none; }
@media (min-width: 641px) {
  .sheet { margin: 0.5rem 0 1rem; padding: 1.25rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); box-shadow: 0 12px 40px rgb(0 0 0 / 0.12); }
}
.compose input, .compose textarea { width: 100%; }
.attachment { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.6rem 0.75rem; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); margin-top: 0.5rem; }
.attachment > span { flex: 1 1 12rem; min-width: 0; }
.sheet-actions { margin-top: 1rem; }
.email-frame { display: block; width: 100%; height: 34rem; max-height: 75vh; border: 1px solid var(--line); border-radius: var(--radius); background: #ffffff; }
.email-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; margin: 0.5rem 0 0; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.text-version { margin: 0.75rem 0; }
.line-items { margin: 0.75rem 0; }
.line-items > .sub { margin-top: 0.35rem; }

/* Email history on a document or estimate. */
.email-latest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.email-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.email-item { padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.email-item-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; }
.email-item .meta { margin: 0.2rem 0 0.4rem; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 2px solid var(--line); display: grid; gap: 0.3rem; font-size: 0.9rem; }
.timeline .t-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline .t-what { font-weight: 600; }
.timeline .t-who { color: var(--muted); }
.email-card .kv { margin-top: 0.5rem; }
.card-head h3 { margin: 0; font-size: 1.02rem; }

/* Settings: email, reminders, wording. */
fieldset.reminders { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.25rem 0.75rem 0.75rem; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
fieldset.reminders legend { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 650; padding: 0 0.25rem; }
fieldset.reminders input:not([type="checkbox"]) { width: 100%; max-width: 16rem; }
.templates { display: grid; gap: 0.5rem; }
details.template > summary { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
details.template textarea, details.template input { width: 100%; }

/* Receipts. */
.receipt-inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.receipt-inputs > label:not(.camera-btn) { flex-basis: 100%; }
.receipt-inputs .picked { flex-basis: 100%; margin: 0; }
.receipt-inputs .picked:empty { display: none; }
.camera-btn { position: relative; overflow: hidden; display: none; }
.camera-btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.camera-input { position: absolute; inset: -1px; width: auto; height: auto; min-height: 0; padding: 0; margin: 0; border: 0; opacity: 0; cursor: pointer; }
.receipt-inputs .or { display: none; color: var(--muted); font-size: 0.9rem; }
@media (pointer: coarse), (max-width: 640px) {
  .camera-btn { display: inline-flex; }
  .receipt-inputs .or { display: inline; }
}
.upload-panel { margin-top: 0.5rem; }
.review .card { background: var(--raised); }
.review h2 .count { margin-left: 0.25rem; }
.auth { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0; padding: 0; }
.auth li { padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 650; border: 1px solid var(--line); color: var(--muted); }
.auth li.ok { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.auth li.bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.receipt-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
.receipt-layout .panel:first-child { margin-top: 0; }
@media (min-width: 900px) { .receipt-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.receipt-img { display: block; max-width: 100%; height: auto; max-height: 75vh; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); background: #ffffff; }
.receipt-frame { display: block; width: 100%; height: 36rem; max-height: 75vh; border: 1px solid var(--line); border-radius: var(--radius); background: #ffffff; }
form.inline { display: inline-block; margin: 0.5rem 0 0; }
.dry { margin: 0.5rem 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--accent); border-left-width: 4px; border-radius: var(--radius); background: var(--accent-soft); }
.dry h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.dry p { display: flex; gap: 0.4rem; align-items: center; }

/* Settings → Receipt inbox: the address with Copy, and its QR code (dark on a light tile in both themes, for cameras). */
.inbox-address { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; }
.inbox-address .addr { flex: 1 1 18rem; min-width: 0; }
.qr-box { margin: 0; flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; max-width: 13rem; text-align: center; }
svg.qr { display: block; width: 12rem; height: 12rem; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.senders { list-style: none; margin: 0.25rem 0 0.75rem; padding: 0; display: grid; gap: 0.35rem; }
.senders li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0.15rem 0.25rem 0.15rem 0.75rem; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.senders li > span:first-child { font-weight: 600; min-width: 0; }
.senders form { margin: 0; }
.review .actions form { min-width: 0; max-width: 100%; }
.review .actions .btn { white-space: normal; text-align: left; max-width: 100%; }

/* M15 (ADR-0033): opening balances and the bank-line checks. */
.opening .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.5rem 1rem; margin: 0.75rem 0; }
.opening .facts div { padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.opening .facts dt { font-size: 0.8rem; color: var(--muted); }
.opening .facts dd { margin: 0.15rem 0 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.opening .sub-h { font-size: 1rem; margin: 1rem 0 0.25rem; }
.ob-state { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.5rem 0; padding: 0.6rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--line); }
.ob-state .icon { flex: none; margin-top: 0.15rem; }
.ob-state.ok { background: var(--accent-soft); border-color: var(--accent); }
.ob-state.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--ink); }
.ob-state.warn .icon { color: var(--warn); }
.line-notes { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.3rem; }
.line-note { display: flex; gap: 0.35rem; align-items: flex-start; font-size: 0.82rem; font-weight: 400; text-align: left; overflow-wrap: anywhere; }
.line-note .icon { flex: none; width: 14px; height: 14px; margin-top: 0.15rem; }
.line-note.warn { color: var(--ink); }
.line-note.warn .icon { color: var(--warn); }
.line-note.ok { color: var(--muted); }
/* M16: Connect your AI (consent screen, Connected AI apps) */
.consent .redirect-host { overflow-wrap: anywhere; }
.consent fieldset.reminders { margin-top: 0.25rem; }
ul.plain { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.35rem; }
.ai-app details.manage { margin-top: 0.75rem; }
.ai-app details.manage form + form { margin-top: 1rem; }

/* People's sign-in (M17): the sign-in page's panels, the Security page's lists and recovery codes. */
.signin .panel { margin-top: 1rem; }
.signin .panel h2 { margin-top: 0; }
ul.list { list-style: none; margin: 0.5rem 0 0.75rem; padding: 0; display: grid; gap: 0.4rem; }
ul.list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 0.75rem; padding: 0.4rem 0.5rem 0.4rem 0.75rem; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
ul.list > li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
ul.list form { margin: 0; }
.code-list { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.4rem; }
.code-list code { display: block; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 1rem; letter-spacing: 0.04em; text-align: center; }
.secret-inline { overflow-wrap: anywhere; }
.flash[hidden], .signin [hidden], button[data-passkey][hidden], button[data-copy][hidden] { display: none; }

/* Staging only (EVENBEAD_DEPLOYMENT=staging, layout.ts): an amber banner on every page and an amber stripe on the sticky
   app bar, so staging.evenbead.com is never mistaken for production. Production never renders these. */
.staging-banner {
  display: block; margin: 0; padding: 0.45rem 1rem; background: #f59e0b; color: #1c1305;
  font-weight: 800; font-size: 0.9rem; letter-spacing: 0.04em; text-align: center;
}
html.staging .top { border-top: 4px solid #f59e0b; }
/* ───────── Billing, signup and onboarding (M18, ADR-0038/0039) ───────── */
.banner { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 1rem; margin: 0 0 1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); line-height: 1.45; }
.banner .icon { flex: none; margin-top: 0.1rem; }
.banner a { font-weight: 650; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.banner.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.banner.bad { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.banner.info { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 1rem; margin: 0.5rem 0 1rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) { dl.facts { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } dl.facts dd { margin-bottom: 0.5rem; } }
.usage { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.usage li { display: flex; flex-direction: column; gap: 0.3rem; }
.usage meter { width: 100%; height: 0.75rem; }
.meter-label { font-weight: 600; }
fieldset.choices.plans { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { fieldset.choices.plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice.plan > span { display: flex; flex-direction: column; gap: 0.2rem; }
.choice.plan .price { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
fieldset.choices.inline { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.5rem; }
.lead { font-size: 1.05rem; color: var(--muted); margin-top: -0.25rem; }
.step h2 .icon { color: var(--accent); }
.cards.next { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.card-link { display: flex; gap: 0.75rem; align-items: flex-start; min-height: 44px; padding: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); color: var(--ink); text-decoration: none; }
.card-link:hover, .card-link:focus-visible { border-color: var(--accent); }
.card-link > span { display: flex; flex-direction: column; gap: 0.2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
form.inline.client-plan { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
form.inline.client-plan input[type="number"] { width: 8.5rem; max-width: 100%; min-width: 0; }
details.mini.panel > summary.btn { white-space: normal; text-align: left; max-width: 100%; }
.banner { flex-wrap: wrap; align-items: center; }
.banner > span { flex: 1 1 16rem; }
.banner a.banner-act { flex: none; min-height: 44px; text-decoration: none; color: var(--ink); background: var(--raised); border-color: currentColor; }

/* ───────── M21: firm workflow (projects, budgets, recurring entries, tax handoff) ───────── */
.check-line { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; font-weight: 550; }
.check-line input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--accent); }
.month-grid .field.narrow-field { flex: 1 1 6.5rem; }
.export-list { list-style: none; margin: 0.5rem 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
.export-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.export-list .sub { flex: 1 1 18rem; color: var(--muted); font-size: 0.9rem; }
.btn.disabled { opacity: 0.55; pointer-events: none; }

/* M24: the agent audit report's chain hash wraps anywhere (64 hex characters, no spaces) */
.hash-line { margin: 0.5rem 0; }
code.hash { overflow-wrap: anywhere; word-break: break-all; }
.steps-list li { margin: 0.35rem 0; }

/* Firm console FC1-FC4 (staff per client, client list, work, close across clients). */
.reach { margin-top: 0.5rem; }
h3.label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0.25rem 0; }
pre.json { max-width: 100%; overflow-x: auto; font-size: 0.8rem; background: var(--surface); color: var(--ink); padding: 0.5rem; border-radius: var(--radius); white-space: pre-wrap; word-break: break-word; margin: 0.5rem 0 0; }
.reasons { margin: 0; gap: 0.15rem; }
.reasons a.reason { display: inline-flex; gap: 0.35rem; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.reasons a.reason .icon { width: 16px; height: 16px; flex: none; color: var(--muted); }
.reasons a.reason.high .icon { color: var(--danger); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; }
.pager { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; }
h2.group-h { margin: 1.25rem 0 0.5rem; font-size: 1.05rem; }
h2.group-h .n { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
table.grid .reasons a.reason { background: none; border: 0; border-radius: 0; padding: 0; font-weight: 500; font-size: 0.9rem; line-height: 1.3; white-space: normal; text-align: left; }
.client-list table.grid td:nth-child(2) { min-width: 11rem; }
.client-list table.grid td:nth-child(3) { min-width: 15rem; }
@media (max-width: 40rem) { .client-list table.grid td:nth-child(2), .client-list table.grid td:nth-child(3) { min-width: 0; } }
a.cell-link { display: inline-flex; align-items: center; min-height: 44px; }

/* FC4.1 (ADR-0060): "What each role can do" on the Team page: a collapsed panel; each role in plain words, its capabilities listed. */
details.role-help > summary { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; font-weight: 650; }
details.role-help[open] > summary { margin-bottom: 0.5rem; }
.role-list > li { padding: 0.5rem 0; border-top: 1px solid var(--line); }
.role-list > li:first-child { border-top: 0; }
.role-list .sub { display: block; }
/* ───────── FC4.1: agent pre-reviews (ADR-0061) ───────── */
.prereview-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; margin: 0.5rem 0; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--raised); }
.prereview-line > .icon { flex: none; color: var(--muted); }
.prereview-line > p { flex: 1 1 14rem; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.prereview-line code { overflow-wrap: anywhere; }
.pre-notes { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.flags .card-head h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.with-icon { display: inline-flex; align-items: center; gap: 0.35rem; }
@media (min-width: 40.01rem) { table.grid td .prereview-line { max-width: 15rem; } table.grid td .prereview-line > p { flex-basis: 100%; } }

/* FC4.1b (ADR-0060): the Roles page. Matrix cells say Yes / Through a client role / No in words and an icon (never colour alone);
   role cards wrap; the editor lists each capability with its plain words. Tables become cards at 360px like every grid. */
.cap-yes, .cap-up, .cap-no { display: inline-flex; align-items: center; gap: 0.35rem; }
.cap-yes { color: var(--accent); font-weight: 650; }
.cap-up { color: var(--ink); }
.cap-no { color: var(--muted); }
.cap-yes .icon, .cap-up .icon, .cap-no .icon { width: 18px; height: 18px; flex: none; }
.role-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0.75rem; margin-block: 0.75rem 1.25rem; }
.role-cards > .card { margin: 0; }
.matrix-area { margin-top: 1rem; }
.cap-area { display: grid; gap: 0.5rem; }
.cap-choice .sub { display: block; font-weight: 400; }
.cap-choice strong { display: block; }
details.who > summary { white-space: nowrap; }
details.matrix-area { margin-top: 0.75rem; border-top: 1px solid var(--line); }
details.matrix-area > summary { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; font-weight: 650; }
details.matrix-area > summary .sub { margin-left: auto; font-weight: 400; }
details.matrix-area[open] > summary .icon { transform: rotate(180deg); }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
@media (min-width: 641px) { details.matrix-area table.grid th:not(:first-child), details.matrix-area table.grid td:not(:first-child) { white-space: nowrap; } }

/* FC4.2: the close dashboard, one compact row per client (container query: one line where the list is wide, two lines at about
   1024px, stacked at 360px), the pre-review as one chip, preparer/reviewer condensed, details (what is left, sign-offs, the agent's
   notes, the client's close settings) folded under each row. No horizontal scroll at any width. */
.chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.2rem 0.75rem; border-radius: 999px; border: 1px solid var(--line);
  font-size: 0.85rem; font-weight: 650; text-decoration: none; color: var(--ink); background: var(--raised); white-space: nowrap; max-width: 100%; }
.chip > span { overflow: hidden; text-overflow: ellipsis; }
.chip:hover { border-color: var(--accent); }
.chip .icon { width: 16px; height: 16px; }
.chip .own { color: var(--warn); }
.chip.s-approved, .chip.s-pending, .chip.s-rejected { border-color: transparent; }
.close-console { container-type: inline-size; }
.close-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.close-head { display: none; }
.close-row { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-areas: "sel name" ". status" ". people" ". open" "more more";
  gap: 0.35rem 0.5rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.close-row > .c-sel { grid-area: sel; }
.close-row > .c-name { grid-area: name; min-width: 0; }
.close-row > .c-status { grid-area: status; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-width: 0; }
.close-row > .c-people { grid-area: people; display: flex; flex-direction: column; min-width: 0; font-size: 0.9rem; }
.close-row > .c-open { grid-area: open; }
.close-row > .close-more { grid-area: more; min-width: 0; }
.c-name strong { display: block; }
.who-line { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.who-role { flex: none; width: 4.6rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 650; }
.who-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-name.signed { color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; }
.who-name.signed .icon { width: 16px; height: 16px; flex: none; }
.close-more > summary { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.5rem; margin-left: -0.5rem; cursor: pointer; font-weight: 600; font-size: 0.9rem;
  border-radius: var(--radius); border: 1px solid transparent; }
.close-more > summary .sub { display: inline; }
.close-more > summary .icon { width: 18px; height: 18px; transition: transform 0.15s; }
.close-more[open] > summary .icon { transform: rotate(180deg); }
.close-more-body { display: grid; gap: 1rem; padding: 0.75rem; margin-top: 0.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.close-more-body .close-settings h3 { display: flex; align-items: center; gap: 0.35rem; }
.close-more-body details[open] form, .close-more-body form { margin: 0; }
.agent-switches { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.agent-switches .switch { padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.agent-switches .switch p { margin: 0; }
.close-bulk .grid-form .field.wide-ish { flex: 2 1 16rem; }
@container (min-width: 34rem) {
  .close-row { grid-template-columns: 2.75rem minmax(0, 1.3fr) minmax(0, 1fr) auto; grid-template-areas: "sel name name open" ". status people people" ". more more more"; }
  .agent-switches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 52rem) {
  .close-head { display: grid; grid-template-columns: 2.75rem minmax(0, 1.9fr) minmax(0, 1.25fr) minmax(0, 1.2fr) 6.5rem; gap: 0.5rem; padding: 0 0 0.35rem;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 650; }
  .c-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .close-row { grid-template-columns: 2.75rem minmax(0, 1.9fr) minmax(0, 1.25fr) minmax(0, 1.2fr) 6.5rem; grid-template-areas: "sel name status people open" ". more more more more"; row-gap: 0; }
  .close-row > .close-more > summary { min-height: 44px; }
  .close-more-body:has(> .close-settings) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* FC4.2: exceptions. The Adjust sheet lists each client capability with what the role gives, a three-state choice and an optional
   end date (a row at desktop, a card at 360px); the Team page marks people and client rows with exceptions. */
.badge .icon { width: 14px; height: 14px; vertical-align: -2px; }
.head-badges { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.client-rows > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0.15rem 0; }
.client-row-name { min-width: 0; }
.client-row-name .sub { display: inline; margin-left: 0.25rem; }
.btn.adjust { padding-inline: 0.75rem; font-size: 0.9rem; }
.exc-mark { display: inline-flex; vertical-align: middle; color: var(--warn); }
.exc-mark .icon { width: 16px; height: 16px; }
.exc-area h2 { margin-top: 1.25rem; }
.exc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.exc-row { display: grid; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.exc-row.changed { border-left: 4px solid var(--warn); }
.exc-cap strong { display: block; }
.exc-now { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
fieldset.tri { display: flex; margin: 0; padding: 0; border: 0; min-width: 0; }
.tri-opt { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 44px; padding: 0 0.6rem; border: 1px solid var(--line);
  background: var(--raised); cursor: pointer; font-weight: 600; white-space: nowrap; }
.tri-opt + .tri-opt { border-left: 0; }
.tri-opt:first-of-type { border-radius: var(--radius) 0 0 var(--radius); }
.tri-opt:last-of-type { border-radius: 0 var(--radius) var(--radius) 0; }
.tri-opt input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); }
.tri-opt:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.tri-opt:has(input[value="deny"]:checked) { background: var(--danger-soft); border-color: var(--danger); }
.tri-opt.off { color: var(--muted); cursor: not-allowed; }
.exc-until { display: flex; flex-direction: column; gap: 0.25rem; }
.exc-until input { width: 100%; }
.exc-why, .exc-fixed { margin: 0; }
@media (min-width: 900px) {
  .exc-row { grid-template-columns: minmax(0, 1fr) 19rem 10.5rem; grid-template-areas: "cap tri until" "cap why why"; align-items: center; column-gap: 1rem; }
  .exc-row > .exc-cap { grid-area: cap; }
  .exc-row > fieldset.tri { grid-area: tri; }
  .exc-row > .exc-until { grid-area: until; }
  .exc-row > .exc-why { grid-area: why; }
  .exc-row:has(> .exc-fixed) { grid-template-columns: minmax(0, 1fr) 29.5rem; grid-template-areas: "cap fixed"; }
  .exc-row > .exc-fixed { grid-area: fixed; }
}

/* R1 (ADR-0068): the agent's explanations and the "Allow AI agents to finish reconciliations" switch. */
.explanations { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .5rem; }
.explanations .expl { border-left: 3px solid var(--line, #d0d5dd); padding: .25rem .75rem; display: grid; gap: .25rem; overflow-wrap: anywhere; }
.explanations .expl.exact { border-left-color: var(--accent, #2f6f4f); }
.panel .setting { margin-top: 1rem; }
.badge.recon { white-space: normal; max-width: 100%; }

/* ───────── TS1: 1099s and W-9s (ADR-0070) ───────── */
.csv-box { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); margin: 0.25rem 0 1rem; }
.csv-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.csv-box pre { margin: 0; padding: 0.75rem; white-space: pre; font-size: 0.78rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
code.sha { overflow-wrap: anywhere; word-break: break-all; }
.secret-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.05em; }
.w9-form .scopes { display: grid; gap: 0.25rem; }
.cert { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cert h2 { margin-top: 0; font-size: 1.1rem; }