/* ==========================================================================
   L0 — DESIGN SYSTEM  ·  "LEDGER"
   Cool paper, hairline rules, squared corners, flat surfaces, indigo signal.
   Layout is a horizontal two-row masthead — no sidebar.
   ========================================================================== */
/* ==========================================================================
   The `hidden` attribute must beat any class that sets `display`.

   A class selector outranks the user-agent rule for [hidden], so a rule like
   `.sheet { display: flex }` keeps a hidden element on screen. When that
   element is a fixed, full-viewport overlay, it silently swallows every click
   and keystroke on the page beneath it.

   This lives in the BASE stylesheet, which every page loads, because putting it
   in a page-specific file is exactly how the login page ended up unusable.
   ========================================================================== */
[hidden] { display: none !important; }

:root{
  /* ---- Surfaces -----------------------------------------------------------
     White, and four steps of grey between it and the text. The page, the card
     and the masthead are all the same white; what separates them is a
     hairline, not a colour. */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F7F7F7;
  --surface-3:#EFEFEF;
  --line:#E8E8E8;
  --line-2:#D8D8D8;
  --line-3:#A9A9A9;   /* the palette's secondary, used as a rule and a frame */

  /* ---- Text ---------------------------------------------------------------
     Black, and three steps towards grey. The quietest of them still clears
     4.5:1 on white: a figure nobody can read is not a quiet figure, it is a
     missing one. */
  --ink:#000000;
  --ink-2:#2E2E2E;
  --ink-3:#6B6B6B;
  --ink-4:#767676;

  /* ---- The accent ---------------------------------------------------------
     #EEC1A0 at 1.5:1 on white can never carry a word, so it is only ever a
     FILL - the primary button, the selected row, the thing being waited on -
     with black on top of it at 12:1. `--ind` is what 56 rules call the
     primary colour; it is black, because those rules use it as text and as
     borders, where the accent could not be read. */
  --accent:#EEC1A0;
  --accent-2:#E3AE89;
  --accent-soft:#FBF1E9;
  --ind:#000000;      --ind-2:#2E2E2E;  --ind-soft:#FBF1E9;  --ind-line:#EEC1A0;

  /* ---- Status -------------------------------------------------------------
     Approved is black on white: the plainest, strongest mark on the page.
     Waiting is the accent. Failure keeps a red - an accounts payable system
     must never let a rejection or a failed sync look like everything else. */
  --grn:#000000;      --grn-2:#000000;  --grn-soft:#FFFFFF;  --grn-line:#000000;
  --amb:#6B3F16;      --amb-soft:#FBF1E9;  --amb-line:#EEC1A0;
  --red:#B3261E;      --red-soft:#FCF0EF;  --red-line:#E9BDB9;
  --cyn:#3D3D3D;      --cyn-soft:#F4F4F4;  --cyn-line:#D8D8D8;
  --vio:#5C5C5C;      --vio-soft:#F2F2F2;  --vio-line:#DCDCDC;

  /* ---- The masthead -------------------------------------------------------
     White, like everything else. The active section is marked in black,
     because the accent cannot be seen against it. */
  --nav:#FFFFFF;
  --nav-2:#FFFFFF;
  --nav-ink:#000000;
  --nav-ink-2:#6B6B6B;
  --nav-ink-3:#767676;
  --nav-line:#E8E8E8;
  --nav-accent:#000000;

  --r:4px; --r2:6px;
  --sh:0 1px 0 rgba(0,0,0,.03);
  --sh-pop:0 18px 48px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --mono:"JetBrainsMonoVF","SFMono-Regular",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"InterVF","Inter","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --top:50px; --sub:42px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);
  font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4,p,ul,ol,figure,dl{margin:0}
ul{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ind-2);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--ind-soft)}
.mono{font-family:var(--mono);font-size:.93em;letter-spacing:-.02em}

/* ---------- Shell: two-row masthead, no sidebar ---------- */
.shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.topbar{
  height:var(--top);flex:none;display:flex;align-items:center;gap:14px;padding:0 16px;
  background:var(--nav);color:var(--nav-ink);border-bottom:1px solid rgba(0,0,0,.25);
}
/* The masthead link inherits the global link colour, which is the brand
   green - and brand green on a brand-green bar measures 2.75:1. The
   wordmark takes the masthead's own ink instead. */
