/*
  Danial's Splity Tab v1.1.0, design system. Locked from round-2/g2.html (Glass Console, revised), the accepted direction.
  Every golden inlines this file verbatim as its first <style>, so the build copies one stylesheet.
  Layered slate, one indigo accent, no glow. One glass material, the receipt only: the card on desktop, the strip and
  the Splits sheet on a phone. The glass is a web approximation (backdrop-filter, a layered edge and a top highlight),
  not any platform's own material.
  Shape rule: the receipt card and its strip and sheet 22, dialogs, popovers, notes and the item frame 16, fields and
  buttons 10, choices (people toggles, spare sen, picker) full pill, the switch's frame 10.
  No network. System fonts. Icons are Phosphor (MIT) paths, never drawn by hand.
*/
:root {
  /* Night Console layers */
  --l0: #0B0E13;
  --l1: #10141B;          /* top bar, the item frame well */
  --l2: #151A23;          /* the page field */
  --l3: #1B212B;          /* dialogs, popovers */
  --l4: #232A36;
  --l5: #2D3545;          /* hover in dialogs, the sheet grab */
  --field: #0E1219;       /* inset inputs */
  --line: rgba(255, 255, 255, 0.08);       /* dividers only */
  --line-frame: rgba(255, 255, 255, 0.14); /* the edge of the item frame */
  --line-strong: #6E7891; /* control borders */
  --line-glass: #7A84A0;  /* control borders on the glass, which is a step lighter than the page */
  --hover: rgba(232, 235, 242, 0.07);
  --text: #E8EBF2;
  --text-muted: #A7AFBF;
  --text-faint: #5F6878;  /* disabled only */
  /* The one accent. Indigo means chosen, or the receipt's proof, and fills only Copy summary */
  --accent: #5059DA;
  --accent-hover: #434BC6;
  --accent-ink: #A3AAFF;
  --accent-line: #7C85F7;
  --accent-tint: rgba(110, 120, 255, 0.16);
  --on-accent: #F7F8FF;
  /* Danger (Start new bill) and errors */
  --danger: #C4313C;
  --danger-hover: #AA2731;
  --on-danger: #FFF5F5;
  --error-ink: #FF8A8F;
  --warn-ink: #F2C063;
  --warn-bg: #2A2414;
  --info-bg: #1E2140;
  --focus: #A3AAFF;
  --scrim: rgba(4, 6, 10, 0.72);
  --scrim-light: rgba(4, 6, 10, 0.4);

  /* The glass. The receipt only: the card on desktop, the strip and the sheet on a phone */
  --glass-hi: rgba(200, 206, 255, 0.10);
  --glass-mid: rgba(150, 158, 235, 0.04);
  --glass-lo: rgba(8, 10, 14, 0.34);
  --glass-base: rgba(27, 33, 43, 0.50);   /* the card, over the still page */
  --glass-dense: rgba(27, 33, 43, 0.92);  /* the strip and the sheet, over content that moves */
  --glass-solid: #1D2330;                  /* reduced transparency, no backdrop-filter */
  --glass-edge: rgba(163, 170, 255, 0.30); /* indigo hairline edge */
  --glass-shine: rgba(232, 235, 255, 0.18);
  --glass-blur: blur(24px) saturate(140%);
  --hair: rgba(163, 170, 255, 0.42);       /* the receipt's dashed rule and proof rule */
  --sheen-a: #5059DA;
  --sheen-b: #7C85F7;
  --sheen-c: #C9CDFF;
  --total-ink: #F4F5FF;
  --shadow-card: 0 40px 80px -32px rgba(4, 6, 10, 0.9), 0 14px 28px -14px rgba(4, 6, 10, 0.7);
  --shadow-pop: 0 30px 70px -24px rgba(4, 6, 10, 0.85);
  --shadow-up: 0 -14px 32px -10px rgba(4, 6, 10, 0.7);

  /* Type */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  --t-total: clamp(38px, 11vw, 48px);
  --t-strip: 24px;
  --t-brand: 19px;
  --t-title: 18px;
  --t-share: 18px;
  --t-body: 16px;
  --t-control: 15px;
  --t-small: 14px;
  --t-micro: 13px;

  /* Shape */
  --r-card: 22px;
  --r-surface: 16px;
  --r-ctl: 10px;
  --r-pill: 999px;

  /* Space, 4 px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px; --s12: 48px; --s16: 64px;
  --tap: 44px;
  --sec-h: 52px;    /* a folded section's header row on a phone */
  --top-h: 60px;
  --strip-h: 111px; /* the strip's height with its usual content. The build measures the real height and sets it */
}
@media (min-width: 1024px) {
  :root { --top-h: 64px; --strip-h: 0px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; scroll-padding-bottom: calc(var(--strip-h) + 12px); }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0; min-height: 100dvh; color: var(--text); background: var(--l2);
  font-family: var(--font-ui); font-size: var(--t-body); line-height: 24px;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; fill: currentColor; flex: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- frame ---------- */
.app { min-height: 100dvh; overflow-x: clip; }
.top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3);
  min-height: var(--top-h); padding: var(--s2) var(--s4);
  background: var(--l1); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mark { width: 28px; height: 28px; fill: var(--accent-ink); flex: none; }
