/* Boxman Finance Ops — layout and palette follow the v2 design; tokenised so
   dark mode works through variables rather than a second stylesheet. */
:root{
  --nav:#1c2a3f; --nav2:#16212f; --nav-line:#2a3b53; --nav-ink:#c3ccd8; --nav-dim:#63758f;
  --bg:#f3f5f9; --panel:#fff; --well:#e9eef5; --line:#d9dfe8; --line2:#b4c0d0;
  --ink:#18202c; --muted:#4d5a6b; --faint:#6e7b8c;
  --accent:#e2571f; --accent2:#c2410c;
  --crit:#b3261e; --warn:#8f5500; --ok:#12704f; --info:#2a52c9;
  --crit-bg:#fbe3e2; --warn-bg:#fcefd9; --ok-bg:#dcefe5; --info-bg:#e0e8fb;
  --sans:Archivo,ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --nav:#0b131c; --nav2:#080e15; --nav-line:#1d2a3a;
  --bg:#0e141a; --panel:#161e26; --well:#1b242e; --line:#27323d; --line2:#38454f;
  --ink:#e6ecf2; --muted:#94a3b1; --faint:#6b7987;
  --accent:#ff6242; --accent2:#ff7a5c;
  --crit:#f0736a; --warn:#d99a3c; --ok:#4fbf92; --info:#7aa2f7;
  --crit-bg:#341a18; --warn-bg:#2e2415; --ok-bg:#12291f; --info-bg:#18213a;
}}
:root[data-theme="dark"]{
  --nav:#0b131c; --nav2:#080e15; --nav-line:#1d2a3a;
  --bg:#0e141a; --panel:#161e26; --well:#1b242e; --line:#27323d; --line2:#38454f;
  --ink:#e6ecf2; --muted:#94a3b1; --faint:#6b7987;
  --accent:#ff6242; --accent2:#ff7a5c;
  --crit:#f0736a; --warn:#d99a3c; --ok:#4fbf92; --info:#7aa2f7;
  --crit-bg:#341a18; --warn-bg:#2e2415; --ok-bg:#12291f; --info-bg:#18213a;
}
*{box-sizing:border-box}

/* ---- the opener ----
   The app shell is hidden until boot() knows the answer. Without this the
   nav, the toolbar and an empty Audit Queue paint first and are then thrown
   away, which reads as a bug even when it is not. */
.app{opacity:0;visibility:hidden}
:root[data-ready="app"] .app{opacity:1;visibility:visible;transition:opacity .28s ease}
#splash{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;
}
:root[data-ready="app"] #splash{opacity:0;pointer-events:none;transition:opacity .3s ease}
/* The mark sits low while there is nothing beneath it, then rises as the card
   arrives. Transform only — the layout never moves, so nothing reflows. */
#splash .mark{transform:translateY(116px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#splash .below{opacity:0;transition:opacity .4s ease .12s}
:root[data-ready="signin"] #splash .mark{transform:translateY(0)}
:root[data-ready="signin"] #splash .below{opacity:1}
@media (prefers-reduced-motion:reduce){
  #splash .mark{transition:none}#splash .below{transition:none}
  .app,:root[data-ready="app"] #splash{transition:none}
}
button.themetoggle{
  margin-top:14px;border:1px solid var(--line);background:transparent;
  color:var(--faint);border-radius:999px;padding:5px 13px;cursor:pointer;
  font:500 10.5px/1 var(--mono);letter-spacing:.04em;
}
button.themetoggle:hover{border-color:var(--accent);color:var(--accent)}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 13px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
.app{display:flex;height:100vh;min-height:700px;overflow:hidden}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--info);outline-offset:2px}

/* ---- nav ---- */
nav{width:212px;flex:0 0 auto;display:flex;flex-direction:column;background:var(--nav);color:var(--nav-ink)}
.brand{padding:14px 14px 16px}
.brand img{display:block;width:132px;height:auto}
.brand i{display:block;font:600 8.5px/1.5 var(--mono);letter-spacing:.14em;color:var(--nav-dim);font-style:normal;margin-top:6px}
.navsec{font:600 8.5px/1 var(--mono);letter-spacing:.14em;color:var(--nav-dim);padding:4px 14px 8px}
nav button.nv{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;
  border:0 0 0 3px solid transparent;border-left:3px solid transparent;color:var(--nav-ink);
  font:500 12.5px var(--sans);padding:7px 14px;cursor:pointer}
