/* Little Berry Payments — design system */
:root{
  --paper:#F4F6F8;--surface:#FFF;--surface-2:#FAFBFC;--surface-3:#F1F4F7;
  --ink:#14161A;--ink-2:#4E5561;--ink-3:#8A919E;
  --rule:#E3E7EC;--rule-2:#EFF2F5;
  --indigo:#2F3C96;--indigo-ink:#FFF;--indigo-wash:#EBEDF9;
  --ok:#1B6B44;--ok-wash:#E6F2EB;--warn:#8A6612;--warn-wash:#FBF3E0;
  --alarm:#A32118;--alarm-wash:#FBEBEA;
  --display:"Superclarendon","Bookman Old Style","Rockwell",Georgia,serif;
  --ui:system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:7px;--side:254px;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0D0F12;--surface:#15181D;--surface-2:#1A1E24;--surface-3:#1E232A;
  --ink:#E7EAEE;--ink-2:#A2AAB6;--ink-3:#6E7783;--rule:#262B33;--rule-2:#1F242B;
  --indigo:#97A2F0;--indigo-ink:#0D0F12;--indigo-wash:#1D2233;
  --ok:#5FC08D;--ok-wash:#14251C;--warn:#D8AE4A;--warn-wash:#241D0F;
  --alarm:#F08A80;--alarm-wash:#2A1614;}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--indigo)}
.mark{width:28px;height:28px;flex:none;border-radius:7px;background:var(--indigo);color:var(--indigo-ink);font-family:var(--display);font-size:16px;font-weight:700;display:grid;place-items:center;letter-spacing:-.02em}

/* login */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.authcard{width:100%;max-width:392px}
.authbrand{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.authbrand .b1{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em}
.authbrand .b2{font-size:11.5px;color:var(--ink-3)}
.authbox{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:26px}
.authbox h1{font-family:var(--display);font-size:23px;font-weight:600;margin:0 0 4px;letter-spacing:-.015em}
.authbox .lede{color:var(--ink-3);font-size:12.5px;margin:0 0 20px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:5px;font-weight:600}
.fld input{width:100%;font-family:var(--ui);font-size:14px;background:var(--surface-2);color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:10px 12px}
.fld input:focus{outline:2px solid var(--indigo);outline-offset:-1px}
.checkrow{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-bottom:18px}
.checkrow input{accent-color:var(--indigo);width:15px;height:15px}
.alert{background:var(--alarm-wash);color:var(--alarm);border-radius:6px;padding:10px 12px;font-size:12.5px;margin-bottom:16px}
.authfoot{text-align:center;color:var(--ink-3);font-size:11.5px;margin-top:18px}

/* buttons */
.btn{appearance:none;font-family:var(--ui);font-size:13px;font-weight:600;border-radius:6px;padding:8px 13px;cursor:pointer;border:1px solid var(--rule);background:var(--surface);color:var(--ink)}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--indigo);border-color:var(--indigo);color:var(--indigo-ink)}
.btn.primary:hover{opacity:.9}
.btn:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.btn.wide{width:100%;padding:11px}

