/* kit.css — the one stylesheet.
 *
 * Implements `plans/build/03-ui-standard.md` (tokens, type, tables, states) under the design in
 * `plans/build/04-ux.md`. Served by the app at /kit.css and COPIED VERBATIM into the mockup pack;
 * a test fails if the two differ, because the previous design had three stylesheets and no way
 * to notice they disagreed.
 *
 * No framework, no build step, no CDN. */

/* ---------------------------------------------------------------- tokens */
:root {
  /* spacing — seven values, nothing else needs to exist */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* type */
  --t-micro: 11px; --t-small: 12px; --t-body: 13px; --t-base: 14px;
  --t-section: 16px; --t-page: 20px; --t-hero: 28px;

  /* neutrals */
  --bg: #f6f7f9;
  --card: #fff;
  --line: #e4e7ec;
  --line-strong: #d0d5dd;
  --ink: #101828;
  --sub: #667085;
  --faint: #98a2b3;
  --s50: #f9fafb;

  /* semantic — never the only signal (standard §11) */
  --accent: #4f46e5;
  --accent-ink: #3730a3;
  --ok: #067647;      --ok-bg: #ecfdf3;   --ok-line: #abefc6;
  --warn: #b54708;    --warn-bg: #fffaeb; --warn-line: #fedf89;
  --bad: #b42318;     --bad-bg: #fef3f2;  --bad-line: #fecdca;
  --info: #175cd3;    --info-bg: #eff8ff; --info-line: #b2ddff;
  --muted-bg: #f2f4f7; --muted-line: #e4e7ec;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,.06);
}

* { box-sizing: border-box }
/* `hidden` means hidden, whatever display a rule below gives the element. */
[hidden] { display: none !important }
html, body { margin: 0; padding: 0 }

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-base)/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }

/* Interaction states are not optional (standard §8). A page where nothing responds to the
   keyboard is a picture of an application. */
:where(a, button, .btn, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

.num, .money, td.money, th.money, .stat-value, .hero-value {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- shell */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh }

.side {
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: var(--sp-5) 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-brand {
  font-size: var(--t-section); font-weight: 600;
  padding: 0 var(--sp-5) var(--sp-3);
}
.side-group {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); padding: var(--sp-4) var(--sp-5) var(--sp-1);
}
.side a {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5); color: var(--ink); font-size: var(--t-base);
  border-left: 2px solid transparent;
}
.side a:hover { background: var(--s50); text-decoration: none }
.side a[aria-current="page"] {
  background: var(--s50); border-left-color: var(--accent);
  color: var(--accent-ink); font-weight: 600;
}
.side .count {
  margin-left: auto; font-size: var(--t-small); font-weight: 600;
  background: var(--accent); color: #fff; border-radius: 10px; padding: 0 7px;
  font-variant-numeric: tabular-nums;
}
.side a[aria-current="page"] .count { background: var(--accent) }
.side-foot {
  margin-top: auto; padding: var(--sp-4) var(--sp-5) 0;
  border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--sub);
}
.side-foot .who { display: block; color: var(--ink); font-weight: 600 }
.side .side-foot a { display: inline; padding: 0; border: 0; color: var(--accent); font-size: var(--t-small) }
.side .side-foot a:hover { background: none; text-decoration: underline }

main { padding: var(--sp-5); max-width: 1280px }
main.record { max-width: 1140px }
main.form { max-width: 720px }

/* The signed-out shell: no navigation, nothing to bounce off. */
.bare { display: grid; place-items: center; min-height: 100vh; padding: var(--sp-5) }

/* ---------------------------------------------------------------- page head */
.page-head {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.page-head h1 { font-size: var(--t-page); font-weight: 600; margin: 0 }
.page-head .sub { margin-top: var(--sp-1) }
.page-head .actions { margin-left: auto; display: flex; gap: var(--sp-2) }
.crumb { font-size: var(--t-small); color: var(--sub); margin-bottom: var(--sp-1) }

.sub, .note { color: var(--sub); font-size: var(--t-small) }
.note { margin: var(--sp-2) 0 }
.faint { color: var(--faint) }

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.card > h2, .card > h3 {
  font-size: var(--t-section); font-weight: 600; margin: 0 0 var(--sp-4);
}
.card.flush { padding: 0 }
.card.flush > h2, .card.flush > h3 { padding: var(--sp-5) var(--sp-5) 0 }

.cols { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: var(--sp-5) }
/* A wide table scrolls inside its card; it never pushes the card past the screen. */
.cols > *, .with-rail > *, .main-col, main { min-width: 0 }
.card.flush .toolbar { padding: 0 var(--sp-5) }

/* ---------------------------------------------------------------- stats */
/* A stat is a number with what it is made of and a link to the list behind it. A tile that
   cannot be clicked does not exist (04-ux §2, principle 1). */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4) }
