@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
/* The Pharmacy Loop palette, shared with the counter app so the two halves of
   the system look like one. Two values depart from the prototype on purpose:
   an interactive border needs 3:1 to be seen at all, and the prototype's
   #D6E0E9 manages 1.34:1 on white - so rules and card edges use it, while
   inputs and buttons use a darker one from the same family. */
:root {
  color-scheme: light;
  --ink: #1C2430; --muted: #3A4653;
  /* The page is tinted and the panels sit pale on top of it - that separation
     is most of the design's character, and using near-white for both loses it. */
  --bg: #EDF2F6; --panel: #FCFCFA; --raised: #FFFFFF;
  --line: #E4EBF2; --line-strong: #D6E0E9;
  --field: #FFFFFF; --field-border: #7F94A9; --field-disabled: #F2F5F8;
  --accent: #0000FF; --accent-soft: #E6E6FF; --on-accent: #FFFFFF;
  --ok: #1F6B4A; --ok-bg: #E4F3EB;
  --warn: #7A5200; --warn-bg: #FFEBB8; --warn-ink: #5C3D00;
  --bad: #94382C; --bad-bg: #F6E5E1;
  --free: #5B3FB8;
  --shadow: 0 1px 2px rgba(28,36,48,.05), 0 4px 14px rgba(28,36,48,.05);
}

/* Proportion ------------------------------------------------------------
   Content runs the full width of the window; what keeps it readable is the
   proportion of the parts, not an arbitrary cap. The horizontal padding grows
   with the viewport on a phi scale, and every two-column split is cut at
   1.618 : 1 - so the reading column and the column beside it hold the same
   relationship at any size. */
:root {
  --phi: 1.618;
  --gutter: clamp(18px, 2.618vw, 46px);   /* phi squared, so wide screens breathe */
  --gap: clamp(14px, 1.618vw, 26px);
}
/* The design is a light interface, so that is what loads. Dark is kept
   available but only when asked for - the operating system should not
   impose it on a screen meant to look like the design. */
:root[data-theme="dark"] {
    color-scheme: dark;
    /* The same hues carried into the dark, every pairing checked: the bright
       accent takes dark ink rather than white, which it cannot support. */
    --ink: #E8EBF0; --muted: #9AA5B4;
    --bg: #0F1318; --panel: #171C23; --raised: #1D232B;
    --line: #242A33; --line-strong: #333B46;
    --field: #0E1217; --field-border: #5F6C7B; --field-disabled: #1B212A;
    --accent: #8FA8FF; --accent-soft: #1C2440; --on-accent: #12161B;
    --ok: #57C98F; --ok-bg: #12291E;
    --warn: #E9BE63; --warn-bg: #2E2510; --warn-ink: #E9BE63;
    --bad: #FF9C90; --bad-bg: #33191A;
    --free: #B8A2F0;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.32);
  }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.5 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mono, code { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: .92em; }
.small { font-size: .86em; } .r { text-align: right; } .strong { font-weight: 600; }
.mute { color: var(--muted); } .bad { color: var(--bad); } .free { color: var(--free); }

body { display: grid; grid-template-columns: 246px 1fr; min-height: 100vh; }
.topbar {
  grid-row: 1 / -1; display: flex; flex-direction: column; align-items: stretch;
  gap: 0; padding: 0; background: var(--panel);
  border-right: 1px solid var(--line-strong); position: sticky; top: 0;
  height: 100vh; overflow: auto; z-index: 10;
}
.brand {
  font-weight: 600; text-decoration: none; color: var(--ink); font-size: 15px;
  letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px;
  padding: 22px 20px 18px; border-bottom: 1px solid var(--line);
}
.mark {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
  background: var(--accent); color: var(--on-accent); font-size: .8rem; font-weight: 700;
}
.topbar nav { display: flex; flex-direction: column; gap: 2px;
  padding: 14px 10px; flex: 1; overflow: auto; }
