/* ==========================================================================
   L6 — CLEAN
   The look, on every page: a pure white page, white cards lifted by a soft
   shadow and a hairline, rounded corners, pill navigation, one blue accent
   and calm slate text. Loaded last, so it restyles the product without
   touching the stylesheets that lay it out - every screen keeps its markup,
   its behaviour and its scripts.

   Colour has a job or it is not used:
     blue   the action, the place you are, the brand
     green  approved, paid, done
     amber  waiting for someone
     red    rejected, failed, overdue
   Everything else is white and four steps of slate.

   Motion is short and quiet: 120-160ms colour and shadow changes, a slight
   press on buttons, and nothing at all for anyone who asked their system to
   reduce motion.
   ========================================================================== */

:root{
  --on-accent:#FFFFFF;
  --rc:16px;             /* cards, drawers, dialogs */
  --rp:999px;            /* pills */
  --shadow-1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.03);
  --shadow-2:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.06);
  --shadow-3:0 12px 40px rgba(16,24,40,.12),0 2px 8px rgba(16,24,40,.06);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Page and type ------------------------------------------------- */
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--sans);font-size:13.5px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{display:none}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.02em}
a{color:var(--ind)}
.ph,.page-h{margin-bottom:18px}
.ph h1,.page-h h1{font-size:24px;font-weight:650;letter-spacing:-.03em;color:var(--ink)}
.ph p,.page-h .sub{font-size:13px;color:var(--ink-3);margin-top:4px}
.wrap,.pad{padding:24px 28px 72px}
.content{background:var(--bg)}
.content::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--bg)}
.small,.cellsub,.hint{color:var(--ink-3)}

/* ---------- The masthead -------------------------------------------------- */
.topbar{
  height:60px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:none;
  padding:0 24px;gap:18px;color:var(--ink);
}
.brand{border-right:0;padding-right:6px;gap:10px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{
  width:32px;height:32px;border-radius:10px;background:var(--accent);color:var(--on-accent);
  font-size:14px;font-weight:750;box-shadow:none;
}
.brand-name{font-size:15.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.brand-sub{font-size:9px;letter-spacing:.14em;color:var(--ink-3);margin-top:2px}

.groupnav{gap:4px;align-items:center}
.gtab{
  height:36px;padding:0 14px;border-radius:var(--rp);color:var(--ink-2);font-size:13px;font-weight:550;
  transition:background-color .14s var(--ease),color .14s var(--ease);
}
.gtab:hover{background:var(--surface-3);color:var(--ink)}
.gtab.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.gtab.on::after{display:none}
.gtab .gn{background:var(--red);color:#FFFFFF;border-radius:var(--rp);padding:0 6px}
.gtab.on .gn{background:var(--surface);color:var(--accent)}

.gsearch-in{width:220px;transition:width .2s var(--ease),border-color .14s var(--ease),box-shadow .14s var(--ease),background-color .14s var(--ease)}
.gsearch-in:focus{width:min(340px,30vw)}
.search,.gsearch-in{
  height:38px;border-radius:var(--rp);background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink);font-size:13px;padding:0 16px;
}
.search{transition:border-color .14s var(--ease),box-shadow .14s var(--ease),background-color .14s var(--ease)}
.search::placeholder{color:var(--ink-4)}
.search:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);color:var(--ink)}
.gsearch-out{border-radius:var(--rc);border:1px solid var(--line);box-shadow:var(--shadow-3);padding:8px}
.gs-item{border-radius:10px}
.gs-item:hover,.gs-item.on{background:var(--accent-soft)}

.iconbtn{
  height:38px;width:38px;justify-content:center;padding:0;border-radius:var(--rp);
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);box-shadow:none;
}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.who{
  height:42px;padding:0 14px 0 4px;gap:9px;border-radius:var(--rp);
  background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:none;
}
.who:hover{background:var(--surface-2)}
.who-n{font-size:12.5px;font-weight:600;color:var(--ink)}
.who-r{font-size:11px;color:var(--ink-3)}
.av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:11px;box-shadow:none}
.av.sm{width:22px;height:22px;font-size:8.5px}
.av.lg{width:44px;height:44px;font-size:14px;border-radius:50%}
.env{border-radius:var(--rp);background:var(--amb-soft);border:1px solid var(--amb-line);color:var(--amb);padding:3px 10px;font-weight:600}

/* The sections of the chosen group: a row of pills under the masthead. */
.sectionnav{
  height:56px;align-items:center;gap:4px;padding:0 24px;background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:none;
}
.slink,.tab{
  height:34px;padding:0 14px;border-radius:var(--rp);border-bottom:0;margin-bottom:0;
  color:var(--ink-3);font-size:13px;font-weight:550;
  transition:background-color .14s var(--ease),color .14s var(--ease);
}
.slink:hover,.tab:hover{background:var(--surface-3);color:var(--ink)}
.slink.on,.tab.on{background:var(--accent-soft);color:var(--ind);font-weight:600;border-bottom:0}
/* The sliding underline belonged to the old tabs; the pill marks the place. */
.sectionnav .nav-ink{display:none}
.slink .sn{border:0;border-radius:var(--rp);padding:0 6px;background:var(--red-soft);color:var(--red)}
.slink .sn.mute{background:var(--surface-3);color:var(--ink-3)}

