/* DMS v2 prototype: one page structure, four themes as token sets (spec: RB design system).
   A theme is switched with data-rb-theme on <html>; the navigation position with data-rb-nav (rail | top). */

:root {
  --navy:#02142D; --blue:#1363A6; --sand:#E8B87F; --brown:#A66A30; --brown-dark:#875428; --sand-soft:#F3D9A8;
  --bg:#FBF5EC; --surface:#fff; --ink:#02142D; --muted:#5B4A35; --line:#F0E4D2; --tint:#FBF5EC;
  --ok:#13804A; --warn:#B7791F; --bad:#C0262D; --info:#1363A6;
  --okbg:#E3F3EA; --warnbg:#FBF0DF; --badbg:#FBE9E7; --infobg:#E6EFF8;
  --radius:20px; --radius-sm:12px; --bw:1.5px; --bc:var(--line);
  --font:Nunito,system-ui,sans-serif; --font-head:Fredoka,Nunito,sans-serif; --fs:16px;
  --top-bg:#02142D; --top-ink:#fff; --top-h:64px; --nav-on-bg:#E8B87F; --nav-on-ink:#02142D; --nav-ink:#fff;
  --btn-h:40px; --btn-r:999px; --kpi-num:38px;
}
html[data-rb-theme="ledger"] {
  --bg:#FBFAF7; --muted:#4B5565; --line:#E6E4DD; --tint:#F4F1E8; --radius:8px; --radius-sm:6px; --bw:1px;
  --font:"Atkinson Hyperlegible",system-ui,sans-serif; --font-head:var(--font); --fs:15px;
  --top-bg:#fff; --top-ink:#02142D; --top-h:60px; --nav-on-bg:#02142D; --nav-on-ink:#fff; --nav-ink:#02142D; --rail-bg:#FBFAF7; --rail-border:#E6E4DD;
  --btn-h:34px; --btn-r:6px; --kpi-num:30px;
}
html[data-rb-theme="night"] {
  --bg:#061A33; --surface:#0A2242; --ink:#E6EDF3; --muted:#8AA0BC; --line:#1E3A5F; --tint:#0D2A4D; --blue:#4A9BE0; --info:#4A9BE0;
  --okbg:#0E3B2A; --warnbg:#3D2E12; --badbg:#44181B; --infobg:#0D2A4D; --ok:#5BD08F; --warn:#F0C070; --bad:#FF8A8A;
  --radius:12px; --radius-sm:8px; --bw:1px; --font:Manrope,system-ui,sans-serif; --font-head:var(--font); --fs:15px;
  --top-bg:#061A33; --top-ink:#E6EDF3; --top-h:60px; --nav-on-bg:#0D2A4D; --nav-on-ink:#fff; --nav-ink:#C3D0E0; --rail-bg:#040F22; --rail-border:#132F55;
  --btn-h:36px; --btn-r:8px; --kpi-num:30px;
}
html[data-rb-theme="depot"] {
  --bg:#EEF0F2; --muted:#3C4858; --line:#E3E6EA; --tint:#E7EBF0; --radius:4px; --radius-sm:4px; --bw:2px; --bc:#02142D;
  --font:Archivo,system-ui,sans-serif; --font-head:var(--font); --fs:16px;
  --top-bg:#02142D; --top-ink:#fff; --top-h:56px; --nav-on-bg:transparent; --nav-on-ink:#fff; --nav-ink:#C9D3E0;
  --btn-h:48px; --btn-r:4px; --kpi-num:36px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs);line-height:1.45}
a{color:var(--blue)} a:hover{color:var(--ink)}
h1,h2,h3,.num{font-family:var(--font-head);font-weight:600;margin:0}
h1{font-size:1.65rem;line-height:1.15} h2{font-size:1.15rem;margin-bottom:.6rem} h3{font-size:1rem;margin-bottom:.4rem}
html[data-rb-theme="ledger"] h1,html[data-rb-theme="ledger"] h2,html[data-rb-theme="night"] h1,html[data-rb-theme="night"] h2{font-weight:700}
html[data-rb-theme="night"] h1,html[data-rb-theme="night"] h2,html[data-rb-theme="night"] h3{font-weight:800;color:#fff}
html[data-rb-theme="depot"] h1,html[data-rb-theme="depot"] h2{font-stretch:125%;font-weight:800}
.muted{color:var(--muted)} .small{font-size:.86em} .mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,Consolas,monospace} .tab{font-variant-numeric:tabular-nums}
.right{text-align:right} .nowrap{white-space:nowrap} .mt{margin-top:1rem} .mb{margin-bottom:1rem} .flex{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap} .grow{flex:1 1 auto} .spacer{flex:1 1 auto}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:18px;height:var(--top-h);padding:0 22px;background:var(--top-bg);color:var(--top-ink);position:sticky;top:0;z-index:30}
.top .brand img{height:36px;width:auto;display:block}
.top .app{font-weight:700;font-size:1.05rem}
.top .search input{height:36px;border:1px solid rgba(128,128,128,.35);border-radius:var(--btn-r);padding:0 12px;width:290px;font:inherit;font-size:.92rem;background:var(--surface);color:var(--ink)}
html[data-rb-nav="top"] .top .search input{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff} html[data-rb-nav="top"] .top .search input::placeholder{color:rgba(255,255,255,.65)}
.top .env,.rail .env{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--sand);color:var(--navy);font-weight:700;font-size:.74rem;letter-spacing:.02em;white-space:nowrap}
/* the clock at the top right: how old each piece of data is (inc/freshness.php). Chips on wide screens, one sum on
   narrow ones; the panel opens on hover, keyboard focus or a tap (dms2.js) */