/* shell */
.shell{display:flex;align-items:flex-start}
.side{width:var(--side);flex:none;position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--rule);display:flex;flex-direction:column;overflow:hidden;transition:width .15s}
.side.mini{width:58px}
.brandbox{padding:18px 16px 14px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:10px}
.brandtxt .b1{font-family:var(--display);font-size:15px;font-weight:600;white-space:nowrap}
.brandtxt .b2{font-size:11px;color:var(--ink-3);white-space:nowrap}
.side.mini .brandtxt,.side.mini .navlbl,.side.mini .who-txt,.side.mini .collapse-lbl{display:none}
.navlist{padding:10px 8px;display:grid;gap:1px;align-content:start;flex:1;overflow-y:auto}
.navlist a{text-decoration:none;display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:6px;font-size:13.5px;color:var(--ink-2)}
.navlist a:hover{background:var(--surface-2);color:var(--ink)}
.navlist a[aria-current="page"]{background:var(--indigo-wash);color:var(--ink);font-weight:650}
.glyph{width:18px;height:18px;flex:none;opacity:.75;display:grid;place-items:center}
.glyph svg{width:16px;height:16px;display:block}
.navlist a[aria-current="page"] .glyph{opacity:1;color:var(--indigo)}
.navlbl{flex:1;white-space:nowrap}
.sidefoot{border-top:1px solid var(--rule);padding:11px 10px;display:grid;gap:9px}
.whorow{display:flex;align-items:center;gap:9px}
.av{width:26px;height:26px;flex:none;border-radius:50%;background:var(--surface-3);color:var(--ink-2);display:grid;place-items:center;font-size:11px;font-weight:700}
.who-txt{min-width:0;font-size:12.5px}
.who-txt b{display:block;font-weight:650;white-space:nowrap}
.who-txt span{color:var(--ink-3);font-size:11px}
.collapse{appearance:none;background:none;border:1px solid var(--rule);border-radius:6px;padding:6px;cursor:pointer;color:var(--ink-3);font-family:var(--ui);font-size:12px;display:flex;align-items:center;gap:8px;justify-content:center}
.collapse svg{width:13px;height:13px}
.main{flex:1;min-width:0;padding:0 26px 80px}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:22px}
h1.page{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.02em;margin:0 0 3px}
.topbar .sub{color:var(--ink-3);font-size:12.5px;margin:0}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:18px}
.card h3{font-family:var(--display);font-size:16px;margin:0 0 4px;font-weight:600}
.card h3+p{margin:0 0 13px;color:var(--ink-3);font-size:12.5px}
.stagelist{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.stagelist li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--rule-2)}
.stagelist li:last-child{border-bottom:0}
.tick{width:17px;height:17px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;margin-top:1px}
.tick.done{background:var(--ok-wash);color:var(--ok)}
.tick.todo{background:var(--surface-3);color:var(--ink-3)}
.stagelist small{display:block;color:var(--ink-3);font-size:12px}
@media (max-width:640px){h1.page{font-size:24px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- toolbar ---- */
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.search{position:relative;flex:1;min-width:190px;max-width:320px}
.search input{width:100%;font-family:var(--ui);font-size:13px;padding:8px 11px 8px 31px;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:6px}
.search input:focus{outline:2px solid var(--indigo);outline-offset:-1px}
.search .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:12px}
.chip{display:inline-block;text-decoration:none;background:var(--surface);border:1px solid var(--rule);border-radius:100px;padding:6px 13px;font-size:12.5px;color:var(--ink-2);cursor:pointer;font-family:var(--ui)}
.chip[aria-current="true"]{background:var(--indigo-wash);border-color:var(--indigo);color:var(--ink);font-weight:600}
.spacer{flex:1}

/* ---- progress ---- */
.progbar{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:15px 17px;margin-bottom:14px}
.progbar .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.progbar .big{font-family:var(--display);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.progbar .track{height:7px;background:var(--rule-2);border-radius:4px;overflow:hidden}
.progbar .fill{height:100%;background:var(--ok);border-radius:4px}

/* ---- table ---- */
.tablecard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
/* The table scrolls inside its own card so the column headings can stay put.
   Sticky works against the nearest scrolling ancestor, and .scroller already
   is one for the horizontal axis, so the vertical scroll has to live here
   rather than on the page. */
.scroller{overflow:auto;max-height:calc(100vh - 300px);min-height:340px;overscroll-behavior:contain}
.scroller thead th{position:sticky;top:0;z-index:3}
@media (max-width:860px){.scroller{max-height:calc(100vh - 240px)}}
table{border-collapse:collapse;width:100%}
thead th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding:10px 13px;background:var(--surface-2);border-bottom:1px solid var(--rule);white-space:nowrap}
tbody td{padding:11px 13px;border-bottom:1px solid var(--rule-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.money{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.01em}
.party{font-weight:600}
.party small{display:block;font-weight:400;color:var(--ink-3);font-size:11.5px;margin-top:1px}
.empty{padding:38px;text-align:center;color:var(--ink-3);font-size:13px}

.cellin{width:100%;min-width:112px;font-family:var(--ui);font-size:13px;background:var(--surface-2);color:var(--ink);border:1px solid var(--rule);border-radius:5px;padding:6px 9px}
.cellin:focus{outline:2px solid var(--indigo);outline-offset:-1px}
.cellin.bad{border-color:var(--alarm);background:var(--alarm-wash)}
tr[data-state="saved"]{background:var(--ok-wash)}
tr[data-state="saving"]{opacity:.55}

.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 7px;border-radius:4px;white-space:nowrap}
.tag.warn{background:var(--warn-wash);color:var(--warn)}
.tag.alarm{background:var(--alarm-wash);color:var(--alarm)}
.tag.ok{background:var(--ok-wash);color:var(--ok)}
.tag.quiet{background:var(--surface-3);color:var(--ink-3)}
.rawnum{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:12.5px}
.nowa{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);white-space:nowrap;margin-top:5px}
.nowa input{accent-color:var(--indigo);width:14px;height:14px}
.saynote{font-size:12px;color:var(--ink-3);margin-top:4px}
.saynote b{color:var(--ink-2);font-weight:600}
.cnt{font-size:10.5px;font-weight:700;background:var(--alarm);color:#fff;padding:1px 6px;border-radius:9px}
.side.mini .cnt{display:none}

/* ---- classify ---- */
.flash{background:var(--ok-wash);color:var(--ok);border:1px solid var(--ok);border-radius:var(--r);padding:11px 14px;font-size:13px;font-weight:600;margin-bottom:14px}
.notice-card{background:var(--warn-wash);border:1px solid var(--warn);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;font-size:13px}
.notice-card b{color:var(--ink)}
.notice-card p{margin:3px 0 8px;color:var(--ink-2);font-size:12.5px}
.notice-card ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:12.5px}
.notice-card li{margin-bottom:3px}
.bulkbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:11px 14px;margin-bottom:12px;font-size:12.5px;color:var(--ink-3)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--rule);border-radius:7px;padding:2px;gap:2px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg span{display:block;padding:6px 13px;border-radius:5px;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.seg input:checked + span{background:var(--indigo);color:var(--indigo-ink);font-weight:650}
.seg input:focus-visible + span{outline:2px solid var(--indigo);outline-offset:2px}
.btn.sm{padding:5px 10px;font-size:11.5px}

/* ---- recovery list ---- */
a.plain{color:inherit;text-decoration:none}
a.plain:hover{text-decoration:underline}
a.sortlink{color:inherit;text-decoration:none;white-space:nowrap}
a.sortlink:hover{color:var(--ink)}
a.sortlink span{font-size:9px;margin-left:3px}
.age{font-variant-numeric:tabular-nums;font-weight:700;font-size:13px}
.age[data-b="0"]{color:var(--age-0)}
.age[data-b="30"]{color:var(--age-30)}
.age[data-b="60"]{color:var(--age-60)}
.age[data-b="90"]{color:var(--age-90)}
.age[data-b="xx"]{color:var(--age-xx)}
.record{display:flex;gap:3px;align-items:center}
.record i{width:9px;height:13px;border-radius:1.5px;display:block;border:1.5px solid var(--ink-3)}
.record i[data-p="kept"]{background:var(--ok);border-color:var(--ok)}
.record i[data-p="partial"]{background:linear-gradient(to top,var(--ok) 50%,transparent 50%);border-color:var(--ok)}
.record i[data-p="broken"]{background:transparent;border-color:var(--alarm);position:relative;overflow:hidden}
.record i[data-p="broken"]::after{content:"";position:absolute;inset:-2px;background:linear-gradient(to bottom right,transparent 44%,var(--alarm) 44%,var(--alarm) 56%,transparent 56%)}
.record i[data-p="open"]{border-style:dotted}
.score{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-left:6px}
.tag.locked{background:var(--indigo-wash);color:var(--indigo);margin-left:4px}

/* ---- party record ---- */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:17px}
.card h3{font-family:var(--display);font-size:16px;margin:0 0 12px;font-weight:600}
.kv{display:grid;grid-template-columns:132px 1fr;gap:5px 12px;font-size:13px;margin:0}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;font-variant-numeric:tabular-nums}
.fld{margin-bottom:11px}
.fld label{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:4px;font-weight:600}
.fld select,.fld input,.fld textarea{width:100%;font-family:var(--ui);font-size:13px;background:var(--surface-2);color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:8px 10px}
.fld textarea{resize:vertical;min-height:60px}
.fld select:focus,.fld input:focus,.fld textarea:focus{outline:2px solid var(--indigo);outline-offset:-1px}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:11.5px;color:var(--ink-3);margin:6px 0 0}
.logrow{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule-2);font-size:13px}
.logrow:last-child{border-bottom:0;padding-bottom:0}
.logrow .when{color:var(--ink-3);font-size:11.5px}
.logrow .note{color:var(--ink-2);margin:3px 0;font-size:12.5px}
.logrow .who2{color:var(--ink-3);font-size:11.5px}
.flagrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule-2)}
.flagrow:last-child{border-bottom:0;padding-bottom:0}
.flagrow b{font-size:13px;font-weight:650}
.flagrow p{margin:2px 0 0;font-size:11.5px;color:var(--ink-3);max-width:42ch}
.flash.bad{background:var(--alarm-wash);color:var(--alarm);border-color:var(--alarm)}

