:root{
  --ground:#ffffff; --surface:#f6f8fa; --surface-2:#eef1f5; --elevated:#ffffff;
  --ink:#171b21; --ink-2:#414b57; --muted:#6b7683;
  --line:#e4e8ed; --line-strong:#cfd6de;
  --accent:#12508f; --accent-ink:#0d3d6e; --accent-soft:#eaf1f8; --accent-line:#bcd3ea;
  --crit:#b42318; --crit-bg:#fef3f2; --crit-line:#f3c6c1;
  --warn:#8f6000; --warn-bg:#fff8ea; --warn-line:#efd8a4;
  --ok:#0b6b3f;   --ok-bg:#edf7f1;   --ok-line:#bfe0cd;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.05);
  --shadow-lg:0 8px 28px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.08);
  --font-ui:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  --font-mono:"Cascadia Mono","Cascadia Code",Consolas,ui-monospace,monospace;
  --r:4px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#101419; --surface:#171c23; --surface-2:#1e252d; --elevated:#1a2027;
    --ink:#e8ecf1; --ink-2:#c2cad4; --muted:#94a0ad;
    --line:#2a323c; --line-strong:#3a444f;
    --accent:#6ba6e8; --accent-ink:#9cc6f2; --accent-soft:#152535; --accent-line:#28405c;
    --crit:#ff9c90; --crit-bg:#2c1512; --crit-line:#5c2a24;
    --warn:#f0c469; --warn-bg:#2a2010; --warn-line:#584319;
    --ok:#74d9a0;   --ok-bg:#112620;   --ok-line:#245840;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --shadow-lg:0 10px 30px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#101419; --surface:#171c23; --surface-2:#1e252d; --elevated:#1a2027;
  --ink:#e8ecf1; --ink-2:#c2cad4; --muted:#94a0ad;
  --line:#2a323c; --line-strong:#3a444f;
  --accent:#6ba6e8; --accent-ink:#9cc6f2; --accent-soft:#152535; --accent-line:#28405c;
  --crit:#ff9c90; --crit-bg:#2c1512; --crit-line:#5c2a24;
  --warn:#f0c469; --warn-bg:#2a2010; --warn-line:#584319;
  --ok:#74d9a0;   --ok-bg:#112620;   --ok-line:#245840;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:0 10px 30px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-ui); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display); margin:0; font-weight:600; text-wrap:balance}