.brand{display:flex;align-items:center;gap:8px;flex:none;padding-right:14px;border-right:1px solid var(--nav-line);color:var(--nav-ink);text-decoration:none}
.brand:hover{color:#fff}
.brand-mark{
  width:22px;height:22px;border-radius:2px;background:var(--nav-accent);color:#06281C;
  display:grid;place-items:center;font-weight:800;font-size:12px;flex:none;
}
.brand-name{font-weight:640;letter-spacing:.01em;font-size:14px;line-height:1.1}
.brand-sub{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--nav-ink-3);line-height:1.1;margin-top:1px}

.groupnav{display:flex;gap:1px;flex:1;overflow-x:auto;scrollbar-width:none}
.groupnav::-webkit-scrollbar{display:none}
.gtab{
  background:none;border:0;color:var(--nav-ink-2);cursor:pointer;font-size:12.5px;font-weight:560;
  padding:0 13px;height:var(--top);white-space:nowrap;position:relative;letter-spacing:.005em;
}
.gtab:hover{color:var(--nav-ink);background:rgba(255,255,255,.06)}
.gtab.on{color:#fff;background:rgba(255,255,255,.10)}
.gtab.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--nav-accent)}
.gtab .gn{
  display:inline-block;margin-left:6px;background:var(--red);color:#fff;border-radius:2px;
  font-size:9.5px;font-weight:700;padding:0 4px;vertical-align:1px;
}
.topright{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}

.searchwrap{position:relative;width:270px}
.search{
  width:100%;height:28px;padding:0 26px 0 27px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  background:rgba(255,255,255,.09);font-size:12px;outline:none;color:var(--nav-ink);
}
.search::placeholder{color:var(--nav-ink-3)}
.search:focus{background:#fff;color:var(--ink);border-color:var(--nav-accent)}
.search:focus::placeholder{color:var(--ink-4)}
.search-ico{position:absolute;left:8px;top:7px;color:var(--nav-ink-3);pointer-events:none}
.search:focus~.search-ico{color:var(--ink-3)}
.kbd{position:absolute;right:6px;top:6px;font-size:9.5px;color:var(--nav-ink-3);border:1px solid rgba(255,255,255,.2);border-radius:2px;padding:0 4px}
.search:focus~.kbd{display:none}
.results{
  position:absolute;top:33px;left:0;width:400px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r2);box-shadow:var(--sh-pop);max-height:420px;overflow-y:auto;z-index:60;padding:4px;color:var(--ink);
}
.res-item{padding:6px 8px;border-radius:var(--r);cursor:pointer;display:flex;gap:9px;align-items:center}
.res-item:hover,.res-item.sel{background:var(--ind-soft)}
.res-kind{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);width:80px;flex:none;font-weight:700}
.res-hint{padding:8px 10px;color:var(--ink-3);font-size:12px}