.stat {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4); color: inherit; box-shadow: var(--shadow);
}
a.stat:hover { border-color: var(--line-strong); text-decoration: none; background: var(--s50) }
.stat-label {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint);
}
.stat-value { font-size: var(--t-hero); font-weight: 650; line-height: 1.1; margin: var(--sp-2) 0 var(--sp-1) }
.stat-of { font-size: var(--t-small); color: var(--sub) }
.stat.bad .stat-value { color: var(--bad) }
.stat.warn .stat-value { color: var(--warn) }

/* ---------------------------------------------------------------- hero band (record pages) */
.hero {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.hero-value { font-size: var(--t-hero); font-weight: 650; line-height: 1.1 }
.hero-of { font-size: var(--t-small); color: var(--sub); margin-top: var(--sp-1) }
.hero .spacer { margin-left: auto }

/* ---------------------------------------------------------------- status · badge · tag */
/* Three components and only three (standard §4). */
.status, .badge, .tag {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--t-small); font-weight: 500; line-height: 1.5;
  padding: 1px var(--sp-2); border-radius: 6px; border: 1px solid transparent;
  white-space: nowrap;
}
.status { font-weight: 600 }
.status.ok   { background: var(--ok-bg);    color: var(--ok);   border-color: var(--ok-line) }
.status.warn { background: var(--warn-bg);  color: var(--warn); border-color: var(--warn-line) }
.status.bad  { background: var(--bad-bg);   color: var(--bad);  border-color: var(--bad-line) }
.status.info { background: var(--info-bg);  color: var(--info); border-color: var(--info-line) }
.status.muted{ background: var(--muted-bg); color: var(--sub);  border-color: var(--muted-line) }
.badge { background: var(--muted-bg); color: var(--sub); border-color: var(--muted-line) }
.badge.bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line) }
.tag { background: transparent; color: var(--sub); border-color: var(--line-strong) }

/* ---------------------------------------------------------------- tables */
.scroll { overflow-x: auto }
table { width: 100%; border-collapse: collapse; font-size: var(--t-body) }
thead th {
  text-align: left; font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line) }
tbody tr:last-child td { border-bottom: 0 }
tbody tr:hover { background: var(--s50) }
th.money, td.money, th.right, td.right { text-align: right }
td .sub { display: block }
tfoot td {
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line-strong);
  font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- queue (the Today page) */
.queue-group { margin-bottom: var(--sp-6) }
.queue-group > h2 {
  font-size: var(--t-section); font-weight: 600; margin: 0 0 var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2);
}
.queue-group > h2 .count {
  font-size: var(--t-small); font-weight: 600; color: var(--sub);
  background: var(--muted-bg); border-radius: 10px; padding: 0 var(--sp-2);
}
.qrow {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); box-shadow: var(--shadow);
}
.qrow:hover { border-color: var(--line-strong) }
.qrow-main { min-width: 0; flex: 1 }
.qrow-subject { font-weight: 600; font-size: var(--t-base) }
/* The consequence line: what taking the action will do. Never decoration. */
.qrow-why { font-size: var(--t-small); color: var(--sub); margin-top: 2px }
.qrow-money { font-size: var(--t-section); font-weight: 650; font-variant-numeric: tabular-nums }
.qrow-money.bad { color: var(--bad) }
.qrow-actions { display: flex; gap: var(--sp-2); flex-shrink: 0 }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 500 var(--t-base)/1 inherit; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card);
  color: var(--ink); cursor: pointer; transition: background .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--s50); text-decoration: none }
.btn:active { transform: translateY(1px) }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff }
.btn.primary:hover { background: var(--accent-ink) }
.btn.danger { color: var(--bad); border-color: var(--bad-line); background: var(--bad-bg) }
.btn.danger:hover { background: #fee4e2 }
.btn.small { font-size: var(--t-small); padding: var(--sp-1) var(--sp-2) }
.btn[disabled] { opacity: .5; cursor: not-allowed }
form.inline { display: inline }

/* ---------------------------------------------------------------- forms */
label { display: block; margin: var(--sp-4) 0 0; font-size: var(--t-small); color: var(--sub) }
input, select, textarea {
  display: block; width: 100%; margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--t-base);
  border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink);
}
input[type=number], input.money { font-variant-numeric: tabular-nums; text-align: right }

