/* ============================================================
   TALLY — the contractor's ledger.
   Warm asphalt (dark) + warm paper (light), one marigold signal,
   money in green/clay. Theme follows the device by default; the
   toggle in Settings can force light or dark.
   ============================================================ */
:root {
  /* ---- DARK (asphalt) — the default ---- */
  --bg: #16130E;
  --bg-glow: radial-gradient(1100px 560px at 50% -12%, #241d12 0%, #16130E 58%);
  --surface: #201b13;
  --surface-grad: linear-gradient(180deg, #221d15 0%, #191510 100%);
  --surface-2: #2a2318;
  --surface-3: #352d20;
  --line: rgba(245,238,224,.10);
  --line-2: rgba(245,238,224,.17);
  --ink: #F5EEE0;
  --muted: #ab9d85;
  --faint: #7c7059;

  --accent: #F8AC2C;          /* marigold — signal */
  --accent-deep: #E08808;
  --accent-ink: #241d12;      /* text/icon on a marigold surface */
  --accent-fg: #F8AC2C;       /* marigold used as text/icon (theme-adaptive) */
  --accent-soft: rgba(248,172,44,.14);
  --accent-ring: rgba(248,172,44,.30);

  --green: #4FC08D;
  --red: #EC6C4F;
  --green-soft: rgba(79,192,141,.13);
  --red-soft: rgba(236,108,79,.13);
  --amber-soft: rgba(248,172,44,.14);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 22px -10px rgba(0,0,0,.6);
  --shadow-pop: 0 14px 40px -14px rgba(0,0,0,.72);
  --nav-bg: rgba(18,15,10,.82);
  --topbar-bg: rgba(22,19,14,.72);
  color-scheme: dark;

  /* ---- geometry & type (shared) ---- */
  --r-lg: 18px; --r-md: 13px; --r-sm: 10px;
  --font: "Helvetica Neue", Helvetica, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
}

/* ---- LIGHT (paper / desk mode) ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F3EDE1;
    --bg-glow: radial-gradient(1100px 560px at 50% -12%, #fbf6ec 0%, #F3EDE1 58%);
    --surface: #FCF8EF;
    --surface-grad: linear-gradient(180deg, #FDFAF3 0%, #F7F1E4 100%);
    --surface-2: #EFE8D8;
    --surface-3: #E5DCC8;
    --line: rgba(40,30,16,.12);
    --line-2: rgba(40,30,16,.22);
    --ink: #241E14;
    --muted: #6f6349;
    --faint: #9a8c71;
    --accent-ink: #241d12;
    --accent-fg: #B0710A;      /* deeper marigold for text on paper */
    --accent-soft: rgba(224,136,8,.14);
    --accent-ring: rgba(224,136,8,.30);
    --green: #148A57;
    --red: #C1401F;
    --green-soft: rgba(20,138,87,.12);
    --red-soft: rgba(193,64,31,.12);
    --amber-soft: rgba(224,136,8,.14);
    --shadow-1: 0 1px 2px rgba(60,44,20,.08);
    --shadow-2: 0 8px 24px -12px rgba(60,44,20,.24);
    --shadow-pop: 0 16px 44px -16px rgba(60,44,20,.34);
    --nav-bg: rgba(250,246,238,.85);
    --topbar-bg: rgba(243,237,225,.75);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F3EDE1;
  --bg-glow: radial-gradient(1100px 560px at 50% -12%, #fbf6ec 0%, #F3EDE1 58%);
  --surface: #FCF8EF;
  --surface-grad: linear-gradient(180deg, #FDFAF3 0%, #F7F1E4 100%);
  --surface-2: #EFE8D8;
  --surface-3: #E5DCC8;
  --line: rgba(40,30,16,.12);
  --line-2: rgba(40,30,16,.22);
  --ink: #241E14;
  --muted: #6f6349;
  --faint: #9a8c71;
  --accent-ink: #241d12;
  --accent-fg: #B0710A;
  --accent-soft: rgba(224,136,8,.14);
  --accent-ring: rgba(224,136,8,.30);
  --green: #148A57;
  --red: #C1401F;
  --green-soft: rgba(20,138,87,.12);
  --red-soft: rgba(193,64,31,.12);
  --amber-soft: rgba(224,136,8,.14);
  --shadow-1: 0 1px 2px rgba(60,44,20,.08);
  --shadow-2: 0 8px 24px -12px rgba(60,44,20,.24);
  --shadow-pop: 0 16px 44px -16px rgba(60,44,20,.34);
  --nav-bg: rgba(250,246,238,.85);
  --topbar-bg: rgba(243,237,225,.75);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); background-attachment: fixed; color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: env(safe-area-inset-bottom);
  transition: background-color .3s ease, color .3s ease;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg-glow); }
#app { max-width: 640px; margin: 0 auto; padding: 12px 16px 126px; animation: fade .24s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, #app { animation: none !important; transition: none !important; } }

a { color: var(--accent-fg); text-decoration: none; }
h1 { font-size: 21px; font-weight: 750; letter-spacing: -.015em; margin: 4px 0 14px; text-wrap: balance; }
h2 { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 24px 2px 10px; }

.topbar {
  display: flex; align-items: center; gap: 8px; margin: -12px -16px 16px;
  padding: 14px 16px 12px; position: sticky; top: 0; z-index: 20;
  background: var(--topbar-bg); backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid var(--line);
}
.topbar .back { min-width: 44px; min-height: 44px; flex: 0 0 44px; font-size: 22px; line-height: 1; padding: 0; color: var(--muted); margin-left: -4px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; box-shadow: none; }
.topbar button.back { min-width: 44px; min-height: 44px; border: 0; background: none; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; }
.topbar .back svg { width: 24px; height: 24px; }
.topbar h1 { margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Same 44px minimum as .back — a topbar icon is a thumb target, not a glyph. */
.topbar .gear { font-size: 19px; padding: 6px; line-height: 1; border-radius: var(--r-sm); color: var(--muted); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.topbar .gear svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topbar select { width: auto; flex-shrink: 0; }

.card {
  background: var(--surface-grad); border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px;
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.card.tap { cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.card.tap:active { transform: scale(.988); border-color: var(--line-2); }

.row { display: flex; align-items: center; gap: 12px; }
.row .grow { flex: 1; min-width: 0; }
.dim { color: var(--muted); font-size: 14px; }
.small { font-size: 13px; }
.money { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.green { color: var(--green); }
.amber { color: var(--accent-fg); }
.red { color: var(--red); }
.right { text-align: right; }

/* ---- perforation divider (a torn receipt line) ---- */
.perf { height: 1px; margin: 16px 0; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 13px); }

/* ---- job / section cards: money-forward ---- */
.jcard { display: flex; align-items: center; gap: 12px; }
.jcard .jbody { flex: 1; min-width: 0; }
.jcard .jname { font-weight: 650; font-size: 16px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jcard .jmeta { color: var(--faint); font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jcard .jnet { text-align: right; flex-shrink: 0; }
.jcard .jnet .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
.jcard .jnet .l { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-top: 1px; }
.jcard .lead {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 20px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.scan-btn {
  flex-shrink: 0; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 12px; padding: 0;
  background: var(--surface-2); border: 1px solid var(--line); display: flex;
  align-items: center; justify-content: center; color: var(--accent-fg);
}
.scan-btn:active { background: var(--surface-3); }
.scan-btn svg { width: 21px; height: 21px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650;
  border-radius: 999px; padding: 3px 10px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
.badge.warn { background: var(--amber-soft); color: var(--accent-fg); border-color: transparent; }
.badge.good { background: var(--green-soft); color: var(--green); border-color: transparent; }
/* Filed by the machine, not by a person. Stated, never celebrated. */
.badge.auto-filed { background: var(--surface-3); color: var(--muted); border-color: transparent; }

button, .btn {
  appearance: none; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer;
  background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 600;
  padding: 12px 16px; text-align: center; display: inline-block;
  transition: transform .1s ease, filter .1s ease;
}
button { min-height: 44px; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
button:active, .btn:active { transform: scale(.97); }
.btn-primary {
  background: radial-gradient(circle at 50% 0%, var(--accent), var(--accent-deep));
  color: var(--accent-ink); border-color: transparent; box-shadow: 0 6px 18px -8px var(--accent-ring); font-weight: 750;
}
.btn-primary:active { filter: brightness(.96); }
.btn-danger { background: var(--red-soft); color: var(--red); border-color: transparent; }
.btn-block { display: block; width: 100%; margin-top: 10px; }
.btn-sm { padding: 8px 13px; font-size: 14px; border-radius: var(--r-sm); }

/* segmented control (theme switch etc.) */
.seg { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 9px 8px; border-radius: var(--r-sm); font-size: 14px; color: var(--muted); font-weight: 600; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ---- stat hero ---- */
.stat { text-align: center; padding: 8px 0 2px; }
.stat .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 36px; letter-spacing: -.03em; line-height: 1; }
.stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-top: 8px; }

label.field { display: block; margin-bottom: 14px; }
label.field span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 13px; font: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.field.lowconf input, .field.lowconf select { border-color: var(--accent); background: var(--accent-soft); }
.field.lowconf span::after { content: "  ·  check"; color: var(--accent-fg); font-weight: 600; }

/* per-field review state: a marker on every fact-first field, plus a soft
   highlight on the ones worth a second look (missing / check / conflict). */
.field.needs-attn input, .field.needs-attn select, .field.needs-attn textarea { border-color: var(--accent); background: var(--accent-soft); }
.fact-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle; line-height: 1.6;
}
.fact-badge.ok { background: var(--green-soft); color: var(--green); }
.fact-badge.ai { background: var(--surface-3); color: var(--muted); }
.fact-badge.muted { background: transparent; color: var(--faint); padding-left: 0; padding-right: 0; }
.fact-badge.review, .fact-badge.missing { background: var(--amber-soft); color: var(--accent-fg); }
.fact-badge.conflict { background: var(--red-soft); color: var(--red); }

.summary-table { width: 100%; border-collapse: collapse; }
.summary-table td { padding: 7px 0; font-size: 15px; }
.summary-table td:first-child { color: var(--muted); }
.summary-table td:last-child { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.summary-table tr.rule td { border-top: 1px solid var(--line-2); padding-top: 11px; }
.summary-table tr.total td { font-weight: 750; font-size: 19px; }
.summary-table tr.total td:first-child { color: var(--ink); }

.catbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 14px 0 8px; background: var(--surface-2); }
.catbar div { min-width: 3px; transition: flex .3s ease; }
.catlegend { display: flex; flex-wrap: wrap; gap: 7px 16px; font-size: 13px; color: var(--muted); }
.catlegend .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.catlegend .money { color: var(--ink); }

/* A month heading over one card of receipts. Same 11px uppercase voice as every
   other h2 in the app, with the month's own count and subtotal on the right.
   Tokens only, so both themes follow without a second rule. */
.month-head { display: flex; align-items: baseline; gap: 10px; margin: 6px 2px 8px; }
.month-head .mh-name { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.month-head .mh-meta { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }

.receipt-item { display: flex; gap: 13px; align-items: center; padding: 11px 4px; border-radius: var(--r-md); border-bottom: 1px solid var(--line); cursor: pointer; transition: background .1s ease; }
.receipt-item:last-child { border-bottom: 0; }
.receipt-item:active { background: var(--surface-2); }
.receipt-item img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.receipt-item .thumb-ph { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid var(--line); }
.receipt-item b { font-weight: 600; }
.receipt-item .right { min-width: 0; max-width: 48%; }
.source-money { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }

/* what the books still need from a held receipt — one small amber word each.
   Nothing here is tappable: the whole card opens the receipt, so these stay
   text-sized rather than thumb-sized. */
.missing-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.missing-chips .mchip {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--r-sm);
  background: var(--amber-soft); border: 1px solid var(--accent-ring); color: var(--accent-fg);
  font-size: 10.5px; font-weight: 700; line-height: 1.55; letter-spacing: .01em; white-space: nowrap;
}

.review-img { width: 100%; max-height: 44vh; object-fit: contain; border-radius: var(--r-lg); background: #05080d; border: 1px solid var(--line); }
.lineitems .li-row { display: grid; grid-template-columns: minmax(120px, 1fr) 66px 96px 96px 44px; gap: 6px; margin-bottom: 12px; align-items: end; }
.lineitems .li-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lineitems .li-field span { color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.lineitems .li-row input { width: 100%; min-width: 0; padding: 9px; font-size: 14px; }
.lineitems .li-math-warning { grid-column: 1 / -1; margin: 0; }
.lineitems .li-cat { grid-column: 1 / -1; padding: 8px 9px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.lineitems .li-cat:has(option:checked:not([value=""])) { color: var(--ink); }
.li-del { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--red); padding: 0; font-size: 18px; flex-shrink: 0; }

@media (max-width: 640px) {
  .lineitems .li-row { grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; }
  .lineitems .li-desc-field { grid-column: 1 / 4; }
  .lineitems .li-del { grid-column: 4; grid-row: 1; align-self: end; min-height: 44px; }
}

.pin-pad { max-width: 320px; margin: 14vh auto 0; text-align: center; }
.pin-pad h1 { font-size: 26px; margin-bottom: 22px; }
.pin-pad input { text-align: center; font-size: 26px; letter-spacing: 10px; font-family: var(--mono); }

.center-fill { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The runtime notice strip. It sits above the app, never in place of it. */
#runtime-banner[hidden] { display: none; }
.runtime-banner {
  position: sticky; top: 0; z-index: 55;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top));
  font-size: 13px; line-height: 1.35; font-weight: 500;
  background: var(--surface-2); border-bottom: 1px solid var(--line-2); color: var(--ink);
}
.runtime-banner-text { flex: 1 1 auto; }
.runtime-banner-detail { display: block; color: var(--muted); font-weight: 400; }
.runtime-banner--update-required { background: var(--accent-soft); border-bottom-color: var(--accent-ring); }
.runtime-banner--update-ready { background: var(--green-soft); }
.runtime-banner--offline { background: var(--surface-2); color: var(--muted); }
.runtime-banner-action {
  flex: 0 0 auto; padding: 6px 12px; font-size: 13px; font-weight: 600;
  border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--ink);
}
.runtime-banner-dismiss {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1;
  border-radius: 50%; background: transparent; border: 0; color: var(--muted);
}

#toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none;
  background: var(--surface-3); border: 1px solid var(--line-2); color: var(--ink);
  padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 500; max-width: 88vw;
  transition: all .25s cubic-bezier(.2,.8,.2,1); z-index: 60; text-align: center; box-shadow: var(--shadow-pop);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.modal-back { position: fixed; inset: 0; background: rgba(3,7,12,.55); backdrop-filter: blur(3px); z-index: 40; display: flex; align-items: flex-end; justify-content: center; animation: fade .18s ease; }
.modal {
  background: var(--surface); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 22px 22px 0 0; padding: 20px; width: 100%; max-width: 640px; max-height: 86vh;
  overflow-y: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-pop);
  animation: sheet .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheet { from { transform: translateY(20px); } to { transform: none; } }
.modal h2 { margin: 0 0 14px; color: var(--ink); font-size: 19px; text-transform: none; letter-spacing: -.01em; }
.jobpick { display: block; width: 100%; text-align: left; margin-bottom: 8px; }

/* ---- bottom navigation ---- */
#bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 35;
  display: flex; align-items: center; justify-content: space-around;
  background: var(--nav-bg); backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); border-top: 1px solid var(--line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
#bottom-nav[hidden] { display: none; }
#bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--faint); padding: 3px 0; position: relative; text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: color .15s ease;
}
#bottom-nav a svg { width: 24px; height: 24px; stroke-width: 1.9; }
#bottom-nav a span { font-size: 10px; font-weight: 600; letter-spacing: .02em; }
#bottom-nav a.active { color: var(--accent-fg); }
#bottom-nav #nav-scan {
  width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; color: var(--accent-ink);
  background: radial-gradient(circle at 50% 32%, var(--accent), var(--accent-deep));
  margin: -24px 6px 0; box-shadow: 0 0 0 2px var(--accent-deep), 0 8px 22px -6px var(--accent-ring);
  border: 4px solid var(--bg); display: flex; align-items: center; justify-content: center; transition: transform .12s ease;
}
#bottom-nav #nav-scan:active { transform: scale(.93); }
#bottom-nav #nav-scan svg { width: 26px; height: 26px; stroke-width: 2; }
#bottom-nav .nav-badge {
  position: absolute; top: -2px; left: calc(50% + 8px); background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 999px; min-width: 17px; padding: 1px 4px;
  text-align: center; border: 2px solid var(--bg); font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  #app { max-width: 940px; padding-left: 28px; padding-right: 28px; }
  .submit-bar { bottom: 96px; }
  .topbar { margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; }
  h1 { font-size: 24px; }
  #bottom-nav { left: 50%; right: auto; transform: translateX(-50%); width: 540px; border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; bottom: 14px; }
  .card.tap { transition: transform .12s ease, border-color .12s ease; }
  .card.tap:hover { border-color: var(--line-2); transform: translateY(-1px); }
  .receipt-item:hover { background: var(--surface-2); }
  button, .btn, a { cursor: pointer; }
  .modal-back { align-items: center; }
  .modal { border: 1px solid var(--line); border-radius: 20px; max-width: 560px; }
}

/* ============================================================
   Product redesign components (Board dashboard, Money hub,
   Job tabs, category bars, review flow)
   ============================================================ */

/* dashboard money snapshot */
.snapshot { background: var(--surface-grad); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 8px; margin-bottom: 14px; box-shadow: var(--shadow-1); }
.snapshot .sg { display: grid; grid-template-columns: repeat(3, 1fr); }
.snapshot .mini { text-align: center; padding: 0 6px; position: relative; }
.snapshot .mini + .mini::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line-2); }
.snapshot .mv { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 750; font-size: 19px; letter-spacing: -.02em; line-height: 1.1; }
.snapshot .ml { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-top: 5px; }
.snapshot .ml b { color: var(--muted); font-weight: 700; }

/* "needs you" actionable strip */
.needs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 6px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.needs::-webkit-scrollbar { display: none; }
.needs .chip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink);
}
.needs .chip.act { background: var(--amber-soft); border-color: transparent; color: var(--accent-fg); }
.needs .chip .cn { font-family: var(--mono); font-weight: 750; }

/* search filter chips — the .needs strip, but toggleable and thumb-sized */
.filter-chips { margin: 2px 0 14px; }
.filter-chips .chip { min-height: 44px; font-weight: 650; }
.filter-chips .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-fg); }

