:root{--brand-pink:#E82D67;--brand-orange:#FF8B00;--brand-teal:#3EC1C9;--brand-black:#000;--brand-paid:#3EC1C9;--brand-due:#FF8B00;--brand-late:#E82D67}
:root{--ink:#101014;--paper:#FFFFFF;--rule:#E7E8EC;--amber:#8A4B00;--red:#B3134A;--text:#101014;--muted:#5C6169;--alt:#F6F7F9}
*{box-sizing:border-box}body{margin:0;font:16px/1.45 system-ui,"Segoe UI",Roboto,sans-serif;background:var(--paper);color:var(--text);padding-bottom:72px}
a{color:var(--ink)}h1{font-size:1.6rem;margin:.2rem 0 .6rem}h2{font-size:1.05rem;margin:0 0 .5rem}p{margin:.25rem 0}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}.top{background:var(--ink);color:#fff}.bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px}
.brand{color:#fff;text-decoration:none;font-weight:600;display:flex;align-items:center;gap:8px}.brand img{width:28px;height:28px}
.desk{display:none;gap:18px;font-size:.9rem}.desk a{color:#fff;text-decoration:none}.desk .hot{color:#fde68a;font-weight:600}.who{font-size:.85rem;display:flex;gap:12px;align-items:center}.who a{color:#fff}.who .name{display:none}
main{padding:18px 16px}.card{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:18px;margin-bottom:16px}.card.table{padding:0;overflow-x:auto}.card.ink{background:var(--ink);color:#fff}.card.ink a{color:#fff}
.narrow{max-width:380px;margin:40px auto}.grid2,.grid3,.grid4,.grid5{display:grid;gap:16px}.span2,.span3{grid-column:span 1}
@media(min-width:760px){.desk{display:flex}.who .name{display:inline}.mobile{display:none}body{padding-bottom:20px}.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}.grid5{grid-template-columns:repeat(5,1fr)}.span2{grid-column:span 2}.span3{grid-column:span 3}}
.grid3 .card,.grid2 .card,.grid4 .card,.grid5 .card{margin-bottom:0}.grid2,.grid3,.grid4,.grid5{margin-bottom:16px}
.num{font-variant-numeric:tabular-nums lining-nums}.big{font-size:2.2rem;font-weight:600;margin:0}.mid{font-size:1.4rem;font-weight:600;margin:0}.small{font-size:.9rem}.xs{font-size:.78rem}.muted{color:var(--muted)}.lt{color:#a7f3d0;font-size:.85rem;margin:0}.amber{color:var(--amber)}.amber-lt{color:#fde68a}.red{color:var(--red)}.b{font-weight:600}.r{text-align:right}.center{display:block;text-align:center}.nowrap{white-space:nowrap}.pad{padding:14px 16px;margin:0}
table{width:100%;border-collapse:collapse;font-size:.9rem}th{text-align:left;color:var(--muted);font-weight:500;padding:10px 12px}td{padding:10px 12px;border-top:1px solid var(--rule)}tbody tr:nth-child(even){background:var(--alt)}tfoot td{font-weight:600}table.xs td{padding:4px 12px;border:0;background:var(--alt)}
label{display:block;font-size:.9rem;font-weight:500;margin-bottom:10px}input,select,textarea{display:block;width:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--rule);border-radius:8px;font:inherit;background:#fff}input.code{font-size:1.6rem;letter-spacing:.3em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:8px;border:0;font:inherit;font-weight:600;background:var(--ink);color:#fff;cursor:pointer;text-decoration:none}.btn.quiet{background:transparent;color:var(--ink);border:1px solid var(--ink)}.btn.amber{background:var(--amber)}.btn.full{width:100%}.btn.xs{padding:5px 10px;font-size:.8rem}
.tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.tab{padding:5px 12px;border-radius:999px;border:1px solid var(--rule);text-decoration:none;font-size:.9rem;background:#fff;cursor:pointer}.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tab.radio{position:relative}.tab.radio input{position:absolute;opacity:0;width:0;height:0;margin:0}.tab.radio:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.tabs input,.tabs select{width:auto;margin:0;padding:6px 10px}.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.pill{padding:2px 9px;border-radius:999px;font-size:.75rem;font-weight:600;background:#f1f5f9;color:#334155}.pill.paid,.pill.approved{background:#d1fae5;color:#065f46}.pill.unpaid,.pill.requested{background:#fef3c7;color:#92400e}.pill.rejected{background:#fee2e2;color:#991b1b}.pill.off,.pill.waived{background:#e7e5e4;color:#44403c}
.list{list-style:none;margin:0;padding:0}.list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--rule);align-items:center;flex-wrap:wrap}.list li:first-child{border-top:0}.card.list{padding:0 16px}
.list-card{padding:0}.row-link{display:block;padding:14px 16px;border-top:1px solid var(--rule);text-decoration:none;color:inherit}.row-link:first-child{border-top:0}.row-link:hover{background:var(--alt)}.list-card>.pad{border-top:1px solid var(--rule)}.list-card>.pad:first-child{border-top:0}.between{display:flex;justify-content:space-between;gap:12px}
.entry summary{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;cursor:pointer;list-style:none;border-top:1px solid var(--rule)}.entry:first-child summary{border-top:0}.entry summary:hover{background:var(--alt)}
form.inline{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}form.inline input{width:auto;margin:0;padding:5px 8px}form.inline input.w{width:120px}form.inline select{width:auto;margin:0;padding:5px 8px}.rule{border-top:1px solid var(--rule);padding:8px 0}
.flash{padding:12px 16px;border-radius:10px;border:1px solid;margin-bottom:14px}.flash.error{background:#fef2f2;border-color:#fca5a5;color:#7f1d1d}.flash.success{background:#ecfdf5;border-color:#6ee7b7;color:#065f46}.flash.info{background:#fffbeb;border-color:#fcd34d;color:#78350f}
.mobile{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(5,1fr);text-align:center;font-size:.75rem;padding-bottom:env(safe-area-inset-bottom)}.mobile a{padding:12px 0;text-decoration:none;color:var(--text)}.mobile .hot{color:var(--ink);font-weight:600}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media print{.top,.mobile,.noprint{display:none!important}.card{border:0;break-inside:avoid}}

.desk a,.mobile a{display:inline-flex;align-items:center;gap:6px}.mobile a{flex-direction:column;gap:2px}.desk i,.mobile i{width:16px;height:16px}.mobile i{width:20px;height:20px}.who i{width:18px;height:18px;vertical-align:-4px}
.btn i,.tab i{width:14px;height:14px}.flash[data-flash]{display:none}.notyf__toast{border-radius:10px;font-family:inherit}.notyf__message{font-size:.92rem}
h2 i{width:16px;height:16px;vertical-align:-3px;margin-right:4px;color:var(--ink)}p a i{width:14px;height:14px;vertical-align:-2px}

/* ===== v2 UI: dark mode, nav, avatars, sheet, bars, empty states ===== */
@media (prefers-color-scheme: dark){:root{--ink:#ECEEF1;--paper:#15171A;--rule:#2A2E34;--amber:#FFB259;--red:#FF7AA3;--text:#e8ebe8;--muted:#9aa59e;--alt:#161d1a}
 .card,.mobile,.sheet,.tab,input,select,textarea,.pill{background:#1D2024;color:var(--text)}.top{background:#0f1f18}.pill.paid,.pill.approved{background:#123a2c;color:#8fe0b8}.pill.unpaid,.pill.requested{background:#3a2e10;color:#f5cf7a}.pill.rejected{background:#3f1a16;color:#f2a297}.pill.off,.pill.waived{background:#2A2E34;color:#b8c2bb}
 .flash.error{background:#2b1512;border-color:#6b2f27;color:#f2a297}.flash.success{background:#0f2a20;border-color:#1f5c44;color:#8fe0b8}.flash.info{background:#2b2210;border-color:#6b5320;color:#f5cf7a}.card.ink{background:#101014}.heat td.future{background:#1d2622}}
[x-cloak]{display:none!important}.no-scroll{overflow:hidden}.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:99}.skip:focus{left:8px}
.desk a{padding:6px 9px;border-radius:8px;white-space:nowrap}.desk a.on{background:rgba(255,255,255,.14)}.desk{gap:2px;font-size:.85rem;flex-wrap:wrap;justify-content:center}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em;flex:none}.avatar.sm{width:26px;height:26px;font-size:.65rem;background:rgba(255,255,255,.2)}.avatar.lg{width:40px;height:40px;font-size:.95rem;vertical-align:middle;margin-right:6px}
.mlink{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit}.mlink:hover{text-decoration:underline}
.mobile button{background:none;border:0;font:inherit;font-size:.75rem;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 0;cursor:pointer}.mobile a.on,.mobile .on{color:var(--ink);font-weight:600}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-radius:18px 18px 0 0;padding:10px 16px 28px;z-index:41;max-height:80vh;overflow:auto}.grab{width:40px;height:4px;border-radius:2px;background:var(--rule);margin:0 auto 12px}
.sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.sheet-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:12px;text-decoration:none;color:var(--text);font-size:.75rem;text-align:center}.sheet-grid a:hover{background:var(--alt)}.sheet-grid i{width:22px;height:22px;color:var(--ink)}
.subnav{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--rule);padding-bottom:8px}.subnav a{padding:6px 12px;border-radius:999px;text-decoration:none;font-size:.88rem;color:var(--muted)}.subnav a.on{background:var(--ink);color:#fff}
.bar{height:6px;background:var(--alt);border-radius:3px;overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;background:var(--ink);border-radius:3px;transition:width .4s}.bar.w200{width:200px;margin-left:auto}
.empty{padding:32px 20px;text-align:center;color:var(--muted)}.empty i{width:36px;height:36px;color:var(--ink);opacity:.6}.empty p{max-width:380px;margin:8px auto 0;font-size:.9rem}
.paid-text{color:#1f7a55}label.check{display:flex;align-items:center;gap:8px}label.check input{width:auto;margin:0}pre{background:var(--alt);padding:10px;border-radius:8px;overflow:auto}code{background:var(--alt);padding:1px 5px;border-radius:4px;font-size:.85em}
.todo{list-style:none;margin:0;padding:0}.todo li{padding:8px 0;border-top:1px solid var(--rule)}.todo li:first-child{border-top:0}.todo a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:inherit}.todo a:hover{color:var(--ink)}.todo i{width:16px;height:16px;color:var(--muted)}
.card h2 i{color:var(--ink)}.head h1{display:flex;align-items:center;gap:8px}
@media(max-width:759px){.grid5{grid-template-columns:1fr 1fr}.grid5 .span2,.grid5 .span3{grid-column:span 2}}
@media print{.sheet,.sheet-bg,.skip{display:none!important}}

/* ===== phase 1 UX: nav, icons, receipt, desk ===== */
.ic{width:16px;height:16px;flex:none;vertical-align:-3px}.btn .ic,.tab .ic{margin-right:2px}.mobile .ic{width:20px;height:20px}.sheet-grid .ic{width:22px;height:22px;color:var(--ink)}h1 .ic,h2 .ic{color:var(--ink)}
.brand span{display:flex;flex-direction:column;line-height:1.1}.brand small{font-weight:400;font-size:.68rem;opacity:.75}
.desk a.off{opacity:.8}.desk .hot{background:rgba(255,255,255,.18);color:#fde68a}.morem{position:relative}.morem summary{list-style:none;cursor:pointer;padding:6px 9px;border-radius:8px;display:inline-flex;align-items:center;gap:6px}.morem summary::-webkit-details-marker{display:none}
.morem div{position:absolute;right:0;top:110%;background:#fff;color:var(--text);border:1px solid var(--rule);border-radius:10px;padding:6px;min-width:190px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:30}.morem div a{display:flex;gap:8px;padding:8px 10px;color:var(--text);border-radius:6px}.morem div a:hover{background:var(--alt)}
.who .lang{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:700;padding:4px 8px;border:1px solid rgba(255,255,255,.35);border-radius:999px}
.sheet-h{margin:4px 4px 6px;text-transform:uppercase;letter-spacing:.06em}
.receipt{z-index:45}.receipt-text{white-space:pre-wrap;background:var(--alt);padding:12px;border-radius:10px;font-family:inherit;font-size:.95rem;margin:8px 0 12px}
.login .hero{text-align:center;margin-bottom:20px}.login .hero img{width:64px;height:64px;margin-bottom:8px}
/* status card */
.status{border-radius:14px;padding:18px;color:#fff;background:linear-gradient(135deg,var(--ink),#3EC1C9)}.status.warn{background:linear-gradient(135deg,#8a5a12,var(--amber))}.status.late{background:linear-gradient(135deg,#7a2c22,var(--red))}
.status h2{color:#fff;font-size:1.25rem;margin:0 0 4px}.status p{margin:2px 0;opacity:.95}.status a{color:#fff}.status .row{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}.status .row b{display:block;font-size:1.3rem}.status .row span{font-size:.8rem;opacity:.85}
/* collection desk */
.desk-list{display:grid;gap:10px}.desk-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:#fff;flex-wrap:wrap}.desk-row.paid{background:var(--alt);opacity:.85}.desk-row .n{flex:1;min-width:140px}.desk-row .n b{display:block}.desk-row .n span{font-size:.8rem;color:var(--muted)}
.desk-row form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%;padding-top:8px;border-top:1px dashed var(--rule)}.desk-row form input,.desk-row form select{width:auto;margin:0;padding:8px 10px;min-height:44px}.desk-row form input[name=amount]{width:110px}.desk-row form input[name=ref]{width:150px}
.btn.big{min-height:44px;padding:10px 18px}.desk-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
@media(max-width:759px){html{font-size:17px}.xs{font-size:.82rem}.btn.xs{font-size:.85rem;min-height:36px}}
@media (prefers-color-scheme: dark){.desk-row,.morem div{background:#1D2024}.desk-row.paid{background:#111815}}

/* ===== phase 2: confirm sheet, cards-on-phones, checklist, bell, warmth ===== */
.confirm-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;display:flex;align-items:flex-end;justify-content:center}.confirm{background:var(--paper);border-radius:18px 18px 0 0;padding:20px 20px 32px;width:100%;max-width:520px}.confirm h3{margin:0 0 6px}.confirm p{font-size:1.05rem;margin:0 0 14px}
@media(min-width:760px){.confirm-bg{align-items:center}.confirm{border-radius:16px;padding-bottom:20px}}
.bell{position:relative;display:inline-flex;align-items:center}.bell .n{position:absolute;top:-6px;right:-8px;background:var(--amber);color:#fff;border-radius:999px;font-size:.62rem;font-weight:700;padding:1px 5px;line-height:1.3}
.todo li.done a{color:var(--muted);text-decoration:line-through}.todo li.done .ic{color:#1f7a55}.todo li:not(.done) .ic:first-child{color:var(--amber)}.checklist .bar{margin:8px 0 4px}
@media(max-width:600px){
  table.resp thead{display:none}table.resp,table.resp tbody,table.resp tr,table.resp td{display:block;width:100%}table.resp tr{border-top:1px solid var(--rule);padding:8px 12px}table.resp tr:first-child{border-top:0}table.resp tbody tr:nth-child(even){background:transparent}
  table.resp td{display:flex;justify-content:space-between;gap:12px;border:0;padding:4px 0;text-align:right}table.resp td::before{content:attr(data-label);color:var(--muted);font-size:.8rem;text-align:left;flex:none}table.resp td:not([data-label])::before{content:none}table.resp td:empty{display:none}
  table.resp tfoot{display:block;border-top:2px solid var(--rule)}table.resp tfoot tr{display:flex;justify-content:space-between;flex-wrap:wrap}table.resp tfoot td{display:inline;padding:6px 4px}
  .btn,.tab,button{min-height:44px}.btn.xs{min-height:40px}input,select,textarea{min-height:44px}.pill{font-size:.8rem}
}
.login .photo{width:100%;max-height:200px;object-fit:cover;border-radius:14px;margin-bottom:14px}
.pwa-banner{position:fixed;left:12px;right:12px;bottom:76px;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:50;max-width:520px;margin:0 auto}.pwa-banner p{margin:4px 0 8px}.pwa-banner .tabs{justify-content:flex-end}@media(min-width:760px){.pwa-banner{bottom:16px}}
.desk-row.pending,tr.pending{outline:2px dashed var(--amber);outline-offset:-2px}.desk-row.pending::after{content:'pending — will send when online';font-size:.75rem;color:var(--amber);width:100%}

.share{gap:12px}.share b{display:block;font-size:1.15rem}.agenda{padding-left:20px}.agenda li{margin:6px 0}.agenda summary{cursor:pointer}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;white-space:pre-wrap}.avatar.photo{object-fit:cover;padding:0}

.newapp{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,#0B3B2E,#1B6B52);color:#fff;padding:12px 16px;border-radius:12px;margin:14px 0}
.newapp .btn{background:#fff;color:#0B3B2E;padding:8px 16px;min-height:auto}
.newapp a.xs{color:#A7CEBC;text-decoration:underline}

/* --- sign-in / public pages: no app chrome, centred, brand-led --- */
body.bare{background:#fff;color:#101014;padding:0;display:flex;flex-direction:column;min-height:100dvh}
/* Centre the column, but never off the screen. With plain `align-items:center` a column taller
   than the phone overflows equally top and bottom, and the overflowing top cannot be scrolled to.
   `margin:auto` on the child centres it when there is room and behaves like normal flow when
   there is not, so on a small screen the whole thing stays reachable. */
body.bare main{flex:1;display:flex;justify-content:center;padding:24px 18px 40px;max-width:none;width:100%}
body.bare main > *{margin-block:auto}
.auth{width:100%;max-width:400px;text-align:center}
.auth h1{font-size:1.6rem;line-height:1.22;letter-spacing:-.02em;margin:0 0 8px;font-weight:800;color:#101014}
.auth .sub{font-size:1rem;line-height:1.5;color:#5c6169;margin:0 auto 22px;max-width:32ch}
.auth form{text-align:left;background:#fff;border:1.5px solid #E7E8EC;border-radius:18px;padding:18px}
.auth label{display:block;font-size:.9rem;font-weight:600;color:#3c414a;margin-bottom:14px}
.auth input{width:100%;margin-top:6px;height:52px;font-size:1.05rem;padding:0 14px;border:1.5px solid #DDE0E5;border-radius:12px;background:#fff;color:#101014}
.auth input:focus{outline:3px solid rgba(62,193,201,.35);border-color:var(--brand-teal)}
.auth .btn.full{height:54px;font-size:1.05rem;font-weight:800;border-radius:999px;background:var(--brand-pink);color:#fff;border:0;width:100%;letter-spacing:.01em}
.auth .btn.full:hover{filter:brightness(1.05)}
.auth .strip{display:flex;gap:6px;margin:22px auto 0;max-width:200px}
.auth .strip i{flex:1;height:5px;border-radius:99px;display:block}
.auth .points{list-style:none;padding:0;margin:22px 0 0;text-align:left;font-size:.92rem;color:#5c6169}
.auth .points li{display:flex;gap:10px;align-items:flex-start;padding:7px 0}
.auth .points b{color:#101014;font-weight:700}
.auth .points span.d{width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px}
.auth .foot{margin-top:26px;font-size:.82rem;color:#8b9099}
.auth .foot a{color:#5c6169}
.auth details{margin-top:6px}
.auth details summary{font-size:.85rem;color:#8b9099;cursor:pointer}
/* removed: this forced a white page whenever the phone preferred dark, which fought the
   theme the member had chosen. Theming is handled by html[data-tj-theme] now. */
/* header brand must never clip its two lines */
.top .brand span{line-height:1.15;display:flex;flex-direction:column;justify-content:center;min-width:0}
.top .brand span small{display:block;font-size:.7rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .bar{min-height:56px;align-items:center}

/* ================= sign-in: motion ================= */
body.bare{overflow-x:hidden}
.auth-stage{position:relative}
/* coins drifting up behind the card - the "money" motion, kept quiet */
.coins{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
/* the sign-in column sits above the drifting coins; without this a coin can land on top
   of the switch or a line of text and hide it, which is worse on a narrow screen where
   there is less room for them to miss */
body.bare main{position:relative;z-index:1}
.auth{position:relative;z-index:1}
.coins i{position:absolute;bottom:-40px;width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  border:2px solid currentColor;display:block;
  animation:rise var(--d) linear var(--delay) infinite}
.coins i::after{content:"KSh";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:700 8px/1 Figtree,system-ui,sans-serif;letter-spacing:-.02em}
@keyframes rise{
  0%{transform:translateY(0) rotate(0deg) scale(.9);opacity:0}
  8%{opacity:.30}
  85%{opacity:.16}
  100%{transform:translateY(calc(-100dvh - 80px)) rotate(200deg) scale(1);opacity:0}}
.auth{position:relative;z-index:1}
/* the mark, with four small orbiting dots - motion that does not repeat the logo's own ring */
.ring-wrap{position:relative;width:150px;height:150px;margin:0 auto 16px}
.ring-wrap .mark{position:absolute;inset:11%;width:78%;height:78%;object-fit:contain;z-index:2;
  animation:logoIn .8s cubic-bezier(.2,.8,.25,1) both}
@keyframes logoIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
.ring-wrap .orbit{position:absolute;inset:0;z-index:1;animation:turn 26s linear infinite}
.ring-wrap .orbit b{position:absolute;top:0;left:50%;width:7px;height:7px;border-radius:50%;margin-left:-3.5px;
  animation:dotIn .5s cubic-bezier(.2,1.5,.4,1) both}
.ring-wrap .orbit:nth-of-type(1){animation-delay:0s}
.ring-wrap .orbit:nth-of-type(2){transform:rotate(90deg);animation-delay:-6.5s}
.ring-wrap .orbit:nth-of-type(3){transform:rotate(180deg);animation-delay:-13s}
.ring-wrap .orbit:nth-of-type(4){transform:rotate(270deg);animation-delay:-19.5s}
.ring-wrap .orbit:nth-of-type(1) b{background:var(--brand-pink);animation-delay:.5s}
.ring-wrap .orbit:nth-of-type(2) b{background:var(--brand-black);animation-delay:.6s}
.ring-wrap .orbit:nth-of-type(3) b{background:var(--brand-teal);animation-delay:.7s}
.ring-wrap .orbit:nth-of-type(4) b{background:var(--brand-orange);animation-delay:.8s}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes dotIn{from{transform:scale(0)}to{transform:scale(1)}}
.auth .wordmark{display:block;width:196px;max-width:58%;height:auto;margin:0 auto 22px;
  animation:up .5s cubic-bezier(.2,.8,.25,1) .24s both}
/* content settles in after the mark */
.auth h1,.auth .sub,.auth form,.auth .points li,.auth .strip,.auth .foot{animation:up .5s cubic-bezier(.2,.8,.25,1) both}
.auth h1{animation-delay:.30s}.auth .sub{animation-delay:.38s}.auth form{animation-delay:.46s}
.auth .points li:nth-child(1){animation-delay:.60s}.auth .points li:nth-child(2){animation-delay:.68s}.auth .points li:nth-child(3){animation-delay:.76s}
.auth .strip{animation-delay:.84s}.auth .foot{animation-delay:.9s}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* the four-colour strip fills like a collection completing */
.auth .strip i{transform-origin:left;animation:fill .5s cubic-bezier(.3,.9,.3,1) both}
.auth .strip i:nth-child(1){animation-delay:.86s}.auth .strip i:nth-child(2){animation-delay:.94s}
.auth .strip i:nth-child(3){animation-delay:1.02s}.auth .strip i:nth-child(4){animation-delay:1.1s}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* the dots beside each line pulse once as their line arrives */
.auth .points span.d{animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
.auth .points li:nth-child(1) span.d{animation-delay:.66s}
.auth .points li:nth-child(2) span.d{animation-delay:.74s}
.auth .points li:nth-child(3) span.d{animation-delay:.82s}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
/* the action: a single sweep of light, and a real press */
.auth .btn.full{position:relative;overflow:hidden;transition:transform .12s ease, box-shadow .2s ease;
  box-shadow:0 6px 18px rgba(232,45,103,.28)}
.auth .btn.full::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  animation:sweep 3.6s ease-in-out 1.8s infinite}
@keyframes sweep{0%{left:-60%}28%{left:120%}100%{left:120%}}
.auth .btn.full:active{transform:scale(.985);box-shadow:0 3px 10px rgba(232,45,103,.3)}
.auth input{transition:border-color .15s ease, box-shadow .15s ease}
.auth input:focus{box-shadow:0 0 0 4px rgba(62,193,201,.18)}
.auth form{transition:box-shadow .3s ease}
.auth form:focus-within{box-shadow:0 10px 30px rgba(16,16,20,.07)}
@media (prefers-reduced-motion: reduce){
  .coins{display:none}
  .ring-wrap .orbit{display:none}
  .auth h1,.auth .sub,.auth form,.auth .points li,.auth .strip,.auth .foot,.auth .points span.d,
  .ring-wrap .mark,.auth .wordmark,.ring-wrap .orbit,.ring-wrap .orbit b,.auth .strip i{animation:none !important;opacity:1;transform:none}
  .auth .btn.full::after{display:none}
  .ring-wrap circle{stroke-dashoffset:0}
}
.testbar{background:#FFF4E5;border-bottom:2px solid var(--brand-orange);color:#6b3f00;padding:10px 16px;font-size:.85rem;line-height:1.45;text-align:center}
.testbar b{color:#8a4b00}
.testbar code{background:rgba(255,139,0,.18);padding:1px 5px;border-radius:4px;font-size:.95em}
body.bare .testbar{border-radius:0}
.auth .testnote{background:#FFF4E5;border:1.5px solid var(--brand-orange);color:#6b3f00;border-radius:12px;padding:10px 12px;font-size:.82rem;line-height:1.45;margin:0 0 16px;text-align:left}

/* ---- reports ---- */
.rtabs{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;margin:-4px 0 14px;-webkit-overflow-scrolling:touch}
.rtabs a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 13px;border:1.5px solid var(--rule);border-radius:999px;font-size:.85rem;text-decoration:none;color:var(--ink);background:var(--paper)}
.rtabs a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rtabs i{width:15px;height:15px}
.tabs.wrapx{flex-wrap:wrap}
table.yoy .sec td{background:var(--wash,#f6f7f9);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:none;padding-top:10px}
table.yoy tr.b td{font-weight:700}
table.mini{width:100%;border-collapse:collapse;font-size:.88rem}
table.mini th{text-align:left;font-weight:600;color:var(--muted);font-size:.78rem;padding:4px 0;border-bottom:1px solid var(--rule)}
table.mini td{padding:5px 0;border-bottom:1px solid var(--rule)}
.grid4.score>div{background:var(--wash,#f6f7f9);border-radius:14px;padding:11px 13px}
.grid4.score span{display:block;font-size:.76rem;color:var(--muted);font-weight:600}
.grid4.score b{font-size:1.15rem;display:block;margin-top:2px}
.bar{height:6px;background:var(--rule);border-radius:99px;overflow:hidden;margin:3px 0 9px}
.bar i{display:block;height:100%;border-radius:99px;background:var(--ink)}
.big{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin:2px 0 0}
.paid{color:#046F76}.late{color:#B3134A}.due{color:#8A4B00}
table.settle{width:100%;border-collapse:collapse;margin:8px 0 14px}
table.settle td{padding:7px 0;border-bottom:1px solid var(--rule)}
table.settle tr.sub td{border-top:1.5px solid var(--ink);border-bottom:none;font-weight:600}
.statement h3{font-size:.95rem;margin:16px 0 4px}
.sign{margin-top:26px;font-size:.85rem;color:var(--muted);line-height:2.4}
@media print{.no-print,.rtabs,nav.mobile,header.top,.testbar{display:none !important}.card{border:none;box-shadow:none;padding:0}body{padding:0}}
.chartbox{position:relative;width:100%;margin:6px 0 4px}
.sliders label{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin:10px 0 0}
.sliders label b{float:right;color:var(--ink);font-weight:800}
.sliders input[type=range]{width:100%;margin-top:8px;accent-color:var(--brand-teal);height:26px}
.outcome{margin-top:14px}
.outcome>div{background:var(--wash,#f6f7f9);border-radius:14px;padding:12px 14px}
.outcome span{display:block;font-size:.78rem;color:var(--muted);font-weight:600}
.outcome b.num{font-size:1.35rem;display:block;margin-top:3px;letter-spacing:-.02em}
.outcome i{font-style:normal;display:block;margin-top:2px}
@media print{.sliders,.tabs{display:none}}

/* ============================================================================
   Brand alignment (v29). The screens still on this stylesheet inherit the same
   palette, shape and type as the rebuilt ones, so the portal looks like one
   product while the remaining screens are migrated one at a time.
   ========================================================================== */
:root{
  --ink:#101014; --text:#101014; --paper:#FFFFFF; --alt:#F6F7F9;
  --rule:#E7E8EC; --muted:#5C6169;
  --amber:#8A4B00; --red:#B3134A; --green:#046F76;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#ECEEF1; --text:#ECEEF1; --paper:#15171A; --alt:#1D2024;
    --rule:#2A2E34; --muted:#9AA1AB;
    --amber:#FFB259; --red:#FF7AA3; --green:#4EDDE4;
  }
}

/* type: the wordmark's own voice for headings and money, Figtree for reading */
body{font-family:Figtree,ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.45}
h1,h2,h3,.big,.mid,.brand{font-family:Montserrat,var(--tj-display,inherit);letter-spacing:-.02em}
h1{font-weight:800}h2,h3{font-weight:800}
.big,.mid{font-weight:800}
.small{font-size:.88rem}.xs{font-size:.79rem}

/* the header is black, as the mark is */
.top{background:#000;color:#fff}
.top a,.brand,.who a{color:#fff}
.desk a.on{background:rgba(255,255,255,.16)}
.card.ink{background:#000;color:#fff}
.card.ink a{color:#fff}

/* everything is round, and pink is the action */
.card{border-radius:18px;border:1.5px solid var(--rule);background:var(--paper)}
.btn{background:var(--brand-pink);color:#fff;border-radius:999px;min-height:44px;padding:0 20px;font-weight:800;
  font-family:Montserrat,inherit;letter-spacing:.01em}
.btn:hover{filter:brightness(1.06)}
.btn.quiet{background:transparent;color:var(--text);border:1.5px solid var(--rule)}
.btn.quiet:hover{background:var(--alt);filter:none}
.btn.amber{background:var(--brand-orange);color:#fff}
.btn.xs{min-height:38px;padding:0 14px;font-size:.82rem}
.tab{border-radius:999px;border:1.5px solid var(--rule);background:var(--paper);min-height:38px;
  display:inline-flex;align-items:center;font-size:.9rem}
.tab.on,.tab.radio:has(input:checked){background:var(--text);color:var(--paper);border-color:var(--text)}
input,select,textarea{border-radius:12px;border:1.5px solid var(--rule);background:var(--paper);color:var(--text);
  min-height:44px;font-size:17px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-teal);
  box-shadow:0 0 0 4px rgba(62,193,201,.20)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--brand-teal)}

/* status colour means one thing */
.pill{border-radius:999px;font-weight:700;font-size:.76rem;padding:4px 11px;background:var(--alt);color:var(--muted)}
.pill.paid,.pill.approved{background:rgba(62,193,201,.16);color:var(--green)}
.pill.unpaid,.pill.requested{background:rgba(255,139,0,.16);color:var(--amber)}
.pill.rejected{background:rgba(232,45,103,.14);color:var(--red)}
.pill.off,.pill.waived{background:var(--alt);color:var(--muted)}
.amber{color:var(--amber)}.red{color:var(--red)}
.bar i{background:var(--brand-teal)}

.flash{border-radius:14px;border:0;font-size:15px}
.flash.success{background:rgba(62,193,201,.16);color:var(--green)}
.flash.info{background:var(--alt);color:var(--text)}
.flash.error{background:rgba(232,45,103,.12);color:var(--red)}

.mobile{background:var(--paper);border-top:1px solid var(--rule)}
.mobile a,.mobile button{color:var(--muted);font-size:11px}
.mobile .hot,.mobile a.on{color:var(--text);font-weight:700}
tbody tr:nth-child(even){background:transparent}
td{border-top:1px solid var(--rule)}
th{font-weight:600;font-size:.79rem;color:var(--muted)}
.avatar{background:var(--text);color:var(--paper);font-family:Montserrat,inherit;font-weight:800;font-size:12px}
.topbar{background:rgba(255,139,0,.14);color:var(--amber);font-size:14px;line-height:1.4;padding:7px 16px;text-align:center}
.topbar code{background:rgba(255,139,0,.18);padding:1px 5px;border-radius:4px;font-size:.92em}
.topbar b{font-weight:800}
.topadmin{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff!important;text-decoration:none;font-weight:700;font-size:.83rem;white-space:nowrap}
.topadmin:hover{background:rgba(255,255,255,.24)}
.topadmin i{width:15px;height:15px}
@media(max-width:520px){.topadmin span{display:none}}
/* the header grows to fit its navigation instead of clipping the first row */
.top .bar{flex-wrap:wrap;row-gap:6px;min-height:auto;overflow:visible}
.desk{flex-wrap:wrap;row-gap:4px}
.top{position:static}
/* the sign-in and privacy gates follow the same choice */
html[data-tj-theme="light"]{--ink:#101014;--text:#101014;--paper:#FFFFFF;--alt:#F6F7F9;--rule:#E7E8EC;--muted:#5C6169;
  --amber:#8A4B00;--red:#B3134A;color-scheme:light}
html[data-tj-theme="dark"]{--ink:#ECEEF1;--text:#ECEEF1;--paper:#15171A;--alt:#1D2024;--rule:#2A2E34;--muted:#9AA1AB;
  --amber:#FFB259;--red:#FF7AA3;color-scheme:dark}
html[data-tj-theme="dark"] .card,html[data-tj-theme="dark"] input,html[data-tj-theme="dark"] select,
html[data-tj-theme="dark"] textarea,html[data-tj-theme="dark"] .tab{background:#1D2024;color:var(--text)}

/* ---- the sign-in and privacy gates in dark ---- */
html[data-tj-theme="dark"] body.bare,
html[data-tj-theme="dark"] body{background:#101115;color:#ECEEF1}
html[data-tj-theme="dark"] .auth{background:transparent}
html[data-tj-theme="dark"] .auth .card,
html[data-tj-theme="dark"] .auth form{background:#1A1C21;border-color:#2A2E34}
html[data-tj-theme="dark"] .auth h1{color:#fff}
html[data-tj-theme="dark"] .auth .sub,html[data-tj-theme="dark"] .auth .muted{color:#9AA1AB}
html[data-tj-theme="dark"] .auth input{background:#101115;border-color:#383D45;color:#ECEEF1}
html[data-tj-theme="dark"] .auth input::placeholder{color:#767D87}
html[data-tj-theme="dark"] .policy{color:#ECEEF1}
html[data-tj-theme="dark"] .coins i{opacity:.55}
/* the wordmark itself is chosen on the server; only its size belongs here */
html[data-tj-theme="dark"] .testnote{background:rgba(255,139,0,.14);border-color:#8A4B00;color:#FFB259}
html[data-tj-theme="dark"] .topbar{background:rgba(255,139,0,.14);color:#FFB259}
/* the theme link belongs in the same centred column as everything else */
.auth .switch{margin:20px 0 0;font-size:.85rem;text-align:center}
.auth .switch a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* The sign-in page was written in fixed colours before dark existed. Each one that would
   vanish or shout on a dark ground is answered here — the bold text in the feature list was
   near-black on near-black, so it simply disappeared. */
html[data-tj-theme="dark"] .auth h1{color:#FFFFFF}
html[data-tj-theme="dark"] .auth .sub,
html[data-tj-theme="dark"] .auth .points{color:#A8AEB8}
html[data-tj-theme="dark"] .auth .points b{color:#FFFFFF}
html[data-tj-theme="dark"] .auth label{color:#C8CDD5}
html[data-tj-theme="dark"] .auth input{background:#101115;border-color:#383D45;color:#ECEEF1}
html[data-tj-theme="dark"] .auth input::placeholder{color:#767D87}
html[data-tj-theme="dark"] .auth .foot{color:#767D87}
html[data-tj-theme="dark"] .auth .foot a,
html[data-tj-theme="dark"] .auth details summary{color:#9AA1AB}
html[data-tj-theme="dark"] .auth .testnote{background:rgba(255,139,0,.14);border-color:#8A4B00;color:#FFB259}

/* ---- The light switch ----------------------------------------------------
   A wall switch, because "dark mode" is a light being off. It is a link first:
   /theme/light and /theme/dark work with no JavaScript at all. The script only
   makes the flick happen before the page changes. */
.lightswitch{display:flex;flex-direction:column;align-items:center;gap:8px;margin:26px 0 0}
.ls{display:inline-block;-webkit-tap-highlight-color:transparent}
.ls__plate{display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  width:46px;height:74px;padding:5px 0;border-radius:9px;
  background:linear-gradient(#F3F4F6,#E4E6EA);border:1px solid #D2D5DB;
  box-shadow:0 1px 2px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.85)}
.ls__screw{width:5px;height:5px;border-radius:50%;background:#B9BDC4;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.9)}
.ls__screw::after{content:"";display:block;width:4px;height:1px;background:#8E939B;margin:2px 0 0 .5px}
.ls__rocker{position:relative;width:28px;height:48px;border-radius:5px;overflow:hidden;
  background:linear-gradient(#D8DBE0,#C6CAD1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ls__face{position:absolute;left:0;right:0;height:44px;top:2px;border-radius:4px;
  background:linear-gradient(#FCFCFD,#E9EBEF);
  box-shadow:0 1px 2px rgba(0,0,0,.22);
  transform-origin:50% 50%;transform:translateY(0) rotateX(0deg);
  transition:transform 140ms cubic-bezier(.2,.8,.25,1), box-shadow 140ms ease}
/* off: the top of the rocker is pressed in, the bottom stands proud */
.ls__face{clip-path:none}
.ls:not(.is-on) .ls__face{transform:translateY(-1px) perspective(120px) rotateX(11deg);
  background:linear-gradient(#E4E6EA,#FBFBFC)}
.ls.is-on .ls__face{transform:translateY(1px) perspective(120px) rotateX(-11deg);
  background:linear-gradient(#FFFDF6,#FFF3D6);
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 0 14px rgba(255,196,60,.55)}
.ls:active .ls__face{transition-duration:70ms}
.ls__label{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#9AA1AB}
.ls.is-on ~ .ls__label{color:#8A6A1F}
/* the switch itself keeps its own colours in both themes: a wall switch is a wall switch */
html[data-tj-theme="dark"] .ls__plate{background:linear-gradient(#2A2E34,#22262B);border-color:#3A3F47;
  box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06)}
html[data-tj-theme="dark"] .ls__screw{background:#4A4F57}
html[data-tj-theme="dark"] .ls__rocker{background:linear-gradient(#3A3F47,#2E333A)}
html[data-tj-theme="dark"] .ls:not(.is-on) .ls__face{background:linear-gradient(#31363D,#3D434B)}
html[data-tj-theme="dark"] .ls__label{color:#767D87}
@media (prefers-reduced-motion:reduce){.ls__face{transition:none}}