.fresh{position:relative;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 10px;border-radius:999px;background:rgba(128,128,128,.16);font-size:.78rem;font-weight:600;white-space:nowrap;cursor:default;outline:none}
.fresh>i{font-size:.95rem;opacity:.85} .fresh .fresh-sum{display:none;font-weight:800}
.fresh-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;background:rgba(128,128,128,.18)} .fresh-chip .k{opacity:.8;font-weight:500} .fresh-chip b{font-weight:800}
.fresh-chip.late{background:var(--sand);color:var(--navy)} .fresh-chip.late .k{opacity:.9} .fresh-chip.bad{background:var(--bad);color:#fff}
.fresh-panel{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:760px;max-width:calc(100vw - 32px);background:var(--surface);color:var(--ink);border:var(--bw) solid var(--bc);border-radius:var(--radius);box-shadow:0 12px 32px rgba(2,20,45,.18);padding:12px 14px;white-space:normal;font-weight:400;text-align:left;cursor:auto}
.fresh:hover .fresh-panel,.fresh:focus-within .fresh-panel,.fresh.open .fresh-panel{display:block}
.fresh-title{font-weight:700;font-size:.95rem;margin-bottom:6px}
.fresh-table{width:100%;border-collapse:collapse;font-size:.86rem} .fresh-table th{text-align:left;font-weight:700;padding:4px 8px;border-bottom:2px solid var(--line);color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em} .fresh-table td{padding:5px 8px;border-top:1px solid var(--line);vertical-align:top} .fresh-table .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fresh-table tr.late td{background:var(--warnbg)} .fresh-table tr.bad td{background:var(--badbg)}
.fresh-foot{color:var(--muted);font-size:.78rem;margin-top:8px}
/* the four labelled chips take about 450 px: in the top-bar themes they share the bar with eight menu items and fit
   only above 2,200 px (Karl's 2560 px screen shows them); with the left rail the bar has room down to 1,300 px. Below
   that the clock shows the oldest age, and the panel lists every source on hover or tap (theme test, 4 Nov 2026). */
@media (max-width:2200px){html[data-rb-nav="top"] .fresh-chip{display:none} html[data-rb-nav="top"] .fresh .fresh-sum{display:inline}}
@media (max-width:1300px){.fresh-chip{display:none} .fresh .fresh-sum{display:inline}}
/* warnings and notices collected while building a page (inc/errors.php), listed above the foot */
.dms-notices{margin:18px 0 0;padding:10px 14px;background:var(--warnbg);border:1px solid var(--sand);border-radius:var(--radius);font-size:.86rem} .dms-notices summary{cursor:pointer;font-weight:700;color:var(--brown-dark)} .dms-notices ul{margin:8px 0 0;padding-left:18px} .dms-notices li{margin:2px 0;word-break:break-word}
.top .who,.rail .who{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none;font-weight:600}
.tabs{display:flex;gap:4px;align-self:stretch;align-items:center}
.tabs a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;color:var(--nav-ink);text-decoration:none;font-weight:600;font-size:.95rem;white-space:nowrap}
.tabs a.on{background:var(--nav-on-bg);color:var(--nav-on-ink)}
html[data-rb-theme="depot"] .tabs a{height:var(--top-h);border-radius:0;border-bottom:4px solid transparent;padding:0 18px}
html[data-rb-theme="depot"] .tabs a.on{border-bottom-color:var(--sand)}
.rail{width:224px;flex:none;background:var(--rail-bg);border-right:1px solid var(--rail-border);display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh}
.rail .brand img{height:40px;width:auto;display:block;margin:4px 8px 20px}
/* both navigations are always in the page (inc/dms2.php): the theme's data-rb-nav picks one, so a theme preview on the
   profile page switches the menu too. The rail's dark logo is for the light Ledger rail, the white one for the others. */
html[data-rb-nav="top"] .rail{display:none}
.rail .brand .logo-on-light{display:none} html[data-rb-theme="ledger"] .rail .brand .logo-on-light{display:block} html[data-rb-theme="ledger"] .rail .brand .logo-on-dark{display:none}
.rail .links{display:flex;flex-direction:column;gap:2px}
.rail .links a{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:var(--radius-sm);color:var(--nav-ink);text-decoration:none;font-weight:600;font-size:.95rem}
.rail .links a.on{background:var(--nav-on-bg);color:var(--nav-on-ink)}
html[data-rb-theme="night"] .rail .links a.on{box-shadow:inset 3px 0 0 var(--sand)}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:12px 6px 0;border-top:1px solid var(--rail-border);color:var(--muted);font-size:.9rem}
.top .out,.rail .out{color:inherit;opacity:.7;font-size:1.15rem;display:inline-flex;align-items:center;text-decoration:none} .top .out:hover,.rail .out:hover{opacity:1;color:inherit}
.env .short{display:none}
/* The bar must fit 1024, 1280 and 1440 px in every theme with every menu item visible (fix brief item 8): shrink, then
   shorten, then icons only. With eight items and the data ages (4 Nov 2026) the labels need about 1,800 px, so below
   1,750 px the menu shows icons, each with its name as a tooltip; the theme test measures this at 1024/1440/1800/2560. */
