/* Donna. Brand tokens first; modules append their own rules at the bottom. System fonts only: no external requests. */
:root {
  --navy:#0b0d34; --river:#4072ad; --river-deep:#2f5a8c; --sky:#dbe7f5; --stone:#f4f5f7; --card:#fff;
  --ink:#141826; --mute:#6b7280; --line:#e3e6ec; --line-strong:#c9cfd9;
  --s-quoted:#8a93a6; --s-tentative:#9aa3b5; --s-secured:#e0a92b; --s-paid:#2e9e6b; --s-lapsed:#c9463d; --s-hold:#b4bac8; --s-completed:#8fc9ad;
  --green:var(--s-paid); --red:var(--s-lapsed); --amber:var(--s-secured); --blue:var(--river); --bg:var(--stone);
  --rail:220px; --radius:12px;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme:dark; --navy:#07081f; --river:#6b9bd6; --river-deep:#4f7fb8; --sky:#1d2a3d; --stone:#101320; --card:#181c2b;
    --ink:#e8eaf1; --mute:#9aa2b5; --line:#2a3044; --line-strong:#3b4359; --s-tentative:#7a8296; --s-hold:#5d6478; --bg:var(--stone); }
}
* { box-sizing:border-box }
html, body { height:100% }
body { margin:0; font:15px/1.5 var(--font); color:var(--ink); background:var(--bg); display:flex; min-height:100% }
h1, h2, h3, .display { font-family:var(--font-display); letter-spacing:-.01em }
h1 { font-size:26px; font-weight:700; margin:0 0 16px } h2 { font-size:13px; font-weight:600; margin:22px 0 10px; color:var(--mute); text-transform:uppercase; letter-spacing:.08em } h3 { font-size:17px; font-weight:600; margin:0 0 8px }
a { color:var(--river); text-decoration:none } a:hover { text-decoration:underline }
.num, td.num, th.num, .money { font-variant-numeric:tabular-nums; text-align:right }
/* rail */
.rail { width:var(--rail); flex:0 0 var(--rail); background:var(--navy); color:#dfe6f2; display:flex; flex-direction:column; position:sticky; top:0; height:100vh }
.rail .logo { padding:18px 18px 10px } .rail .logo img { width:100%; max-width:170px; display:block } .rail .logo .mark { display:none }
.rail nav { display:flex; flex-direction:column; padding:8px 10px; gap:2px }
.rail nav a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:#c9d3e6; font-weight:500; transition:background .15s ease, color .15s ease }
.rail nav a:hover { background:rgba(255,255,255,.07); text-decoration:none; color:#fff } .rail nav a.on { background:var(--river); color:#fff }
.rail nav svg { width:18px; height:18px; flex:0 0 18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.rail .who { margin-top:auto; padding:14px 18px; font-size:13px; color:#9fb0cc; border-top:1px solid rgba(255,255,255,.1) } .rail .who a { color:#c9d3e6 }
.rail .who svg { display:none; width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.rail nav .label { white-space:nowrap }
@media (max-width:1100px) { :root { --rail:64px } .rail .logo .full { display:none } .rail .logo .mark { display:block; width:36px; max-width:36px; margin:0 auto } .rail .logo { padding:14px 10px 10px } .rail nav .label, .rail .who span { display:none }
  .rail nav a { justify-content:center; padding:10px } .rail .who { padding:12px 0; text-align:center } .rail .who a { display:inline-flex; padding:8px; border-radius:8px } .rail .who a:hover { background:rgba(255,255,255,.07) } .rail .who svg { display:block } }
/* phone: one 52px bar. Mark, a scrolling strip of icons, sign out as an icon; nothing wraps. */
@media (max-width:700px) {
  body { flex-direction:column }
  .rail { width:100%; flex:none; height:calc(52px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 4px 0 max(10px, env(safe-area-inset-left)); position:static; flex-direction:row; align-items:center; gap:6px }
  .rail .logo { padding:0; flex:0 0 auto } .rail .logo a { display:block } .rail .logo .mark { width:30px; height:30px; max-width:none; margin:0 }
  .rail nav { flex:1 1 auto; min-width:0; flex-direction:row; align-items:center; gap:2px; padding:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .rail nav::-webkit-scrollbar { display:none }
  .rail nav a { flex:0 0 auto; padding:8px 9px }
  .rail nav svg { width:20px; height:20px; flex-basis:20px }
  .rail .who { flex:0 0 auto; margin:0; padding:0 max(2px, env(safe-area-inset-right)) 0 4px; border:0; border-left:1px solid rgba(255,255,255,.12); white-space:nowrap }
  .rail .who a { padding:8px 8px }
}
main { flex:1; min-width:0; padding:24px 28px 60px; max-width:1440px }
@media (max-width:700px) { main { padding:16px } }
/* surfaces */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px }
.card.tight { padding:12px 14px }
table { width:100%; border-collapse:collapse } th, td { text-align:left; padding:10px 10px; border-bottom:1px solid var(--line); vertical-align:top } th { font-size:12px; color:var(--mute); text-transform:uppercase; letter-spacing:.06em; font-weight:600; position:sticky; top:0; background:var(--card) }
tr.row:hover td { background:var(--sky) }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px 24px }
label { display:block; font-size:12px; color:var(--mute); margin:10px 0 4px; font-weight:500 }
input[type=text], input[type=email], input[type=date], input[type=number], input[type=tel], input[type=search], input[type=password], select, textarea { width:100%; padding:9px 11px; border:1px solid var(--line-strong); border-radius:8px; font:inherit; background:var(--card); color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--river); box-shadow:0 0 0 3px rgba(64,114,173,.18) }
textarea { min-height:70px }
.check { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:14px; color:var(--ink); font-weight:400 }
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border-radius:8px; border:1px solid var(--river); background:var(--river); color:#fff; font:inherit; font-weight:500; cursor:pointer; transition:background .15s ease, transform .1s ease } .btn:hover { background:var(--river-deep); text-decoration:none } .btn:active { transform:translateY(1px) }
.btn.secondary, .btn.sec { background:var(--card); color:var(--river) } .btn.secondary:hover, .btn.sec:hover { background:var(--sky) }
.btn.danger { background:var(--card); color:var(--red); border-color:var(--red) } .btn.sm { padding:5px 11px; font-size:13px } .btn.ghost { border-color:transparent; background:transparent; color:var(--river) }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px } .actions form { display:inline }
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--sky); color:var(--river-deep); white-space:nowrap }
.pill.draft { background:var(--stone); color:var(--mute) } .pill.quoted { background:transparent; border:1.5px dashed var(--s-quoted); color:var(--mute) }
.pill.sent, .pill.signed, .pill.invoiced, .pill.tentative { background:#e9ebf0; color:#4b5468 } .pill.secured, .pill.open { background:#fbf0cf; color:#7a5300 }
.pill.paid { background:var(--s-paid); color:#fff } .pill.completed { background:#dff2e8; color:#1d6b46 }
.pill.voided, .pill.lapsed, .pill.past_due, .pill.uncollectible, .pill.failed { background:#f8dcd9; color:#8a1f18 }
.warn { background:#fbf0cf; border:1px solid #efd27a; color:#6b4b00; padding:10px 12px; border-radius:8px; margin:10px 0 } .err { background:#f8dcd9; border:1px solid #e3a8a3; color:#7a1b15; padding:10px 12px; border-radius:8px; margin:10px 0 }
.total { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums } .muted { color:var(--mute); font-size:13px }
.kv td:first-child { color:var(--mute); width:200px }
.toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap } .toolbar .spacer { flex:1 }
.events { font-size:13px } .events td { padding:5px 8px }
code { background:var(--stone); padding:1px 5px; border-radius:4px; font-size:13px }
table.plan input { width:100%; box-sizing:border-box } table.plan td, table.plan th { padding:4px 6px }
/* stat tiles */
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:12px; margin-bottom:16px }
.tile { background:var(--card); border:1px solid var(--line); border-left:5px solid var(--river); border-radius:var(--radius); padding:12px 14px }
.tile b { display:block; font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; font-family:var(--font-display) } .tile span { font-size:12px; color:var(--mute) }
.tile.red { border-left-color:var(--red) } .tile.amber { border-left-color:var(--amber) } .tile.green { border-left-color:var(--green) } .tile.grey { border-left-color:var(--s-tentative) }
.empty { padding:28px; text-align:center; color:var(--mute) } .empty .btn { margin-top:10px }
.chip { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:2px 10px; font-size:12px; color:var(--mute); margin-right:4px; background:var(--card) } .chip.on { background:var(--sky); color:var(--river-deep); border-color:var(--sky) }
/* status swatches for legends */
.sw { display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:-2px; margin-right:5px }
.sw.quoted { border:2px dashed var(--s-quoted) } .sw.tentative { background:var(--s-tentative) } .sw.secured { background:var(--s-secured) } .sw.paid { background:var(--s-paid) } .sw.hold { border:2px dashed var(--s-hold); background:transparent } .sw.oos { background:repeating-linear-gradient(45deg,var(--line),var(--line) 4px,var(--card) 4px,var(--card) 8px) } .sw.lapsed { background:var(--s-lapsed) } .sw.completed { background:var(--s-completed) }
/* public pages */
body.public { display:block; background:#f6f4ee; color:#1f2430 } body.public main { max-width:900px; margin:0 auto; padding:24px 16px }
.public .brandbar { display:flex; align-items:center; gap:12px; padding:6px 0 18px } .public .brandbar img { height:44px }
.public .price { font-size:38px; font-weight:700; font-variant-numeric:tabular-nums; font-family:var(--font-display) } .public .price small { font-size:14px; font-weight:400; color:var(--mute) }
.public .card { border-radius:14px }
@media (prefers-color-scheme: dark) { body.public { background:#15171d; color:#e8eaf1 } }


/* ---------- Donna ---------- */
.tile .k { font-size:12px; color:var(--mute) } .tile .v { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.15; font-family:var(--font-display) } .tile.bad { border-left-color:var(--red) }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px 16px }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px } @media (max-width:900px) { .grid2 { grid-template-columns:1fr } }
.field label { display:block; font-size:12px; font-weight:600; color:var(--mute); margin:0 0 4px } .field { margin-bottom:10px } .small { font-size:12px }
.money { font-variant-numeric:tabular-nums; white-space:nowrap } .money.neg, .num.neg, td.neg { color:var(--red) } .money.big { font-size:24px; font-weight:700; font-family:var(--font-display) }
.tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px } .tabs a { padding:6px 12px; border-radius:8px; color:var(--mute); font-weight:500 } .tabs a.on { background:var(--sky); color:var(--river-deep) } .tabs a:hover { text-decoration:none; background:var(--stone) }
form.inline { display:inline } .inline-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0 } .inline-form input, .inline-form select { width:auto; padding:6px 9px } .inline-form label { font-size:12px; color:var(--mute) }
.btn.xs { padding:1px 7px; font-size:12px; line-height:1.4 }
.todo { margin:0; padding-left:18px } .todo li { margin:6px 0 } .todo li.bad { color:var(--red) }
.ok { background:#dff2e8; border:1px solid #b9e0c9; color:#1d6b46; padding:10px 12px; border-radius:8px; margin:10px 0 }
.scroll { overflow-x:auto } .card.tight table td, .card.tight table th { padding:7px 8px }
table tr.total td { font-weight:700; border-top:2px solid var(--line-strong); font-size:15px }
.pill.new, .pill.drafted, .pill.unknown { background:var(--stone); color:var(--mute) } .pill.coded, .pill.approved, .pill.ready { background:#fbf0cf; color:#7a5300 } .pill.posted, .pill.business, .pill.received { background:#dff2e8; color:#1d6b46 } .pill.ignored, .pill.cancelled { background:#e9ebf0; color:#4b5468 } .pill.personal { background:#ece4f7; color:#4d2d8a } .pill.transfer { background:#e9ebf0; color:#4b5468 } .pill.error { background:#f8dcd9; color:#8a1f18 }
table.cal tr.in td { background:rgba(46,158,107,.06) } table.cal tr.bill td, table.cal tr.recurring td { }
ol.rules li { margin:4px 0 } details summary { cursor:pointer }
table.tx tr.new td:first-child { border-left:3px solid var(--amber) } table.tx tr.posted td:first-child { border-left:3px solid var(--green) }
pre { background:var(--stone); padding:10px; border-radius:8px; overflow-x:auto }
/* sign out is a POST form (CSRF token) styled like the link it replaced */
.rail .who form.signout { display:inline; margin:0 } .rail .who form.signout button { background:none; border:0; padding:0; font:inherit; color:#c9d3e6; cursor:pointer; display:inline-flex; align-items:center; gap:6px } .rail .who form.signout button:hover { text-decoration:underline }
@media (max-width:1100px) { .rail .who form.signout button { padding:8px; border-radius:8px } .rail .who form.signout button:hover { background:rgba(255,255,255,.07); text-decoration:none } }
@media (max-width:700px) { .rail .who form.signout button { padding:8px 8px } }
/* grouped navigation (2026-11-10): Talk, Money, Plan, Setup */
.rail nav { overflow-y:auto; scrollbar-width:none } .rail nav::-webkit-scrollbar { display:none }
.rail nav a { padding:7px 12px }
.rail nav .navsec { display:block; padding:12px 12px 3px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#7f8db0 }
.rail nav .navsec:first-child { padding-top:2px }
@media (max-width:1100px) { .rail nav .navsec { font-size:0; padding:0; margin:6px 10px; border-top:1px solid rgba(255,255,255,.12); height:0 } .rail nav .navsec:first-child { display:none } .rail nav a { padding:9px } }
@media (max-width:700px) { .rail nav .navsec { display:none } .rail nav a { padding:8px 9px } }
/* home: the worst item, the ranked list, the cash strip (2026-11-10) */
.banner-worst { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; background:#f8dcd9; border:1px solid #e3a8a3; border-left:6px solid var(--red); color:#7a1b15; padding:14px 16px; border-radius:var(--radius); margin:0 0 16px; text-decoration:none }
.banner-worst:hover { text-decoration:none; filter:brightness(.98) } .banner-worst b { font-size:18px; font-family:var(--font-display) } .banner-worst span { font-size:13px }
.banner-worst .lbl { text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:700; background:var(--red); color:#fff; padding:2px 8px; border-radius:999px }
.banner-worst.sev-warn { background:#fbf0cf; border-color:#efd27a; border-left-color:var(--amber); color:#6b4b00 } .banner-worst.sev-warn .lbl { background:var(--amber) }
.banner-worst.sev-info { background:var(--sky); border-color:var(--line-strong); border-left-color:var(--river); color:var(--ink) } .banner-worst.sev-info .lbl { background:var(--river) }
.todo-ranked { list-style:none; margin:0; padding:0 } .todo-ranked li { display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--line) } .todo-ranked li:first-child { border-top:0 }
.todo-ranked .rank { flex:0 0 26px; height:26px; border-radius:50%; background:var(--stone); color:var(--mute); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center }
.todo-ranked a { display:flex; flex-direction:column; color:var(--ink) } .todo-ranked a:hover b { text-decoration:underline }
.todo-ranked .sev-bad .rank { background:var(--red); color:#fff } .todo-ranked .sev-warn .rank { background:#fbf0cf; color:#7a5300 }
.cash-strip { width:100% } .cash-strip td, .cash-strip th { padding:7px 8px; vertical-align:top } .cash-strip tfoot td { border-top:2px solid var(--line-strong) } .cash-strip .muted.small { font-size:11px }
/* bills: aging cards, flags, rank chip */
.aging-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:10px; margin:0 0 14px }
.aging { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-top:4px solid var(--s-paid); border-radius:var(--radius); padding:10px 12px; color:var(--ink) }
.aging:hover { text-decoration:none; border-color:var(--line-strong) } .aging.on { outline:2px solid var(--river) }
.aging .k { font-size:12px; color:var(--mute) } .aging .v { font-size:24px; font-weight:700; font-family:var(--font-display); line-height:1.2 } .aging .t { font-size:13px }
.aging.a-1-30 { border-top-color:var(--amber) } .aging.a-31-60 { border-top-color:#e8833a } .aging.a-61-90 { border-top-color:var(--red) } .aging.a-90p { border-top-color:#7a1b15 }
.aging.clear { justify-content:center; align-items:center; border-top-color:var(--line); color:var(--river) }
.flag-tag { display:inline-block; font-size:11px; font-weight:600; padding:1px 7px; border-radius:999px; background:#f8dcd9; color:#8a1f18; margin-top:3px }
tr.flagged td { background:rgba(201,70,61,.05) }
.pill.on_hold { background:#e9ebf0; color:#4b5468; border:1px dashed var(--s-hold) }
.override textarea, .hold input { width:100% } .prio input { width:70px } .bank-details { margin:8px 0 }
/* receipts and library */
.receipt-img { max-width:100%; max-height:520px; display:block; margin:0 auto 10px; border-radius:8px; border:1px solid var(--line) }
.receipt-upload input[type=file] { width:100% }
.library-search { display:flex; flex-wrap:wrap; align-items:center; gap:8px } .library-search input[type=search] { flex:1 1 260px; min-width:200px; width:auto } .library-search select { width:auto; max-width:200px } .library-search input[type=date] { width:auto } .library td { vertical-align:top }
.tag-chip { display:inline-block; font-size:11px; padding:1px 7px; margin:1px 2px 1px 0; border-radius:999px; background:var(--stone); color:var(--mute); border:1px solid var(--line) }
.tag-chip.flag { background:#fbf0cf; color:#7a5300; border-color:#efd27a }
td.rc { white-space:nowrap }

/* cards */
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px } @media (max-width:700px) { .grid3 { grid-template-columns:1fr } }
.warn-text { color:var(--red); font-size:12.5px } .table-wrap { overflow-x:auto }