/* ---- distributors ---- */
.monthbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:13px 16px;margin-bottom:14px}
.monthbar b{font-family:var(--display);font-size:16px;font-weight:600}
.monthbar > div:first-child span{display:block;font-size:11.5px;color:var(--ink-3)}
.mtot{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.mtot b{display:block;font-family:var(--ui);font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:650}
.mnav{display:flex;gap:7px}
.inline-set{display:flex;align-items:center;gap:5px;justify-content:flex-end}
.cellin.tiny{width:88px;min-width:0;text-align:right;padding:5px 7px;font-size:12.5px;font-variant-numeric:tabular-nums}
.linkbtn{appearance:none;background:none;border:0;color:var(--indigo);font-family:var(--ui);font-size:11px;cursor:pointer;padding:2px 3px;opacity:0;transition:opacity .12s}
.inline-set:hover .linkbtn,.inline-set:focus-within .linkbtn{opacity:1}
.linkbtn:focus-visible{opacity:1;outline:2px solid var(--indigo);outline-offset:1px}
.prog{display:flex;align-items:center;gap:8px}
.prog .track{flex:1;min-width:52px;height:6px;background:var(--rule-2);border-radius:3px;overflow:hidden}
.prog .fill{height:100%}
.prog .pct{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-3);width:36px;text-align:right}