.word { font-size: var(--t-brand); line-height: 24px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }

.notes { order: 3; flex: 1 0 100%; display: grid; gap: var(--s2); padding-bottom: var(--s1); }
.notes:empty { display: none; }
.note {
  display: flex; align-items: center; gap: var(--s3); min-height: 48px;
  padding: var(--s1) var(--s1) var(--s1) var(--s4);
  background: var(--info-bg); border: 1px solid rgba(124, 133, 247, 0.38); border-radius: var(--r-surface);
}
.note p { flex: 1; font-size: var(--t-small); line-height: 20px; padding: var(--s2) 0; }
.note > .ic { width: 20px; height: 20px; fill: var(--accent-ink); }
.note.is-warn { background: var(--warn-bg); border-color: rgba(242, 192, 99, 0.45); padding-right: var(--s4); }
.note.is-warn > .ic { fill: var(--warn-ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s4); border-radius: var(--r-ctl); border: 1px solid transparent;
  background: none; font-size: var(--t-control); line-height: 20px; font-weight: 600; white-space: nowrap;
}
.btn .ic { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary .ic { fill: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn-ghost { border-color: var(--line-strong); background: transparent; color: var(--text); }
.btn-ghost .ic { fill: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--hover); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { color: var(--text-faint); border-color: var(--l5); background: transparent; cursor: not-allowed; }
.btn:disabled .ic { fill: var(--text-faint); }
.btn-block { width: 100%; min-height: 48px; font-size: var(--t-body); }
.btn-lg { min-height: 48px; padding: 0 var(--s5); font-size: var(--t-body); }

.icon-btn {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); flex: none; padding: 0;
  border: 0; border-radius: var(--r-ctl); background: none; color: var(--text-muted);
}
.icon-btn .ic { width: 18px; height: 18px; fill: currentColor; }
.icon-btn:hover:not(:disabled) { color: var(--text); background: var(--hover); }
.icon-btn:active:not(:disabled) { transform: translateY(1px); }
.icon-btn:disabled { color: var(--text-faint); cursor: not-allowed; }

.chip-btn {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line-glass); background: rgba(14, 18, 25, 0.45);
  font-size: var(--t-small); line-height: 20px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.chip-btn .ic { width: 16px; height: 16px; fill: var(--text-muted); }
.chip-btn:hover { background: var(--hover); }
.chip-btn:active { transform: translateY(1px); }

/* ---------- the glass: the receipt's one material ---------- */
.glass {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, var(--glass-hi) 0%, var(--glass-mid) 40%, var(--glass-lo) 100%), var(--glass-base);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 0 0 1px rgba(163, 170, 255, 0.06), var(--shadow-card);
}
.glass.dense { background: linear-gradient(155deg, var(--glass-hi) 0%, var(--glass-mid) 40%, var(--glass-lo) 100%), var(--glass-dense); }
/* The top edge of the receipt: a single indigo sheen, not a rainbow */
.foil {
  height: 3px; flex: none;
  background: linear-gradient(90deg, var(--sheen-a) 0%, var(--sheen-b) 25%, var(--sheen-c) 50%, var(--sheen-b) 75%, var(--sheen-a) 100%);
  background-size: 220% 100%; background-position: 0 0;
}