/* personal tally: counts only, never company money */
.tally-card { padding: 13px 16px; }
.tally-card .tally-mark { font-size: 22px; flex: 0 0 auto; }

/* one-tap confirm hero: nothing needed a correction, so saving is the only act */
.allgreen-hero { border-color: var(--green); background: var(--green-soft); }
.allgreen-hero .ag-head { display: flex; align-items: center; gap: 10px; }
.allgreen-hero .ag-head b { font-size: 17px; letter-spacing: -.01em; }
.allgreen-hero .ag-mark {
  width: 28px; height: 28px; min-width: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: var(--bg); font-weight: 800; font-size: 15px; line-height: 1;
}
.allgreen-hero p { margin: 8px 0 0; }
.allgreen-hero .ag-save { margin-top: 14px; font-size: 17px; padding: 15px 16px; }

/* revert-to-scanned chip: the model's original read, one tap away */
.revert-chip {
  display: inline-flex; align-items: center; margin-top: 7px; min-height: 44px;
  padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 650;
  background: var(--surface-2); border: 1px dashed var(--line-2); color: var(--muted);
  box-shadow: none; max-width: 100%; overflow-wrap: anywhere; text-align: left;
}
.revert-chip:active { background: var(--surface-3); color: var(--ink); }
@media (min-width: 900px) { .revert-chip:hover { color: var(--ink); border-color: var(--accent); } }