.topbar nav a {
  display: flex; align-items: center; gap: .5rem;
  padding: 8px 10px; border-radius: 7px; text-decoration: none;
  color: var(--ink); font-size: 13.5px;
}
.topbar nav .heading {
  margin: 12px 0 2px; padding: 6px 10px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
}
.topbar nav a:hover { background: var(--bg); color: var(--ink); }
.topbar nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

main { max-width: none; padding: var(--gap) var(--gutter) 3.5rem; min-width: 0; }
h1 { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 5px; }
h2 { font-size: 1.02rem; margin: 0 0 .8rem; letter-spacing: .01em; }
h3 { font-size: .92rem; margin: 1.2rem 0 .5rem; color: var(--muted); }
.sub { color: var(--muted); margin: 0 0 1.4rem; }
.back { color: var(--muted); text-decoration: none; font-size: .9rem; display: inline-block; margin-bottom: .9rem; }
.back:hover { color: var(--accent); }
footer { grid-column: 2; max-width: none; padding: 0 var(--gutter) 2.5rem; color: var(--muted); font-size: .82rem; }

/* The last row of the register: where the next bill comes in. It reads as part
   of the table, not as a panel competing with it. */
.reg-drop {
  display: flex; align-items: center; gap: 14px;
  padding: 16px var(--pad, 18px);
  border-top: 1px dashed var(--line);
  background: var(--bg);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.reg-drop:hover { background: var(--accent-soft); }
.reg-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.reg-drop .dz-say { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.reg-drop .dz-say b { font-size: .95rem; }
.reg-drop .btn { flex: none; }
.dz-icon {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; font-size: 19px;
  background: var(--accent-soft); color: var(--accent);
}
.hint.warn, .warn { color: var(--warn); }

.btn {
  display: inline-block; padding: .5rem .95rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: inherit; font-size: .9rem;
  line-height: 1.5; cursor: pointer; text-decoration: none;
  -webkit-appearance: none; appearance: none;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.08); color: var(--on-accent); }
.btn.ghost { background: transparent; }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .85rem; margin: 1.4rem 0; }
.stat { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; padding: .9rem 1rem; box-shadow: var(--shadow); }
.stat .n { display: block; font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat .l { display: block; color: var(--muted); font-size: .82rem; margin-top: .15rem; }
.stat.bad .n { color: var(--bad); }

.panel { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; padding: 1.15rem var(--gutter); margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.panel-head h1, .panel-head h2 { margin: 0; }
.panel.split { display: grid; grid-template-columns: 1.618fr 1fr;   /* phi */ gap: calc(var(--gap) * var(--phi)); }
@media (max-width: 900px) { .panel.split { grid-template-columns: 1fr; } }
.count { color: var(--muted); font-weight: 400; font-size: .85rem; margin-left: .4rem; }

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .89rem; }
th { text-align: left; color: var(--muted); font-weight: 550; font-size: .78rem;
     text-transform: uppercase; letter-spacing: .04em; padding: .4rem .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg); }