/* ---------- the receipt card (desktop) ---------- */
.stage { position: relative; min-width: 0; }
.card { --pad: 20px; max-width: 460px; margin: 0 auto; padding: 0 var(--pad) var(--pad); border-radius: var(--r-card); }
.card > .foil { margin: 0 calc(-1 * var(--pad)); }
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(112deg, rgba(220, 224, 255, 0) 38%, rgba(220, 224, 255, 0.09) 50%, rgba(220, 224, 255, 0) 62%);
  transform: translateX(-120%);
}

/* ---------- the receipt's content (in the card, or in the sheet on a phone) ---------- */
.r-total { padding: var(--s5) 0 var(--s4); }
.r-label { display: block; font-size: var(--t-small); line-height: 20px; font-weight: 600; color: var(--text); }
.r-amount {
  margin-top: var(--s1); font-family: var(--font-num); font-size: var(--t-total); line-height: 1.1; font-weight: 600;
  letter-spacing: -0.03em; color: var(--total-ink); white-space: nowrap;
}
.r-amount .cur { font-size: 0.42em; letter-spacing: 0; color: var(--text); }
.r-lines { display: grid; gap: 6px; margin: 0; font-size: var(--t-control); line-height: 22px; }
.r-lines div { display: flex; justify-content: space-between; gap: var(--s3); }
.r-lines dt { color: var(--text-muted); }
.r-lines dd { margin: 0; font-family: var(--font-num); white-space: nowrap; }
.r-rule { height: 1px; margin: var(--s5) 0 var(--s4); background: repeating-linear-gradient(90deg, var(--hair) 0 6px, transparent 6px 11px); }

.r-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.r-head h2 { font-size: var(--t-small); line-height: 20px; font-weight: 600; color: var(--text-muted); }
.r-head span { font-family: var(--font-num); font-size: var(--t-micro); line-height: 18px; color: var(--text-muted); }
.r-splits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.r-splits li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); align-items: baseline; }
.nm { font-weight: 600; overflow-wrap: anywhere; }
.amt { font-family: var(--font-num); font-size: var(--t-share); line-height: 24px; font-weight: 600; white-space: nowrap; text-align: right; }
.wk { grid-column: 1 / -1; font-family: var(--font-num); font-size: var(--t-micro); line-height: 18px; color: var(--text-muted); }