/* emailed receipts: jump from a field to the line of the message it came from */
.src-chip {
  display: inline-flex; align-items: center; margin-top: 7px; margin-left: 7px;
  min-height: 44px; padding: 8px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; background: var(--surface-2);
  border: 1px solid var(--line-2); color: var(--muted); box-shadow: none;
}
.src-chip::before { content: "¶"; margin-right: 5px; opacity: 0.7; }
.src-chip:active { background: var(--surface-3); color: var(--ink); }
@media (min-width: 900px) { .src-chip:hover { color: var(--ink); border-color: var(--accent); } }

.source-panel .src-doc {
  max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); padding: 8px 4px; margin-top: 8px;
}
.src-line {
  display: flex; gap: 8px; align-items: baseline; padding: 3px 8px;
  font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere;
  border-left: 3px solid transparent; border-radius: 3px;
}
.src-line .src-text { white-space: pre-wrap; }
.src-line.cited { border-left-color: var(--accent); background: var(--surface); }
.src-tag {
  flex: none; font-size: 10.5px; font-weight: 750; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--accent); padding-top: 2px;
}
.src-line.flash { animation: src-flash 2.2s ease-out 1; }
@keyframes src-flash {
  0%, 45% { background: var(--amber-soft, var(--surface-3)); }
  100% { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) {
  .src-line.flash { animation: none; background: var(--surface-3); }
}

/* preselected capture section — names the choice and offers the picker */
.capture-job-changer { text-align: left; font-weight: 600; margin-bottom: 4px; }
.capture-job-changer b { font-weight: 750; }

/* segmented tabs (job view) — shares .seg look */
.tabs { display: flex; gap: 5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px; margin-bottom: 12px; }
.tabs button { flex: 1; border: 0; background: transparent; padding: 9px 8px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--muted); font-weight: 600; }
.tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* horizontal category bars ("where it went") */
.hbars { display: flex; flex-direction: column; gap: 13px; }
.hbar .hrow { display: flex; align-items: baseline; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }
.hbar .hk { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .hv { font-family: var(--mono); font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: 10px; color: var(--ink); }
.hbar .htrack { height: 9px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.hbar .hfill { height: 100%; border-radius: 5px; transition: width .35s cubic-bezier(.2,.8,.2,1); }

/* compact bucket tiles */
.tilerow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mtile { border: 1px solid var(--line); background: var(--surface-grad); border-radius: var(--r-md); padding: 13px 14px; cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.mtile:active { transform: scale(.985); border-color: var(--line-2); }
.mtile .mi { font-size: 18px; }
.mtile .mn { font-size: 13.5px; font-weight: 650; margin-top: 8px; }
.mtile .mm { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 2px; }

/* review-flow confidence banner */
.conf-banner { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 600; margin-bottom: 12px; }
.conf-banner.review { background: var(--amber-soft); color: var(--accent-fg); }
.conf-banner.ok { background: var(--green-soft); color: var(--green); }
.conf-banner.fail { background: var(--red-soft); color: var(--red); }
/* Explanatory, not a warning: nothing is wrong and nothing needs fixing. */
.conf-banner.info { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); font-weight: 550; }
.conf-banner.auto-filed-banner { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); font-weight: 550; }
.conf-banner.auto-filed-banner .row { width: 100%; align-items: center; gap: 10px; }

/* Automatic FX evidence: read-only accounting context, never another form. */
.fx-evidence { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-md); padding: 13px 14px; margin: 8px 0 14px; }
.fx-evidence.provisional { background: var(--amber-soft); border-color: transparent; }
.fx-evidence.resolved { background: var(--green-soft); border-color: transparent; }
.fx-evidence.pending { background: var(--surface-2); }
.fx-evidence-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fx-evidence-head b { font-family: var(--mono); font-size: 17px; }
.fx-evidence p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; }
.fx-evidence small { display: block; color: var(--muted); margin-top: 7px; font-size: 12px; }
.fx-auto-note { display: flex; gap: 11px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 13px; margin: -2px 0 14px; }
.fx-auto-note > svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--accent-fg); margin-top: 1px; }
.fx-auto-note b, .fx-auto-note span { display: block; }
.fx-auto-note b { font-size: 13.5px; }
.fx-auto-note span { color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.4; }