/* ---------- Cards and tiles ------------------------------------------------ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rc);box-shadow:var(--shadow-1);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.card-h{
  background:var(--surface);border-bottom:1px solid var(--line);border-radius:var(--rc) var(--rc) 0 0;
  padding:14px 18px;
}
.card-h h3{font-size:14px;font-weight:620;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.card-h .sub{font-size:12px;color:var(--ink-3)}
.card-b{padding:18px}
.card-b.flush{padding:0}
.card-b.flush > table.t tr:last-child td,
.card-b.flush > .tw table.t tr:last-child td{border-bottom:0}

.rgrid{gap:14px}
.stat{
  background:var(--surface);border:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--rc);
  padding:16px 18px;box-shadow:var(--shadow-1);
  transition:box-shadow .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.stat:hover{background:var(--surface);border-color:var(--line-2);border-left-color:var(--line-2);box-shadow:var(--shadow-2)}
.stat-l{font-size:12px;font-weight:550;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.stat-v{
  font-family:var(--sans);font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1.15;margin-top:6px;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.stat-d{font-size:12px;color:var(--ink-3);margin-top:4px}

/* ---------- Tables ---------------------------------------------------------- */
table.t{font-size:13px}
table.t th{
  background:var(--surface-2);color:var(--ink-3);font-size:11.5px;font-weight:600;letter-spacing:.01em;
  text-transform:none;border-bottom:1px solid var(--line);padding-top:10px;padding-bottom:10px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
table.t td{border-bottom:1px solid var(--line);color:var(--ink-2);padding-top:11px;padding-bottom:11px}
table.t td strong{color:var(--ink)}
table.t tbody tr{transition:background-color .12s var(--ease)}
table.t tbody tr:hover{background:var(--surface-2)}
table.t tbody tr.sel,table.t tbody tr:focus-visible{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.card > table.t:first-child th:first-child,.card-b.flush table.t th:first-child{border-top-left-radius:0}
.money,.mono{font-variant-numeric:tabular-nums}
.dl dt{text-transform:none;letter-spacing:0;font-size:12px;font-weight:550;color:var(--ink-3)}
.dl dd{color:var(--ink)}
.kv .k{color:var(--ink-3)}

/* ---------- Buttons --------------------------------------------------------- */
.btn{
  height:36px;padding:0 16px;border-radius:10px;font-size:13px;font-weight:560;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink);box-shadow:var(--shadow-1);
  transition:background-color .14s var(--ease),border-color .14s var(--ease),box-shadow .14s var(--ease),transform .1s var(--ease);
}
.btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--line-3);box-shadow:var(--shadow-1)}
.btn:active:not(:disabled){transform:scale(.98)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:0 1px 2px rgba(16,24,40,.08)}
.btn.pri:hover:not(:disabled){background:var(--accent-2);border-color:var(--accent-2);box-shadow:0 4px 12px rgba(37,99,235,.22)}
.btn.danger{background:var(--surface);border-color:var(--red-line);color:var(--red)}
.btn.danger:hover:not(:disabled){background:var(--red-soft);border-color:var(--red)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn.ghost:hover:not(:disabled){background:var(--surface-3);border-color:transparent}
.btn.sm{height:30px;padding:0 12px;font-size:12.5px;border-radius:9px}
.btn.xs{height:24px;padding:0 9px;font-size:11.5px;border-radius:7px}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.btn.pri.v-busy::after{border-color:var(--on-accent) var(--on-accent) var(--on-accent) transparent}

.chip,.gchip{
  border-radius:var(--rp);padding:5px 13px;font-size:12.5px;font-weight:550;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);
  transition:background-color .14s var(--ease),color .14s var(--ease),border-color .14s var(--ease);
}
.chip:hover,.gchip:hover{background:var(--surface-2);border-color:var(--line-3)}
.chip.on,.gchip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ---------- Badges ---------------------------------------------------------- */
.b{
  border:0;border-radius:var(--rp);padding:2px 10px;font-size:11.5px;font-weight:600;
  letter-spacing:0;text-transform:none;line-height:1.6;
}
.b-ok{background:var(--grn-soft);color:var(--grn)}
.b-warn{background:var(--amb-soft);color:var(--amb)}
.b-bad{background:var(--red-soft);color:var(--red)}
.b-info{background:var(--cyn-soft);color:var(--cyn)}
.b-neutral{background:var(--surface-3);color:var(--ink-2)}
.b-ai{background:var(--vio-soft);color:var(--vio)}
.pipe-s{border-radius:var(--rp);text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:560}
.pipe-s.done{background:var(--grn-soft);color:var(--grn);border-color:var(--grn-line)}
.pipe-s.now{background:var(--accent-soft);color:var(--ind);border-color:var(--ind-line)}
.dot{border-radius:50%}
.dot.ok{background:var(--grn)}.dot.warn{background:#D97706}.dot.bad{background:var(--red)}

/* ---------- Forms ----------------------------------------------------------- */
.f > label,.f label{color:var(--ink-2);font-size:12px;font-weight:560;text-transform:none;letter-spacing:0}
.inp,select.inp,textarea.inp,.ms-box{
  height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);
  font-size:13px;padding:0 12px;box-shadow:none;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
textarea.inp{height:auto;padding:9px 12px}
.inp.sm,select.inp.sm{height:30px;border-radius:9px;font-size:12.5px;padding:0 9px}
.inp::placeholder{color:var(--ink-4)}
.inp:hover{border-color:var(--line-3)}
.inp:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.inp.err{border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.inp[readonly]{background:var(--surface-2)}
.fgrid{gap:14px 16px}
.upload{border:1.5px dashed var(--line-2);background:var(--surface-2);border-radius:var(--rc)}
.upload:hover{border-color:var(--accent);background:var(--accent-soft)}
.autoap.on{border-color:var(--ind-line);background:var(--accent-soft);color:var(--ind)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}

/* ---------- Notices, drawers, dialogs, menus ------------------------------ */
.msg,.note{border-radius:12px;border:1px solid;border-left-width:1px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.msg.info,.note.info{background:var(--cyn-soft);border-color:var(--cyn-line);color:var(--ink-2)}
.msg.ok,.note.ok{background:var(--grn-soft);border-color:var(--grn-line);color:var(--ink)}
.msg.warn,.note.warn{background:var(--amb-soft);border-color:var(--amb-line);color:var(--amb)}
.msg.bad,.note.bad{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.veil{background:rgba(15,23,42,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.drawer{
  background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-3);
  border-radius:var(--rc) 0 0 var(--rc);-webkit-backdrop-filter:none;backdrop-filter:none;
}
.drawer-h,.drawer-f,.modal-h,.modal-f{background:var(--surface);border-color:var(--line)}
.drawer-h{border-top-left-radius:var(--rc)}
.drawer-f{border-bottom-left-radius:var(--rc)}
.drawer-h h2,.modal-h h2{font-size:17px;font-weight:650;letter-spacing:-.02em}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-3);-webkit-backdrop-filter:none;backdrop-filter:none}
.modal-h{border-radius:20px 20px 0 0}
.modal-f{border-radius:0 0 20px 20px}
.pop{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-3);-webkit-backdrop-filter:none;backdrop-filter:none}
.pop-h{background:var(--surface);border-bottom:1px solid var(--line)}
.menu-item{border-radius:9px}
.menu-item:hover,.notif:hover{background:var(--surface-2)}
.notif.unread{border-left-color:var(--accent);background:var(--accent-soft)}
.toast{
  background:#111827;color:#FFFFFF;border:0;border-left:0;border-radius:14px;box-shadow:var(--shadow-3);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.toast-i,.toast.warn .toast-i{background:var(--accent);color:var(--on-accent);border-radius:50%}
.toast.err .toast-i{background:#F87171;color:#111827}
.toast.info .toast-i{background:#FFFFFF;color:#111827}

/* ---------- Progress and charts ------------------------------------------- */
.bar{background:var(--surface-3);border-radius:var(--rp);overflow:hidden}
.bar i{background:var(--accent);border-radius:var(--rp)}
.meter{background:var(--surface-3);border-radius:var(--rp)}
.meter i{background:var(--accent);border-radius:var(--rp)}
.ch-hb-t{background:var(--surface-3);border-radius:var(--rp)}
.ch-swatch{background:var(--accent);border-radius:3px}
.ch-grid{stroke:var(--line)}
.ch-axis,.ch-lab{fill:var(--ink-3)}
.ai{border-radius:12px;border-left-color:var(--accent)}

/* ---------- Sign-in, password and error pages ----------------------------- */
.login-chrome{background:var(--surface);border-bottom:1px solid var(--line)}
.auth,.auth-main{background:var(--surface)}
.auth-aside{
  background:var(--surface);background-image:none;color:var(--ink);
  border-right:1px solid var(--line);
}
.auth-aside::before,.auth-aside::after{display:none}
.auth-brand{color:var(--ink)}
.auth-brand .mark{background:var(--accent);color:var(--on-accent);border-color:var(--accent);border-radius:12px;box-shadow:none}
.auth-brand .sub{color:var(--ink-3)}
.auth-h{color:var(--ink)}
.auth-h em{color:var(--accent)}
.auth-lede{color:var(--ink-2)}
.auth-point{color:var(--ink-2)}
.auth-point strong{color:var(--ink)}
.auth-point svg,.auth-check{color:var(--accent)}
.auth-foot{color:var(--ink-3)}
.auth-foot a{color:var(--ink-2)}
.auth-card{
  max-width:420px;padding:32px 32px 26px;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-2);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.auth-input{background:var(--surface);border-radius:10px;border-color:var(--line-2)}
.auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.auth-submit{
  background:var(--accent);color:var(--on-accent);border-radius:10px;font-weight:600;box-shadow:none;
  transition:background-color .14s var(--ease),box-shadow .14s var(--ease);
}
.auth-submit:hover:not(:disabled){background:var(--accent-2);box-shadow:0 4px 12px rgba(37,99,235,.22)}
.auth-spin{border-color:rgba(255,255,255,.4);border-top-color:#FFFFFF}
.auth-link{color:var(--ind)}
.auth-alert{border-radius:12px}
.auth-alert.warn{background:var(--amb-soft);border-color:var(--amb-line);color:var(--amb)}

/* ---------- Public forms, approval links, the vendor portal ---------------- */
.pf-body{background:var(--surface)}
.pf-head{background:var(--surface);border-bottom:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
.pf-mark{background:var(--accent);color:var(--on-accent);border-radius:10px}
.pf-name{color:var(--ink)}
.pf-sub{color:var(--ink-3)}
.pf-card{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-2);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.pf-title{color:var(--ink);letter-spacing:-.025em}
.pf-lede{color:var(--ink-2)}
.pf-set legend{color:var(--ink-3);letter-spacing:.02em;text-transform:none;font-weight:600}
.pf-company{background:var(--accent-soft);border-color:var(--ind-line);color:var(--ind);border-radius:12px}
.pt-tab{border-radius:var(--rp);transition:background-color .14s var(--ease),color .14s var(--ease)}
.pt-tab.on,.pt-tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.legal-doc a,.legal-links a{color:var(--ind)}

@media (max-width:1480px){
  .brand-sub{display:none}
}
@media (max-width:1280px){
  .who-r{display:none}
  .gtab{padding:0 11px}
}
@media (max-width:760px){
  .topbar{padding:0 12px;gap:8px}
  .topright{gap:6px;min-width:0}
  .gsearch{margin-right:0;min-width:0}
  .gsearch-in,.gsearch-in:focus{width:min(150px,36vw)}
  .who{padding:0 4px;height:40px}
  .who > span:not(.av){display:none}
  .sectionnav{padding:0 12px}
  .wrap,.pad{padding:18px 14px 64px}
  .stat-v{font-size:24px}
}

@media (prefers-reduced-motion:reduce){
  .gtab,.slink,.tab,.search,.gsearch-in,.stat,.btn,.chip,.gchip,.inp,table.t tbody tr,.auth-submit,.pt-tab{transition:none}
  .btn:active:not(:disabled){transform:none}
}
@media print{
  .card,.stat,.pf-card{box-shadow:none}
}

/* New-device verification on the sign-in page. */
.auth-verify{display:grid;gap:14px}
.auth-otp{font-size:22px;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
.auth-captcha{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.auth-captcha img{border-radius:10px;border:1px solid var(--line)}
.auth-mini{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12.5px}

/* ---------- Home: the whole product as one flow ---------------------------- */
.home-hero{margin:4px 0 26px}
.home-hero h1{font-size:28px;font-weight:650;letter-spacing:-.035em}
.home-hero p{color:var(--ink-3);margin-top:4px;font-size:14px}
.flow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:4px 2px 14px}
.flow-stage{
  flex:1 1 0;min-width:170px;background:var(--surface);border:1px solid var(--line);border-radius:var(--rc);
  padding:14px;box-shadow:var(--shadow-1);transition:box-shadow .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.flow-stage.lit{border-color:var(--ind-line);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.flow-h{display:flex;align-items:center;gap:9px;font-weight:650;font-size:13.5px;color:var(--ink);margin-bottom:12px}
.flow-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700}
.flow-steps{display:grid;gap:8px}
.flow-step{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;font:inherit;
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
  font-size:13px;font-weight:560;transition:background-color .14s var(--ease),border-color .14s var(--ease),color .14s var(--ease),transform .12s var(--ease);
}
.flow-step:hover,.flow-step:focus-visible{background:var(--accent-soft);border-color:var(--ind-line);color:var(--ind);outline:none}
.flow-step:active{transform:scale(.98)}
.flow-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.flow-l{flex:1}
.flow-c{background:var(--red-soft);color:var(--red);border-radius:var(--rp);padding:0 7px;font-size:11.5px;font-weight:650}
.flow-arrow{flex:0 0 34px;display:flex;align-items:center;justify-content:center}
.flow-arrow span{position:relative;display:block;width:22px;height:0;border-top:2px dashed var(--ind-line)}
.flow-arrow span::after{content:"";position:absolute;right:-3px;top:-6px;border:5px solid transparent;border-left:7px solid var(--ind-line);border-right:0}
.flow-arrow span::before{content:"";position:absolute;left:0;top:-4px;width:6px;height:6px;border-radius:50%;background:var(--accent);animation:flow-dot 1.6s var(--ease) infinite}
@keyframes flow-dot{0%{transform:translateX(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(18px);opacity:0}}
.flow-tip{min-height:24px;margin-top:10px;color:var(--ink-2);font-size:13px;opacity:0;transition:opacity .16s var(--ease)}
.flow-tip.on{opacity:1}
@media (max-width:1100px){
  .flow{flex-wrap:wrap;gap:12px}
  .flow-stage{flex:1 1 calc(33% - 12px)}
  .flow-arrow{display:none}
}
@media (max-width:640px){.flow-stage{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){
  .flow-arrow span::before{animation:none;display:none}
  .flow-stage,.flow-step{transition:none}
  .flow-stage.lit{transform:none}
}

/* ---------- The menu under each group ---------------------------------------- */
.navdrop{
  position:fixed;z-index:70;min-width:220px;padding:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-3);animation:navdrop-in .14s var(--ease);
}
.navdrop-i{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:9px;
  color:var(--ink-2);text-decoration:none;font-size:13px;font-weight:550}
.navdrop-i:hover,.navdrop-i:focus-visible{background:var(--accent-soft);color:var(--ind);outline:none}
.navdrop-i.on{color:var(--ind);font-weight:650}
.navdrop-i .gn{background:var(--red);color:#fff;border-radius:var(--rp);padding:0 6px;font-size:11px}
@keyframes navdrop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- New notifications pop up --------------------------------------- */
.notif-stack{position:fixed;right:20px;top:72px;z-index:80;display:grid;gap:10px;width:min(360px,calc(100vw - 32px))}
.notif-pop{
  display:flex;gap:12px;align-items:flex-start;text-align:left;cursor:pointer;font:inherit;width:100%;
  padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-3);
  color:var(--ink-2);font-size:13px;animation:notif-in .22s var(--ease);transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.notif-pop b{display:block;color:var(--ink);font-weight:650;margin-bottom:2px}
.notif-pop.out{opacity:0;transform:translateX(16px)}
.notif-pop-i{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:5px;flex:none}
@keyframes notif-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.navdrop,.notif-pop{animation:none}}

/* ---------- Charts: a tooltip that follows the pointer ---------------------- */
.ch-tip{
  position:fixed;z-index:90;pointer-events:none;max-width:280px;padding:7px 11px;border-radius:9px;
  background:#0F172A;color:#FFFFFF;font-size:12px;font-weight:550;box-shadow:var(--shadow-3);
}
.ch-pick{cursor:pointer}
.ch-bar.ch-pick:hover .ch-barfill{opacity:.82}
.ch-seg.ch-pick:hover{opacity:.82}

/* ---------- Alignment: toolbars, columns, filters --------------------------- */
.card > .tbar:first-child{border-radius:var(--rc) var(--rc) 0 0}
.tbar{padding:12px 16px;gap:10px;align-items:center;background:var(--surface)}
.tbar .inp,.tbar select.inp,.tbar input[type="search"]{height:36px;margin:0}
.tbar input[type="search"]{border-radius:10px}
.pager{padding:10px 16px;align-items:center}
table.t th.r,table.t td.r{text-align:right}
table.t th,table.t td{vertical-align:middle}
table.t td{font-size:13px}
table.t th:first-child,table.t td:first-child{padding-left:18px}
table.t th:last-child,table.t td:last-child{padding-right:18px}

/* The invoice groups sit behind one filter button. */
.gfilter{position:relative;display:inline-block;margin:0 0 12px}
.gfilter-btn{gap:8px}
.gfilter-btn .gchip-n{margin-left:2px}
.gfilter-pop{
  position:absolute;left:0;top:calc(100% + 6px);z-index:30;display:flex;flex-wrap:wrap;gap:6px;width:max-content;max-width:min(560px,90vw);
  padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-3);margin:0;
}
.gchip-n{background:var(--surface-3);color:var(--ink-2);border-radius:var(--rp);padding:0 7px;margin-left:6px;font-size:11.5px;font-weight:600}
.gchip.on .gchip-n{background:rgba(255,255,255,.22);color:var(--on-accent)}

/* A group with one page needs no row of pills under the menu. */
.sectionnav:not(:has(.tab + .tab)){display:none}
@media (max-width:1480px){
  .gtab{padding:0 12px}
  .gsearch-in{width:180px}
}
@media (max-width:1366px){
  .brand > span:last-child{display:none}
  .gtab{padding:0 10px;font-size:12.5px}
}
.content:focus{outline:none}

/* Home, eight menus: a 4-column flow, read left to right, row by row. */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 26px;overflow:visible}
.flow-arrow{display:none}
.flow-stage{position:relative;min-width:0}
.flow-stage::after{
  content:"";position:absolute;right:-20px;top:50%;width:12px;height:12px;margin-top:-6px;
  border-top:2px solid var(--ind-line);border-right:2px solid var(--ind-line);transform:rotate(45deg);
}
.flow-stage:nth-of-type(4n)::after,.flow-stage:last-of-type::after{display:none}
.flow-soon{background:var(--surface-3);color:var(--ink-3);border-radius:var(--rp);padding:0 7px;font-size:11px;font-weight:600}
@media (max-width:1100px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-stage:nth-of-type(2n)::after{display:none}}
@media (max-width:640px){.flow{grid-template-columns:1fr}.flow-stage::after{display:none}}

/* A page that is not ready yet. */
.soon{max-width:520px;margin:64px auto;text-align:center;padding:48px 32px;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-2)}
.soon h1{font-size:24px;margin-top:16px}
.soon p{color:var(--ink-3);margin-top:6px;font-size:15px}
.soon-i{display:inline-block;width:52px;height:52px;border-radius:16px;background:var(--accent-soft);border:2px solid var(--ind-line)}

/* Nine menus in the masthead. */
@media (max-width:1600px){.gtab{padding:0 11px}}
@media (max-width:1440px){.gtab{padding:0 9px;font-size:12.5px}.gsearch-in{width:160px}}
.rights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.right{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}

/* Profit & loss: comparison and the search above its tables. */
.delta{font-weight:650;font-size:12px}
.delta.up{color:var(--red)}
.delta.down{color:var(--grn)}
.pl-tools{display:flex;gap:10px;align-items:center}
.pl-tools input{flex:1;height:38px}
.pl-tools select{width:auto;height:38px}

/* Dashboard: four headline figures, then small tiles. */
.dash-mini .stat{padding:12px 14px}
.dash-mini .stat-v{font-size:20px;margin-top:4px}
.dash-mini .stat-d{font-size:11.5px}
.dash-mini .stat-split,.dash-mini .stat-more{display:none}
.ch-track{stroke:var(--surface-3)}
.ch-seg{transition:opacity .15s var(--ease),stroke-width .15s var(--ease)}
.ch-seg.ch-pick:hover{stroke-width:30}
.ch-barfill{transition:opacity .15s var(--ease)}
.ch-lgrow{border-radius:8px;transition:background-color .14s var(--ease)}
.ch-lgrow.ch-pick:hover{background:var(--surface-2)}
.flow{align-items:start}
.tbar-date{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);font-weight:550}
.tbar-date .inp{width:150px}

/* A count beside a page name is a badge, never part of the name. */
.tab .gn,.slink .gn{
  display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:7px;padding:0 5px;
  border-radius:var(--rp);background:var(--red);color:#FFFFFF;font-size:10.5px;font-weight:700;line-height:1;
}


/* ---------- Home, second pass: a welcome, what is waiting, coloured menus ----- */
.home-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:18px;margin-bottom:22px}
.home-hero{
  margin:0;padding:26px 28px;border:1px solid var(--line);border-radius:20px;background:var(--surface);
  box-shadow:var(--shadow-1);position:relative;overflow:hidden;
}
.home-hero::after{
  content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:var(--accent-soft);pointer-events:none;
}
.home-hero > *{position:relative;z-index:1}
.home-date{font-size:12px;font-weight:600;color:var(--ind);letter-spacing:.02em}
.home-hero h1{font-size:30px;margin-top:6px}
.home-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.home-wait{padding:20px 22px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-1)}
.home-wait-h{font-size:13px;font-weight:650;color:var(--ink);margin-bottom:10px}
.home-wait-i{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;color:var(--ink-2);text-decoration:none;font-weight:550;font-size:13.5px;transition:background-color .14s var(--ease)}
.home-wait-i:hover{background:var(--surface-2)}
.home-wait-n{min-width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--red-soft);color:var(--red);font-weight:700}
.home-clear{display:flex;align-items:center;gap:10px;color:var(--grn);font-weight:600;padding:10px 4px}
.home-tick{width:26px;height:26px;border-radius:50%;background:var(--grn-soft);border:2px solid var(--grn-line)}

.flow-stage{
  --stage:var(--accent);border-top:3px solid var(--stage);padding:16px;
  animation:stage-in .4s var(--ease) both;animation-delay:calc(var(--i, 0) * 45ms);
}
@keyframes stage-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.flow-stage.lit{border-color:var(--line);border-top-color:var(--stage)}
.flow-h{gap:10px}
.flow-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--stage);background:var(--surface-2);border:1px solid var(--line)}
.flow-t{flex:1;font-size:14.5px}
.flow-n{width:24px;height:24px;font-size:11px;background:var(--surface-3);color:var(--ink-3)}
.flow-step{background:var(--surface);gap:8px}
.flow-step:hover,.flow-step:focus-visible{border-color:var(--stage);color:var(--ink);background:var(--surface-2)}
.flow-go{color:var(--ink-4);font-size:16px;line-height:1;transition:transform .14s var(--ease)}
.flow-step:hover .flow-go{transform:translateX(3px);color:var(--stage)}
.flow-stage::after{border-color:var(--line-3)}
.flow-tip{display:inline-block;padding:8px 14px;border-radius:var(--rp);background:var(--surface-2);border:1px solid var(--line)}
@media (max-width:900px){.home-top{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.flow-stage{animation:none}}

.drawer-h .super-del{margin-left:auto;margin-right:8px}
.bg-equiv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bg-eq{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.bg-eq span{font-size:11.5px;color:var(--ink-3)}
.bg-eq strong{font-size:16px;font-variant-numeric:tabular-nums}

/* Budget against actual: three columns per period, as in the sheet. */
.bg-table th.bva-p{text-align:center;border-left:1px solid var(--line);color:var(--ink);font-weight:650}
.bg-table th.bva-b,.bg-table td.bva-b{border-left:1px solid var(--line)}
.bg-table td.bva-v.neg{color:var(--red);font-weight:600}
.bg-table td.bva-v.pos{color:var(--grn)}
.bg-table td.bva-total{font-weight:650;color:var(--ink)}
.bg-table thead tr:first-child th{border-bottom:0}

.bg-table td.bva-edit{cursor:pointer;text-decoration:underline dotted var(--line-3);text-underline-offset:3px}
.bg-table td.bva-edit:hover{background:var(--accent-soft);color:var(--ind)}

/* Matrices: subsidiary details and expense-head keywords */
.mx-details{display:flex;flex-wrap:wrap;gap:6px 18px}
.mx-kv{white-space:nowrap}
.mx-k{color:var(--muted,#64748b);font-size:12px}
.mx-kw{display:flex;gap:8px;align-items:center;min-width:260px}
.mx-kw .inp{flex:1}

/* ==========================================================================
   Home on one screen: greeting, the process as numbered cards, the guide.
   ========================================================================== */
.hm{display:flex;flex-direction:column;gap:16px}
.hm.hm-fit{height:var(--hm-h);overflow:hidden;padding-bottom:12px}
.hm-top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:16px;flex:none}
.hm-hero{padding:20px 24px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-2)}
.hm-date{font-size:12px;font-weight:600;color:var(--ind);letter-spacing:.02em}
.hm-hero h1{font-size:27px;font-weight:650;letter-spacing:-.035em;margin-top:4px}
.hm-hero p{color:var(--ink-3);font-size:13.5px;margin-top:2px}
.hm-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hm-wait{padding:16px 18px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:4px}
.hm-wait-h{font-size:13px;font-weight:650;color:var(--ink);margin-bottom:4px}
.hm-wait-i{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:12px;color:var(--ink-2);text-decoration:none;font-weight:550;font-size:13.5px;transition:background-color .14s var(--ease)}
.hm-wait-i:hover{background:var(--surface-2)}
.hm-wait-n{min-width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--red-soft);color:var(--red);font-weight:700}
.hm-clear{display:flex;align-items:center;gap:10px;color:var(--grn);font-weight:600;padding:8px 4px}
.hm-tick{width:24px;height:24px;border-radius:50%;background:var(--grn-soft);border:2px solid var(--grn-line)}

.hm-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;flex:1 1 auto;min-height:0}
.hm-fit .hm-flow{grid-auto-rows:minmax(0,1fr)}
.hm-card{position:relative;display:flex;flex-direction:column;gap:6px;min-height:0;padding:14px 16px;border:1px solid var(--line);border-top:3px solid var(--stage,var(--accent));
  border-radius:18px;background:var(--surface);box-shadow:0 1px 0 rgba(16,24,40,.03),0 10px 22px -16px rgba(16,24,40,.28);
  transition:transform .32s cubic-bezier(.2,.9,.25,1.04),box-shadow .32s var(--ease);
  animation:hm-rise .5s cubic-bezier(.2,.9,.25,1.02) both;animation-delay:calc(var(--i,0) * 45ms)}
.hm-card:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(16,24,40,.03),0 18px 30px -18px rgba(16,24,40,.34)}
/* The process reads left to right: a small chevron joins each card to the next. */
.hm-card::after{content:"";position:absolute;right:-11px;top:24px;width:8px;height:8px;border-top:2px solid var(--line);border-right:2px solid var(--line);transform:rotate(45deg)}
.hm-card:nth-child(4n)::after,.hm-card:last-child::after{display:none}
.hm-card-h{display:flex;align-items:center;gap:10px}
.hm-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--stage,var(--accent));background:var(--surface-2);border:1px solid var(--line);flex:none}
.hm-t{flex:1;font-weight:650;font-size:14.5px;color:var(--ink)}
.hm-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--ink-3);font-size:11px;font-weight:700}
.hm-p{margin:0;color:var(--ink-3);font-size:12.5px;line-height:1.4}
.hm-steps{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;min-height:0;overflow:auto;margin-top:2px}
.hm-step{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:550;cursor:pointer;transition:border-color .14s var(--ease),background-color .14s var(--ease),transform .12s var(--ease)}
.hm-step:hover,.hm-step:focus-visible{border-color:var(--stage,var(--accent));background:var(--surface-2);color:var(--ink);outline:none}
.hm-step:active{transform:scale(.96)}
.hm-c{background:var(--red-soft);color:var(--red);border-radius:999px;padding:0 6px;font-size:11px;font-weight:650}
.hm-soon{background:var(--surface-3);color:var(--ink-3);border-radius:999px;padding:0 6px;font-size:10.5px;font-weight:600}

