/* A ledger: summary strip, then tabs; each tab is one wide, scrollable table with sticky labels. */
:root {
  --bg: #f6f7f5; --surface: #ffffff; --sunk: #eef1ed; --ink: #1b2420; --muted: #5d6a63; --rule: #d9dfda;
  --accent: #1e5a43; --accent-soft: #e2efe8; --edit: #fff8e1; --edit-rule: #e8cf7a;
  --good: #2f7d4f; --bad: #b23a2e; --warn: #9a6a00; --banner: #5b3d00; --banner-ink: #fff6e0;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #121715; --surface: #18201c; --sunk: #1f2924; --ink: #e4ebe6; --muted: #9aa8a0; --rule: #2e3a34;
  --accent: #7cc6a3; --accent-soft: #1f3a2e; --edit: #2c2715; --edit-rule: #6b5a22;
  --good: #6fcf97; --bad: #f08a7e; --warn: #e2b44f; --banner: #e2b44f; --banner-ink: #1b1400; color-scheme: dark } }
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.45 }
.wrap { max-width: 1320px; margin: 0 auto; padding-inline: 16px; padding-block: 20px 48px }
.narrow { max-width: 460px }
h1, h2, h3 { font-family: var(--serif); font-weight: 650; text-wrap: balance; margin: 0 }
h1 { font-size: 1.75rem } h2 { font-size: 1.2rem } h3 { font-size: 1.05rem }
.eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600 }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap }
.muted { color: var(--muted) }
button, select, input, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
[hidden] { display: none !important }
header.top { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: end; justify-content: space-between; margin-bottom: 16px }
.who { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; border: 1px solid var(--rule); background: var(--surface); color: var(--muted) }
.chip.ok { color: var(--good); border-color: currentColor } .chip.bad { color: var(--bad); border-color: currentColor } .chip.warn { color: var(--warn); border-color: currentColor }
.chip.calc { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-size: .66rem; padding: 0 6px }
.banner { position: sticky; top: 0; z-index: 20; background: var(--banner); color: var(--banner-ink); padding: 8px 16px; display: flex; gap: 12px; align-items: center; justify-content: center; font-weight: 700 }
.banner button { background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 6px; padding: 2px 10px; cursor: pointer; font-weight: 700 }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; margin-bottom: 18px }
.kpi { background: var(--surface); padding: 12px 16px; display: grid; gap: 2px; min-width: 0 }
.kpi .v { font-family: var(--mono); font-size: 1.35rem; font-weight: 500; font-variant-numeric: tabular-nums }
.kpi .s { font-size: .78rem; color: var(--muted) }
nav.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; overflow-x: auto }
nav.tabs button { background: none; border: 0; padding: 8px 14px; border-bottom: 2px solid transparent; cursor: pointer; color: var(--muted); font-weight: 600; white-space: nowrap }
nav.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent) }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: end; margin-bottom: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px }
.field { display: grid; gap: 3px; min-width: 0 }
.field > span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600 }
select, input[type=text], input[type=email], input[type=search], textarea { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 5px 8px; max-width: 100% }
.checks { display: flex; flex-wrap: wrap; gap: 4px 12px }
.checks label { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; font-size: .86rem }
.btn { border: 1px solid var(--rule); background: var(--surface); border-radius: 6px; padding: 5px 12px; cursor: pointer; font-weight: 600; text-decoration: none; color: var(--ink); display: inline-block }
.btn.primary { background: var(--accent); color: var(--surface); border-color: var(--accent) }
.btn.small { padding: 2px 8px; font-size: .8rem }
.btn:disabled { opacity: .5; cursor: default }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden }
.seg button { border: 0; background: var(--surface); padding: 5px 10px; cursor: pointer; font-size: .85rem }
.seg button + button { border-left: 1px solid var(--rule) }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600 }
.tablebox { overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface) }
table.ledger { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .88rem }
.ledger th, .ledger td { padding: 4px 10px; border-bottom: 1px solid var(--rule); text-align: right; vertical-align: middle }
.ledger thead th { position: sticky; top: 0; background: var(--sunk); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; z-index: 2 }
.ledger th.lab, .ledger td.lab { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 240px; max-width: 360px }
.ledger thead th.lab { background: var(--sunk); z-index: 3 }
.ledger th.notehead { text-align: left }
.ledger .ed { background: var(--edit); box-shadow: inset 1px 0 var(--edit-rule), inset -1px 0 var(--edit-rule) }
.ledger thead .ed { background: var(--edit); color: var(--ink) }
.ledger tr.g0 td { background: var(--sunk); font-weight: 700; font-family: var(--serif); font-size: .98rem }
.ledger tr.g0 td.lab { background: var(--sunk) }
.ledger tr.g1 td { font-weight: 650 } .ledger tr.g2 td { font-weight: 600 }
.ledger tr.line td.lab { font-weight: 400 }
.ledger tr.total td { font-weight: 700; border-top: 2px solid var(--ink); font-family: var(--serif); font-size: 1rem }
.ledger td.note { text-align: left; color: var(--muted); font-size: .8rem; min-width: 220px; max-width: 360px }
.ledger td.note input { width: 100%; font-size: .8rem; border-color: transparent; background: transparent; padding: 3px 6px }
.ledger td.note input:hover, .ledger td.note input:focus { border-color: var(--rule); background: var(--surface) }
.ledger td.span { position: static; text-align: left }
.tog { background: none; border: 0; cursor: pointer; padding: 0 4px 0 0; color: var(--muted); width: 18px; text-align: center }
.linebtn { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; font: inherit }
.linebtn:hover { text-decoration: underline }
.ind1 { padding-left: 18px !important } .ind2 { padding-left: 34px !important } .ind3 { padding-left: 50px !important } .ind4 { padding-left: 66px !important }
input.amt { width: 9.5em; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; border: 1px solid transparent; background: transparent; border-radius: 4px; padding: 2px 6px }
input.amt:hover { border-color: var(--edit-rule) } input.amt:focus { border-color: var(--accent); background: var(--surface) }
.up { color: var(--bad) } .down { color: var(--good) }
.inc .up { color: var(--good) } .inc .down { color: var(--bad) }
.sub { font-size: .75rem; color: var(--muted); font-weight: 400 }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px; min-width: 0; display: grid; gap: 10px; align-content: start; margin-top: 12px }
.explain { font-size: .86rem; color: var(--muted); max-width: 72ch; display: grid; gap: 6px }
.explain code { font-family: var(--mono); font-size: .8rem; background: var(--sunk); padding: 1px 4px; border-radius: 3px; color: var(--ink) }
.log > div { display: grid; grid-template-columns: 9rem 9rem 1fr auto auto; gap: 4px 14px; padding: 7px 4px; border-bottom: 1px solid var(--rule); align-items: baseline }
@media (max-width: 700px) { .log > div { grid-template-columns: 1fr auto } }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-size: .86rem; z-index: 30; max-width: calc(100% - 32px) }
form.addline, form.addperson { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end }
details.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px }
details.panel summary { cursor: pointer; font-weight: 600 }
dialog { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); color: var(--ink); max-width: min(760px, calc(100% - 32px)); width: 100%; padding: 16px }
dialog::backdrop { background: rgba(0,0,0,.35) }
.people td, .people th { text-align: left }
.linkbox { display: flex; gap: 6px; flex-wrap: wrap } .linkbox input { flex: 1 1 320px; font-family: var(--mono); font-size: .78rem }
#signin form { margin-top: 16px }
#signin input[type=email] { width: 100% }
.log > div > .num { white-space: normal; overflow-wrap: anywhere }