button{font-family:inherit; font-size:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
.mono{font-family:var(--font-mono); font-size:.86em}
.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* walkthrough */
.walk{position:sticky; top:0; z-index:60; display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); font-size:12px}
.walk .wlabel{color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; margin-right:4px; font-weight:600}
.walk button{border:1px solid var(--line-strong); background:var(--elevated); color:var(--ink-2); padding:4px 10px; border-radius:var(--r); font-size:12px}
.walk button:hover{border-color:var(--accent); color:var(--accent)}
.walk button[aria-current="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
:root[data-theme="dark"] .walk button[aria-current="true"]{color:#0e1620}

/* shell */
.shell{display:grid; grid-template-columns:200px 1fr; min-height:620px}
.rail{border-right:1px solid var(--line); background:var(--surface); padding:14px 10px; display:flex; flex-direction:column; gap:2px}
.brand{display:flex; align-items:center; gap:9px; padding:6px 8px 16px}
.brandmark{width:26px; height:26px; border-radius:var(--r); background:var(--accent); display:grid; place-items:center; flex:none}
.brandname{font-family:var(--font-display); font-weight:600}
.brandsub{display:block; font-size:10.5px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; font-weight:600; margin-top:-2px}
.navitem{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:var(--r); color:var(--ink-2); border:none; background:none; width:100%; text-align:left}
.navitem:hover{background:var(--surface-2)}
.navitem[aria-current="true"]{background:var(--accent-soft); color:var(--accent-ink); font-weight:600; box-shadow:inset 2px 0 0 var(--accent)}
.navitem .badge{margin-left:auto; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:9px}
:root[data-theme="dark"] .navitem .badge{color:#0e1620}
.navsec{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); padding:14px 9px 5px; font-weight:600}
.railfoot{margin-top:auto; padding:10px 9px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted)}

.main{min-width:0; display:flex; flex-direction:column}
.cmdbar{display:flex; align-items:center; gap:12px; padding:11px 22px; border-bottom:1px solid var(--line)}
.cmdbar h1{font-size:16px}
.crumb{color:var(--muted); font-size:12.5px}
.spacer{flex:1}
.search{display:flex; align-items:center; gap:7px; border:1px solid var(--line-strong); border-radius:var(--r); padding:5px 9px; background:var(--surface); color:var(--muted); font-size:12.5px; min-width:210px}
.userchip{display:flex; align-items:center; gap:8px; font-size:12.5px}
.avatar{width:27px; height:27px; border-radius:50%; background:var(--accent-ink); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; flex:none}
:root[data-theme="dark"] .avatar{color:#0e1620}
.userchip .role{color:var(--muted); font-size:11px; display:block; margin-top:-3px}
.canvas{padding:20px 22px 40px}

.btn{border:1px solid var(--line-strong); background:var(--elevated); color:var(--ink); padding:6px 13px; border-radius:var(--r); font-size:12.5px; font-weight:600}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{filter:brightness(1.1); color:#fff}
.btn.ok{background:var(--ok); border-color:var(--ok); color:#fff}
.btn.ok:hover{filter:brightness(1.08); color:#fff}
.btn.danger{border-color:var(--crit-line); color:var(--crit); background:var(--crit-bg)}
.btn.danger:hover{background:var(--crit); color:#fff; border-color:var(--crit)}
.btn.ghost{background:none; border-color:transparent; color:var(--accent)}
.btn.lg{padding:9px 20px; font-size:13.5px}
:root[data-theme="dark"] .btn.primary,:root[data-theme="dark"] .btn.ok{color:#0e1620}

.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:12px; font-size:11.5px; font-weight:600; border:1px solid transparent; white-space:nowrap}
.pill.blue{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-line)}
.pill.green{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.pill.amber{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line)}
.pill.red{background:var(--crit-bg); color:var(--crit); border-color:var(--crit-line)}
.pill.grey{background:var(--surface); color:var(--muted); border-color:var(--line)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px}
.card{border:1px solid var(--line); border-radius:var(--r); background:var(--elevated); padding:14px 15px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:3px}
.card .klabel{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600}
.card .kfig{font-family:var(--font-display); font-size:27px; font-weight:600; letter-spacing:-.02em; line-height:1.18; font-variant-numeric:tabular-nums}
.card .kfig .ccy{font-size:14px; color:var(--muted); margin-right:3px}
.card .ksub{font-size:12px; color:var(--muted)}
.card.wait{border-color:var(--accent-line); background:var(--accent-soft)}
.card.wait .kfig{color:var(--accent-ink)}

.sechead{display:flex; align-items:baseline; gap:10px; margin:24px 0 10px}
.sechead h2{font-size:14.5px}
.sechead .count{font-size:12px; color:var(--muted)}
.sechead .rule{flex:1; height:1px; background:var(--line)}

/* queue */
.queue{display:flex; flex-direction:column; gap:8px}
.qrow{border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r); background:var(--elevated); box-shadow:var(--shadow); text-align:left; width:100%; padding:12px 14px; display:grid; gap:8px; color:inherit}
.qrow:hover{border-color:var(--accent-line); box-shadow:var(--shadow-lg)}
.qrow.done{border-left-color:var(--ok)}
.qrow.back{border-left-color:var(--warn)}
.qrow.draft{border-left-color:var(--line-strong)}
.qtop{display:grid; grid-template-columns:1fr auto auto auto; gap:14px; align-items:center}
.qco .cname{font-family:var(--font-display); font-weight:600; font-size:14px; display:block}
.qco .cmeta{font-size:12px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; margin-top:1px}
.qamt{text-align:right; font-variant-numeric:tabular-nums}
.qamt b{font-family:var(--font-display); font-size:17px; font-weight:600}
.qamt .sub{display:block; font-size:11.5px; color:var(--muted)}
.qbottom{display:flex; flex-wrap:wrap; gap:0 18px; font-size:11.5px; color:var(--muted); border-top:1px dashed var(--line); padding-top:7px}
.qbottom b{color:var(--ink-2); font-weight:600}
.returnnote{border-top:1px dashed var(--line); background:var(--warn-bg); margin:6px -14px -12px; padding:10px 14px; font-size:12.5px; border-radius:0 0 2px 2px}
.returnnote b{color:var(--warn)}

/* panels */
.panel{border:1px solid var(--line); border-radius:var(--r); background:var(--elevated); box-shadow:var(--shadow); overflow:hidden}
.phead{display:flex; align-items:center; gap:9px; padding:11px 15px; border-bottom:1px solid var(--line); background:var(--surface)}
.phead h3{font-size:13px}
.phead .pcount{font-size:11.5px; color:var(--muted)}
.pbody{padding:14px 15px}

.rvhead{border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--r); background:var(--elevated); box-shadow:var(--shadow); padding:16px 18px; margin-bottom:14px}
.rvtop{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap}
.rvtop h2{font-size:19px}
.rvtop .sub{font-size:12.5px; color:var(--muted); margin-top:3px; display:flex; gap:10px; flex-wrap:wrap}
.rvtotal{margin-left:auto; text-align:right}
.rvtotal .t{font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.rvtotal .t .ccy{font-size:15px; color:var(--muted); margin-right:4px}
.rvtotal .s{font-size:12px; color:var(--muted)}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); margin-top:15px; overflow:hidden}
.fact{background:var(--elevated); padding:9px 12px}
.fact dt{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600}
.fact dd{margin:2px 0 0; font-size:13px; font-variant-numeric:tabular-nums}

.grid2{display:grid; grid-template-columns:1fr 340px; gap:14px; align-items:start}

/* tables */
.tbwrap{overflow-x:auto}
table.t{width:100%; border-collapse:collapse; font-size:13px; min-width:640px}
table.t th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; padding:8px 12px; border-bottom:1px solid var(--line-strong); background:var(--surface); white-space:nowrap}
table.t td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
table.t tr:last-child td{border-bottom:none}
table.t tr.sel td{background:var(--accent-soft)}
table.t tbody tr:hover td{background:var(--surface)}
table.t tfoot td{padding:11px 12px; border-top:1px solid var(--line-strong); font-family:var(--font-display); font-weight:600; font-size:15px; background:var(--surface)}
.filechip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:var(--surface); border-radius:3px; padding:3px 8px; font-size:11.5px; color:var(--ink-2); margin:0 3px 3px 0; cursor:pointer}
.filechip:hover{border-color:var(--accent); color:var(--accent)}
.filechip.add{border-style:dashed; color:var(--accent); border-color:var(--accent-line); background:none}
.filechip.on{background:var(--accent); border-color:var(--accent); color:#fff}
:root[data-theme="dark"] .filechip.on{color:#0e1620}

/* document preview */
.docview{position:sticky; top:52px}
.page{background:#fff; color:#1a1a1a; border:1px solid var(--line-strong); border-radius:2px; padding:20px 22px; font-size:11px; line-height:1.55; box-shadow:var(--shadow); min-height:340px}
.page .ph{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1.5px solid #1a1a1a; padding-bottom:9px; margin-bottom:12px}
.page .co{font-family:var(--font-display); font-size:14px; font-weight:600}
.page .co small{display:block; font-weight:400; font-size:9.5px; color:#666; margin-top:2px}
.page .ti{font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:.04em}
.page dl{display:grid; grid-template-columns:auto 1fr; gap:2px 12px; margin:0 0 12px}
.page dt{color:#666}
.page dd{margin:0}
.page table{width:100%; border-collapse:collapse; font-size:10.5px; margin-bottom:10px}
.page table th{text-align:left; border-bottom:1px solid #1a1a1a; padding:5px 4px; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em}
.page table td{padding:5px 4px; border-bottom:1px solid #e0e0e0}
.page .tot{display:flex; justify-content:space-between; border-top:1.5px solid #1a1a1a; padding-top:7px; font-weight:700; font-size:12px}
.page .foot{margin-top:14px; padding-top:9px; border-top:1px solid #e0e0e0; color:#666; font-size:9.5px}
.viewbar{display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line); background:var(--surface); font-size:12px}
.viewbar .fn{font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* approve bar */
.approvebar{position:sticky; bottom:0; margin-top:16px; border:1px solid var(--line); border-top:2px solid var(--ok); background:var(--elevated); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:13px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; z-index:20}
.approvebar .sig{font-size:11.5px; color:var(--muted); max-width:330px; line-height:1.45}
.approvebar .acts{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
textarea.cmt{flex:1; min-width:200px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); color:var(--ink); font-family:inherit; font-size:12.5px; padding:7px 9px; resize:vertical; min-height:38px}
.reco-input{width:100%; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); color:var(--ink); font-family:inherit; font-size:13px; padding:9px 11px; min-height:64px; resize:vertical; margin-top:8px}

/* form */
.formrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px; margin-bottom:14px; max-width:900px}
.field{display:flex; flex-direction:column; gap:4px}
.field label{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600}
.field .val{border:1px solid var(--line-strong); border-radius:var(--r); background:var(--elevated); padding:7px 10px; font-size:13px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.field .val.locked{background:var(--surface); color:var(--ink-2)}
.field .val .caret{color:var(--muted); font-size:9px}
.cell{display:block; border:1px solid transparent; border-radius:3px; padding:3px 6px; margin:-3px -6px}
tr:hover .cell{border-color:var(--line); background:var(--surface)}
.cell.empty{color:var(--muted)}
.cell.typing{border-color:var(--accent); background:var(--elevated)}
.cursor{display:inline-block; width:1px; height:13px; background:var(--accent); vertical-align:-2px; margin-left:1px; animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}
.rmv{color:var(--muted); font-size:15px; padding:2px 4px}
tr:hover .rmv{color:var(--crit)}
.addline{display:flex; align-items:center; gap:11px; padding:11px 15px; border-top:1px solid var(--line); background:var(--surface); flex-wrap:wrap}
.addline span{font-size:12px; color:var(--muted); max-width:60ch}

.hist{display:flex; flex-direction:column; gap:9px; font-size:12.5px}
.hist .hr b{font-weight:600}
.note{border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r); background:var(--surface); padding:12px 15px; margin-bottom:14px}
.note .nh{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin-bottom:5px}
.note blockquote{margin:0; font-size:13.5px; line-height:1.6; max-width:74ch}
.note .by{font-size:11.5px; color:var(--muted); margin-top:7px}

.toast{position:fixed; right:20px; bottom:20px; z-index:200; background:var(--ok); color:#fff; border-radius:var(--r); padding:12px 16px; box-shadow:var(--shadow-lg); font-size:13px; font-weight:600; display:flex; align-items:center; gap:9px; transform:translateY(14px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease}
:root[data-theme="dark"] .toast{color:#0d1f16}
.toast.show{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* multi-currency + multi-attachment */
.ccy{font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--muted)}
td.ccy-cell{white-space:nowrap; color:var(--ink-2)}
.totstack{display:flex; flex-direction:column; gap:3px; align-items:flex-end}
.totstack .tl{display:flex; gap:8px; align-items:baseline; font-variant-numeric:tabular-nums}
.totstack .tl .c{font-family:var(--font-mono); font-size:12px; color:var(--muted); font-weight:700}
.totstack .tl .v{font-family:var(--font-display); font-weight:600}
.totstack.big .tl .v{font-size:26px; letter-spacing:-.02em; line-height:1.15}
.totstack.big .tl .c{font-size:14px}
.totstack.row .tl .v{font-size:16px}
table.t tfoot tr.sub td{font-size:13px; padding:7px 12px; border-top:none; background:var(--surface)}
table.t tfoot tr.sub:first-child td{border-top:1px solid var(--line-strong)}
.curlist{display:flex; flex-direction:column; gap:3px; margin-top:4px}
.curlist .cr{display:flex; justify-content:space-between; gap:12px; font-size:13px; font-variant-numeric:tabular-nums; border-bottom:1px dashed var(--line); padding-bottom:3px}
.curlist .cr:last-child{border-bottom:none}
.curlist .cr span{font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--muted)}
.curlist .cr b{font-weight:600}
.files{display:flex; flex-wrap:wrap; gap:3px}
.filecount{font-size:11px; color:var(--muted); white-space:nowrap; margin-left:2px; align-self:center}

/* ticking lines off against the bank screen */
.acct{font-family:var(--font-mono); font-size:10.5px; color:var(--muted); display:block; margin-top:2px}
.tick{width:18px; height:18px; border:1.5px solid var(--line-strong); border-radius:4px; background:var(--elevated); display:grid; place-items:center; flex:none; cursor:pointer}
.tick svg{display:none}
.tick.on{background:var(--ok); border-color:var(--ok)}
.tick.on svg{display:block}
table.t tr.matched td{background:var(--ok-bg)}
table.t tr.matched td:first-child{box-shadow:inset 2px 0 0 var(--ok)}
table.t tr.matched.sel td{background:var(--accent-soft)}
.prog{display:flex; align-items:center; gap:10px}
.progbar{flex:1; height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden}
.progbar i{display:block; height:100%; background:var(--ok); transition:width .18s ease}
@media (prefers-reduced-motion:reduce){.progbar i{transition:none}}
.prog .pl{font-size:12px; font-weight:600; white-space:nowrap}
.confirmrow{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; padding:10px 12px; border:1px solid var(--warn-line); background:var(--warn-bg); border-radius:var(--r); font-size:12.5px; margin-bottom:11px}
.cmp{border:1px solid var(--line); border-radius:var(--r); padding:9px 13px; background:var(--surface); min-width:240px; text-align:left}
.cmp .lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; margin-bottom:5px}
.cmp .cr{display:flex; justify-content:space-between; gap:12px; font-size:12.5px}
.cmp .cr span{color:var(--muted)}
.cmp .cr b{font-variant-numeric:tabular-nums}

.screen{display:none}
.screen.active{display:block}
@media (max-width:1080px){ .shell{grid-template-columns:1fr} .rail{display:none} .grid2{grid-template-columns:1fr} .cards{grid-template-columns:1fr} }
@media (max-width:640px){ .qtop{grid-template-columns:1fr; gap:9px} .canvas{padding:14px} }
/* a line held back from an approval */
table.t tr.held td{background:var(--warn-bg); color:var(--muted)}
table.t tr.held td:first-child{box-shadow:inset 2px 0 0 var(--warn)}
table.t tr.held b{color:var(--ink-2)}

/* ---------- setup: cards you read, forms you open ---------- */
.setupgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:12px}
.scard{border:1px solid var(--line); border-radius:var(--r); background:var(--elevated);
  box-shadow:var(--shadow); overflow:hidden}
.scard.off{opacity:.6}
.scard > .top{display:flex; align-items:flex-start; gap:10px; padding:13px 15px 11px}
.scard .badgecode{font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:#fff;
  background:var(--accent); border-radius:3px; padding:2px 6px; flex:none; margin-top:1px}
:root[data-theme="dark"] .scard .badgecode{color:#0e1620}
.scard .who{flex:1; min-width:0}
.scard .who b{font-family:var(--font-display); font-size:14px; display:block; line-height:1.3}
.scard .who span{font-size:12px; color:var(--muted); display:block; margin-top:1px}
.scard dl{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:0;
  padding:0 15px 12px; font-size:12.5px}
.scard dt{color:var(--muted)}
.scard dd{margin:0}
.scard .foot{display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  padding:10px 15px; border-top:1px solid var(--line); background:var(--surface)}
.scard .foot .spacer{flex:1}

/* the disclosure that turns a card into a form */
details.edit{border-top:1px solid var(--line)}
details.edit > summary{list-style:none; cursor:pointer; padding:9px 15px; font-size:12.5px;
  font-weight:600; color:var(--accent); background:var(--surface); user-select:none}
details.edit > summary::-webkit-details-marker{display:none}
details.edit > summary::before{content:"Edit  \25be"; }
details.edit[open] > summary::before{content:"Close  \25b4"; }
details.edit[open] > summary{border-bottom:1px solid var(--line)}
details.edit .body{padding:13px 15px; display:grid; gap:10px}
details.edit .row{display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:center}
details.edit .row > label{font-size:11.5px; color:var(--muted); font-weight:600}
details.edit .row input, details.edit .row select{width:100%}
details.edit .actions{display:flex; gap:7px; justify-content:flex-end; padding-top:2px}

/* the "add" card */
.scard.add{border-style:dashed; box-shadow:none; background:none}
.scard.add > summary{color:var(--accent); font-weight:600; padding:16px; text-align:center;
  cursor:pointer; list-style:none; font-size:13px}
.scard.add > summary::-webkit-details-marker{display:none}

.subnote{font-size:12px; color:var(--muted); max-width:74ch; margin:-2px 0 14px}
/* your own password (the only form on its own page after sign-in) */
.pwform{display:grid; gap:0; max-width:340px}
.pwform label{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:600; margin:14px 0 4px}
.pwform input{width:100%; border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:14px; padding:9px 11px}
.hint{font-size:11.5px; color:var(--muted); line-height:1.45; margin-top:5px}
.formerr{border:1px solid var(--crit-line); background:var(--crit-bg); color:var(--crit);
  border-radius:var(--r); padding:10px 12px; font-size:12.5px; margin-top:12px}

/* -------------------------------------------------------------- dialogs --
   Returning or rejecting is a decision somebody reads and acts on, so it gets
   a screen of its own rather than a button beside a text box. */
dialog.modal{width:min(520px,calc(100vw - 32px)); padding:0; border:1px solid var(--line-strong);
  border-radius:7px; background:var(--elevated); color:var(--ink); box-shadow:var(--shadow-lg);
  /* On a short laptop screen the buttons must not be the part that scrolls
     away: cap the height, let the middle scroll, keep header and footer put. */
  max-height:calc(100vh - 40px); overflow:hidden}
dialog.modal > form{display:flex; flex-direction:column; max-height:calc(100vh - 42px)}
dialog.modal header, dialog.modal footer{flex:none}
dialog.modal .mbody{overflow-y:auto; min-height:0}
dialog.modal::backdrop{background:rgba(9,14,20,.55); backdrop-filter:blur(2px)}
dialog.modal header{padding:16px 20px 13px; border-bottom:1px solid var(--line); background:var(--surface)}
dialog.modal header h2{font-size:16px; margin:0}
dialog.modal header p{margin:4px 0 0; font-size:12px; color:var(--muted)}
dialog.modal.danger header{background:var(--crit-bg); border-bottom-color:var(--crit-line)}
dialog.modal.danger header h2{color:var(--crit)}
dialog.modal .mbody{padding:16px 20px}
dialog.modal .mlede{margin:0 0 14px; font-size:13.5px; line-height:1.55; max-width:56ch}
dialog.modal .malt{margin:0 0 14px; padding:8px 11px; border:1px dashed var(--line-strong);
  border-radius:var(--r); font-size:12px; color:var(--muted)}
dialog.modal label{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:600; margin-bottom:5px}
dialog.modal textarea{width:100%; border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:13px;
  padding:9px 11px; resize:vertical}
dialog.modal .mhint{font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.45}
dialog.modal footer{display:flex; justify-content:flex-end; gap:9px; padding:13px 20px;
  border-top:1px solid var(--line); background:var(--surface)}
/* pointer-events:none rather than a hover override - the confirm button is
   .primary in one dialog and .danger in the other, and each has its own hover */
dialog.modal footer button[disabled]{opacity:.45; cursor:not-allowed; pointer-events:none}