.hm-guide{flex:none;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-1)}
.hm-guide-h{display:flex;align-items:center;gap:8px;font-weight:650;font-size:13.5px;color:var(--ink);white-space:nowrap}
.hm-guide-topics{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0}
.hm-guide-topics::-webkit-scrollbar{display:none}
.hm-topic{flex:none;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer}
.hm-topic:hover,.hm-topic:focus-visible{border-color:var(--ind-line);color:var(--ind);outline:none}
@keyframes hm-rise{from{transform:translateY(10px)}to{transform:none}}
@media (max-width:1100px){.hm-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-card:nth-child(2n)::after{display:none}}
@media (max-width:700px){.hm-top{grid-template-columns:1fr}.hm-flow{grid-template-columns:1fr}.hm-card::after{display:none}.hm-guide{flex-wrap:wrap}}

/* The user guide panel */
.guide{display:grid;gap:8px}
.guide-t{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:0 14px}
.guide-t summary{cursor:pointer;padding:12px 0;font-weight:650;color:var(--ink)}
.guide-t ol{margin:0 0 12px;padding-left:20px;display:grid;gap:6px;color:var(--ink-2);font-size:13.5px;line-height:1.5}

/* ==========================================================================
   Dashboard in depth: solid charts, lifted cards, tiles with a little body.
   Three flat tones per colour give the depth - nothing blended, no glow.
   ========================================================================== */