/* Settings setup/status card follows the existing surface and token language. */
.fx-settings-card { padding: 17px; }
.fx-settings-head { display: flex; align-items: flex-start; gap: 12px; }
.fx-settings-head p { color: var(--muted); font-size: 13px; line-height: 1.4; margin: 4px 0 0; }
.fx-settings-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent-fg); }
.fx-settings-icon svg { width: 22px; height: 22px; }
.status-pill { flex: 0 0 auto; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 750; border: 1px solid var(--line); color: var(--muted); }
.status-pill.ready { background: var(--green-soft); color: var(--green); border-color: transparent; }
.status-pill.paused { background: var(--amber-soft); color: var(--accent-fg); border-color: transparent; }
.status-pill.setup { background: var(--surface-2); color: var(--muted); }
.settings-loading { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.settings-loading .spinner { width: 22px; height: 22px; flex: 0 0 auto; }

/* Settings hub: one grouped card per area, each row a 44px-plus tap target that
   opens its own sub-page. Built only from the existing surface/line/accent
   tokens so it themes with everything else. */
.settings-identity { padding: 14px 16px; }
.settings-hub-note { margin: -4px 2px 12px; }
.hub-group { padding: 0; overflow: hidden; }
.hub-row-wrap + .hub-row-wrap { border-top: 1px solid var(--line); }
.hub-row {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px; min-height: 44px;
  color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.hub-row:active { background: var(--surface-2); }
.hub-row:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: -3px; }
.hub-row-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--r-sm); font-size: 18px;
  display: grid; place-items: center; background: var(--accent-soft);
}
.hub-row-body { flex: 1 1 auto; min-width: 0; display: block; }
.hub-row-title { display: block; font-weight: 650; font-size: 15px; line-height: 1.25; }
.hub-row-status { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.hub-row-status .status-pill { display: inline-block; }
.hub-row-pending { color: var(--faint); }
.hub-row-unavailable { color: var(--accent-fg); }
.hub-row-chevron { flex: 0 0 auto; color: var(--faint); font-size: 20px; line-height: 1; }
.hub-row-extra:not(:empty) { padding: 0 15px 13px; }
.hub-row-extra .hub-row-retry { min-height: 44px; width: 100%; }
.settings-panel-unavailable { border-style: dashed; }
.settings-panel-unavailable .row { align-items: flex-start; gap: 10px; }
.settings-panel-unavailable p { margin: 4px 0 0; line-height: 1.45; }
.settings-panel-unavailable button { min-height: 44px; margin-top: 12px; }
.fx-policy-list { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 15px 0 12px; padding: 6px 0; }
.fx-policy-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; font-size: 12.5px; }
.fx-policy-list span { color: var(--muted); }
.fx-policy-list b { text-align: right; font-weight: 650; }
.fx-health { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 4px; }
.fx-health span { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 9px; font-size: 11.5px; }
.fx-privacy { border-top: 1px solid var(--line); padding-top: 12px; margin: 14px 0 0; }
.fx-advanced { border-top: 1px solid var(--line); margin: 12px 0 16px; padding-top: 10px; }
.fx-advanced summary { color: var(--faint); font-size: 12px; font-weight: 650; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.fx-advanced > p { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }
.setup-step { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; }
.setup-step > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent-fg); font-weight: 750; }
.setup-step p { color: var(--muted); font-size: 13px; margin: 3px 0 0; line-height: 1.4; }