nav button.nv:hover{background:rgba(255,255,255,.05);color:#fff}
nav button.nv[aria-current="page"]{background:var(--nav2);border-left-color:var(--accent);color:#fff}
nav button.nv .n{margin-left:auto;font:500 11px var(--mono);color:var(--nav-dim)}
nav button.nv[aria-current="page"] .n{color:var(--accent)}
nav button.nv[disabled]{opacity:.42;cursor:default}
.navfill{flex:1}
.rolebox{margin:0 12px 12px;padding:10px 11px;background:var(--nav2);border:1px solid var(--nav-line);border-radius:5px}
.rolebox .k{font:600 8.5px var(--mono);letter-spacing:.13em;color:var(--nav-dim);margin-bottom:7px}
.roles{display:flex;gap:4px}
.roles button{flex:1;font:600 10px var(--mono);padding:4px 0;border-radius:3px;cursor:pointer;
  background:transparent;border:1px solid var(--nav-line);color:var(--nav-dim)}
.roles button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.rolenote{font:10.5px var(--sans);color:var(--nav-dim);margin-top:7px;line-height:1.4}

/* ---- header ---- */
.col{flex:1;min-width:0;display:flex;flex-direction:column}
header.top{flex:0 0 auto;display:flex;align-items:center;gap:12px;height:54px;padding:0 18px;
  background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:20}
header.top h1{flex:none;margin:0;font:640 16px var(--sans);letter-spacing:-.01em}
.asof{font:10.5px var(--mono);color:var(--muted);background:var(--well);padding:4px 8px;border-radius:3px;
  min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.top .act{flex:none;height:30px;display:inline-flex;align-items:center;justify-content:center}
.grow{margin-left:auto}
.pill{font:600 9.5px var(--mono);letter-spacing:.06em;padding:4px 8px;border-radius:3px}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
button.act{font:550 12px var(--sans);color:var(--ink);background:var(--panel);
  border:1px solid var(--line2);border-radius:4px;padding:6px 11px;cursor:pointer}
button.act:hover{border-color:var(--accent);color:var(--accent)}
.content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* ---- filter bar ---- */
.filters{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px 18px;
  background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.seg{display:flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden}
.seg button{background:var(--panel);border:0;border-right:1px solid var(--line2);cursor:pointer;
  font:550 11.5px var(--sans);color:var(--muted);padding:5px 11px;display:flex;gap:5px;align-items:center}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--well);color:var(--ink)}
.seg button .c{font:600 10.5px var(--mono);color:var(--faint)}
.prog{margin-left:auto;display:flex;align-items:center;gap:9px;font:11px var(--sans);color:var(--muted)}
.progbar{width:88px;height:5px;background:var(--well);border-radius:3px;overflow:hidden}
.progbar i{display:block;height:100%;background:var(--accent)}
.keys{font:10.5px var(--mono);color:var(--faint)}

/* ==== Audit Queue, simplified (30 Sep) ==== */
/* tabs: where you are */
.qtabs{display:flex;gap:4px;align-self:stretch}
.qtabs button{position:relative;display:flex;align-items:center;gap:6px;padding:8px 10px;margin-bottom:-1px;background:none;border:0;
  border-bottom:2px solid transparent;border-radius:6px 6px 0 0;cursor:pointer;font:600 13px var(--sans);color:var(--muted);
  transition:color .15s,background .15s}
.qtabs button:hover{color:var(--ink);background:var(--well)}
.qtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.qtabs button .c{min-width:18px;padding:0 6px;border-radius:999px;background:var(--well);font:600 10.5px/17px var(--mono);color:var(--muted);text-align:center}
.qtabs button[aria-selected="true"] .c{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
/* two rows: tabs + progress, then the cuts */
.filters:has(.frow1){flex-direction:column;align-items:stretch;gap:0;padding:0 18px}
.frow1{display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid var(--line)}
.frow1 .prog{padding-bottom:9px}
.frow2{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 0}
.frow2 .grow{flex:1 1 auto}
.riskchip{font:11.5px var(--sans);color:var(--muted);white-space:nowrap}
.riskchip b{font:650 12.5px var(--mono);color:var(--ink)}
/* severity dots, used in the filter and before each job */
i.sd{display:inline-block;flex:none;width:8px;height:8px;margin-right:8px;border-radius:50%;vertical-align:1px;background:var(--line2)}
i.sd.crit{background:var(--crit);box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 18%,transparent)}
i.sd.warn{background:var(--warn)}
i.sd.ok{background:var(--ok)}
i.sd.na{background:transparent;border:1.5px dashed var(--faint);width:7px;height:7px}
.seg button i.sd{margin-right:2px}
/* customers: whole names, cut by the column, full on hover */
td.cust{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the amber job-date legend in the header */
th .thint{display:inline-block;width:7px;height:7px;margin-left:5px;border-radius:50%;background:var(--warn);vertical-align:0}
/* state only when it says something */
.stpill{display:inline-block;padding:2px 8px;border-radius:999px;font:600 10.5px var(--sans);white-space:nowrap;background:var(--well);color:var(--muted)}
.stpill.st-cleared{background:var(--ok-bg);color:var(--ok)}
.stpill.st-errors-raised{background:var(--crit-bg);color:var(--crit)}
.stpill.st-ready-to-clear{background:var(--info-bg);color:var(--info)}
.stpill.st-signed,.stpill.st-in-review{background:var(--info-bg);color:var(--info)}
.stpill.st-reopened{background:var(--warn-bg);color:var(--warn)}
/* totals under the queue */
tr.qtot td{position:sticky;bottom:0;background:var(--well);border-top:1px solid var(--line2);font-weight:600;color:var(--ink);padding-top:9px;padding-bottom:9px}
tr.qtot td:first-child{font:600 11px var(--sans);color:var(--muted)}
/* density: compact rows */
body.dense .listwrap td,body.dense .paytbl td,body.dense .acttbl td{padding-top:4px!important;padding-bottom:4px!important}
body.dense .listwrap td{font-size:11.5px}

/* ---- split ---- */
.split{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.listwrap,.detwrap{min-height:0;overflow:auto}
.listwrap{border-right:1px solid var(--line);background:var(--panel)}
.detwrap{background:var(--bg);padding:12px 14px 40px}
.full{flex:1;min-height:0;overflow:auto;padding:14px 18px 40px}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;font-size:12px}
th{position:sticky;top:0;z-index:2;background:var(--well);text-align:left;white-space:nowrap;
  font:600 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:8px 9px;border-bottom:1px solid var(--line2)}
th.r,td.r{text-align:right}
td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.row{cursor:pointer}
tr.row:hover{background:var(--well)}
tr.row[aria-selected="true"]{background:var(--warn-bg)}
tr.row[aria-selected="true"] td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.sev{font:11px var(--mono)}
.dim{color:var(--muted)}
.sub{color:var(--muted);font-size:10.5px}

/* ---- detail blocks ---- */
.dhead{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.dhead h2{margin:0;font:640 17px var(--mono);letter-spacing:-.02em}
.dhead .meta{font:11.5px var(--sans);color:var(--muted);margin-top:3px}
.blk{background:var(--panel);border:1px solid var(--line);border-radius:5px;margin-bottom:9px;overflow:hidden}
.blk>header{display:flex;align-items:center;gap:8px;padding:7px 11px;background:var(--well);border-bottom:1px solid var(--line)}
.blk>header .no{font:600 9px var(--mono);color:var(--faint)}
.blk>header h3{margin:0;font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.blk>header .tag{margin-left:auto}
.blk .body{padding:10px 11px}
.tag{font:600 9px var(--mono);letter-spacing:.05em;padding:3px 6px;border-radius:3px;white-space:nowrap}
.t-crit{background:var(--crit-bg);color:var(--crit)}
.t-warn{background:var(--warn-bg);color:var(--warn)}
.t-ok{background:var(--ok-bg);color:var(--ok)}
.t-info{background:var(--info-bg);color:var(--info)}
.t-mute{background:var(--well);color:var(--muted)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.trio .k{font:600 8.5px var(--mono);letter-spacing:.1em;color:var(--faint)}
.trio .v{font:600 17px var(--mono);font-variant-numeric:tabular-nums;margin-top:3px;letter-spacing:-.02em}
.note{font:11px var(--sans);color:var(--muted);margin-top:8px}
.cmp{width:100%;font-size:11.5px}
.cmp th{position:static;background:none;border:0;padding:0 0 5px;font-size:8.5px}
.cmp td{border:0;padding:3px 0;font-family:var(--mono);font-variant-numeric:tabular-nums}
.billrow{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px dotted var(--line)}
.billrow:last-child{border-bottom:0}
.billrow .amt{margin-left:auto;font:500 12px var(--mono);font-variant-numeric:tabular-nums}
.chk{display:flex;gap:8px;padding:5px 0;font-size:11.5px}
.chk .m{font:700 11px var(--mono);min-width:13px}
.varbox{margin-top:9px;padding:8px 10px;border-radius:4px;font-size:11px;display:flex;gap:9px;align-items:flex-start}
.signrow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px dotted var(--line)}
.signrow:last-of-type{border-bottom:0}
.box{width:15px;height:15px;border-radius:3px;border:1.5px solid var(--line2);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font:700 10px var(--mono);color:#fff}
.signrow .r{font:550 12px var(--sans)}
.signrow .mt{font:10.5px var(--sans);color:var(--faint)}
.signrow button{margin-left:auto}
button.sign{font:600 11px var(--sans);border-radius:4px;padding:5px 11px;border:1px solid var(--line2);
  background:var(--well);color:var(--faint);cursor:default}
button.sign.on{background:var(--accent);border-color:var(--accent2);color:#fff;cursor:pointer}
button.sign.done{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.acts{display:flex;gap:8px;align-items:center;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
button.clear{font:600 12px var(--sans);border-radius:4px;padding:7px 15px;border:1px solid var(--line2);
  background:var(--well);color:var(--faint);cursor:not-allowed}
button.clear.on{background:var(--accent);border-color:var(--accent2);color:#fff;cursor:pointer}
button.raise{font:600 12px var(--sans);border-radius:4px;padding:7px 13px;border:1px solid var(--crit);
  background:var(--panel);color:var(--crit);cursor:pointer}
.acts .n{margin-left:auto;font:10.5px var(--sans);color:var(--faint);text-align:right;max-width:210px}
.links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
a.lnk{font:550 11px var(--sans);color:var(--ink);text-decoration:none;background:var(--panel);
  border:1px solid var(--line2);border-radius:3px;padding:4px 8px}
a.lnk:hover{border-color:var(--accent);color:var(--accent)}

/* ---- tiles / bars for the other reports ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin-bottom:14px}
/* One tile style for every page, matching Vendor Payables. */
.tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0}
.tile .k{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tile .v{font:650 24px/1.15 var(--sans);font-variant-numeric:tabular-nums;margin-top:6px;letter-spacing:-.02em}
.tile .m{font:11.5px var(--sans);color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.crit .v{color:var(--crit)}.tile.ok .v{color:var(--ok)}.tile.warn .v{color:var(--warn)}
.bars{display:grid;gap:6px;padding:11px}
.bar{display:grid;grid-template-columns:158px 1fr 96px;gap:9px;align-items:center;font-size:11.5px}
.bar .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track{height:8px;background:var(--well);border-radius:2px;overflow:hidden}
.fill{height:100%;background:var(--accent);border-radius:2px}
.fill.c{background:var(--crit)}.fill.w{background:var(--warn)}
.bar .n{text-align:right;font:500 11px var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}

/* ---- states ---- */
.state{padding:52px 20px;text-align:center;color:var(--muted);font-size:12.5px}
.state b{display:block;font:600 13px var(--mono);color:var(--ink);margin-bottom:6px}
/* The action link in a bill/invoice row must never wrap under the tag beside
   it: two lines of "Open & check" overlapped the row below. */
.nw{white-space:nowrap}
.billtbl td,.billtbl th{vertical-align:top}
.billtbl .lnk{display:inline-block;padding:2px 6px;border:1px solid var(--line);
  border-radius:3px;line-height:1.5;text-decoration:none}
.billtbl .lnk:hover{border-color:var(--accent)}
.dsel{display:inline-flex;align-items:center;gap:6px;font:11px var(--mono);
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.dsel select{font:12px var(--mono);padding:4px 6px;min-width:112px}
.banner{background:var(--warn-bg);border:1px solid var(--warn);border-left-width:3px;border-radius:4px;
  padding:9px 12px;margin-bottom:12px;font-size:11.5px}
.banner b{color:var(--warn)}
.sk{background:linear-gradient(90deg,var(--well) 25%,var(--line) 37%,var(--well) 63%);
  background-size:400% 100%;animation:sh 1.3s ease infinite;border-radius:3px;height:10px;margin:8px 0}
@keyframes sh{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
@media (max-width:1000px){.split{grid-template-columns:1fr}.listwrap{border-right:0;border-bottom:1px solid var(--line);max-height:44vh}}

/* ---- identity, toasts, sign-in ---- */
/* The role is reported, not chosen: one chip where three buttons used to be. */
.rolechip{
  display:inline-block; padding:3px 9px; border-radius:999px;
  border:1px solid var(--nav-line); background:var(--nav2); color:#fff;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
}

/* A financial action must say plainly that it landed. */
.toast{
  position:fixed; left:0; right:0; margin:0 auto; width:max-content; bottom:24px; transform:translateY(14px);
  max-width:min(560px, calc(100vw - 32px));
  padding:11px 16px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-size:13px; line-height:1.4;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease;
  z-index:50;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.ok{ border-color:var(--ok); }
.toast.warn{ border-color:var(--warn); }
.toast.crit{ border-color:var(--crit); }
@media (prefers-reduced-motion: reduce){ .toast{ transition:none; } }

/* The sign-in screen. Deliberately the same furniture as the app's nav brand,
   so the first thing a person sees already looks like the product. */
.signin{
  max-width:460px; margin:12vh auto; padding:0 24px;
  font-family:var(--sans); color:var(--ink); text-align:center;
}
#splash .sub{max-width:330px}
/* One mark per theme. Which one shows follows the resolved theme, so it
   matches whatever palette the sign-in iframe was handed. */
.brandmark{ width:210px; height:auto; margin:0 auto 12px; display:none; }
.brandmark.light{ display:block; }
.brandmark.dark{ display:none; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brandmark.light{ display:none; }
  :root:not([data-theme="light"]) .brandmark.dark{ display:block; }
}
:root[data-theme="dark"] .brandmark.light{ display:none; }
:root[data-theme="dark"] .brandmark.dark{ display:block; }
:root[data-theme="light"] .brandmark.light{ display:block; }
:root[data-theme="light"] .brandmark.dark{ display:none; }
/* Applies to the opener as well as the .signin fallback — the tagline is the
   same object in both, and scoping it to one meant the other rendered as
   plain body text. */
.signin .tagline,#splash .tagline{
  font:600 8.5px/1.5 var(--mono); letter-spacing:.14em; color:var(--faint);
  text-transform:uppercase; margin:0 0 26px;
}
.signin p{ margin:0 0 8px; color:var(--muted); line-height:1.55; font-size:13px; }
.signin .sub{ font-size:11.5px; color:var(--faint); margin-top:18px; }
/* Catalyst injects its iframe in here. The height is its own; this only has to
   stop the box collapsing before it loads. */
/* Sized to the providers-only form, which is one button: the iframe's own
   content measures 166px, so this is that plus a little air. Too tight and
   Zoho's page grows a scrollbar and clips the button. */
/* One card, not two. Zoho draws its own `.signin_box` inside the iframe; that
   is flattened in the injected stylesheet so this is the only frame, rather
   than a box sitting slightly off-centre inside another box. */
.loginbox{
  width:340px; max-width:100%; height:158px; background:var(--panel);
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}
/* The SDK writes `height: 100%` as an INLINE style on the iframe, which beats
   an ordinary stylesheet rule — hence !important. Without it the frame stays
   at its default, Zoho's page grows a scrollbar and the button is clipped. */
.loginbox iframe{ width:100%!important; height:158px!important; border:0; display:block; }

/* ---- admin & rules ---- */
/* One row per setting: what it does and what it costs on the left, the control
   on the right. The impact line is the point of the screen — a tolerance with
   no stated consequence gets changed by whoever is annoyed by it that week. */
.setlist{padding:0}
.setrow{display:flex;gap:16px;align-items:flex-start;padding:11px 11px;border-bottom:1px dotted var(--line)}
.setrow:last-child{border-bottom:0}
.setmain{flex:1;min-width:0}
.setlbl{font:550 12.5px var(--sans);display:flex;align-items:center;gap:7px}
.sethelp{font:11.5px var(--sans);color:var(--muted);margin-top:3px;line-height:1.45}
.setimpact{font:11px var(--sans);color:var(--warn);margin-top:4px;line-height:1.45;
  border-left:2px solid var(--warn);padding-left:8px}
.setmeta{font:10.5px var(--mono);color:var(--faint);margin-top:6px}
.setedit{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:150px}
.setctl{display:flex;align-items:center;gap:6px}
.setctl .unit{font:10.5px var(--mono);color:var(--faint)}
.setbtns{display:flex;gap:5px}
.lockval{font:12px var(--mono);color:var(--muted);background:var(--well);
  border:1px solid var(--line);border-radius:3px;padding:4px 8px;max-width:220px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
input.ctl,select.ctl{font:12px var(--mono);color:var(--ink);background:var(--panel);
  border:1px solid var(--line2);border-radius:4px;padding:5px 8px;min-width:96px}
input.ctl:focus,select.ctl:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input.ctl:disabled,select.ctl:disabled{background:var(--well);color:var(--muted);cursor:not-allowed}
button.mini{font:600 11px var(--sans);border-radius:4px;padding:5px 10px;
  border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer}
button.mini:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
button.mini.on:not(:disabled){background:var(--accent);border-color:var(--accent2);color:#fff}
button.mini:disabled{background:var(--well);color:var(--faint);border-color:var(--line);cursor:default}
.addrole{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line)}
.addrole .ctl{min-width:200px}
.addrole .sub{flex:1;min-width:180px;text-align:right}
@media (max-width:820px){
  .setrow{flex-direction:column;gap:8px}
  .setedit{align-items:flex-start;width:100%}
}

/* ---- AI invoice intake ---- */
.drop{border:2px dashed var(--line2);border-radius:8px;background:var(--panel);
  padding:52px 20px;text-align:center;margin-bottom:14px;transition:border-color .12s,background .12s}
.drop.over{border-color:var(--accent);background:var(--well)}
.dropinner b{display:block;font:600 15px var(--sans);margin-bottom:8px}
.dropinner span{font-size:12.5px;color:var(--muted)}
.dropinner .sub{margin:12px auto 0}
.blk .chk .m{font:600 10px var(--mono);color:var(--accent);min-width:14px}
@media (prefers-reduced-motion:reduce){.drop{transition:none}}

/* ---- AI invoice intake: the v2 design's staged / consolidate / detail flow ---- */
.ipane{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.ihead{flex:none;display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;padding:12px 18px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.aibox{flex:none;display:flex;align-items:center;gap:11px;padding:9px 13px;
  background:var(--warn-bg);border:1px solid var(--line2);border-radius:4px}
.aimark{width:26px;height:26px;flex:none;border-radius:3px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font:600 10px/1 var(--mono)}
.aibox b{display:block;font:600 11.5px/1.2 var(--sans)}
.aibox i{display:block;font:400 10px/1.3 var(--mono);color:var(--muted);font-style:normal;margin-top:2px}
.istat{flex:1 1 128px;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.istat .k{font:600 8.5px/1 var(--mono);letter-spacing:.1em;color:var(--faint)}
.istat .v{font:600 20px/1 var(--mono);font-variant-numeric:tabular-nums;margin-top:5px;display:flex;align-items:baseline;gap:6px}
.istat .v span{font:400 10px/1.2 var(--sans);color:var(--muted)}
.istat .v.ok{color:var(--ok)}.istat .v.warn{color:var(--warn)}.istat .v.crit{color:var(--crit)}
button.runai{flex:0 0 auto;min-width:184px;min-height:44px;border:1px solid var(--accent2);background:var(--accent);color:#fff;
  cursor:pointer;border-radius:4px;padding:0 18px;font:600 12px/1 var(--sans)}
button.runai:disabled{background:var(--well);border-color:var(--line);color:var(--faint);cursor:default}
.idrop{flex:none;padding:12px 18px;background:var(--bg);border-bottom:1px solid var(--line)}
.dz{display:flex;align-items:center;gap:12px;cursor:pointer;padding:11px 14px;
  border:1.5px dashed var(--line2);border-radius:4px;background:var(--panel);position:relative}
.dz:hover,.dz.over{border-color:var(--accent);background:var(--well)}
.dzicon{width:30px;height:30px;flex:none;border-radius:3px;border:1px solid var(--line2);background:var(--panel);
  display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--sans);color:var(--accent)}
.dztext{flex:1;min-width:0}
.dztext b{display:block;font:600 11.5px/1.3 var(--sans)}
.dztext i{display:block;font:400 10px/1.4 var(--mono);color:var(--faint);font-style:normal;margin-top:2px}
.dzbtn{flex:none;border:1px solid var(--line2);background:var(--panel);border-radius:3px;padding:7px 12px;
  font:600 11px/1 var(--sans);color:var(--ink)}
.istaged{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:9px 18px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.istaged .k{font:600 8.5px/1 var(--mono);letter-spacing:.11em;color:var(--faint)}
.chip{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:3px;
  padding:4px 4px 4px 7px;background:var(--bg)}
.chip .mono{font-size:10px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip button{border:0;background:transparent;cursor:pointer;font:500 13px/1 var(--sans);color:var(--faint);padding:0 4px}
.chip button:hover{color:var(--crit)}
.kind{font:600 8px/1 var(--mono);letter-spacing:.06em;color:#fff;border-radius:2px;padding:3px 5px}
.k-inv{background:var(--info)}.k-frt{background:var(--ok)}.k-sur{background:var(--warn)}.k-fue{background:var(--crit)}
button.linkish{border:0;background:transparent;cursor:pointer;font:500 10.5px/1 var(--sans);
  color:var(--muted);text-decoration:underline}
.irun{flex:none;display:flex;align-items:center;gap:10px;padding:8px 18px;background:var(--nav);color:var(--nav-ink)}
.irun .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:bxpulse 1s infinite}
.irun .mono{font-size:10.5px}
.irun .track{flex:1;height:3px;background:var(--nav-line);border-radius:2px;overflow:hidden}
.irun .track i{display:block;height:3px;background:var(--accent);transition:width .35s}
@keyframes bxpulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.irun .dot{animation:none}.irun .track i{transition:none}}
.isplit{flex:1;min-height:0;display:flex;gap:12px;padding:12px 12px 12px 18px}
.ilist{flex:0 1 352px;min-width:206px;background:var(--panel);border:1px solid var(--line);border-radius:4px;
  display:flex;flex-direction:column;overflow:hidden}
.ilist>header{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--well);
  border-bottom:1px solid var(--line)}
.ilist>header .k{font:600 8.5px/1 var(--mono);letter-spacing:.11em;color:var(--faint)}
.ilist .scroll{flex:1;min-height:0;overflow-y:auto}
button.irow{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);
  border-left:3px solid transparent;cursor:pointer;padding:9px 12px;background:var(--panel);color:var(--ink)}
button.irow:hover{background:var(--well)}
button.irow.on{background:var(--warn-bg);border-left-color:var(--accent)}
.irow .l1{display:flex;align-items:baseline;gap:8px}
.irow .l1 .mono{font-size:11.5px}
.irow .amt{font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums}
.irow .l2{display:flex;align-items:center;gap:6px;margin-top:5px}
.irow .l2 .sub{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ifoot{flex:none;padding:10px 12px;border-top:1px solid var(--line);background:var(--bg);max-height:170px;overflow:auto}
.ifoot .k{font:600 8.5px/1 var(--mono);letter-spacing:.11em;color:var(--faint);margin-bottom:7px}
.urow{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:10.5px}
.urow .sub{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urow .amt{font:500 10.5px/1 var(--mono);font-variant-numeric:tabular-nums}
.idetail{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:4px;
  display:flex;flex-direction:column;overflow-y:auto}
.dhead2{flex:none;display:flex;align-items:baseline;gap:10px;padding:13px 16px 4px}
.dhead2 .awb{font:600 16px/1.1 var(--mono);letter-spacing:-.01em}
.dmeta{font:400 10.5px/1.5 var(--sans);color:var(--muted);padding:0 16px 11px;border-bottom:1px solid var(--line)}
.dcards{display:flex;flex-wrap:wrap;gap:8px;padding:11px 16px}
.dcard{flex:1 1 148px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:3px;background:var(--bg)}
.dcard.bad{border-color:var(--crit);background:var(--crit-bg)}
.dcard .row{display:flex;align-items:center;gap:6px}
.dcard .amt{font:600 15px/1.15 var(--mono);font-variant-numeric:tabular-nums;margin-top:6px}
.dcard .file{font:400 9.5px/1.3 var(--sans);color:var(--faint);margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtable{flex:1 0 auto;overflow-x:auto;border-top:1px solid var(--line)}
.dtable table{width:100%}
.dtable tfoot td{background:var(--well);border-top:1px solid var(--line2);border-bottom:0}
.dtable .total{font:600 16px/1 var(--mono);font-variant-numeric:tabular-nums}
.dtable tr.badrow td{background:var(--crit-bg)}
.dtable tr.noterow td{background:var(--crit-bg);padding-top:0;border-bottom:1px solid var(--line)}
.dacts{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:11px 16px;
  border-top:1px solid var(--line);background:var(--bg)}
.dacts .n{flex:1 1 200px;min-width:0;font:400 10px/1.35 var(--mono);color:var(--faint);text-align:right}
@media (max-width:1000px){.isplit{flex-direction:column}.ilist{flex:0 0 auto;max-height:40vh}}

/* ---- audit detail: the bill table and coverage panel ---- */
/* Eight and nine columns of real data will not fit a narrow detail pane at any
   font size. Scroll the TABLE rather than the pane, so the block headers and
   the sign-off stay put and only the wide thing moves. A visible edge fade
   says there is more to the right; a table that simply clips does not. */
.tblwrap{overflow-x:auto;overflow-y:hidden;max-width:100%;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tblwrap::-webkit-scrollbar{height:7px}
.tblwrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.tblwrap::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.tblwrap .billtbl{min-width:640px}
.billtbl{width:100%;font-size:11.5px}
.billtbl th{position:static;background:none;border:0;padding:0 6px 5px 0;font-size:8.5px;
  letter-spacing:.09em;color:var(--faint);text-transform:uppercase}
.billtbl td{border:0;border-bottom:1px dotted var(--line);padding:6px 6px 6px 0;vertical-align:middle}
.billtbl tr:last-child td{border-bottom:0}
.billtbl tr.flagrow td{border-bottom:0;padding-top:0;color:var(--crit)}
.trio .v .pctnote{font:500 11px var(--mono);color:var(--muted);margin-left:6px}
.cover{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:9px}
.cover .k{font:600 8.5px/1 var(--mono);letter-spacing:.1em;color:var(--faint);margin-bottom:6px}
.cover .tag{display:inline-block;margin:0 4px 4px 0}
@media (max-width:820px){.cover{grid-template-columns:1fr}}

/* ---- loading: elapsed and estimate ---- */
.loader{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin-bottom:12px}
.loader .lhead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;font-size:13px}
.loader .lnums{margin-left:auto;display:flex;gap:18px;color:var(--muted);font-size:12px}
.loader .lnums b{color:var(--ink);font-size:13px}
.loader .lbar{height:6px;background:var(--well);border-radius:3px;overflow:hidden;margin:10px 0 8px}
.loader .lbar i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .2s linear}
.loader .lsub{color:var(--muted);font-size:11.5px}
.loader .lsrc{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
@media (prefers-reduced-motion: reduce){ .loader .lbar i{ transition:none; } }

/* ---- dialogs ---- */
.modalwrap{position:fixed;inset:0;z-index:90;background:rgba(8,14,21,.55);display:flex;
  align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.modal{background:var(--panel);color:var(--ink);border:1px solid var(--line2);border-radius:8px;
  width:100%;max-width:520px;box-shadow:0 18px 50px rgba(0,0,0,.35);display:flex;flex-direction:column}
.modal.wide{max-width:760px}
.modal>header{display:flex;gap:12px;align-items:flex-start;padding:16px 18px 10px;border-bottom:1px solid var(--line)}
.modal>header h2{margin:0;font-size:16px}
.modal>header .sub{margin:4px 0 0;font-size:11.5px;line-height:1.45}
.modal .mx{margin-left:auto;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
.modal .mbody{padding:14px 18px;max-height:64vh;overflow:auto}
.modal>footer{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)}
.modal .merr{margin-right:auto;color:var(--crit);font-size:12px}
.mbtn{font:600 12.5px var(--sans);padding:7px 14px;border-radius:5px;border:1px solid var(--line2);
  background:var(--panel);color:var(--ink);cursor:pointer}
.mbtn.primary{background:var(--ok);border-color:var(--ok);color:#fff}
.mbtn.danger{background:var(--crit);border-color:var(--crit);color:#fff}
.mbtn:focus-visible,.chip:focus-visible,.mcheck input:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.msec{margin-bottom:14px}
.msec>.k,.mgrid .k{font:600 9.5px var(--mono);letter-spacing:.06em;color:var(--faint);margin-bottom:6px}
.mchecks{display:flex;flex-direction:column;gap:2px}
.mcheck{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:4px;cursor:pointer;font-size:12.5px}
.mcheck:hover{background:var(--well)}
.mcheck input{margin-top:2px}
.mcheck .m{width:12px;text-align:center}
.mcheck>span:nth-child(3){flex:1}
.mchips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 11.5px var(--sans);padding:5px 10px;border-radius:14px;border:1px solid var(--line2);
  background:var(--panel);color:var(--muted);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--crit-bg);border-color:var(--crit);color:var(--crit)}
.mlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.modal textarea{width:100%;font:13px/1.45 var(--sans);padding:8px 10px;border-radius:5px;
  border:1px solid var(--line2);background:var(--bg);color:var(--ink);resize:vertical}
.mcount{text-align:right;color:var(--faint);font-size:10.5px;margin-top:4px}
.mailpre{white-space:pre-wrap;font:12px/1.5 var(--mono);background:var(--well);border-radius:5px;
  padding:10px 12px;margin:0;max-height:220px;overflow:auto;color:var(--ink)}
.mgrid{display:grid;grid-template-columns:70px 1fr;gap:6px 10px;align-items:baseline;font-size:12.5px;margin-bottom:10px}
.mgrid .k{margin:0}
.mlist{margin:6px 0;padding-left:18px;font-size:12px}
.prewrap{white-space:pre-wrap;margin-top:4px;font-size:12px}
.banner.warnb{margin-bottom:12px}
a.tag{text-decoration:none}
@media (max-width:600px){ .modalwrap{padding:0} .modal{border-radius:0;min-height:100%} .loader .lnums{margin-left:0} }

/* ---- version ---- */
.verbtn{display:block;margin-top:10px;background:none;border:0;padding:0;cursor:pointer;
  font:500 10.5px var(--mono);color:var(--nav-dim);text-align:left}
.verbtn span{color:var(--nav-dim)}
.verbtn:hover{color:var(--nav-ink)}
.verbtn.mismatch,.verbtn.mismatch span{color:var(--warn)}

/* ---- vendor payables ---- */
.tiles.six{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.two>.blk{margin-bottom:12px}
.filters .sel,.filters .search{font:500 12px var(--sans);color:var(--ink);background:var(--panel);
  border:1px solid var(--line2);border-radius:5px;padding:6px 8px}
.filters .search{min-width:220px}
.matrix td,.matrix th{white-space:nowrap}
.matrix tr.tot td{border-top:1px solid var(--line2);font-weight:600}
.cellbtn{background:none;border:0;padding:2px 4px;border-radius:3px;font:inherit;color:var(--ink);cursor:pointer}
.cellbtn.late{color:var(--warn)}
.cellbtn:hover{background:var(--well);text-decoration:underline}
.paytbl tr.vrow{cursor:pointer;background:var(--well)}
.paytbl tr.vrow td{border-top:1px solid var(--line2)}
.paytbl .caret{width:18px;color:var(--muted)}
.paytbl tr.brow td{font-size:12px}
.jobbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.flag{display:inline-block;margin:0 4px 2px 0;padding:1px 5px;border-radius:3px;background:var(--warn-bg);color:var(--warn);font-size:10.5px}
.flag.bad{background:var(--crit-bg);color:var(--crit)}
.plink{color:var(--info);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.plink:hover{text-decoration:underline}
.paytbl tr.frow td{padding-top:0;border-top:0}
.paytbl tr.brow:has(+ tr.frow) td{border-bottom:0}
.paytbl tr.vrow td,.paytbl tr.frow td{white-space:normal}
.paytbl td:nth-child(2){max-width:170px;overflow:hidden;text-overflow:ellipsis}

/* ---- working indicator: the Boxman loading mark ----
   Two knobs, as designed: `color` is the ink, --rate multiplies every duration. */
.lis{--dur:3.2s;color:var(--accent);flex:none}
.lis-rig{transform-box:view-box;transform-origin:center;
  animation:lis-drift calc(var(--dur) * var(--rate, 1) * 5) linear infinite}
.lis-track,.lis-tail,.lis-mid,.lis-head{stroke:currentColor;stroke-linecap:round;fill:none}
.lis-track{stroke-width:1;opacity:.16}
.lis-tail,.lis-mid,.lis-head{animation-duration:calc(var(--dur) * var(--rate, 1));
  animation-timing-function:linear;animation-iteration-count:infinite}
/* the three dashes sit end to end: head at p, mid at p-9, tail at p-29 */
.lis-head{stroke-width:2.2;stroke-dasharray:3 97;stroke-dashoffset:0;animation-name:lis-head}
.lis-mid{stroke-width:1.8;stroke-dasharray:9 91;stroke-dashoffset:9;opacity:.5;animation-name:lis-mid}
.lis-tail{stroke-width:1.3;stroke-dasharray:20 80;stroke-dashoffset:29;opacity:.22;animation-name:lis-tail}
@keyframes lis-head{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes lis-mid{from{stroke-dashoffset:9}to{stroke-dashoffset:-91}}
@keyframes lis-tail{from{stroke-dashoffset:29}to{stroke-dashoffset:-71}}
@keyframes lis-drift{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .lis-rig,.lis-head,.lis-mid,.lis-tail{animation:none} }

/* the bar at the foot of the screen */
#busybar{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:18px;z-index:95;display:flex;align-items:center;gap:10px;
  padding:6px 14px 6px 8px;border-radius:22px;background:var(--panel);color:var(--ink);
  border:1px solid var(--line2);box-shadow:0 8px 26px rgba(0,0,0,.28);font-size:12.5px;
  opacity:0;pointer-events:none}
#busybar.show{opacity:1}
#busybar .bt{color:var(--muted);font-size:11px;min-width:30px}

/* the panel being saved: dimmed, unclickable, the mark in its middle */
.busydim{position:relative}
.busydim>*:not(.busyov){opacity:.45;pointer-events:none;transition:opacity .15s ease}
.busyov{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;
  padding-top:min(30vh, 240px);pointer-events:none}
:root.is-busy, :root.is-busy *{cursor:progress !important}
.savingmk{display:inline-flex;align-items:center;gap:6px}
.busyov .lis{background:var(--panel);border:1px solid var(--line2);border-radius:50%;padding:10px;
  box-shadow:0 8px 26px rgba(0,0,0,.25);box-sizing:content-box}

/* ---- emails with the CSE ---- */
.mitem{border-left:3px solid var(--line2);padding:6px 10px;margin-bottom:8px;background:var(--well);border-radius:0 4px 4px 0}
.mitem.out{border-left-color:var(--info)}
.mitem.in{border-left-color:var(--ok)}
.mitem.in.auto{border-left-color:var(--warn)}
.mitem .mh{font-size:12px}
.mitem .mtext{white-space:pre-wrap;font-size:12.5px;margin-top:4px;max-height:220px;overflow:auto}
.banner.okb{background:var(--ok-bg);border-color:var(--ok)}
.banner.okb b{color:var(--ok)}
.mailframe{width:100%;height:min(56vh,520px);border:1px solid var(--line2);border-radius:5px;background:#f3f5f8}

/* ---- shipment analysis ---- */
.insight .verdict{display:inline-block;font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:3px;margin-bottom:8px}
.insight .v-crit{background:var(--crit-bg);color:var(--crit)}
.insight .v-warn{background:var(--warn-bg);color:var(--warn)}
.insight .v-ok{background:var(--ok-bg);color:var(--ok)}
.insight ul{margin:0 0 8px;padding-left:18px;font-size:12.5px;line-height:1.55}
.insight li{margin-bottom:3px}
.insight .insact{font-size:12.5px;border-top:1px solid var(--line);padding-top:7px}
.insight .insact b{font:700 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-right:6px}
.trio.quad{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---- payment run ---- */
.runblk{border-left:3px solid var(--ok)}
.runsum{display:flex;flex-wrap:wrap;gap:22px;font-size:13px;margin-bottom:6px}
.runsum .k{font:600 9.5px var(--mono);letter-spacing:.06em;color:var(--faint);margin-bottom:3px}
.runlist summary{cursor:pointer;font-size:12px;color:var(--info);margin:6px 0}

/* ---- issues the checks can't see; follow-ups ---- */
.xrow{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.xrow .ctl{min-width:0}
.xrow .mx{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer}
.followup{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.followup textarea{width:100%;font:13px/1.45 var(--sans);padding:8px 10px;border-radius:5px;border:1px solid var(--line2);background:var(--bg);color:var(--ink)}
.testtools{margin-top:12px;padding-top:8px;border-top:1px dashed var(--line2);display:flex;gap:8px;align-items:center}

/* ---- bill queries ---- */
.bqform{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.bqform label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600}
.bqform label.wide{grid-column:1 / -1}
.bqform textarea{width:100%;font:13px/1.45 var(--sans);padding:8px 10px;border-radius:5px;border:1px solid var(--line2);background:var(--bg);color:var(--ink)}
.bqcheck{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:5px;background:var(--well);font-size:12.5px;min-height:38px}
.bqcheck .ck{margin:3px 0}
.bqcheck .ck.ok{color:var(--ok)}
.bqcheck .ck.bad{color:var(--crit)}
.bqcheck .k{font:600 9.5px var(--mono);letter-spacing:.06em;color:var(--faint)}

/* ---- data sources: status panel (nav) and the stale-figures banner ---- */
.srcbox{margin:0 12px 10px;padding:9px 11px;background:var(--nav2);border:1px solid var(--nav-line);border-radius:5px;font-size:11px;color:var(--nav-ink)}
.srcbox .k{font:600 8.5px var(--mono);letter-spacing:.13em;color:var(--nav-dim);margin-bottom:6px}
.srcbox .src{display:flex;gap:7px;align-items:flex-start;margin-top:4px;line-height:1.35}
.srcbox .dot{flex:none;width:7px;height:7px;border-radius:50%;margin-top:4px;background:var(--ok)}
.srcbox .src.down .dot{background:var(--crit)}
.srcbox .src.down b{color:#f0736a}
.srcbox .why{display:block;color:var(--nav-dim);font-size:10.5px;word-break:break-word}
.srcbox.alldown{border-color:var(--crit)}
.srcbanner{margin:10px 16px 0;padding:9px 12px;background:var(--warn-bg);border:1px solid var(--warn);border-left-width:3px;border-radius:4px;font-size:12.5px;line-height:1.45}
.srcbanner b{color:var(--warn)}
.srcbanner .sub{display:block;margin-top:2px}

/* ---- the header notice area ----
   Every page-level message lives here, in the header's free space: one line
   (the most serious), "+N" for the rest, and hover/focus for the full list.
   --lv is the level colour; everything else takes the page's own surface. */
.alertbar{--lv:var(--crit);position:relative;display:none;align-items:center;gap:8px;flex:0 1 auto;min-width:0;max-width:52%;
  margin-right:10px;padding:5px 11px 5px 9px;
  background:color-mix(in srgb,var(--lv) 9%,var(--panel));
  border:1px solid color-mix(in srgb,var(--lv) 50%,transparent);border-radius:8px;
  color:var(--ink);font-size:12px;line-height:1.35;cursor:default;opacity:0}
.alertbar.lv-warn,.ab-item.lv-warn{--lv:var(--warn)}
.alertbar.lv-info,.ab-item.lv-info{--lv:var(--info)}
.alertbar.lv-ok,.ab-item.lv-ok{--lv:var(--ok)}
.ab-item.lv-crit{--lv:var(--crit)}
.alertbar.on{display:flex;animation:abin .4s cubic-bezier(.2,.9,.2,1) forwards}
.alertbar b{color:var(--lv);font-weight:700}
.alertbar .ab-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--lv)}
.alertbar.lv-crit .ab-dot{animation:abping 1.8s ease-out infinite}
.alertbar .ab-text{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alertbar .ab-pill,.alertbar .ab-more{flex:none;padding:0 6px;border-radius:8px;font:600 9px var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--lv);background:color-mix(in srgb,var(--lv) 16%,transparent)}
.alertbar .ab-more{color:var(--muted);background:var(--well)}
.alertbar .ab-lock{position:absolute;top:calc(100% + 6px);right:0;width:min(420px,85vw);max-height:60vh;overflow:auto;z-index:50;
  padding:4px;background:var(--panel);border:1px solid var(--line2);border-radius:9px;
  box-shadow:0 12px 28px rgba(0,0,0,.3);color:var(--muted);font-size:12px;line-height:1.45;white-space:normal;
  visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.ab-item{display:flex;gap:9px;padding:8px 9px;border-radius:6px}
.ab-item + .ab-item{border-top:1px solid var(--line)}
.ab-item b{color:var(--lv)}
.ab-item .ab-idot{flex:none;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--lv)}
.ab-item .ab-sub{margin-top:3px;color:var(--muted)}
.ab-item .ab-sub b{color:var(--ink)}
.alertbar:hover .ab-lock,.alertbar:focus .ab-lock,.alertbar:focus-within .ab-lock{
  visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
.alertbar.nudge{animation:abnudge .5s}
@keyframes abin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes abping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lv) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
@keyframes abnudge{0%,100%{opacity:1;transform:none}25%{opacity:1;transform:translateX(-5px)}50%{opacity:1;transform:translateX(5px)}75%{opacity:1;transform:translateX(-2px)}}
@media (prefers-reduced-motion:reduce){.alertbar.on{animation:none;opacity:1}.alertbar .ab-dot,.alertbar.nudge{animation:none}}
@media (max-width:900px){.alertbar{max-width:40%}}
/* The old in-page notice and toast are retired: the header carries both. */
.srcbanner{display:none!important}
/* Status-change buttons look locked, and are refused on click. */
body.srclocked #runapprove,body.srclocked #runrevoke,body.srclocked #bqresolve,body.srclocked #bqclose,
body.srclocked [data-a="auditor"],body.srclocked [data-a="lead"],body.srclocked [data-a="clear"]{opacity:.45;cursor:not-allowed}

/* ---- foldable sidebar ----
   The sidebar's contents keep their width while it folds, so nothing reflows
   mid-animation; the boxes with side margins are 24px narrower so they are
   not cropped. */
nav{transition:width .28s cubic-bezier(.22,.8,.26,1);overflow:hidden}
nav > *{min-width:212px}
/* Boxes with side margins: the sidebar width minus those margins, or they are cropped. */
nav > .srcbox,nav > .rolebox,nav > .workbox{min-width:0;width:calc(212px - 20px)}
body.navcollapsed nav{width:0}
.navtoggle{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-left:-6px;padding:0;
  background:none;border:1px solid transparent;border-radius:6px;color:var(--muted);cursor:pointer}
.navtoggle:hover{background:var(--well);color:var(--ink);border-color:var(--line)}
.navtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---- detail pane: a drawer over the table ----
   The table keeps the full width and never reflows; the pane slides in over
   its right side with a shadow, and back out. Transform-only, so it is
   smooth, and the content is laid out at its final width before it moves. */
.split{display:block;position:relative;overflow:hidden}
.split > .listwrap{height:100%;border-right:0}
.split > .detwrap{position:absolute;top:0;right:0;bottom:0;z-index:4;width:min(var(--detw, min(680px,54%)), 85%);
  padding-top:44px;border-left:1px solid var(--line);
  transform:translateX(102%);visibility:hidden;box-shadow:none;
  transition:transform .34s cubic-bezier(.22,.8,.26,1),box-shadow .34s,visibility 0s linear .34s}
body.detopen .split > .detwrap{transform:none;visibility:visible;box-shadow:-22px 0 44px rgba(0,0,0,.26);
  transition:transform .34s cubic-bezier(.22,.8,.26,1),box-shadow .34s,visibility 0s}
body:not(.detopen) .split .row[aria-selected="true"]{background:var(--well)}
.detclose{position:absolute;top:9px;right:12px;z-index:6;display:grid;place-items:center;width:28px;height:28px;padding:0;
  background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--muted);cursor:pointer;
  opacity:0;visibility:hidden;transform:scale(.9);transition:opacity .2s,transform .2s,visibility 0s .2s}
body.detopen .detclose{opacity:1;visibility:visible;transform:none;transition:opacity .2s .12s,transform .2s .12s,visibility 0s}
.detclose:hover{color:var(--ink);border-color:var(--line2)}
@media (max-width:900px){.split > .detwrap{width:92%}}
@media (prefers-reduced-motion:reduce){nav,.split > .detwrap,.detclose{transition:none!important}}

/* ---- pane resize handle: the drawer's left edge ---- */
.detresize{position:absolute;top:0;bottom:0;z-index:7;width:10px;cursor:col-resize;
  right:calc(min(var(--detw, min(680px,54%)), 85%) - 5px);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.detresize::after{content:"";position:absolute;top:50%;left:3px;width:4px;height:44px;margin-top:-22px;border-radius:3px;
  background:var(--line2);transition:background .15s,height .15s}
.detresize:hover::after,.detresize:focus-visible::after,body.resizing .detresize::after{background:var(--accent);height:72px;margin-top:-36px}
.detresize:focus-visible{outline:none}
body.detopen .detresize{opacity:1;visibility:visible;transition:opacity .2s .25s,visibility 0s}
body.resizing,body.resizing *{cursor:col-resize!important;user-select:none!important}
body.resizing .split > .detwrap{transition:none!important}
@media (max-width:900px){.detresize{display:none}}
/* ---- keyboard ---- */
.listwrap tr.row:focus{outline:none}
.listwrap tr.row:focus-visible{box-shadow:inset 3px 0 0 var(--accent)}
#kbdhelp{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;background:rgba(5,10,16,.45)}
#kbdhelp .kh-card{width:min(440px,92vw);padding:14px 16px 12px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);color:var(--ink);font-size:12.5px}
#kbdhelp .kh-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#kbdhelp .kh-x{position:static;opacity:1;visibility:visible;transform:none;font-size:16px;line-height:1}
#kbdhelp table{width:100%;border-collapse:collapse}
#kbdhelp td{padding:5px 0;border-top:1px solid var(--line);vertical-align:top}
#kbdhelp td:first-child{width:120px;white-space:nowrap}
#kbdhelp kbd{display:inline-block;min-width:18px;padding:1px 6px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;
  background:var(--well);font:600 11px var(--mono);text-align:center}
#kbdhelp .sub{margin-top:8px}

/* ---- shortcuts: header button and the clickable hint row ---- */
.kbdbtn{width:34px;padding:0!important}
.kbdbtn svg{display:block;margin:0 auto}
button.keys{background:none;border:1px solid transparent;border-radius:5px;padding:2px 6px;cursor:pointer;font:10.5px var(--mono);color:var(--faint)}
button.keys:hover{border-color:var(--line);background:var(--well);color:var(--ink)}
button.keys b{color:var(--accent)}

/* ---- roles ---- */
.navsec.navdev{margin-top:14px;padding-top:10px;border-top:1px solid var(--nav-line)}
.roles{flex-wrap:wrap;align-items:center}
.viewas{display:flex;align-items:center;gap:6px;width:100%;margin-top:8px;font:600 9px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--nav-dim)}
.viewas select{flex:1;min-width:0;padding:4px 6px;border-radius:5px;border:1px solid var(--nav-line);background:var(--nav2);
  color:#fff;font:500 11.5px var(--sans);letter-spacing:0;text-transform:none;cursor:pointer}
.tag.rt-sales{background:var(--well);color:var(--muted)}
.tag.rt-viewer{background:var(--well);color:var(--ink)}
.tag.rt-finance{background:var(--ok-bg);color:var(--ok)}
.tag.rt-finance_lead{background:var(--info-bg);color:var(--info)}
.tag.rt-admin{background:var(--warn-bg);color:var(--warn)}
.tag.rt-super_admin{background:var(--crit-bg);color:var(--crit)}
.roletbl td{padding:7px 8px;border-top:1px solid var(--line);vertical-align:top;font-size:12.5px}
.roletbl tr:first-child td{border-top:0}
/* ---- activity ---- */
.acttbl{width:100%;border-collapse:collapse}
.acttbl th{text-align:left;font:600 9.5px var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--line)}
.acttbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:12.5px}
.acttbl .actnote{color:var(--muted);max-width:520px;white-space:pre-wrap;word-break:break-word}
.actk{display:inline-block;padding:2px 7px;border-radius:4px;font:600 10.5px var(--sans);background:var(--well);color:var(--ink);white-space:nowrap}
.acttbl tr.k-audit .actk{background:var(--ok-bg);color:var(--ok)}
.acttbl tr.k-pay .actk{background:var(--info-bg);color:var(--info)}
.acttbl tr.k-settings .actk{background:var(--warn-bg);color:var(--warn)}
.acttbl tr.k-error .actk{background:var(--crit-bg);color:var(--crit)}
.acttbl tr.k-error td{background:color-mix(in srgb,var(--crit) 4%,transparent)}
.seg button.errtab .c{color:var(--crit);font-weight:700}
/* ---- admin ---- */
.full.admin .blk{max-width:1100px}

/* ==== sidebar, redesigned (29 Sep) ====
   Flat items (the old rule was invalid CSS, so browsers drew a raised default
   border round every button), a scrolling list, a foldable "In development"
   group, and a compact footer: one line for data sources, one card for you. */
nav{display:flex;flex-direction:column}
.brand{padding:16px 16px 10px}
#nav{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 8px 12px;scrollbar-width:thin;scrollbar-color:var(--nav-line) transparent}
nav .navsec{display:flex;align-items:center;gap:6px;width:100%;margin:10px 0 4px;padding:4px 8px;background:none;border:0;
  font:600 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--nav-dim)}
nav .navsec.navdev{margin-top:16px;padding-top:12px;border-top:1px solid var(--nav-line);border-radius:0;cursor:pointer}
nav .navsec.navdev:hover{color:var(--nav-ink)}
nav .navsec .n{margin-left:auto;font:500 10px var(--mono);letter-spacing:0}
nav .navsec .chev{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .2s;margin-left:2px}
nav .navsec[aria-expanded="true"] .chev{transform:rotate(45deg) translate(-1px,-1px)}
nav button.nv{display:flex;align-items:center;gap:8px;width:100%;margin:1px 0;padding:7px 10px;border:0;border-radius:7px;
  background:none;color:var(--nav-ink);font:500 13px var(--sans);text-align:left;cursor:pointer;position:relative;
  transition:background .15s,color .15s}
nav button.nv .nvl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav button.nv:hover{background:rgba(255,255,255,.06);color:#fff}
nav button.nv[aria-current="page"]{background:rgba(255,255,255,.09);color:#fff;font-weight:600}
nav button.nv[aria-current="page"]::before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
nav button.nv .n{margin-left:auto;font:500 11px var(--mono);color:var(--nav-dim)}
nav button.nv[aria-current="page"] .n{color:var(--accent)}
nav button.nv[data-soon]{color:var(--nav-dim)}
.devlist[hidden]{display:none}
nav > .srcbox,nav > .rolebox{flex:none}
/* data sources: a line, not a card */
.srcbox{margin:0 10px 8px;padding:8px 10px;background:transparent;border:1px solid var(--nav-line);border-radius:8px;font-size:11.5px}
.srcbox.alldown{border-color:color-mix(in srgb,#f0736a 55%,transparent);background:color-mix(in srgb,#f0736a 8%,transparent)}
.srcbox .src{display:flex;gap:8px;align-items:flex-start;margin:0;line-height:1.35}
.srcbox .src + .src{margin-top:5px}
.srcbox .dot{flex:none;width:7px;height:7px;margin-top:4px;border-radius:50%;background:#4fbf92}
.srcbox .src.down .dot{background:#f0736a;box-shadow:0 0 0 3px color-mix(in srgb,#f0736a 25%,transparent)}
.srcbox .src.down b{color:#f59a92}
.srcbox .srct{min-width:0}
.srcbox .why{display:block;color:var(--nav-dim);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.srcbox .src.ok .srct{color:var(--nav-dim)}
/* you */
.rolebox{margin:0 10px 12px;padding:10px;border-radius:10px;background:var(--nav2);border:1px solid var(--nav-line)}
.whoami{display:flex;align-items:center;gap:9px}
.avatar{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#b8401a);color:#fff;font:700 11px var(--sans);letter-spacing:.02em}
.whotext{min-width:0;display:flex;flex-direction:column;gap:3px}
.whotext b{color:#fff;font:600 12.5px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
.whotext .rolechip{align-self:flex-start;padding:1px 7px;font:600 9px var(--mono);letter-spacing:.08em;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid var(--nav-line);color:var(--nav-ink)}
.rolenote:empty{display:none}
.viewas{margin-top:9px}
.verbtn{margin-top:8px!important;font-size:10px!important}

/* shortcut letters on buttons: a key cap, not a stray letter */
kbd.kc{display:inline-grid;place-items:center;min-width:16px;height:16px;margin-left:6px;padding:0 4px;border-radius:4px;
  font:600 10px var(--mono);line-height:1;vertical-align:1px;opacity:.75;
  border:1px solid currentColor;border-bottom-width:2px}
button:disabled kbd.kc{opacity:.45}

/* header on narrower screens: the alert keeps its words, the buttons stay on screen */
.alertbar{min-width:150px}
@media (max-width:1180px){header.top{gap:8px;padding:0 12px}header.top .act{padding:0 9px}.asof{max-width:130px}}
@media (max-width:980px){.asof{display:none}.alertbar{max-width:none;flex:1 1 auto}}

/* ==== header: the alert centred between title and buttons ==== */
header.top .grow{flex:1 1 0;margin-left:0;min-width:8px}
header.top .alertbar{margin:0}
/* ==== profile card: data sources as one line ==== */
.srcline{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:8px;border-top:1px solid var(--nav-line);
  font:500 11px var(--sans);color:var(--nav-dim);cursor:default}
.srcline:empty{display:none}
.srcline .dot{width:7px;height:7px;border-radius:50%;background:#4fbf92;box-shadow:0 0 0 3px rgba(79,191,146,.15)}
.srcline.down{color:#f59a92}
.srcline.down .dot{background:#f0736a;box-shadow:0 0 0 3px rgba(240,115,106,.2);animation:abping 1.8s ease-out infinite}
/* ==== your work ==== */
.workbox{flex:none;margin:0 10px 8px;padding:6px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--nav-line)}
.workbox[hidden]{display:none}
.wkh{padding:4px 6px 6px;font:600 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--nav-dim)}
.wk{display:flex;align-items:center;gap:8px;width:100%;padding:6px 7px;border:0;border-radius:6px;background:none;
  color:var(--nav-ink);font:500 12px var(--sans);text-align:left;cursor:pointer;transition:background .15s}
.wk:hover{background:rgba(255,255,255,.06);color:#fff}
.wkl{min-width:0;display:flex;flex-direction:column}
.wks{font-size:10.5px;color:var(--nav-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkn{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:999px;text-align:center;
  font:600 11px var(--mono);background:rgba(255,255,255,.07);color:#fff}
.wk.hot .wkn{background:var(--accent);color:#fff}
.wk.hot .wks{color:#ffb199}
.wk.done .wkn{background:rgba(79,191,146,.16);color:#7fd9b2}

/* ==== vendor payables, cleaned up ==== */
.ptiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.ptile{--tc:var(--ink);display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 16px;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);font:inherit;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.ptile:hover{border-color:var(--line2);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.ptile.ok{--tc:var(--ok)} .ptile.crit{--tc:var(--crit)}
.ptile .pk{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ptile .pv{font:650 26px/1.1 var(--sans);letter-spacing:-.02em;color:var(--tc);font-variant-numeric:tabular-nums}
.ptile .pv small{margin-left:5px;font:600 10px var(--mono);letter-spacing:.06em;color:var(--muted)}
.ptile .pm{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile .pbar{height:4px;border-radius:3px;background:var(--well);overflow:hidden}
.ptile .pbar i{display:block;height:100%;background:var(--ok);border-radius:3px}
@media (max-width:1100px){.ptiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
details.legend{margin:0;padding:8px 14px 10px;border-top:1px solid var(--line)}
details.legend summary{cursor:pointer;font:600 11.5px var(--sans);color:var(--muted);list-style:none}
details.legend summary::-webkit-details-marker{display:none}
details.legend summary::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s;vertical-align:1px}
details.legend[open] summary::before{transform:rotate(45deg)}
details.legend summary:hover{color:var(--ink)}
details.legend dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:10px 0 0;font-size:12px;color:var(--muted)}
details.legend dt{margin:0} details.legend dd{margin:0;line-height:1.45}
/* the bills table: vendor rows read as group headers, bill rows are tighter */
.paytbl tr.vrow td{background:var(--well);border-top:1px solid var(--line2);padding-top:9px;padding-bottom:9px;cursor:pointer}
.paytbl tr.vrow:hover td{background:color-mix(in srgb,var(--accent) 7%,var(--well))}
.paytbl tr.vrow td.caret{color:var(--muted);width:22px}
.paytbl tr.brow td{padding-top:6px;padding-bottom:6px}
.paytbl tr.brow:hover td{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.paytbl tr.frow td{padding-top:0;padding-bottom:8px;border-top:0}
.paytbl .mini{margin-left:6px}

.ptile.on{border-color:var(--tc);box-shadow:0 0 0 1px var(--tc) inset}
.ptile:not(.ok):not(.crit).on{--tc:var(--accent)}
body.srclocked #runapprove{opacity:.45;cursor:not-allowed}

/* ==== AI invoice intake: the drop zone is the page until there is work ==== */
.idrop.hero .dz{flex-direction:column;justify-content:center;gap:12px;min-height:220px;text-align:center;
  border-width:2px;border-style:dashed;border-radius:14px}
.idrop.hero .dzicon{width:52px;height:52px;font-size:22px}
.idrop.hero .dztext{flex:none}
.idrop.hero .dzbtn{background:var(--accent);border-color:var(--accent2);color:#fff;padding:9px 16px}
.idrop.hero{padding:22px 18px}
.idrop.hero .dztext b{font-size:15px}
.idrop .dz{transition:border-color .15s,background .15s}
.idrop .dz:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent)}

button.raise:disabled{opacity:.4;cursor:not-allowed}
button.raise:not(:disabled):hover{background:var(--crit-bg)}
button.clear.on:hover{filter:brightness(1.07)}

/* Your work: aligned counts, room to breathe */
.workbox{padding:8px}
.wk{padding:7px 8px;gap:10px}
.wkl{flex:1 1 auto}
.wkn{flex:none;min-width:24px;height:20px;display:inline-grid;place-items:center;padding:0 7px;font-size:11px}

/* super admin tools: set apart, quiet until needed */
.satools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding:9px 10px;border:1px dashed color-mix(in srgb,var(--crit) 40%,var(--line));
  border-radius:8px;background:color-mix(in srgb,var(--crit) 4%,transparent)}
.satools .sub{flex:1 1 220px;font-size:11px}

/* Your work: zeros step back, and "all clear" when nothing waits */
.wk.zero{color:var(--nav-dim)}
.wk.zero .wkn{background:transparent;color:var(--nav-dim);border:1px solid var(--nav-line)}
.wkclear{display:flex;align-items:center;gap:8px;padding:6px 8px 4px;font:500 12px var(--sans);color:var(--nav-ink)}
.wkclear .tick{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(79,191,146,.18);color:#7fd9b2;font-size:11px}

/* your preferences: theme, density, shortcuts, version — one quiet row */
.prefs{display:flex;align-items:center;gap:4px;margin-top:9px;padding-top:8px;border-top:1px solid var(--nav-line)}
.pref{display:grid;place-items:center;width:28px;height:26px;padding:0;border:1px solid transparent;border-radius:6px;
  background:none;color:var(--nav-dim);cursor:pointer;transition:background .15s,color .15s}
.pref:hover{background:rgba(255,255,255,.07);color:#fff}
.pref[aria-pressed="true"]{background:rgba(255,255,255,.1);color:#fff;border-color:var(--nav-line)}
.prefs{flex-wrap:wrap}
.prefs .verbtn{flex:1 0 100%;margin:6px 0 0!important;white-space:nowrap;text-align:left}

/* ==== Vendor Payables: the run as a workflow ==== */
.runsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 14px;padding:0;list-style:none;counter-reset:s}
.runsteps li{position:relative;display:flex;gap:9px;align-items:flex-start;padding-right:14px;color:var(--muted)}
.runsteps li::after{content:"";position:absolute;left:30px;right:10px;top:12px;height:2px;background:var(--line)}
.runsteps li:last-child::after{display:none}
.runsteps li.done::after{background:var(--ok)}
.runsteps .sn{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font:700 11px var(--sans);background:var(--well);border:1px solid var(--line2);color:var(--muted)}
.runsteps li.done .sn{background:var(--ok);border-color:var(--ok);color:#fff}
.runsteps li.now .sn{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.runsteps li span:last-child{position:relative;z-index:1;display:flex;flex-direction:column;padding-top:3px;background:var(--panel);padding-right:6px}
.runsteps b{font:600 12px var(--sans);color:inherit}
.runsteps li.now b,.runsteps li.done b{color:var(--ink)}
.runsteps i{font:11px var(--sans);font-style:normal;color:var(--muted)}
.blockers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:9px 10px;border-radius:8px;background:var(--well)}
.blockers .k{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.blocker{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);
  background:var(--panel);color:var(--ink);font:500 12px var(--sans);cursor:pointer;transition:border-color .15s}
.blocker:hover{border-color:var(--accent)}
.blocker b{font-weight:700}
.blocker span{color:var(--muted);font:11px var(--mono)}
.blocker.warn b{color:var(--warn)} .blocker.crit b{color:var(--crit)}
.seg.groupby{align-items:center}
.seg.groupby .gl{padding:0 8px;font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line2)}
@media (max-width:1100px){.runsteps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:10px}.runsteps li::after{display:none}}