.top{min-width:0} .tabs{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none}
@media (max-width:1900px){.tabs a{padding:0 12px;font-size:.9rem;gap:6px} html[data-rb-theme="depot"] .tabs a{padding:0 12px} .top .search input{width:230px} .top .who span{display:none}}
@media (max-width:1750px){.tabs a span{display:none} .tabs a{padding:0 12px;font-size:1.1rem}}
@media (max-width:1500px){.env .full{display:none} .env .short{display:inline} .top .search input{width:190px} .top{gap:12px}}
@media (max-width:1300px){.top .search input{width:170px}}
@media (max-width:1100px){.top .search input{width:140px}}
html[data-rb-nav="rail"] .top .brand,html[data-rb-nav="rail"] .top .tabs,html[data-rb-nav="rail"] .top .env,html[data-rb-nav="rail"] .top .who,html[data-rb-nav="rail"] .top .out{display:none}
html[data-rb-nav="top"] .top .app{display:none}
html[data-rb-theme="ledger"] .top{border-bottom:1px solid #D9DCE3}
html[data-rb-theme="night"] .top{border-bottom:1px solid var(--line)}
.page{padding:24px 28px 48px;width:100%;flex:1 1 auto;container-type:inline-size}   /* a size container: wide pages lay out by the room they really have, rail or not */ /* the whole width, no 1440px cap: the review tables need the room (Karl, 3 Nov 2026) */
.foot{border-top:1px solid var(--line);color:var(--muted);font-size:.78rem;padding:.6rem 24px;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;object-fit:cover;flex:none;background:var(--sand);color:#4D2C12;font-family:var(--font-head);font-weight:700;vertical-align:middle}
html[data-rb-theme="depot"] .avatar{border-radius:4px}

/* ---------- cards, kpis ---------- */
.card{background:var(--surface);border:var(--bw) solid var(--bc);border-radius:var(--radius);padding:18px 20px;min-width:0}
.card.pad0{padding:0;overflow:hidden} .card.pad0 h2{padding:14px 18px 0}
html[data-rb-theme="depot"] .card h2{background:var(--navy);color:#fff;margin:-18px -20px 14px;padding:11px 18px;border-bottom:4px solid var(--blue);font-size:1rem}
html[data-rb-theme="depot"] .card.pad0 h2{margin:0;padding:11px 18px}
.grid{display:grid;gap:14px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g32{grid-template-columns:minmax(0,3fr) minmax(0,2fr)} .g23{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:16px}
.kpi{background:var(--surface);border:var(--bw) solid var(--bc);border-radius:var(--radius);padding:14px 18px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .num{font-size:var(--kpi-num);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi span{color:var(--muted);font-size:.86rem} .kpi .lbl{color:var(--muted);font-size:.82rem;font-weight:600;text-transform:none}
.kpi.bad{border-color:var(--bad)} .kpi.sand{border-color:var(--sand)} .kpi.ok{border-color:var(--ok)}
html[data-rb-theme="ledger"] .kpi.bad .num,html[data-rb-theme="night"] .kpi.bad .num{color:var(--bad)}
html[data-rb-theme="depot"] .kpi.bad{background:var(--bad);color:#fff;border-color:var(--bad)} html[data-rb-theme="depot"] .kpi.bad span,html[data-rb-theme="depot"] .kpi.bad .lbl{color:#fff}
html[data-rb-theme="ledger"] .kpi,html[data-rb-theme="night"] .kpi{border-left-width:4px}
html[data-rb-theme="ledger"] .kpi{border-left-color:var(--blue)} html[data-rb-theme="ledger"] .kpi.bad{border-left-color:var(--bad)} html[data-rb-theme="ledger"] .kpi.sand{border-left-color:var(--sand)} html[data-rb-theme="ledger"] .kpi.ok{border-left-color:var(--ok)}
.mark{background:linear-gradient(transparent 35%,var(--sand-soft) 35%,var(--sand-soft) 92%,transparent 92%);padding:0 3px;margin:0 -3px}
html[data-rb-theme="night"] .mark{background:linear-gradient(transparent 35%,#5a4420 35%,#5a4420 92%,transparent 92%)}
.greet{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.greet .count{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 18px;background:var(--sand);color:var(--navy);border-radius:var(--btn-r);font-weight:700}
.greet .count b{font-size:28px;font-family:var(--font-head)}

/* ---------- rows (needs attention) ---------- */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:var(--bw) solid var(--line)}
.row:first-child{border-top:0;padding-top:4px}
.row .who{flex:1 1 auto;min-width:0} .row .who b{font-weight:700} .row .who a{color:inherit;text-decoration:none} .row .who a:hover{color:var(--blue)}
.row .who small{display:block;color:var(--muted);font-size:.86rem}
.row .amt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .row .amt small{display:block;color:var(--muted);font-size:.8rem}
.row .tag{flex:none;width:160px}
html[data-rb-theme="depot"] .row{border-top-width:2px;border-top-color:#E3E6EA}

/* ---------- buttons, pills, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-h);padding:0 18px;border-radius:var(--btn-r);border:var(--bw) solid var(--blue);background:var(--blue);color:#fff;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.q{background:var(--surface);color:var(--blue)} .btn.q:hover{background:var(--tint);color:var(--blue);border-color:var(--blue)}
.btn.go{background:var(--sand);border-color:var(--sand);color:var(--navy)} .btn.go:hover{background:var(--brown);border-color:var(--brown);color:#fff}
.btn.sm{height:32px;padding:0 12px;font-size:.86rem}
html[data-rb-theme="night"] .btn.q{background:transparent}
.pill{display:inline-block;font-size:.78rem;font-weight:700;padding:.15rem .6rem;border-radius:999px;background:var(--line);color:var(--ink);white-space:nowrap;line-height:1.5}
.pill.ok{background:var(--okbg);color:var(--ok)} .pill.warn{background:var(--warnbg);color:var(--brown-dark)} .pill.bad{background:var(--badbg);color:var(--bad)} .pill.info{background:var(--infobg);color:var(--info)}
html[data-rb-theme="night"] .pill.warn{color:var(--warn)}
/* "EFT Client" next to names (Karl, 4 Nov 2026): small, solid red so it reads in every theme and every list */
.pill.eft,html[data-rb-theme] .pill.eft{font-size:.64rem;font-weight:800;padding:.02rem .42rem;vertical-align:middle;background:var(--bad);color:#fff;border-radius:999px;cursor:help}
html[data-rb-theme="depot"] .pill{border-radius:4px;color:#fff;background:#3C4858} html[data-rb-theme="depot"] .pill.ok{background:#1D7A48;color:#fff} html[data-rb-theme="depot"] .pill.warn{background:var(--sand);color:var(--navy)} html[data-rb-theme="depot"] .pill.bad{background:var(--bad);color:#fff} html[data-rb-theme="depot"] .pill.info{background:var(--blue);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px} .chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:.86rem;font-weight:600;cursor:pointer;text-decoration:none}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)} html[data-rb-theme="night"] .chip.on{background:var(--blue);border-color:var(--blue);color:#061A33}
.light{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:6px} .light.green{background:var(--ok)} .light.amber{background:#E8B87F} .light.red{background:var(--bad)} .light.grey{background:var(--line)}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--surface);font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font-weight:700;padding:9px 12px;background:var(--navy);color:#fff;white-space:nowrap;position:sticky;top:0;z-index:2}
html[data-rb-theme="ledger"] .tbl th{background:var(--tint);color:var(--ink);border-bottom:2px solid var(--navy)}
html[data-rb-theme="night"] .tbl th{background:#0D2A4D}
html[data-rb-theme="depot"] .tbl th{border-bottom:4px solid var(--blue)}
.tbl td{padding:8px 12px;border-top:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:hover td{background:var(--tint)}
.tbl .n{text-align:right;white-space:nowrap} .tbl a.name{color:inherit;text-decoration:none;font-weight:700} .tbl a.name:hover{color:var(--blue)}
.tbl .sub{display:block;color:var(--muted);font-size:.8rem;font-weight:400}
.twrap{overflow-x:auto;border:var(--bw) solid var(--bc);border-radius:var(--radius);background:var(--surface)}
.card .twrap{border:0;border-radius:0;margin:0 -20px -18px} .card.pad0 .twrap{margin:0}
.bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden} .bar i{display:block;height:100%;background:var(--blue)} .bar i.sand{background:var(--sand)}
html[data-rb-theme="depot"] .bar,html[data-rb-theme="depot"] .bar i{border-radius:0}
.cascade{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.cascade .step{flex:1 1 150px;background:var(--tint);border-radius:var(--radius-sm);padding:12px 14px;min-width:0}
.cascade .step b{display:block;font-size:1.35rem;font-family:var(--font-head);font-variant-numeric:tabular-nums} .cascade .step span{color:var(--muted);font-size:.84rem} .cascade .step small{display:block;color:var(--muted);font-size:.8rem}
.cascade .step.bad b{color:var(--bad)} .cascade .step.ok b{color:var(--ok)}

/* ---------- client screen ---------- */
.client-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.client-head .meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:.92rem;margin-top:4px}
.client-head .actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.money{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;text-align:center}
.money div{background:var(--tint);border-radius:var(--radius-sm);padding:8px 6px} .money b{display:block;font-variant-numeric:tabular-nums;font-size:1rem} .money span{color:var(--muted);font-size:.74rem}
.money div.hot b{color:var(--bad)}
.thread{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;padding-right:4px}   /* small on purpose: Account Analysis is the main work on this page (Karl, 10 Nov 2026) */
.msg{max-width:92%;padding:6px 10px;border-radius:12px;background:var(--tint);font-size:.84rem;position:relative}
.msg.out{align-self:flex-end;background:var(--infobg)} .msg.in{align-self:flex-start;border:1px solid var(--line)}
html[data-rb-theme="night"] .msg.out{background:#123B6B}
.msg .m{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.76rem;margin-bottom:3px;flex-wrap:wrap}
.msg .b{white-space:pre-wrap;word-wrap:break-word;max-height:84px;overflow:hidden} .msg.open .b{max-height:none}
.msg .b.more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(transparent,var(--tint))}
html[data-rb-theme="depot"] .msg{border-radius:4px}
.tl{list-style:none;margin:0;padding:0 0 0 24px;position:relative}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl li{position:relative;padding:5px 0 5px 12px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.tl li::before{content:"";position:absolute;left:-22px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--blue);border:2px solid var(--surface)}
.tl li.k-ok::before{background:var(--ok)} .tl li.k-bad::before{background:var(--bad)} .tl li.k-warn::before{background:var(--sand)} .tl li.k-grey::before{background:var(--muted)}
.tl .d{flex:none;width:92px;color:var(--muted);font-size:.84rem;font-variant-numeric:tabular-nums} .tl .k{flex:none;width:118px;font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em} .tl .t{flex:1 1 300px;min-width:0}
.tl .t small{color:var(--muted)}
details.more{margin-top:14px} details.more summary{cursor:pointer;font-weight:700;color:var(--blue);padding:6px 0}
.ptp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .ptp div{background:var(--tint);border-radius:var(--radius-sm);padding:10px 12px} .ptp b{display:block;font-size:1.1rem} .ptp span{color:var(--muted);font-size:.78rem}

/* ---------- forms (profile) ---------- */
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.theme-opt{display:block;cursor:pointer;border:var(--bw) solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.theme-opt input{position:absolute;opacity:0} .theme-opt.on{border-color:var(--blue);box-shadow:0 0 0 3px var(--infobg)}
.theme-opt .sw{height:92px;display:flex;flex-direction:column;gap:8px;padding:10px} .theme-opt .sw i{display:block;border-radius:6px} .theme-opt .sw .a{height:18px} .theme-opt .sw .b{height:12px;width:70%} .theme-opt .sw .c{height:12px;width:45%}
.theme-opt .txt{padding:10px 12px} .theme-opt .txt b{display:block} .theme-opt .txt small{color:var(--muted)}
.field{display:flex;flex-direction:column;gap:5px;font-size:.9rem;font-weight:600} .field input,.field select{height:40px;border:var(--bw) solid var(--line);border-radius:var(--radius-sm);padding:0 12px;font:inherit;font-size:.95rem;background:var(--surface);color:var(--ink)}
.note{background:var(--warnbg);color:var(--brown-dark);border-radius:var(--radius-sm);padding:10px 14px;font-size:.9rem} html[data-rb-theme="night"] .note{color:var(--warn)}
.alert{background:var(--badbg);color:var(--bad);border-radius:var(--radius-sm);padding:10px 14px}
.okmsg{background:var(--okbg);color:var(--ok);border-radius:var(--radius-sm);padding:10px 14px}
.howto{color:var(--muted);font-size:.9rem;max-width:100ch}
.popover{position:relative} .popover .pop{display:none;position:absolute;right:0;top:100%;z-index:20;width:340px;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:.88rem} .popover:hover .pop{display:block}

@media (max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3,.g32,.g23{grid-template-columns:1fr} .money{grid-template-columns:repeat(3,minmax(0,1fr))}}
.light-lbl{font-size:.78rem;color:var(--muted);margin-right:8px}
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:.9rem} .pager a,.pager b{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:var(--radius-sm);border:1px solid var(--line);text-decoration:none;color:var(--ink)} .pager b{background:var(--navy);color:#fff;border-color:var(--navy)}
.tbl th a{color:inherit;text-decoration:none} .tbl th a:hover{text-decoration:underline} .tbl th a.on::after{content:" ▾";opacity:.8} .tbl th a.on.asc::after{content:" ▴"}
@media (max-width:760px){.rail{display:none} html[data-rb-nav="rail"] .top .brand,html[data-rb-nav="rail"] .top .who,html[data-rb-nav="rail"] .top .env,html[data-rb-nav="rail"] .top .out{display:inline-flex} .tabs{display:none} .page{padding:16px 16px 40px} .top .search input{width:160px} .g2{grid-template-columns:1fr} .row .tag{width:auto} .row .amt small{display:none}}
@media print{.top,.rail,.foot,.btn{display:none !important} body{background:#fff}}
/* Matt, the AI adviser: the badge (everything Matt shows carries it), the advice card on the client screen, the advice list on matt.php */
.matt-ai{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800;letter-spacing:.02em;padding:.15rem .6rem;border-radius:999px;background:var(--infobg);color:var(--info);white-space:nowrap}
.matt-card{border-left:4px solid var(--info)}
.matt-card .advice{font-size:1.04rem;line-height:1.55;margin:10px 0;max-width:130ch}
.matt-card .meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.86rem;color:var(--muted)}
.matt-card details{margin-top:8px} .matt-card summary{cursor:pointer;font-weight:700;color:var(--blue)} .matt-card details p{max-width:130ch;margin:6px 0}
.advice-list td{vertical-align:top} .advice-list .advice{max-width:90ch;line-height:1.5;margin:0} .advice-list details summary{cursor:pointer;color:var(--blue);font-size:.86rem} .advice-list details p{max-width:90ch;margin:6px 0 0}

/* ---------- Account Analysis (analysis.php) ---------- */
/* Row states. A line is never hidden: excluded lines go light grey, but every badge keeps its full colour so the
   reason for a credit or an exclusion can always be read (Karl, 10 Nov 2026). */
.aa-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:sticky;top:var(--top-h);z-index:20;background:var(--bg);padding:10px 0;border-bottom:var(--bw) solid var(--line);margin-bottom:14px}
.aa-bar select{height:var(--btn-h);border:var(--bw) solid var(--bc);border-radius:var(--btn-r);padding:0 12px;font:inherit;background:var(--surface);color:var(--ink);max-width:420px}
.aa-unsaved{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--warnbg);color:var(--brown-dark);font-weight:700;font-size:.82rem} html[data-rb-theme="night"] .aa-unsaved{color:var(--warn)}
.aa-sw{position:relative;display:inline-block;width:38px;height:22px;flex:none;vertical-align:middle}
.aa-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.aa-sw span{position:absolute;inset:0;border-radius:999px;background:var(--line);border:1px solid rgba(128,128,128,.45);transition:background .12s}
.aa-sw span::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .12s}
.aa-sw input:checked+span{background:var(--ok);border-color:var(--ok)} .aa-sw input:checked+span::after{transform:translateX(16px)}
.aa-sw input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.aa-swlab{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;cursor:pointer}
/* reads like a statement: the description takes the spare width, so Debit and Credit sit side by side at the right,
   with the switch after them (Karl, 10 Nov 2026) */
.aa th:nth-child(3){width:100%} .aa td:nth-child(1),.aa td:nth-child(2),.aa td:nth-child(4){white-space:nowrap}
.aa th.n,.aa td.amt{width:1%;min-width:104px;padding-left:6px;padding-right:10px}
.aa th.sw,.aa td.sw{width:1%;text-align:center;padding-left:14px;padding-right:14px;border-left:1px solid var(--line)} .aa td.rn{text-align:center;white-space:nowrap;font-weight:700}
.aa .desc{display:inline;margin-left:10px;color:var(--muted);font-size:.8rem}   /* on the row's own line: one line per transaction */
.aa tr.off td{color:#A9A294} html[data-rb-theme="night"] .aa tr.off td{color:#5F7592}
.aa tr.off .desc{color:inherit} .aa tr.off td.amt{text-decoration:line-through;text-decoration-thickness:1px}
.aa tr.off .aa-b,.aa tr.off .aa-flag,.aa tr.off .aa-ov{opacity:1}
/* futures: tinted and dashed while off, a solid tint and a bold edge once switched on, so "on" is seen at a glance */
.aa tr.fut td{background:var(--infobg);border-top:1px dashed var(--info)}
.aa tr.fut.off td{background:transparent;color:#A9A294} html[data-rb-theme="night"] .aa tr.fut.off td{color:#5F7592}
.aa tr.fut:not(.off) td:first-child{box-shadow:inset 5px 0 0 var(--info)} .aa tr.fut:not(.off) td{font-weight:600}
.aa tbody tr.fut:hover td{background:var(--infobg)}
.aa tr.gone td{background:var(--badbg)}
/* badges: solid enough to read on a grey row in all four themes */
.aa-b{display:inline-block;font-size:.72rem;font-weight:800;padding:.08rem .5rem;border-radius:999px;white-space:nowrap;line-height:1.5;vertical-align:middle;margin-left:4px;border:1px solid transparent}
.aa-b.r-extend{background:var(--info);color:#fff} html[data-rb-theme="night"] .aa-b.r-extend{color:#061A33}
.aa-b.r-billing{background:var(--brown);color:#fff}
.aa-b.r-referral{background:var(--ok);color:#fff} html[data-rb-theme="night"] .aa-b.r-referral{color:#061A33}
.aa-b.r-cancel{background:var(--bad);color:#fff} html[data-rb-theme="night"] .aa-b.r-cancel{color:#061A33}
.aa-b.r-restructure{background:var(--navy);color:#fff} html[data-rb-theme="night"] .aa-b.r-restructure{background:#fff;color:#061A33}
.aa-b.r-waived,.aa-b.r-delivery,.aa-b.r-reversed{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.aa-b.r-other{background:var(--surface);color:var(--bad);border:1px dashed var(--bad)}
.aa-b.credited{background:var(--warnbg);color:var(--brown-dark);border-color:var(--brown)} html[data-rb-theme="night"] .aa-b.credited{color:var(--warn);border-color:var(--warn)}
.aa-b.dfee{background:var(--sand);color:var(--navy)}
.aa-b.fee{background:var(--line);color:var(--ink);border-color:rgba(128,128,128,.5)}
.aa-b.future{background:var(--surface);color:var(--info);border:1px dashed var(--info)} .aa tr.fut:not(.off) .aa-b.future{background:var(--info);color:#fff;border-style:solid} html[data-rb-theme="night"] .aa tr.fut:not(.off) .aa-b.future{color:#061A33}
.aa-b.new{background:#6B3FA0;color:#fff} html[data-rb-theme="night"] .aa-b.new{background:#C9A6F5;color:#061A33}
.aa-b.match{background:var(--surface);color:var(--muted);border-color:var(--muted);font-weight:700}
.aa-flag{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;color:var(--bad);margin-left:6px;white-space:nowrap} .aa-flag::before{content:"\26A0"}
.aa-ov{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sand);border:1.5px solid var(--brown);margin-left:6px;vertical-align:middle}
.aa-ovnote{color:var(--brown-dark);font-size:.76rem;font-weight:700;margin-left:4px;white-space:nowrap} html[data-rb-theme="night"] .aa-ovnote{color:var(--warn)}
.aa-sum{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .aa-sum td{padding:7px 12px;border-top:1px solid var(--line)} .aa-sum td.n{text-align:right;white-space:nowrap}
.aa-sum tr.total td{font-weight:800;border-top:2px solid var(--ink);font-size:1.05rem} .aa-sum tr.info td{color:var(--muted);font-size:.88rem}
.aa-banner{display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:var(--radius);background:var(--navy);color:#fff;margin-bottom:14px;font-weight:600} .aa-banner a{color:var(--sand)}
.aa-prompt{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-radius:var(--radius);background:var(--warnbg);border:var(--bw) solid var(--sand);margin-bottom:14px}
/* the client's Sage category, always shown and labelled: it decides "Restructured: account closed" (Karl, 10 Nov 2026) */
.aa-cat{display:inline-flex;align-items:stretch;border:var(--bw) solid var(--navy);border-radius:var(--radius-sm);overflow:hidden;font-size:.9rem;white-space:nowrap}
.aa-cat span{background:var(--navy);color:#fff;padding:.25rem .65rem;font-weight:600} .aa-cat b{padding:.25rem .75rem;background:var(--surface);color:var(--ink);font-weight:800}
.aa-cat.closed b{background:var(--bad);color:#fff} html[data-rb-theme="night"] .aa-cat{border-color:var(--line)} html[data-rb-theme="night"] .aa-cat span{background:var(--line)}
/* column rules from Agreement to the switch, so the figures read down like a ledger (Karl, 10 Nov 2026) */
.aa td:nth-child(n+4){border-left:1px solid var(--colrule,#D9CDB8)} .aa th:nth-child(n+4){border-left:1px solid rgba(255,255,255,.28)}
html[data-rb-theme="ledger"] .aa{--colrule:#CFCBC0} html[data-rb-theme="night"] .aa{--colrule:#2B4A73} html[data-rb-theme="depot"] .aa{--colrule:#B9C0C9}
.aa td:nth-child(4),.aa td:nth-child(5),.aa th:nth-child(4),.aa th:nth-child(5){padding-left:14px;padding-right:14px}
/* running balance of the lines that are switched on; an excluded line shows none */
.aa td.bal{width:1%;min-width:112px;padding-left:6px;padding-right:10px;font-weight:700}
/* Restructured: the category in red, and an in-page dialog before the closed account opens (Karl, 10 Nov 2026) */
.aa-cat.closed{border-color:var(--bad)} .aa-cat.closed span{background:var(--bad)} .aa-cat.closed b{background:var(--bad);color:#fff} .aa-red{color:var(--bad)}
.aa-modal{display:none;position:fixed;inset:0;z-index:100;background:rgba(2,20,45,.55);align-items:center;justify-content:center;padding:20px} .aa-modal.open{display:flex}
.aa-dialog{background:var(--surface);color:var(--ink);border:var(--bw) solid var(--bad);border-top:8px solid var(--bad);border-radius:var(--radius);padding:22px 24px;max-width:560px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.35)} .aa-dialog p{margin:.5rem 0}
/* dialogs, small row controls and the picker (aa.js) */
.aa-dialog.plain{border-color:var(--bc);border-top:8px solid var(--navy)} .aa-dialog.wide{max-width:820px} .aa-dialog h2{margin-bottom:.4rem}
.aa-dfoot{justify-content:flex-end;margin-top:14px} .aa-input{width:100%;border:var(--bw) solid var(--bc);border-radius:var(--radius-sm);padding:8px 10px;font:inherit;background:var(--surface);color:var(--ink);margin-top:4px}
.aa-mini{height:24px;border:1px solid rgba(128,128,128,.5);border-radius:6px;padding:0 4px;font:inherit;font-size:.78rem;background:var(--surface);color:var(--ink);max-width:190px;vertical-align:middle}
.aa-link{border:0;background:none;padding:0;margin-left:6px;font:inherit;font-size:.8rem;font-weight:700;color:var(--blue);cursor:pointer;text-decoration:underline}
.aa-picklist{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
.aa-pick{display:grid;grid-template-columns:26px 110px 110px 1fr 110px;gap:8px;align-items:center;padding:6px 10px;border-top:1px solid var(--line);font-size:.9rem;cursor:pointer} .aa-pick:first-child{border-top:0} .aa-pick:hover{background:var(--tint)} .aa-pick .n{text-align:right;font-variant-numeric:tabular-nums}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.aa .desc .aa-mini,.aa tr.off .aa-mini{color:var(--ink)}
.aa tr.off td.bal{color:var(--ink);font-weight:700}   /* a delivery fee is switched off but owed: its balance stays readable */
/* suggestions under the search box at the top (suggest.php, dms2.js) */
.top .search{position:relative}
.suggest{display:none;position:absolute;left:0;top:calc(100% + 8px);z-index:45;width:460px;max-width:calc(100vw - 32px);background:var(--surface);color:var(--ink);border:var(--bw) solid var(--bc);border-radius:var(--radius-sm);box-shadow:0 12px 32px rgba(2,20,45,.22);overflow:hidden;text-align:left}
.suggest.open{display:block}
.suggest a{display:flex;align-items:center;gap:12px;padding:8px 12px;color:var(--ink);text-decoration:none;border-top:1px solid var(--line)} .suggest a:first-child{border-top:0}
.suggest a:hover,.suggest a.on{background:var(--tint);color:var(--ink)} .suggest a.on{box-shadow:inset 4px 0 0 var(--blue)}
.suggest .nm{flex:1 1 auto;min-width:0;font-weight:700;font-size:.95rem} .suggest .nm small{display:block;font-weight:400;font-size:.8rem;color:var(--muted)}
.suggest .amt{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.9rem}
.suggest .none{padding:8px 12px;color:var(--muted);font-size:.86rem;border-top:1px solid var(--line)} .suggest .none:first-child{border-top:0}
.aa-embed{scroll-margin-top:calc(var(--top-h) + 12px)}
/* client screen: every block folds to its heading (dmsCollapse in dms2.js) */
.chead{cursor:pointer;user-select:none} .chead:hover{opacity:.85}
h2.chead::after,.chead>h2:first-child::after,.matt-card>.chead>b::after{content:"\25BE";display:inline-block;margin-left:10px;font-size:.9em;opacity:.6;transition:transform .12s}
.collapsed>h2.chead::after,.collapsed>.chead>h2:first-child::after,.matt-card.collapsed>.chead>b::after{transform:rotate(-90deg)}
.collapsed>:not(.chead){display:none!important}
.card.collapsed>h2.chead,.aa-embed.collapsed>.chead{margin-bottom:0} .card.pad0.collapsed>h2{padding-bottom:14px}
html[data-rb-theme="depot"] .card.collapsed>h2{margin-bottom:-18px} html[data-rb-theme="depot"] .card.pad0.collapsed>h2{margin-bottom:0;padding-bottom:11px}
.aa-embed.collapsed{padding:12px 16px;border:var(--bw) solid var(--bc);border-radius:var(--radius);background:var(--surface)}
.card.collapsed{align-self:start}   /* a folded card in a grid row does not stretch to its neighbour's height */
/* client screen, first row: The money | Missed payments | Promise to pay, above Account Analysis */
.top3{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));align-items:start} .top3>.card[hidden]{display:none} .top3:not(:has(>.card:not([hidden]))){display:none}
@container (max-width:1500px){.top3 .money{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* client screen: one line of key figures; a click opens the card behind a figure (dms2.js) */
.keyline{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.kf{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 14px;background:var(--surface);color:var(--ink);border:var(--bw) solid var(--bc);border-radius:var(--radius-sm);font:inherit;cursor:pointer;text-align:left;min-width:0}
.kf:hover{background:var(--tint)} .kf.on{box-shadow:inset 0 -4px 0 var(--blue)}
.kf>span{color:var(--muted);font-size:.74rem;font-weight:600} .kf>b{font-size:1.02rem;font-variant-numeric:tabular-nums;font-weight:700} .kf small{font-weight:400;color:var(--muted);font-size:.8rem} .kf .pill{font-size:.7rem;vertical-align:middle}
.kf.kf-main>b{font-family:var(--font-head);font-size:1.45rem;line-height:1.1} .kf.bad>b{color:var(--bad)}
.kf.aging>b{font-weight:400;font-size:.9rem} .kf.aging>b b{font-weight:700} .kf.aging>b b.hot{color:var(--bad)} .kf.aging i{color:var(--muted);font-style:normal}
/* Account Analysis: the Summary beside the table, in view while it scrolls; above it when the page is narrow */
.aa-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;align-items:start}
.aa-side{position:sticky;top:calc(var(--top-h) + 70px)}
.aa-sum tr.agr td{padding:8px 12px} .aa-sum tr.agr div{color:var(--muted);font-size:.88rem} .aa-sum tr.agr .big{color:var(--ink);font-size:1.15rem;font-family:var(--font-head)}
.aa-side .aa-sum td{padding:6px 8px} .aa-side .aa-sum tr.agr td{padding:6px 8px}
@container (max-width:1500px){.aa-layout{grid-template-columns:1fr} .aa-side{position:static;order:-1}
  .aa-side .aa-sum,.aa-side .aa-sum tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 18px} .aa-side .aa-sum tr{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line)} .aa-side .aa-sum tbody{grid-column:1/-1} .aa-side .aa-sum td{border:0} .aa-side .aa-sum tr.agr{grid-column:1/-1} .aa-side .aa-sum tr.total td{border:0}}
/* Matt's next step: two lines until "more" */
.matt-card.brief .advice{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px}
.matt-card.brief>:not(.chead):not(.advice):not(.matt-more){display:none} .matt-more{margin-left:0}
/* Actuals and Futures: the row that shows all lines, or only a few again */
.aa tr.aa-morerow td{background:var(--tint);padding:7px 12px;text-align:center} .aa tr.aa-morerow .aa-link{margin:0;font-size:.9rem} .aa tbody tr.aa-morerow:hover td{background:var(--tint)}
/* ---------- a little polish (Karl, 10 Nov 2026: "a little bit prettier"); tokens only, so all four themes follow */
/* key figures: one strip with hairlines between the figures */
.keyline{background:var(--surface);border:var(--bw) solid var(--bc);border-radius:var(--radius);padding:6px;gap:0;box-shadow:0 1px 2px rgba(2,20,45,.04)}
.kf{border:0;background:transparent;border-radius:var(--radius-sm);padding:9px 20px;position:relative;flex:0 1 auto}
.kf+.kf::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line)}
.kf>span{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.04em;font-size:.68rem} .kf>span i{font-size:.95rem;color:var(--blue)}
.kf.bad>span i{color:var(--bad)} .kf.on{box-shadow:none;background:var(--tint)} .kf.on::after{content:"";position:absolute;left:18px;right:18px;bottom:2px;height:3px;border-radius:3px;background:var(--blue)}
.kf.kf-main>b{font-size:1.6rem}
/* Account Analysis: title, the bar as a soft panel */
.aa-title{margin:0;font-size:1.3rem;display:inline-flex;align-items:center;gap:8px} .aa-title i{color:var(--blue)}
.aa-bar{background:var(--surface);border:var(--bw) solid var(--bc);border-radius:var(--radius);padding:9px 12px;box-shadow:0 4px 14px rgba(2,20,45,.06)}
/* the tables: quieter header, an icon per kind of line, payments in green, a pill for "show all" */
.aa th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;padding-top:10px;padding-bottom:10px}
.aa td{padding-top:9px;padding-bottom:9px}
.aa-ic{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;margin-right:8px;font-size:.86rem;background:var(--tint);color:var(--muted);vertical-align:middle}
.aa-ic.c-rental,.aa-ic.c-deposit,.aa-ic.c-pto{background:var(--infobg);color:var(--info)} .aa-ic.c-payment{background:var(--okbg);color:var(--ok)}
.aa-ic.c-penalty,.aa-ic.c-reversal{background:var(--badbg);color:var(--bad)} .aa-ic.c-delivery,.aa-ic.c-fee{background:var(--warnbg);color:var(--brown-dark)} html[data-rb-theme="night"] .aa-ic.c-delivery,html[data-rb-theme="night"] .aa-ic.c-fee{color:var(--warn)}
.aa-ic.c-future{background:transparent;border:1px dashed var(--info);color:var(--info)}
.aa tr.off .aa-ic{background:transparent;color:inherit;border:1px solid currentColor;opacity:.6}
.aa tr:not(.off) td.amt.pay{color:var(--ok);font-weight:700}
.aa td.rn{font-weight:600;color:var(--muted)} .aa tr:not(.off) td.rn{color:var(--ink)}
.aa tr.aa-morerow td{background:transparent;padding:8px 12px} .aa tr.aa-morerow .aa-link{display:inline-flex;align-items:center;height:28px;padding:0 16px;border:1px solid var(--blue);border-radius:999px;text-decoration:none;background:var(--surface);margin-right:8px}
.aa tr.aa-morerow .aa-link:hover{background:var(--blue);color:#fff} .aa tbody tr.aa-morerow:hover td{background:transparent}
/* Summary: the figure everything works towards, large; each agreement's progress as a bar */
.aa-hero{display:flex;flex-direction:column;gap:2px;background:var(--navy);color:#fff;border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px}
.aa-hero span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.8;font-weight:600} .aa-hero b{font-family:var(--font-head);font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums} .aa-hero small{opacity:.85;font-size:.82rem}
html[data-rb-theme="night"] .aa-hero{background:var(--tint);border:1px solid var(--line)}
.aa-prog{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:6px 0 2px} .aa-prog i{display:block;height:100%;border-radius:999px;background:var(--blue)} .aa-prog.over i{background:var(--bad)} .aa-prog.done i{background:var(--muted)}
.aa-sum tr:first-child td{border-top:0}
@container (max-width:1500px){.aa-side .card{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:0 18px;align-items:start} .aa-side .card>h2,.aa-side .card>p{grid-column:1/-1} .aa-hero{margin-bottom:0;align-self:start}}
.chip.quiet{border-style:dashed;color:var(--muted)} .chip.quiet.on{color:#fff;border-style:solid}

.aa-b.r-correction{background:var(--okbg);color:var(--ok);border-color:var(--ok)}   /* Price correction: a part-credit that counts */

.aa-ic.c-moved{background:var(--navy);color:#fff}   /* the closing line of a restructured account */

/* ---------- phones (Karl, 10 Nov 2026: "more mobile browser friendly"). Below 760 px: the menu becomes a bar at the
   bottom of the screen, everything is one column, wide tables scroll sideways inside their card, and the Account
   Analysis lines become two-line blocks with a larger switch. Nothing is left out on a phone. */
@media (max-width:760px){
  html,body{overflow-x:hidden}
  .shell{display:block;min-height:0}
  .rail{display:none!important}
  .top{height:auto;min-height:56px;padding:8px 12px;gap:8px}
  html[data-rb-nav="rail"] .top .brand,html[data-rb-nav="rail"] .top .who{display:inline-flex}
  .top .brand img{height:30px} .top .app,.top .env,.top .out,.top .who span,.top .spacer{display:none!important}
  .top .search{flex:1 1 auto;min-width:0} .top .search input{width:100%!important;height:38px}
  .fresh{padding:0 8px;height:34px} .fresh-chip{display:none!important} .fresh .fresh-sum{display:inline!important}
  .fresh-panel,.suggest{position:fixed;left:8px;right:8px;top:60px;width:auto;max-width:none;max-height:70vh;overflow:auto}
  /* the menu: fixed at the bottom, icons with small labels, swipe sideways when there are many */
  .top .tabs,html[data-rb-nav="rail"] .top .tabs{display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:60;height:60px;padding:4px 6px calc(4px + env(safe-area-inset-bottom));gap:2px;background:var(--top-bg);border-top:1px solid rgba(128,128,128,.35);overflow-x:auto;justify-content:flex-start;align-items:center;align-self:auto}
  .tabs a,html[data-rb-theme="depot"] .tabs a{flex:1 0 62px;flex-direction:column;justify-content:center;gap:1px;height:50px;padding:0 6px;border-radius:12px;border-bottom:0;font-size:1.25rem;color:var(--top-ink);opacity:.85}
  .tabs a span{display:block!important;font-size:.58rem;font-weight:600;line-height:1.1;white-space:nowrap;max-width:74px;overflow:hidden;text-overflow:ellipsis}
  .tabs a.on{opacity:1} html[data-rb-theme="depot"] .tabs a.on{background:rgba(255,255,255,.14)} html[data-rb-theme="ledger"] .tabs a{color:var(--nav-ink)} html[data-rb-theme="ledger"] .tabs a.on{color:var(--nav-on-ink)}
  .page{padding:14px 12px 84px}
  .foot{padding:.6rem 12px 76px;font-size:.7rem}
  h1{font-size:1.35rem} h2{font-size:1.05rem}
  /* one column; cards scroll their own wide content */
  .grid,.g2,.g3,.g32,.g23,.top3,.aa-layout{grid-template-columns:minmax(0,1fr)!important}
  .g4,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px} .kpi{padding:10px 12px} .kpi .num{font-size:1.5rem}
  .card{padding:14px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch} .card.pad0{overflow-x:auto}
  html[data-rb-theme="depot"] .card h2{margin:-14px -14px 12px}
  .twrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .card .twrap{margin:0 -14px -14px}
  .tbl{font-size:.84rem} .tbl th,.tbl td{padding:7px 9px} .tbl th{position:static}
  .flex{gap:.5rem} .greet{gap:10px;margin-bottom:12px} .greet .count{height:42px;padding:0 14px}
  .btn{height:40px;padding:0 14px} .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px} .chip{flex:none}
  form.flex[method=post]{margin-left:0!important;width:100%} form.flex[method=post] input[type=search]{flex:1 1 auto;width:auto!important;min-width:0}
  .money{grid-template-columns:repeat(3,minmax(0,1fr))!important} .ptp{grid-template-columns:1fr!important}
  .row .tag{width:auto} .thread{max-height:260px} .msg{max-width:100%}
  /* client screen: key figures two across */
  .keyline{padding:4px} .kf{flex:1 1 46%;padding:8px 10px} .kf+.kf::before{display:none} .kf.aging{flex-basis:100%} .kf.kf-main>b{font-size:1.4rem}
  .aa-cat{font-size:.8rem} .aa-title{font-size:1.15rem}
  /* Account Analysis: the bar stacks; the Summary is a plain list above the lines */
  .aa-bar{position:static;gap:8px;padding:10px} .aa-bar select{flex:1 1 100%;max-width:none} .aa-bar .spacer{display:none} .aa-bar .btn{flex:1 1 auto}
  .aa-side{position:static;order:-1} .aa-side .card{display:block}
  .aa-side .aa-sum,.aa-side .aa-sum tbody{display:block} .aa-side .aa-sum tr{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line)} .aa-side .aa-sum td{border:0;padding:6px 4px}
  .aa-hero{margin-bottom:8px} .aa-hero b{font-size:1.7rem}
  /* each transaction is a two-line block: what it is and its switch, then date, document and the amounts */
  .aa,.aa tbody{display:block;width:100%} .aa thead{display:none}
  .aa tr{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;padding:10px 12px;border-top:1px solid var(--line)}
  .aa td,.aa td:nth-child(n+4),.aa tr.fut td,.aa tr.gone td{display:block;border:0;padding:0;width:auto;min-width:0;background:transparent;text-align:left;white-space:normal}
  .aa tbody tr:hover td,.aa tbody tr.fut:hover td{background:transparent}
  .aa td:nth-child(3){order:1;flex:1 1 60%;font-weight:600} .aa .desc{display:block;margin:2px 0 0 32px;font-weight:400}
  .aa td.sw{order:2;margin-left:auto;padding:0}
  .aa td:nth-child(1),.aa td:nth-child(2),.aa td:nth-child(4),.aa td.rn{font-size:.8rem;color:var(--muted);font-weight:400}
  .aa td:nth-child(1){order:3;margin-left:32px} .aa td:nth-child(2){order:4} .aa td:nth-child(4){order:5} .aa td.rn{order:6;font-weight:700}
  .aa td.amt{order:7;margin-left:auto;font-weight:700;min-width:0;padding:0} .aa td.amt+td.amt{margin-left:0} .aa td.amt:nth-child(7):not(:empty)::before{content:"\2212\00a0"}
  .aa td:empty{display:none}
  .aa td.bal{order:8;flex:0 0 100%;text-align:right;font-size:.78rem;color:var(--muted);font-weight:700;min-width:0;padding:0} .aa td.bal:not(:empty)::before{content:"balance ";font-weight:400}
  .aa tr.off td.bal{color:var(--muted)}
  .aa tr.fut{background:var(--infobg);border-top:1px dashed var(--info)} .aa tr.fut.off{background:transparent} .aa tr.fut:not(.off){box-shadow:inset 5px 0 0 var(--info)} .aa tr.fut:not(.off) td:first-child{box-shadow:none}
  .aa tr.gone{background:var(--badbg)}
  .aa tr.aa-morerow{justify-content:center} .aa tr.aa-morerow td{flex:1 1 100%;text-align:center;margin:0}
  .aa-mini{height:32px;font-size:.86rem;max-width:100%} .aa-link{font-size:.9rem;padding:4px 0}
  .aa-sw{width:48px;height:28px} .aa-sw span::after{width:22px;height:22px} .aa-sw input:checked+span::after{transform:translateX(20px)}
  .aa-flag{white-space:normal;margin-left:0;display:flex}
  .aa-modal{padding:10px;align-items:flex-end} .aa-dialog{padding:16px;max-height:88vh;overflow:auto} .aa-dfoot{flex-wrap:wrap} .aa-dfoot .btn{flex:1 1 auto}
  .aa-pick{grid-template-columns:26px 1fr auto;font-size:.84rem} .aa-pick span:nth-of-type(2){display:none}
  .aa-banner,.aa-prompt{flex-direction:column;align-items:flex-start}
}