/* Fact-first receipt submission: factual, thumb-friendly, and single-column on
   narrow phones. Accounting classification is intentionally absent here. */
.responsive-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-items: start; }
.fact-form textarea { resize: vertical; min-height: 82px; }
.fact-form small { color: var(--faint); font-weight: 500; }
.choice-stack { display: grid; gap: 8px; margin-bottom: 14px; }
.choice-stack label { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; }
.choice-stack input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
.choice-stack span, .choice-stack b, .choice-stack small { display: block; }
.choice-stack span { min-width: 0; }
.choice-stack b { font-size: 14px; }
.choice-stack small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.fact-details { padding: 0; overflow: hidden; }
.fact-details > summary { min-height: 54px; padding: 15px 16px; display: flex; align-items: center; font-weight: 650; cursor: pointer; list-style-position: inside; }
.fact-details[open] > summary { border-bottom: 1px solid var(--line); }
.fact-details .detail-body { padding: 16px; }
.fact-details .detail-body > :last-child { margin-bottom: 0; }
.fact-tax-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px 44px; gap: 8px; align-items: end; padding: 11px 0; border-bottom: 1px solid var(--line); }
.fact-tax-row .field { margin-bottom: 0; }
.fact-tax-row .li-del { min-height: 44px; align-self: end; }
.action-row { gap: 8px; margin-top: 10px; }
/* Bottom-sticky submit: stays tappable above #bottom-nav without scrolling. */
.submit-bar {
  position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 30;
  padding: 10px 0 4px; margin-top: 4px;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.submit-bar .btn-primary { box-shadow: var(--shadow-pop); margin: 0; }
.reimbursement-card { border-color: var(--accent-ring); }
.check-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; }
.check-row input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--accent); }
.check-row span, .check-row b, .check-row small { display: block; }
.check-row small { color: var(--muted); margin-top: 3px; }
/* A bordered check row sitting directly under a full-width button needs the
   same breathing room the button gets above it, or the two read as one control. */
.btn-block + .check-row { margin-top: 14px; }
.finance-registration { gap: 8px; padding: 7px 0; align-items: center; }
.finance-registration select { flex: 0 1 150px; width: auto; }
.finance-registration .li-del { min-height: 44px; flex: 0 0 36px; }
.category-setting { min-height: 54px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.category-setting:last-of-type { border-bottom: 0; }
.category-setting.off { opacity: .72; }
.removed-categories { margin-top: 14px; border-top: 1px solid var(--line); }
.removed-categories > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--muted); font-weight: 650; }
.impact-counts { display: grid; gap: 5px; margin-top: 12px; color: var(--muted); font-size: 13px; }
/* A category and the vendors filed under it read as one block: the category
   keeps the border, the vendors are indented beneath it with none. */
.category-block { border-bottom: 1px solid var(--line); }
.category-block:last-of-type { border-bottom: 0; }
.category-block .category-setting { border-bottom: 0; }
.category-block .gl-code { flex: 0 0 96px; width: 96px; padding: 7px; }
.vendor-list { padding: 0 0 8px 22px; border-left: 2px solid var(--line); margin-left: 6px; }
.vendor-row { min-height: 44px; padding: 4px 0; gap: 8px; }
.vendor-row.off { opacity: .72; }
.vendor-add input { padding: 7px; }
.needs-home-list { display: grid; }
.needs-home-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px;
  padding: 7px 0; background: none; border: 0; border-bottom: 1px solid var(--line);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.needs-home-row:last-child { border-bottom: 0; }
.settings-disabled-action button[disabled] { opacity: .55; cursor: not-allowed; }
.settings-disabled-action > .dim { margin-top: 6px; }