tfoot td { padding: .55rem .5rem; border-top: 2px solid var(--line); font-weight: 600; }
td.mono, th.r + td, .lines td.r { font-variant-numeric: tabular-nums; }
table a { color: var(--accent); text-decoration: none; }
table a:hover { text-decoration: underline; }
.row-bad { background: var(--bad-bg); }
.row-bad:hover { background: var(--bad-bg); }
.checks td.w1 { width: 62px; }
.kv td { padding: .35rem .5rem; }
.kv tr.total td { border-top: 2px solid var(--line); font-weight: 650; font-size: 1.02em; }
.empty { color: var(--muted); padding: 1rem 0; }
.note { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.notes { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .88rem; }
.notes li { margin-bottom: .3rem; }
.tag { background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0 .3rem; font-size: .74rem; }

.pill { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.pill.big { font-size: .85rem; padding: .25rem .7rem; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.mute { background: var(--bg); color: var(--muted); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem 1.4rem; margin: 0 0 1.1rem; }
.facts dt { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.facts dd { margin: .15rem 0 0; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }

.results ul { list-style: none; margin: 0; padding: 0; }
.results li { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px; margin-bottom: .5rem; background: var(--panel); }
.results .fname { font-weight: 550; }
.results .detail { color: var(--muted); font-size: .85rem; margin-top: .1rem; }

.pct { color: var(--muted); font-weight: 500; font-size: .85em; }
.rowlinks { display: flex; gap: .35rem; white-space: nowrap; }
.minibtn {
  /* Used on both <a> and <button>: buttons inherit neither font nor background,
     so both are set explicitly or the two render as different controls. */
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  font: inherit; font-size: .78rem; font-weight: 550; line-height: 1.5;
  padding: .2rem .55rem; border-radius: 6px;
  border: 1px solid var(--field-border); background: var(--panel); color: var(--ink);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  -webkit-appearance: none; appearance: none;
  transition: background .12s, border-color .12s, color .12s;
}
.minibtn:hover {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); text-decoration: none;
}
.minibtn:active { transform: translateY(1px); }
.minibtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.minibtn[disabled] { opacity: .5; cursor: default; }
.minibtn.solid {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.minibtn.solid:hover { filter: brightness(1.08); background: var(--accent); color: var(--on-accent); }
.minibtn.tint {
  background: var(--accent-soft); border-color: transparent; color: var(--accent);
}
.minibtn.tint:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.minibtn.quiet { border-color: transparent; background: transparent; }
.minibtn.quiet:hover { background: var(--accent-soft); border-color: transparent; }
/* Review: a filled light yellow - it marks the row as waiting on a person,
   which is a state, not a warning. */
/* The one thing left to do on the page, marked with a rule rather than a fill -
   the pill inside already says "Pending review". */
/* A verdict sits beside the figure it is about, so the two are read together. */
#checks-panel summary { cursor: pointer; list-style: none; }
/* .panel-head reserves space for what follows it. Closed, nothing follows. */
#checks-panel details:not([open]) summary { margin-bottom: 0; }
#checks-panel summary::-webkit-details-marker { display: none; }
#checks-panel summary::after {
  content: "\203A"; margin-left: auto; font-size: 1.2rem; color: var(--muted);
  transition: transform .15s;
}
#checks-panel details[open] summary::after { transform: rotate(90deg); }
#checks-panel summary:hover h2 { color: var(--accent); }

.verdict sup { font-size: .62em; font-weight: 600; margin-left: 1px; }
td.verdict { width: 1.4rem; padding-right: 0; text-align: center; }
.verdict.ok { color: var(--ok); font-weight: 700; }
.verdict.bad { color: var(--bad); font-weight: 700; }
tr:has(> td .verdict.bad) td { background: var(--bad-bg); }

.panel.spotlight {
  border-left: 3px solid var(--warn);
  scroll-margin-top: 24px;
}

.minibtn.amber {
  background: var(--warn-bg); border-color: var(--warn-bg); color: var(--warn-ink);
}
.minibtn.amber:hover {
  background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink);
}
/* Red is kept for the one action that destroys something. The reversible ones
   (Forget, Withdraw sign-off, revert) stay amber, or red stops meaning much. */
.minibtn.danger { color: var(--bad); border-color: var(--bad); }
.minibtn.danger:hover {
  background: var(--bad-bg); border-color: var(--bad); color: var(--bad);
}
.minibtn.warn { color: var(--warn); border-color: var(--warn); }
.minibtn.warn:hover { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.billhead h1 { margin-bottom: .1rem; }
.billhead .sub { margin: 0; }

@media print {
  :root {
    --bg: #fff; --panel: #fff; --ink: #000; --muted: #444; --line: #bbb;
    --accent: #000; --accent-soft: #eee; --ok: #060; --ok-bg: #eee;
    --warn: #660; --warn-bg: #eee; --warn-ink: #000; --bad: #900; --bad-bg: #f4f4f4; --shadow: none;
  }
  .topbar, footer, .noprint, .actions { display: none !important; }
  main { max-width: none; padding: 0; }
  .panel { border: 1px solid var(--line); box-shadow: none; break-inside: avoid; margin-bottom: .6rem; }
  .stats { break-inside: avoid; }
  .scroll { overflow: visible; }
  table { font-size: 8.5pt; }
  a { color: #000; text-decoration: none; }
  @page { margin: 12mm; }
}

/* ---- side-by-side PDF review ------------------------------------------- */
/* A full-bleed page fills the viewport beside the nav. The body grid has to
   survive: restacking it turns the sidebar into a full-width row that pushes
   the content out of an overflow-hidden viewport. */
/* The signed-out shell: one card, centred, no grid to hold a nav that is not
   there. */
.signer { display: flex; flex-direction: column; gap: .1rem; align-self: flex-end;
  padding-bottom: .3rem; }
.signer .tiny { text-transform: uppercase; letter-spacing: .04em; }

.logo { flex: none; display: block; border-radius: 8px; }
/* The brand is now a mark beside two lines, so it lays them out sideways. */
.brand { flex-direction: row; align-items: center; gap: 10px; }
.brandtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brandtext b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.brandtext span { font-size: 11px; color: var(--muted); }

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

body.plain { display: block; }
main.gate { display: grid; place-items: center; min-height: 100vh; padding: var(--gutter); }
.gatecard { width: min(560px, 100%); margin: 0; }
.gatecard h1 { margin-bottom: .3rem; }
.gatecard .sub { margin-bottom: 1.2rem; }
.gatecard .steps { margin: 0 0 .4rem; padding-left: 1.2rem; line-height: 1.9; }
.gatecard .steps code, .gatecard .uri {
  background: var(--bg); border: 1px solid var(--line); border-radius: 5px;
  padding: .05rem .35rem; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .8rem; word-break: break-all;
}
.gatecard pre {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: .7rem .9rem; overflow-x: auto; font-size: .78rem; margin: .5rem 0;
}
.gatecard pre code { background: none; border: 0; padding: 0; }
.gbtn { display: inline-flex; align-items: center; gap: .55rem; }
.gatecard .foot { margin: 1rem 0 0; }
.gatecard .err {
  background: var(--bad-bg); color: var(--bad); border-radius: 8px;
  padding: .6rem .8rem; margin: 0 0 1rem; font-size: .88rem;
}

body:has(main.fullbleed) { height: 100vh; overflow: hidden; }
body:has(main.fullbleed) main {
  min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; max-width: none; padding: 0;
}

.viewbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .9rem; background: var(--panel); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.viewbar-left, .viewbar-right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.viewbar .back { margin: 0; }
.viewbar-right { gap: .35rem; }

.splitview { flex: 1; min-height: 0; display: flex; background: var(--bg); }
.pane { min-width: 0; min-height: 0; overflow: auto; }
.pdfpane { flex: 0 0 52%; overflow: hidden; background: #52565c; }
.pdfpane object, .pdfpane embed, .pdfpane iframe { width: 100%; height: 100%; border: 0; display: block; }
/* On the viewer's fixed dark backdrop, so white regardless of theme. */
.pdf-fallback { padding: 2.5rem 1.5rem; text-align: center; color: #fff; }
.pdf-fallback p { margin-bottom: 1rem; }
.datapane { flex: 1 1 auto; }
.pane-inner { padding: 1rem 1.1rem 3rem; }
.pane-inner h2 { margin-bottom: .35rem; }

.splitter {
  flex: 0 0 6px; cursor: col-resize; background: var(--line);
  position: relative; transition: background .12s;
}
.splitter:hover, .splitter:focus, .splitter.dragging { background: var(--accent); outline: none; }
.splitter::after {
  content: ""; position: absolute; inset: 0 -4px; /* wider grab target than it looks */
}
.splitview.dragging { user-select: none; }
.splitview.dragging .pdfpane { pointer-events: none; }

.splitview.stacked { flex-direction: column; }
.splitview.stacked .pdfpane { flex: 0 0 55%; }
.splitview.stacked .splitter { flex-basis: 6px; cursor: row-resize; }

table.compact { font-size: .82rem; }
table.compact td, table.compact th { padding: .3rem .4rem; }
.facts.tight { gap: .5rem 1.1rem; margin-bottom: .9rem; }
.alert {
  background: var(--bad-bg); border: 1px solid var(--bad); border-radius: 9px;
  padding: .7rem .9rem; margin: .8rem 0; font-size: .88rem;
}
.alert .notes { color: inherit; margin-top: .3rem; }

@media (max-width: 820px) {
  .splitview { flex-direction: column; }
  .splitview .pdfpane { flex: 0 0 50%; }
  .splitter { cursor: row-resize; }
}

/* ---- flagged cells and inline row editing ------------------------------ */
.lines.editable td { position: relative; }
td.flag-warn { background: var(--warn-bg); box-shadow: inset 2px 0 0 var(--warn); }
td.flag-error { background: var(--bad-bg); box-shadow: inset 2px 0 0 var(--bad); }
td.flag-warn, td.flag-error { cursor: help; }
.flagdot {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  font-size: 9px; line-height: 13px; text-align: center; font-weight: 700;
  vertical-align: text-top; margin-left: .2rem; background: var(--warn);
  color: #fff;   /* always on a saturated warn/bad fill */
}
td.flag-error .flagdot { background: var(--bad); }
td.edited { text-decoration: underline dotted var(--accent) 2px; text-underline-offset: 3px; }
tr.has-edit td:first-child::before {
  content: "✎"; color: var(--accent); margin-right: .2rem; font-size: .8em;
}
.rowactions { white-space: nowrap; text-align: right; width: 1%; }
.rowactions .minibtn + .minibtn { margin-left: .25rem; }
/* Row controls stay fully legible at rest; hovering only warms the border, so
   they never read as disabled. */
.lines.editable tr:hover .rowactions .minibtn { border-color: var(--accent); }
.lines.editable tr.has-flag .edit-row { border-color: var(--accent); color: var(--accent); }
.flagline { display: inline-flex; gap: .3rem; align-items: center; }
.editnote { color: var(--accent); }
.minibtn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
tr.hidden-row { display: none; }

tr.editing { background: var(--accent-soft) !important; }
tr.editing input {
  width: 100%; min-width: 52px; box-sizing: border-box; font: inherit; font-size: .82rem;
  padding: .15rem .3rem; border: 1px solid var(--accent); border-radius: 5px;
  background: var(--panel); color: var(--ink);
}
tr.editing input.wide { min-width: 130px; }
tr.editing input[type=number] { text-align: right; }
tr.editing td { vertical-align: middle; }
.editerr { color: var(--bad); font-size: .8rem; padding: .3rem .5rem; }
.saving { opacity: .5; pointer-events: none; }

.fixhint { font-size: .8rem; color: var(--bad); margin-top: .2rem; }
.linkbtn {
  font: inherit; font-size: inherit; background: none; border: 0; padding: 0;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.kv td.edited { text-decoration: underline dotted var(--accent) 2px; text-underline-offset: 3px; }
#totals-table input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .85rem; text-align: right;
  padding: .12rem .3rem; border: 1px solid var(--accent); border-radius: 5px;
  background: var(--panel); color: var(--ink);
}
#totals-panel.editing { outline: 2px solid var(--accent); outline-offset: 2px; }
.totals-actions { display: flex; gap: .35rem; margin-top: .6rem; }

/* ---- sign-off ---------------------------------------------------------- */
.signoff { display: flex; flex-direction: column; gap: .8rem; }
.signoff-head { display: flex; align-items: flex-start; gap: .8rem; }
.signoff-form { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.signoff-form label {
  display: flex; flex-direction: column; gap: .2rem;
  font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
}
.signoff-form label.grow { flex: 1 1 260px; }
.signoff-form input {
  font: inherit; font-size: .9rem; text-transform: none; letter-spacing: 0;
  padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); color: var(--ink); min-width: 160px;
}
.signoff-form input:focus { border-color: var(--accent); outline: none; }
.signoff-form .req { color: var(--bad); text-transform: none; }
#unconfirm-btn { align-self: flex-start; }
.banner {
  background: var(--warn-bg); border: 1px solid var(--warn); color: var(--warn);
  border-radius: 9px; padding: .6rem .9rem; font-size: .88rem; margin: 0 0 1.1rem;
}
.banner a { color: inherit; font-weight: 600; }

/* ---- form controls ------------------------------------------------------
   Buttons and inputs inherit neither font nor colour from the page, and the
   browser paints its own chrome (spinners, autofill, caret) unless told which
   scheme is in use. Everything below exists so a control looks the same in
   light and dark, and never falls back to greyed-out native styling. */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { -webkit-appearance: none; appearance: none; background: none; }
button:not(:disabled) { cursor: pointer; }

input[type="text"], input[type="number"], input[type="search"],
input[type="email"], input[type="date"], select, textarea {
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--field-border);
  border-radius: 7px;
  padding: .35rem .55rem;
  -webkit-appearance: none; appearance: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:disabled, textarea:disabled, select:disabled,
input[readonly] { background: var(--field-disabled); color: var(--muted); cursor: default; }

/* Chrome forces a pale background on autofilled fields; paint over it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--field) inset;
  box-shadow: 0 0 0 100px var(--field) inset;
  caret-color: var(--ink);
}
/* The number spinners are drawn by the browser and cannot be themed; the value
   is what matters in a table cell, so hide them and keep the field full width. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* The three editors reuse the shared field colours rather than the panel colour,
   so a field is always visibly recessed against the card behind it. */
tr.editing input, #totals-table input, .signoff-form input {
  background: var(--field); color: var(--ink); border-color: var(--accent);
}
.signoff-form input { border-color: var(--field-border); }
.signoff-form input:focus { border-color: var(--accent); }

/* A CSV has no rendering, so the raw file stands in for the page image. */
.csvpane { background: var(--bg); }
.rawcsv {
  margin: 0; padding: .9rem 1rem; height: 100%; overflow: auto;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: .74rem; line-height: 1.6; color: var(--ink);
  white-space: pre; tab-size: 4;
}

/* Where a bill came from matters: a CSV export names its supplier only in the
   filename, so it is worth seeing at a glance which records those are. */
.srcbadge {
  display: inline-block; padding: .05rem .4rem; border-radius: 5px;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--field-border); color: var(--muted); cursor: help;
}
.srcbadge.src-csv { color: var(--free); border-color: var(--free); }

.banner.ok-banner { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
select {
  background: var(--field); color: var(--ink); border: 1px solid var(--field-border);
  border-radius: 7px; padding: .3rem .5rem; font: inherit; font-size: .85rem;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 26px;
}
input[type="file"] {
  font-size: .85rem; padding: .3rem; border: 1px dashed var(--field-border);
  border-radius: 7px; background: var(--field); color: var(--ink); width: 100%;
}
input[type="file"]::file-selector-button {
  font: inherit; font-size: .8rem; margin-right: .6rem; padding: .25rem .6rem;
  border: 1px solid var(--field-border); border-radius: 6px;
  background: var(--panel); color: var(--ink); cursor: pointer;
}

.inline-form { display: inline-block; margin: .5rem .4rem 0 0; }
.banner strong { display: inline; }

/* ---- Formats page: the file beside the decisions ------------------------ */
.formatlayout { display: grid; grid-template-columns: minmax(320px, 40%) 1fr;
  gap: 1.1rem; align-items: start; }
.formatlayout.solo { grid-template-columns: 1fr; }
.formatlayout.solo .formatsource { display: none; }
.formatwork { min-width: 0; }
.formatsource {
  position: sticky; top: 4.6rem; height: calc(100vh - 6rem);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
}
.sourcebar {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem .7rem; border-bottom: 1px solid var(--line); font-size: .85rem;
}
.formatsource object, .formatsource embed { flex: 1; width: 100%; border: 0; background: #52565c; }
.formatsource .rawcsv { flex: 1; margin: 0; }
.floatshow { position: fixed; left: 1rem; bottom: 1rem; z-index: 20; }
@media (max-width: 900px) {
  .formatlayout { grid-template-columns: 1fr; }
  .formatsource { position: static; height: 60vh; }
}


/* A narrow window drops the sidebar back to a bar across the top. */
@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  .topbar { flex-direction: row; flex-wrap: wrap; align-items: center; height: auto;
    position: static; border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .topbar nav { flex-direction: row; flex-wrap: wrap; }
  .topbar nav .heading { display: none; }
  footer { grid-column: 1; }
}

/* ---- the design's inbound shell and register ------------------------- */
.brandtext { display: flex; flex-direction: column; gap: 3px; }
.brandtext b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.brandtext > span { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.topbar nav a .ic { width: 15px; display: inline-block; opacity: .75; }
.whoami {
  margin-top: auto; padding: 14px 20px 18px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.whoami b { font-size: 12px; font-weight: 500; font-family: 'IBM Plex Mono', monospace; }
.whoami span { font-size: 11px; color: var(--muted); }

/* state tiles, as the prototype draws them: label, count, one line of why */
.states { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
/* A tile at zero is still worth reading, but it is not news. */
.state-tile.quiet .dot { opacity: .3; }
.state-tile.quiet .count { color: var(--muted); }
a.state-tile { text-decoration: none; color: inherit; }
a.state-tile:hover { border-color: var(--accent); }
.state-tile.on { border-color: var(--accent); background: var(--accent-soft); }
.state-tile {
  flex: 1; min-width: 184px; text-align: left; display: flex; flex-direction: column;
  gap: 5px; padding: 14px 16px; background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 10px;
}
.state-tile .top { display: flex; align-items: center; gap: 7px; }
.state-tile .dot { width: 7px; height: 7px; border-radius: 50%; }
.state-tile .label {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.state-tile .count { font-size: 23px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; line-height: 1; }
.state-tile .note { font-size: 11.5px; color: var(--muted); }

/* the register: a grid of rows, two lines to a cell where it earns it */
.register { background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 10px; overflow: hidden; margin: 0 calc(var(--gutter) * -1); }
.reg-head, .reg-row {
  display: grid;
  /* The two reading columns take the space; numbers and actions stay put, so a
     wider window widens the document and sender rather than the figures. */
  grid-template-columns:
    minmax(180px, 1.618fr) minmax(160px, 1fr) 104px 62px 116px 136px 232px;
  gap: var(--gap); padding: 13px var(--gutter); align-items: center;
}
.reg-head {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line-strong);
}
.reg-row { border-bottom: 1px solid var(--line); font-size: 13px; }
.reg-row:last-child { border-bottom: 0; }
.reg-row[data-open] { cursor: pointer; }
/* A row that just arrived, held long enough to find it and no longer. */
.reg-row.just-read {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  animation: just-read .5s ease-out;
}
@keyframes just-read { from { opacity: 0; transform: translateY(-4px); } }
.reg-row:hover { background: var(--bg); }
.reg-row .strong { font-weight: 500; }
.reg-row .under { font-size: 11px; color: var(--muted); margin-top: 2px; }
.reg-row a { color: inherit; text-decoration: none; }
.reg-row a:hover { color: var(--accent); }
.vault {
  margin-top: 14px; padding: 0 var(--gutter) 14px; font-size: 11.5px; color: var(--muted); line-height: 1.6;
}
.vault code { font-size: 11px; }
@media (max-width: 1100px) {
  .reg-head { display: none; }
  .reg-row { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
}

/* theme switch ---------------------------------------------------------- */
.themetoggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: calc(100% - 20px); margin: 0 10px 10px; padding: 7px 10px;
  border: 1px solid var(--line-strong); border-radius: 7px; background: transparent;
  font: inherit; font-size: 12px; color: var(--muted); cursor: pointer;
}
.themetoggle:hover { border-color: var(--accent); color: var(--accent); }