.ch-solid svg{overflow:visible}
.ch-solid .ch-bar{transform-box:fill-box;transform-origin:50% 100%;animation:ch-grow .7s cubic-bezier(.2,.9,.25,1.02) both}
.ch-solid .ch-bar:nth-child(2n){animation-delay:40ms}
.ch-solid .ch-bar:nth-child(3n){animation-delay:80ms}
.ch-solid .ch-bar:nth-child(4n){animation-delay:120ms}
.ch-solid .ch-pick:hover .ch-barfill,.ch-solid .ch-pick:focus-visible .ch-barfill{filter:brightness(1.08)}
.ch-solid .ch-tilt{transform-box:fill-box;transform-origin:50% 50%;animation:ch-settle .7s cubic-bezier(.2,.9,.25,1.02) both}
.ch-donut.ch-solid svg{filter:drop-shadow(0 10px 10px rgba(16,24,40,.12))}
.ch-hb-solid .ch-hb-t{transform:perspective(420px) rotateX(16deg);transform-origin:50% 100%}
.ch-hb-solid .ch-hb-f{box-shadow:0 3px 0 rgba(15,23,42,.22),inset 0 2px 0 rgba(255,255,255,.28)}
.dash-chart-card{transition:transform .32s cubic-bezier(.2,.9,.25,1.04),box-shadow .32s var(--ease);
  box-shadow:0 1px 0 rgba(16,24,40,.03),0 14px 28px -20px rgba(16,24,40,.32)}