/* ---------------------------------------------------------------- empty states */
/* Three kinds, never one generic (standard §9). */
.empty {
  text-align: center; padding: var(--sp-7) var(--sp-5); color: var(--sub);
  background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.empty h3 { font-size: var(--t-section); color: var(--ink); margin: 0 0 var(--sp-2) }
.empty p { margin: 0 0 var(--sp-4) }

/* ---------------------------------------------------------------- timeline */
.timeline { list-style: none; margin: 0; padding: 0 }
.timeline li {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-body);
}
.timeline li:last-child { border-bottom: 0 }
.timeline .ts { color: var(--faint); font-size: var(--t-small); font-variant-numeric: tabular-nums }
.timeline .actor { font-weight: 600 }
/* An agent or a scheduled run is an actor too, and must read as one. */
.timeline .actor.machine { font-weight: 500; color: var(--sub); font-family: ui-monospace, monospace;
  font-size: var(--t-small) }

/* ---------------------------------------------------------------- Why? disclosure */
details.why { margin: var(--sp-3) 0 }
details.why > summary {
  cursor: pointer; font-size: var(--t-small); color: var(--accent); list-style: none;
  display: inline-flex; align-items: center; gap: var(--sp-1);
}
details.why > summary::-webkit-details-marker { display: none }
details.why > summary::before { content: "?"; display: inline-grid; place-items: center;
  width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%;
  font-size: 10px; font-weight: 700 }
details.why[open] > summary { margin-bottom: var(--sp-2) }
details.why .body {
  font-size: var(--t-small); color: var(--sub); border-left: 2px solid var(--line-strong);
  padding-left: var(--sp-3);
}

/* ---------------------------------------------------------------- sign in */
.login {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--sp-6); width: 340px; max-width: 92vw; box-shadow: var(--shadow);
}
.login h1 { font-size: var(--t-page); margin: 0 0 var(--sp-1) }
.login .btn { width: 100%; justify-content: center; margin-top: var(--sp-5); padding: var(--sp-3) }
.err {
  background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad);
  padding: var(--sp-2) var(--sp-3); border-radius: 8px; font-size: var(--t-small);
  margin: var(--sp-3) 0 0;
}

/* ---------------------------------------------------------------- small type helpers */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-small) }
.up { color: var(--warn) }
.down { color: var(--ok) }
.right { text-align: right }
.side .count.bad { background: var(--bad) }

h2.section { font-size: var(--t-section); font-weight: 600; margin: var(--sp-6) 0 var(--sp-3) }
ul.plain { margin: 0; padding-left: var(--sp-4) }
ul.plain li { margin: 2px 0 }
.payer { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line) }
.payer:last-child { border-bottom: 0 }
.payer .sub { display: block }
form.inline-form { display: flex; gap: var(--sp-2); align-items: center }
form.inline-form input { margin: 0; width: 220px }

/* ---------------------------------------------------------------- card head, facts, banner */
.card-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4) }
.card-head h2 { font-size: var(--t-section); font-weight: 600; margin: 0 }
.card-head .actions { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap }
.card.flush .card-head { padding: var(--sp-4) var(--sp-5) 0; margin-bottom: var(--sp-3) }
.card.flush > p.note { margin: 0; padding: var(--sp-2) var(--sp-5) var(--sp-4) }
.card.flush > .empty { margin: var(--sp-4) var(--sp-5) var(--sp-5) }

dl.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
           gap: var(--sp-4) var(--sp-5); margin: 0 }
dl.facts dt { font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
              text-transform: uppercase; color: var(--faint) }
dl.facts dd { margin: 2px 0 0; font-size: var(--t-base) }
dl.facts dd .sub { display: block }
.cols dl.facts, .rail dl.facts { grid-template-columns: 1fr }

.banner {
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--muted-bg);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--t-body);
}
.banner span { color: var(--sub) }
.banner.warn { background: var(--warn-bg); border-color: var(--warn-line) }
.banner.bad  { background: var(--bad-bg);  border-color: var(--bad-line) }
.banner.info { background: var(--info-bg); border-color: var(--info-line) }
.banner.ok   { background: var(--ok-bg);   border-color: var(--ok-line) }

