/* HostFact Finance Monitor. Blue = owed to us, ochre = we owe (validated for colour-blind separation).
   Bahnschrift ships with Windows 10/11; other systems fall back gracefully. */
:root{
  --paper:#F1F3F0; --surface:#FFFFFF; --ink:#16201B; --ink2:#4B5852; --ink3:#77837D; --rule:#DCE1DC; --rule2:#C7CEC8;
  --in:#2A62B8; --in-tint:#E8EEF8; --out:#A86200; --out-tint:#F6EEDF;
  --late:#B02D25; --late-tint:#FBECEA; --soon-tint:#EEF2F7;
  --display:"Bahnschrift","DIN Alternate","DIN Next","Roboto Condensed","Segoe UI",system-ui,sans-serif;
  --body:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Inter",sans-serif;
  font-family:var(--body); font-size:15px; line-height:1.5; color:var(--ink); background:var(--paper);
  font-variant-numeric:tabular-nums;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper)}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:0;margin:0}
h2{font-size:19px}
p{margin:0}
button{font:inherit;font-size:14px;cursor:pointer;border:1px solid var(--rule2);background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:6px}
button:hover{border-color:var(--ink3);background:#F7F8F6}
button.primary{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
button.primary:hover{background:#2C3832}
button.primary:disabled{opacity:.65;cursor:progress}
button.ghost{border-color:transparent;background:transparent;color:var(--ink2)}
button.ghost:hover{background:#E6EAE6}
:focus-visible{outline:2px solid var(--in);outline-offset:2px}
input,select{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--rule2);border-radius:6px;background:var(--surface);color:var(--ink);min-width:0}
input:hover,select:hover{border-color:var(--ink3)}

/* top bar */
.top{background:var(--surface);border-bottom:1px solid var(--rule)}
.topin{display:flex;align-items:center;gap:28px;min-height:64px}
.mark{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:17px;line-height:1.1}
.mark small{display:block;font-family:var(--body);font-weight:400;font-size:12px;color:var(--ink3)}
.glyph{display:flex;flex-direction:column;gap:3px;width:22px}
.glyph i{display:block;height:6px;border-radius:1px}
.glyph i:first-child{background:var(--in);width:22px}
.glyph i:last-child{background:var(--out);width:14px}
nav{display:flex;gap:4px;flex:1;align-self:stretch}
.tab{border:0;border-radius:0;background:none;color:var(--ink2);padding:0 12px;border-bottom:3px solid transparent;font-weight:500}
.tab:hover{background:none;color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--ink)}
.tab .n{color:var(--ink3);font-weight:400;margin-left:2px}

/* data source strip: hatched = sample data, solid = live, red = problem */
.strip{border-bottom:1px solid var(--rule);font-size:13px;color:var(--ink2);background:var(--surface)}
.stripin{display:flex;gap:14px;align-items:baseline;min-height:38px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.strip strong{font-weight:700;color:var(--ink)}
.strip .fresh{margin-left:auto;color:var(--ink3)}
.strip.demo{background:repeating-linear-gradient(135deg,#F7EEDC 0 10px,#FBF5EA 10px 20px);border-bottom-color:#E7D6B2;color:#5F4511}
.strip.demo strong{color:#5F4511}
.strip.demo .fresh{color:#7A5E2A}
.strip.live strong{color:var(--in)}
.strip.problem{background:var(--late-tint);border-bottom-color:#EDC4BF;color:#7D221C}
.strip.problem strong,.strip.problem .fresh{color:#7D221C}

main.wrap{padding-top:28px;padding-bottom:48px}
#error{background:var(--late-tint);border:1px solid #EDC4BF;color:#7D221C;padding:12px 16px;border-radius:8px;margin-bottom:20px}

/* hero ledger */
.hero{display:grid;grid-template-columns:1fr 1fr auto;gap:0;margin-bottom:28px;background:var(--surface);border:1px solid var(--rule);border-radius:10px}
.hero.single{grid-template-columns:1fr}
.ledger{padding:24px 28px 22px;border-left:5px solid var(--in);border-radius:10px 0 0 10px}
.ledger.supplier{border-left-color:var(--out)}
.ledger + .ledger{border-radius:0;box-shadow:inset 1px 0 0 var(--rule)}
.hero.single .ledger{border-radius:10px}
.ledger h2{font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink2)}
.big{font-family:var(--display);font-weight:600;font-size:46px;line-height:1.1;margin:6px 0 18px;letter-spacing:-.5px}
.big.multi{font-size:32px}
.ledger dl{display:flex;flex-wrap:wrap;gap:10px 32px;margin:0}
.ledger dt{font-size:13px;color:var(--ink3)}
.ledger dd{margin:2px 0 0;font-family:var(--display);font-size:19px;font-weight:600}
.ledger dd small{font-family:var(--body);font-size:13px;font-weight:400;color:var(--ink3);margin-left:6px}
.ledger dd.late{color:var(--late)}
.net{padding:24px 28px;min-width:240px;box-shadow:inset 1px 0 0 var(--rule);display:flex;flex-direction:column;justify-content:center;background:#FAFBF9;border-radius:0 10px 10px 0}
.net h2{font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink2)}
.net p.v{font-family:var(--display);font-size:28px;font-weight:600;margin:4px 0}
.net p.s{font-size:13px;color:var(--ink3);max-width:26ch}
.empty{padding:28px;color:var(--ink2)}
.empty b{display:block;font-family:var(--display);font-size:22px;color:var(--ink);margin-bottom:4px}

/* panels */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:22px 24px;margin-bottom:24px}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.note{font-size:13px;color:var(--ink3);margin-top:2px}
.cur{font-size:13px;color:var(--ink2);display:flex;gap:8px;align-items:center}

/* horizon chart */
.chart{position:relative;overflow-x:auto}
.chart svg{min-width:720px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--body);font-size:12px;fill:var(--ink3)}
.chart text.zone{font-size:12.5px;font-weight:600;fill:var(--ink2)}
.chart text.zone.late{fill:var(--late)}
.chart text.axis{font-size:12px;fill:var(--ink2)}
.chart text.side{font-size:12.5px;font-weight:600;fill:var(--ink2)}
.chart .bar{transition:opacity .15s}
.chart.hovering .bar{opacity:.35}
.chart.hovering .bar.on{opacity:1}
.chart .hit{fill:transparent;cursor:pointer}
.chart .grow{transform-box:fill-box;animation:grow .6s cubic-bezier(.2,.7,.2,1) both}
.chart .grow.dn{transform-origin:top}
.chart .grow.up{transform-origin:bottom}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;padding:9px 12px;border-radius:6px;font-size:13px;line-height:1.45;min-width:180px;max-width:260px;z-index:2}
.tip b{font-family:var(--display);font-size:16px;font-weight:600;display:block}
.tip span{color:#C9D2CD;display:block}
.nodata{padding:40px 0;color:var(--ink3)}

/* ageing + attention */
.duo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start}
.duo .panel{margin-bottom:24px}
.ageing{width:100%;border-collapse:collapse}
.ageing th{font-size:13px;font-weight:600;color:var(--ink2);text-align:right;padding:0 0 8px 12px;border-bottom:1px solid var(--rule)}
.ageing th:first-child{text-align:left;padding-left:0}
.ageing th i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
.ageing th i.in{background:var(--in)} .ageing th i.out{background:var(--out)}
.ageing td{padding:0;border-bottom:1px solid var(--rule)}
.ageing tr:last-child td{border-bottom:0}
.ageing td:first-child{padding:12px 0;font-weight:500;white-space:nowrap}
.ageing tr.late td:first-child{color:var(--late)}
.ageing tr.total td{border-top:1px solid var(--rule2);font-weight:600}
.cellbtn{all:unset;box-sizing:border-box;display:block;width:100%;padding:9px 0 9px 12px;text-align:right;cursor:pointer;border-radius:4px}
.cellbtn:hover{background:#F4F6F3}
.cellbtn:focus-visible{outline:2px solid var(--in)}
.cellbtn b{font-family:var(--display);font-weight:600;font-size:16px;display:block}
.cellbtn small{color:var(--ink3);font-size:12px}
.cellbtn .track{display:block;height:4px;background:#EEF1EE;margin-top:5px;border-radius:2px;overflow:hidden}
.cellbtn .track span{display:block;height:100%;border-radius:0 2px 2px 0;margin-left:auto}
.cellbtn.in .track span{background:var(--in)} .cellbtn.out .track span{background:var(--out)}
.cellbtn.zero b{color:var(--ink3);font-weight:400}
.attn{list-style:none;margin:0;padding:0}
.attn li{border-bottom:1px solid var(--rule)}
.attn li:last-child{border-bottom:0}
.attn button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;padding:12px 6px;cursor:pointer;border-radius:4px}
.attn button:hover{background:#F4F6F3}
.attn button:focus-visible{outline:2px solid var(--in)}
.attn strong{font-weight:600}
.attn em{font-style:normal;font-family:var(--display);font-weight:600;text-align:right}
.attn span{grid-column:1/-1;font-size:13px;color:var(--ink3)}
.attn li.late strong,.attn li.late em{color:var(--late)}
.attn h3{font-family:var(--body);font-size:13px;font-weight:600;color:var(--ink2);padding:14px 6px 4px}
.attn li.calm{padding:12px 6px;color:var(--ink3);font-size:14px}

/* invoice list */
.filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.filters label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink2)}
.filters .grow{flex:1;min-width:220px}
.tablewrap{overflow-x:auto;margin:0 -24px;padding:0 24px}
table.list{width:100%;border-collapse:collapse;font-size:14px}
.list th{text-align:left;font-size:13px;font-weight:600;color:var(--ink2);padding:10px 12px;border-bottom:1px solid var(--rule2);white-space:nowrap}
.list th.num,.list td.num{text-align:right}
.list th button{all:unset;cursor:pointer;color:inherit}
.list th button:hover{color:var(--ink)}
.list th button:focus-visible{outline:2px solid var(--in)}
.list th .arrow{color:var(--ink3);margin-left:4px}
.list td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:top}
.list tbody tr{cursor:pointer}
.list tbody tr:hover td{background:#F7F9F6}
.list td.who{border-left:4px solid transparent;padding-left:12px}
.list tr.customer td.who{border-left-color:var(--in)}
.list tr.supplier td.who{border-left-color:var(--out)}
.list td small{display:block;color:var(--ink3);font-size:12.5px;margin-top:2px}
.list td.money{font-family:var(--display);font-size:15.5px;font-weight:600;white-space:nowrap}
.list td.when{white-space:nowrap}
.list .late{color:var(--late);font-weight:600}
.list .today{font-weight:700}
.list .nodate{color:#8A4B07;font-weight:600}
.pill{display:inline-block;font-size:12px;padding:1px 8px;border-radius:999px;border:1px solid var(--rule2);color:var(--ink2);margin-top:4px}
.pill.paused{border-color:#B9C6DD;color:#2B4C83;background:var(--in-tint)}
.check{color:#8A4B07 !important}
.list td.emptyrow{text-align:center;color:var(--ink3);padding:32px;cursor:default}
.fine{font-size:12.5px;color:var(--ink3);margin-top:16px;max-width:110ch}
footer{font-size:12.5px;color:var(--ink3)}

/* detail drawer */
dialog.drawer{margin:0 0 0 auto;height:100vh;max-height:100vh;width:min(460px,100vw);border:0;border-left:1px solid var(--rule);padding:0;background:var(--surface);color:var(--ink)}
dialog.drawer[open]{animation:slide .22s ease-out}
@keyframes slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
dialog::backdrop{background:rgba(22,32,27,.32)}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--surface)}
#detailbody{padding:20px 24px 32px}
.dside{font-size:13px;font-weight:600}
.dside.customer{color:var(--in)} .dside.supplier{color:var(--out)}
.dname{font-family:var(--display);font-size:24px;font-weight:600;margin:2px 0 2px}
.dsub{color:var(--ink3);font-size:13px}
.damount{font-family:var(--display);font-size:36px;font-weight:600;margin:18px 0 2px}
.dwhen{font-size:14px;color:var(--ink2)}
.dwhen.late{color:var(--late);font-weight:600}
.paid{margin:18px 0 6px}
.paid .track{height:8px;background:#EEF1EE;border-radius:4px;overflow:hidden}
.paid .track span{display:block;height:100%}
.paid.customer .track span{background:var(--in)} .paid.supplier .track span{background:var(--out)}
.paid p{font-size:13px;color:var(--ink3);margin-top:6px;display:flex;justify-content:space-between}
.dflag{background:#FBF1E4;border:1px solid #EBD3AF;color:#6E3F07;padding:10px 12px;border-radius:6px;font-size:13.5px;margin:16px 0}
.dnote{font-size:13px;color:var(--ink3);margin-top:18px}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:20px 0 0;font-size:14px}
dl.facts dt{color:var(--ink3)}
dl.facts dd{margin:0;font-weight:500;text-align:right}

@media (max-width:1050px){
  .hero{grid-template-columns:1fr 1fr}
  .net{grid-column:1/-1;box-shadow:inset 0 1px 0 var(--rule);border-radius:0 0 10px 10px;min-width:0}
  .duo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .wrap{padding:0 16px}
  .topin{flex-wrap:wrap;gap:10px;padding-top:12px}
  nav{order:3;flex-basis:100%;overflow-x:auto}
  .tab{padding:10px 10px;white-space:nowrap}
  #refresh{margin-left:auto}
  .hero{grid-template-columns:minmax(0,1fr)}
  .ledger,.ledger + .ledger{border-radius:0;box-shadow:inset 0 1px 0 var(--rule)}
  .ledger:first-child{border-radius:10px 10px 0 0;box-shadow:none}
  .big{font-size:36px}
  .panel{padding:18px 16px}
  .tablewrap{margin:0 -16px;padding:0 16px}
  table.list{min-width:640px}
  .ageing .cellbtn b{font-size:14px}
  .strip .fresh{margin-left:0;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ===== v0.4: collections, checks, summary ===== */
[hidden]{display:none !important}
.muted{color:var(--ink3)}
.tab .n.hot{color:var(--late);font-weight:600}
nav{overflow-x:auto}
.tab{white-space:nowrap}
.sources{display:flex;gap:12px;flex-wrap:wrap}
.src{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.src i{width:8px;height:8px;border-radius:50%;background:#9AA59F;display:inline-block}
.src.ok i{background:#2E7D4F} .src.demo i{background:#C9A04A} .src.bad i{background:var(--late)} .src.off i{background:transparent;border:1.5px solid #9AA59F;width:7px;height:7px}

/* stage tones: escalation from first reminder (light) to suspended (dark); excluded is hatched */
.tone0{--tone:repeating-linear-gradient(135deg,#7F95B5 0 3px,#C9D4E4 3px 6px)}
.tone1{--tone:#EBD6CB} .tone2{--tone:#E0B7A4} .tone3{--tone:#D3967C} .tone4{--tone:#C27257}
.tone5{--tone:#A9533B} .tone6{--tone:#8C3623} .tone7{--tone:#5E2016}
.stg{display:inline-flex;align-items:center;gap:7px;font-weight:500;white-space:nowrap}
.stg i{width:10px;height:10px;border-radius:2px;background:var(--tone);flex:none}

/* pipeline */
.pipeline{display:flex;gap:18px;align-items:stretch}
.pipeline .flow{display:flex;align-items:stretch;flex:1;min-width:0;overflow-x:auto;padding-bottom:4px}
.pipeline .aside{display:flex;padding-left:18px;box-shadow:inset 1px 0 0 var(--rule)}
.stage{all:unset;box-sizing:border-box;cursor:pointer;flex:1;min-width:112px;padding:10px 10px 12px;border-radius:8px;display:flex;flex-direction:column;gap:2px}
.stage:hover{background:#F4F6F3}
.stage:focus-visible{outline:2px solid var(--in)}
.stage .sl{font-size:12.5px;color:var(--ink2);line-height:1.3;min-height:2.6em}
.stage b{font-family:var(--display);font-size:28px;font-weight:600;line-height:1.1}
.stage .sa{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}
.stage .sbar{display:block;height:8px;background:#EEF1EE;border-radius:2px;margin-top:8px;overflow:hidden}
.stage .sbar span{display:block;height:100%;background:var(--tone);border-radius:0 2px 2px 0}
.stage.zero b,.stage.zero .sa{color:var(--ink3);font-weight:400}
.pipeline .arrow{flex:none;width:10px;align-self:center;height:14px;position:relative}
.pipeline .arrow::after{content:"";position:absolute;left:0;top:2px;width:7px;height:7px;border-top:1.5px solid var(--rule2);border-right:1.5px solid var(--rule2);transform:rotate(45deg)}

/* severity labels */
.sev{display:inline-block;font-family:var(--body);font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:4px;margin-right:8px;vertical-align:2px;border:1px solid}
.sev.high{color:#8E231C;background:var(--late-tint);border-color:#EDC4BF}
.sev.medium{color:#7A4A06;background:#FBF1E4;border-color:#EBD3AF}
.sev.low,.sev.info{color:var(--ink2);background:#F1F3F0;border-color:var(--rule2)}
.attn li.good strong,.attn li.good em{color:#2E6B45}

/* checks view */
.sevbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{border-radius:999px;padding:6px 14px;font-size:13.5px}
.chip b{font-weight:600;margin-left:4px}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.panel.chk{border-left:4px solid var(--rule2)}
.panel.chk.high{border-left-color:var(--late)}
.panel.chk.medium{border-left-color:#C08A2E}
.panel.chk h2{font-size:17px}
.chk .count{font-family:var(--display);font-size:26px;font-weight:600;color:var(--ink2)}
.cases{list-style:none;margin:0;padding:0}
.cases li{border-top:1px solid var(--rule)}
.cases button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2fr) minmax(0,1.4fr);gap:4px 20px;width:100%;padding:11px 6px;cursor:pointer;border-radius:4px;font-size:14px}
.cases button:disabled{cursor:default}
.cases button:not(:disabled):hover{background:#F4F6F3}
.cases button:focus-visible{outline:2px solid var(--in)}
.cases .cn small{display:block;color:var(--ink3);font-size:12.5px}
.cases .cd{color:var(--ink2)}
.cases .vs{display:flex;flex-direction:column;gap:2px;font-size:13px}
.cases .vs em{font-style:normal;color:var(--ink3);display:inline-block;width:68px}
.notrun h2{font-size:16px;margin-bottom:6px}
.notrun ul{margin:0;padding-left:18px;color:var(--ink2);font-size:14px}

/* collections table */
.list.coll td{vertical-align:top}
.list.coll td.act{max-width:260px;font-size:13.5px;color:var(--ink)}
.list .blk{color:var(--late);font-weight:600}
.badge{display:inline-block;min-width:24px;text-align:center;font-weight:600;font-size:13px;padding:2px 7px;border-radius:999px;background:#EEF1EE;color:var(--ink2)}
.badge.hi{background:var(--late);color:#fff}
.list.coll tbody tr td.who{border-left-color:var(--in)}

/* drawer additions */
.stagebox{margin:16px 0;padding:12px 14px;border:1px solid var(--rule);border-radius:8px;background:#FAFBF9}
.stagebox p{margin-top:6px;font-size:14px}
.stagebox p b{display:block;font-size:12.5px;color:var(--ink3);font-weight:600}
.card{border-top:1px solid var(--rule);padding-top:14px;margin-top:16px}
.card h3{font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink2);margin-bottom:8px}
.card dl.facts{margin-top:0}
.card dd.late{color:var(--late)}
.svcs{list-style:none;margin:0;padding:0}
.svcs li{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14px}
.svcs small{display:block;color:var(--ink3);font-size:12px}
.st{font-size:12.5px;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid var(--rule2)}
.st.active{color:#2E6B45;border-color:#B9D8C4;background:#EEF7F1}
.st.blocked{color:#8E231C;border-color:#EDC4BF;background:var(--late-tint)}
.dchecks{list-style:none;margin:0;padding:0}
.dchecks li{padding:6px 0;font-size:14px}
.dchecks small{display:block;color:var(--ink3);margin-top:2px}
table.mini{width:100%;border-collapse:collapse;font-size:13.5px}
table.mini th{text-align:left;font-size:12.5px;color:var(--ink3);font-weight:600;padding:4px 6px 6px 0;border-bottom:1px solid var(--rule)}
table.mini td{padding:8px 6px 8px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.mini th.num,table.mini td.num{text-align:right}
table.mini td small{display:block;color:var(--ink3);font-size:12px}
table.mini td small.cmt{color:#6E4A12;font-style:italic}
table.mini tr{cursor:pointer}
table.mini tr:hover td{background:#F7F9F6}
table.mini .late{color:var(--late)}
.back{margin-top:16px;padding-left:0;color:var(--in)}

/* daily summary */
.mailbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.mail{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:28px 34px;max-width:760px;font-size:15px}
.mail header{border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:6px}
.mail header p{margin:3px 0;font-size:14px}
.mail header span{display:inline-block;width:70px;color:var(--ink3)}
.mail h3{font-family:var(--display);font-size:17px;font-weight:600;margin:20px 0 6px}
.mail ul{margin:0;padding-left:20px}
.mail li{margin:4px 0}
.mail .none{color:var(--ink3)}
.mail .sig{margin-top:24px;font-size:13px;color:var(--ink3)}

@media (max-width:1050px){.pipeline{flex-direction:column}.pipeline .aside{padding-left:0;box-shadow:inset 0 1px 0 var(--rule);padding-top:10px}.cases button{grid-template-columns:1fr}}
@media (max-width:720px){.list.coll{min-width:860px}.mail{padding:20px}.sources{flex-basis:100%}}

.legend{display:flex;gap:16px;font-size:13px;color:var(--ink2);margin-left:auto;align-self:center}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend i.in{background:var(--in)}.legend i.out{background:var(--out)}
.mail{margin-bottom:24px}
@media (max-width:720px){.legend{margin-left:0;flex-wrap:wrap}.horizon .head{flex-wrap:wrap}}

/* v0.5 */
body.locked{overflow:hidden}
.sev.unable{color:#3D4F7A;background:#EEF1F8;border-color:#C5CEE3;border-style:dashed}
.panel.chk.unable{border-left-color:#7F95B5}
.pill.expired{border-color:#EDC4BF;color:#8E231C;background:var(--late-tint)}
.sevbar .countnote{align-self:center;margin-left:auto;font-size:13px;color:var(--ink2)}
.balance{margin-top:14px}
.balance .bl{font-size:13px;color:var(--ink3)}
.balance .damount{margin:2px 0 10px}
.bsplit{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin:0}
.bsplit div{background:#F6F8F5;border-radius:6px;padding:8px 10px}
.bsplit dt{font-size:12px;color:var(--ink3)}
.bsplit dd{margin:2px 0 0;font-family:var(--display);font-weight:600;font-size:16px}
.bsplit .late dd,.bsplit .late dt{color:var(--late)}
.bsplit .nodate dd{color:#8A4B07}
.stmt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 6px}
.stmt .note{flex-basis:100%;margin:0}
.dwhen{margin-top:12px}
.demohead{background:repeating-linear-gradient(135deg,#F7EEDC 0 10px,#FBF5EA 10px 20px);border:1px solid #E7D6B2;color:#5F4511;font-weight:600;padding:8px 12px;border-radius:6px;margin:0 0 16px;font-size:14px}
.tonex{--tone:#DCE1DC}

/* v0.6 sign-in */
#logout{margin-left:6px}
.loginbody{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.loginbox{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:28px 28px 24px;width:min(380px,100%)}
.loginbox .mark{margin-bottom:22px}
.loginbox h1{font-size:24px;margin:0 0 14px}
.loginbox form{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.loginbox label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink2)}
.loginbox input{font-size:16px;padding:10px 12px}
.loginbox button{padding:10px 14px;font-size:15px}
.loginmsg{background:var(--late-tint);border:1px solid #EDC4BF;color:#7D221C;padding:9px 12px;border-radius:6px;font-size:14px;margin:0 0 14px}
.logindemo{background:repeating-linear-gradient(135deg,#F7EEDC 0 10px,#FBF5EA 10px 20px);border:1px solid #E7D6B2;color:#5F4511;padding:7px 10px;border-radius:6px;font-size:13px;margin:0 0 14px}