.dash-chart-card:hover{transform:perspective(1200px) rotateX(1.5deg) translateY(-3px);box-shadow:0 1px 0 rgba(16,24,40,.03),0 24px 36px -22px rgba(16,24,40,.38)}
.dash-kpi-grid .stat{box-shadow:0 1px 0 rgba(16,24,40,.03),0 6px 0 -3px rgba(16,24,40,.06),0 14px 24px -18px rgba(16,24,40,.3)}
.dash-kpi-grid .stat-icon{transform:perspective(160px) rotateX(14deg) rotateY(-16deg);box-shadow:3px 4px 0 rgba(15,23,42,.10)}
@keyframes ch-grow{from{transform:scaleY(0)}to{transform:none}}
@keyframes ch-settle{from{transform:scale(.94)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .hm-card,.ch-solid .ch-bar,.ch-solid .ch-tilt{animation:none}
  .hm-card,.dash-chart-card{transition:none}
  .hm-card:hover,.dash-chart-card:hover{transform:none}
}

/* Matrices of the matrix guide: rules, keyword chips, editable rows */
.fgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.fgrid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mx-rule{margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--ind);border-radius:12px;background:var(--surface);color:var(--ink-2);font-size:13px;line-height:1.5}
.mx-rule strong{color:var(--ink)}
.mx-t .inp.sm{min-width:100px}
.mx-t td.c{text-align:center}
.mx-head{white-space:nowrap}
.mx-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mx-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border:1px solid var(--ind-line);border-radius:999px;background:var(--ind-soft);color:var(--ind);font-size:12.5px;font-weight:550}
.mx-x{border:0;background:transparent;color:var(--ind);cursor:pointer;font-size:14px;line-height:1;padding:0 4px;border-radius:999px}
.mx-x:hover{background:var(--surface)}
.mx-add{width:200px;flex:none}
.mx-foot{display:flex;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.mx-foot select{max-width:360px}
.bulk-list{display:grid;gap:6px;margin-top:10px}
.bulk-row{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:12px;font-size:13px}
.bulk-row .bulk-f{flex:0 1 auto;max-width:40%;min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}
.bulk-row .bulk-m{flex:1;min-width:0;text-align:right;color:var(--ink-3);font-size:12.5px}

.mx-foot .grow{flex:1}
.mx-crit{margin:8px 0 0;padding-left:20px;display:grid;gap:4px}
.mx-grid td .inp.sm{min-width:90px}
.mx-grid .mx-head select{min-width:200px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:800px){.grid.two{grid-template-columns:1fr}}

/* ==========================================================================
   Dashboard. White cards on the white page, the company's accent colour for
   emphasis, soft shadows for depth. Everything here is the dashboard's own
   (db-…), so no theme or glass layer can restyle it by accident.
   ========================================================================== */
.db-overview,.db-strip,.db-card{background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 1px 0 rgba(16,24,40,.03),0 18px 36px -26px rgba(16,24,40,.30)}
.db-overview{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:0;overflow:hidden}
.db-overview button,.db-strip button{font:inherit;color:inherit;text-align:left;background:none;border:0;cursor:pointer}
.db-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.db-spend{display:flex;flex-direction:column;padding:24px 26px 14px;min-width:0;border-right:1px solid var(--line) !important;
  transition:background-color .2s ease}
.db-spend:hover{background:var(--surface-2)}
.db-spend-row{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.db-spend-v{font-family:var(--mono);font-size:clamp(32px,3.2vw,46px);font-weight:760;letter-spacing:-.05em;color:var(--ink);line-height:1}
.db-delta{padding:4px 9px;border-radius:999px;font-size:12.5px;font-weight:700}
.db-delta.up{background:#FEF3F2;color:#B42318}
.db-delta.down{background:#ECFDF3;color:#067647}
.db-spend-d{margin-top:6px;font-size:13px;color:var(--ink-3)}
.db-trend{display:block;width:100%;height:120px;margin-top:14px;color:var(--accent)}
.db-trend-area{fill:currentColor;fill-opacity:.10}
.db-trend-line{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.db-trend-dot{fill:#fff;stroke:currentColor;stroke-width:2.5;vector-effect:non-scaling-stroke}
.db-trend-axis{display:flex;justify-content:space-between;margin-top:-14px;font-size:10.5px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.04em}
.db-trend-empty{margin-top:18px;padding:22px;border:1px dashed var(--line);border-radius:14px;color:var(--ink-3);font-size:13px;text-align:center}
.db-asks{display:flex;flex-direction:column}
.db-ask{display:flex;align-items:center;gap:14px;padding:18px 22px;flex:1;border-bottom:1px solid var(--line) !important;transition:background-color .2s ease}
.db-ask:last-child{border-bottom:0 !important}
.db-ask:hover{background:var(--surface-2)}
.db-ask-ic{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;background:var(--tone-soft);color:var(--tone)}
.db-ask-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.db-ask-t{display:flex;flex-direction:column;min-width:0;flex:1}
.db-ask-l{font-size:13.5px;font-weight:650;color:var(--ink)}
.db-ask-d{font-size:12px;color:var(--ink-3);margin-top:2px}
.db-ask-v{font-family:var(--mono);font-size:24px;font-weight:750;letter-spacing:-.04em;color:var(--tone)}
.db-blue{--tone:var(--accent);--tone-soft:color-mix(in srgb,var(--accent) 12%,#fff)}
.db-violet{--tone:#7C3AED;--tone-soft:#F3EEFF}
.db-amber{--tone:#B45309;--tone-soft:#FFF4E5}

.db-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:16px;overflow:hidden}
.db-strip-c{display:flex;flex-direction:column;padding:16px 18px;min-width:0;border-right:1px solid var(--line) !important;transition:background-color .2s ease}
.db-strip-c:last-child{border-right:0 !important}
button.db-strip-c:hover{background:var(--surface-2)}
.db-strip-l{font-size:12px;font-weight:650;color:var(--ink-3)}
.db-strip-v{margin-top:6px;font-family:var(--mono);font-size:22px;font-weight:750;letter-spacing:-.04em;color:var(--ink)}
.db-strip-d{margin-top:4px;font-size:11.5px;line-height:1.35;color:var(--ink-3)}
.db-chips{display:flex;gap:6px;margin-top:8px}
.db-chip{padding:3px 9px !important;border:1px solid var(--line) !important;border-radius:999px;font-size:11.5px !important;color:var(--ink-2) !important}
.db-chip:hover{border-color:var(--accent) !important;color:var(--accent) !important}


.db-section{margin:30px 0 12px}
.db-section h2{margin:4px 0 0;font-size:20px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.db-section p{margin:3px 0 0;font-size:13px;color:var(--ink-3)}
.db-grid{display:grid;gap:16px}
.db-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.db-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.db-card{display:flex;flex-direction:column;min-width:0}
.db-card-h{display:flex;align-items:baseline;gap:10px;padding:18px 20px 6px}
.db-card-h h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.db-sub{font-size:12px;color:var(--ink-3)}
.db-card-b{padding:8px 20px 18px;flex:1;min-width:0}

.db-budget-b{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;width:100%;cursor:pointer}
.db-budget-pct{font-family:var(--mono);font-size:34px;font-weight:760;letter-spacing:-.05em;color:var(--ink)}
.db-budget-pct small{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink-3);margin-left:6px}
.db-meter{display:block;height:12px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.db-meter-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--accent);transition:width .8s cubic-bezier(.2,.9,.25,1.02)}
.db-budget.over .db-meter-fill{background:#D92D20}
.db-budget-row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3)}
.db-budget-row b{color:var(--ink);font-family:var(--mono)}
.db-budget-note{font-size:12.5px;font-weight:650;color:var(--ink-2)}
.db-budget.over .db-budget-note{color:#B42318}

.db-stages{display:flex;flex-direction:column;gap:10px}
.db-stage{all:unset;box-sizing:border-box;display:grid;grid-template-columns:26px 1fr auto;grid-template-rows:auto 8px;gap:6px 10px;align-items:center;
  padding:12px;border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .2s ease}
.db-stage:hover{border-color:var(--accent)}
.db-stage-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent)}
.db-stage-l{font-size:13px;font-weight:600;color:var(--ink)}
.db-stage-v{font-family:var(--mono);font-size:18px;font-weight:750;color:var(--ink)}
.db-stage-bar{grid-column:2 / 4;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.db-stage-fill{display:block;height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .8s cubic-bezier(.2,.9,.25,1.02)}

.db-overview,.db-strip,.db-card{animation:db-rise .55s cubic-bezier(.2,.9,.25,1.02) both}
.db-strip{animation-delay:60ms}
@keyframes db-rise{from{transform:translateY(10px)}to{transform:none}}
@media (max-width:1200px){.db-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.db-strip-c{border-bottom:1px solid var(--line) !important}}
@media (max-width:1000px){.db-overview{grid-template-columns:1fr}.db-spend{border-right:0 !important;border-bottom:1px solid var(--line) !important}
  .db-2-1,.db-3{grid-template-columns:1fr}}
@media (max-width:640px){.db-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.db-spend-v{font-size:32px}}
@media (prefers-reduced-motion:reduce){.db-overview,.db-strip,.db-card{animation:none}.db-meter-fill,.db-stage-fill{transition:none}}

/* Access matrix: people down the side, Read/Write/Edit/Delete per area. */
.ax-t th,.ax-t td{white-space:nowrap}
.ax-t .ax-who{position:sticky;left:0;z-index:1;background:var(--surface);min-width:220px;box-shadow:1px 0 0 var(--line)}
.ax-t thead .ax-area{border-left:1px solid var(--line);font-size:12px;color:var(--ink)}
.ax-t thead .ax-r{font-size:11px;font-weight:600;color:var(--ink-3);text-transform:none}
.ax-t input[type=checkbox],.ax-grid input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.ax-all{color:var(--ink-3);font-style:italic}
.ax-na{color:var(--ink-4)}
.ax-grid{max-width:560px}

/* Access matrix, one person at a time: module rows, action columns, section bands. */
.ax-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ax-top select{max-width:420px}
.ax-grid .ax-mod{position:sticky;left:0;z-index:1;background:var(--surface);min-width:210px;white-space:nowrap;box-shadow:1px 0 0 var(--line)}
.ax-grid th.ax-r{font-size:11.5px;white-space:nowrap}
.ax-grid .ax-group th{background:var(--surface-2);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:left}

/* Invoice list: a heading above each status group. */
tr.inv-group th{padding:14px 16px 8px;text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:var(--surface-2);color:var(--ink-2);border-top:1px solid var(--line)}
tr.inv-group-pending th{color:#B45309}
tr.inv-group-approved th{color:#067647}
tr.inv-group-paid th{color:#1D4ED8}
tr.inv-group-rejected th{color:#B42318}
.inv-reason{color:#B42318;max-width:260px;white-space:normal}

/* The desk: the four statuses, then each role's queue. */
.dk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.dk-tile{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);box-shadow:0 10px 24px -20px rgba(29,78,216,.45);transition:transform .2s ease,border-color .2s ease}
.dk-tile:hover{transform:translateY(-2px);border-color:var(--tone,var(--accent))}
.dk-l{font-size:12.5px;font-weight:650;color:var(--ink-3)}
.dk-v{font-family:var(--mono);font-size:28px;font-weight:750;letter-spacing:-.04em;color:var(--tone,var(--ink))}
.dk-a{font-size:12px;color:var(--ink-3)}
.dk-pending{--tone:#B45309}.dk-approved{--tone:#067647}.dk-paid{--tone:#1D4ED8}.dk-rejected{--tone:#B42318}.dk-mine{--tone:#7C3AED}.dk-sync{--tone:#0E7490}
.dk-foot{padding:10px 14px;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.dk-tile{transition:none}.dk-tile:hover{transform:none}}

.dk-synced{--tone:#0E7490}
tr.inv-group-synced th{color:#0E7490}

.ai-pre{white-space:pre-wrap;word-break:break-all;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:6px 0 0}