.iconbtn{
  background:rgba(255,255,255,.07);border:1px solid var(--nav-line);color:var(--nav-ink);cursor:pointer;
  height:28px;padding:0 8px;border-radius:var(--r);display:flex;align-items:center;gap:5px;font-size:11.5px;
}
.iconbtn:hover{background:rgba(255,255,255,.14);color:#fff}
.who{display:flex;align-items:center;gap:7px;padding:0 8px 0 3px;height:28px;border:1px solid var(--nav-line);border-radius:var(--r);background:rgba(255,255,255,.07);cursor:pointer;color:var(--nav-ink)}
.who:hover{background:rgba(255,255,255,.14)}
.who-n{font-size:11.5px;font-weight:600;line-height:1.1}
.who-r{font-size:9.5px;color:var(--nav-ink-2);line-height:1.1}
.av{width:21px;height:21px;border-radius:2px;display:grid;place-items:center;flex:none;font-size:9px;font-weight:700;background:var(--ind-2);color:#fff}
.av.sm{width:18px;height:18px;font-size:8px}
.av.lg{width:32px;height:32px;font-size:11.5px;border-radius:3px}

/* ---------- Section nav (row 2) ---------- */
.sectionnav{
  height:var(--sub);flex:none;display:flex;align-items:stretch;gap:0;padding:0 16px;
  background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;
}
.sectionnav::-webkit-scrollbar{display:none}
.slink{
  background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:12.5px;font-weight:540;
  padding:0 12px;white-space:nowrap;display:flex;align-items:center;gap:6px;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.slink:hover{color:var(--ink);background:var(--surface-2)}
.slink.on{color:var(--ind);border-bottom-color:var(--ind);font-weight:660}
.slink .sn{
  background:var(--red-soft);color:var(--red);border:1px solid var(--red-line);border-radius:2px;
  font-size:9.5px;font-weight:700;padding:0 4px;
}
.slink .sn.mute{background:var(--surface-2);color:var(--ink-3);border-color:var(--line-2)}

.proto{
  background:var(--amb-soft);border-bottom:1px solid var(--amb-line);color:var(--amb);
  font-size:11px;padding:4px 16px;display:flex;align-items:center;gap:8px;flex:none;
}
.proto button{margin-left:auto;background:none;border:0;color:inherit;cursor:pointer;text-decoration:underline;font-size:11px;flex:none}
.content{flex:1;overflow-y:auto}
.content::-webkit-scrollbar{width:12px}
.content::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--bg);border-radius:6px}
.wrap{padding:18px 16px 64px;max-width:1680px;margin:0 auto}

/* ---------- Page header ---------- */
.ph{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.ph h1{font-size:19px;font-weight:660;letter-spacing:-.02em}
.ph p{color:var(--ink-3);font-size:12px;margin-top:3px;max-width:78ch}
.ph-act{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:29px;
  padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);
  font-size:12px;font-weight:560;cursor:pointer;white-space:nowrap;transition:.1s;color:var(--ink);
}
.btn:hover{background:var(--surface-2);border-color:var(--line-3)}
.btn:active{transform:translateY(.5px)}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.btn.pri{background:var(--ind);border-color:var(--ind);color:#fff}
.btn.pri:hover{background:var(--ind-2);border-color:var(--ind-2)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger:hover{filter:brightness(1.1)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line)}
.btn.sm{height:25px;padding:0 8px;font-size:11.5px;gap:5px}
.btn.xs{height:21px;padding:0 6px;font-size:10.5px}
.btn.wide{width:100%}
.btn-row{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- Panels (flat, ruled — not floating cards) ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh)}
.card-h{padding:9px 13px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface-2);border-radius:var(--r2) var(--r2) 0 0}
.card-h h3{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2)}
.card-h .sub{font-size:11px;color:var(--ink-3);text-transform:none;letter-spacing:0;font-weight:400}
.card-h .r{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.card-b{padding:13px}
.card-b.flush{padding:0}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
.mt{margin-top:12px}.mt-s{margin-top:8px}.mb{margin-bottom:12px}

/* ---------- Stat tiles: hairline strip, accent keyline ---------- */
.stat{
  background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--line-3);
  border-radius:var(--r);padding:10px 12px;cursor:pointer;transition:.1s;text-align:left;
  width:100%;font:inherit;
}
.stat:hover{border-left-color:var(--ind);background:#FAFCFA}
.stat-l{font-size:9.5px;color:var(--ink-3);font-weight:700;display:flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.07em}
.stat-v{font-size:21px;font-weight:660;letter-spacing:-.035em;margin-top:4px;line-height:1.1;font-family:var(--mono)}
.stat-d{font-size:11px;margin-top:3px;color:var(--ink-3);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.up{color:var(--red)}.down{color:var(--grn)}
.dot{width:6px;height:6px;border-radius:1px;flex:none;display:inline-block}
.dot.ok{background:var(--grn-2)}.dot.warn{background:#C08A16}.dot.bad{background:var(--red)}.dot.idle{background:var(--ink-4)}

/* ---------- Badges: squared, technical ---------- */
.b{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border-radius:2px;font-size:10px;
  font-weight:700;letter-spacing:.03em;border:1px solid;white-space:nowrap;line-height:1.55;text-transform:uppercase}
.b-neutral{background:var(--surface-2);color:var(--ink-2);border-color:var(--line-2)}
.b-ok{background:var(--grn-soft);color:var(--grn);border-color:var(--grn-line)}
.b-warn{background:var(--amb-soft);color:var(--amb);border-color:var(--amb-line)}
.b-bad{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}
.b-info{background:var(--cyn-soft);color:var(--cyn);border-color:var(--cyn-line)}
.b-ai{background:var(--vio-soft);color:var(--vio);border-color:var(--vio-line)}
.b.lg{font-size:11px;padding:2px 9px}

/* ---------- Tables: dense ledger ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;min-width:640px}
table.t th{
  text-align:left;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;padding:7px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap;background:var(--surface-2);
}
table.t th.sortable{cursor:pointer;user-select:none}
table.t th.sortable:hover{color:var(--ink)}
table.t td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tbody tr{cursor:pointer}
table.t tbody tr:hover{background:var(--ind-soft)}
table.t tbody tr.sel{background:var(--ind-soft);box-shadow:inset 2px 0 0 var(--ind)}
table.t tbody tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td.money{font-weight:600;white-space:nowrap;font-family:var(--mono);letter-spacing:-.02em}
.cellsub{font-size:10.5px;color:var(--ink-3);margin-top:1px}
.tbar{display:flex;gap:6px;align-items:center;padding:8px 11px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--surface)}
.tbar .grow{flex:1;min-width:100px}
.bulk{background:var(--ind-soft);border-bottom:1px solid var(--ind-line)}
.empty{padding:36px 20px;text-align:center;color:var(--ink-3);font-size:12px}
.pager{display:flex;align-items:center;gap:8px;padding:8px 11px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-3);flex-wrap:wrap;background:var(--surface-2)}

/* ---------- Forms ---------- */
.f{display:flex;flex-direction:column;gap:3px}
.f label{font-size:10px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.f .hint{font-size:10.5px;color:var(--ink-3);text-transform:none;letter-spacing:0;font-weight:400}
.inp,select.inp,textarea.inp{width:100%;height:30px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);outline:none;font-size:12px;transition:.1s}
textarea.inp{height:auto;padding:6px 8px;resize:vertical;min-height:60px;line-height:1.5}
select.inp{cursor:pointer}
.inp:focus{border-color:var(--ind);box-shadow:0 0 0 2px var(--ind-soft)}
.inp.err{border-color:var(--red);box-shadow:0 0 0 2px var(--red-soft)}
.inp[readonly]{background:var(--surface-2);color:var(--ink-2)}
/* A control sitting inside a table cell, where a full-width one looks wrong. */
.inp.sm,select.inp.sm{width:auto;min-width:104px;height:25px;font-size:11.5px;padding:0 6px}
/* Long free text in a cell: wrap it rather than stretching the table. */
.cellwrap{display:block;max-width:420px;white-space:normal;line-height:1.45}
.fgrid{display:grid;gap:11px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid.one{grid-template-columns:1fr}
.fgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.span2{grid-column:span 2}
.errmsg{font-size:10.5px;color:var(--red);font-weight:600}
.chk{display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer;user-select:none}
input[type=checkbox],input[type=radio]{accent-color:var(--ind);width:13px;height:13px;cursor:pointer;flex:none}

/* ---------- Definition rows ---------- */
.dl{display:grid;grid-template-columns:140px 1fr;gap:0;font-size:12px;align-items:baseline}
.dl dt{color:var(--ink-3);font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:6px 0;border-bottom:1px solid var(--line)}
.dl dd{margin:0;font-weight:500;padding:6px 0;border-bottom:1px solid var(--line)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink-3);font-size:11.5px}
.kv .v{font-weight:600;font-size:12px}

/* ---------- Toast ---------- */
.toasts{position:fixed;right:16px;bottom:16px;z-index:9000;display:flex;flex-direction:column;gap:7px;max-width:390px}
.toast{
  background:var(--ink);color:#E7ECF2;border-radius:var(--r2);padding:9px 12px;box-shadow:var(--sh-pop);
  font-size:12px;display:flex;gap:9px;align-items:flex-start;animation:tin .2s ease-out;border-left:3px solid var(--grn-2);
}
.toast.err{border-left-color:#E06A5E}
.toast.warn{border-left-color:#DCA13C}
.toast.info{border-left-color:var(--ind-2)}
.toast b{display:block;font-weight:700;margin-bottom:1px}
.toast .x{margin-left:auto;opacity:.5;cursor:pointer;background:none;border:0;color:inherit;padding:0 2px}
.toast .x:hover{opacity:1}
@keyframes tin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

/* ---------- Modal ---------- */
.veil{position:fixed;inset:0;background:rgba(15,20,27,.5);z-index:8000;display:grid;place-items:center;padding:22px;animation:fin .12s}
@keyframes fin{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:var(--r2);box-shadow:var(--sh-pop);width:min(640px,100%);max-height:88vh;display:flex;flex-direction:column;animation:min .16s ease-out;border:1px solid var(--line-2)}
.modal.wide{width:min(1000px,100%)}
.modal.narrow{width:min(450px,100%)}
@keyframes min{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal-h{padding:12px 15px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:10px;background:var(--surface-2)}
.modal-h h3{font-size:14px;font-weight:660;letter-spacing:-.01em}
.modal-h .sub{font-size:11px;color:var(--ink-3);margin-top:1px}
.modal-b{padding:15px;overflow-y:auto;flex:1}
.modal-f{padding:11px 15px;border-top:1px solid var(--line);display:flex;gap:7px;justify-content:flex-end;background:var(--surface-2);flex-wrap:wrap}
.modal-f .l{margin-right:auto}
.x-btn{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--ink-3);padding:2px;border-radius:2px;display:grid;place-items:center;flex:none}
.x-btn:hover{background:var(--surface-3);color:var(--ink)}

/* ---------- Drawer ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(780px,100%);background:var(--surface);z-index:8100;box-shadow:var(--sh-pop);display:flex;flex-direction:column;animation:din .2s ease-out;border-left:1px solid var(--line-2)}
@keyframes din{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
.drawer-h{padding:12px 15px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:10px;background:var(--surface-2)}
.drawer-h h3{font-size:15px;font-weight:660;letter-spacing:-.015em}
.tabs{display:flex;gap:0;padding:0 10px;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--surface)}
.tab{padding:7px 10px;border:0;background:none;cursor:pointer;font-size:12px;font-weight:540;color:var(--ink-3);border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ind);border-bottom-color:var(--ind);font-weight:660}
.drawer-b{flex:1;overflow-y:auto;padding:14px 15px}
.drawer-f{padding:10px 15px;border-top:1px solid var(--line);display:flex;gap:6px;background:var(--surface-2);flex-wrap:wrap;align-items:center}

/* ---------- AI panel ---------- */
.ai{border:1px solid var(--vio-line);border-left:3px solid var(--vio);border-radius:var(--r);background:var(--vio-soft);padding:11px 12px}
.ai-h{display:flex;align-items:center;gap:7px;margin-bottom:7px;flex-wrap:wrap}
.ai-t{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--vio)}
.ai-conf{margin-left:auto;font-size:10.5px;color:var(--vio);font-weight:700}
.ai-reason{font-size:11.5px;color:var(--ink-2);line-height:1.55;margin-top:7px;padding:7px 9px;background:rgba(255,255,255,.7);border-radius:var(--r)}
.ai-row{display:flex;align-items:center;gap:9px;padding:4px 0;border-bottom:1px solid var(--vio-line)}
.ai-row:last-of-type{border-bottom:0}
.ai-k{font-size:10px;color:var(--vio);width:120px;flex:none;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.ai-v{font-weight:600;font-size:12px}
.meter{height:3px;border-radius:2px;background:var(--vio-line);overflow:hidden;width:50px;flex:none}
.meter i{display:block;height:100%;background:var(--vio)}
.human-gate{margin-top:9px;padding:8px 10px;border:1px solid var(--line-2);border-left:3px solid var(--ink);border-radius:var(--r);background:var(--surface);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.human-gate .lbl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}

/* ---------- Callouts ---------- */
.note{border-radius:var(--r);padding:9px 11px;font-size:12px;display:flex;gap:9px;align-items:flex-start;border:1px solid;border-left-width:3px;line-height:1.5}
.note b{display:block;margin-bottom:2px;font-weight:700}
.note.warn{background:var(--amb-soft);border-color:var(--amb-line);border-left-color:var(--amb);color:var(--amb)}
.note.bad{background:var(--red-soft);border-color:var(--red-line);border-left-color:var(--red);color:var(--red)}
.note.ok{background:var(--grn-soft);border-color:var(--grn-line);border-left-color:var(--grn);color:var(--grn)}
.note.info{background:var(--cyn-soft);border-color:var(--cyn-line);border-left-color:var(--cyn);color:var(--cyn)}
.note.plain{background:var(--surface-2);border-color:var(--line-2);border-left-color:var(--ink-4);color:var(--ink-2)}
.note .body{flex:1;color:inherit}
.note .body .sub{font-weight:450;opacity:.95}

/* ---------- Progress ---------- */
.bar{height:6px;border-radius:1px;background:var(--surface-3);overflow:hidden;position:relative}
.bar i{display:block;height:100%;background:var(--ind-2);transition:width .4s ease-out}
.bar i.warn{background:#C08A16}.bar i.bad{background:var(--red)}
.bar.thick{height:9px}

/* ---------- Chain / steps ---------- */
.chain{display:flex;flex-direction:column}
.step{display:flex;gap:10px;position:relative;padding-bottom:12px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:9px;top:20px;bottom:0;width:1px;background:var(--line-2)}
.step:last-child::before{display:none}
.step-dot{width:19px;height:19px;border-radius:2px;flex:none;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--surface);font-size:9.5px;font-weight:800;color:var(--ink-3);z-index:1}
.step.done .step-dot{background:var(--grn);border-color:var(--grn);color:#fff}
.step.now .step-dot{border-color:var(--ind);color:var(--ind);box-shadow:0 0 0 2px var(--ind-soft)}
.step.no .step-dot{background:var(--red);border-color:var(--red);color:#fff}
.step-b{flex:1}
.step-t{font-size:12px;font-weight:600}
.step-s{font-size:11px;color:var(--ink-3);margin-top:1px}

/* ---------- Verification ---------- */
.vrow{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}
.vrow:last-child{border-bottom:0}
.vmark{width:16px;height:16px;border-radius:2px;display:grid;place-items:center;flex:none;font-size:9.5px;font-weight:800;color:#fff}
.vmark.ok{background:var(--grn-2)}.vmark.no{background:var(--red)}.vmark.na{background:var(--ink-4)}
.vrow .why{margin-left:auto;font-size:11px;color:var(--ink-3);text-align:right;max-width:54%}
.final{margin-top:11px;padding:11px 13px;border-radius:var(--r);border:1px solid;border-left-width:3px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.final.ok{background:var(--grn-soft);border-color:var(--grn);color:var(--grn)}
.final.no{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.final .st{font-size:15px;font-weight:800;letter-spacing:.03em}
.final .rs{font-size:11.5px;font-weight:500;opacity:.95}

/* ---------- Timeline ---------- */
.tl{position:relative;padding-left:16px}
.tl::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:1px;background:var(--line-2)}
.tl-i{position:relative;padding:0 0 12px}
.tl-i::before{content:"";position:absolute;left:-15px;top:5px;width:7px;height:7px;border-radius:1px;background:var(--surface);border:1px solid var(--line-3)}
.tl-i.ai::before{border-color:var(--vio);background:var(--vio)}
.tl-i.ok::before{border-color:var(--grn-2);background:var(--grn-2)}
.tl-i.bad::before{border-color:var(--red);background:var(--red)}
.tl-t{font-size:12px;font-weight:600}
.tl-m{font-size:10.5px;color:var(--ink-3);margin-top:1px}
.diff{font-size:11px;margin-top:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.old{text-decoration:line-through;color:var(--red);background:var(--red-soft);padding:0 4px;border-radius:2px}
.new{color:var(--grn);background:var(--grn-soft);padding:0 4px;border-radius:2px;font-weight:600}

/* ---------- Chips ---------- */
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{padding:2px 8px;border-radius:2px;border:1px solid var(--line-2);background:var(--surface);font-size:11px;cursor:pointer;color:var(--ink-2);font-weight:540}
.chip:hover{background:var(--surface-2)}
.chip.on{background:var(--ind);color:#fff;border-color:var(--ind)}

/* ---------- Misc ---------- */
.sep{height:1px;background:var(--line);margin:12px 0}
.muted{color:var(--ink-3)}
.small{font-size:11.5px}
.tiny{font-size:10.5px}
.strong{font-weight:660}
.right{text-align:right}
.center{text-align:center}
.flex{display:flex;gap:8px;align-items:center}
.flex.wrap{flex-wrap:wrap}
.between{display:flex;gap:8px;align-items:center;justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:8px}
.stack.s{gap:5px}
.nowrap{white-space:nowrap}
.mask{font-family:var(--mono);letter-spacing:.05em}
.thumb{width:100%;aspect-ratio:1/1.28;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface-2);overflow:hidden;display:grid;place-items:center;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{border-color:var(--ind)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:12px}
.legend{display:flex;gap:11px;flex-wrap:wrap;font-size:11px;color:var(--ink-2)}
.legend i{width:8px;height:8px;border-radius:1px;display:inline-block;margin-right:5px;vertical-align:-1px}
.rulebox{border:1px solid var(--line);border-left:2px solid var(--line-3);border-radius:var(--r);padding:10px 12px;background:var(--surface)}
.rulebox.off{opacity:.6;background:var(--surface-2)}
.cond{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--line-2);padding:1px 7px;border-radius:2px;font-size:11px;font-family:var(--mono)}
.cond.then{background:var(--grn-soft);border-color:var(--grn-line);color:var(--grn)}
.arrow{color:var(--ink-4);font-weight:700}
.jrow{display:grid;grid-template-columns:1fr 116px 116px;gap:8px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12px}
.jrow.h{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:700;border-bottom:1px solid var(--line-2)}
.jrow.tot{border-bottom:0;border-top:1px solid var(--ink);font-weight:700;margin-top:3px;padding-top:6px}
.upload{border:1px dashed var(--line-3);border-radius:var(--r);padding:20px;text-align:center;background:var(--surface-2);cursor:pointer;transition:.12s}
.upload:hover,.upload.over{border-color:var(--ind);background:var(--ind-soft)}
.hidden{display:none !important}

/* ---------- Email / outbox ---------- */
.mailprev{
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);overflow:hidden;
}
.mailprev .mh{padding:8px 11px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:11px}
.mailprev .mh .row{display:flex;gap:8px;padding:1px 0}
.mailprev .mh .lab{width:52px;flex:none;color:var(--ink-3);text-transform:uppercase;font-size:9.5px;letter-spacing:.06em;font-weight:700;padding-top:2px}
.mailprev .mb{padding:11px;font-size:12px;line-height:1.6;white-space:pre-wrap;font-family:var(--mono);font-size:11px;color:var(--ink-2);max-height:250px;overflow-y:auto}
.recip{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;background:var(--surface)}
.recip:hover{border-color:var(--ind)}
.recip.on{border-color:var(--ind);background:var(--ind-soft);box-shadow:inset 2px 0 0 var(--ind)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-2-1,.g-1-2{grid-template-columns:1fr}
  .searchwrap{width:200px}
}
@media (max-width:860px){
  .g2,.g3,.g4,.g6{grid-template-columns:1fr}
  .fgrid,.fgrid.three{grid-template-columns:1fr}
  .span2{grid-column:span 1}
  .wrap{padding:14px 11px 56px}
  .drawer{width:100%}
  .dl{grid-template-columns:1fr;gap:0}
  .dl dt{border-bottom:0;padding-bottom:0}
  .brand-sub{display:none}
  .searchwrap{width:150px}
  .who-n,.who-r{display:none}
  .results{width:min(94vw,400px);right:0;left:auto}
}
@media (max-width:640px){
  table.t{min-width:520px}
  .ph h1{font-size:17px}
  .stat-v{font-size:18px}
  .brand{border-right:0;padding-right:6px}
  .brand-name{display:none}
}
@media print{.topbar,.sectionnav,.proto,.drawer,.veil{display:none}.content{overflow:visible}}

/* ---------- Automatic approval switch ---------- */
.autoap{
  display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 9px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);
  font-size:11.5px;color:var(--ink-2);white-space:nowrap;
}
.autoap.on{border-color:var(--ind-line);background:var(--ind-soft);color:var(--ind)}
.autoap-l{font-weight:600;letter-spacing:.01em}
.autoap-sw{
  position:relative;width:28px;height:15px;border-radius:8px;border:1px solid var(--line-3);
  background:var(--surface-3);cursor:pointer;padding:0;flex:none;transition:background .12s,border-color .12s;
}
.autoap.on .autoap-sw{background:var(--ind);border-color:var(--ind)}
.autoap-sw:disabled{cursor:not-allowed;opacity:.55}
.autoap-sw:focus-visible{outline:2px solid var(--ind);outline-offset:2px}
.autoap-knob{
  position:absolute;top:1px;left:1px;width:11px;height:11px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(16,32,26,.3);transition:transform .12s;
}
.autoap.on .autoap-knob{transform:translateX(13px)}
.autoap-v{font-weight:660;font-variant-numeric:tabular-nums}
.autoap.locked{color:var(--ink-3)}

/* ---------- Workflow group strip ---------- */
.listbar{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.gstrip{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 10px}
.gchip{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  font-size:11.5px;font-weight:560;color:var(--ink-2);white-space:nowrap;
}
.gchip:hover{border-color:var(--line-2);background:var(--surface-2)}
.gchip.on{background:var(--ind);border-color:var(--ind);color:#fff;font-weight:660}
.gchip-n{
  font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:700;
  background:var(--surface-3);color:var(--ink-2);border-radius:2px;padding:0 4px;
}
.gchip.on .gchip-n{background:rgba(255,255,255,.22);color:#fff}

/* ---------- Read a vendor's details off a document ---------- */
.scanbox{
  border:1px dashed var(--ind-line);border-radius:var(--r2);background:var(--ind-soft);
  padding:10px 12px;margin:0 0 14px;
}
.scanbox-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.scanbox-h strong{font-size:12.5px;color:var(--ind)}
.scanbox-h .sub{font-size:11px;color:var(--ink-3)}
.scanbox-b{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.scanbox-b input[type=file]{flex:1;min-width:180px;height:28px;padding:3px 6px;font-size:11.5px;background:var(--surface)}
.scanbox textarea{margin-top:8px;font-family:var(--mono);font-size:11.5px}
.scan-sugg{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.scan-sugg-h{font-size:11px;color:var(--ink-3);width:100%}
.inp.filled-by-scan{background:#F2FAF5;border-color:var(--ind-line)}
.autoap-co{display:inline-flex;align-items:center;gap:6px;margin-left:4px;padding-left:9px;border-left:1px solid var(--line-2)}
.autoap-co label{font-size:10.5px;color:var(--ink-3);text-transform:none;letter-spacing:0;margin:0}
.autoap-co select{height:22px;padding:0 20px 0 6px;font-size:11px;max-width:190px}

/* ---------- Supplier form links on the onboarding screen ---------- */
.formlink{display:flex;align-items:center;gap:8px;margin:8px 0 4px;flex-wrap:wrap}
.formlink code{font-family:var(--mono);font-size:11.5px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:3px 7px;word-break:break-all}
.formlink-co{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.formlink-co > span{font-size:12px;font-weight:600;min-width:140px}

/* A long link or token that must wrap rather than overflow its box. */
.breakall{word-break:break-all}