/* ---------------------------------------------------------------- tabs and the filter box */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line);
        margin-bottom: var(--sp-4); overflow-x: auto }
.tabs a {
  padding: var(--sp-2) var(--sp-3); color: var(--sub); border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: var(--sp-2); align-items: center;
}
.tabs a:hover { color: var(--ink); text-decoration: none }
.tabs a[aria-current] { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600 }
.tabs .count { font-size: var(--t-small); background: var(--muted-bg); border-radius: 10px;
               padding: 0 var(--sp-2); color: var(--sub); font-variant-numeric: tabular-nums }
.toolbar { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); flex-wrap: wrap }
.toolbar .spacer { margin-left: auto }
input.filter { width: 260px; margin: 0 }
th[data-sort] { cursor: pointer; user-select: none }
th[data-sort]:hover { color: var(--sub) }
th[data-sort][aria-sort=ascending]::after  { content: " ▲"; font-size: 9px }
th[data-sort][aria-sort=descending]::after { content: " ▼"; font-size: 9px }
tr.is-hidden { display: none }
tfoot td { position: sticky; bottom: 0; background: var(--card) }

/* ---------------------------------------------------------------- the ⋯ menu */
details.menu { position: relative; display: inline-block }
details.menu > summary { list-style: none }
details.menu > summary::-webkit-details-marker { display: none }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16,24,40,.12); padding: var(--sp-1) 0;
}
.menu-list > a, .menu-list > button, .menu-list form button {
  display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-4);
  background: none; border: 0; font: inherit; font-size: var(--t-body); color: var(--ink); cursor: pointer;
}
.menu-list > a:hover, .menu-list > button:hover, .menu-list form button:hover {
  background: var(--s50); text-decoration: none }
.menu-list .danger { color: var(--bad) }
.menu-list form { display: block }
.menu-list .sep { border-top: 1px solid var(--line); margin: var(--sp-1) 0 }

/* ---------------------------------------------------------------- confirm dialog */
dialog.dlg {
  border: 1px solid var(--line-strong); border-radius: 12px; padding: var(--sp-5);
  width: 480px; max-width: 94vw; box-shadow: 0 24px 48px rgba(16,24,40,.18); color: var(--ink);
}
dialog.dlg::backdrop { background: rgba(16,24,40,.45) }
dialog.dlg h2 { font-size: var(--t-section); margin: 0 0 var(--sp-3) }
.dlg-body { font-size: var(--t-body); color: var(--sub) }
.dlg-body p { margin: 0 0 var(--sp-2) }
.dlg-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5) }

/* ---------------------------------------------------------------- fields */
.field-label { display: block; margin: var(--sp-4) 0 0; font-size: var(--t-small); color: var(--sub) }
.field-label .hint { display: block; color: var(--faint); margin-top: 2px }
.money-input { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1) }
.money-input > span { color: var(--sub); flex-shrink: 0 }
.money-input input { margin: 0; flex: 1; min-width: 0 }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4) }
td input.money { width: 130px; margin: 0 0 0 auto }

/* ---------------------------------------------------------------- toast */
.toast-host { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 50;
              display: flex; flex-direction: column; gap: var(--sp-2) }
.toast {
  display: flex; align-items: center; gap: var(--sp-3); background: var(--ink); color: #fff;
  border-radius: 10px; padding: var(--sp-3) var(--sp-4); box-shadow: 0 8px 24px rgba(16,24,40,.25);
  max-width: 520px; font-size: var(--t-body);
}
.toast.bad { background: var(--bad) }
.toast .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.4) }
.toast-x { background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; margin-left: auto }

/* ---------------------------------------------------------------- Today layout and the rail */
.with-rail { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-5); align-items: start }
.rail { position: sticky; top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3) }
.rail .stats { grid-template-columns: 1fr }
.next-up { font-size: var(--t-small); color: var(--sub); padding: var(--sp-3) var(--sp-4);
           border: 1px dashed var(--line-strong); border-radius: var(--radius) }

/* ---------------------------------------------------------------- the transaction screen */
/* Receive payment: one column, a sticky summary whose last figure is the point of the screen. */
.sticky-sum {
  position: sticky; bottom: 0; z-index: 5; background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-5); box-shadow: 0 -4px 12px rgba(16,24,40,.06);
}
.sticky-sum .sum-item { font-size: var(--t-small); color: var(--sub) }
.sticky-sum .sum-item b { display: block; font-size: var(--t-section); color: var(--ink);
                          font-variant-numeric: tabular-nums }