.r-check {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hair);
}
.seal { width: 24px; height: 24px; fill: url(#seal-grad); }
.r-check .lbl-proof { font-weight: 600; }
.r-check .amt { color: var(--accent-ink); }
.r-check .wk { grid-column: 2 / -1; }

.r-spare { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.r-spare p { font-size: var(--t-small); line-height: 20px; color: var(--text-muted); }
.r-spare-acts { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
.r-copy { margin-top: var(--s5); }
.status {
  display: flex; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s3);
  font-size: var(--t-small); line-height: 20px; font-weight: 600; color: var(--text); text-align: left;
}
.status:empty { display: none; }
.status .ic { width: 16px; height: 16px; fill: var(--accent-ink); }
.status.is-fail .ic { fill: var(--error-ink); }
.r-empty { display: grid; gap: var(--s3); padding: var(--s1) 0 var(--s2); }
.r-empty .ic { width: 28px; height: 28px; fill: var(--text-muted); }
.r-msg { display: flex; gap: var(--s3); align-items: flex-start; }
.r-msg .ic { width: 22px; height: 22px; fill: var(--warn-ink); margin-top: 1px; }

/* ---------- the working: inputs on the field ---------- */
.work { display: flex; flex-direction: column; min-width: 0; padding: var(--s4) var(--s4) calc(var(--strip-h) + var(--s6)); }
.blk { min-width: 0; margin: 0; padding: 0; border: 0; }
.work > .blk + .blk { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.blk-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--tap); margin-bottom: var(--s2); }
.blk-h { display: block; font-size: var(--t-control); line-height: 20px; font-weight: 600; color: var(--text); }
.blk-h.solo { margin-bottom: 10px; }

.field { position: relative; display: flex; align-items: center; min-height: 46px; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--field); }
.field:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.field input { flex: 1; min-width: 0; width: 100%; height: 44px; border: 0; outline: 0; background: transparent; padding: 0 var(--s3); font-size: var(--t-body); line-height: 24px; color: var(--text); }
.field input::placeholder { color: var(--text-muted); opacity: 1; }
.field.is-bad { border-color: var(--error-ink); box-shadow: inset 0 0 0 1px var(--error-ink); }
.money .unit, .pct .unit { font-family: var(--font-num); font-size: var(--t-small); line-height: 20px; color: var(--text-muted); flex: none; }
.money .unit { padding-left: 10px; }
.money input, .pct input { font-family: var(--font-num); text-align: right; }
.money input { padding-left: 6px; padding-right: 10px; }
.pct input { padding-right: 2px; }
.pct .unit { padding-right: var(--s3); }
.field .icon-btn { border-radius: 0 9px 9px 0; }
.field .icon-btn:focus-visible { outline-offset: -3px; }
.err { display: flex; align-items: center; gap: 6px; margin-top: var(--s2); font-size: var(--t-small); line-height: 20px; font-weight: 600; color: var(--error-ink); }
.err .ic { width: 16px; height: 16px; fill: var(--error-ink); }
.lbl { display: block; margin-bottom: var(--s2); font-size: var(--t-small); line-height: 20px; font-weight: 600; color: var(--text-muted); }
.hint { font-size: var(--t-small); line-height: 20px; color: var(--text-muted); }

.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s2); }

.charges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); max-width: 380px; }
.charges .hint { grid-column: 1 / -1; }
/* a rate error under a half-width field breaks into two even lines, its icon on the first */
.charges .err { align-items: flex-start; text-wrap: balance; }
.charges .err .ic { margin-top: 2px; }

/* People and Charges fold to one header row below 1024 px. On desktop the header row is not shown and the
   section is always open */
.sec-h { display: none; font: inherit; }
.sec-btn {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3);
  width: 100%; min-height: var(--sec-h); padding: 0; border: 0; border-radius: var(--r-ctl);
  background: none; color: var(--text); text-align: left;
}
/* The row's text sits on the column edge, so its focus ring is drawn 8 px wider than the row on each side */
.sec-btn:focus-visible { outline: none; }
.sec-btn:focus-visible::after {
  content: ""; position: absolute; inset: 2px calc(-1 * var(--s2)); pointer-events: none;
  border: 2px solid var(--focus); border-radius: var(--r-ctl);
}
.sec-name { font-size: var(--t-control); line-height: 20px; font-weight: 600; white-space: nowrap; }
.sec-sum {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right;
  font-size: var(--t-small); line-height: 20px; color: var(--text-muted);
}
.sec-sum .ic { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: var(--error-ink); }
.sec-btn.is-bad .sec-sum { color: var(--error-ink); font-weight: 600; }
.sec-caret { color: var(--text-muted); }
/* only where a pointer really hovers, so a tapped row on a phone does not stay lit */
@media (hover: hover) {
  .sec-btn:hover .sec-caret, .sec-btn:hover:not(.is-bad) .sec-sum { color: var(--text); }
}
.sec-btn[aria-expanded="true"] .sec-caret { transform: rotate(180deg); }
.sec-btn[aria-expanded="true"] .sec-sum { visibility: hidden; }

