/* Split Table sidebar module. Uses the site theme's custom properties with neutral fallbacks. */
.split-table { --st-paper: var(--c-surface, #fffdf8); --st-ink: var(--c-text, #1f2433); --st-muted: var(--c-muted, #5a5f6e);
  --st-accent: var(--c-accent, #1f4fbf); --st-on-accent: var(--c-on-accent, #ffffff); --st-line: var(--c-border, #ded3bd);
  --st-good: #1d6b3a; --st-bad: #a12a2a; --st-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  min-width: 0; max-width: 100%; padding: 16px; background: var(--st-paper); color: var(--st-ink);
  border: 1px solid var(--st-line); border-top: 4px solid var(--st-accent); border-radius: 10px 10px 0 0;
  box-shadow: 0 12px 24px -20px rgb(31 36 51 / .45); font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.split-table *, .split-table *::before, .split-table *::after { box-sizing: border-box; }
.split-table [hidden] { display: none !important; }
.split-table h2 { margin: 0; font-size: 1.25rem; color: var(--st-ink); }
.split-table h3 { margin: 0 0 8px; font-size: 1rem; color: var(--st-ink); text-transform: uppercase; letter-spacing: .06em; }
.split-table p { margin: 0 0 8px; }
.st-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.st-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.st-icon { flex: none; width: 40px; height: 40px; color: var(--st-accent); }
.st-sub, .st-note, .st-hint, .st-empty { color: var(--st-muted); font-size: .88rem; }
.st-msg { min-height: 1.4em; font-weight: 600; }
.st-msg.st-error { color: var(--st-bad); }
.st-msg.st-ok { color: var(--st-good); }

.st-panel { padding: 12px 0; border-top: 2px dashed var(--st-line); }
.st-form { display: grid; gap: 4px; min-width: 0; }
.st-form label { font-size: .85rem; font-weight: 600; color: var(--st-muted); }
.st-form input, .st-form select { width: 100%; min-width: 0; min-height: 40px; padding: 6px 10px; font: inherit; color: var(--st-ink);
  background: #ffffff; border: 1px solid var(--st-line); border-radius: 8px; }
.st-form input:focus-visible, .st-form select:focus-visible { outline: 3px solid var(--st-accent); outline-offset: 1px; }
.st-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; margin-top: 4px; }
.st-row input { flex: 1 1 8rem; width: auto; }

.st-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 12px;
  font-family: inherit; font-size: .9rem; font-weight: 600; line-height: 1.1; color: var(--st-accent); background: transparent;
  border: 1px solid var(--st-accent); border-radius: 8px; cursor: pointer; }
.st-btn:hover { background: rgb(31 79 191 / .08); }
.st-btn:focus-visible { outline: 3px solid var(--st-accent); outline-offset: 2px; }
.st-btn-primary { color: var(--st-on-accent); background: var(--st-accent); }
.st-btn-primary:hover { background: var(--st-accent); filter: brightness(1.1); }
.st-btn-danger { color: var(--st-bad); border-color: var(--st-bad); }
.st-btn-small { min-height: 32px; padding: 4px 8px; font-size: .8rem; }

.st-people { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.st-person { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; min-width: 0;
  padding: 6px 8px; border: 1px solid var(--st-line); border-radius: 8px; background: #ffffff; }
.st-person-name { min-width: 0; font-weight: 600; }
.st-row-actions { display: inline-flex; gap: 4px; }

/* expense table: three fixed columns that fit a 288px column without horizontal scrolling */
.st-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.st-table th { padding: 4px; font-size: .78rem; text-align: start; color: var(--st-muted); text-transform: uppercase;
  letter-spacing: .04em; border-bottom: 1px solid var(--st-ink); }
.st-table td { padding: 6px 4px; vertical-align: top; border-bottom: 1px dotted var(--st-line); }
.st-table .st-num { width: 5.4rem; text-align: end; font-family: var(--st-mono); font-size: .88rem; }
.st-table .st-act { width: 4.4rem; }
.st-table td.st-act .st-btn { width: 100%; }
.st-table td.st-act .st-btn + .st-btn { margin-top: 4px; }
@media (max-width: 400px) { .split-table { padding: 12px; } }
.st-desc-text { display: block; font-weight: 600; }
.st-payer { display: block; color: var(--st-muted); font-size: .8rem; }

.st-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.st-total { padding: 8px; border-radius: 8px; background: var(--st-accent); color: var(--st-on-accent); }
.st-total dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.st-total dd { margin: 0; font: 700 1.2rem/1.2 var(--st-mono); }

/* balance cards: one per participant, net colour-coded and labelled in words */
.st-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.st-card { min-width: 0; padding: 8px 10px; background: #ffffff; border: 1px solid var(--st-line); border-left: 4px solid var(--st-muted); border-radius: 8px; }
.st-card-pos { border-left-color: var(--st-good); }
.st-card-neg { border-left-color: var(--st-bad); }
.st-card-zero { border-left-color: var(--st-accent); }
.st-card-name { margin: 0 0 4px; font-weight: 700; }
.st-card-facts { display: grid; gap: 2px; margin: 0 0 4px; font-size: .85rem; }
.st-card-facts div { display: flex; justify-content: space-between; gap: 8px; }
.st-card-facts dt { color: var(--st-muted); }
.st-card-facts dd { margin: 0; font-family: var(--st-mono); }
.st-card-status { margin: 0; font-size: .85rem; font-weight: 600; }
.st-card-pos .st-card-status { color: var(--st-good); }
.st-card-neg .st-card-status { color: var(--st-bad); }

.st-transfers { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.st-transfer, .st-settled { padding: 6px 8px; border: 1px dashed var(--st-line); border-radius: 8px; }
.st-transfer .st-amount { font-family: var(--st-mono); color: var(--st-accent); }
.st-from, .st-to { font-weight: 600; }
.st-settled { color: var(--st-muted); }

.st-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 2px dashed var(--st-line); }