@media (max-width: 480px) {
  .responsive-fields { grid-template-columns: 1fr 1fr; }
  .responsive-fields > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fact-tax-row { grid-template-columns: minmax(0, 1fr) 104px 44px; }
  .fact-details .lineitems .li-row { grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; }
  .finance-registration { display: grid; grid-template-columns: minmax(0, 1fr) 44px; }
  .finance-registration select { grid-column: 1; grid-row: 2; width: 100%; }
  .finance-registration .li-del { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 360px) {
  #app { padding-left: 12px; padding-right: 12px; }
  .topbar { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .responsive-fields { grid-template-columns: 1fr; }
  .responsive-fields > * { grid-column: 1 !important; }
  .fact-tax-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .fact-tax-row .fact-tax-amount { grid-column: 1; }
  .fact-tax-row .fact-tax-delete { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 430px) {
  .fx-settings-head { flex-wrap: wrap; }
  .fx-settings-head .grow { flex: 1 1 calc(100% - 56px); }
  .fx-settings-head > .status-pill { margin-left: 54px; }
  .fx-policy-list > div { display: block; }
  .fx-policy-list b { display: block; text-align: left; margin-top: 2px; }
}

@media (max-width: 430px) {
  .settings-panel-unavailable .row { flex-wrap: wrap; }
  .settings-panel-unavailable .status-pill { margin-left: 0; }
  /* The pill drops under the state it belongs to rather than squeezing it. */
  .set-hero-head { flex-wrap: wrap; }
  .set-hero-head > .status-pill { margin-left: 53px; }
  .set-pilot > .set-row { flex-wrap: wrap; }
  .set-pilot > .set-row > .status-pill { margin-left: 0; }
  .set-row-value { max-width: 100%; }
}

@media (max-width: 430px) {
  .topbar { min-width: 0; }
  .topbar h1 { max-width: 100%; }
  .action-row { flex-wrap: wrap; }
  .action-row > * { min-width: 120px; }
}

@media (max-width: 375px) {
  .pager { flex-wrap: wrap; }
  .pager button, .lineitems #li-add, .fact-details #ff-line-add, #ff-tax-add { min-height: 44px; }
  .lineitems .li-cat { min-height: 44px; }
}

@media (max-width: 320px) {
  #app { padding-left: 10px; padding-right: 10px; }
  .topbar { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .fact-details .detail-body { padding: 12px; }
  .fact-tax-row, .lineitems .li-row { column-gap: 5px; }
  #bottom-nav { padding-left: 2px; padding-right: 2px; }
  #bottom-nav #nav-scan { margin-left: 2px; margin-right: 2px; }
}

/* field group label inside a card */
.fgroup { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 4px 2px 10px; }
.fgroup:not(:first-child) { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* pager for multi-page receipts */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.pager .dots { display: flex; gap: 5px; }
.pager .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.pager .dots i.on { background: var(--accent); }

/* The receipt image stays in this document so reviewing it never discards
   unsaved form edits or lets the browser Back button leave the app. */
.receipt-image-open {
  display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-lg);
  background: transparent; box-shadow: none; cursor: zoom-in; overflow: hidden;
}
.receipt-image-open:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 3px; }
.receipt-image-open .review-img { display: block; width: 100%; }
.date-conflict-note {
  display: block; margin-top: 7px; padding: 9px 10px; border-radius: var(--r-sm);
  color: var(--ink); background: var(--amber-soft); border: 1px solid var(--accent);
  font-size: 13px; line-height: 1.35;
}
.date-conflict-note[hidden] { display: none; }

.receipt-viewer {
  position: fixed; inset: 0; z-index: 1000; display: grid;
  grid-template-rows: minmax(56px, auto) minmax(0, 1fr) minmax(60px, auto);
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  color: #fff; background: rgba(9, 12, 18, .97); overscroll-behavior: contain;
}
.receipt-viewer-toolbar {
  min-height: 56px; display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,.14);
  background: rgba(9, 12, 18, .92);
}
.receipt-viewer-toolbar h2 {
  margin: 0; color: #fff; font-size: 16px; letter-spacing: 0;
  line-height: 1.2; text-transform: none;
}
.receipt-viewer-close, .receipt-viewer-page, .receipt-viewer-zoom {
  width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.24); border-radius: 50%;
  color: #fff; background: rgba(255,255,255,.10); box-shadow: none;
  font-size: 30px; line-height: 1;
}
.receipt-viewer-close:focus-visible, .receipt-viewer-page:focus-visible,
.receipt-viewer-zoom:focus-visible {
  outline: 3px solid #f2a72b; outline-offset: 2px;
}
.receipt-viewer-viewport {
  min-width: 0; min-height: 0; display: flex; align-items: center;
  justify-content: center; overflow: hidden; padding: 10px;
}
.receipt-viewer-image {
  display: block; max-width: 100%; max-height: 100%; object-fit: contain;
  transform-origin: center; will-change: transform; touch-action: none;
  user-select: none; -webkit-user-drag: none; cursor: grab;
}
.receipt-viewer-image:active { cursor: grabbing; }
.receipt-viewer-error {
  max-width: 30rem; margin: 20px; color: #fff; text-align: center;
  font-size: 15px; line-height: 1.45;
}
.receipt-viewer-open-error {
  position: fixed; z-index: 950; left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(88px + env(safe-area-inset-bottom)); max-width: 608px;
  margin: 0 auto; padding: 12px 14px; border: 1px solid var(--red);
  border-radius: var(--r-md); color: var(--ink); background: var(--surface);
  box-shadow: var(--shadow-pop); font-size: 14px; line-height: 1.4;
}
.receipt-viewer-controls {
  min-height: 60px; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px; padding: 6px 12px; border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(9, 12, 18, .92);
}
.receipt-viewer-page-label { min-width: 92px; text-align: center; font-size: 14px; }
.receipt-viewer-page:disabled { opacity: .35; }
.receipt-viewer-zoom { font-size: 22px; }
.receipt-viewer-zoom-level { width: 64px; min-width: 64px; font-size: 13px; border-radius: 24px; }

/* section header with an action on the right */
.sechead { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 2px 10px; }
.sechead h2 { margin: 0; }
.sechead a { font-size: 12.5px; color: var(--accent-fg); font-weight: 600; }

/* quiet link row */
.quiet-link { text-align: center; margin-top: 16px; }
.quiet-link a { color: var(--faint); font-size: 13px; }

/* Settings → People & access: a calm list of people, then one focused page per
   person. Built from the same surface/line/accent tokens as the Settings hub,
   so it themes with everything else in both light and dark. */
.people-list { padding: 0; overflow: hidden; }
.people-empty { padding: 15px 16px; margin: 0; }
.person-row {
  display: flex; align-items: center; gap: 13px; padding: 12px 15px; min-height: 44px;
  color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.person-row + .person-row { border-top: 1px solid var(--line); }
.person-row:active { background: var(--surface-2); }
.person-row:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: -3px; }
/* A disabled person is dimmed on the list and fully manageable on their page. */
.person-row.off { opacity: .55; }
.person-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); color: var(--muted); font-size: 13px; font-weight: 750; letter-spacing: .04em;
}
.person-avatar.lg { width: 46px; height: 46px; font-size: 15px; background: var(--accent-soft); color: var(--accent-fg); }
.person-body { flex: 1 1 auto; min-width: 0; display: block; }
.person-name { display: block; font-weight: 650; font-size: 15px; line-height: 1.25; }
.person-status { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.person-chevron { flex: 0 0 auto; color: var(--faint); font-size: 20px; line-height: 1; }
.role-pill {
  flex: 0 0 auto; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 750;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.role-pill.owner { background: var(--amber-soft); color: var(--accent-fg); border-color: transparent; }
.person-head { display: flex; align-items: center; gap: 13px; padding: 14px 16px; }
.person-head.off { opacity: .62; }
.person-fgroup { margin-top: 0; border: 0; padding: 0; }
.role-seg { margin-bottom: 4px; }
.role-seg button { min-height: 44px; }
.person-actions { margin-top: 14px; }
.person-action {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
  padding: 12px 14px; text-align: left; font-weight: 600; border-radius: var(--r-md);
}
.person-action + .person-action { margin-top: 8px; }
.person-action .grow { flex: 1; min-width: 0; }
.email-list { margin: 12px 0 4px; border-top: 1px solid var(--line); }
.email-row { padding: 7px 0; border-bottom: 1px solid var(--line); min-height: 44px; }
.email-row button { flex: 0 0 auto; }
.email-none { padding: 10px 0; }
.person-email-input { margin-top: 10px; }

/* Settings sub-pages that report a state before they offer a control: one hero
   card (icon, plain-language state, pill) over two numbers, then quiet grouped
   rows. Email receipts, Company & finance and Automatic filing share these
   shapes, every colour is a token so both themes follow, and every row is a
   44px-plus target. A row that opens an editor is a <details> — the control
   inside it is the same control that was on the page before. */
.set-hero { padding: 15px 16px; }
.set-hero-head { display: flex; align-items: flex-start; gap: 13px; }
.set-hero-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-sm); font-size: 19px;
  display: grid; place-items: center; background: var(--accent-soft);
}
.set-hero-body { flex: 1 1 auto; min-width: 0; }
.set-hero-title { display: block; font-weight: 700; font-size: 17px; letter-spacing: -.01em; line-height: 1.25; }
.set-hero-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.set-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.set-hero-stat {
  text-align: center; padding: 10px 6px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
}
.set-hero-stat b {
  display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 800; line-height: 1.15;
}
.set-hero-stat span {
  display: block; margin-top: 3px; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
/* Only drawn when the thing it warns about actually happened. */
.set-strip {
  margin: -4px 0 12px; padding: 11px 13px; border-radius: var(--r-md);
  background: var(--amber-soft); color: var(--accent-fg); font-size: 12.5px; line-height: 1.45;
}
.set-note { margin: -2px 2px 12px; }
.set-group { padding: 0; overflow: hidden; }
.set-group > * + * { border-top: 1px solid var(--line); }
.set-group > div:empty { display: none; }
.set-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 12px 15px; text-align: left; color: var(--ink); font: inherit;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
button.set-row:active, summary.set-row:active { background: var(--surface-2); }
button.set-row:disabled { opacity: .5; }
.set-row-body { flex: 1 1 auto; min-width: 0; }
.set-row-title { display: block; font-weight: 650; font-size: 15px; line-height: 1.25; }
.set-row-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.set-row-value { flex: 0 0 auto; max-width: 46%; text-align: right; color: var(--muted); font-size: 13px; font-weight: 650; }
.set-row-chevron { flex: 0 0 auto; color: var(--faint); font-size: 20px; line-height: 1; transition: transform .12s ease; }
.set-edit > summary { list-style: none; cursor: pointer; }
.set-edit > summary::-webkit-details-marker { display: none; }
.set-edit[open] > summary .set-row-chevron { transform: rotate(90deg); }
.set-edit[open] > summary .set-row-value { color: var(--faint); }
.set-row-edit { padding: 2px 15px 14px; }
.set-row-edit > :last-child { margin-bottom: 0; }
/* A note that explains the row above it belongs to that row, so no hairline
   is drawn between the two. */
.set-row-note { padding: 0 15px 12px; margin: -4px 0 0; }
.set-group > .set-row-note { border-top: 0; }
/* A checkbox row inside a group keeps only the hairline that separates it. */
.set-group > .check-row {
  margin: 0; padding: 12px 15px; border-left: 0; border-right: 0; border-bottom: 0;
  border-radius: 0; background: transparent;
}
.set-group > .check-row:first-child { border-top: 0; }
.finance-reg-list { padding: 6px 15px 2px; }
.finance-reg-list:empty { display: none; }
.set-pilot > .set-row { min-height: 0; padding-bottom: 6px; align-items: flex-start; }
.set-pilot-action { margin: 4px 15px 14px; min-height: 44px; }
.set-explainer { margin-top: 2px; }
.set-explainer > summary {
  min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer;
  color: var(--muted); font-weight: 650; font-size: 13px; list-style: none;
}
.set-explainer > summary::-webkit-details-marker { display: none; }
.set-caret { color: var(--faint); transition: transform .12s ease; display: inline-block; }
.set-explainer[open] > summary .set-caret { transform: rotate(90deg); }
.set-explainer .set-explainer-body { padding: 2px 2px 6px; }
.set-explainer p { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 10px; }
.set-explainer p:last-child { margin-bottom: 0; }
.card > .set-explainer { margin: 12px 0 -4px; border-top: 1px solid var(--line); }
.responsive-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------------------------------------------- move / bulk-select / processing */
/* Pulsing "AI reading…" list badge (replaces the static ⏳). */
.badge.ai-reading { background: var(--accent-soft); color: var(--accent-fg); border-color: transparent; animation: aiPulse 1.4s ease-in-out infinite; }
@keyframes aiPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Scanning line sweeping over a receipt while OCR runs. */
.scan-wrap { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.scan-wrap .scan-line {
  position: absolute; left: 0; right: 0; top: 0; height: 22%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 34%, transparent), transparent);
  animation: scanSweep 2.1s cubic-bezier(.5,0,.5,1) infinite; pointer-events: none;
}
@keyframes scanSweep { 0% { transform: translateY(-120%); } 100% { transform: translateY(560%); } }
.reading-pulse { animation: aiPulse 1.6s ease-in-out infinite; }
/* Animated dot next to an active count (inbox Processing header, etc.). */
.proc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; animation: aiPulse 1.3s ease-in-out infinite; }
.needs .chip.pulse { animation: aiPulse 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .scan-wrap .scan-line { display: none; } }

