/* PVN Bricks CRM Book. Kiln-brown ink on lime-wash paper, brick red for action. Mobile first. */
:root{
  --paper:#F5F0E8; --paper-2:#ECE4D7; --sheet:#FFFFFF; --kiln:#2B1D17; --kiln-2:#3B2A22; --kiln-3:#5A4337;
  --ink:#2A211C; --ink-2:#5C5048; --ink-3:#8A7E75; --line:#E2D8CA; --line-2:#EFE8DD;
  --brick:#B4472A; --brick-2:#9A3A20; --brick-soft:#F8E4DA; --clay:#E08A5A; --gold:#D9A441;
  --ok:#3D7A45; --ok-soft:#E2F0E1; --warn:#A8650C; --warn-soft:#FBEBD2; --err:#B03A2E; --err-soft:#F8E1DE;
  --info:#2F5D8A; --info-soft:#E1EAF4; --mute-soft:#ECEAE5;
  --display:"Bricolage Grotesque","Noto Sans Telugu",system-ui,sans-serif;
  --body:"Hanken Grotesk","Noto Sans Telugu",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:12px; --bottom:64px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html[lang="te"] body{line-height:1.65}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brick-2)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em}
.boot{display:grid;place-items:center;height:100vh;color:var(--ink-3)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.9em}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.muted{color:var(--ink-3)}
.good{color:var(--ok)}
.late{color:var(--err)!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dim{opacity:.55}
.grow{flex:1}
svg{width:20px;height:20px;flex:none}

/* ---------- shell: phone first ---------- */
.side{display:none}
.topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;background:var(--kiln);color:#fff;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top))}
.topbar img{width:30px;height:30px}
.topbar b{font-family:var(--display);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main{min-width:0;padding:18px 16px calc(var(--bottom) + 32px + env(safe-area-inset-bottom))}
.bottom{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:repeat(5,1fr);background:var(--sheet);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 24px -18px rgba(43,29,23,.5)}
.bottom a,.bottom button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--bottom);text-decoration:none;color:var(--ink-2);font-size:.72rem;font-weight:600;border:0;background:none;cursor:pointer;padding:0 2px;text-align:center;line-height:1.15}
.bottom a.on,.bottom button.on{color:var(--brick)}
.bottom a.on svg{stroke-width:2.4}
.sheet-scrim{position:fixed;inset:0;z-index:34;background:rgba(43,29,23,.35)}
.sheet{position:absolute;left:0;right:0;bottom:calc(var(--bottom) + env(safe-area-inset-bottom));background:var(--sheet);border-radius:16px 16px 0 0;padding:10px 8px 12px;display:grid;gap:2px;animation:up .18s}
.sheet a{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600}
.sheet a:active{background:var(--paper)}
.sheetme{display:flex;align-items:center;gap:12px;padding:12px 14px 2px;border-top:1px solid var(--line-2);margin-top:6px}
.sheetme div{flex:1;min-width:0}.sheetme b{display:block}.sheetme small{color:var(--ink-3)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--clay);color:var(--kiln);display:grid;place-items:center;font-weight:700;flex:none}
.wsbar{margin-bottom:14px}.wsbar label{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink-2)}.wsbar select{width:auto}