.split { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.mode-sw {
  position: relative; flex: 0 1 280px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); overflow: hidden; background: var(--field);
}
.mode-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mode-sw label { display: grid; place-items: center; min-height: var(--tap); font-size: var(--t-control); line-height: 20px; font-weight: 600; color: var(--text-muted); cursor: pointer; user-select: none; }
.mode-sw label + input + label { border-left: 1px solid var(--line-strong); }
.mode-sw label:hover { color: var(--text); }
.mode-sw input:checked + label { background: var(--accent-tint); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-line); }
.mode-sw input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: -5px; }

.sub-field { max-width: 240px; }

/* Items, inside their own scrolling frame. A fade at an edge says there is more that way: the build sets data-up
   while the frame is scrolled down from its top and data-down while there is more below */
.frame-wrap {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  background: var(--l1); border: 1px solid var(--line-frame); border-radius: var(--r-surface); overflow: hidden;
}
.frame-wrap:has(.frame:empty) { display: none; }
.frame {
  list-style: none; margin: 0; padding: 0 var(--s3) 0 14px; overflow-y: auto; overscroll-behavior: auto;
  max-height: calc(100dvh - var(--strip-h) - 88px);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.frame::-webkit-scrollbar { width: 8px; }
.frame::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
.frame-wrap::before, .frame-wrap::after {
  content: ""; position: absolute; left: 0; right: 10px; height: 36px; z-index: 1; pointer-events: none; opacity: 0;
}
.frame-wrap::before { top: 0; background: linear-gradient(var(--l1), rgba(16, 20, 27, 0)); }
.frame-wrap::after { bottom: 0; background: linear-gradient(rgba(16, 20, 27, 0), var(--l1) 85%); }
.frame-wrap[data-up]::before, .frame-wrap[data-down]::after { opacity: 1; }
.item { position: relative; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item.needs::before { content: ""; position: absolute; left: -10px; top: var(--s3); bottom: var(--s3); width: 3px; border-radius: 2px; background: var(--warn-ink); }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px var(--tap); gap: var(--s2); align-items: center; }
.item-row .err { grid-column: 1 / 3; justify-self: end; margin-top: 0; }
.taps { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.tap {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 var(--s4);
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent;
  font-size: var(--t-small); line-height: 20px; font-weight: 600; color: var(--text-muted);
}
.tap .ic { display: none; width: 14px; height: 14px; fill: var(--accent-ink); }
.tap[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent-line); color: var(--text); padding-left: 12px; }
.tap[aria-pressed="true"] .ic { display: block; }
.tap:hover { color: var(--text); }
.tap:active { transform: translateY(1px); }

/* ---------- the strip: the receipt docked at the bottom (phone and tablet) ---------- */
.strip {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column;
  border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 0;
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 0 0 1px rgba(163, 170, 255, 0.06), var(--shadow-up);
}
.strip-in { width: 100%; max-width: 608px; margin: 0 auto; padding: 10px var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); display: grid; gap: var(--s2); }
.strip-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s3); min-height: 30px; }
.strip-info { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.s-label { font-size: var(--t-small); line-height: 20px; font-weight: 600; color: var(--text); }
.s-fig { font-family: var(--font-num); font-size: var(--t-strip); line-height: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--total-ink); white-space: nowrap; }
.s-fig .cur { font-size: var(--t-small); letter-spacing: 0; color: var(--text); }
.s-msg { display: flex; align-items: flex-start; gap: var(--s2); font-size: var(--t-small); line-height: 20px; color: var(--text); padding: 5px 0; }
.s-msg .ic { width: 18px; height: 18px; fill: var(--warn-ink); margin-top: 1px; }
.strip .status { margin-top: 0; justify-content: flex-start; }
.strip-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s2); }
.strip-acts .btn { padding: 0 var(--s3); min-width: 0; }
.strip-acts .btn-ghost { background: rgba(14, 18, 25, 0.5); border-color: var(--line-glass); }
.caret-up { transform: rotate(180deg); }