.sticky-sum .sum-item.over b { color: var(--bad) }
.sticky-sum .sum-item.left b { color: var(--warn) }
.sticky-sum .spacer { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center }
.sticky-sum .why-not { font-size: var(--t-small); color: var(--bad) }

/* ---------------------------------------------------------------- top bar: search + page help */
.main-col { min-width: 0; display: flex; flex-direction: column }
.topbar {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: 0; z-index: 15;
}
.topbar .search { flex: 1; max-width: 560px }
.topbar .search input { margin: 0 }
.topbar .help-btn { margin-left: auto }
kbd { font: 600 11px ui-monospace, monospace; border: 1px solid var(--line-strong); border-bottom-width: 2px;
      border-radius: 4px; padding: 0 4px; background: var(--s50) }

/* ---------------------------------------------------------------- the small "?" and its pop-over */
button.hint {
  display: inline-grid; place-items: center; width: 15px; height: 15px; padding: 0; margin-left: 2px;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--card); color: var(--sub);
  font: 700 10px/1 inherit; cursor: help; vertical-align: middle; text-transform: none; letter-spacing: 0;
}
button.hint:hover, button.hint[aria-expanded=true] { color: var(--accent); border-color: var(--accent) }
.hint-pop {
  position: absolute; z-index: 60; max-width: 320px; background: var(--ink); color: #fff;
  font-size: var(--t-small); line-height: 1.5; padding: var(--sp-2) var(--sp-3); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16,24,40,.25); font-weight: 400; text-transform: none; letter-spacing: 0;
}
.help-dlg { width: 600px }
.help-dlg h3 { font-size: var(--t-base); margin: var(--sp-4) 0 var(--sp-1) }
.help-dlg ul, .help-dlg ol { margin: 0; padding-left: var(--sp-5); font-size: var(--t-body) }
.help-dlg li { margin: 3px 0 }
.help-what { font-size: var(--t-base); margin: 0 }

/* ---------------------------------------------------------------- type-to-search picker */
.combo { position: relative; margin-top: var(--sp-1) }
.combo input { margin: 0 }
.combo-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px); max-height: 320px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px; margin: 0; padding: var(--sp-1) 0;
  list-style: none; box-shadow: 0 8px 24px rgba(16,24,40,.12);
}
.combo-list li { padding: var(--sp-2) var(--sp-3); cursor: pointer; font-size: var(--t-body) }
.combo-list li .sub { display: block }
.combo-list li[aria-selected=true], .combo-list li:hover { background: var(--s50) }
.combo-list li.none { color: var(--sub); cursor: default }
.combo-list .more { color: var(--faint); font-size: var(--t-small); cursor: default }

/* ---------------------------------------------------------------- keyboard row focus */
.kbd-focus { outline: 2px solid var(--accent); outline-offset: -2px }
a.also { font-size: var(--t-small); font-weight: 500; margin-left: var(--sp-2) }

/* ---------------------------------------------------------------- sub-navigation (Settings, Logs) */
.subnav { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-4) }
.subnav a { padding: var(--sp-1) var(--sp-3); border-radius: 6px; color: var(--sub); border: 1px solid transparent }
.subnav a[aria-current] { background: var(--card); border-color: var(--line-strong); color: var(--ink); font-weight: 600 }
.matrix td, .matrix th { text-align: center }
.matrix td:first-child, .matrix th:first-child { text-align: left }
.matrix input[type=checkbox] { width: auto; display: inline; margin: 0 }
.check-cell input[type=checkbox] { width: auto; display: inline; margin: 0 }
textarea { min-height: 72px; resize: vertical }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 var(--sp-3);
           align-items: end; margin-bottom: var(--sp-4) }
.filters .btn { margin-top: var(--sp-4) }
.local-tag { font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; color: var(--warn);
             border: 1px solid var(--warn-line); background: var(--warn-bg); border-radius: 4px; padding: 0 4px;
             vertical-align: middle }

/* ---------------------------------------------------------------- what the customer receives */
.doc-wrap { max-width: 820px; margin: var(--sp-6) auto; background: #fff; color: #101828; position: relative;
            border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-7) var(--sp-7) var(--sp-6) }
.doc-watermark { position: absolute; top: var(--sp-4); right: var(--sp-5); font-weight: 700; letter-spacing: .1em;
                 color: var(--bad); border: 2px solid var(--bad); border-radius: 6px; padding: 2px 8px; font-size: var(--t-small) }