/* language switch */
.langs{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--sheet)}
.langs button{border:0;background:none;border-radius:999px;padding:4px 12px;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--ink-2)}
.langs button.on{background:var(--kiln);color:#fff}
.langs.dark{border-color:rgba(255,255,255,.25);background:transparent}
.langs.dark button{color:#E8DCD2}
.langs.dark button.on{background:#fff;color:var(--kiln)}

/* ---------- page parts ---------- */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.pagehead > div:first-child{min-width:0}
.pagehead h1{font-family:var(--display);font-size:1.55rem;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.pagehead .sub{color:var(--ink-2);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pagehead .acts{display:flex;gap:8px;flex-wrap:wrap}
.crumb{display:inline-flex;align-items:center;gap:2px;font-size:.9rem;font-weight:600;text-decoration:none;margin-bottom:4px;color:var(--ink-2)}
.crumb svg{width:16px;height:16px}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);padding:10px 16px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.25;min-height:44px}
.btn:hover{border-color:var(--ink-3)}
.btn svg{width:18px;height:18px}
.btn.primary{background:var(--brick);border-color:var(--brick);color:#fff}
.btn.primary:hover{background:var(--brick-2)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--kiln)}
.btn.wa{background:#1E7A4C;border-color:#1E7A4C;color:#fff}
.btn.danger{color:var(--err);border-color:#E8C3BE}
.btn.danger:hover{background:var(--err-soft)}
.btn.ghost{background:none;border-color:transparent}
.btn.ghost:hover{background:var(--paper-2)}
.btn.danger-text{color:var(--err)}
.btn.sm{padding:6px 11px;font-size:.88rem;min-height:36px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

label.f{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.88rem;color:var(--ink-2);min-width:0}
.flabel{display:block;font-weight:600;font-size:.88rem;color:var(--ink-2);margin-bottom:6px}
.in,select.in,textarea.in{width:100%;border:1px solid var(--line);background:var(--sheet);border-radius:10px;padding:11px 12px;font-weight:500;color:var(--ink);min-width:0;font-size:16px;min-height:44px}
.in:focus{outline:none;border-color:var(--brick);box-shadow:0 0 0 3px rgba(217,164,65,.35)}
.in[disabled]{background:var(--paper);color:var(--ink-2)}
textarea.in{resize:vertical;min-height:72px}
.in.sm{padding:6px 9px;min-height:36px;font-size:.92rem}
.grid2,.grid3{display:grid;grid-template-columns:1fr;gap:12px 14px}
.span2{grid-column:1 / -1}
.err-text{color:var(--err);font-weight:600;font-size:.92rem}
.hint{color:var(--ink-3);font-size:.86rem;font-weight:500;margin:0}
.notice{background:#FBF1DD;border:1px solid #EBD3A5;border-radius:10px;padding:11px 14px;font-size:.92rem;color:#5E4210;margin:0}
.inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.inline .in{width:auto}
label.check{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.94rem;color:var(--ink-2);cursor:pointer;grid-column:1 / -1}
label.check input{width:20px;height:20px;accent-color:var(--brick);margin:0}

/* segmented radios */
.seg2,.seg4{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg2 label,.seg4 label{position:relative;display:flex;flex-direction:column;gap:1px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-weight:700;cursor:pointer;background:var(--sheet)}
.seg2 label small{font-weight:500;color:var(--ink-3);font-size:.82rem}
.seg2 label.on,.seg4 label.on{border-color:var(--brick);background:var(--brick-soft);color:var(--brick-2)}
.seg2 label[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.seg2 input,.seg4 input{position:absolute;opacity:0;pointer-events:none}
.seg2 label:has(input:focus-visible),.seg4 label:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}

/* cards + tables */
.card{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.card > header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.card > header h2{font-size:1rem;font-weight:700}
.card > header a{font-weight:600;font-size:.9rem;text-decoration:none}
.card .body{padding:16px}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.cols,.cols.even{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.tablewrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse}
table.t th{text-align:left;font-size:.78rem;font-weight:700;color:var(--ink-3);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t th.num{text-align:right}
table.t td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.t tbody tr:last-child td{border-bottom:0}
table.t tr.click{cursor:pointer}
table.t tr.click:hover td{background:#FBF7F1}
table.t td.strong{font-weight:700}
table.t td .two{display:block;color:var(--ink-3);font-size:.85rem;font-weight:500;overflow-wrap:anywhere}
table.t tfoot td{border-top:1px solid var(--line);border-bottom:0;background:#FBF8F3}
table.t tr.sub td{background:#FBF8F3;color:var(--ink-2)}
td.nowrap{white-space:nowrap}
.hide-sm{display:none}
.show-sm,table.t td .two.show-sm{display:block}
.empty{padding:36px 20px;text-align:center;color:var(--ink-2)}
.empty b{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:4px}
.empty .btn{margin-top:14px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;max-width:100%}
.tab{border:0;background:none;padding:8px 12px;border-radius:8px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.tab:hover{background:var(--paper)}
.tab.on{background:var(--kiln);color:#fff}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--sheet);width:100%}
.search svg{width:18px;height:18px;color:var(--ink-3)}
.search input{border:0;outline:none;padding:10px 0;width:100%;background:none;font-size:16px}
.search:focus-within{border-color:var(--brick);box-shadow:0 0 0 3px rgba(217,164,65,.35)}
.daterange{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.daterange label.f{font-size:.8rem}
.rowacts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.rowacts .in{width:auto}
.paysum{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.paysum div{display:flex;gap:10px;align-items:baseline}
.paysum b{font-size:1.25rem}

/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.p-paid,.p-cleared,.p-converted,.p-accepted{background:var(--ok-soft);color:var(--ok)}
.p-unpaid,.p-bounced{background:var(--err-soft);color:var(--err)}
.p-partial,.p-pending{background:var(--warn-soft);color:var(--warn)}
.p-cancelled,.p-declined{background:var(--mute-soft);color:#6B6A66}
.p-open{background:var(--info-soft);color:var(--info)}

/* dashboard */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.stat{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat:hover{border-color:var(--ink-3)}
.stat .k{color:var(--ink-2);font-weight:600;font-size:.86rem}
.stat .v{font-family:var(--display);font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow-wrap:anywhere}
.stat .d{color:var(--ink-3);font-size:.82rem}
.stat.alert{border-color:var(--brick);box-shadow:inset 4px 0 0 var(--brick)}
.agebar{display:flex;gap:2px;height:16px;margin:2px 0 12px}
.agebar span{flex-basis:0;min-width:4px}
.agebar span:first-child{border-radius:4px 0 0 4px}.agebar span:last-child{border-radius:0 4px 4px 0}
.agebar.empty span{flex:1;background:var(--line-2);border-radius:4px}
.agelist{list-style:none;margin:0 0 6px;padding:0;display:grid}
.agelist li{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:.93rem}
.agelist li:last-child{border-bottom:0}
.agelist i{width:12px;height:12px;border-radius:3px}
.owelist,.duelist,.paylist{list-style:none;margin:0;padding:0}
.owelist li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line-2)}
.owelist a,.duelist a{text-decoration:none;color:inherit;min-width:0}
.owelist small,.duelist small,.paylist small{display:block;color:var(--ink-3);font-size:.84rem}
.duelist li{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:14px 16px;border-bottom:1px solid var(--line-2);align-items:center}
.duelist li:last-child{border-bottom:0}
.duelist .rowacts{grid-column:1 / -1;justify-content:flex-start}
/* The list decides its own layout: buttons sit beside the amount only when the list is wide enough. */
.duelist{container-type:inline-size}
@container (min-width:720px){ .duelist li{grid-template-columns:minmax(0,1fr) auto auto} .duelist .rowacts{grid-column:auto} }
.duesgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.duelist .pill{margin-top:4px}
.paylist li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.paylist li:last-child{border-bottom:0}

/* detail */
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.94rem;margin:0}
.kv dt{color:var(--ink-3);font-weight:600}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.reach{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.balance{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0 10px;border-bottom:1px solid var(--line-2)}
.balance b{font-family:var(--display);font-size:1.6rem;font-variant-numeric:tabular-nums}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:12px 1fr;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line-2)}
.timeline li:last-child{border-bottom:0}
.timeline li > span{width:10px;height:10px;border-radius:50%;background:var(--line);margin-top:7px}
.timeline li.note > span{background:var(--gold)}
.timeline p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.timeline small{color:var(--ink-3)}
.notebox{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}

/* customer picker */
.picked{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--paper);border-radius:10px;padding:10px 12px}
.picked small,.pickl small{display:block;color:var(--ink-3);font-size:.85rem;font-weight:500}
.pickl{list-style:none;margin:8px 0 0;padding:0;max-height:300px;overflow:auto;border:1px solid var(--line-2);border-radius:10px}
.pickl.short{max-height:220px}
.pickl li + li{border-top:1px solid var(--line-2)}
.pickl li.muted{padding:12px}
.pickl button{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 12px;cursor:pointer}
.pickl button:hover{background:var(--paper)}

/* bill lines */
.lines{display:grid}
.line{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-2);position:relative;align-items:start}
.lname{grid-column:1 / -1;padding-right:36px}
.lname small{display:block;color:var(--ink-3);font-size:.8rem}
.lamt{align-self:end;text-align:right;font-weight:800;font-variant-numeric:tabular-nums;padding-bottom:11px}
.line.notax .lamt{grid-column:1 / -1;padding-bottom:0}
.line .x{position:absolute;top:10px;right:8px;color:var(--ink-3);border:0;background:none;cursor:pointer;font-size:1.1rem;padding:6px 10px;border-radius:8px}
.line .x:hover{color:var(--err);background:var(--err-soft)}
.ro{display:flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chip{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.82rem;font-weight:600;cursor:pointer}
.adder{padding:12px 16px;background:#FCFAF6;border-bottom:1px solid var(--line-2)}
dl.totals{display:grid;grid-template-columns:1fr auto;gap:6px 24px;padding:14px 16px;margin:0 0 0 auto;max-width:400px;font-variant-numeric:tabular-nums}
dl.totals dt{color:var(--ink-2)}dl.totals dd{margin:0;text-align:right}
dl.totals .grand{font-weight:800;font-size:1.12rem;border-top:1px solid var(--line);padding-top:8px;color:var(--ink)}
.savebar{position:sticky;bottom:calc(var(--bottom) + 8px + env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--kiln);color:#fff;padding:10px 12px 10px 16px;border-radius:var(--r);box-shadow:0 12px 30px -12px rgba(43,29,23,.7)}
.savebar span{min-width:0}
.savebar b{font-size:1.1rem}
.savebar small{display:block;color:#D9CABE;font-size:.74rem;line-height:1.3}

/* printable paper (bill + statement) */
.paper{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;color:#1a1410;font-size:.9rem}
.paper .ph{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;border-bottom:3px solid var(--kiln);padding-bottom:14px;margin-bottom:14px}
.paper .from{display:flex;gap:12px;min-width:0}
.paper .from img{width:auto;height:72px;max-width:110px;object-fit:contain;flex:none}
.paper h2{font-family:var(--display);font-size:1.25rem;color:var(--kiln)}
.paper p{margin:0}
.paper .from .tag{color:var(--ink-3);font-size:.8rem;letter-spacing:.04em}
.paper .r{text-align:right;margin-left:auto}
.paper .r h3{font-family:var(--display);font-size:1.1rem;letter-spacing:.04em;color:var(--brick-2)}
.paper .r small{display:block;color:var(--ink-3);font-size:.75rem}
.paper .r dl{display:grid;grid-template-columns:auto auto;gap:2px 10px;margin:6px 0 0;justify-content:end}
.paper .r dt{color:var(--ink-3)}.paper .r dd{margin:0;font-weight:600}
.parties{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px}
.parties h4,.pf h4{font-size:.72rem;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;margin-bottom:4px}
table.items-t,table.taxsum{width:100%;border-collapse:collapse}
table.items-t th,table.taxsum th{background:var(--kiln);color:#fff;text-align:left;padding:7px 8px;font-size:.76rem;white-space:nowrap}
table.items-t td,table.taxsum td{padding:7px 8px;border-bottom:1px solid #EEE6DA}
table.taxsum{margin-top:6px;font-size:.82rem}
table.taxsum th{background:#6B5547}
.sumrow{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.sumrow dl.totals{padding:0;max-width:none;width:100%}
.words{margin-top:10px!important;font-size:.86rem}
.decl{margin-top:10px!important;font-weight:700;font-size:.86rem}
.pf{display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px;padding-top:12px;border-top:1px solid #EEE6DA;color:#3d332c}
.pf p + p{margin-top:6px}
.pf .terms{font-size:.82rem;white-space:pre-line}
.sign{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.sign span{display:block;width:180px;height:44px;border-bottom:1px solid #999;margin:4px 0}
.statement table.ledger th,.statement table.ledger td{padding:8px 10px}

/* modal + toast */
.scrim{position:fixed;inset:0;background:rgba(43,29,23,.5);z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{background:var(--sheet);border-radius:16px 16px 0 0;width:100%;max-height:92vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);animation:up .18s}
.modal > header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:var(--sheet);z-index:1}
.modal > header h2{font-size:1.12rem;font-weight:700}
.modal .body{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.modal > footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line-2);position:sticky;bottom:0;background:var(--sheet)}
.modal > footer .btn{flex:1}
.toasts{position:fixed;left:16px;right:16px;bottom:calc(var(--bottom) + 16px);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--kiln);color:#fff;padding:11px 16px;border-radius:10px;font-weight:600;box-shadow:0 14px 34px -12px rgba(0,0,0,.5);animation:up .2s;max-width:420px}
.toast.bad{background:var(--err)}
@keyframes up{from{transform:translateY(8px);opacity:0}}

/* auth */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr}
.auth .art{background:var(--kiln);color:#fff;padding:24px 20px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;
  background-image:repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.04) 22px 24px),repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.03) 46px 48px)}
.brandrow{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.1rem}
.brandrow img{width:40px;height:40px}
.auth .art h1{font-family:var(--display);font-size:1.6rem;line-height:1.1;letter-spacing:-.02em;max-width:18ch}
.auth .art p{color:#D9CABE;margin:6px 0 0}
.auth .art .langs{align-self:flex-start}
.auth .form{display:flex;justify-content:center;padding:24px 16px 40px}
.auth form{width:min(420px,100%);display:flex;flex-direction:column;gap:14px}
.auth form h2{font-family:var(--display);font-size:1.45rem}
.auth form p{margin:0;color:var(--ink-2)}

/* bill and statement layouts */
.docgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:940px;align-items:start}
.docgrid .d-acts{order:-1}
.items-m,.ledger-m{list-style:none;margin:0 0 6px;padding:0}
.items-m li,.ledger-m li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #EEE6DA}
.items-m li > div,.ledger-m li > div{flex:1;min-width:0;overflow-wrap:anywhere}
.items-m li > .num,.ledger-m li > .num{flex:none;max-width:48%}
.ledger-m .num small{white-space:normal}
.items-m small,.ledger-m small{display:block;color:var(--ink-3);font-size:.82rem}
.ledger-m li.sub{background:#FBF8F3;padding:10px 8px;margin:0 -8px}
.ledger-m li.click{cursor:pointer}
.ledger-m .pill{margin-top:4px}
.ledger-m .num small{text-align:right}
.items-tw,.ledger-t{display:none}
table.items-t th.num,table.taxsum th.num{text-align:right}
.memberlist{list-style:none;margin:0;padding:0}
.memberlist li{display:grid;grid-template-columns:1fr;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-2);align-items:center}
.memberlist li:last-child{border-bottom:0}
.memberlist .who{min-width:0}
.memberlist small{display:block;color:var(--ink-3);font-size:.85rem}
.memberlist .ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.memberlist .ctl select{width:auto;min-width:160px}

/* ---------- tablet and up ---------- */
@media (min-width:600px){
  .main{padding:24px 24px calc(var(--bottom) + 40px)}
  .grid2{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat .v{font-size:1.4rem}
  .seg4{grid-template-columns:repeat(4,1fr)}
  .hide-sm{display:table-cell}
  .show-sm,table.t td .two.show-sm{display:none}
  .search{width:auto;min-width:280px;margin-left:auto}
  .line{grid-template-columns:minmax(0,2fr) minmax(150px,1.3fr) minmax(100px,1fr) minmax(70px,.7fr) minmax(110px,auto) 40px;padding-right:12px}
  .line.notax{grid-template-columns:minmax(0,2fr) minmax(150px,1.3fr) minmax(100px,1fr) minmax(110px,auto) 40px}
  .lname{grid-column:auto;padding-right:0;padding-top:26px}
  .lamt,.line.notax .lamt{grid-column:auto;align-self:start;padding:36px 0 0}
  .line .x{position:static;margin-top:29px}
  .daterange{width:auto;grid-template-columns:auto auto}
  .daterange .in{width:auto}
  .memberlist li{grid-template-columns:1fr auto}
  .scrim{align-items:center;padding:16px}
  .modal{border-radius:16px;width:min(620px,100%);max-height:calc(100vh - 32px)}
  .modal.wide{width:min(820px,100%)}
  .modal > footer .btn{flex:none}
  .toasts{left:auto;right:20px;align-items:flex-end}
  .paper{padding:32px}
  .parties{grid-template-columns:1fr 1fr}
  .sumrow{grid-template-columns:1fr minmax(240px,320px)}
  .pf{grid-template-columns:1fr auto}
  .items-m,.ledger-m{display:none}
  .items-tw,.ledger-t{display:block}
  .auth{grid-template-columns:1fr 1fr}
  .auth .art{padding:48px;justify-content:space-between}
  .auth .art h1{font-size:2.4rem}
  .auth .form{align-items:center}
}
/* ---------- desktop: sidebar instead of bottom bar ---------- */
@media (min-width:1000px){
  :root{--bottom:0px}
  .shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
  .topbar,.bottom,.sheet-scrim{display:none}
  .side{display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;background:var(--kiln);color:#EDE3DA;padding:18px 14px}
  .side .brand{display:flex;align-items:center;gap:10px;padding:4px 8px;text-decoration:none;color:#fff}
  .side .brand img{width:40px;height:40px}
  .side .brand b{font-family:var(--display);font-size:1rem;display:block;line-height:1.1}
  .side .brand small{color:#BFAEA2;font-size:.78rem}
  .side nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
  .side nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;text-decoration:none;color:#D8CBC0;font-weight:600}
  .side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
  .side nav a.on{background:#fff;color:var(--kiln)}
  .side .langs{align-self:flex-start;margin-left:8px}
  .side .me{border-top:1px solid rgba(255,255,255,.12);padding:14px 6px 2px;display:flex;align-items:center;gap:10px}
  .side .me div{min-width:0;flex:1}
  .side .me b{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side .me small{color:#BFAEA2}
  .side .me button{background:none;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:7px;padding:5px 9px;font-size:.8rem;cursor:pointer}
  .main{padding:28px clamp(20px,3vw,40px) 60px}
  .cols{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}
  .cols.even{grid-template-columns:1fr 1fr}
  .duesgrid{grid-template-columns:320px minmax(0,1fr)}
  .savebar{bottom:12px}
  .toasts{bottom:20px}
  .pagehead h1{font-size:1.8rem}
}

@media (min-width:1440px){
  .docgrid{max-width:none;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto auto 1fr;grid-template-areas:"paper acts" "paper pays" "paper notes"}
  .docgrid .d-paper{grid-area:paper}.docgrid .d-acts{grid-area:acts;order:0}.docgrid .d-pays{grid-area:pays}.docgrid .d-notes{grid-area:notes}
  .docgrid > .d-acts:last-child{grid-area:acts}
}

/* ---------- print: just the paper ---------- */
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff;font-size:12px}
  .side,.topbar,.bottom,.pagehead .acts,.crumb,.noprint,.toasts,.wsbar,.savebar{display:none!important}
  .shell,.main{display:block;padding:0!important}
  .pagehead{display:none}
  .cols,.docgrid{display:block}
  .items-m,.ledger-m{display:none!important}
  .items-tw,.ledger-t{display:block!important}
  .paper{border:0;padding:0;border-radius:0}
  .parties{grid-template-columns:1fr 1fr}
  .sumrow{grid-template-columns:1fr 280px}
  .pf{grid-template-columns:1fr auto}
  table.items-t th,table.taxsum th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .paper .ph{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- sending and PDFs ---------- */
.timeline li.send > span{background:var(--ok)}
.btn.off{opacity:.55;pointer-events:none}
.upiqr{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;border:1px solid #EEE6DA;border-radius:10px;width:max-content;max-width:100%}
.upiqr img{width:96px;height:96px;image-rendering:pixelated;flex:none}
.upiqr b{display:block;font-size:.95rem}
.upiqr small{display:block;color:var(--ink-3);font-size:.78rem}
.rcpt-box{border:1px solid #EEE6DA;border-radius:12px;padding:18px 20px;margin:6px 0 4px;display:grid;gap:8px}
.rcpt-amt{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--kiln)}
.receipt .kv{margin-top:6px}
table.items-t tr.tot td{border-top:2px solid var(--kiln);font-weight:600}
.sendtop{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.pdfthumb{width:132px;flex:none;display:grid;gap:4px}
.pdfthumb button{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;cursor:zoom-in;display:block}
.pdfthumb img{display:block;width:100%}
.pdfthumb small{color:var(--ink-3);font-size:.74rem;overflow-wrap:anywhere}
.ph-wait{height:170px;display:grid;place-items:center;text-align:center;border:1px dashed var(--line);border-radius:8px;color:var(--ink-3);font-size:.85rem;padding:8px}
.sendwho{flex:1 1 220px;min-width:0;display:grid;gap:6px}
.sendwho small{color:var(--ink-3)}
.pages{display:grid;gap:10px;max-height:70vh;overflow:auto;background:var(--paper-2);padding:10px;border-radius:10px}
.pages img{width:100%;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.sendsec{display:grid;gap:10px;border-top:1px solid var(--line-2);padding-top:14px}
.sendsec h3{font-size:1rem}
.chanrows{display:grid;gap:8px}
.chanrow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 12px;align-items:center}
.chanrow.off label{opacity:.6}
label.check.off{opacity:.55}
ul.results{list-style:none;margin:0;padding:0;display:grid;gap:6px}
ul.results li{display:grid;gap:2px;padding:9px 12px;border-radius:8px;background:var(--mute-soft);font-size:.92rem}
ul.results li.ok{background:var(--ok-soft);color:#24502B}
ul.results li.bad{background:var(--err-soft);color:#7E241D}
ul.picklist{list-style:none;margin:0;padding:0;border:1px solid var(--line-2);border-radius:10px;max-height:46vh;overflow:auto}
ul.picklist li + li{border-top:1px solid var(--line-2)}
ul.picklist label.check{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;padding:10px 12px;font-weight:500;color:var(--ink)}
ul.picklist small{display:block;color:var(--ink-3);font-size:.82rem}
ul.chanlist,ul.msglog{list-style:none;margin:0;padding:0;display:grid}
ul.chanlist li,ul.msglog li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-2)}
ul.chanlist li:last-child,ul.msglog li:last-child{border-bottom:0}
ul.chanlist small,ul.msglog small{display:block;color:var(--ink-3);font-size:.84rem;overflow-wrap:anywhere}
details.setup{border:1px solid var(--line);border-radius:10px;padding:0 14px;background:#FCFAF6}
details.setup summary{cursor:pointer;font-weight:700;padding:12px 0;color:var(--brick-2)}
details.setup h3{font-size:.98rem;margin:10px 0 4px}
details.setup ol{margin:0 0 12px;padding-left:20px;display:grid;gap:6px;font-size:.92rem}
details.setup .tpl{display:grid;gap:4px;margin:6px 0}
details.setup code{display:block;background:#fff;border:1px solid var(--line-2);border-radius:6px;padding:6px 8px;font-size:.84rem;white-space:pre-wrap;overflow-wrap:anywhere}
.minihead{font-size:.95rem;margin-bottom:6px}
@media (max-width:599px){ .chanrow{grid-template-columns:1fr} .pdfthumb{width:104px} }

/* The page a PDF is drawn from: A4 width, desktop layout, off screen. */
.pdf-host{position:fixed;left:-12000px;top:0;width:794px;background:#fff;z-index:-1;pointer-events:none}
.pdf-host .paper{border:0;border-radius:0;padding:0 40px;font-size:13px;max-width:none}
.pdf-host .items-m,.pdf-host .ledger-m{display:none!important}
.pdf-host .items-tw,.pdf-host .ledger-t{display:block!important}
.pdf-host .parties{grid-template-columns:1fr 1fr}
.pdf-host .sumrow{grid-template-columns:1fr 300px}
.pdf-host .pf{grid-template-columns:1fr auto}
.pdf-host .tablewrap{overflow:visible}

/* GST records */
.hint.split{margin:-6px 0 14px}
.gsttabs{margin:14px 0 12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.gsthead{display:flex;flex-direction:column;gap:14px}
.gstfilter{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cadl{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cadl .btn{width:100%;justify-content:center}
.prog{position:relative;width:100%;height:30px;border-radius:8px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.prog div{position:absolute;inset:0 auto 0 0;background:var(--brick-soft);transition:width .2s}
.prog span{position:relative;display:block;padding:5px 10px;font-size:.88rem;font-weight:600}
.stats.three{grid-template-columns:repeat(3,1fr)}
table.t tr.sel td{background:var(--brick-soft)}
@media (min-width:600px){
  .gsthead{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .gstfilter{display:flex}
  .cadl{align-items:flex-end;max-width:360px}
  .cadl .btn{width:auto}
  .cadl .hint{text-align:right}
}