/* Section picker (move to…) */
.section-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-height: 52vh; overflow-y: auto; }
.section-pick { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 12px 14px; }
.section-pick .sp-ic { font-size: 20px; flex: 0 0 auto; }
.section-pick .sp-body { display: flex; flex-direction: column; min-width: 0; }
.section-pick .sp-body .dim { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Multi-select mode */
.selecting .receipt-item { padding-left: 40px; position: relative; }
.selecting .receipt-item::before {
  content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface);
  box-sizing: border-box; transition: none;
}
.selecting .receipt-item.selected::before {
  border-color: var(--accent); background: var(--accent);
  content: "✓"; color: #fff; font-size: 13px; font-weight: 800; text-align: center; line-height: 18px;
}
.select-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; align-items: center; z-index: 55; background: var(--surface-3);
  border: 1px solid var(--line-2); border-radius: 16px; padding: 8px; box-shadow: var(--shadow-pop); max-width: 94vw;
}
.select-bar button { white-space: nowrap; }

/* Undo / action toast */
.action-toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom));
  display: flex; gap: 12px; align-items: center; z-index: 61; background: var(--surface-3);
  border: 1px solid var(--line-2); color: var(--ink); padding: 10px 12px 10px 16px; border-radius: 14px;
  font-size: 14px; max-width: 92vw; box-shadow: var(--shadow-pop); animation: fade .18s ease;
}
.action-toast button { padding: 6px 14px; }