/* ---------- dialogs (solid, never glass, except the Splits sheet, which is the receipt itself) ---------- */
dialog { padding: 0; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--r-surface); background: var(--l3); color: var(--text); box-shadow: var(--shadow-pop); }
dialog::backdrop { background: var(--scrim); }
.in { padding: var(--s5); }
.modal { width: min(400px, calc(100% - 32px)); max-width: none; }
.modal .in { padding: var(--s6); }
.modal h2 { font-size: var(--t-title); line-height: 24px; font-weight: 700; }
.modal p { margin-top: var(--s2); color: var(--text-muted); }
.acts { display: grid; gap: var(--s2); margin-top: var(--s6); }

/* P2 Splits sheet: the receipt card lifted from the strip */
.sheet-dlg {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px; max-height: none;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
}
.sheet { display: flex; flex-direction: column; max-height: 92dvh; border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 0; }
.sheet:focus { outline: none; }
.sheet-top { flex: none; position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 48px; padding: 2px var(--s2) 0; }
.grab { position: absolute; left: 50%; top: 10px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--l5); }
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s5) calc(var(--s5) + env(safe-area-inset-bottom)); }
.sheet-scroll .r-total { padding-top: 0; }

/* P1 spare sen: a popover beside the card on desktop, a bottom sheet below 1024 px (where the receipt is itself a sheet) */
.pop { position: fixed; inset: auto; margin: 0; width: min(340px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; }
.pop::backdrop { background: var(--scrim-light); }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: -10px -12px 0 0; }
.pop-head h2 { font-size: var(--t-body); line-height: 24px; font-weight: 700; }
.pop-sub { font-size: var(--t-small); line-height: 20px; color: var(--text-muted); }
.choices { display: grid; gap: 2px; margin: var(--s3) calc(-1 * var(--s2)) 0; }
.choice { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 0 var(--s2); border-radius: var(--r-ctl); cursor: pointer; font-weight: 600; }
.choice:hover { background: var(--l5); }
.choice input, .pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dot { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--line-strong); }
.choice input:checked + .dot { border-color: var(--accent-ink); }
.choice input:checked + .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-ink); }
.choice input:focus-visible + .dot { outline: 2px solid var(--focus); outline-offset: 2px; }
.pick { min-width: 0; margin: 0; padding: 0 var(--s2) var(--s2) 40px; border: 0; }
.pick-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill { position: relative; }
.pill-face {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 var(--s4);
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  font-size: var(--t-small); line-height: 20px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.pill-face .ic { display: none; width: 14px; height: 14px; fill: var(--accent-ink); }
.pill-face:hover { color: var(--text); }
.pill input:checked + .pill-face { background: var(--accent-tint); border-color: var(--accent-line); color: var(--text); padding-left: 12px; }
.pill input:checked + .pill-face .ic { display: block; }
.pill input:focus-visible + .pill-face { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- widths ---------- */
@media (max-width: 599px) {
  .frame { padding: 0 var(--s2) 0 10px; }
  .item-row { gap: 6px; }
  .item.needs::before { left: -7px; }
}
@media (min-width: 600px) {
  .acts { display: flex; justify-content: flex-end; }
  .item-row { grid-template-columns: minmax(0, 1fr) 128px var(--tap); }
}
@media (max-width: 1023px) {
  .stage { display: none; }
  .pop { inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px; border-radius: var(--r-surface) var(--r-surface) 0 0; border-bottom: 0; max-height: 82dvh; }
  /* Phone and tablet: People and Charges are one header row each, then the Split row, then Items */
  .work { padding-top: var(--s1); }
  .sec-h { display: block; }
  .sec-body .blk-h { display: none; }               /* the header row is the heading here */
  .sec[data-open="false"] > .sec-body { display: none; }
  .sec-in { padding: var(--s1) 0 var(--s5); }
  .people-in { display: flex; flex-direction: column; }
  .people-in > .blk-head { order: 1; margin: var(--s3) 0 0; justify-content: flex-start; }
  .work > .sec + .blk { margin-top: 0; padding-top: 0; }
  .work > .sec + .split { padding-top: var(--s3); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .work { max-width: 640px; margin: 0 auto; }
}

/* Desktop: the card beside the working, and the page never scrolls */
@media (min-width: 1024px) {
  .app { height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
  .top { flex: none; flex-wrap: nowrap; padding: 0 max(var(--s12), calc((100vw - 1184px) / 2)); }
  .app > .top .brand { margin-top: 1px; } /* the 47 px content area centres the 28 px mark on a half pixel, this lands it on a whole one */
  .notes { order: 0; flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; padding: 0; }
  .note { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .note p { padding: 0; }
  .layout {
    flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--s12);
    display: grid; grid-template-columns: minmax(320px, 1fr) minmax(440px, 560px); grid-template-rows: minmax(0, 1fr); column-gap: clamp(var(--s8), 5vw, var(--s16));
  }
  /* side padding leaves room for the card's shadow, which the column would otherwise clip */
  .stage { min-height: 0; overflow-y: auto; padding: var(--s5) 10px var(--s7); scrollbar-width: thin; }
  .card { --pad: 24px; }
  .work { min-height: 0; overflow-y: auto; padding: var(--s5) 6px var(--s6); scrollbar-width: thin; }
  .work > .blk + .blk { margin-top: var(--s4); padding-top: var(--s4); }
  /* start alignment with the hint dropped by a label's height, and a rate error grows its own cell downward
     without moving the other field */
  .charges { max-width: none; grid-template-columns: 150px 150px minmax(0, 1fr); align-items: start; }
  .charges .hint { grid-column: auto; min-height: 46px; display: flex; align-items: center; margin-top: var(--s7); }
  .items-blk { flex: 1 1 auto; min-height: 170px; display: flex; flex-direction: column; }
  .items-blk .frame-wrap { flex: 1 1 auto; }
  .frame { flex: 1 1 auto; min-height: 0; max-height: none; }
  .r-splits.many { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto); column-gap: var(--s6); row-gap: var(--s2); }
  .strip { display: none; }
}

/* ---------- motion: only where it answers something, and only when allowed ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .chip-btn, .tap, .icon-btn, .choice, .mode-sw label, .pill-face { transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
  .frame-wrap::before, .frame-wrap::after { transition: opacity 0.16s ease; }
  .sec-caret { transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .card > .foil, .strip > .foil { animation: foil 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
  .card::after { animation: sheen 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
  .sheet-dlg[open] .sheet { animation: lift 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .pop[open] { animation: rise 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
  .modal[open] { animation: fade 0.16s ease-out; }
}
@keyframes foil { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes lift { from { opacity: 0.5; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- solid fallbacks for the glass ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass.dense { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass.dense { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .card::after { display: none; }
}

/* ---------- static stand-ins, for the goldens only ----------
   The build opens every dialog with showModal(), which puts it in the top layer over its ::backdrop and makes the
   page behind it inert. A golden has no script, so it opens the dialog with the open attribute, puts inert on what
   sits behind, and draws each backdrop as a div. These rules match only a dialog that is open but not modal, so they
   never touch the build's own dialogs. Layer order, bottom to top: the strip 20, the backdrop 40, the Splits sheet 41,
   the light backdrop over the sheet 42, P1 and M1 43. */
.backdrop { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
.backdrop.light { z-index: 42; background: var(--scrim-light); }
.sheet-dlg[open]:not(:modal) { z-index: 41; }
.pop[open]:not(:modal) { z-index: 43; }
.modal[open]:not(:modal) { position: fixed; inset: 0; z-index: 43; margin: auto; height: fit-content; }
@media (min-width: 1024px) {
  /* no Splits sheet on desktop, where the card is on the page */
  .sheet-dlg[open]:not(:modal), .backdrop.under-sheet { display: none; }
}