.doc-head { display: flex; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-6) }
.doc-head h1 { font-size: 26px; margin: 0 0 var(--sp-2); letter-spacing: .02em }
.doc-from { white-space: pre-line; font-size: var(--t-body); color: #475467 }
.doc-meta { text-align: right; font-size: var(--t-body) }
.doc-meta b { display: inline-block; min-width: 110px }
.doc-to { margin-bottom: var(--sp-5); font-size: var(--t-body) }
.doc-to .label, .doc-section-label { font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
                                     text-transform: uppercase; color: #98a2b3 }
.doc-table { margin-bottom: var(--sp-4) }
.doc-table th { color: #667085 }
.doc-totals { margin-left: auto; width: 300px; font-size: var(--t-base) }
.doc-totals div { display: flex; justify-content: space-between; padding: 4px 0 }
.doc-totals .grand { border-top: 2px solid #101828; font-weight: 700; font-size: var(--t-section); margin-top: var(--sp-1); padding-top: var(--sp-2) }
.doc-note { margin-top: var(--sp-5); font-size: var(--t-body); white-space: pre-line }
.doc-foot { margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid #e4e7ec; font-size: var(--t-small); color: #667085 }
.doc-bar { max-width: 820px; margin: var(--sp-4) auto 0; display: flex; gap: var(--sp-2); align-items: center }
@media print {
  .doc-bar, .toast-host { display: none }
  .doc-wrap { border: 0; margin: 0; padding: 0 }
  body { background: #fff }
}

/* ---------------------------------------------------------------- visual styles (Settings → General) */
/* Dense: more rows on a screen, for the person who lives in the lists. */
[data-theme=dense] { --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 24px; --t-base: 13px; --t-body: 12.5px; --t-hero: 24px }
[data-theme=dense] tbody td { padding: 6px var(--sp-3) }
[data-theme=dense] .qrow { padding: var(--sp-2) var(--sp-3) }
/* Warm: softer neutrals and a calmer accent, same contrast where it matters. */
[data-theme=warm] { --bg: #f7f4ef; --card: #fffdf9; --line: #ebe4d8; --line-strong: #dccfbd; --s50: #f8f3ea;
                    --ink: #2b2118; --sub: #6f6254; --faint: #a3927f; --accent: #b45309; --accent-ink: #8a3f06;
                    --muted-bg: #f3ece1 }

/* ---------------------------------------------------------------- one breakpoint */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap;
          align-items: center; padding: var(--sp-3); gap: var(--sp-1) }
  .side-group, .side-foot { display: none }
  .side a { padding: var(--sp-2) var(--sp-3); border-left: 0; border-radius: 6px }
  .cols, .with-rail, .grid2 { grid-template-columns: 1fr }
  .rail { position: static }
  .qrow { flex-wrap: wrap }
  /* On a phone the reason reads first and in full; the money and the buttons go underneath. */
  .qrow-main { flex-basis: 100% }
  .qrow-actions { flex-wrap: wrap; margin-left: auto }
  .page-head { flex-wrap: wrap }
  .page-head .actions { margin-left: 0; flex-wrap: wrap }
  .topbar { padding: var(--sp-2) var(--sp-3) }
  main { padding: var(--sp-4) var(--sp-3) }
  input.filter { width: 100% }
  .doc-wrap { padding: var(--sp-5) var(--sp-4); margin: var(--sp-3) }
  .doc-head { flex-direction: column }
  .doc-meta { text-align: left }
  .doc-totals { width: 100% }
}

/* document helpers */
.doc-warn { color: var(--bad) }
.doc-title { font-size: 18px; margin: 0 0 var(--sp-3) }
.doc-bar input.filter { width: 380px }

/* attaching a file: one row that wraps at phone width */
.attach { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3) }
.attach input[type=text] { flex: 1 1 12rem; min-width: 0 }
.attach input[type=file] { max-width: 100% }
.attach .sub { flex-basis: 100% }
.doc-bar form.inline { display: inline-flex; gap: var(--sp-2); align-items: center }

/* the provider log: request and response, readable and contained */
pre.json { max-height: 320px; overflow: auto; font-size: 12px; white-space: pre-wrap; word-break: break-all;
  background: var(--bg); padding: var(--sp-2); border-radius: 6px; margin: var(--sp-2) 0 0 }
.attach.pad { padding: 0 var(--sp-5) var(--sp-3) }