/* Batch upload progress */
.batch-progress {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom));
  display: flex; gap: 12px; align-items: center; z-index: 61; background: var(--surface-3);
  border: 1px solid var(--line-2); color: var(--ink); padding: 12px 18px; border-radius: 14px;
  font-size: 14px; max-width: 92vw; box-shadow: var(--shadow-pop);
}
.batch-progress .spinner { width: 20px; height: 20px; border-width: 3px; flex: 0 0 auto; }
.batch-progress .bp-bar { width: 120px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.batch-progress .bp-fill { height: 100%; background: var(--accent); transition: width .2s ease; }

/* ---- continuous camera: the app's own viewfinder ----
   Full-bleed and above everything, including the bottom nav and any sheet, so
   the only things on screen are the receipt, the counter, and the shutter. */
html.cc-open, html.cc-open body { overflow: hidden; overscroll-behavior: none; }
.cc-camera {
  position: fixed; inset: 0; z-index: 80; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cc-camera #cc-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #000;
}
.cc-camera .cc-flash {
  position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;
}
.cc-camera .cc-flash.fire { animation: cc-flash .22s ease-out; }
@keyframes cc-flash { from { opacity: .82; } to { opacity: 0; } }
.cc-top {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,0));
}
.cc-close {
  width: 44px; height: 44px; min-width: 44px; border-radius: 50%; padding: 0;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.22); color: #fff;
  font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.cc-count {
  color: #fff; font-size: 13px; font-weight: 650; letter-spacing: .01em;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18);
  padding: 7px 13px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.cc-bar {
  position: relative; z-index: 1; width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  padding: 18px 20px calc(22px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(0,0,0,.66), rgba(0,0,0,0));
}
.cc-thumb {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.26); background-size: cover; background-position: center;
  background-color: rgba(255,255,255,.06); opacity: .35;
}
.cc-thumb.has-shot { opacity: 1; }
/* 72px of shutter: findable without looking, at arm's length, in gloves. */
.cc-shutter {
  width: 72px; height: 72px; min-width: 72px; flex: 0 0 72px; border-radius: 50%; padding: 0;
  background: transparent; border: 4px solid #fff; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 6px 22px -8px rgba(0,0,0,.9);
  transition: transform .1s ease, opacity .1s ease;
}
.cc-shutter span { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: block; }
.cc-shutter:active { transform: scale(.92); }
.cc-shutter:disabled { opacity: .45; transform: scale(.94); }
.cc-shutter:disabled span { background: var(--accent); }
.cc-done {
  min-width: 78px; padding: 11px 16px; border-radius: 999px; color: #fff; font-weight: 650;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.24);
  font-variant-numeric: tabular-nums;
}
.cc-done.ready { background: var(--accent); border-color: var(--accent-deep); color: var(--accent-ink); }
/* No motion: the counter, the thumbnail, and the dimmed shutter carry the
   whole "that one is taken" signal on their own. */
@media (prefers-reduced-motion: reduce) {
  .cc-camera .cc-flash.fire { animation: none; }
  .cc-shutter:disabled { opacity: .4; }
}

/* ---- demo mode: amounts hidden on this device (display only) ----
   Receipt imagery is as revealing as the numbers, so it blurs too — including
   the full-screen viewer, which lives outside #app. */
[data-hide-amounts] .r-img { filter: blur(14px); }
.hide-amounts-chip {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(6px + env(safe-area-inset-top));
  z-index: 70; border: 1px solid var(--line-2); background: var(--surface-3); color: var(--muted);
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 650; letter-spacing: .02em;
  box-shadow: var(--shadow-1); opacity: .92;
}
.hide-amounts-chip:active { transform: translateX(-50%) scale(.97); }

/* ---- statements: one imported statement, and the charges still missing a
   receipt. Colours are tokens only, so both themes follow without a second
   rule, and every control is a real button and therefore already 44px tall. */
.statement-hero .sh-name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.statement-hero .sh-meta { color: var(--faint); font-size: 12.5px; margin-top: 3px; }
/* Where the statement came from, said quietly beside its name — a fact about
   the paper, never competing with the name for the eye. */
.statement-hero .sh-tag {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  padding: 2px 7px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--faint);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
/* The one thing a hero has to admit: this statement was read short. */
.statement-hero .sh-note {
  margin-top: 8px; padding: 7px 9px; border-radius: var(--r-sm);
  background: var(--amber-soft); color: var(--accent-fg); font-size: 12.5px;
}
.statement-hero .sh-stats { display: flex; gap: 10px; margin-top: 12px; }
.statement-hero .sh-stat {
  flex: 1; text-align: center; padding: 10px 6px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
}
.statement-hero .sh-stat b {
  display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 800; line-height: 1.1;
}
.statement-hero .sh-stat span {
  display: block; margin-top: 2px; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.statement-hero .sh-stat.warn { background: var(--amber-soft); border-color: transparent; }
.statement-hero .sh-stat.warn b, .statement-hero .sh-stat.warn span { color: var(--accent-fg); }

.stmt-line {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left;
  padding: 11px 4px; border-bottom: 1px solid var(--line);
}
.stmt-list .stmt-line:last-child { border-bottom: 0; }
.stmt-line b { font-weight: 600; }
.stmt-guess { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
/* On a phone the charge, the guess, and the two answers do not fit on one
   line without squeezing all three. The question stacks above its answers. */
.stmt-suggestion { flex-direction: column; align-items: stretch; }
.stmt-actions { display: flex; gap: 6px; flex: 0 0 auto; margin-top: 10px; }
.stmt-actions .stmt-yes { flex: 1; }
.stmt-tap { min-height: 44px; min-width: 44px; padding: 8px 12px; font-size: 14px; border-radius: var(--r-sm); }
.stmt-yes { background: var(--green-soft); color: var(--green); border-color: transparent; font-weight: 700; }
.stmt-no { color: var(--muted); }
/* A missing charge is the whole row: it opens what the owner can do about it. */
button.stmt-missing { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
button.stmt-missing:active { background: var(--surface-2); }
.stmt-soon { margin-top: 8px; text-align: center; color: var(--faint); }
/* Payments and credits: present, closed, and out of the way. The summary is the
   only thing this section costs the owner until they ask for the rest. */
.stmt-credits > summary {
  min-height: 44px; display: flex; align-items: center; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.stmt-credits .stmt-credit .money { color: var(--green); }
.stmt-credits > p { margin: 8px 2px 0; }

/* The receipt's own quiet acknowledgement that a statement charge answers to it. */
.stmt-matched { margin: 8px 2px 0; font-size: 12.5px; color: var(--green); }
.stmt-matched span { color: var(--muted); }