/* ---- today ---- */
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 12px}
.shead h2{font-family:var(--display);font-size:19px;font-weight:600;margin:0}
.shead p{margin:3px 0 0;color:var(--ink-3);font-size:12.5px;max-width:66ch}
.chase{display:grid;gap:9px}
.crow{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px;display:grid;gap:12px;grid-template-columns:1fr auto;align-items:center}
.crow.blocked{background:var(--surface-2)}
.crow.soft{border-left:2px solid var(--ok)}
.crow .who{font-weight:650;font-size:14.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.crow .meta{color:var(--ink-3);font-size:12.5px;margin-top:3px}
.rowacts{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.draftwrap{grid-column:1/-1;margin:0}
.draftwrap>summary{cursor:pointer;font-size:12.5px;color:var(--ink-3);list-style:none;display:inline-flex;align-items:center;gap:6px;padding:2px 0;user-select:none}
.draftwrap>summary::-webkit-details-marker{display:none}
.draftwrap>summary::before{content:"";width:0;height:0;border-left:4px solid currentColor;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;transition:transform .12s}
.draftwrap[open]>summary::before{transform:rotate(90deg)}
.draftwrap>summary:hover{color:var(--ink-2)}
.draftwrap[open]>summary{margin-bottom:8px}
.draftwrap .draft{grid-column:auto}
.draft{grid-column:1/-1;background:var(--surface-2);border:1px solid var(--rule-2);border-left:2px solid var(--indigo);border-radius:5px;padding:11px 13px;font-size:13.5px;color:var(--ink);line-height:1.55;margin:0}
/* log a call or a message */
.segmented{display:flex;gap:8px;flex-wrap:wrap}
.segmented label{flex:1 1 0;min-width:120px;display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid var(--rule);border-radius:7px;font-size:13px;cursor:pointer;background:var(--surface)}
.segmented label:has(input:checked){border-color:var(--indigo);background:var(--indigo-wash);font-weight:600}
.segmented input{accent-color:var(--indigo);margin:0}
/* open invoices, and correcting a due date Zoho has wrong */
.invrow{border:1px solid var(--rule);border-radius:7px;padding:11px 12px;margin-bottom:9px;background:var(--surface-2)}
.invhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px}
.invmeta{color:var(--ink-3);font-size:12px;margin-top:3px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.invnote{font-size:11.5px;color:var(--ink-2);background:var(--warn-wash);border-radius:5px;padding:7px 9px;margin:8px 0 0;line-height:1.5}
.invform{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.invform input[type=date]{flex:0 0 auto}
.invform input[type=text]{flex:1 1 120px;min-width:0}
.invform input{font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.keystar{color:#D9A400;font-size:13px;line-height:1;margin-right:5px;vertical-align:1px}
.chiplbl{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-right:2px;align-self:center}
.chip.off[aria-current="true"]{background:var(--alarm-wash);border-color:var(--alarm);color:var(--ink)}
.chip.plainchip{border-style:dashed;color:var(--ink-3)}
/* the row you came back from, marked just long enough to find it */
tr[data-returned]>td{background:var(--indigo-wash)}
tr[data-returned]>td:first-child{box-shadow:inset 3px 0 0 var(--indigo)}
.crow[data-returned]{border-color:var(--indigo);box-shadow:0 0 0 2px var(--indigo-wash)}
tr[data-returned]>td,.crow[data-returned]{transition:background .5s,box-shadow .5s,border-color .5s}
@media (prefers-reduced-motion:reduce){tr[data-returned]>td,.crow[data-returned]{transition:none}}
.blockmsg{grid-column:1/-1;font-size:12.5px;color:var(--alarm);margin:0}
.callnote{grid-column:1/-1;font-size:12.5px;color:var(--ink-2);background:var(--warn-wash);border-radius:5px;padding:10px 12px;margin:0}
@media (max-width:640px){.crow{grid-template-columns:1fr}}

/* ================================================================
   FIX: the ageing scale referenced --age-* variables that were
   never defined, so every overdue figure rendered plain white.
   ================================================================ */
:root{--age-0:#6B7280;--age-30:#8A6612;--age-60:#A35A12;--age-90:#A33218;--age-xx:#86140E}
@media (prefers-color-scheme:dark){
  :root{--age-0:#8A919E;--age-30:#D8AE4A;--age-60:#E09755;--age-90:#EE8874;--age-xx:#F5776A}
}
:root[data-theme="light"]{--age-0:#6B7280;--age-30:#8A6612;--age-60:#A35A12;--age-90:#A33218;--age-xx:#86140E}
:root[data-theme="dark"]{--age-0:#8A919E;--age-30:#D8AE4A;--age-60:#E09755;--age-90:#EE8874;--age-xx:#F5776A}

/* links styled as buttons were inheriting the underline */
a.btn,a.chip,a.plain,a.sortlink{text-decoration:none}
a.btn:hover{text-decoration:none}

/* party names were wrapping to three lines and bloating row height */
td.party{min-width:210px}
.tablecard table{min-width:900px}

/* sidebar collapse */
.side.mini{width:58px}
.side.mini .brandtxt,.side.mini .navlbl,.side.mini .who-txt,.side.mini .cnt,.side.mini .collapse-lbl{display:none}
.side.mini .sidefoot form{display:none}
.collapse{appearance:none;background:none;border:1px solid var(--rule);border-radius:6px;padding:6px;cursor:pointer;color:var(--ink-3);font-family:var(--ui);font-size:12px;display:flex;align-items:center;gap:8px;justify-content:center;width:100%}
.collapse:hover{color:var(--ink)}
.collapse svg{width:13px;height:13px;flex:none}

/* ---- analytics ---- */
.subtabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:18px}
.subtabs a{text-decoration:none;border-bottom:2px solid transparent;font-size:13px;color:var(--ink-3);padding:9px 13px;margin-bottom:-1px}
.subtabs a[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--indigo);font-weight:650}
.subtabs a:hover{color:var(--ink)}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px;margin-bottom:14px}
.metric{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px 15px}
.metric .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:700}
.metric .val{font-family:var(--display);font-size:25px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:6px 0 2px;display:block}
.metric .delta{font-size:12px}
.up{color:var(--alarm)}.down{color:var(--ok)}.flat{color:var(--ink-3)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.abar{display:grid;grid-template-columns:104px 1fr 118px;gap:12px;align-items:center;padding:5px 0}
.abar .k{font-size:12.5px;color:var(--ink-2)}
.abar .track{background:var(--rule-2);border-radius:3px;height:20px;overflow:hidden}
.abar .fill{height:100%;border-radius:3px}
.abar .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.emptynote{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:0;background:var(--surface-2);border-radius:6px;padding:11px 13px}
.actday{display:grid;grid-template-columns:78px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule-2)}
.actday:last-child{border-bottom:0}
.actday .t{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.actday .d{font-size:12.5px;color:var(--ink-2)}

/* ---- settings ---- */
.userhead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.userhead h3{font-family:var(--display);font-size:17px;font-weight:600}
.permhead{font-size:11.5px;color:var(--ink-3);font-weight:600;margin:14px 0 8px;text-transform:uppercase;letter-spacing:.07em}
.permgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px}
.perm{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--rule);border-radius:6px;padding:8px 11px;font-size:12.5px;cursor:pointer}
.perm:hover{border-color:var(--indigo)}
.perm input{accent-color:var(--indigo);width:15px;height:15px;flex:none}
.perm span{color:var(--ink-2)}
.perm input:checked ~ span{color:var(--ink);font-weight:600}
.vars{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:7px;font-size:12.5px;color:var(--ink-3)}
.vars code{background:var(--surface-2);border:1px solid var(--rule);border-radius:4px;padding:2px 6px;color:var(--indigo);font-size:12px;margin-right:6px}
.tpl{padding:11px 0;border-bottom:1px solid var(--rule-2)}
.tpl:last-child{border-bottom:0;padding-bottom:0}
.tplhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.tplhead b{font-size:13px;font-weight:650}
.tpl textarea{width:100%;font-family:var(--ui);font-size:13.5px;background:var(--surface-2);color:var(--ink);border:1px solid var(--rule);border-left:2px solid var(--indigo);border-radius:5px;padding:10px 12px;resize:vertical;line-height:1.5}
.tpl textarea:focus{outline:2px solid var(--indigo);outline-offset:-1px}
.steprow{display:flex;align-items:center;gap:9px;margin-bottom:8px;font-size:12.5px;color:var(--ink-2)}
.steprow input{width:74px;font-family:var(--ui);font-size:13px;background:var(--surface-2);color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:6px 9px;text-align:right;font-variant-numeric:tabular-nums}
.steprow input:focus{outline:2px solid var(--indigo);outline-offset:-1px}

/* ================================================================
   FIX: ".fld input" was stretching checkboxes to full width, and
   ".fld label" (0,1,1) was beating ".nowa" (0,1,0) so the flex
   layout never applied. Both are scoped properly here.
   ================================================================ */
.fld input[type="checkbox"],
.fld input[type="radio"]{
  width:15px;height:15px;flex:none;padding:0;
  accent-color:var(--indigo);vertical-align:middle
}
.fld label.nowa,
label.nowa{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:400;color:var(--ink-2);
  white-space:nowrap;margin-bottom:0;cursor:pointer
}
.fld label.nowa{margin-top:6px}

/* ---- appearance toggle ---- */
.themebtn{appearance:none;background:none;border:1px solid var(--rule);border-radius:6px;padding:5px;cursor:pointer;color:var(--ink-3);flex:none;display:grid;place-items:center;width:28px;height:28px}
.themebtn:hover{color:var(--ink);border-color:var(--indigo)}
.themebtn svg{width:14px;height:14px;display:block}
.themebtn:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.side.mini .themebtn{display:none}
.cnt.quiet{background:var(--surface-3);color:var(--ink-2)}

/* ---- key accounts ---- */
.candidates{display:grid;gap:7px;margin-top:12px}
.candidate{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);border:1px solid var(--rule);border-radius:6px;padding:9px 12px}
.candidate b{font-size:13px;font-weight:650;display:block}
.candidate small{color:var(--ink-3);font-size:11.5px}
.subcount{display:inline-block;margin-left:5px;font-size:11px;font-weight:700;background:var(--surface-3);color:var(--ink-2);padding:1px 6px;border-radius:9px;vertical-align:1px}
.subtabs a[aria-selected="true"] .subcount{background:var(--indigo);color:var(--indigo-ink)}

/* ================================================================
   Manual light / dark choice. The prefers-color-scheme query above
   still handles "follow the system"; these win when someone picks
   explicitly, because [data-theme] carries higher specificity.
   ================================================================ */
:root[data-theme="light"]{
  --paper:#F4F6F8;--surface:#FFF;--surface-2:#FAFBFC;--surface-3:#F1F4F7;
  --ink:#14161A;--ink-2:#4E5561;--ink-3:#8A919E;
  --rule:#E3E7EC;--rule-2:#EFF2F5;
  --indigo:#2F3C96;--indigo-ink:#FFF;--indigo-wash:#EBEDF9;
  --ok:#1B6B44;--ok-wash:#E6F2EB;--warn:#8A6612;--warn-wash:#FBF3E0;
  --alarm:#A32118;--alarm-wash:#FBEBEA;
  --age-0:#6B7280;--age-30:#8A6612;--age-60:#A35A12;--age-90:#A33218;--age-xx:#86140E;
}
:root[data-theme="dark"]{
  --paper:#0D0F12;--surface:#15181D;--surface-2:#1A1E24;--surface-3:#1E232A;
  --ink:#E7EAEE;--ink-2:#A2AAB6;--ink-3:#6E7783;--rule:#262B33;--rule-2:#1F242B;
  --indigo:#97A2F0;--indigo-ink:#0D0F12;--indigo-wash:#1D2233;
  --ok:#5FC08D;--ok-wash:#14251C;--warn:#D8AE4A;--warn-wash:#241D0F;
  --alarm:#F08A80;--alarm-wash:#2A1614;
  --age-0:#8A919E;--age-30:#D8AE4A;--age-60:#E09755;--age-90:#EE8874;--age-xx:#F5776A;
}

/* ---- pagination ---- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--ink-3)}
.pager nav{display:flex;gap:4px;flex-wrap:wrap}
.pager a,.pager span{display:inline-block;min-width:32px;min-height:32px;line-height:20px;text-align:center;padding:5px 9px;border:1px solid var(--rule);border-radius:6px;text-decoration:none;color:var(--ink-2);background:var(--surface)}
.pager a:hover{border-color:var(--indigo);color:var(--ink)}
.pager nav [aria-current="page"]{background:var(--indigo);border-color:var(--indigo);color:var(--indigo-ink);font-weight:650}
.pager nav .disabled{opacity:.4}
.pager nav .gap{border:0;background:none;min-width:0;padding:5px 2px}
.pager svg{width:13px;height:13px;vertical-align:-2px}

/* every tappable thing clears the 32px minimum */
.linkbtn{min-height:32px;padding:6px 8px}
.chip{min-height:32px;display:inline-flex;align-items:center}
.themebtn{width:32px;height:32px}

/* ---- parties that vanished from Zoho ---- */
.vanished{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:10px 12px;margin-top:8px}
.vanished .v-who b{font-size:13px;font-weight:650;display:block}
.vanished .v-who small{color:var(--ink-3);font-size:11.5px}
.vanished .v-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ---- letterhead preview ---- */
.lhpreview{display:flex;justify-content:space-between;gap:16px;background:var(--surface-2);border:1px solid var(--rule);border-bottom:2px solid var(--indigo);border-radius:6px;padding:15px 16px}
.lhpreview .lh-name{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.01em}
.lhpreview .lh-kind{font-size:10px;color:var(--ink-3);letter-spacing:1.4px;text-transform:uppercase;margin-top:2px}
.lhpreview .lh-right{text-align:right;font-size:11.5px;color:var(--ink-2);line-height:1.6}
.lhpreview .lh-right b,.lhpreview .lh-right span{display:block}

/* ---- search suggestions ---- */
.ta-wrap{position:relative}
.ta-box{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:var(--surface);border:1px solid var(--rule);border-radius:7px;box-shadow:0 8px 24px rgba(10,12,15,.18);overflow:hidden;max-height:340px;overflow-y:auto}
.ta-box[hidden]{display:none}
.ta-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--rule-2);text-decoration:none;color:inherit}
.ta-item:last-child{border-bottom:0}
.ta-item:hover,.ta-item[data-active="1"]{background:var(--indigo-wash)}
.ta-item .ta-name{font-size:13px;font-weight:650;line-height:1.3}
.ta-item .ta-sub{font-size:11px;color:var(--ink-3);margin-top:1px}
.ta-item .ta-amt{font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.ta-item mark{background:transparent;color:var(--indigo);font-weight:700;padding:0}
.ta-note{padding:10px 12px;font-size:12px;color:var(--ink-3)}
.ta-foot{padding:8px 12px;font-size:11px;color:var(--ink-3);background:var(--surface-2);border-top:1px solid var(--rule-2)}

/* the name and sub-line were sitting inline and colliding with the amount */
.ta-item > span:first-child{display:block;min-width:0;flex:1}
.ta-item .ta-name,.ta-item .ta-sub{display:block}
.ta-box{min-width:320px}
@media (max-width:640px){.ta-box{min-width:0}}

/* ---------- monthly upload (Phase 3) ---------- */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:0 0 14px}
.figures .fig{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:15px 16px}
.figures .fig .k{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0 0 5px}
.figures .fig .v{font-family:var(--display);font-size:24px;font-weight:650;line-height:1.1;margin:0;font-variant-numeric:tabular-nums}
.figures .fig .s{font-size:12px;color:var(--ink-3);margin:4px 0 0}
.problems{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--ink-2);line-height:1.6}
.problems li{margin-bottom:4px}
.notice-card.bad{border-color:var(--alarm);background:var(--alarm-wash)}
.notice-card.warn{border-color:var(--warn);background:var(--warn-wash)}
.fld input[type=file]{font:inherit;font-size:13px;padding:9px 10px;border:1px dashed var(--rule);border-radius:7px;background:var(--surface-2);width:100%;color:var(--ink)}

/* ---------- what a replacement changes ---------- */
.delta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--rule);border-radius:7px;padding:12px 14px;margin:0 0 14px}
.delta .k{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.delta b{font-family:var(--display);font-size:16px;font-weight:650;font-variant-numeric:tabular-nums}
.delta .move{font-family:var(--display);font-size:21px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.delta .move.down{color:var(--alarm)}
.delta .move.up{color:var(--ok)}
h4.chg{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin:16px 0 6px}
.chgtable{width:100%;border-collapse:collapse;font-size:13.5px}
.chgtable td{padding:7px 0;border-bottom:1px solid var(--rule-2);vertical-align:top}
.chgtable tr:last-child td{border-bottom:0}
.chgtable td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.chgtable td.num.alarm{color:var(--alarm)}
.chgtable td.num.ok{color:var(--ok)}
.chgtable .tag{margin-left:6px}

/* ---------- today's queue (Phase 4) ---------- */
.qhead{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:22px 0 8px}
.qlist{display:grid;gap:8px;margin-bottom:18px}
.qrow{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:13px 15px;text-decoration:none;color:inherit}
.qrow:hover{border-color:var(--indigo)}
.qmain{min-width:0}
.qname{font-weight:650;font-size:14.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.qmeta{color:var(--ink-3);font-size:12.5px;margin-top:3px}
.qmoney{text-align:right;white-space:nowrap}
.qmoney b{display:block;font-family:var(--display);font-size:16px;font-weight:650;font-variant-numeric:tabular-nums}
.qmoney span{font-size:11.5px;color:var(--ink-3)}
.reason{font-weight:600}
.reason.r-broken_promise{color:var(--alarm)}
.reason.r-overdue_followup{color:var(--warn)}
.reason.r-promise_today,.reason.r-followup_today,.reason.r-review_today{color:var(--indigo)}
.figures .fig .v.bad{color:var(--alarm)}
.figures .fig .v.warn{color:var(--warn)}
.notice-card.ok{border-color:var(--ok);background:var(--ok-wash)}

/* ---------- the four actions ---------- */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--rule);margin:0 0 16px;padding-bottom:0}
.tab{font:inherit;font-size:13px;font-weight:550;border:0;background:none;color:var(--ink-3);padding:8px 11px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--indigo)}
.tab:hover{color:var(--ink-2)}
.opt{font-weight:400;color:var(--ink-3);font-size:11px}
.overdue{color:var(--alarm)}
.payrow{border-bottom:1px solid var(--rule-2);padding:4px 0}
.payrow:last-child{border-bottom:0}
.payrow>summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;cursor:pointer;padding:7px 0;font-size:13.5px;list-style:none}
.payrow>summary::-webkit-details-marker{display:none}
.payrow>summary span{color:var(--ink-3);font-size:12.5px}
.payrow[open]>summary{margin-bottom:8px}
.payrow form{padding:0 0 10px}