/* =========================================================================
   THE PALETTE — the single source of truth for every colour, radius, shadow
   and font in Prodivio.

   This file used to declare its tokens across NINE separate :root /
   body.theme-instrument blocks appended over successive redesigns, and 51 of
   the 92 tokens were declared more than once. Nothing downstream could tell
   you what --primary was without reading all nine in cascade order, which is
   why new screens never matched the old ones.

   Every value below is the one the browser was ALREADY resolving to, so this
   consolidation changed nothing on screen — it only made the answer knowable.
   Change a colour here and it changes everywhere, once.
   ========================================================================= */
:root{
  /* brand marks */
  --brand-green:#619d39;
  --brand-teal:#028ca8;
  --brand-orange:#fb5603;
  --tri:linear-gradient(90deg,var(--brand-green),var(--brand-teal) 52%,var(--brand-orange));
  --brand:#FB5703;
  --brand-deep:#D94A02;
  --brand-soft:#FFF1EA;
  --brand-line:#FFD3BC;
  --lg-green:#619d39;
  --lg-teal:#028ca8;
  --lg-orange:#fb5603;
  /* neutral frame */
  --paper:#F6F8FA;
  --ink:#15181D;
  --soft:#5B6572;
  --line:#E4E8ED;
  --card:#FFFFFF;
  --canvas:#EEF4F1;
  --surface:#FFFFFF;
  --surface-sunk:#E9F3EB;
  --gr-900:#15181D;
  --gr-800:#1D2127;
  --gr-700:#2A2F37;
  --gr-500:#5B6572;
  --gr-400:#8A94A2;
  --gr-300:#C9D0D8;
  --gr-200:#E4E8ED;
  --gr-100:#EFF2F5;
  --gr-50:#F7F9FB;
  /* accents */
  /* --primary is "this is the current / selected thing": the active nav tab,
     the selected rail item, the open row in a partner list, focus rings, row
     hover. It is the logo orange — but DEEPENED. The pure brand orange
     (#FB5703) carries white text at only 3.25:1, which fails AA and is tiring
     to read across a shift; this deepened orange is the same hue at 5.4:1.
     The bright brand orange is still used as the hover step and as --brand
     wherever the mark itself appears. */
  --primary:#B8430A;
  --primary-bright:#D94A02;
  --primary-soft:#FFF1EA;
  --primary-line:#FFC9A8;
  --green:var(--state-released);
  --green-bright:#249256;
  --green-soft:var(--state-released-bg);
  --green-line:var(--state-released-border);
  /* --accent is "this wants your attention": the inbox count, an overdue
     balance. It carried white text at 4.41:1 — under AA — and sat 10 units
     away from --primary, close enough to read as a mistake rather than a
     distinction. Deepened to clear AA; it stays a slightly warmer, redder
     orange than --primary so the two roles remain tellable apart. */
  --accent:#A8480F;
  --accent-bright:#E06A1B;
  --accent-hover:#8E3D0C;
  --accent-soft:#FDEDE0;
  --accent-line:#F3BE93;
  --amber:var(--state-hold);
  --amber-soft:var(--state-hold-bg);
  --danger:var(--state-reject);
  --danger-soft:var(--state-reject-bg);
  --site-a:#2A7B7B;
  --site-b:#3F4B9E;
  --site-color:var(--site-a);
  --hdr:#15181D;
  --hdr-2:#1D2127;
  --hdr-text:#FFFFFF;
  --hdr-muted:#AAB3C0;
  --dark:#15181D;
  --dark-2:#1D2127;
  --dark-text:#FFFFFF;
  --dark-muted:#AAB3C0;
  --th-ink:#2B0D00;
  --th-ink-muted:#6B2C0A;
  /* status colours */
  --state-released:#1F7A4C;
  --state-released-bg:#E3F4E9;
  --state-released-border:#8FD0AA;
  --state-process:#1B6FA8;
  --state-process-bg:#E4F1F9;
  --state-process-border:#9AC8E4;
  --state-hold:#A9700F;
  --state-hold-bg:#FBF0DA;
  --state-hold-border:#E3C48C;
  --state-reject:#B32D26;
  --state-reject-bg:#FBE5E3;
  --state-reject-border:#E6A29D;
  --state-expiry:#6B4194;
  --state-expiry-bg:#EFE9F6;
  --state-expiry-border:#C4AEDC;
  /* structure tokens */
  --th-h:34px;
  --th-h-grid:35px;
  --radius:var(--radius-tk-lg);
  --tk-border:#D5E6DA;
  --tk-border-strong:#B2D2BE;
  --tk-text:#12251A;
  --tk-text-muted:#5B7566;
  --radius-tk:4px;
  --radius-tk-lg:6px;
  --motion:130ms;
  --th-bg:var(--gr-50);
  /* type */
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --plex-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --plex-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* depth */
  --shadow-sm:0 1px 2px rgba(2,60,72,.055), 0 2px 8px rgba(2,140,168,.055);
  --shadow-md:0 2px 6px rgba(2,60,72,.06), 0 10px 26px rgba(2,140,168,.09);
  --shadow-lg:0 8px 20px rgba(2,60,72,.10), 0 26px 60px rgba(2,140,168,.14);
  /* other */
  --ink-dark:#12241B;
}
/* tokens moved to the single palette block at the top of this file */
  *{box-sizing:border-box} html,body{margin:0;padding:0}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;
    background-image:radial-gradient(720px 420px at 0% 0%,rgba(97,157,57,.05),transparent 60%),
      radial-gradient(760px 460px at 100% 0%,rgba(2,140,168,.06),transparent 60%),
      radial-gradient(680px 400px at 50% 100%,rgba(251,86,3,.035),transparent 60%);
    background-attachment:fixed}
  h1,h2,h3{letter-spacing:-.015em}
  button{font-family:inherit;font-size:13px;cursor:pointer}
  .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:600}
  .muted{color:var(--soft)} .mono{font-family:var(--mono)} .right{text-align:right} .nowrap{white-space:nowrap}
  h1,h2,h3{font-weight:600;margin:0}
  /* auth / setup screens */
  .center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
  .panel{background:var(--card);border:1px solid var(--line);border-radius:16px;max-width:420px;width:100%;padding:28px;box-shadow:0 18px 48px rgba(21,157,174,.10)}
  .panel h1{font-size:20px;margin-bottom:4px}
  .panel .sub{color:var(--soft);font-size:13px;margin-bottom:20px}
  .brandmark{font-size:20px;letter-spacing:-.015em;font-weight:800;margin-bottom:14px;background:var(--tri);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
  label.f{display:block;margin-bottom:14px}
  label.f>span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);font-weight:600;margin-bottom:5px}
  input,select,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 10px;font-family:inherit;font-size:14px;color:var(--ink)}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--primary-line);border-color:var(--primary)}
  .btn{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 14px;border-radius:8px;font-weight:600;transition:border-color .14s,background .14s,color .14s}
  .btn:hover{border-color:var(--primary-line);color:var(--primary);background:var(--primary-soft)}
  .btn.primary{background:linear-gradient(135deg,var(--primary),#0a6d7e);border-color:var(--primary);color:#fff;width:100%;padding:11px;box-shadow:0 2px 8px rgba(2,140,168,.22)}
  .btn.primary.auto{width:auto;padding:8px 14px}
  .btn.primary:hover{background:linear-gradient(135deg,#0a6d7e,var(--primary));box-shadow:0 4px 14px rgba(2,140,168,.30)}
  .btn.sm{padding:4px 9px;font-size:12px} .btn.danger{color:var(--danger);border-color:#e6c7c1}
  .btn:disabled{opacity:.5;cursor:not-allowed}
  .btn:focus-visible,button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  .btn:active{transform:scale(.985)}
  ::selection{background:var(--primary-soft);color:var(--ink)}
  .btnrow{display:flex;gap:8px;flex-wrap:wrap}
  .switch{margin-top:14px;text-align:center;font-size:13px;color:var(--soft)}
  .switch a{color:var(--primary);cursor:pointer;font-weight:500}
  .btn.oauth{width:100%;margin-bottom:10px;font-weight:500}
  .orline{display:flex;align-items:center;color:var(--soft);font-size:12px;margin:6px 0 14px}
  .orline span{padding:0 10px} .orline:before,.orline:after{content:"";flex:1;height:1px;background:var(--line)}
  .err{background:var(--danger-soft);color:var(--danger);border:1px solid #e6c7c1;border-radius:8px;padding:9px 11px;font-size:13px;margin-bottom:14px}
  .hint{font-size:12px;color:var(--soft);margin-top:-6px;margin-bottom:12px;line-height:1.5}
  /* ===== landing / marketing page ===== */
  .lp{min-height:100vh;background:var(--paper)}
  .lp-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:7px;padding:0 28px;height:62px;
    background:rgba(251,253,253,.88);backdrop-filter:blur(10px);border-bottom:2px solid;border-image:var(--tri) 1}
  .lp-nav .sp{flex:1}
  .lp-nav a{color:var(--soft);text-decoration:none;font-size:13.5px;font-weight:500;padding:6px 10px;border-radius:8px}
  .lp-nav a:hover{color:var(--primary);background:var(--primary-soft)}
  .lp-nav a:last-child{color:#fff;background:var(--primary);font-weight:600}
  .lp-nav a:last-child:hover{background:var(--accent);color:#fff}
  .lp-navlinks{display:flex;gap:2px;align-items:center}
  .lp-word{font-weight:800;font-size:19px;letter-spacing:-.015em;
    background:var(--tri);-webkit-background-clip:text;background-clip:text;color:transparent}
  /* hero: copy left, login right */
  .hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
    max-width:none;margin:0;padding:70px clamp(24px,4vw,64px) 84px}
  .hero:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(560px 300px at 8% 12%,var(--green-soft),transparent 70%),
      radial-gradient(620px 340px at 92% 20%,var(--primary-soft),transparent 70%),
      radial-gradient(520px 300px at 60% 96%,var(--accent-soft),transparent 70%)}
  .hero>*{position:relative;z-index:1}
  .hero-copy h1{font-size:46px;line-height:1.1;letter-spacing:-.02em;margin-bottom:18px}
  .hero-copy h1 .grad{background:var(--tri);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .hero-copy p.lead{font-size:16.5px;color:var(--soft);line-height:1.65;max-width:52ch;margin-bottom:26px}
  .hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
  .pill{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--ink);font-weight:500;box-shadow:0 2px 8px rgba(21,157,174,.06)}
  .pill:nth-child(1){border-color:var(--green-line)} .pill:nth-child(1) b{color:var(--green)}
  .pill:nth-child(2){border-color:var(--primary-line)} .pill:nth-child(2) b{color:var(--primary)}
  .pill:nth-child(3){border-color:var(--accent-line)} .pill:nth-child(3) b{color:var(--accent)}
  .pill:nth-child(4){border-color:var(--primary-line)} .pill:nth-child(4) b{color:var(--primary)}
  .hero-stats{display:flex;gap:34px;flex-wrap:wrap;padding-top:22px;border-top:2px solid;border-image:var(--tri) 1}
  .hero-stats .n{font-size:23px;font-weight:700;line-height:1.2}
  .hero-stats>div:nth-child(1) .n{color:var(--green)}
  .hero-stats>div:nth-child(2) .n{color:var(--primary)}
  .hero-stats>div:nth-child(3) .n{color:var(--accent)}
  .hero-stats .l{font-size:12px;color:var(--soft)}
  .login-wrap{display:flex;justify-content:center}
  .login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;width:100%;max-width:410px;
    padding:30px;box-shadow:0 18px 50px rgba(21,157,174,.13);border-top:4px solid;border-image:var(--tri) 1}
  .login-card h2{font-size:19px;margin-bottom:4px}
  .login-card .sub{color:var(--soft);font-size:13px;margin-bottom:20px}
  /* sections */
  .sec{max-width:none;margin:0;padding:78px clamp(24px,4vw,64px);border-top:1px solid var(--line)}
  .sec-head{text-align:center;max-width:660px;margin:0 auto 46px}
  .sec-head h2{font-size:31px;letter-spacing:-.015em;margin:10px 0 12px}
  .sec-head p{color:var(--soft);font-size:15.5px;line-height:1.65}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
  .fcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;transition:transform .16s,box-shadow .16s;border-top:3px solid var(--primary-bright)}
  .fcard:nth-child(3n+2){border-top-color:var(--green-bright)}
  .fcard:nth-child(3n+3){border-top-color:var(--accent-bright)}
  .fcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(21,157,174,.13)}
  .fcard .ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    font-size:19px;margin-bottom:14px;background:var(--primary-soft);color:var(--primary)}
  .fcard:nth-child(3n+2) .ic{background:var(--green-soft);color:var(--green)}
  .fcard:nth-child(3n+3) .ic{background:var(--accent-soft);color:var(--accent)}
  .fcard h3{font-size:15.5px;margin-bottom:7px}
  .fcard p{color:var(--soft);font-size:13.5px;line-height:1.6;margin:0}
  .about-list{list-style:none;padding:0;margin:18px 0 0}
  .about-list li{position:relative;padding-left:26px;margin-bottom:13px;color:var(--soft);font-size:14.5px;line-height:1.6}
  .about-list li:before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:3px;background:var(--primary-bright)}
  .about-list li:nth-child(3n+1):before{background:var(--green-bright)}
  .about-list li:nth-child(3n+3):before{background:var(--accent-bright)}
  .about-list li b{color:var(--ink)}
  .panelbox{background:linear-gradient(140deg,var(--green-soft),var(--primary-soft) 55%,var(--accent-soft));
    border:1px solid var(--primary-line);border-radius:18px;padding:34px;color:var(--ink)}
  .panelbox h3{color:var(--ink);font-size:19px;margin-bottom:14px}
  .panelbox p{font-size:14px;line-height:1.7;color:var(--soft);margin:0 0 12px}
  .flow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
  .flow span{background:#fff;border:1px solid var(--primary-line);border-radius:8px;
    padding:7px 12px;font-size:12.5px;color:var(--primary);font-weight:600;box-shadow:0 2px 6px rgba(21,157,174,.08)}
  .flow span:nth-child(4n+3){border-color:var(--green-line);color:var(--green)}
  .flow span:nth-child(4n+1){border-color:var(--accent-line);color:var(--accent)}
  .flow span:nth-child(2n){background:none;border:0;box-shadow:none;color:var(--soft);padding:7px 2px}
  .lp-foot{border-top:3px solid;border-image:var(--tri) 1;padding:30px 32px;text-align:center;color:var(--soft);font-size:12.5px}
  /* ---- landing flair: motion, blobs, badge, CTAs ---- */
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-18px) scale(1.08)}100%{transform:translate(-14px,14px) scale(.96)}}
  @keyframes shimmer{to{background-position:200% center}}
  .hero-copy>*{animation:fadeUp .55s ease both}
  .hero-copy>*:nth-child(2){animation-delay:.06s}
  .hero-copy>*:nth-child(3){animation-delay:.12s}
  .hero-copy>*:nth-child(4){animation-delay:.18s}
  .hero-copy>*:nth-child(5){animation-delay:.24s}
  .hero-copy>*:nth-child(6){animation-delay:.30s}
  .login-wrap{animation:fadeUp .6s .2s ease both}
  .blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
  .blob.b1{width:380px;height:380px;background:rgba(2,140,168,.16);top:-70px;left:-90px;animation:drift 16s ease-in-out infinite alternate}
  .blob.b2{width:320px;height:320px;background:rgba(97,157,57,.15);bottom:-60px;left:34%;animation:drift 19s 2s ease-in-out infinite alternate-reverse}
  .blob.b3{width:300px;height:300px;background:rgba(251,86,3,.10);top:10%;right:-60px;animation:drift 22s 1s ease-in-out infinite alternate}
  .hero-copy h1 .grad{background-image:linear-gradient(90deg,var(--brand-green),var(--brand-teal) 35%,var(--brand-orange) 55%,var(--brand-teal) 75%,var(--brand-green));
    background-size:200% auto;animation:shimmer 7s linear infinite}
  .hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--primary-line);
    border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--primary);
    box-shadow:0 4px 14px rgba(2,140,168,.12);margin-bottom:18px}
  .hb-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-bright);flex:none;
    animation:bpblink 1.4s ease-in-out infinite}
  .hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
  .hero-cta a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
  .cta-main{padding:11px 22px!important;font-size:14px;border-radius:10px}
  .cta-ghost{padding:11px 22px!important;font-size:14px;border-radius:10px}
  .login-card:hover{box-shadow:0 24px 60px rgba(21,157,174,.20)}
  .fcard .ic{box-shadow:inset 0 0 0 1px rgba(2,140,168,.14)}
  @media(max-width:900px){
    .hero{grid-template-columns:1fr;gap:36px;padding:44px 22px 60px}
    .hero-copy h1{font-size:34px}
    .grid3,.grid2{grid-template-columns:1fr;gap:18px}
    .lp-navlinks{display:none}
    .sec{padding:56px 22px}
    .sec-head h2{font-size:25px}
    .blob{display:none}
  }
  /* ===== view toggle (segmented control) ===== */
  .vswitch{display:inline-flex;background:var(--primary-soft);border:1px solid var(--primary-line);border-radius:10px;padding:3px;gap:2px}
  .vswitch button,.vswitch a{background:none;border:0;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--primary);cursor:pointer;white-space:nowrap}
  .vswitch button.on,.vswitch a.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(21,157,174,.18)}
  .toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
  .toolbar .sp{flex:1}
  .rangesel{display:inline-flex;gap:2px;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:3px}
  .rangesel button{background:none;border:0;padding:6px 11px;border-radius:7px;font-size:12.5px;color:var(--soft);cursor:pointer;font-weight:500}
  .rangesel button.on{background:var(--primary);color:#fff}
  /* ===== calendar ===== */
  .calnav{display:flex;align-items:center;gap:10px}
  .calnav b{font-size:14.5px;min-width:180px;text-align:center}
  .calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .caldow{background:var(--paper);padding:8px 6px;text-align:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);font-weight:600}
  .calday{background:#fff;min-height:104px;padding:6px 7px;display:flex;flex-direction:column;gap:4px}
  .calday.dim{background:#fafcfc}
  .calday .dnum{font-size:12px;font-weight:600;color:var(--soft)}
  .calday.today .dnum{background:var(--primary);color:#fff;border-radius:50%;width:21px;height:21px;display:flex;align-items:center;justify-content:center;font-size:11.5px}
  .calchip{font-size:11.5px;border-radius:6px;padding:3px 6px;line-height:1.35;cursor:pointer;
    background:var(--primary-soft);color:var(--primary);border-left:3px solid var(--primary-bright);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .calchip.g{background:var(--green-soft);color:var(--green);border-left-color:var(--green-bright)}
  .calchip.a{background:var(--accent-soft);color:var(--accent);border-left-color:var(--accent-bright)}
  .calmore{font-size:11px;color:var(--soft);cursor:pointer;padding-left:2px}
  /* ===== floor map ===== */
  .floor{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
  .room{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;border-top:3px solid var(--primary-bright)}
  .room:nth-child(3n+2){border-top-color:var(--green-bright)}
  .room:nth-child(3n+3){border-top-color:var(--accent-bright)}
  .room-h{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--paper)}
  .room-h b{font-size:13.5px}
  .room-b{padding:9px;display:flex;flex-direction:column;gap:7px;min-height:76px}
  .rcard{border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:#fff;cursor:pointer}
  .rcard:hover{border-color:var(--primary-line);background:var(--primary-soft)}
  .rcard b{font-size:12.5px;display:block}
  .rcard .m{font-size:11.5px;color:var(--soft);margin-top:2px}
  .room-empty{color:var(--soft);font-size:12px;text-align:center;padding:16px 0}
  /* ===== recipe full page ===== */
  .rsplit{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
  .rstep{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff;overflow:hidden}
  .rstep-h{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--paper);border-bottom:1px solid var(--line)}
  .rstep-h .seq{width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
  .rstep-h input{border:0;background:none;font-weight:600;font-size:13.5px;padding:2px 4px}
  .rstep-h input:focus{background:#fff;outline:2px solid var(--primary-line);border-radius:6px}
  .rstep-b{padding:11px 12px;display:grid;gap:10px}
  .rstep-b textarea{min-height:62px;resize:vertical;font-size:13px;line-height:1.55}
  .rmini{display:grid;grid-template-columns:1fr 90px 90px 30px;gap:7px;align-items:center}
  .rmini.head{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);font-weight:600}
  .ghostbtn{border:1px dashed var(--primary-line);background:var(--primary-soft);color:var(--primary);
    border-radius:9px;padding:8px 12px;font-weight:600;font-size:12.5px;cursor:pointer;width:100%}
  .ghostbtn:hover{background:#fff}
  .statbox{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:10px}
  .statbox .k{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);font-weight:600}
  .statbox .v{font-size:19px;font-weight:700;color:var(--primary);margin-top:3px}
  @media(max-width:900px){
    .rsplit{grid-template-columns:1fr}
    .calgrid{font-size:11px}
    .calday{min-height:76px}
  }
  /* ===== product flow map (raw materials -> recipe -> steps) ===== */
  .fm-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .fm-pick select{min-width:280px}
  .fmwrap{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;overflow:hidden}
  .fm{position:relative;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:34px;align-items:start}
  .fm-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
  .fm-col{position:relative;z-index:1;min-width:0}
  .fm-h{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:11px;display:flex;align-items:center;gap:7px}
  .fm-h .n{background:var(--primary-soft);color:var(--primary);border-radius:20px;padding:1px 8px;font-size:10.5px;letter-spacing:0}
  .fm-h.g{color:var(--green)} .fm-h.g .n{background:var(--green-soft);color:var(--green)}
  .fm-h.t{color:var(--primary)}
  .fm-h.a{color:var(--accent)} .fm-h.a .n{background:var(--accent-soft);color:var(--accent)}
  .fm-node{background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin-bottom:9px;
    transition:border-color .15s,box-shadow .15s,transform .15s;cursor:default}
  .fm-node .t1{font-size:13px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
  .fm-node .t2{font-size:11.5px;color:var(--soft);margin-top:3px;font-family:var(--mono)}
  .fm-mat{border-left:3px solid var(--green-bright)}
  .fm-mat.dim{opacity:.34}
  .fm-mat.hot{border-color:var(--green);box-shadow:0 5px 16px rgba(97,157,57,.22);transform:translateX(3px)}
  .fm-step{border-left:3px solid var(--accent-bright)}
  .fm-step.dim{opacity:.34}
  .fm-step.hot{border-color:var(--accent);box-shadow:0 5px 16px rgba(251,86,3,.20);transform:translateX(-3px)}
  .fm-step .sq{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;
    background:var(--accent-soft);color:var(--accent);font-size:10.5px;font-weight:700;margin-right:7px;flex:none}
  .fm-step .instr{font-size:12px;color:var(--soft);margin-top:5px;line-height:1.5;white-space:pre-wrap}
  .fm-step .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
  .fm-center{background:linear-gradient(155deg,var(--primary-soft),#fff 65%);border:1px solid var(--primary-line);
    border-radius:14px;padding:15px;box-shadow:0 4px 18px rgba(2,140,168,.10)}
  .fm-center h3{font-size:16px;margin:0 0 3px;letter-spacing:-.015em}
  .fm-center .sub{font-size:12px;color:var(--soft);margin-bottom:12px}
  .fm-line{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:7px 9px;border-radius:9px;
    font-size:12.5px;background:#fff;border:1px solid var(--line);margin-bottom:6px;transition:border-color .15s,background .15s}
  .fm-line.hot{border-color:var(--primary);background:var(--primary-soft)}
  .fm-line .q{font-family:var(--mono);font-size:11.5px;color:var(--soft);white-space:nowrap}
  .fm-line .c{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--primary);white-space:nowrap}
  .fm-tot{display:grid;grid-template-columns:1fr auto;gap:6px;padding-top:10px;margin-top:8px;border-top:2px solid var(--primary-line);font-size:12.5px}
  .fm-tot b{font-family:var(--mono);color:var(--primary)}
  .fm-empty{color:var(--soft);font-size:12.5px;padding:14px 0;text-align:center}
  @media(max-width:1000px){ .fm{grid-template-columns:1fr;gap:20px} .fm-svg{display:none} }
  /* ===== floor blueprint ===== */
  .bp-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .bp-canvas{position:relative;width:100%;height:min(72vh,720px);background:var(--card);
    border:1px solid var(--line);border-radius:14px;overflow:hidden;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:var(--cell) var(--cell);--cell:40px}
  .bp-room{position:absolute;border-radius:11px;border:2px solid var(--primary);
    background:var(--primary-soft);display:flex;flex-direction:column;padding:9px 11px;overflow:hidden;
    box-shadow:0 3px 10px rgba(2,140,168,.10);transition:box-shadow .15s}
  .bp-room.edit{cursor:grab} .bp-room.edit:active{cursor:grabbing}
  .bp-room.active{border-color:var(--accent)}
  .bp-room .bp-name{font-size:13.5px;font-weight:700;line-height:1.2;display:flex;align-items:center;gap:6px}
  .bp-room .bp-mgr{font-size:11px;color:var(--soft);margin-top:2px}
  .bp-room .bp-body{margin-top:auto;display:flex;flex-direction:column;gap:4px}
  .bp-live{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
    background:#fff;border:1px solid var(--accent-line);border-radius:7px;padding:3px 7px;color:var(--accent)}
  .bp-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
    animation:bpblink 1.1s ease-in-out infinite;box-shadow:0 0 0 0 rgba(251,86,3,.6)}
  @keyframes bpblink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(251,86,3,.55)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(251,86,3,0)}}
  .bp-idle{font-size:11.5px;color:var(--soft)}
  .bp-handle{position:absolute;right:2px;bottom:2px;width:15px;height:15px;cursor:nwse-resize;
    background:linear-gradient(135deg,transparent 50%,var(--primary) 50%);border-radius:0 0 9px 0;opacity:.5}
  .bp-room.edit:hover .bp-handle{opacity:1}
  .bp-del{position:absolute;right:5px;top:5px;width:18px;height:18px;border-radius:50%;border:0;
    background:var(--danger-soft);color:var(--danger);font-size:12px;cursor:pointer;line-height:1;display:none}
  .bp-room.edit:hover .bp-del{display:block}
  .bp-tray{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .bp-chip{background:var(--card);border:1px dashed var(--primary-line);border-radius:9px;padding:7px 12px;
    font-size:12.5px;font-weight:600;color:var(--primary);cursor:pointer}
  .bp-chip:hover{background:var(--primary-soft)}
  .bp-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--soft);font-size:13.5px;text-align:center;padding:20px}
  /* app shell — top navigation */
  .topnav{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);padding:0 20px;height:56px;position:sticky;top:0;z-index:10;box-shadow:0 2px 10px rgba(21,157,174,.07);border-bottom:3px solid;border-image:var(--tri) 1}
  .tn-brand{font-weight:600;font-size:15px;white-space:nowrap;letter-spacing:.01em}
  .tn-nav{display:flex;gap:2px;flex:1;margin-left:12px;flex-wrap:nowrap;min-width:0}
  .tn-nav button,.tn-nav a{background:none;border:0;color:var(--soft);padding:8px 12px;border-radius:8px;font-size:13.5px;white-space:nowrap;cursor:pointer;font-weight:500}
  .tn-nav button:hover,.tn-nav a:hover{background:var(--primary-soft);color:var(--primary)}
  .tn-nav button.active,.tn-nav a.active{background:var(--primary);color:#fff}
  .tn-user{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--soft);white-space:nowrap}
  /* logo + nav groups */
  .tn-logo{width:30px;height:30px;display:block}
  .tn-home{display:flex;align-items:center;gap:7px;background:none;border:0;padding:4px 6px;margin:0;
    border-radius:10px;cursor:pointer;transition:background .15s}
  .tn-home:hover{background:var(--primary-soft)}
  .tn-home:active{transform:scale(.98)}
  .tn-home:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  .tn-word{font-weight:800;font-size:18px;letter-spacing:-.015em;background:var(--tri);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--sans)}
  .navgroup{position:relative}
  .navgroup>button,.navgroup>a{background:none;border:0;color:var(--soft);padding:8px 12px;border-radius:8px;font-size:13.5px;white-space:nowrap;cursor:pointer;font-weight:500}
  .navgroup>button:hover,.navgroup>a:hover{background:var(--primary-soft);color:var(--primary)}
  .navgroup>button.active,.navgroup>a.active{background:var(--primary);color:#fff}
  .submenu{display:none;position:absolute;top:100%;left:0;padding-top:8px;z-index:30}
  .navgroup:hover .submenu,.navgroup:focus-within .submenu{display:block}
  .submenu-inner{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:180px;box-shadow:0 14px 34px rgba(21,157,174,.14)}
  .submenu-inner button,.submenu-inner a{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);padding:10px 14px;font-size:13px;cursor:pointer;font-weight:500;transition:background .12s,color .12s}
  .submenu-inner button:hover,.submenu-inner a:hover{background:var(--primary-soft);color:var(--ink)}
  .submenu-inner button.active,.submenu-inner a.active{background:var(--primary);color:#fff;font-weight:700}
  .submenu-inner button.active:hover,.submenu-inner a.active:hover{background:var(--primary);color:#fff}
  /* floating create button + bubbles */
  .fab{width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;z-index:60;
    background:conic-gradient(from 220deg,var(--green) 0 33%,var(--primary) 33% 66%,var(--accent) 66% 100%);
    box-shadow:0 10px 28px rgba(21,157,174,.28);display:flex;align-items:center;justify-content:center;transition:transform .15s}
  .fab:hover{transform:scale(1.06)}
  .fab .plus{display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:400;color:#fff;line-height:1;
    text-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .18s}
  .fab.open .plus{transform:rotate(45deg)}
  /* the menu's appearance is defined once, with the button, further down */
  /* bento */
  .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
  .b-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;
    box-shadow:0 2px 10px rgba(2,140,168,.06);transition:box-shadow .18s,transform .18s}
  .b-card:hover{box-shadow:0 8px 24px rgba(2,140,168,.10)}
  .b-card.tint-green{background:linear-gradient(150deg,#fff 40%,var(--green-soft));border-color:var(--green-line)}
  .b-card.tint-teal{background:linear-gradient(150deg,#fff 40%,var(--primary-soft));border-color:var(--primary-line)}
  .b-card.tint-amber{background:linear-gradient(150deg,#fff 40%,var(--accent-soft));border-color:var(--accent-line)}
  .b-card.tint-amber{background:linear-gradient(145deg,#fff, #fdf1ea)}
  .s1{grid-column:span 1}.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s9{grid-column:span 9}.s10{grid-column:span 10}.s11{grid-column:span 11}.s12{grid-column:span 12}
  .b-eyebrow{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);font-weight:700}
  .tint-green .b-eyebrow{color:var(--green)} .tint-amber .b-eyebrow{color:var(--accent)}
  .b-num{font-family:var(--sans);font-size:31px;font-weight:800;margin-top:6px;letter-spacing:-.02em;color:var(--primary)}
  .tint-green .b-num{color:var(--green)} .tint-amber .b-num{color:var(--accent)}
  .b-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px}
  .b-sub{margin-top:4px}
  @media (max-width:1100px){.s5,.s7{grid-column:span 12}}
  @media (max-width:900px){.s2,.s3,.s4{grid-column:span 6}.s5,.s6,.s7,.s8,.s9,.s10,.s11{grid-column:span 12}}
  @media (max-width:600px){.s1,.s2,.s3,.s4{grid-column:span 12}}
  .repbar{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
  .repbar label.f{margin-bottom:0} .repbar label.f>span{margin-bottom:3px}
  .repbar input,.repbar select{padding:7px 9px;font-size:13px;width:auto}
  .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .chip{display:inline-flex;align-items:center;gap:6px;background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-line);border-radius:20px;padding:4px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
  .chip .cx{cursor:pointer;opacity:.6} .chip .cx:hover{opacity:1}
  th.sortable{cursor:pointer;user-select:none} th.sortable:hover{color:var(--ink)}
  .content{padding:22px 28px 60px;max-width:none;margin:0;width:100%}
  .pagehead{margin-bottom:18px}
  .pagehead h1{font-size:23px;font-weight:800;letter-spacing:-.02em;position:relative;display:inline-block;padding-bottom:7px}
  .pagehead h1:after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;border-radius:2px;background:var(--tri)}
  .pagehead .sub{font-size:13px;color:var(--soft);margin-top:4px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .card+.card{margin-top:16px}
  .card-h{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
  .card-h h3{font-size:14px} .card-b{padding:16px}
  table{width:100%;border-collapse:collapse}
  th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--primary);font-weight:700;padding:10px 14px;border-bottom:2px solid var(--primary-line);background:var(--primary-soft)}
  td{padding:10px 14px;border-bottom:1px solid var(--line)} tr:last-child td{border-bottom:0}
  tbody tr{transition:background .12s}
  tbody tr:nth-child(even){background:rgba(2,140,168,.022)}
  tbody tr:hover{background:var(--primary-soft)}
  .tag{display:inline-flex;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:20px}
  /* inline status dropdown — looks like a tag until you interact with it */
  .stsel{appearance:none;-webkit-appearance:none;font-size:11.5px;font-weight:600;padding:2px 22px 2px 9px;
    border-radius:20px;cursor:pointer;line-height:1.5;font-family:var(--sans);
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 8px center;transition:filter .12s,box-shadow .12s}
  .stsel:hover{filter:brightness(.97);box-shadow:0 1px 5px rgba(2,140,168,.16)}
  .stsel:focus{outline:2px solid var(--primary);outline-offset:1px}
  .stsel:disabled{cursor:default;opacity:.75;background-image:none;padding-right:9px}
  .stsel.t-green{background-color:var(--green-soft);color:var(--green);border:1px solid var(--green-line)}
  .stsel.t-amber{background-color:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
  .stsel.t-red{background-color:var(--danger-soft);color:var(--danger);border:1px solid #f3c9c6}
  .stsel.t-teal{background-color:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-line)}
  .stsel.t-gray{background-color:#eef3f4;color:var(--soft);border:1px solid var(--line)}
  .t-green{background:var(--green-soft);color:var(--green);border:1px solid var(--green-line)}
  .t-amber{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
  .t-red{background:var(--danger-soft);color:var(--danger);border:1px solid #f3c9c6}
  .t-teal{background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-line)}
  .t-gray{background:#eef3f4;color:var(--soft);border:1px solid var(--line)}
  .grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px}
  .stat{border-top:3px solid var(--primary-bright)}
  .stat .k{font-family:var(--sans);font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--primary)} .stat .l{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);margin-top:5px;font-weight:600}
  .empty{padding:38px 16px;text-align:center;color:var(--soft)} .empty b{display:block;color:var(--ink);margin-bottom:5px;font-size:14.5px;font-weight:700}
  /* data grid */
  .gtools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .gtools .count{color:var(--soft);font-size:12.5px;margin-left:auto}
  .gridwrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);max-height:66vh}
  table.grid{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed}
  table.grid th,table.grid td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;overflow:hidden}
  table.grid th:last-child,table.grid td:last-child{border-right:0}
  table.grid thead th{position:sticky;top:0;background:var(--primary-soft);z-index:2}
  .ghwrap{display:flex;align-items:stretch}
  .gh{display:flex;align-items:center;gap:6px;padding:9px 10px;cursor:grab;user-select:none;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);font-weight:600;flex:1;min-width:0}
  .gh .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gh .sort{font-size:10px;color:var(--primary)}
  .resizer{width:7px;cursor:col-resize;flex:0 0 auto} .resizer:hover{background:var(--primary-line)}
  tr.gfilter-row th{position:sticky;top:var(--th-h);background:#fff;z-index:1;padding:5px 6px}
  .gfilter input,.gfilter select{border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:12px;width:100%}
  input.gcell,select.gcell{border:1px solid transparent;border-radius:0;background:none;padding:8px 10px;font-size:13px;width:100%;font-family:inherit;color:var(--ink)}
  td input.gcell.num{font-family:var(--mono)}
  input.gcell:focus,select.gcell:focus{outline:2px solid var(--primary);outline-offset:-2px;background:#fff}
  td .ro{display:block;padding:8px 10px;color:var(--soft);font-size:13px;font-family:var(--mono)}
  th.gsel,td.gsel{width:42px;text-align:center;vertical-align:middle}
  .gridnote{font-size:12px;color:var(--soft);margin-top:10px;line-height:1.6}
  .vetoggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;user-select:none}
  .vetoggle span{padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--soft)}
  .vetoggle span.act{background:var(--primary);color:#fff}
  .filterwrap{display:flex;align-items:center;gap:4px}
  .funnel{border:1px solid var(--line);background:#fff;border-radius:6px;padding:3px 5px;color:var(--soft);cursor:pointer;line-height:0;flex:0 0 auto}
  .funnel:hover{color:var(--ink)} .funnel.active{color:var(--primary);border-color:var(--primary-line);background:var(--primary-soft)}
  .rocell{display:block;padding:8px 10px;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rocell.num{font-family:var(--mono)}
  .mini{width:100%;border-collapse:collapse}
  .mini th{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--soft);padding:6px 8px;border-bottom:1px solid var(--line);background:#f2f7f8;text-align:left}
  .mini td{padding:5px 8px;border-bottom:1px solid var(--line)}
  .mini input,.mini select{padding:5px 7px;font-size:13px}
  .mini .mono,.mono{font-family:var(--mono)}
  .daygroup{margin-bottom:22px}
  .dayhdr{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);font-weight:600;margin-bottom:8px}
  .bcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
  .bcard-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .stepline{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line)}
  .stepline:last-child{border-bottom:0}
  .stepmeta{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
  .stepmeta select,.stepmeta input{padding:4px 7px;font-size:12px;width:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
  .scrim{position:fixed;inset:0;background:rgba(20,18,14,.42);display:flex;align-items:flex-start;justify-content:center;padding:38px 16px;z-index:40;overflow:auto}
  .sheet{background:var(--card);border-radius:14px;width:100%;max-width:620px}
  .sheet-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
  .sheet-b{padding:18px 20px;max-height:70vh;overflow:auto} .sheet-f{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line)}
  .x{border:0;background:none;font-size:22px;color:var(--soft);cursor:pointer}
  .radio-row{display:flex;gap:16px;margin-bottom:12px} .radio-row label{display:flex;gap:6px;align-items:center;font-size:13px} .radio-row input{width:auto}
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:24px;font-size:13px;z-index:80;opacity:0;transition:opacity .2s}
  .toast.show{opacity:1} .toast.bad{background:var(--danger)}
  .spin{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:sp .7s linear infinite;margin:40px auto}
  @keyframes sp{to{transform:rotate(360deg)}}
  .doct{width:100%;border-collapse:collapse;table-layout:fixed}
  .doct th{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);font-weight:700;padding:8px 10px;border-bottom:2px solid var(--line);text-align:left;background:#f2f7f8}
  .doct td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
  .doct tbody tr:hover{background:#f6fafb}
  .doct input,.doct select{padding:5px 7px;font-size:12.5px}
  .doct tfoot td{border-bottom:0;font-weight:700}
  .docblocks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin:14px 0}
  .docblock .b-eyebrow{margin-bottom:5px}
  .docblock div{font-size:12.5px;line-height:1.55}
  .sumrow{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px}
  .sumrow input{width:80px;padding:4px 7px;font-size:12.5px;text-align:right}
  .sumrow.grand{border-top:2px solid var(--line);margin-top:6px;padding-top:9px;font-weight:700;font-size:15px}
  .recvbar{height:5px;border-radius:3px;background:#e4edee;overflow:hidden;margin-top:3px}
  .recvbar>div{height:100%;background:var(--green)}
  .sidepanel{align-self:start;position:sticky;top:76px}
  .dochead{display:flex;gap:16px 20px;flex-wrap:wrap;align-items:flex-end}
  .dochead label.f,.dochead>div{flex:1 1 170px;min-width:150px;margin:0}
  .gridwrap{-webkit-overflow-scrolling:touch}
  .gridwrap table.doct{min-width:760px}
  .navgroup.open .submenu{display:block}
  @media (max-width:1024px){
    .s3{grid-column:span 6}
    .sidepanel{position:static;grid-column:span 12}
  }
  @media (max-width:700px){
    .content{padding:14px 12px 96px}
    .pagehead{margin-bottom:12px}.pagehead h1{font-size:18px}
    .dochead label.f,.dochead>div{flex:1 1 100%;min-width:0}
    .docblocks{grid-template-columns:1fr;gap:12px}
    .tn-user>span{display:none}
    .tn-brand{font-size:13.5px}.tn-word{font-size:16px}
    .b-card{padding:14px;border-radius:14px}
    .fab .plus{font-size:29px}
    .repbar input,.repbar select{width:100%}
    .gtools>input{flex:1;min-width:140px}
    input,select,textarea{font-size:16px}
    .doct input,.doct select,.gfilter input,.gfilter select{font-size:13px}
  }
  @media print{.topnav,.fab,.fabmenu,.noprint,.pagehead{display:none!important}body{background:#fff}.content{padding:0;max-width:none}.b-card{border:0;box-shadow:none;border-radius:0}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  @media (max-width:820px){.topnav{flex-wrap:wrap;height:auto;padding:8px 14px;gap:8px}.tn-nav{order:3;width:100%}.grid-stats{grid-template-columns:repeat(2,1fr)}}

  /* ================================================================
     2026 DESIGN REFRESH — bolder, roomier, more professional
     Overrides the base rules above; same class names, richer look.
     ================================================================ */

  /* ---- global type & rhythm ---- */
  body{font-size:14.5px;line-height:1.6}
  h1,h2,h3{font-weight:800}

  /* ---- buttons: bigger targets, clearer hierarchy ---- */
  .btn{padding:10px 18px;border-radius:11px;font-weight:700;font-size:13.5px;line-height:1.25;
    border:1.5px solid var(--line);box-shadow:var(--shadow-sm);
    transition:border-color .15s,background .15s,color .15s,box-shadow .15s,transform .12s}
  .btn:hover{border-color:var(--primary-line);color:var(--primary);background:var(--primary-soft);box-shadow:var(--shadow-md);transform:translateY(-1px)}
  .btn:active{transform:translateY(0) scale(.985);box-shadow:var(--shadow-sm)}
  .btn.primary{background:linear-gradient(150deg,var(--primary-bright),var(--primary) 60%);border-color:var(--primary);
    color:#fff;padding:12px 20px;box-shadow:0 3px 10px rgba(2,140,168,.28),inset 0 1px 0 rgba(255,255,255,.18)}
  .btn.primary:hover{background:linear-gradient(150deg,var(--primary),#03566b);color:#fff;
    box-shadow:0 6px 18px rgba(2,140,168,.36),inset 0 1px 0 rgba(255,255,255,.18)}
  .btn.primary.auto{padding:10px 18px}
  .btn.sm{padding:6px 12px;font-size:12.5px;border-radius:9px}
  .btn.danger{color:var(--danger);border-color:#ecc7c3;background:#fff}
  .btn.danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
  .btn.danger:not(:disabled){font-weight:700}
  .btn:disabled{opacity:.45;box-shadow:none;transform:none}
  .ghostbtn{border-radius:11px;padding:10px 14px;font-size:13px}

  /* ---- inputs: taller, softer, clearer focus ---- */
  input,select,textarea{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;
    transition:border-color .15s,box-shadow .15s;background:#fff}
  input:hover,select:hover,textarea:hover{border-color:#c3d6db}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-bright);
    box-shadow:0 0 0 3.5px rgba(3,151,182,.16)}
  /* tick boxes are defined once, further down — see "TICK BOXES" */
  label.f>span{font-size:11px;font-weight:700;color:#476470}

  /* ---- generic data tables: taller rows, stronger header ---- */
  th{font-size:11px;font-weight:800;letter-spacing:.08em;padding:12px 14px;color:#03566b;
    background:linear-gradient(180deg,#f0f8fa,var(--primary-soft));border-bottom:2px solid var(--primary-line)}
  td{padding:12px 14px;font-size:13.5px}
  tbody tr:nth-child(even){background:rgba(2,140,168,.03)}
  tbody tr:hover{background:var(--primary-soft)}

  /* ---- document tables (invoices, POs, bills…) ---- */
  .doct th{font-size:10.5px;font-weight:800;padding:11px 12px;color:#03566b;
    background:linear-gradient(180deg,#f0f8fa,var(--primary-soft));border-bottom:2px solid var(--primary-line)}
  .doct td{padding:11px 12px;font-size:13.5px}
  .doct tbody tr:hover{background:var(--primary-soft)}

  /* ---- editable grid ---- */
  .gridwrap{border-radius:var(--radius);border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
  table.grid thead th{background:linear-gradient(180deg,#f0f8fa,var(--primary-soft))}
  .gh{font-size:11px;font-weight:800;color:#03566b;padding:11px 10px}
  /* (a stale `top:41px` sat here, contradicting the 36px above it and the 34px
     below it; the offset is --th-h now and is set in exactly one place) */
  tr.gfilter-row th{background:#fff}
  input.gcell,select.gcell{padding:10px;font-size:13.5px}
  .rocell{padding:10px;font-size:13.5px}
  th.gsel,td.gsel{width:42px}

  /* ---- mini tables in modals ---- */
  .mini th{padding:9px 10px;font-weight:800}
  .mini td{padding:8px 10px}

  /* ---- cards: more depth, more presence ---- */
  .b-card{border-radius:18px;padding:22px;border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
  .b-card:hover{box-shadow:var(--shadow-md)}
  .b-num{font-size:34px}
  .panel{border-radius:18px;box-shadow:var(--shadow-lg)}
  .stat{border-radius:14px;padding:18px;box-shadow:var(--shadow-sm)}
  .stat .k{font-size:27px}
  .card{border-radius:var(--radius)}

  /* ---- toolbars ---- */
  .gtools{gap:10px;margin-bottom:14px}
  .toolbar{gap:12px;margin-bottom:18px}
  .gtools .count{background:var(--paper);border:1.5px solid var(--line);border-radius:20px;
    padding:5px 13px;font-size:12.5px;font-weight:600;color:#476470}

  /* ---- top navigation: taller, bolder ---- */
  .topnav{height:62px;padding:0 24px;box-shadow:0 3px 14px rgba(14,43,51,.07)}
  .tn-nav button,.navgroup>button,.navgroup>a{font-weight:600;padding:9px 14px;border-radius:10px;font-size:13.5px}
  .tn-nav button.active,.navgroup>button.active,.navgroup>a.active{box-shadow:0 2px 8px rgba(2,109,136,.30)}
  .submenu-inner{border-radius:14px;box-shadow:var(--shadow-lg);border:1.5px solid var(--line);min-width:200px}
  .submenu-inner button,.submenu-inner a{padding:11px 16px;font-size:13.5px}

  /* ---- tags & inline status ---- */
  .tag{font-size:12px;font-weight:700;padding:3.5px 11px;border-radius:20px;letter-spacing:.01em}
  .stsel{font-size:12px;font-weight:700;padding:3.5px 24px 3.5px 11px;width:auto;box-shadow:none}
  .vetoggle{border-radius:11px;border:1.5px solid var(--line);overflow:hidden;box-shadow:var(--shadow-sm)}
  .vetoggle span{padding:8px 16px;font-size:13px}
  .vswitch{border-radius:12px;padding:3.5px}
  .vswitch button,.vswitch a{padding:8px 16px;border-radius:9px}
  .vswitch button.on,.vswitch a.on{box-shadow:0 2px 8px rgba(2,109,136,.22)}

  /* ---- modals & toasts ---- */
  .sheet{border-radius:18px;box-shadow:var(--shadow-lg);max-width:640px}
  .sheet-h{padding:18px 22px} .sheet-b{padding:20px 22px} .sheet-f{padding:16px 22px}
  .scrim{background:rgba(9,26,32,.5);backdrop-filter:blur(3px)}
  .toast{padding:13px 22px;font-size:13.5px;font-weight:600;border-radius:14px;
    box-shadow:0 10px 30px rgba(14,43,51,.3)}

  /* ---- empty states ---- */
  .empty{padding:46px 16px}
  .empty b{font-size:15.5px;font-weight:800}

  /* ---- filters row in grids ---- */
  .gfilter input,.gfilter select{border-radius:8px;padding:6px 8px;font-size:12.5px;border:1.5px solid var(--line)}
  .funnel{border-radius:8px;padding:5px 7px;border:1.5px solid var(--line)}

  /* ---- scrollbars: slim & tidy ---- */
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:#c2d4d9;border-radius:8px;border:3px solid var(--card)}
  ::-webkit-scrollbar-thumb:hover{background:#9fbac2}

  /* ---- small screens keep comfortable targets ---- */
  @media (max-width:700px){
    .btn{padding:10px 15px}
    .btn.sm{padding:6px 11px}
    th,td{padding:10px 10px}
    .doct th,.doct td{padding:9px 9px}
    .b-card{padding:16px;border-radius:15px}
  }

  /* ---- one-line table rows everywhere (pages and pop-ups) ---- */
  table th,table td{white-space:nowrap}
  td{overflow:hidden;text-overflow:ellipsis}
  td>.muted{display:inline;margin-left:7px}
  td .empty{white-space:normal}
  .b-card{overflow-x:auto}
  .card-b{overflow-x:auto}

  /* ---- printable batch label with QR ---- */
  #labelPrint{display:none}
  .label-sheet{width:4in;padding:.25in;border:2px solid #000;border-radius:8px;font-family:var(--sans);color:#000;text-align:center}
  .label-brand{font-size:11px;letter-spacing:.25em;font-weight:800}
  .label-num{font-size:30px;font-weight:800;font-family:var(--mono);margin-top:4px}
  .label-prod{font-size:19px;font-weight:700;margin-top:2px}
  .label-meta{font-size:12px;margin-top:4px}
  .label-qr{width:1.8in;height:1.8in;margin-top:10px}
  .label-co{font-size:11px;margin-top:8px;border-top:1px solid #000;padding-top:6px}
  @media print{
    body.printing-label #root,body.printing-label #modalRoot,body.printing-label .toast{display:none!important}
    body.printing-label #labelPrint{display:flex;justify-content:center;padding-top:.5in}
  }

  /* ---- floor blueprint: shaped rooms + extra cells ---- */
  .bp-cell{position:absolute;border:2px solid var(--primary);border-radius:7px;box-sizing:border-box}
  .bp-room{z-index:1}
  .bp-canvas.painting{cursor:crosshair}
  .bp-canvas.painting .bp-room{cursor:crosshair}
  .bp-room.edit .bp-del{display:block}

  /* ---- loading spinner: the Prodivio icon comes alive ---- */
  .spin{width:64px;height:64px;border:0;border-radius:50%;position:relative;animation:none;margin:48px auto}
  .spin:before{content:"";position:absolute;inset:-8px;border-radius:50%;border:3.5px solid transparent;
    border-top-color:var(--brand-teal);border-right-color:var(--brand-green);border-bottom-color:var(--brand-orange);
    animation:sp .85s linear infinite}
  .spin:after{content:"";position:absolute;inset:5px;border-radius:50%;
    background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAflBMVEUcJBIDVWVdIgScOAQDcok3WiEsSBrpUwRShTBCaidLeSxYjzQCgpzPSQQDQ1ADfZYDOUW5QQQDZ3p/LgUDosNtsUGxQQMAAAACi6dgnDj6VwJlpDtemjcCk7EKFg4DJy4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmkrGgAAAAIHRSTlMRWyRjpVEz27Bxk87UrjjIKIuHQf//fAD8/v3+9/4FEm7iKtMAAAQPSURBVHjalVeLcqMwDBTmDQmQ9O4I2MD//+VJ8tuUpHWnM+BYa0m7kg3M1wOgogGwv1t0NV92vZJmqKat4DcA0PZktyxKLfS30FtT7T8EgI42RTM/FL7iXLn/AIDMI2MPssil/AhQLsnmEcYiG3gLsDdyuTRnCCnLNwDQS5O1awQl20sAWOTb7a0T3QUApO4rPVKPlGy+BYjtNXFmpMChDw5gV2y08GJNe9OWqOSybZaEWRVk0gE0i9KbKTZXbVABe9XF0lKySgHKv3Lpm6anzZTsteZ2AFtJ0CZe7DEASFMuvBmbQ9lwGpa+4ypgjs9pMABlyAY9V43JngZpcW7vIgRIWTiyoiieGU9AQ5GoQMJcBS0hmFTLPgaYik2PV4b+lueCkM2uEbjOfR4NQIaWZmy3AyM4aRK3RAT0rAXtiJGTBiicOSFsE/uwfCNAWBQmI8wC6P2dLXuygYl3icRJ8ik71iy/thYANms9Zscx0iNGoXMe+YF77uC9UxZAB7AV2eHd4XhjH6QNu5NBDPh/aAcmSycHUWCofeSDgh10X1VhRYDZkizMKOy71p5KaxhsBKxGcBQcM0yzj2HLUvW6srGTTCymxdJ3Q/r2w4VECNgjvaIkHi8UQuNRgQAOx/+Iu1Mk48shzK2rY6W4slpfEZxFsCRqg4IIvNmJYucwbFko3abMA/lUEcDgAKYZMJCsiFU9V71uNKbHkbVpc0QDBDI82JttC1WdmbOSjFXflRXsOIBbVAqA4hnCmjBODLNtTntyBKozQHYCIAitUI1zDPiSC2A6NcDwAYACuT2zYciy5/ja/mQzrOuac01UPwMwZapLdRsYYK0FFkUV03jM0xVAAAWzWHkAd08g6hyNx2cA9NMAPGxHugVCun10AKWar9aFqJj4t+yTC7RLbQDEHJSz8Q4+Ahw2AmRijhqKRh8/2D99BDoJFEdYjgEPhrfUAVhTD4JqmFxGUDx4TGXFGIGQj/kZwJN3sy3xlVnlH0Px2gIKXAZ8EjHwMAuozK049CkL5tQctQ6pNGsP4A8Wr+aNWaGF4kFL68cXaIznk2vq4e0fwdEW6IfVOYt7sFD4IvYJMBEYgCloQjQTBMqFg/XLC8P5e3S8B20sSlQt9HPN9fu1nhywAJ6IUKtMFHt9F4n/msPgghF2RhFuAvV6z+khTAu6dLrmuSB2m+m7DltotvI4LeJ80TRMjC6C4N4lEnNvH16yXD3UodBA5I96TVn59rJ9WDWbYGsmNDVO7KPr/sGiB5dtRsjf2ycfHFgU2HUdC4xwTwHyd588eFssAhtCSGKoxfuPriHuGWueOPAPPn72FeOpFrz+xU8+PKfpAuEb8+tvZ3HK3UP86uM7hrjr8/h3APibyGkI8W7RfykxZPhvn1JKAAAAAElFTkSuQmCC") center/contain no-repeat;
    animation:logospin 2.2s ease-in-out infinite}
  @keyframes logospin{
    0%{transform:rotate(0deg) scale(.92);filter:brightness(1.45) saturate(.75) drop-shadow(0 0 0 rgba(2,140,168,0))}
    50%{transform:rotate(180deg) scale(1.06);filter:brightness(.72) saturate(1.35) drop-shadow(0 4px 14px rgba(2,140,168,.35))}
    100%{transform:rotate(360deg) scale(.92);filter:brightness(1.45) saturate(.75) drop-shadow(0 0 0 rgba(2,140,168,0))}}

  /* ---- inbox badge + task chat ---- */
  .navbadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
    border-radius:10px;background:var(--accent-bright);color:#fff;font-size:11px;font-weight:800;
    padding:0 5px;margin-left:3px;vertical-align:1px}
  .tn-nav button.active .navbadge,.navgroup>button.active .navbadge{background:#fff;color:var(--accent)}
  .chatbox{max-height:32vh;overflow:auto;border:1.5px solid var(--line);border-radius:12px;padding:10px;background:var(--paper)}
  .chatmsg{background:#fff;border:1.5px solid var(--line);border-radius:12px 12px 12px 4px;padding:8px 12px;
    margin-bottom:8px;font-size:13px;max-width:85%;white-space:pre-wrap;word-break:break-word}
  .chatmsg.mine{margin-left:auto;background:var(--primary-soft);border-color:var(--primary-line);border-radius:12px 12px 4px 12px}
  .chatmsg .who{font-size:10.5px;font-weight:700;color:var(--soft);margin-bottom:2px}
  .chatmsg:last-child{margin-bottom:0}

  /* ================================================================
     LAYOUT + CONTRAST PASS — full-width bento, deeper colors
     ================================================================ */

  /* ---- pages run edge to edge with a slim gutter ---- */
  .content{padding:18px 18px 64px;max-width:none;width:100%}
  @media (min-width:1500px){ .content{padding:20px 26px 72px} }
  @media (max-width:700px){ .content{padding:12px 10px 96px} }
  .bento{gap:18px}

  /* ---- deeper contrast: text, borders, headers ---- */
  body{background:var(--paper);
    background-image:radial-gradient(760px 440px at 0% 0%,rgba(97,157,57,.09),transparent 62%),
      radial-gradient(800px 480px at 100% 0%,rgba(2,140,168,.11),transparent 62%),
      radial-gradient(700px 420px at 50% 100%,rgba(251,86,3,.06),transparent 62%)}
  .muted{color:var(--soft)}
  .b-card{border:1.5px solid var(--line);box-shadow:0 1px 3px rgba(6,33,42,.07),0 6px 20px rgba(2,86,110,.09)}
  .b-card:hover{box-shadow:0 3px 8px rgba(6,33,42,.09),0 14px 34px rgba(2,86,110,.14)}
  th{color:#023a4b;background:linear-gradient(180deg,#dcedf3,var(--primary-soft));
    border-bottom:2px solid var(--primary-line)}
  .doct th{color:#023a4b;background:linear-gradient(180deg,#dcedf3,var(--primary-soft))}
  table.grid thead th{background:linear-gradient(180deg,#dcedf3,var(--primary-soft))}
  .gh{color:#023a4b}
  td{border-bottom:1px solid var(--line)}
  tbody tr:nth-child(even){background:rgba(2,86,110,.045)}
  tbody tr:hover{background:var(--primary-soft)}
  .gridwrap{border:1.5px solid var(--line)}
  input,select,textarea{border-color:#bdd2d8}
  .hint{color:#3d5c66}
  .b-sub,.b-eyebrow{color:var(--primary)}
  .tint-green .b-sub{color:var(--green)} .tint-amber .b-sub{color:var(--accent)}
  .count{color:#3d5c66}
  .gridnote{color:#3d5c66}
  .caldow{background:#dcedf3;color:#023a4b}
  .calday.dim{background:#eef5f7}
  .mini th{background:#dcedf3;color:#023a4b}
  .stepline{border-bottom:1px solid var(--line)}
  .toast{background:#06212a}

  /* ---- bento consistency: any bare table/panel still reads as a card ---- */
  #view>.gridwrap,#view>table{background:var(--card);border-radius:18px;
    border:1.5px solid var(--line);box-shadow:0 1px 3px rgba(6,33,42,.07),0 6px 20px rgba(2,86,110,.09)}
  .bp-canvas{border:1.5px solid var(--line);border-radius:18px;
    box-shadow:0 1px 3px rgba(6,33,42,.07),0 6px 20px rgba(2,86,110,.09)}
  .floor{gap:16px}
  .room{border:1.5px solid var(--line);box-shadow:0 1px 3px rgba(6,33,42,.06)}
  .bcard,.card{border:1.5px solid var(--line);border-radius:16px;
    box-shadow:0 1px 3px rgba(6,33,42,.07),0 6px 20px rgba(2,86,110,.09)}
  .empty b{color:var(--ink)}

  /* ---- quality control ---- */
  .qcbtns{display:inline-flex;gap:6px;white-space:nowrap}
  .qcbtn{border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:5px 10px;
    font-size:12.5px;font-weight:700;cursor:pointer;color:var(--soft);line-height:1.25}
  .qcbtn:hover{transform:translateY(-1px)}
  .qcbtn.good{color:var(--green);border-color:var(--green-line)}
  .qcbtn.good:hover,.qcbtn.good.on{background:var(--green);border-color:var(--green);color:#fff}
  .qcbtn.dmg{color:var(--amber);border-color:var(--accent-line)}
  .qcbtn.dmg:hover,.qcbtn.dmg.on{background:var(--amber);border-color:var(--amber);color:#fff}
  .qcbtn.waste{color:var(--danger);border-color:#e8b9b6}
  .qcbtn.waste:hover,.qcbtn.waste.on{background:var(--danger);border-color:var(--danger);color:#fff}

  /* the decorative hero blobs sit at negative offsets — clip them so the
     landing page never scrolls sideways */
  .hero{overflow:hidden}
  .lp{overflow-x:clip}

  /* ---- keyboard shortcuts: cheat sheet + quick-jump palette ---- */
  .kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
    padding:0 7px;border:1.5px solid var(--line);border-bottom-width:2.5px;border-radius:6px;
    background:#fff;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink)}
  .kbcols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  @media (max-width:600px){ .kbcols{grid-template-columns:1fr} }
  .kbrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:5px 0;font-size:13px;border-bottom:1px solid var(--line)}
  .kbrow:last-child{border-bottom:0}
  .palrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer}
  .palrow:hover{background:var(--primary-soft)}
  .palrow.on{background:var(--primary);color:#fff}
  .palrow.on .kbd{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff}

  /* ---- label: ingredient + allergen statements ---- */
  .label-ing{font-size:8.5px;line-height:1.35;text-align:left;margin-top:8px;border-top:1px solid #000;padding-top:5px}
  .label-allg{font-size:10px;font-weight:800;text-align:left;margin-top:4px}

  /* ================================================================
     DESIGN TOKEN LAYER — single source of truth (Phase 1)
     Neutral warm-gray chrome; saturation reserved for state.
     Classic theme keeps the brand chrome; body.theme-instrument and
     body.theme-dark re-skin via these tokens only.
     ================================================================ */
  /* tokens moved to the single palette block at the top of this file */
  /* expiry is its own hue — never a shade of amber */
  .t-exp{background:var(--state-expiry-bg);color:var(--state-expiry);border:1px solid var(--state-expiry-border)}
  .stsel.t-exp{background-color:var(--state-expiry-bg);color:var(--state-expiry);border:1px solid var(--state-expiry-border)}
  /* status is never color alone: color + text label + icon */
  .tag:before,.calchip:before{font-size:.9em;margin-right:4px}
  .t-green:before{content:"✓"} .t-amber:before{content:"⏸"} .t-red:before{content:"✕"}
  .t-teal:before{content:"▶"} .t-gray:before{content:"·"} .t-exp:before{content:"⏳"}
  .calchip.g:before{content:"✓"} .calchip.a:before{content:"▶"} .calchip:not(.g):not(.a):before{content:"·"}
  /* tabular figures on all numeric/mono data */
  .mono,.num,.right.mono,td.right,input.num,.b-num{font-variant-numeric:tabular-nums}

  /* ---- site identity: rail + header chip, chrome only ---- */
  body.has-site:before{content:"";position:fixed;left:0;top:0;bottom:0;width:4px;background:var(--site-color);z-index:100}
  .site-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--site-color);border:1.5px solid var(--site-color);
    border-radius:6px;padding:2px 8px;white-space:nowrap}

  /* ---- density scale (compact / default / touch) ---- */
  body[data-density="compact"]{font-size:12.5px}
  body[data-density="compact"] th,body[data-density="compact"] td{padding:6px 10px;font-size:12px}
  body[data-density="compact"] .doct th,body[data-density="compact"] .doct td{padding:5px 8px;font-size:12px}
  body[data-density="compact"] .btn{padding:6px 12px;font-size:12.5px}
  body[data-density="compact"] .btn.sm{padding:3px 8px;font-size:11.5px}
  body[data-density="compact"] input,body[data-density="compact"] select{padding:6px 9px;font-size:12.5px}
  body[data-density="compact"] .b-card{padding:14px}
  body[data-density="touch"]{font-size:18px}
  body[data-density="touch"] th,body[data-density="touch"] td{padding:18px 14px;font-size:16px}
  body[data-density="touch"] .doct th,body[data-density="touch"] .doct td{padding:16px 12px;font-size:16px}
  body[data-density="touch"] .btn{padding:16px 24px;font-size:17px;min-height:56px}
  body[data-density="touch"] .btn.sm{padding:12px 16px;font-size:15px;min-height:48px}
  body[data-density="touch"] input,body[data-density="touch"] select{padding:15px 14px;font-size:17px;min-height:56px}
  body[data-density="touch"] input[type=checkbox],body[data-density="touch"] input[type=radio]{width:24px;height:24px;min-width:24px}
  body[data-density="touch"] .tag,body[data-density="touch"] .stsel{font-size:14px;padding:6px 14px}
  body[data-density="touch"] .tn-nav button,body[data-density="touch"] .navgroup>button,.navgroup>a{padding:14px 18px;font-size:16px}

  /* ---- INSTRUMENT theme: neutral chrome, borders not shadows ---- */
  /* The single Prodivio look: Instrument's structure, density and typography
     carrying the Fresh green palette. Flat surfaces, hairline borders and
     precise type — but green and warm rather than grey. */
  /* A single green radial was set on the canvas here and then replaced further
     down by the three-colour wash that is actually on screen. Removed. */
  body.theme-instrument .topnav,body.theme-instrument .lp-nav{border-image:none;border-bottom:1px solid var(--tk-border-strong);background:var(--surface);box-shadow:none}
  body.theme-instrument .tn-word,body.theme-instrument .lp-word,body.theme-instrument .brandmark{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--tk-text)}
  body.theme-instrument .btn{border-radius:var(--radius-tk);box-shadow:none;transform:none!important}
  body.theme-instrument .btn.primary{background:var(--ink);border-color:var(--ink);box-shadow:none}
  body.theme-instrument .btn.primary:hover{background:#000;box-shadow:none}
  body.theme-instrument .b-card{border-radius:var(--radius-tk-lg);box-shadow:none;border:1px solid var(--tk-border)}
  body.theme-instrument .b-card:hover{box-shadow:none}
  body.theme-instrument .b-card.tint-green:hover{box-shadow:inset 3px 0 0 var(--state-released)}
  body.theme-instrument .b-card.tint-teal:hover{box-shadow:inset 3px 0 0 var(--state-process)}
  body.theme-instrument .b-card.tint-amber:hover{box-shadow:inset 3px 0 0 var(--state-hold)}
  /* Instrument keeps its flat, precise look but is NOT colourless: tinted
     cards use the calibrated state colours, carried by a left keyline plus a
     soft wash, so status reads at a glance without shouting. */
  body.theme-instrument .b-card.tint-green{background:var(--state-released-bg);border-color:var(--state-released-border);box-shadow:inset 3px 0 0 var(--state-released)}
  body.theme-instrument .b-card.tint-teal{background:var(--state-process-bg);border-color:var(--state-process-border);box-shadow:inset 3px 0 0 var(--state-process)}
  body.theme-instrument .b-card.tint-amber{background:var(--state-hold-bg);border-color:var(--state-hold-border);box-shadow:inset 3px 0 0 var(--state-hold)}
  body.theme-instrument .b-card.tint-green .b-num{color:var(--state-released)}
  body.theme-instrument .b-card.tint-teal .b-num{color:var(--state-process)}
  body.theme-instrument .b-card.tint-amber .b-num{color:var(--state-hold)}

  body.theme-instrument .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
  body.theme-instrument .btn.primary:hover{background:var(--primary-bright);border-color:var(--primary-bright)}
  /* brand stripe under the top bar: the one place the logo colours live */
  body.theme-instrument .topnav{border-bottom:1px solid var(--tk-border-strong);
    box-shadow:inset 0 -3px 0 -1px transparent;background-image:var(--tri);
    background-size:100% 2px;background-repeat:no-repeat;background-position:bottom}
  body.theme-instrument .b-eyebrow{color:var(--primary);font-weight:800}
  body.theme-instrument .wf-stage:hover{box-shadow:none;border-color:var(--wf-c,var(--primary))}
  body.theme-instrument .rb-card:hover{box-shadow:none;border-color:var(--tk-border-strong)}
  body.theme-instrument input,body.theme-instrument select,body.theme-instrument textarea{border-radius:var(--radius-tk)}
  body.theme-instrument th,body.theme-instrument .doct th,body.theme-instrument table.grid thead th{background:var(--surface-sunk);color:var(--tk-text-muted);border-bottom:1px solid var(--tk-border-strong)}
  body.theme-instrument tbody tr:nth-child(even){background:transparent} /* no zebra: hairlines only */
  body.theme-instrument tbody tr:hover,body.theme-instrument .doct tbody tr:hover{background:var(--surface-sunk)}
  body.theme-instrument .gridwrap{border-radius:var(--radius-tk-lg);box-shadow:none}
  body.theme-instrument .tag,body.theme-instrument .stsel{border-radius:var(--radius-tk)}
  body.theme-instrument .b-num{color:var(--tk-text)}
  body.theme-instrument .b-eyebrow{color:var(--tk-text-muted)}
  body.theme-instrument .vswitch{background:var(--surface-sunk);border-color:var(--tk-border-strong);border-radius:var(--radius-tk-lg)}
  /* Both halves need the theme prefix. Written as `.vswitch button, .vswitch a`
     the second selector escaped the theme and styled the sign-in / marketing
     page too. */
  body.theme-instrument .vswitch button,body.theme-instrument .vswitch a{color:var(--tk-text-muted);border-radius:var(--radius-tk)}
  body.theme-instrument .vswitch button.on,body.theme-instrument .vswitch a.on{background:var(--surface);color:var(--tk-text);box-shadow:none;border:1px solid var(--tk-border-strong)}
  /* The floating button was hidden outright by the 2026 refinement layer, back
     when it did nothing. It is the Create button now, so only the decorative
     background blobs stay hidden. This rule is why it never appeared, however
     many times the markup was fixed. */
  body.theme-instrument .blob{display:none}
  body.theme-instrument *{transition-duration:var(--motion)!important}
  /* frozen identity columns in editable grids (select box + key column) */
  body.theme-instrument table.grid th:nth-child(-n+2),body.theme-instrument table.grid td:nth-child(-n+2){position:sticky;z-index:3;background:var(--surface)}
  body.theme-instrument table.grid th:first-child,body.theme-instrument table.grid td:first-child{left:0}
  body.theme-instrument table.grid thead th:nth-child(-n+2){z-index:4;background:var(--surface-sunk)}

  /* The dark theme was removed: nothing in the app ever added body.theme-dark.
     boot-guard.js and themes.js only ever apply theme-instrument, so these 33
     lines could not render under any code path. Re-add deliberately if a night
     shift/cold-room theme is actually wanted. */

  /* ---- grid: columns menu, filter dropdown, drag feedback ---- */
  .colmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;width:280px;background:var(--card);
    border:1.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden}
  .cm-head{display:flex;gap:6px;padding:9px 10px;border-bottom:1px solid var(--line)}
  .cm-list{max-height:44vh;overflow:auto;padding:4px 0}
  .cm-row{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:grab;user-select:none;
    background:var(--card);transition:background .12s}
  .cm-row:hover{background:var(--primary-soft)}
  .cm-row.dragging{opacity:.45;background:var(--primary-soft)}
  .cm-grip{color:var(--soft);font-size:11px;letter-spacing:-2px;cursor:grab}
  .cm-label{flex:1;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cm-pin{border:0;background:none;cursor:pointer;font-size:13px;opacity:.25;padding:2px 4px;transition:opacity .12s,transform .12s}
  .cm-pin:hover{opacity:.7} .cm-pin.on{opacity:1;transform:rotate(-45deg)}
  /* Floating panels (column filters, searchable dropdowns) render at the top
     level of the page, not inside the cell that opened them — a table cell
     clips its children, which is what pushed these off-centre before. */
  .floatpanel{background:var(--card);border:1.5px solid var(--line);border-radius:11px;
    box-shadow:var(--shadow-lg);padding:10px;font-size:13px}
  .floatpanel select,.floatpanel input{font-size:12.5px;padding:6px 8px;width:100%}
  .fpanel select,.fpanel input{font-size:12.5px;padding:6px 8px}

  /* ============================================================
     ALIGNMENT PASS — one rhythm for cards, tables, rows and text.
     Everything below sets shared measurements rather than styling
     one screen, so every page lines up on the same grid.
     ============================================================ */

  /* Cards in a row match height and their contents start on the same line,
     instead of each card sizing to its own text.
     A card that defines its OWN layout keeps it — making every card a column
     turned the document header on invoices and purchase orders from a row of
     fields into a tall stack pushed to one side. */
  .bento{align-items:stretch}
  .b-card{display:flex;flex-direction:column;min-width:0}
  .b-card.dochead{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
  .b-card>.b-eyebrow:first-child{margin-bottom:8px}
  .b-card .hint:last-child,.b-card .muted:last-child{margin-bottom:0}
  /* the big number in a KPI card always sits at the same height */
  .b-card .b-num{margin-top:auto;padding-top:4px;line-height:1.1}
  .b-card .b-sub{min-height:16px}

  /* Section headings between card blocks — consistent spacing everywhere. */
  .sec-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);
    font-weight:700;margin:22px 2px 10px}

  /* Document tables (POs, receipts, shipments, invoices): one row height, one
     padding, numbers right-aligned and figure-aligned so columns of money line
     up digit under digit. */
  table.doct,table.mini{width:100%;border-collapse:collapse;table-layout:auto}
  table.doct th,table.mini th{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--soft);font-weight:700;text-align:left;padding:8px 10px;
    border-bottom:1.5px solid var(--line);white-space:nowrap}
  table.doct td,table.mini td{padding:9px 10px;border-bottom:1px solid var(--line);
    font-size:13px;vertical-align:middle}
  table.doct tr:last-child td,table.mini tr:last-child td{border-bottom:0}
  table.doct th.right,table.doct td.right,table.mini th.right,table.mini td.right{text-align:right}
  table.doct .mono,table.mini .mono,table.grid .mono{font-variant-numeric:tabular-nums}
  table.doct tbody tr:hover,table.mini tbody tr:hover{background:var(--primary-soft)}

  /* Grid cells: inputs fill the cell exactly, so no half-pixel gaps and no
     input that is a different height from its neighbours. */
  table.grid td>input:not([type=checkbox]):not([type=radio]),table.grid td>select{width:100%;height:34px;border:0;background:transparent;
    padding:0 9px;font-size:13px;color:var(--ink);border-radius:0}
  table.grid td>input:not([type=checkbox]):focus,table.grid td>select:focus{outline:2px solid var(--primary);
    outline-offset:-2px;background:var(--card)}
  table.grid td>input.num,table.grid td .right{text-align:right;font-variant-numeric:tabular-nums}
  table.grid td.gsel{text-align:center}
  table.grid tbody tr{height:34px}

  /* Form fields: label above input, equal heights, no drift between a text box,
     a dropdown and a date picker sitting next to each other. */
  label.f{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;min-width:0}
  label.f>span{font-size:11.5px;font-weight:600;color:var(--soft)}
  label.f>input,label.f>select,label.f>textarea{width:100%;box-sizing:border-box}
  input,select,textarea{font-family:inherit;font-size:13.5px}
  /* A fixed height and vertical padding fight each other: the padding eats the
     line box until descenders (g, y, p) are sliced off the bottom. Anything
     with a set height therefore centres its text with line-height instead of
     padding — the text sits truly in the middle, at any size. */
  input:not([type=checkbox]):not([type=radio]), select{
    height:36px; box-sizing:border-box;
    padding-top:0; padding-bottom:0; line-height:34px}
  select{line-height:normal}                /* a select centres its own text */
  textarea{padding:9px 11px;line-height:1.45;height:auto}

  /* Toolbars and button rows: one height, aligned baselines, wraps cleanly. */
  .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .toolbar .sp{flex:1}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;
    padding:0 14px;white-space:nowrap;box-sizing:border-box}
  .btn.sm{height:28px;padding:0 10px;font-size:12px}
  .statbox{display:flex;flex-direction:column;gap:2px;min-width:0}

  /* Stat rows inside cards line their values up on the right edge. */
  .sumrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:5px 0;font-size:13px}
  .sumrow .mono{font-variant-numeric:tabular-nums}
  .sumrow.grand{border-top:1.5px solid var(--line);margin-top:6px;padding-top:9px;font-weight:700}

  /* Setup check page */
  .setup-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-top:6px}
  .setup-head-note{flex:1;min-width:260px;font-size:13px;color:var(--soft);line-height:1.5}
  .setup-count{display:flex;align-items:baseline;gap:8px;margin:8px 0 6px}
  .setup-count b{font-size:26px;line-height:1}
  .setup-count .muted{font-size:12.5px}
  .setup-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:10px}
  .setup-fill{height:100%;background:var(--primary);border-radius:99px}
  .setup-why{font-size:12.5px;color:var(--soft);line-height:1.5;margin-bottom:8px}
  .setup-fix{font-size:12.5px;line-height:1.5;margin-bottom:12px}
  .setup-done{display:flex;flex-wrap:wrap;gap:8px}
  .b-card.tint-red{background:linear-gradient(150deg,#fff 40%,var(--danger-soft));border-color:#e6c7c1}

  /* ---- phone (<=700px): the floor screens have to work in a hand ---- */
  @media (max-width:700px){
    .bento{grid-template-columns:repeat(2,1fr);gap:12px}
    .s1,.s2,.s3,.s4,.s5,.s6{grid-column:span 2}
    .s7,.s8,.s9,.s10,.s11,.s12{grid-column:span 2}
    .b-card{padding:14px;border-radius:14px}
    .toolbar{gap:8px}
    .toolbar .btn{flex:1 1 auto;min-width:44%}
    /* tap targets big enough to hit with a glove on */
    .btn{height:42px;font-size:14px}
    .btn.sm{height:34px}
    table.grid td>input:not([type=checkbox]):not([type=radio]),table.grid td>select{height:40px;font-size:14px}
    input[type=checkbox],input[type=radio]{width:22px;height:22px;min-width:22px}  /* easier to hit on a phone */
    table.grid tbody tr{height:40px}
    /* document tables scroll rather than squeeze into unreadable columns */
    .gridwrap{-webkit-overflow-scrolling:touch}
    table.doct,table.mini{font-size:12.5px}
    table.doct th,table.mini th{padding:7px 8px}
    table.doct td,table.mini td{padding:8px}
    .setup-head-note{min-width:0}
    label.f{margin-bottom:14px}
    input:not([type=checkbox]):not([type=radio]),select{height:42px;font-size:16px;
      padding-top:0;padding-bottom:0;line-height:40px}  /* 16px stops iOS zooming on focus */
    select{line-height:normal}
    .gpager{justify-content:center}
    .gpager .sp{flex:0}
  }

  /* ============================================================
     TYPING IN A TABLE — the cursor fills the cell.
     A cell you can type in behaves like a spreadsheet cell: the
     input IS the cell, edge to edge, with the focus ring drawn
     inside the cell border rather than a rounded box floating in
     the middle of it. One rule for every table on the site.
     ============================================================ */
  table.grid td:has(> input:not([type=checkbox]):not([type=radio])), table.grid td:has(> select),
  table.doct td:has(> input:not([type=checkbox]):not([type=radio])), table.doct td:has(> select),
  table.mini td:has(> input:not([type=checkbox]):not([type=radio])), table.mini td:has(> select),
  table.tably td:has(> input:not([type=checkbox]):not([type=radio])), table.tably td:has(> select){padding:0}

  table.grid td > input:not([type=checkbox]):not([type=radio]), table.grid td > select,
  table.doct td > input:not([type=checkbox]):not([type=radio]), table.doct td > select,
  table.mini td > input:not([type=checkbox]):not([type=radio]), table.mini td > select,
  table.tably td > input:not([type=checkbox]):not([type=radio]), table.tably td > select{
    width:100%; height:34px; box-sizing:border-box;
    border:0; border-radius:0; background:transparent; color:var(--ink);
    padding:0 9px; line-height:34px; font-size:13px; font-family:inherit; margin:0;
    -webkit-appearance:none; appearance:none}
  /* a dropdown still needs its arrow */
  table.grid td > select, table.doct td > select,
  table.mini td > select, table.tably td > select{
    padding-right:22px;
    background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),
      linear-gradient(135deg,var(--soft) 50%,transparent 50%);
    background-position:calc(100% - 13px) 14px, calc(100% - 8px) 14px;
    background-size:5px 5px,5px 5px; background-repeat:no-repeat}
  table.grid td > input:not([type=checkbox]):focus, table.grid td > select:focus,
  table.doct td > input:not([type=checkbox]):focus, table.doct td > select:focus,
  table.mini td > input:not([type=checkbox]):focus, table.mini td > select:focus,
  table.tably td > input:not([type=checkbox]):focus, table.tably td > select:focus{
    outline:2px solid var(--primary); outline-offset:-2px; background:var(--card)}
  table.doct td > input.num, table.mini td > input.num,
  table.tably td > input.num, table.grid td > input.num{text-align:right;font-variant-numeric:tabular-nums}
  /* buttons inside a cell keep their own shape and their breathing room */
  table.doct td:has(> button), table.mini td:has(> button),
  table.tably td:has(> button){padding:4px 6px}

  /* ============================================================
     TABLE HEADERS — one height, one alignment, everywhere.
     A header cell, its filter box and the cells below it are three
     separate rows that must read as one column. These set the
     shared measurements so they cannot drift apart.
     ============================================================ */
  table.grid thead th, table.doct thead th, table.mini thead th, table.tably thead th{
    height:34px; padding:0 10px; vertical-align:middle;
    font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  /* the draggable header of an item grid fills its cell, so the label sits on
     the same line as a plain header next to it */
  table.grid thead th .ghwrap{height:34px}
  table.grid thead th .gh{padding:0 0 0 2px;height:34px;font-size:10.5px;letter-spacing:.07em}
  table.grid thead th.right .gh, table.doct thead th.right, table.mini thead th.right{justify-content:flex-end;text-align:right}

  /* THE FILTER ROW — the box is the cell, matching the row above and below.
     Previously it was a small rounded box floating in a padded cell, which is
     why the column edges did not line up with the header. */
  table.grid tr.gfilter-row th{padding:0;height:32px;vertical-align:middle;background:var(--card)}
  .gfilter.filterwrap{display:flex;align-items:stretch;height:32px;gap:0}
  .gfilter.filterwrap > input, .gfilter.filterwrap > select{
    flex:1;min-width:0;height:32px;border:0;border-radius:0;background:transparent;
    padding:0 9px;line-height:32px;font-size:12.5px;color:var(--ink);box-sizing:border-box}
  .gfilter.filterwrap > select{line-height:normal}
  .gfilter.filterwrap > input:focus, .gfilter.filterwrap > select:focus{
    outline:2px solid var(--primary);outline-offset:-2px;background:var(--card)}
  /* a column being filtered is obvious at a glance */
  .gfilter.filterwrap > input:not(:placeholder-shown){background:var(--primary-soft);font-weight:600}
  .funnel{flex:0 0 26px;width:26px;height:32px;border:0;border-left:1px solid var(--line);
    border-radius:0;background:transparent;color:var(--soft);cursor:pointer;
    display:grid;place-content:center;padding:0}
  .funnel:hover{background:var(--primary-soft);color:var(--primary)}
  .funnel.active{background:var(--primary);color:#fff}

  /* ============================================================
     TICK BOXES — one size and one look everywhere.
     The row boxes used to be near-invisible next to the header
     box. Every checkbox and radio on the site is now drawn the
     same way, at the same size, centred in its cell, so a column
     of them reads as a straight line.
     ============================================================ */
  input[type=checkbox], input[type=radio]{
    appearance:none; -webkit-appearance:none;
    width:20px; height:20px; min-width:20px; flex:0 0 20px;
    margin:0; padding:0; box-sizing:border-box; cursor:pointer;
    border:1.5px solid var(--tk-border-strong,#B2D2BE); border-radius:7px;
    background:linear-gradient(180deg,#fff,#eef4f2);
    display:inline-grid; place-content:center;
    box-shadow:0 1px 2px rgba(2,45,58,.10), inset 0 1px 0 rgba(255,255,255,.9);
    transition:background .13s, border-color .13s, box-shadow .13s, transform .08s;
    vertical-align:middle}
  input[type=radio]{border-radius:50%}
  input[type=checkbox]:hover, input[type=radio]:hover{
    border-color:var(--primary);
    box-shadow:0 1px 3px rgba(2,45,58,.16), inset 0 1px 0 rgba(255,255,255,.9)}
  input[type=checkbox]:active, input[type=radio]:active{transform:scale(.92)}
  input[type=checkbox]::before{
    content:''; width:11px; height:11px; transform:scale(0); transition:transform .14s cubic-bezier(.2,.8,.3,1.4);
    background:#fff;
    clip-path:polygon(14% 44%, 0 60%, 39% 100%, 100% 18%, 84% 2%, 39% 68%)}
  input[type=radio]::before{
    content:''; width:9px; height:9px; border-radius:50%; background:#fff; transform:scale(0); transition:transform .14s cubic-bezier(.2,.8,.3,1.4)}
  input[type=checkbox]:checked, input[type=radio]:checked{
    background:linear-gradient(180deg,var(--primary-bright,#249256),var(--primary));
    border-color:var(--primary);
    box-shadow:0 1px 3px rgba(2,90,60,.30), inset 0 1px 0 rgba(255,255,255,.28)}
  input[type=checkbox]:checked::before, input[type=radio]:checked::before{transform:scale(1)}
  input[type=checkbox]:indeterminate{background:var(--primary);border-color:var(--primary)}
  input[type=checkbox]:indeterminate::before{
    transform:scale(1); clip-path:none; height:2px; width:10px; border-radius:1px}
  input[type=checkbox]:focus-visible, input[type=radio]:focus-visible{
    outline:2px solid var(--primary); outline-offset:2px}
  input[type=checkbox]:disabled, input[type=radio]:disabled{opacity:.45;cursor:not-allowed}

  /* the select column: same box, same place, header and rows on one line */
  table.grid th.gsel, table.grid td.gsel{
    width:42px; padding:0; text-align:center; vertical-align:middle}
  table.grid th.gsel > input, table.grid td.gsel > input{
    width:20px; height:20px; display:inline-grid; margin:0 auto}
  /* a tick box sitting in a label reads as one control with its text */
  label > input[type=checkbox], label > input[type=radio]{margin-right:2px}

  /* a table whose widths come from a colgroup must not be re-measured */
  table.fixedcols{table-layout:fixed}
  table.fixedcols th,table.fixedcols td{overflow:hidden;text-overflow:ellipsis}

  /* ---- paired form fields line up even when one label wraps ---- */
  label.f > span{min-height:16px;display:block}
  .fieldpair{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
  .fieldpair label.f{margin-bottom:0}

  /* ---- batch close / plan vs actual ---- */
  .bc-warn{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:10px;
    padding:10px 12px;font-size:12.5px;line-height:1.5;margin-top:10px}
  .bc-short{color:var(--danger);font-weight:700}
  .bc-shorttag{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--danger)}
  .bc-preview{margin-top:14px;padding:12px 14px;background:var(--primary-soft);border-radius:11px}
  .bc-prow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:3px 0;font-size:13px}
  .bc-prow b{font-variant-numeric:tabular-nums}
  .bc-ok{color:var(--green-ink,var(--ink))}
  .bc-bad{color:var(--danger);font-weight:700}
  .bc-over{color:var(--accent);font-weight:700}

  /* location switcher in the top bar */
  .site-sel{width:auto;height:28px;padding:0 8px;line-height:normal;font-size:12px;border-radius:8px;
    border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.10);color:#fff}
  .site-sel option{color:var(--ink);background:var(--card)}

  /* ============================================================
     PARTNER WORKSPACE — list frozen on the left, record on the right.
     The list never scrolls away, so the next record is always one
     click; the record's essentials pin to the top and the bottom
     is given to transactions.
     ============================================================ */
  .hub{display:grid;grid-template-columns:290px 1fr;gap:14px;
    height:calc(100vh - 150px);min-height:520px}
  .hub-side{display:flex;flex-direction:column;min-height:0;
    background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .hub-side-h{padding:10px;border-bottom:1px solid var(--line);background:var(--card)}
  .hub-side-h input{width:100%;height:32px;padding:0 10px;line-height:30px;border:1.5px solid var(--line);
    border-radius:8px;font-size:13px;background:var(--card);color:var(--ink);box-sizing:border-box}
  .hub-side-tools{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
  .hub-side-tools .btn{flex:1 1 auto;min-width:0;padding:0 8px}
  .hub-list{flex:1;overflow:auto;min-height:0}
  .hub-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
    padding:9px 11px;border:0;border-bottom:1px solid var(--line);background:transparent;
    font-size:13px;cursor:pointer;color:var(--ink);font-family:inherit}
  .hub-item:hover{background:var(--primary-soft)}
  .hub-item.on{background:var(--primary);color:#fff;font-weight:700}
  .hub-item.on .hub-bal{color:#fff}
  .hub-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hub-bal{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700}
  .hub-side-f{padding:7px 11px;border-top:1px solid var(--line);font-size:11.5px}

  .hub-main{display:flex;flex-direction:column;min-height:0;min-width:0}
  .hub-head{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start;
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
  .hub-title{font-size:19px;font-weight:800;line-height:1.2}
  .hub-sub{font-size:12.5px;line-height:1.5;margin-top:2px}
  .hub-head-r{display:flex;gap:18px;flex-wrap:wrap}
  .hub-kpi{min-width:96px}
  .hub-kpi .b-num{font-size:20px;line-height:1.15;margin:0}
  .hub-kpi.warn .b-num{color:var(--accent)}
  .hub-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;
    border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
  .hub-tabs{margin:12px 0 10px}
  .hub-body{flex:1;overflow:auto;min-height:0;
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
  .hub-filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
  .hub-filters label.f{margin-bottom:0;min-width:190px}
  .hub-fsum{margin-left:auto;font-size:12.5px}
  .pf-row{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
    border-bottom:1px solid var(--line);font-size:13px}
  .pf-row:last-child{border-bottom:0}
  .pf-row span{color:var(--soft)}
  @media (max-width:900px){
    .hub{grid-template-columns:1fr;height:auto}
    .hub-list{max-height:230px}
    .hub-head{grid-template-columns:1fr}
  }

  /* ---- audit trail ---- */
  .ad-filters{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
  .ad-filters label.f{flex:1 1 170px;min-width:150px;margin-bottom:0}
  .ad-summary{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;margin-top:6px}
  .ad-list{display:flex;flex-direction:column}
  .ad-entry{border-bottom:1px solid var(--line)}
  .ad-entry:last-child{border-bottom:0}
  .ad-head{display:grid;grid-template-columns:86px minmax(160px,1.6fr) minmax(140px,1.2fr) 190px 76px 18px;
    gap:12px;align-items:center;padding:9px 4px;cursor:pointer;font-size:12.5px}
  .ad-head:hover{background:var(--primary-soft)}
  .ad-head .ad-ent,.ad-head .ad-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ad-who{color:var(--soft)}
  .ad-when{color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
  .ad-count{color:var(--soft);text-align:right;white-space:nowrap}
  .ad-caret{color:var(--soft);transition:transform .15s}
  .ad-head.open .ad-caret{transform:rotate(180deg)}
  .ad-body{padding:4px 4px 14px 98px}
  .ad-note{font-size:12.5px;color:var(--soft);margin-bottom:8px}
  table.ad-diff{width:100%;border-collapse:collapse;font-size:12.5px}
  table.ad-diff th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--soft);font-weight:700;padding:5px 8px;border-bottom:1px solid var(--line)}
  table.ad-diff td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
  table.ad-diff tr:last-child td{border-bottom:0}
  .ad-f{font-weight:600;width:190px}
  .ad-from{color:var(--danger);text-decoration:line-through;text-decoration-color:rgba(167,36,32,.4);width:30%}
  .ad-arrow{color:var(--soft);width:18px;text-align:center}
  .ad-to{color:var(--green-ink,var(--ink));font-weight:600;width:30%}
  @media (max-width:700px){
    .ad-head{grid-template-columns:1fr auto;gap:6px}
    .ad-head .ad-when{grid-column:1/-1}
    .ad-body{padding-left:4px}
    .ad-f{width:auto}
  }

  /* ---- backup ---- */
  .bk-status{margin-top:14px}
  .bk-msg{font-size:12.5px;color:var(--soft);margin-bottom:7px}
  .bk-layer{margin-top:12px;font-size:12.5px;line-height:1.55}
  .bk-layer b{display:block;margin-bottom:2px}
  .bk-layer>div{color:var(--soft)}
  .bk-routine{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:10px;font-size:12.5px}
  .bk-routine b{display:block;margin-bottom:3px}
  .bk-routine>div>div{color:var(--soft);line-height:1.5}

  /* typed-format feedback (phone / date / email) */
  input.inp-bad{border-color:var(--danger)!important;box-shadow:0 0 0 3px var(--danger-soft)!important}
  .inp-msg{color:var(--danger);font-size:11.5px;margin-top:3px;line-height:1.35}

  /* live address suggestions */
  .addrbox{background:var(--card);border:1.5px solid var(--line);border-radius:10px;
    box-shadow:var(--shadow-lg);overflow:hidden;font-size:13px}
  .addr-opt{padding:8px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .addr-opt:hover{background:var(--primary-soft)}
  .addr-note{padding:6px 10px;font-size:11.5px;color:var(--soft);border-top:1px solid var(--line)}

  /* import progress — shown while a sheet is being saved */
  .impbar{position:fixed;inset:0;z-index:5000;background:rgba(15,32,39,.34);
    display:flex;align-items:center;justify-content:center}
  .impbar-in{background:var(--card);border:1.5px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow-lg);padding:22px 26px;min-width:300px;text-align:center}
  .impbar-msg{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:12px}
  .impbar-track{height:8px;border-radius:99px;background:var(--primary-soft);overflow:hidden}
  .impbar-fill{height:100%;width:4%;border-radius:99px;background:var(--primary);transition:width .25s ease}

  /* the row-buttons column — a normal column now, so it can be dragged,
     pinned or moved to the front like any other */
  table.grid td.actcell{padding:4px 6px;text-align:right;white-space:nowrap}
  table.grid td.actcell .btn{margin-left:2px}

  /* pager under every grid */
  .gpager{display:flex;align-items:center;gap:6px;padding:9px 4px 2px;font-size:12.5px;flex-wrap:wrap}
  .gpager .sp{flex:1}
  .gpager .muted{color:var(--soft)}

  /* searchable dropdown */
  .pickerpanel{padding:8px}
  .pk-search{margin-bottom:6px}
  .pk-search input{width:100%;height:34px;padding:0 9px;line-height:32px;border:1.5px solid var(--line);
    border-radius:8px;font-size:13px;background:var(--card);color:var(--ink);box-sizing:border-box}
  .pk-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
  .pk-list{max-height:270px;overflow:auto;margin:0 -2px}
  .pk-opt{padding:7px 9px;border-radius:7px;cursor:pointer;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;line-height:1.3}
  .pk-opt:hover,.pk-opt.act{background:var(--primary-soft);color:var(--primary-ink,var(--ink))}
  .pk-opt.sel{font-weight:700}
  .pk-opt.sel::after{content:'✓';float:right;color:var(--primary);font-weight:700}
  .pk-empty{padding:10px 9px;color:var(--soft);font-size:12.5px}
  select.pk-open{border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--primary-soft)}
  th.drop-before{box-shadow:inset 3px 0 0 var(--primary)!important}
  th.drop-after{box-shadow:inset -3px 0 0 var(--primary)!important}
  th.drag-src .gh{opacity:.4}
  .gh{transition:opacity .13s}
  .funnel.active{color:#fff;background:var(--primary);border-color:var(--primary)}



/* =========================================================================
   PRODUCTION FLOW — the pipeline across the top of /production-flow
   A real grid (not a flex row), so all seven stages share one baseline and
   every action button lines up on the same line no matter how long the
   labels are.
   ========================================================================= */
.wf-pipe{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-bottom:20px}
.wf-stage{position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 15px 15px;cursor:pointer;overflow:hidden;
  transition:border-color .14s,box-shadow .14s,transform .14s}
.wf-stage:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--wf-c,var(--primary))}
.wf-stage:hover{border-color:var(--wf-c,var(--primary));box-shadow:var(--shadow-md);transform:translateY(-2px)}
/* the connector chevron between stages */
.wf-stage+.wf-stage:after{content:"";position:absolute;left:-9px;top:50%;width:6px;height:6px;
  border-top:2px solid var(--line);border-right:2px solid var(--line);
  transform:translateY(-50%) rotate(45deg)}
.wf-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wf-num{flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  background:var(--wf-bg,var(--primary-soft));color:var(--wf-c,var(--primary));
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:var(--mono)}
.wf-title{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-big{font-size:32px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--wf-c,var(--ink))}
.wf-sub{font-size:11.5px;line-height:1.35;color:var(--soft);margin-top:5px}
.wf-stage .btn{margin-top:auto;padding-top:8px;padding-bottom:8px;font-size:12px;width:100%}
.wf-spacer{margin-top:auto}
@media (max-width:1400px){.wf-pipe{grid-template-columns:repeat(4,1fr)}
  .wf-stage+.wf-stage:after{display:none}}
@media (max-width:900px){.wf-pipe{grid-template-columns:repeat(2,1fr);gap:10px}
  .wf-big{font-size:26px}}
@media (max-width:520px){.wf-pipe{grid-template-columns:1fr}}

.wf-steps{display:flex;flex-direction:column;gap:0;margin-top:12px}
.wf-steps>div{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;
  font-size:12.8px;line-height:1.5;padding:9px 0;border-bottom:1px solid var(--line)}
.wf-steps>div:last-child{border-bottom:0}
.wf-steps b.n{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--primary);
  background:var(--primary-soft);border-radius:4px;text-align:center;padding:2px 0;line-height:1.5}

/* =========================================================================
   ROOM BOARD — one column per production room
   ========================================================================= */
.roomboard{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:14px;
  overflow-x:auto;align-items:start;padding-bottom:8px}
.rb-col{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;min-height:130px}
.rb-head{display:flex;align-items:center;gap:8px;padding:0 2px 11px;margin-bottom:2px;
  border-bottom:1px solid var(--line)}
.rb-head b{font-size:13px;letter-spacing:-.01em}
.rb-head .muted{font-size:11px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--soft)}
.rb-count{flex:0 0 auto;background:var(--primary-soft);color:var(--primary);border-radius:999px;
  padding:2px 9px;font-size:11px;font-weight:800;font-family:var(--mono)}
.rb-card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--primary-line);
  border-radius:10px;padding:11px 12px;margin-top:10px;cursor:pointer;transition:box-shadow .14s,border-color .14s}
.rb-card:hover{box-shadow:var(--shadow-sm);border-left-color:var(--primary)}
.rb-card.active{border-left-color:var(--accent);background:linear-gradient(100deg,var(--accent-soft) 0%,var(--card) 42%)}
.rb-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px}
.rb-top .mono{color:var(--soft);font-weight:700}
.rb-prod{font-weight:800;font-size:13.5px;margin-top:5px;letter-spacing:-.01em}
.rb-step{font-size:12px;margin-top:3px;color:var(--ink)}
.rb-meta{font-size:11px;color:var(--soft);margin-top:3px}
.rb-bar{height:5px;border-radius:999px;background:var(--primary-soft);margin-top:9px;overflow:hidden}
.rb-bar i{display:block;height:100%;background:var(--primary);border-radius:999px;transition:width .3s}
.rb-btns{display:flex;gap:7px;margin-top:10px}
.rb-empty{font-size:12px;color:var(--soft);padding:18px 6px;text-align:center}

/* =========================================================================
   TODAY'S PLAN — the running order for each room
   ========================================================================= */
.plan-row{display:grid;grid-template-columns:24px 1fr auto auto;gap:10px;align-items:center;
  padding:9px 2px;border-bottom:1px solid var(--line)}
.plan-row:last-child{border-bottom:0}
.plan-row.active{background:var(--accent-soft);border-radius:8px;padding-left:8px;padding-right:8px;border-bottom-color:transparent}
.plan-ord{width:22px;height:22px;border-radius:50%;background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;font-family:var(--mono)}
.plan-name{font-size:13px;font-weight:700;letter-spacing:-.01em}
.plan-meta{font-size:11.5px;color:var(--soft);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-time{font-size:11.5px;color:var(--soft);white-space:nowrap;font-family:var(--mono)}
@media (max-width:700px){.plan-row{grid-template-columns:24px 1fr auto}
  .plan-time{grid-column:2/-1;padding-left:0}}

/* =========================================================================
   RECIPE: derived step amounts + step durations
   ========================================================================= */
.sharecell,.mincell{display:flex;align-items:center;gap:4px}
.sharecell input{width:54px;text-align:right}
.mincell input{width:58px;text-align:right}
.sharecell .pc,.mincell .pc{font-size:11px;color:var(--soft);font-weight:700}
.mincell.needs input{border-color:var(--accent);background:var(--accent-soft)}
.autoqty{padding:4px 2px;line-height:1.2}
.autoqty b{font-size:12.5px;font-family:var(--mono)}
.autoqty div{font-size:10.5px;color:var(--soft);font-family:var(--mono)}
.allocwarn{grid-column:1/-1;font-size:11px;color:var(--accent);padding:0 2px 7px;line-height:1.35}
.allocwarn.over{color:var(--danger);font-weight:600}

/* =========================================================================
   DEPLOYMENT VERSION STAMP
   ========================================================================= */
.buildchip{background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-line);
  border-radius:999px;padding:3px 10px;font-family:var(--mono);font-size:11px;font-weight:700;cursor:pointer}
.buildchip:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.buildline{margin-top:16px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--soft)}

/* =========================================================================
   DASHBOARD — KPI bands
   Each tile is an <a>, so Ctrl/Cmd+click opens that page in a new tab.
   ========================================================================= */
  .kpi-band{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--soft);margin:22px 0 10px;display:flex;align-items:center;gap:12px}
  .kpi-band:first-child{margin-top:0}
  .kpi-band:after{content:"";flex:1;height:1px;background:var(--line)}
  .bento+.kpi-band{margin-top:24px}
  a.b-card.kpi{display:flex;flex-direction:column;text-decoration:none;color:inherit;
    min-height:112px;transition:border-color .14s,box-shadow .14s,transform .14s}
  a.b-card.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary-line)}
  a.b-card.kpi:visited{color:inherit}
  .kpi .b-num{margin-top:4px}
  .kpi-sub{font-size:11.5px;color:var(--soft);margin-top:auto;padding-top:8px;line-height:1.35}
  .dash-links{display:flex;flex-direction:column;margin-top:10px}
  .dash-links a{text-decoration:none;color:var(--primary);font-weight:600;font-size:13px;
    padding:8px 10px;border-radius:8px;transition:background .12s}
  .dash-links a:hover{background:var(--primary-soft)}
  @media (max-width:900px){a.b-card.kpi{min-height:98px}}

  .tn-home{text-decoration:none}

/* new-version banner (shown when a newer deployment is detected) */
  #updbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9999;
    display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;
    padding:11px 16px;border-radius:12px;box-shadow:var(--shadow-lg);font-size:13px;max-width:92vw}
  #updbar button{background:var(--primary);border:0;color:#fff;font-weight:700;font-size:12.5px;
    padding:7px 14px;border-radius:8px;cursor:pointer;white-space:nowrap}
  #updbar button:hover{background:var(--primary-bright)}

/* =========================================================================
   REFINEMENT — smooth, modern, friendly-but-professional.
   The crispness stays where it belongs: cards, boxes and tables keep their
   sharp corners and hairline borders. Everything a hand touches — buttons,
   inputs, tags, switches — turns soft and rounded, type moves to Plus
   Jakarta Sans, and gentle shadows give the surfaces quiet depth.
   The expensive part is contrast: the top bar and every table header are
   deep ink with light type, sitting against a light, airy body.
   ========================================================================= */
  /* tokens moved to the single palette block at the top of this file */

  /* ---- soft where hands touch ---- */
  body.theme-instrument .btn{border-radius:10px;font-weight:600}
  body.theme-instrument .btn:not(.primary):not(.danger):hover{border-color:var(--tk-border-strong);box-shadow:var(--shadow-sm)}
  body.theme-instrument .btn.primary{border-radius:10px;box-shadow:0 1px 2px rgba(31,122,76,.25)}
  body.theme-instrument .btn.primary:hover{box-shadow:0 3px 10px rgba(31,122,76,.30)}
  body.theme-instrument input,body.theme-instrument select,body.theme-instrument textarea{border-radius:9px}
  body.theme-instrument .tag,body.theme-instrument .stsel{border-radius:999px;font-weight:600}
  body.theme-instrument .vswitch{border-radius:11px}
  body.theme-instrument .vswitch button,body.theme-instrument .vswitch a{border-radius:8px}
  body.theme-instrument .vswitch button.on,body.theme-instrument .vswitch a.on{box-shadow:var(--shadow-sm)}

  /* ---- crisp where data lives: cards keep their edges, gain quiet depth ---- */
  body.theme-instrument .b-card{border-radius:var(--radius-tk-lg);box-shadow:var(--shadow-sm)}
  body.theme-instrument .b-card:hover{box-shadow:var(--shadow-sm)}
  body.theme-instrument a.b-card.kpi:hover{box-shadow:var(--shadow-md);border-color:var(--primary-line);transform:translateY(-2px)}
  body.theme-instrument .wf-stage{box-shadow:var(--shadow-sm)}
  body.theme-instrument .wf-stage:hover{box-shadow:var(--shadow-md)}
  body.theme-instrument .rb-card:hover{box-shadow:var(--shadow-sm);border-color:var(--tk-border-strong)}
  body.theme-instrument .gridwrap{box-shadow:var(--shadow-sm)}
  body.theme-instrument .b-card.tint-green{box-shadow:inset 3px 0 0 var(--state-released),var(--shadow-sm)}
  body.theme-instrument .b-card.tint-teal{box-shadow:inset 3px 0 0 var(--state-process),var(--shadow-sm)}
  body.theme-instrument .b-card.tint-amber{box-shadow:inset 3px 0 0 var(--state-hold),var(--shadow-sm)}
  body.theme-instrument .b-card.tint-green:hover{box-shadow:inset 3px 0 0 var(--state-released),var(--shadow-sm)}
  body.theme-instrument .b-card.tint-teal:hover{box-shadow:inset 3px 0 0 var(--state-process),var(--shadow-sm)}
  body.theme-instrument .b-card.tint-amber:hover{box-shadow:inset 3px 0 0 var(--state-hold),var(--shadow-sm)}

  /* ---- CONTRAST 1: the top bar goes deep ink with light type ---- */
  body.theme-instrument .topnav{
    background:var(--dark);border-bottom:1px solid var(--dark-2);
    background-image:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%);
    box-shadow:0 2px 14px rgba(18,36,27,.22)}
  body.theme-instrument .tn-word{color:var(--dark-text)}
  body.theme-instrument .tn-home:hover{background:rgba(255,255,255,.07)}
  body.theme-instrument .tn-nav>button,body.theme-instrument .tn-nav>a,
  body.theme-instrument .navgroup>button,body.theme-instrument .navgroup>a{color:var(--dark-muted)}
  body.theme-instrument .tn-nav>button:hover,body.theme-instrument .tn-nav>a:hover,
  body.theme-instrument .navgroup>button:hover,body.theme-instrument .navgroup>a:hover{
    color:var(--dark-text);background:rgba(255,255,255,.07)}
  body.theme-instrument .tn-nav>button.active,body.theme-instrument .tn-nav>a.active,
  body.theme-instrument .navgroup>button.active,body.theme-instrument .navgroup>a.active{
    color:#fff;background:rgba(255,255,255,.12);border-radius:9px}
  body.theme-instrument .tn-user{color:var(--dark-muted)}
  body.theme-instrument .topnav select{
    background:var(--dark-2);color:var(--dark-text);border:1px solid rgba(255,255,255,.14)}
  body.theme-instrument .topnav .btn{
    background:transparent;color:var(--dark-muted);border:1px solid rgba(255,255,255,.18)}
  body.theme-instrument .topnav .btn:hover{color:var(--dark-text);border-color:rgba(255,255,255,.34);box-shadow:none}
  body.theme-instrument .buildchip{
    background:rgba(255,255,255,.10);color:var(--dark-text);border:1px solid rgba(255,255,255,.16)}
  body.theme-instrument .buildchip:hover{background:var(--primary);border-color:var(--primary);color:#fff}
  body.theme-instrument .navbadge{background:var(--accent);color:#fff}
  /* dropdown panels float over the page, so they stay light like the body */
  body.theme-instrument .submenu-inner{box-shadow:var(--shadow-lg);border-radius:12px}
  body.theme-instrument .submenu-inner a,body.theme-instrument .submenu-inner button{border-radius:8px}

  /* A "deep ink table header" layer used to sit here (background:var(--hdr)
     with var(--th-ink) type). Every one of its declarations was overridden by
     the spreadsheet-style header further down the file, so none of it ever
     reached the screen — the header you actually see is --gr-50 with --gr-500
     type. Removed; the surviving definition is the single one below. */

  /* THE FILTER ROW BELONGS TO THE TABLE, NOT THE HEADER.
     It sits on the table's own background so the header reads as one band and
     the filter boxes read as what they are — inputs, not headings. */
  body.theme-instrument tr.gfilter-row th,
  body.theme-instrument tr.tably-filter th{
    background:var(--card)!important;color:var(--ink)!important;
    border-bottom:1px solid var(--line)!important;letter-spacing:normal}
  body.theme-instrument tr.gfilter-row th .funnel{color:var(--soft)}
  body.theme-instrument tr.gfilter-row th .funnel:hover{background:var(--primary-soft);color:var(--primary)}
  body.theme-instrument tr.gfilter-row th .funnel.active{background:var(--primary);color:#fff}
  body.theme-instrument table.grid thead th:nth-child(-n+2){background:var(--hdr)}
  body.theme-instrument table.grid thead th.gsel{background:var(--hdr)!important}
  body.theme-instrument tr.gfilter-row th.gsel{background:var(--card)!important}
  body.theme-instrument .funnel{color:var(--soft);border-color:var(--line)}
  body.theme-instrument .funnel:hover{color:#fff}
  body.theme-instrument .funnel.active{background:var(--primary);border-color:var(--primary);color:#fff}

  /* page titles stay dark-on-light, with a green underline for warmth */
  body.theme-instrument .pagehead h1{letter-spacing:-.02em;font-weight:800}
  body.theme-instrument .pagehead h1:after{display:none}

  /* pinned header cells inherit the dark header colour via this variable */
  /* --th-bg was re-pointed at the dark --hdr here, but a later block already
     set it back to --gr-50, which is the header you actually see. Declared
     once in the palette now. */
  /* the filter row under the dark header stays light — it holds inputs */
  body.theme-instrument tr.gfilter-row th{background:var(--surface);color:var(--tk-text);border-bottom:1px solid var(--tk-border-strong)}

/* =========================================================================
   NAV — FINAL, unambiguous colours on the dark bar.
   This block is last on purpose: it settles every earlier nav rule. Items are
   clearly readable at rest, brighter on hover, and the ACTIVE page is a solid
   green pill with white text — impossible to miss against the dark ink.
   ========================================================================= */
  body.theme-instrument .tn-nav>button,body.theme-instrument .tn-nav>a,
  body.theme-instrument .navgroup>button,body.theme-instrument .navgroup>a{
    color:#EAF4EE;font-weight:600}
  body.theme-instrument .tn-nav>button:hover,body.theme-instrument .tn-nav>a:hover,
  body.theme-instrument .navgroup>button:hover,body.theme-instrument .navgroup>a:hover{
    color:#FFFFFF;background:rgba(255,255,255,.10)}
  body.theme-instrument .tn-nav>button.active,body.theme-instrument .tn-nav>a.active,
  body.theme-instrument .navgroup>button.active,body.theme-instrument .navgroup>a.active{
    color:#FFFFFF;background:var(--primary);border-radius:9px;
    box-shadow:0 1px 3px rgba(0,0,0,.25)}
  body.theme-instrument .tn-nav>button.active:hover,body.theme-instrument .tn-nav>a.active:hover,
  body.theme-instrument .navgroup>button.active:hover,body.theme-instrument .navgroup>a.active:hover{
    background:var(--primary-bright);color:#FFFFFF}

/* =========================================================================
   TABLY — every plain table gets a filter row + draggable columns.
   (The big item-list grids already have their own richer version.)
   ========================================================================= */
  /* The filter box is a rounded island inside the cell — matching the main
     grid's filter, so every table's filter looks identical site-wide. */
  tr.tably-filter th{background:var(--surface);padding:6px 9px;border-bottom:1px solid var(--tk-border-strong);position:sticky;z-index:1}
  tr.tably-filter input{width:calc(100% - 2px);margin:0 1px;height:auto;
    border:1px solid var(--tk-border-strong,#B2D2BE);border-radius:8px;
    padding:6px 10px;line-height:normal;font-size:12.5px;
    background:linear-gradient(180deg,#fff,#f5faf8);color:var(--ink);min-width:0;box-sizing:border-box;
    box-shadow:inset 0 1px 2px rgba(2,45,58,.05)}
  tr.tably-filter input:focus{outline:none;border-color:var(--lg-teal,#028ca8);
    box-shadow:0 0 0 3px rgba(2,140,168,.14);background:#fff}
  tr.tably-filter input:not(:placeholder-shown){border-color:var(--primary);background:var(--primary-soft);font-weight:600}
  table.tably thead th[draggable="true"]{cursor:grab}
  table.tably th.tably-drag{opacity:.45}
  table.tably th.tably-before{box-shadow:inset 3px 0 0 var(--accent)}
  table.tably th.tably-after{box-shadow:inset -3px 0 0 var(--accent)}


/* =========================================================================
   NAV ANCHORS — FINAL. The de-underline rules were lost in the build-12
   stylesheet rewrite; this block restores them permanently and settles hover.
   Nav items are real links (for Ctrl+click new-tab), but they must look like
   menu items: never underlined, never the browser's link blue, and always
   clearly visible at rest, on hover, focus, active and after being visited.
   ========================================================================= */
  .tn-nav a,.tn-nav a:hover,.tn-nav a:focus,.tn-nav a:visited,.tn-nav a:active,
  .navgroup>a,.navgroup>a:hover,.navgroup>a:focus,.navgroup>a:visited,.navgroup>a:active,
  .submenu-inner a,.submenu-inner a:hover,.submenu-inner a:focus,.submenu-inner a:visited,
  .vswitch a,.vswitch a:hover,.vswitch a:visited,
  .tn-home,.tn-home:hover,.lp-nav a,.lp-nav a:hover,
  a.b-card.kpi,a.b-card.kpi:hover,.dash-links a{
    text-decoration:none!important}
  .tn-nav a,.navgroup>a{display:inline-block;box-sizing:border-box}
  .submenu-inner a{display:block;width:100%;text-align:left;box-sizing:border-box}
  .tn-nav a:visited,.navgroup>a:visited,.submenu-inner a:visited,.vswitch a:visited{color:inherit}

  /* hover on the dark bar: pure white on a soft glow — always readable */
  body.theme-instrument .tn-nav>button:hover,body.theme-instrument .tn-nav>a:hover,
  body.theme-instrument .navgroup>button:hover,body.theme-instrument .navgroup>a:hover{
    color:#FFFFFF!important;background:rgba(255,255,255,.12)}
  /* dropdown items stay dark-on-light with a green hover, never washed out */
  .submenu-inner a,.submenu-inner button{color:var(--ink)}
  .submenu-inner a:hover,.submenu-inner button:hover{color:var(--primary);background:var(--primary-soft)}
  /* landing nav: firm ink at rest, green on hover — visible in both states */
  .lp-nav a{color:#33473C;font-weight:600}
  .lp-nav a:hover{color:var(--primary);background:var(--primary-soft)}

/* =========================================================================
   DROPDOWN PANELS — FINAL. Maximum-specificity rules so no dark-bar styling
   can ever wash these out again: the panel is light, the items are firm ink,
   hover is green on soft green, and the current page is the green pill.
   Alignment: the panel hangs from the LEFT EDGE of its menu button with the
   same rounding and padding everywhere, and every item shares one geometry.
   ========================================================================= */
  body.theme-instrument .tn-nav .submenu{left:0;padding-top:6px}
  body.theme-instrument .tn-nav .submenu-inner{
    background:var(--surface);border:1px solid var(--tk-border-strong);
    border-radius:12px;min-width:200px;padding:6px;box-shadow:var(--shadow-lg)}
  body.theme-instrument .tn-nav .submenu-inner a,
  body.theme-instrument .tn-nav .submenu-inner button{
    display:block;width:100%;text-align:left;box-sizing:border-box;
    color:var(--ink)!important;background:none;border:0;border-radius:8px;
    padding:9px 12px;margin:0;font-size:13px;font-weight:600;line-height:1.3}
  body.theme-instrument .tn-nav .submenu-inner a:hover,
  body.theme-instrument .tn-nav .submenu-inner button:hover{
    color:var(--primary)!important;background:var(--primary-soft)}
  body.theme-instrument .tn-nav .submenu-inner a.active,
  body.theme-instrument .tn-nav .submenu-inner button.active{
    color:#fff!important;background:var(--primary)}
  body.theme-instrument .tn-nav .submenu-inner a.active:hover,
  body.theme-instrument .tn-nav .submenu-inner button.active:hover{
    color:#fff!important;background:var(--primary-bright)}

  /* one geometry for every top-level item so the row lines up perfectly:
     same height, same padding, same baseline for buttons and links alike */
  .tn-nav>button,.tn-nav>a,.navgroup>button,.navgroup>a{
    display:inline-flex;align-items:center;height:36px;padding:0 13px;
    border-radius:9px;font-size:13.5px;line-height:1;box-sizing:border-box;margin:0}
  .tn-nav{display:flex;align-items:center;gap:2px}

/* ===========================================================================
   REFINEMENT LAYER — what makes software look expensive.

   The previous look put a full-strength brand colour across the top bar and
   every table header. That is the single strongest signal of dated software:
   large fields of saturated colour. The tools that feel current — and that
   people trust with money — do the opposite. They keep the frame quiet and
   spend colour only where it carries meaning.

   So:
     • the chrome is a near-black graphite, faintly warm, and the logo sits on
       it clearly instead of disappearing into a matching orange
     • table headers are a pale neutral with dark small-caps type, which reads
       as a spreadsheet rather than a banner
     • the orange is kept — as the accent that marks what is active, what needs
       attention, and what a figure means. Used at 5% of the screen it reads as
       a brand; at 40% it reads as a warning label
     • hairline rules instead of heavy borders, and shadows almost absent
     • numbers are tabular everywhere, so columns of money line up by digit
   =========================================================================== */
body.theme-instrument{
  /* neutral frame */
  /* brand, used sparingly */
  letter-spacing:-.006em;
}

/* ---- the top bar: quiet, so the logo and the work stand out ---- */
body.theme-instrument .topnav{
  background:var(--gr-900);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(21,24,29,.04)}
body.theme-instrument .tn-word{color:#fff;font-weight:650;letter-spacing:-.02em}
body.theme-instrument .navgroup>button,
body.theme-instrument .navgroup>a,
body.theme-instrument .tn-nav>a{color:#AAB3C0;font-weight:500}
body.theme-instrument .navgroup>button:hover,
body.theme-instrument .navgroup>a:hover,
body.theme-instrument .tn-nav>a:hover{color:#fff;background:rgba(255,255,255,.06)}
/* The active page marker used to be written here against `.on`, but renderNav()
   sets `.active` on nav items — `.on` is never applied to one — so this block
   had never rendered. Removed rather than re-pointed at `.active`: the green
   `.active` rule above is the one that has always been on screen, and green is
   now the single accent for "this is the current/selected thing" everywhere.
   Orange is reserved for attention (badges, overdue, warnings). */
body.theme-instrument .tn-user{color:#8A94A2;font-size:12.5px}
body.theme-instrument .buildchip{
  background:rgba(255,255,255,.08);color:#C9D0D8;border:1px solid rgba(255,255,255,.12);
  border-radius:6px;font-size:11px;letter-spacing:.02em}
body.theme-instrument .site-sel,
body.theme-instrument .topnav select{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#E4E8ED;
  border-radius:7px;height:28px;line-height:normal;font-size:12px;padding:0 8px;box-shadow:none}
body.theme-instrument .topnav select:hover{background:rgba(255,255,255,.12)}
body.theme-instrument .topnav select:focus{border-color:rgba(251,87,3,.6);box-shadow:0 0 0 3px rgba(251,87,3,.18)}
body.theme-instrument .topnav select option{background:var(--card);color:var(--ink)}
body.theme-instrument .topnav .btn{
  background:rgba(255,255,255,.06);color:#C9D0D8;border:1px solid rgba(255,255,255,.14);box-shadow:none}
body.theme-instrument .topnav .btn:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.24)}
body.theme-instrument .buildchip:hover{background:rgba(251,87,3,.20);border-color:rgba(251,87,3,.45);color:#fff}

/* ---- tables read as a spreadsheet, not a poster ---- */
body.theme-instrument th,
body.theme-instrument .doct th,
body.theme-instrument table.grid thead th,
body.theme-instrument .mini thead th{
  background:var(--gr-50);
  color:var(--gr-500);
  border-bottom:1.5px solid var(--gr-200);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.075em;
  text-transform:uppercase}
body.theme-instrument th .gh,
body.theme-instrument th button{color:var(--gr-500);font-weight:600}
body.theme-instrument th .muted{color:var(--gr-400)}
body.theme-instrument th .sort{color:var(--brand)}
body.theme-instrument table.grid thead th:nth-child(-n+2),
body.theme-instrument table.grid thead th.gsel{background:var(--gr-50)!important}
body.theme-instrument tr.gfilter-row th,
body.theme-instrument tr.tably-filter th{
  background:var(--card)!important;border-bottom:1px solid var(--line)!important}

body.theme-instrument table.grid td,
body.theme-instrument table.doct td,
body.theme-instrument table.mini td{border-bottom:1px solid #F0F2F5}
body.theme-instrument table.grid th,body.theme-instrument table.grid td{border-right:1px solid #F0F2F5}
body.theme-instrument table.grid tbody tr:hover,
body.theme-instrument table.doct tbody tr:hover,
body.theme-instrument table.mini tbody tr:hover{background:var(--gr-50)}
/* every figure lines up digit under digit */
body.theme-instrument table td,body.theme-instrument .b-num,body.theme-instrument .mono{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"cv05" 1}

/* ---- cards: a hairline and almost no shadow ---- */
body.theme-instrument .b-card{
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm)}
body.theme-instrument .b-card:hover{box-shadow:var(--shadow-md)}
body.theme-instrument .b-card.tint-green,
body.theme-instrument .b-card.tint-teal,
body.theme-instrument .b-card.tint-amber,
body.theme-instrument .b-card.tint-red{background:var(--card)}
/* a tinted card is marked by a bar down its edge, not by a wash of colour */
body.theme-instrument .b-card.tint-green{box-shadow:inset 3px 0 0 var(--green,#609D39),var(--shadow-sm)}
body.theme-instrument .b-card.tint-teal {box-shadow:inset 3px 0 0 #028CA8,var(--shadow-sm)}
body.theme-instrument .b-card.tint-amber{box-shadow:inset 3px 0 0 var(--brand),var(--shadow-sm)}
body.theme-instrument .b-card.tint-red  {box-shadow:inset 3px 0 0 #C1362F,var(--shadow-sm)}

/* ---- type: tighter headings, quieter labels ---- */
body.theme-instrument h1,body.theme-instrument h2,body.theme-instrument h3{
  letter-spacing:-.021em;font-weight:680}
body.theme-instrument .pagehead h1{font-size:23px}
body.theme-instrument .b-eyebrow{
  color:var(--gr-500);font-size:10.5px;letter-spacing:.075em;font-weight:650}
body.theme-instrument .b-num{font-weight:660;letter-spacing:-.02em}
body.theme-instrument .hint,body.theme-instrument .muted{color:var(--gr-500)}

/* ---- controls: calm by default, brand only on the primary action ---- */
body.theme-instrument .btn{
  border:1px solid var(--gr-200);background:var(--card);color:var(--gr-800);
  border-radius:8px;font-weight:550;box-shadow:var(--shadow-sm)}
body.theme-instrument .btn:hover{background:var(--gr-50);border-color:var(--gr-300);color:var(--ink)}
body.theme-instrument .btn.primary{
  background:var(--gr-900);border-color:var(--gr-900);color:#fff}
body.theme-instrument .btn.primary:hover{background:var(--gr-800);border-color:var(--gr-800)}
body.theme-instrument .btn.danger{color:#C1362F;border-color:#F0CFCC}
body.theme-instrument .btn.danger:hover{background:#FDF2F1;border-color:#E5A9A3}
body.theme-instrument input,body.theme-instrument select,body.theme-instrument textarea{
  border:1px solid var(--gr-200);border-radius:8px;background:var(--card)}
body.theme-instrument input:focus,body.theme-instrument select:focus,body.theme-instrument textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px rgba(251,87,3,.13);outline:none}

/* ---- tabs and tags ---- */
body.theme-instrument .vswitch{background:var(--gr-100);border-radius:9px;padding:3px;gap:2px}
body.theme-instrument .vswitch a{
  border-radius:7px;font-size:13px;font-weight:550;color:var(--gr-500);padding:6px 13px}
body.theme-instrument .vswitch a.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
body.theme-instrument .tag{
  border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.01em;padding:2px 7px;border:1px solid transparent}
body.theme-instrument .tag.t-green{background:#EAF5E4;color:#3D6B22;border-color:#CFE7C2}
body.theme-instrument .tag.t-amber{background:var(--brand-soft);color:#A83B02;border-color:var(--brand-line)}
body.theme-instrument .tag.t-red  {background:#FCEFEE;color:#A32B24;border-color:#F0CFCC}
body.theme-instrument .tag.t-gray {background:var(--gr-100);color:var(--gr-500);border-color:var(--gr-200)}
body.theme-instrument .tag.t-teal {background:#E6F4F7;color:#0A6E85;border-color:#BFE1E9}

/* the selected row in a list: a marker, not a flood — and the SAME green that
   marks the active nav tab and the active rail item. Orange is kept for things
   that want attention (badges, overdue balances), never for "you are here". */
body.theme-instrument .hub-item.on{
  background:var(--primary-soft);color:var(--ink);
  box-shadow:inset 3px 0 0 var(--primary)}
body.theme-instrument .hub-item.on .hub-bal{color:var(--primary)}

  /* ---- the action bar on a vendor / customer page ----
     These are the four or five things you actually came to the page to do, so
     they carry a filled colour while everything else stays quiet. The colour
     says what kind of thing it is rather than being decoration: money going
     out is one family, money coming in another, documents a third. */
  .hub-actions{align-items:center}
  .hub-actions-sp{flex:1}
  body.theme-instrument .hub-actions .btn.act{
    color:#fff;border:0;font-weight:600;box-shadow:0 1px 2px rgba(21,24,29,.10);
    padding:0 12px}
  body.theme-instrument .hub-actions .btn.act:hover{filter:brightness(1.07);color:#fff}
  body.theme-instrument .hub-actions .btn.act:active{filter:brightness(.94)}
  /* buying: ordering and receiving goods */
  body.theme-instrument .btn.act-po   {background:#1F6FEB}
  body.theme-instrument .btn.act-recv {background:#0A7EA4}
  /* what you owe */
  body.theme-instrument .btn.act-bill {background:#B45309}
  /* money moving — the brand colour, on the button that moves it */
  /* the brand orange at full strength gives only 3.2:1 against white, which is
     under the mark for 13px text — a shade deeper reads as the same colour and
     is comfortably legible */
  body.theme-instrument .btn.act-pay  {background:#C63E02}
  /* selling */
  body.theme-instrument .btn.act-so   {background:#1F6FEB}
  body.theme-instrument .btn.act-inv  {background:#1F6FEB}
  @media (max-width:700px){
    .hub-actions .btn.act{flex:1 1 46%}
    .hub-actions-sp{display:none}
  }

  /* ---- plain tables: the sorted column is marked, as in the item grids ---- */
  table.tably thead tr:first-child th{position:sticky;top:0;z-index:3;user-select:none}
  table.tably thead tr:first-child th.tably-asc::after,
  table.tably thead tr:first-child th.tably-desc::after{
    content:'';position:absolute;right:6px;top:50%;margin-top:-2px;
    border-left:4px solid transparent;border-right:4px solid transparent}
  table.tably thead tr:first-child th.tably-asc::after{
    border-bottom:5px solid var(--brand,#FB5703)}
  table.tably thead tr:first-child th.tably-desc::after{
    border-top:5px solid var(--brand,#FB5703)}
  table.tably thead tr:first-child th:hover{background:var(--gr-100,#EFF2F5)}

  /* ---- sub-recipe steps shown inside the parent recipe ---- */
  .substeps{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px;
    background:var(--gr-50,#F7F9FB)}
  .substeps-h{font-size:12px;font-weight:700;color:var(--soft);margin-bottom:7px}
  .substep{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:12.5px;
    border-top:1px solid var(--line)}
  .substep:first-of-type{border-top:0}
  .substep .seq{display:grid;place-content:center;width:19px;height:19px;border-radius:6px;
    background:var(--card);border:1px solid var(--line);font-size:10.5px;font-weight:700;color:var(--soft)}
  .substep .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---- the placeholder zero ----
     It has to read like a value at a glance but clearly not be one, so it is
     the same size and alignment as a real figure, just muted. */
  input.num::placeholder,
  table.grid td>input.num::placeholder{color:var(--gr-400,#8A94A2);opacity:1;font-variant-numeric:tabular-nums}
  input.num:focus::placeholder{color:var(--gr-300,#C9D0D8)}

  /* ===========================================================================
     GRID HEADER: the filter row, the resize line and the drag ghost.
     =========================================================================== */

  /* The filter box is a rounded field sitting INSIDE its cell, with the funnel
     as a bare icon beside it — not two boxed compartments sharing a border. */
  table.grid tr.gfilter-row th{padding:4px 6px!important;background:var(--card)!important}
  .gfilter.filterwrap{display:flex;align-items:center;gap:4px;height:auto}
  .gfilter.filterwrap > input,
  .gfilter.filterwrap > select{
    flex:1;min-width:0;height:26px;line-height:24px;
    border:1px solid var(--gr-200,#E4E8ED);border-radius:7px;
    background:var(--card);padding:0 8px;font-size:12px;color:var(--ink);box-sizing:border-box}
  .gfilter.filterwrap > select{line-height:normal}
  .gfilter.filterwrap > input:focus,
  .gfilter.filterwrap > select:focus{
    outline:none;border-color:var(--brand,#FB5703);box-shadow:0 0 0 3px rgba(251,87,3,.13);background:var(--card)}
  .gfilter.filterwrap > input:not(:placeholder-shown){
    border-color:var(--primary);background:var(--primary-soft);font-weight:600}
  /* the funnel is an icon, nothing more */
  .funnel{flex:0 0 20px;width:20px;height:22px;padding:0;border:0!important;background:none!important;
    border-radius:5px;color:var(--gr-400,#8A94A2);cursor:pointer;display:grid;place-content:center;
    box-shadow:none!important}
  .funnel:hover{background:var(--gr-100,#EFF2F5)!important;color:var(--brand,#FB5703)}
  .funnel.active{background:none!important;color:var(--brand,#FB5703)}
  .funnel.active::after{content:'';position:absolute;margin:14px 0 0 11px;width:5px;height:5px;
    border-radius:50%;background:var(--brand,#FB5703)}

  /* The resize line sits ON the border between two columns — half in each —
     rather than floating inside the left column's padding. */
  table.grid thead th{position:relative}
  .ghwrap{position:relative;display:flex;align-items:center;height:34px}
  .resizer{position:absolute;top:0;bottom:0;right:-4px;width:9px;
    cursor:col-resize;flex:0 0 auto;z-index:3;background:none}
  .resizer::before{content:'';position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:transparent}
  .resizer:hover::before,.resizer:active::before{background:var(--brand,#FB5703);top:0;bottom:0;width:2px;left:3.5px}
  body.col-resizing{cursor:col-resize;user-select:none}

  /* The column being dragged, drawn under the pointer: header plus real values,
     so you can see which column is moving. */
  .colghost{position:fixed;left:0;top:0;z-index:6000;pointer-events:none;
    background:var(--card);border:1px solid var(--brand,#FB5703);border-radius:10px;overflow:hidden;
    box-shadow:0 12px 34px rgba(21,24,29,.22);opacity:.96}
  .colghost-h{background:var(--brand,#FB5703);color:#fff;font-size:10.5px;font-weight:700;
    letter-spacing:.07em;text-transform:uppercase;padding:7px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .colghost-c{padding:6px 9px;font-size:12.5px;border-top:1px solid var(--line);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--soft)}
  body.col-dragging{cursor:grabbing;user-select:none}
  body.col-dragging .gh{cursor:grabbing}
  .gh{cursor:grab}
  table.grid th.drag-src{opacity:.35}
  table.grid th.drop-before{box-shadow:inset 3px 0 0 var(--brand,#FB5703)}
  table.grid th.drop-after{box-shadow:inset -3px 0 0 var(--brand,#FB5703)}

/* ===========================================================================
   ONE DESIGN LANGUAGE — the vendor/customer page, applied everywhere.
   What makes that page read well is not decoration; it is a small set of
   decisions repeated exactly:
     • the page identifies itself once, quietly, in a card of its own
     • one type scale — 19px title, 12.5px supporting text, 10.5px labels
     • the actions sit in a row of their own, divided by a hairline
     • content lives in a white card with a hairline and 14px corners
     • numbers are 20px and tabular; nothing else competes with them
   Everything below applies those same decisions to every other page rather
   than leaving each screen to invent its own.
   =========================================================================== */
body.theme-instrument .content{padding:20px 24px 64px}

/* ---- the page header, in the shape the partner page uses ---- */
body.theme-instrument .pagehead{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
body.theme-instrument .pagehead h1{
  font-size:19px;font-weight:800;letter-spacing:-.021em;padding:0;display:block;line-height:1.2}
body.theme-instrument .pagehead h1:after{display:none}   /* the little underline */
body.theme-instrument .pagehead .sub{
  font-size:12.5px;line-height:1.5;color:var(--soft);margin-top:2px}

/* ---- tabs: the same pill row as the partner page ---- */
body.theme-instrument #subtabs{margin:0 0 14px}
body.theme-instrument #subtabs .vswitch{display:inline-flex}

/* ---- the working area of a page is a card, like the partner page body ----
   The item grids already sit inside a .b-card, so they only need the same
   inner rhythm: tools row, then the table, divided by a hairline. Loose
   tables elsewhere get the card treatment they were missing. */
body.theme-instrument .b-card{padding:14px 16px;border-radius:14px}
body.theme-instrument .b-card > .gtools{
  padding:0 0 11px;margin-bottom:0;border-bottom:1px solid var(--line)}
body.theme-instrument .b-card > .gridwrap{margin-top:0;border-radius:0}
body.theme-instrument .gridnote{
  font-size:12px;color:var(--gr-500);padding:10px 2px 0;border-top:1px solid var(--line);margin-top:10px}
body.theme-instrument #view > .gridwrap{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-sm);overflow:auto}

/* ---- toolbars read as an action row, not a floating strip ---- */
body.theme-instrument .toolbar{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:10px 12px;margin-bottom:12px;box-shadow:var(--shadow-sm);gap:8px}
body.theme-instrument .toolbar .btn{height:32px;font-size:12.5px}
body.theme-instrument .toolbar .btn.sm{height:28px}

/* ---- one type scale, everywhere ---- */
body.theme-instrument .b-eyebrow,
body.theme-instrument .sec-h,
body.theme-instrument .kpi-band{
  font-size:10.5px;font-weight:650;letter-spacing:.075em;text-transform:uppercase;color:var(--gr-500)}
body.theme-instrument .b-num{font-size:20px;font-weight:660;letter-spacing:-.02em;line-height:1.15}
body.theme-instrument .b-sub,
body.theme-instrument .hint,
body.theme-instrument .muted{font-size:12.5px;line-height:1.5;color:var(--gr-500)}
body.theme-instrument h2{font-size:16px;font-weight:700;letter-spacing:-.015em}
body.theme-instrument h3{font-size:14px;font-weight:700;letter-spacing:-.01em}

/* ---- filter clusters match the partner page's Show / Status row ---- */
body.theme-instrument .filters,
body.theme-instrument .docfilters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
body.theme-instrument .filters label.f,
body.theme-instrument .docfilters label.f{margin-bottom:0;min-width:180px}

/* ---- empty states read the same wherever they appear ---- */
body.theme-instrument .empty{padding:28px 16px;text-align:center;color:var(--gr-500);font-size:12.5px}
body.theme-instrument .empty b{display:block;font-size:14px;color:var(--ink);margin-bottom:4px;font-weight:700}

/* ---- key/value rows, as used on the partner profile ---- */
body.theme-instrument .sumrow,
body.theme-instrument .fm-tot,
body.theme-instrument .pf-row{font-size:13px}

@media (max-width:700px){
  body.theme-instrument .content{padding:12px 10px 96px}
  body.theme-instrument .pagehead{padding:12px 13px;border-radius:12px}
  body.theme-instrument .pagehead h1{font-size:17px}
  body.theme-instrument .toolbar{padding:9px 10px;border-radius:12px}
}

/* ===========================================================================
   COLOURED ACTIONS, EVERYWHERE — the thing that made the partner page work.
   On that page the buttons you came to press are filled and colour-coded by
   what they do, while everything else stays quiet. That is what reads well,
   and it was the one part the rest of the site never got.

   The colours mean something and are used consistently:
     green   creating something new
     blue    documents — orders and invoices
     teal    receiving and importing
     amber   what you owe
     orange  money moving, and the current selection
     red     destructive
   =========================================================================== */

/* quiet buttons get a little more definition than a bare outline */
body.theme-instrument .btn{border:1px solid var(--gr-200);background:var(--card);color:var(--gr-800)}
body.theme-instrument .btn:hover{background:var(--gr-50);border-color:var(--gr-300)}

/* the filled treatment, shared by every action button on the site */
body.theme-instrument .btn.primary,
body.theme-instrument .btn.act,
body.theme-instrument .gtools [data-act="add"],
body.theme-instrument .gtools [data-act="bulk"],
body.theme-instrument .gtools [data-act="bedit"]{
  border:0;color:#fff;font-weight:600;
  box-shadow:0 1px 2px rgba(21,24,29,.10)}
body.theme-instrument .btn.primary:hover,
body.theme-instrument .btn.act:hover,
body.theme-instrument .gtools [data-act="add"]:hover,
body.theme-instrument .gtools [data-act="bulk"]:hover,
body.theme-instrument .gtools [data-act="bedit"]:hover{filter:brightness(1.08);color:#fff}
body.theme-instrument .btn.primary:active,
body.theme-instrument .btn.act:active{filter:brightness(.94)}

/* the primary action of any screen — save, create, confirm */
body.theme-instrument .btn.primary{background:#1D2127}
/* adding a row is creation too */
body.theme-instrument .gtools [data-act="add"]{background:#1D2127}
/* bringing data in */
body.theme-instrument .gtools [data-act="bulk"]{background:#0A7EA4}
/* changing many rows at once */
body.theme-instrument .gtools [data-act="bedit"]{background:#1F6FEB}
/* the View / Edit switch keeps its pill look, with the live side filled */
body.theme-instrument .gtools .vswitch a.on{background:var(--card);color:var(--ink)}

/* destructive stays outlined until it is armed — a filled red button invites
   the very click it should not */
body.theme-instrument .btn.danger{
  background:var(--card);color:#B3261E;border:1px solid #F0CFCC;font-weight:600}
body.theme-instrument .btn.danger:hover{background:#FDF2F1;border-color:#E5A9A3;color:#8C1D18}
body.theme-instrument .btn.sm.danger{padding:0 9px}

/* ghost buttons — "+ Add ingredient", "+ Add step" — read as invitations */
body.theme-instrument .ghostbtn{
  width:100%;border:1px dashed var(--gr-300);background:var(--gr-50);color:var(--gr-800);
  border-radius:10px;padding:11px;font-weight:600;font-size:13px;cursor:pointer}
body.theme-instrument .ghostbtn:hover{
  border-color:var(--brand);background:var(--brand-soft);color:var(--brand-deep)}

/* KPI cards: a coloured edge and a coloured figure, as on the partner header */
/* a card called tint-green renders its number GREEN — this was a hardcoded
   teal left over from an older palette, so "released" stats read blue on a
   green card. Uses the released-status token like the rest of the card. */
body.theme-instrument .b-card.tint-green .b-num{color:var(--state-released)}
body.theme-instrument .b-card.tint-teal  .b-num{color:#0A6E85}
body.theme-instrument .b-card.tint-amber .b-num{color:var(--brand-deep)}
body.theme-instrument .b-card.tint-red   .b-num{color:#B3261E}

/* the row you have selected, anywhere: an orange edge, not a flood */
body.theme-instrument table.grid tbody tr.sel,
body.theme-instrument table.grid tbody tr:has(input[type=checkbox]:checked){
  background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}

/* section headings get the same coloured rule the partner page uses */
body.theme-instrument .sec-h{display:flex;align-items:center;gap:10px}
body.theme-instrument .sec-h::after{content:'';flex:1;height:1px;background:var(--line)}

/* ===========================================================================
   ONE EDGE FOR EVERY SURFACE.
   A survey of the stylesheet found six different corner radii (10, 11, 12,
   14, 16 and 18px) and two border weights (1px and 1.5px) across panels that
   sit next to each other on screen. Nobody names the difference, but the eye
   reads it as "assembled from parts". There are now two radii with a reason:
   14px for a panel you look at, 10px for something nested inside one.
   =========================================================================== */
body.theme-instrument .b-card,
body.theme-instrument .card,
body.theme-instrument .hub-side,
body.theme-instrument .hub-head,
body.theme-instrument .hub-body,
body.theme-instrument .toolbar,
body.theme-instrument .pagehead,
body.theme-instrument #view > .gridwrap,
body.theme-instrument .sheet{
  border-radius:14px;border:1px solid var(--line)}

body.theme-instrument .floatpanel,
body.theme-instrument .pickerpanel,
body.theme-instrument .substeps,
body.theme-instrument .bc-preview,
body.theme-instrument .ad-diff,
body.theme-instrument .b-card .gridwrap,
body.theme-instrument .modal{border-radius:10px}
body.theme-instrument .floatpanel,
body.theme-instrument .pickerpanel{border:1px solid var(--line)}
body.theme-instrument .bc-preview{border:1px solid var(--line)}

/* the card a grid lives in already draws the edge — the table inside must not
   draw a second one a pixel away from it */
body.theme-instrument .b-card > .gridwrap{border:0;border-radius:0}

/* ---- HOVER MUST NOT UNDO THE FILL ----
   `.btn:hover` counts as three classes and `.btn.primary` only two, so on hover
   the generic pale background outranked every filled colour and the button went
   white. Each filled button now states its own hover, which keeps the colour
   and simply lightens it. */
body.theme-instrument .btn.primary:hover,
body.theme-instrument .gtools [data-act="add"]:hover{background:#2A2F37;border-color:#2A2F37;color:#fff}
body.theme-instrument .gtools [data-act="bulk"]:hover{background:#0C90BB;border-color:#0C90BB;color:#fff}
body.theme-instrument .gtools [data-act="bedit"]:hover{background:#2A7BF5;border-color:#2A7BF5;color:#fff}
body.theme-instrument .btn.act-po:hover,
body.theme-instrument .btn.act-inv:hover{background:#2A7BF5;color:#fff}
body.theme-instrument .btn.act-recv:hover{background:#0C90BB;color:#fff}
body.theme-instrument .btn.act-bill:hover{background:#C75F0B;color:#fff}
body.theme-instrument .btn.act-pay:hover{background:#DC4703;color:#fff}
body.theme-instrument .btn.act-so:hover{background:#2A7BF5;color:#fff}
body.theme-instrument .btn.act:hover{filter:none}   /* the colour above does the work */

/* ===========================================================================
   THE TRANSACTION SHELL — identical for every document type.
   Left quarter: who, when, and what you can do with it.
   Right: the money on top, the item list filling the rest.
   =========================================================================== */
.txn{display:grid;grid-template-columns:320px 1fr;gap:14px;
  min-height:calc(100vh - 190px)}

.txn-side{display:flex;flex-direction:column;min-height:0;background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.txn-side-h{padding:13px 15px;border-bottom:1px solid var(--line)}
.txn-num{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.txn-fields{flex:1;overflow:auto;min-height:0;padding:13px 15px}
.txn-fields label.f{margin-bottom:11px}
.txn-partnerinfo{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-size:12.5px}
.txn-partnerinfo>div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.txn-partnerinfo span{color:var(--soft)}
.txn-partnerinfo b{text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
.txn-actions{border-top:1px solid var(--line);padding:12px 15px;display:flex;flex-direction:column;gap:7px}
.txn-actions .btn{width:100%;justify-content:center}

.txn-main{display:flex;flex-direction:column;min-height:0;min-width:0;gap:14px}
.txn-totals{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 16px}
.txn-totals .tt{min-width:84px}
.txn-totals .tt .b-num{font-size:20px;margin:0}
.txn-totals .tt-in{margin-bottom:0;width:104px}
.txn-totals .tt-total{margin-left:auto;text-align:right}
.txn-totals .tt-total .b-num{font-size:26px;color:var(--brand-deep)}

.txn-items{flex:1;display:flex;flex-direction:column;min-height:0;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.txn-items-h{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.txn-items-h input{flex:1;min-width:220px;height:34px;line-height:32px;padding:0 11px;
  border:1px solid var(--gr-200);border-radius:9px;background:var(--card);color:var(--ink);font-size:13px;box-sizing:border-box}
.txn-items .gridwrap{flex:1;overflow:auto;min-height:0}
/* a line that is actually on the document stands out from the catalogue */
table.doct tbody tr.txn-on{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
table.doct tbody tr.txn-on:hover{background:var(--brand-soft)}

/* print and email are actions too, and get their own colours */
body.theme-instrument .btn.act-print{background:#5B6572;color:#fff;border:0}
body.theme-instrument .btn.act-print:hover{background:#6B7684;color:#fff}
body.theme-instrument .btn.act-mail{background:#0A7EA4;color:#fff;border:0}
body.theme-instrument .btn.act-mail:hover{background:#0C90BB;color:#fff}

@media (max-width:1000px){
  .txn{grid-template-columns:1fr;height:auto}
  .txn-fields{max-height:none}
  .txn-totals .tt-total{margin-left:0}
}

/* ===========================================================================
   THE SIGN-IN PAGE, in the same language as the rest of the app.
   It is the first thing anyone sees, and it was still on the old palette:
   softer type, different card edges, a different green. Same graphite frame,
   same 14px cards, same type scale, same orange used sparingly.
   =========================================================================== */
body .lp{background:var(--paper,#F6F8FA);letter-spacing:-.006em}
body .lp-nav{background:#15181D;border-bottom:1px solid rgba(255,255,255,.07);height:58px}
body .lp-word{color:#fff;font-weight:800;font-size:18px;letter-spacing:-.02em;
  background:none;-webkit-text-fill-color:#fff}
body .lp-navlinks a{color:#AAB3C0;font-size:13px;font-weight:500;padding:7px 11px;border-radius:8px}
body .lp-navlinks a:hover{color:#fff;background:rgba(255,255,255,.06)}
body .lp-navlinks a[href="#signin"]{
  background:rgba(251,87,3,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(251,87,3,.42)}

/* the hero: quieter, tighter, no soft glows competing with the form */
body .lp .blob{display:none}
body .hero{gap:48px;padding:56px 32px 64px}
body .hero-copy h1{font-size:44px;line-height:1.06;letter-spacing:-.03em;font-weight:800}
body .hero-copy h1 .grad{background:none;-webkit-text-fill-color:#FB5703;color:#FB5703}
body .hero-copy p,body .hero-sub{font-size:14px;line-height:1.6;color:#5B6572}
body .hero-badge{background:#FFF1EA;border:1px solid #FFD3BC;color:#A83B02;
  border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:600}
body .hb-dot{background:#FB5703}

/* the login card matches every other card in the product */
body .lp .authcard,body .lp .signin-card,body .lp form{
  background:#fff;border:1px solid #E4E8ED;border-radius:14px;
  box-shadow:0 1px 3px rgba(21,24,29,.06),0 8px 24px rgba(21,24,29,.06)}
body .lp label.f>span{font-size:11.5px;font-weight:600;color:#5B6572;letter-spacing:0}
body .lp input{height:38px;line-height:36px;border:1px solid #E4E8ED;border-radius:9px;
  padding:0 11px;font-size:14px;background:#fff;color:#15181D;box-sizing:border-box}
body .lp input:focus{outline:none;border-color:#FB5703;box-shadow:0 0 0 3px rgba(251,87,3,.13)}
body .lp .btn.primary{background:#1D2127;border:0;color:#fff;height:40px;border-radius:9px;
  font-weight:600;width:100%;box-shadow:0 1px 2px rgba(21,24,29,.10)}
body .lp .btn.primary:hover{background:#2A2F37;color:#fff}
body .lp .feat,body .lp .lp-card,body .lp .card{
  background:#fff;border:1px solid #E4E8ED;border-radius:14px;box-shadow:0 1px 2px rgba(21,24,29,.04)}
body .lp h2{font-size:24px;letter-spacing:-.022em;font-weight:800}
body .lp h3{font-size:15px;letter-spacing:-.01em;font-weight:700}
body .lp .muted,body .lp .sub{color:#5B6572;font-size:12.5px;line-height:1.5}
@media (max-width:900px){ body .hero-copy h1{font-size:32px} body .hero{padding:36px 18px 48px} }

  /* ---- receiving: proof capture ---- */
  .proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .proof-block{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
  .proof-photo{margin-top:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
  .proof-img{max-width:100%;max-height:190px;border:1px solid var(--line);border-radius:10px}
  .proof-row{display:flex;align-items:center;gap:10px;margin-top:8px}
  .sigpad{width:100%;height:150px;margin-top:10px;border:1px dashed var(--gr-300);border-radius:10px;
    background:var(--gr-50);cursor:crosshair;touch-action:none}
  /* a rejected line must be impossible to miss */
  table.doct tbody tr.rc-rej{background:#FDF2F1;box-shadow:inset 3px 0 0 #B3261E}
  table.doct tbody tr.rc-rej:hover{background:#FDF2F1}
  @media (max-width:1000px){ .proof-grid{grid-template-columns:1fr} }

/* ===========================================================================
   THE RESIZE LINE AND THE DRAG — precision fixes.

   The handle was positioned inside .ghwrap, which sits INSIDE the header cell's
   padding — so the line you grabbed and double-clicked was several pixels left
   of the actual column border, and the double-click landed on the wrong edge.
   It is now positioned against the header cell itself, straddling the border,
   with a target wide enough to hit without aiming.
   =========================================================================== */
table.grid thead th{position:relative}
.ghwrap{position:static}
table.grid thead th > .ghwrap > .resizer,
table.grid thead th .resizer{
  position:absolute;top:0;bottom:0;right:-6px;width:12px;
  cursor:col-resize;z-index:6;background:none;flex:0 0 auto}
/* the visible rule sits dead centre of the handle, i.e. on the border */
.resizer::before{content:'';position:absolute;left:5px;top:0;bottom:0;width:2px;
  background:transparent;border-radius:1px;transition:background .1s}
.resizer:hover::before,.resizer:active::before{background:var(--brand,#FB5703)}
/* while the pointer is over the handle, the grab hand must not win */
.resizer:hover{cursor:col-resize}
table.grid thead th .gh{cursor:grab;position:relative;z-index:1}
body.col-resizing *{cursor:col-resize!important}

/* the dragged column: the real thing, not a chip */
.colghost{position:fixed;left:0;top:0;z-index:6000;pointer-events:none;
  background:var(--card);border:2px solid var(--brand,#FB5703);border-radius:10px;
  overflow:hidden;box-shadow:0 18px 44px rgba(21,24,29,.26);opacity:.97;
  will-change:transform}
.colghost-h{background:var(--brand,#FB5703);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:9px 10px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.colghost-c{padding:0 10px;height:34px;line-height:34px;font-size:12.5px;
  border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}

/* where it will land: one clear line down the whole table */
.coldropline{position:fixed;width:3px;background:var(--brand,#FB5703);z-index:5999;
  pointer-events:none;display:none;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.7)}
table.grid th.drag-src{opacity:.3}
body.col-dragging{cursor:grabbing;user-select:none}
body.col-dragging *{cursor:grabbing!important}

  /* ---- dashboard welcome ---- */
  .dash-hello{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
  .dash-greet{font-size:28px;font-weight:800;letter-spacing:-.028em;line-height:1.15}
  .dash-greet b{color:var(--brand,#FB5703)}
  .dash-sub{font-size:12.5px;color:var(--soft);margin-top:4px}
  .dash-sub:before{content:''}
  /* the card chooser */
  .kpi-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:8px}
  .kpi-pick-i{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);
    border-radius:10px;font-size:13px;cursor:pointer;background:var(--card)}
  .kpi-pick-i:hover{border-color:var(--brand,#FB5703);background:var(--brand-soft,#FFF1EA)}
  @media (max-width:700px){ .dash-greet{font-size:22px} }

/* ===========================================================================
   CREATE — one menu in the bar, and a button that follows you.
   =========================================================================== */
body.theme-instrument .createnav{margin-right:6px}
body.theme-instrument .createbtn{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:9px;
  background:#1D2127;color:#fff;border:0;font-weight:650;font-size:13.5px;cursor:pointer;
  box-shadow:0 1px 2px rgba(21,24,29,.14)}
body.theme-instrument .createbtn:hover{background:#2A2F37}
body.theme-instrument .createbtn .cplus{font-size:17px;line-height:1;font-weight:400}
body.theme-instrument .createbtn .caret{font-size:9px;opacity:.8}
body.theme-instrument .createnav.open .createbtn{background:#0F1216}
.createnav .submenu{display:none}
.createnav.open .submenu{display:block}
body.theme-instrument .createmenu{
  min-width:290px;padding:8px;border-radius:12px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-lg)}
body.theme-instrument .createmenu .cm-group{
  font-size:10.5px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;
  color:var(--gr-500);padding:9px 10px 5px}
body.theme-instrument .createmenu button{
  display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:9px;
  background:none;cursor:pointer;color:var(--ink)!important}
body.theme-instrument .createmenu button:hover{background:var(--brand-soft,#FFF1EA)}
body.theme-instrument .createmenu button b{display:block;font-size:13.5px;font-weight:600}
body.theme-instrument .createmenu button span{display:block;font-size:12px;color:var(--gr-500);margin-top:1px}

/* the round button, on every page */
.fabwrap{position:fixed;right:26px;bottom:26px;z-index:70}
.fab{width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:#15181D;box-shadow:0 10px 30px rgba(21,24,29,.30);
  display:flex;align-items:center;justify-content:center;transition:transform .16s, box-shadow .16s}
.fab img{width:38px;height:38px;object-fit:contain;display:block}
.fab .plus{font-size:30px;color:#fff;line-height:1}
.fabwrap:hover .fab,.fabwrap.open .fab{transform:scale(1.06);box-shadow:0 14px 38px rgba(251,87,3,.34)}
.fabwrap.open .fab{outline:3px solid rgba(251,87,3,.35);outline-offset:2px}

/* the bubbles: hidden until you approach, then they rise into place */
.fabmenu{position:absolute;right:0;bottom:76px;width:296px;max-height:70vh;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;
  box-shadow:0 18px 46px rgba(21,24,29,.22);
  opacity:0;transform:translateY(10px) scale(.97);pointer-events:none;
  transition:opacity .16s ease, transform .16s ease}
.fabwrap.open .fabmenu{opacity:1;transform:none;pointer-events:auto}
.fab-group{font-size:10.5px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;
  color:var(--gr-500);padding:8px 6px 6px}
.fab-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.fab-card{text-align:left;border:1px solid var(--line);border-radius:11px;background:var(--card);
  padding:9px 10px;cursor:pointer;transition:transform .12s, border-color .12s, background .12s}
.fab-card:hover{transform:translateY(-2px);border-color:var(--brand,#FB5703);background:var(--brand-soft,#FFF1EA)}
.fab-card b{display:block;font-size:12.5px;font-weight:650;color:var(--ink)}
.fab-card span{display:block;font-size:11px;color:var(--gr-500);margin-top:2px;line-height:1.35}
@media (max-width:700px){
  .fabwrap{right:14px;bottom:14px}
  .fab{width:56px;height:56px}.fab img{width:34px;height:34px}
  .fabmenu{width:min(88vw,296px);bottom:70px}
}

/* ===========================================================================
   TRANSACTION SCREENS — three surfaces, not one flat field of white.
   The item table stays as it is, because that is what you read. The sidebar and
   the totals bar are tinted a shade cooler so the eye separates "the document"
   from "the things on it" without any borders shouting about it.
   =========================================================================== */
body.theme-instrument .txn-side,
body.theme-instrument .txn-totals{
  background:linear-gradient(180deg,#FBFCFD 0%,#F4F7F9 100%)}
body.theme-instrument .txn-side-h{
  background:#EEF3F6;border-bottom:1px solid #DFE7EC}
body.theme-instrument .txn-side .txn-actions{
  background:#EEF3F6;border-top:1px solid #DFE7EC}
body.theme-instrument .txn-totals{border-color:#DFE7EC}
body.theme-instrument .txn-totals .tt-total{
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 14px}
/* fields on the tinted sidebar need a white box to sit in, or they disappear */
body.theme-instrument .txn-side input,
body.theme-instrument .txn-side select{background:#fff}
/* the item table stays plainly white — it is the thing being worked on */
body.theme-instrument .txn-items{background:var(--card)}

/* ===========================================================================
   NO GREEN ON THE BUTTONS.
   The green was doing too much work and reading as agricultural rather than
   professional. The palette is now graphite for anything primary — the same
   near-black as the top bar, which is what serious tools use for "the main
   action" — with the brand orange kept for money and the blues for documents.
   Green survives only where it means "good": a paid tag, a passed check.
   =========================================================================== */
body.theme-instrument .btn.primary,
body.theme-instrument .gtools [data-act="add"],
body.theme-instrument .createbtn,
body .lp .btn.primary{
  background:#1D2127;border:0;color:#fff}
body.theme-instrument .btn.primary:hover,
body.theme-instrument .gtools [data-act="add"]:hover,
body.theme-instrument .createbtn:hover,
body .lp .btn.primary:hover{background:#2A2F37;color:#fff}
body.theme-instrument .createnav.open .createbtn{background:#0F1216}

/* documents and money keep their meanings, without a green among them */
body.theme-instrument .btn.act-so   {background:#1F6FEB}   /* selling documents */
body.theme-instrument .btn.act-so:hover{background:#2A7BF5}
body.theme-instrument .btn.act-inv  {background:#1F6FEB}
body.theme-instrument .btn.act-po   {background:#0A7EA4}   /* buying documents */
body.theme-instrument .btn.act-po:hover{background:#0C90BB}
body.theme-instrument .btn.act-recv {background:#0A7EA4}
body.theme-instrument .btn.act-bill {background:#B45309}   /* what you owe */
body.theme-instrument .btn.act-pay  {background:#C63E02}   /* money moving */

/* the KPI accent colour on a "good" card: teal, not green */
/* a card called tint-green renders its number GREEN — this was a hardcoded
   teal left over from an older palette, so "released" stats read blue on a
   green card. Uses the released-status token like the rest of the card. */
body.theme-instrument .b-card.tint-green .b-num{color:var(--state-released)}
body.theme-instrument .b-card.tint-green{box-shadow:inset 3px 0 0 #0A7EA4,var(--shadow-sm)}

/* the sign-in page follows the same rule */
body .lp .hero-badge{background:var(--brand-soft,#FFF1EA);border-color:#FFD3BC;color:#A83B02}

/* ---- the create menu: names only ---- */
body.theme-instrument .createmenu{min-width:212px}
body.theme-instrument .createmenu button{font-size:13.5px;font-weight:500;padding:8px 11px}
body.theme-instrument .fab-card{padding:12px;font-size:13px;font-weight:550;color:var(--ink);text-align:center}
body.theme-instrument .fabmenu{width:268px}

/* ===========================================================================
   THE RESIZE HANDLE HAS TO BE REACHABLE.
   Every header cell carried overflow:hidden, which clipped the handle where it
   straddles the column border — so the half you aim at was not there to click,
   and the cursor never changed. The clipping moves to the label inside, which
   is what actually needed trimming, and the header cell lets the handle out.
   =========================================================================== */
body.theme-instrument table.grid thead th{overflow:visible}
body.theme-instrument table.grid thead th .gh{overflow:hidden}
body.theme-instrument table.grid thead th .lbl{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;min-width:0}
/* the handle itself: wide enough to hit, always above the header's own content */
body.theme-instrument table.grid thead th .resizer{
  position:absolute;top:0;bottom:0;right:-6px;width:13px;z-index:20;
  cursor:col-resize;background:none;pointer-events:auto}
body.theme-instrument table.grid thead th .gh{pointer-events:auto;z-index:1}
/* pinned columns still need to clip their own body cells */
body.theme-instrument table.grid tbody td{overflow:hidden}

  /* ---- pin a column from its own header ---- */
  .pinbtn{position:absolute;right:12px;top:50%;transform:translateY(-50%);
    width:20px;height:20px;padding:0;border:0;border-radius:5px;background:none;
    color:var(--gr-400,#8A94A2);cursor:pointer;display:none;place-content:center;z-index:15}
  table.grid thead th:hover .pinbtn{display:grid}
  .pinbtn:hover{background:var(--gr-100,#EFF2F5);color:var(--brand,#FB5703)}
  .pinbtn.on{display:grid;color:var(--brand,#FB5703)}
  /* a pinned column reads as anchored, not just positioned */
  table.grid thead th[data-pinned]{box-shadow:inset -2px 0 0 var(--brand,#FB5703)}
  table.grid thead th[data-pinned] .lbl{font-weight:800}
  /* leave room so the label never runs under the pin */
  table.grid thead th:hover .lbl,table.grid thead th[data-pinned] .lbl{padding-right:22px}

  /* ---- the email composer ---- */
  .mail{display:grid;grid-template-columns:3fr 1fr;gap:16px;min-height:52vh}
  .mail-main{min-width:0}
  .mail-row{display:flex;gap:12px;flex-wrap:wrap}
  .mail-row label.f{min-width:200px}
  .mail-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px;margin-top:8px}
  .mail-chip{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border:1px solid var(--line);
    border-radius:10px;cursor:pointer;font-size:12.5px;background:var(--card)}
  .mail-chip:hover{border-color:var(--brand,#FB5703)}
  .mail-chip.on{border-color:var(--brand,#FB5703);background:var(--brand-soft,#FFF1EA)}
  .mail-chip b{display:block;font-size:13px}
  .mail-chip .muted{display:block;font-size:11.5px}
  .mail-main textarea{font-family:inherit;font-size:13.5px;line-height:1.55;width:100%}
  .mail-side{border-left:1px solid var(--line);padding-left:14px;min-width:0;display:flex;flex-direction:column}
  .mail-hist{flex:1;overflow:auto;max-height:56vh;margin-top:8px}
  .mail-h{border-bottom:1px solid var(--line);padding:9px 0}
  .mail-h:last-child{border-bottom:0}
  .mail-h-t{font-size:11.5px;color:var(--soft);display:flex;justify-content:space-between;gap:8px;align-items:center}
  .mail-h-s{font-size:12.5px;font-weight:650;margin-top:2px}
  .mail-h-b{font-size:12px;color:var(--soft);line-height:1.45;margin-top:2px}
  .mail-h-m{font-size:11px;color:var(--gr-400,#8A94A2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  @media (max-width:900px){ .mail{grid-template-columns:1fr} .mail-side{border-left:0;border-top:1px solid var(--line);padding:12px 0 0} }

  /* proof of receipt shown on a bill */
  .bill-proof{margin-top:8px;display:flex;flex-direction:column;gap:8px}
  .bill-sig{max-width:100%;max-height:80px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px}

  /* a working window rather than a dialog */
  body.theme-instrument .sheet-wide{max-width:1180px;width:96vw}
  body.theme-instrument .sheet-wide .sheet-b{max-height:80vh;padding:0}
  @media (max-width:900px){ body.theme-instrument .sheet-wide{width:100vw;max-width:none;border-radius:0} }

/* ===========================================================================
   THE MAIL WINDOW — a real one, not a dialog with a text box.
   =========================================================================== */
.mailwin{display:grid;grid-template-columns:1fr 300px;height:78vh;min-height:520px}
.mw-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.mw-head{padding:14px 18px 10px;border-bottom:1px solid var(--line)}
.mw-line{display:flex;align-items:flex-start;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.mw-line:last-child{border-bottom:0}
.mw-line>label{width:62px;flex:0 0 62px;padding-top:7px;font-size:11.5px;font-weight:700;
  color:var(--soft);letter-spacing:.05em;text-transform:uppercase}
.mw-from{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:5px;font-size:13.5px}
.mw-from .muted{font-size:12.5px}
.mw-to{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-width:0;padding:3px 0}
.mw-chips{display:contents}
.mw-chip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft,#FFF1EA);
  border:1px solid var(--brand-line,#FFD3BC);color:var(--brand-deep,#C63E02);
  border-radius:99px;padding:3px 5px 3px 10px;font-size:12.5px;font-weight:600;max-width:100%}
.mw-chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 3px;opacity:.7}
.mw-chip button:hover{opacity:1}
.mw-to input{flex:1;min-width:150px;border:0;outline:none;background:none;height:30px;
  line-height:28px;font-size:13.5px;color:var(--ink);padding:0}
.mw-toggle{border:0;background:none;color:var(--soft);font-size:12px;font-weight:700;
  cursor:pointer;padding:7px 6px;border-radius:6px}
.mw-toggle:hover{background:var(--gr-100,#EFF2F5);color:var(--ink)}
.mw-subj{flex:1;border:0;outline:none;background:none;height:32px;line-height:30px;
  font-size:14.5px;font-weight:600;color:var(--ink);padding:0}
.mw-tplline select{height:30px;line-height:normal;border:1px solid var(--gr-200);border-radius:7px;
  font-size:12.5px;padding:0 8px;background:var(--card);max-width:240px}

.mw-tools{display:flex;align-items:center;gap:3px;padding:7px 14px;border-bottom:1px solid var(--line);
  background:var(--gr-50,#F7F9FB);flex-wrap:wrap}
.mw-tools .sp{flex:1}
.mw-t{border:1px solid transparent;background:none;color:var(--gr-800);cursor:pointer;
  height:28px;min-width:28px;padding:0 8px;border-radius:7px;font-size:12.5px}
.mw-t:hover{background:var(--card);border-color:var(--gr-200)}
.mw-sep{width:1px;height:18px;background:var(--line);margin:0 5px}

.mw-body{flex:1;overflow:auto;padding:16px 18px;font-size:13.5px;line-height:1.6;outline:none;min-height:0}
.mw-body p{margin:0 0 10px}
.mw-body ul,.mw-body ol{margin:0 0 10px 20px}
.mw-body a{color:var(--brand-deep,#C63E02)}
.mw-body .mw-sig{color:var(--soft);font-size:12.5px}

.mw-side{border-left:1px solid var(--line);background:var(--gr-50,#F7F9FB);
  padding:14px;overflow:auto;display:flex;flex-direction:column;min-height:0}
.mw-side-h{border-bottom:1px solid var(--line);padding-bottom:9px}
.mw-book{display:flex;flex-direction:column;gap:5px}
.mw-bk{text-align:left;border:1px solid var(--line);background:var(--card);border-radius:9px;
  padding:7px 9px;cursor:pointer;font-size:12.5px;line-height:1.35}
.mw-bk:hover{border-color:var(--brand,#FB5703);background:var(--brand-soft,#FFF1EA)}
.mw-bk b{display:block;font-size:12.5px}
.mw-bk span{display:block;font-size:11.5px;color:var(--soft)}
.mw-side .mail-hist{flex:1;min-height:0;max-height:none}
@media (max-width:900px){
  .mailwin{grid-template-columns:1fr;height:auto}
  .mw-side{border-left:0;border-top:1px solid var(--line)}
  .mw-body{min-height:220px}
}

  /* the pencil on a calculated stock figure */
  .rocell.haspen{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%}
  .cellpen{border:0;background:none;color:var(--gr-400,#8A94A2);cursor:pointer;font-size:13px;
    padding:2px 4px;border-radius:5px;opacity:0;transition:opacity .12s}
  table.grid tbody tr:hover .cellpen{opacity:1}
  .cellpen:hover{background:var(--brand-soft,#FFF1EA);color:var(--brand,#FB5703)}

/* ===========================================================================
   CREATING A RECORD — a form, not a blank row.
   Two columns on a normal screen, one on a narrow one. Fields whose content
   runs long (description, address, notes) take the full width so the text is
   readable while it is being typed.
   =========================================================================== */
.nr-sec{margin-bottom:18px}
.nr-sec:last-child{margin-bottom:0}
.nr-sec>.b-eyebrow{display:block;padding:0 0 9px;margin-bottom:11px;border-bottom:1px solid var(--line)}
.nr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.nr-grid .nr-f{margin:0;min-width:0}
.nr-grid .nr-f.wide{grid-column:1/-1}
.nr-f>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr-f select[multiple]{height:auto;padding:6px 8px}
.sheet-wide .sheet-b .nr-sec{padding:0 22px}
.sheet-wide .sheet-b>.hint{padding:16px 22px 0}
.sheet-wide .sheet-b .nr-sec:last-child{padding-bottom:18px}
@media (max-width:760px){ .nr-grid{grid-template-columns:1fr} }

/* the first section — the key column — reads as the headline of the form */
.nr-sec:first-of-type .nr-grid .nr-f>span{color:var(--primary);font-weight:700}

/* ===========================================================================
   WHAT HAPPENS NEXT — the same block, in the same place, on every document.
   =========================================================================== */
.txn-flow{border-top:1px solid var(--line);margin-top:11px;padding-top:11px;
  display:flex;flex-direction:column;gap:7px}
.txn-flow>.b-eyebrow{margin-bottom:1px}
.txn-flow .btn{width:100%;justify-content:center}
/* The side panel is height-bound so its buttons stay on screen; the panels of
   buttons must therefore NEVER be the thing that compresses. Only the fields
   list flexes and scrolls — Save / Print / Email / Next-step keep their size,
   instead of shrinking into each other when the window is short. */
.txn-side-h,.txn-actions,.txn-flow{flex:none}
.txn-actions .btn,.txn-flow .btn{flex:none}

/* ===========================================================================
   THE LOGO'S COLOURS, USED AS A WHISPER.
   Three colours live in the mark: a leaf green, a deep teal and an orange.
   The application is a working instrument, so they are not allowed to become
   decoration — they appear only in the shading: a barely-there warmth in the
   shadow under a card, a hairline of colour at the top edge of a surface, a
   faint wash in the canvas behind everything. At normal viewing distance you
   would not name the colours; take them out and the screen goes flat.
   =========================================================================== */
/* tokens moved to the single palette block at the top of this file */
body.theme-instrument{
  /* the canvas: three colours at a strength you read as "warm", not as colour */
  background-image:
    radial-gradient(900px 520px at 0% 0%, rgba(97,157,57,.045), transparent 62%),
    radial-gradient(820px 480px at 100% 4%, rgba(2,140,168,.05), transparent 62%),
    radial-gradient(700px 420px at 55% 100%, rgba(251,86,3,.028), transparent 62%);
  background-attachment:fixed;
}
/* a card is white, with the faintest cool wash falling from its top edge */
body.theme-instrument .b-card,
body.theme-instrument .txn-side,
body.theme-instrument .txn-items,
body.theme-instrument .sheet{
  background-image:linear-gradient(180deg, rgba(2,140,168,.028), rgba(2,140,168,0) 76px);
}
/* tinted cards already carry their own meaning — leave those alone */
body.theme-instrument .b-card.tint-green,
body.theme-instrument .b-card.tint-teal,
body.theme-instrument .b-card.tint-amber,
body.theme-instrument .b-card.tint-red{background-image:none}
/* the totals bar and every table wrapper get the same trace of depth */
body.theme-instrument .gridwrap{box-shadow:var(--shadow-sm)}
body.theme-instrument .txn-totals{
  background-image:linear-gradient(180deg, rgba(97,157,57,.035), rgba(97,157,57,0) 60px)}

/* ===========================================================================
   THE CREATE BUTTON — floating bubbles, nothing behind them.
   The menu was a bordered white panel holding a grid of cards, which is a
   dialog sitting in the corner. These are loose pills that rise out of the
   button one after another: each carries its group's colour, casts its own
   shadow, and has no container at all.
   =========================================================================== */
.fabmenu{
  position:absolute;right:0;bottom:78px;width:auto;max-height:none;overflow:visible;
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  opacity:0;pointer-events:none;transform:none;transition:opacity .14s ease}
.fabwrap.open .fabmenu{opacity:1;pointer-events:auto}
body.theme-instrument .fabmenu{width:auto}

.fab-group{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bub-ink,var(--soft));padding:0;margin:6px 4px -2px 0;text-align:right;
  opacity:0;transform:translateY(8px)}
.fab-cards{display:flex;flex-direction:column;align-items:flex-end;gap:7px}

/* one bubble */
.fab-card{
  display:inline-flex;align-items:center;gap:8px;text-align:right;white-space:nowrap;
  border:1px solid var(--bub-line);border-radius:999px;
  background:linear-gradient(180deg,#fff, var(--bub-soft));
  color:var(--bub-ink);padding:9px 15px;font-size:13px;font-weight:650;cursor:pointer;
  box-shadow:0 2px 5px rgba(2,60,72,.10), 0 10px 22px rgba(2,60,72,.10);
  opacity:0;transform:translateY(10px) scale(.96);
  transition:background .14s, color .14s, box-shadow .16s, transform .12s}
.fab-card:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bub);flex:0 0 7px}
.fab-card:hover{background:var(--bub);border-color:var(--bub);color:#fff;
  transform:translateY(-1px);box-shadow:0 4px 10px rgba(2,60,72,.16), 0 14px 30px rgba(2,60,72,.16)}
.fab-card:hover:before{background:rgba(255,255,255,.9)}
body.theme-instrument .fab-card{padding:9px 15px;font-size:13px;font-weight:650;text-align:right;
  color:var(--bub-ink);border-radius:999px}

/* the three groups take the three colours of the mark */
.fab-g-sell{--bub:#028ca8; --bub-ink:#04566a; --bub-soft:#EAF6F9; --bub-line:#A9DCE8}
.fab-g-buy {--bub:#5f9c38; --bub-ink:#3B6522; --bub-soft:#EFF6E9; --bub-line:#BEDCA8}
.fab-g-make{--bub:#e2600f; --bub-ink:#9C4208; --bub-soft:#FEF0E7; --bub-line:#F6C6A4}

/* they arrive one after another, nearest the button first */
.fabwrap.open .fab-group,
.fabwrap.open .fab-card{animation:bubIn .26s cubic-bezier(.2,.8,.3,1) both}
@keyframes bubIn{ to{opacity:1;transform:none} }
.fabwrap.open .fabmenu>*:nth-last-child(1){animation-delay:.00s}
.fabwrap.open .fabmenu>*:nth-last-child(2){animation-delay:.03s}
.fabwrap.open .fabmenu>*:nth-last-child(3){animation-delay:.06s}
.fabwrap.open .fabmenu>*:nth-last-child(4){animation-delay:.09s}
.fabwrap.open .fabmenu>*:nth-last-child(5){animation-delay:.12s}
.fabwrap.open .fabmenu>*:nth-last-child(6){animation-delay:.15s}
.fabwrap.open .fab-cards .fab-card:nth-child(2){animation-delay:.04s}
.fabwrap.open .fab-cards .fab-card:nth-child(3){animation-delay:.07s}
.fabwrap.open .fab-cards .fab-card:nth-child(4){animation-delay:.10s}
@media (prefers-reduced-motion:reduce){
  .fabwrap.open .fab-group,.fabwrap.open .fab-card{animation:none;opacity:1;transform:none}
}
/* the button itself picks up a ring of the three colours while it is open */
.fabwrap.open .fab{outline:none;
  box-shadow:0 0 0 3px rgba(2,140,168,.20), 0 14px 38px rgba(2,60,72,.30)}
@media (max-width:700px){ .fabmenu{bottom:70px} .fab-card{font-size:13.5px;padding:10px 16px} }

/* ===========================================================================
   THE SIGN-IN PAGE — the same product, wearing its colours.
   It is the one screen seen before anyone has an account, so the mark's three
   colours are allowed to show properly here: across the headline, along the
   top edge of the form, under the panel. Everything structural — the type,
   the card edges, the field heights, the button — stays exactly as it is
   inside the application, so signing in and arriving feel like one place.
   =========================================================================== */
body .lp{background:var(--paper);
  background-image:
    radial-gradient(900px 520px at 4% 0%, rgba(2,140,168,.10), transparent 60%),
    radial-gradient(760px 460px at 96% 6%, rgba(97,157,57,.09), transparent 60%),
    radial-gradient(680px 420px at 60% 100%, rgba(251,86,3,.055), transparent 62%)}
body .lp-nav{background:#15181D;border-bottom:0;box-shadow:inset 0 -3px 0 0 transparent;position:relative}
body .lp-nav:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--lg-green),var(--lg-teal) 52%,var(--lg-orange))}

/* the headline carries the mark's gradient — the one place it runs full strength */
body .hero-copy h1 .grad{
  background:linear-gradient(92deg,var(--lg-green),var(--lg-teal) 46%,var(--lg-orange));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* the form: a white card with the three colours along its top edge */
body .lp .login-card{
  background:#fff;border:1px solid #E4E8ED;border-radius:16px;padding:28px;
  border-top:0;position:relative;overflow:hidden;
  box-shadow:0 2px 6px rgba(2,60,72,.06), 0 24px 60px rgba(2,60,72,.13)}
body .lp .login-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--lg-green),var(--lg-teal) 52%,var(--lg-orange))}
body .lp .login-card:hover{box-shadow:0 2px 6px rgba(2,60,72,.06), 0 28px 70px rgba(2,60,72,.17)}
body .lp .login-card .brandmark{
  background:linear-gradient(92deg,var(--lg-green),var(--lg-teal) 50%,var(--lg-orange));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-weight:800}
body .lp input:focus{border-color:var(--lg-teal);box-shadow:0 0 0 3px rgba(2,140,168,.16)}
body .lp .btn.primary{background:#1D2127;color:#fff;height:42px;border-radius:10px}
body .lp .btn.primary:hover{background:#2A2F37}

/* the four claims under the headline: one colour each, quietly */
body .lp .hero-pills .pill{background:#fff;border:1px solid #E4E8ED;box-shadow:0 1px 2px rgba(2,60,72,.05)}
body .lp .hero-pills .pill:nth-child(1){border-color:#A9DCE8} body .lp .hero-pills .pill:nth-child(1) b{color:#04566a}
body .lp .hero-pills .pill:nth-child(2){border-color:#BEDCA8} body .lp .hero-pills .pill:nth-child(2) b{color:#3B6522}
body .lp .hero-pills .pill:nth-child(3){border-color:#F6C6A4} body .lp .hero-pills .pill:nth-child(3) b{color:#9C4208}
body .lp .hero-pills .pill:nth-child(4){border-color:#A9DCE8} body .lp .hero-pills .pill:nth-child(4) b{color:#04566a}
body .lp .hero-stats{border-top:2px solid transparent;
  border-image:linear-gradient(90deg,var(--lg-green),var(--lg-teal) 52%,var(--lg-orange)) 1}
body .lp .hero-stats>div:nth-child(1) .n{color:#3B6522}
body .lp .hero-stats>div:nth-child(2) .n{color:#04566a}
body .lp .hero-stats>div:nth-child(3) .n{color:#9C4208}

/* the feature cards below keep the app's card shape, with a coloured top rule */
body .lp .fcard{background:#fff;border:1px solid #E4E8ED;border-radius:14px;
  box-shadow:0 1px 2px rgba(2,60,72,.05);border-top:3px solid var(--lg-teal)}
body .lp .fcard:nth-child(3n+2){border-top-color:var(--lg-green)}
body .lp .fcard:nth-child(3n+3){border-top-color:var(--lg-orange)}
body .lp .fcard:hover{box-shadow:0 10px 30px rgba(2,60,72,.12);transform:translateY(-2px)}
body .lp .fcard .ic{background:#EAF6F9;color:#04566a}
body .lp .fcard:nth-child(3n+2) .ic{background:#EFF6E9;color:#3B6522}
body .lp .fcard:nth-child(3n+3) .ic{background:#FEF0E7;color:#9C4208}
body .lp .lp-foot{border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--lg-green),var(--lg-teal) 52%,var(--lg-orange)) 1}

/* ===========================================================================
   TOOLBARS: ONE ROW, ONE HEIGHT.
   A labelled field inside a toolbar used to stack its caption above the input,
   which made that one control ~52px tall while the tabs beside it were 36 and
   the buttons 32 — the row grew to fit it and nothing lined up. In a toolbar
   the caption sits beside the field instead, and every control in the row is
   the same height, so the strip reads as a single line of controls.
   =========================================================================== */
.toolbar label.f,
.toolbar label.f.tb-f{display:flex;align-items:center;gap:8px;margin:0;white-space:nowrap}
.toolbar label.f>span{margin:0;line-height:1;flex:0 0 auto}
body.theme-instrument .toolbar{align-items:center}
body.theme-instrument .toolbar input,
body.theme-instrument .toolbar select{height:32px;line-height:30px;padding:0 10px;font-size:13px}
body.theme-instrument .toolbar input[type="date"]{width:auto;min-width:150px}
body.theme-instrument .toolbar label.f>span{
  font-size:10.5px;font-weight:650;letter-spacing:.075em;text-transform:uppercase;color:var(--gr-500)}
body.theme-instrument .toolbar .vswitch{align-self:center}

/* A quiet button is quiet everywhere. `.auto` only means "don't stretch to the
   full width of its container" — it is a width, not an action — so it must
   never be given the filled treatment's white type without a background. */
body.theme-instrument .btn.auto:not(.primary):not(.act){
  border:1px solid var(--gr-200);background:var(--card);color:var(--gr-800);font-weight:600}
body.theme-instrument .btn.auto:not(.primary):not(.act):hover{
  background:var(--gr-50);border-color:var(--gr-300);color:var(--gr-800);filter:none}

/* ===========================================================================
   SIGN-IN CTAs — colour from the mark, not graphite.
   The two black buttons (the hero "See how it works" and the Sign in button)
   were the last of the old graphite on this page. The Sign in button — the one
   real action here — takes the mark's teal so it reads as the thing to press;
   the hero link becomes a smaller tinted pill that sits in the design rather
   than a full-width slab across the copy.
   =========================================================================== */

/* the Sign in button: teal, the way a primary action reads inside the app */
body .lp .login-card .btn.primary{
  background:linear-gradient(135deg,var(--lg-teal),#026b81);
  color:#fff;height:44px;border-radius:11px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(2,60,72,.14), 0 8px 20px rgba(2,140,168,.22)}
body .lp .login-card .btn.primary:hover{
  background:linear-gradient(135deg,#0398b6,var(--lg-teal));
  box-shadow:0 2px 4px rgba(2,60,72,.16), 0 12px 28px rgba(2,140,168,.30)}
body .lp .login-card .btn.primary:active{transform:translateY(1px)}

/* the hero call-to-action: two neat pills, not a slab */
.hero-cta{gap:12px;margin-bottom:30px}
body .lp .hero-cta .btn{height:auto}
/* primary pill — teal, sized to its text */
body .lp .cta-main.btn.primary{
  width:auto;padding:11px 22px!important;border-radius:999px;font-weight:650;font-size:14px;
  background:linear-gradient(135deg,var(--lg-teal),#026b81);color:#fff;border:0;
  box-shadow:0 2px 5px rgba(2,60,72,.12), 0 10px 24px rgba(2,140,168,.20)}
body .lp .cta-main.btn.primary:hover{
  background:linear-gradient(135deg,#0398b6,var(--lg-teal));color:#fff;
  box-shadow:0 3px 8px rgba(2,60,72,.16), 0 14px 30px rgba(2,140,168,.28);
  transform:translateY(-1px)}
/* ghost pill — outlined in teal, fills on hover */
body .lp .cta-ghost.btn{
  width:auto;padding:11px 20px!important;border-radius:999px;font-weight:600;font-size:14px;
  background:#fff;border:1.5px solid var(--lg-teal);color:#04566a;
  box-shadow:0 1px 2px rgba(2,60,72,.05)}
body .lp .cta-ghost.btn:hover{
  background:var(--lg-teal);border-color:var(--lg-teal);color:#fff;
  box-shadow:0 8px 22px rgba(2,140,168,.24);transform:translateY(-1px)}

/* ===========================================================================
   ELEVATION — the whole app lifts off the page (V98)
   Every surface was sitting flat on the background because the earlier theme
   set --shadow-sm to none, then several rules pinned box-shadow:none outright,
   and the shadows that survived were at .05 alpha — invisible. This is the
   single authoritative pass: real, soft, brand-tinted depth on every surface
   a page is built from, so cards, tables, the toolbar, modals and panels all
   read as raised objects on a recessed canvas — the quiet, expensive kind of
   depth, never a heavy drop shadow. Appended last so it wins the cascade, and
   written against the shared classes so EVERY page inherits it with nothing
   per-screen to maintain.
   =========================================================================== */

/* the depth scale — teal-tinted so the shadow belongs to the brand, layered
   (a tight contact shadow + a soft ambient one) the way real light falls */
:root, body.theme-instrument{
  --elev-1:0 1px 2px rgba(2,45,58,.06), 0 3px 8px rgba(2,90,110,.07);
  --elev-2:0 2px 4px rgba(2,45,58,.07), 0 10px 24px rgba(2,90,110,.10);
  --elev-3:0 8px 18px rgba(2,45,58,.10), 0 24px 54px rgba(2,90,110,.16);
  --shadow-sm:var(--elev-1); --shadow-md:var(--elev-2); --shadow-lg:var(--elev-3);
}

/* the canvas goes a touch deeper so raised things have somewhere to sit above */
/* tokens moved to the single palette block at the top of this file */
body.theme-instrument .content, body.theme-instrument #view{ background:transparent; }

/* CARDS — the workhorse surface. Raised at rest, and they rise on hover. */
body.theme-instrument .b-card{
  box-shadow:var(--elev-1) !important; border-color:#DCE7E4;
  transition:box-shadow .18s ease, transform .18s ease; }
body.theme-instrument .b-card:hover{ box-shadow:var(--elev-2) !important; }
/* an interactive/KPI card lifts a little to say it can be clicked */
body.theme-instrument a.b-card:hover, body.theme-instrument .b-card.kpi:hover{
  box-shadow:var(--elev-3) !important; transform:translateY(-2px); }

/* TABLES, the toolbar, the transaction surfaces — all raised the same way */
body.theme-instrument .gridwrap,
body.theme-instrument .toolbar,
body.theme-instrument .txn-side,
body.theme-instrument .txn-items,
body.theme-instrument .txn-totals,
body.theme-instrument .hub-side,
body.theme-instrument .hub-body,
body.theme-instrument .pagehead{
  box-shadow:var(--elev-1) !important; border-color:#DCE7E4; }

/* the top bar casts a shadow DOWN onto the page, anchoring it as the top layer */
body.theme-instrument .topnav{
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 6px 20px rgba(2,45,58,.20) !important;
  border-bottom:0 !important; position:sticky; top:0; z-index:30; }

/* floating things (dropdown menus, pickers, the funnel) sit highest */
body.theme-instrument .submenu-inner,
body.theme-instrument .floatpanel,
body.theme-instrument .pickerpanel,
body.theme-instrument .colmenu,
body.theme-instrument .createmenu{
  box-shadow:var(--elev-3) !important; border-color:#D3E2DE; }

/* buttons regain a subtle press-ready shadow (the theme had killed it) */
body.theme-instrument .btn:not(.primary):not(.act):not(.danger){
  box-shadow:var(--elev-1); }
body.theme-instrument .btn:not(.primary):not(.act):not(.danger):hover{
  box-shadow:var(--elev-2); }

/* ===========================================================================
   MODALS — a document under a light, wearing the brand (V98)
   The create/new-record popup was flat white with a black button. Now: the
   scrim darkens and blurs the page behind, the sheet is lifted high off it,
   a thin ribbon of the mark's three colours sits along the very top, the
   header carries the faintest teal wash, and the save button is teal — the
   same primary action colour the rest of the app uses.
   =========================================================================== */
.scrim{ background:rgba(6,28,35,.46); backdrop-filter:blur(4px); }
body.theme-instrument .sheet{
  border:1px solid #D3E2DE; border-radius:16px; position:relative; overflow:hidden;
  box-shadow:var(--elev-3) !important;
  background:#fff; }
/* the three-colour ribbon across the top edge */
body.theme-instrument .sheet::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:linear-gradient(90deg, var(--lg-green), var(--lg-teal) 52%, var(--lg-orange)); }
/* header sits on a faint teal wash so it reads as the sheet's title bar */
body.theme-instrument .sheet-h{
  background:linear-gradient(180deg, rgba(2,140,168,.07), rgba(2,140,168,0));
  border-bottom:1px solid var(--line); }
body.theme-instrument .sheet-h h2{ color:var(--tk-text); }
/* the footer lifts slightly off the body */
body.theme-instrument .sheet-f{
  background:linear-gradient(180deg, rgba(2,45,58,0), rgba(2,90,110,.04));
  border-top:1px solid var(--line); }

/* the modal's primary/save button: teal, not black */
body.theme-instrument .sheet .btn.primary,
body.theme-instrument .sheet #msave{
  background:linear-gradient(135deg, var(--lg-teal), #026b81) !important;
  border:0 !important; color:#fff !important; font-weight:700;
  box-shadow:0 1px 2px rgba(2,60,72,.14), 0 6px 16px rgba(2,140,168,.22) !important; }
body.theme-instrument .sheet .btn.primary:hover,
body.theme-instrument .sheet #msave:hover{
  background:linear-gradient(135deg, #0398b6, var(--lg-teal)) !important;
  box-shadow:0 2px 4px rgba(2,60,72,.16), 0 10px 24px rgba(2,140,168,.30) !important; }

/* the key-column caption in the creation form already reads as the headline;
   give the whole form's section rules a hair of teal so the popup has colour
   even before a field is touched */
body.theme-instrument .nr-sec>.b-eyebrow{ color:#04566a; }

/* tinted cards keep their meaning-bar AND gain the same lift (the elevation
   pass above used !important, which would otherwise drop the coloured edge) */
body.theme-instrument .b-card.tint-green{box-shadow:inset 3px 0 0 var(--state-released), var(--elev-1) !important}
body.theme-instrument .b-card.tint-teal {box-shadow:inset 3px 0 0 var(--state-process),  var(--elev-1) !important}
body.theme-instrument .b-card.tint-amber{box-shadow:inset 3px 0 0 var(--state-hold),     var(--elev-1) !important}
body.theme-instrument .b-card.tint-red  {box-shadow:inset 3px 0 0 var(--state-reject),   var(--elev-1) !important}
body.theme-instrument .b-card.tint-green:hover{box-shadow:inset 3px 0 0 var(--state-released), var(--elev-2) !important}
body.theme-instrument .b-card.tint-teal:hover {box-shadow:inset 3px 0 0 var(--state-process),  var(--elev-2) !important}
body.theme-instrument .b-card.tint-amber:hover{box-shadow:inset 3px 0 0 var(--state-hold),     var(--elev-2) !important}
body.theme-instrument .b-card.tint-red:hover  {box-shadow:inset 3px 0 0 var(--state-reject),   var(--elev-2) !important}

/* ===========================================================================
   THE PRODUCTION WORKSPACE — one spine, a rail down the left (V100)
   Production is entered once from the top bar and navigated from a rail that
   stays put while the content on its right changes: the pipeline, the
   schedule, every data list and the checks, one click apart. This is the
   Dynamics/Outlook pattern — the rail is the area's spine, not a tab strip
   that reprints on every page.
   =========================================================================== */
.prodrow{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start}
.prodmain{min-width:0}
.prodmain .pagehead{margin-top:2px}

.prodrail{
  position:sticky;top:78px;align-self:start;
  background:var(--card);border:1px solid #DCE7E4;border-radius:14px;
  box-shadow:var(--elev-1);padding:8px;display:flex;flex-direction:column;gap:1px}
.prodrail .pr-head{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tk-text-muted,#5B7566);padding:12px 12px 5px}
.prodrail .pr-gap{height:4px}
.prodrail .pr-item{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:9px 11px;border-radius:9px;color:var(--tk-text,#12251A);
  font-size:13.5px;font-weight:550;line-height:1.2;
  border:1px solid transparent;transition:background .12s,border-color .12s,color .12s}
.prodrail .pr-item:hover{background:var(--surface-sunk,#E9F3EB)}
.prodrail .pr-ic{
  flex:0 0 22px;width:22px;height:22px;display:grid;place-content:center;
  font-size:13px;color:var(--tk-text-muted,#5B7566);
  border-radius:6px;background:var(--surface-sunk,#EEF4F1)}
/* Selected = green, the same green as the active tab in the top bar. This rail
   used to mark its current item in TEAL while the nav marked its current item
   in green and the partner list marked its current row in orange — three
   colours for one idea, on three screens of the same app. */
.prodrail .pr-item.on{
  background:var(--primary-soft);
  border-color:var(--primary-line);color:var(--primary);font-weight:700}
.prodrail .pr-item.on .pr-ic{background:var(--primary);color:#fff}

@media (max-width:900px){
  /* on a narrow screen the rail becomes a scrollable strip across the top */
  .prodrow{grid-template-columns:1fr;gap:12px}
  .prodrail{position:static;flex-direction:row;overflow-x:auto;gap:4px;
    padding:6px;top:auto}
  .prodrail .pr-head,.prodrail .pr-gap{display:none}
  .prodrail .pr-item{flex:0 0 auto;white-space:nowrap}
  .prodrail .pr-item .pr-lb{display:inline}
}

/* ===========================================================================
   FILTER ROW — breathing room, and colour on the doct line tables (V102)
   Two fixes: the filter inputs sat flush against the cell edges (only 6px of
   cell padding under a 100%-wide input), and the doct tables on pages like the
   recipe sheet read as flat white while the rest of the app gained depth and a
   trace of the brand. Both are corrected here, at the shared level, so every
   doct table on every page follows the same rule.
   =========================================================================== */

/* the filter cell gets real padding so the input floats inside it, not against
   the borders; the input itself keeps a hair of inset on both sides */
tr.gfilter-row th, tr.tably-filter th{padding:6px 9px !important}
.gfilter input, .gfilter select,
tr.tably-filter th input, tr.tably-filter th select{
  width:calc(100% - 2px); margin:0 1px;
  border:1px solid var(--tk-border-strong,#B2D2BE); border-radius:8px;
  padding:6px 10px; font-size:12.5px;
  background:linear-gradient(180deg,#fff,#f5faf8);
  box-shadow:inset 0 1px 2px rgba(2,45,58,.05); transition:border-color .12s, box-shadow .12s}
.gfilter input:focus, .gfilter select:focus,
tr.tably-filter th input:focus, tr.tably-filter th select:focus{
  outline:none; border-color:var(--lg-teal,#028ca8);
  box-shadow:0 0 0 3px rgba(2,140,168,.14)}

/* the doct line tables (recipe ingredients, sub-recipes, document lines) get
   the same header tint, hover and quiet depth as the main grid, so no page
   reads as a flat white sheet */
body.theme-instrument table.doct{background:var(--card);border-collapse:separate;border-spacing:0}
body.theme-instrument table.doct thead th{
  background:var(--gr-50);
  color:var(--gr-500)}
body.theme-instrument table.doct tbody tr:hover{background:rgba(2,140,168,.045)}
/* the row you have hovered/selected in a doct picks up the teal edge, like the grid */
body.theme-instrument table.doct tbody tr.txn-on{
  background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--lg-teal,#028ca8)}

/* the recipe sheet's cards and every .gridwrap on it lift like the rest of the
   app — and the ingredients/sub-recipe wrappers gain the top wash */
body.theme-instrument .gridwrap{box-shadow:var(--elev-1) !important; border:1px solid #DCE7E4}
body.theme-instrument .b-card .gridwrap{box-shadow:none !important; border-color:#E2ECE8}

/* ===========================================================================
   EDIT MODE — you can SEE when a document is unlocked (V103)
   A saved transaction opens locked (read-only). Pressing Edit unlocks it AND
   repaints the whole document in an amber "you are editing" state — a banner
   across the top, an amber rail down the side, warmer field borders — so a
   floor user is never unsure whether a change will stick. Locked is calm and
   neutral; editing is warm and obvious.
   =========================================================================== */

/* the banner */
.txn-modebar{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 14px;border-radius:11px;margin-bottom:2px;font-size:13px;
  background:var(--surface-sunk,#EEF4F1);border:1px solid #DCE7E4;color:var(--tk-text-muted,#5B7566)}
.txn-modebar .btn.sm{margin-left:auto}
.txn-modebar .tmb-lock{font-size:14px;opacity:.7}
/* editing: the banner turns amber and pulses once so the change of state registers */
.txn-modebar.on{
  background:linear-gradient(180deg,#FFF6E6,#FDEFD3);
  border-color:#E9C46A;color:#8A5A0B;font-weight:600;
  box-shadow:0 1px 2px rgba(138,90,11,.10), 0 6px 16px rgba(233,196,106,.28);
  animation:editPulse .5s ease}
.txn-modebar.on b{color:#7A4E08}
.txn-modebar .tmb-dot{
  width:9px;height:9px;border-radius:50%;background:#E8930C;flex:0 0 9px;
  box-shadow:0 0 0 0 rgba(232,147,12,.5);animation:editBlink 1.8s ease-in-out infinite}
@keyframes editBlink{
  0%,100%{box-shadow:0 0 0 0 rgba(232,147,12,.45)}
  50%{box-shadow:0 0 0 5px rgba(232,147,12,0)}}
@keyframes editPulse{from{transform:translateY(-3px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .txn-modebar .tmb-dot{animation:none}.txn-modebar.on{animation:none}}

/* the whole document warms up while editing */
body.theme-instrument .txn-editing .txn-side,
body.theme-instrument .txn-editing .txn-items,
body.theme-instrument .txn-editing .txn-totals{
  border-color:#EBCB7E !important;
  box-shadow:inset 3px 0 0 #E8930C, var(--elev-1) !important;
  background-image:linear-gradient(180deg, rgba(232,147,12,.045), rgba(232,147,12,0) 80px)}
/* editable fields get a warm border so it's clear they now take input */
.txn-editing input:not([disabled]),
.txn-editing select:not([disabled]),
.txn-editing textarea:not([disabled]){
  border-color:#E9C46A}
.txn-editing input:not([disabled]):focus,
.txn-editing select:not([disabled]):focus{
  outline:none;border-color:#E8930C;box-shadow:0 0 0 3px rgba(232,147,12,.16)}
/* the amber "Editing" tag on the number block */
.txn-editing .txn-side-h .tag.t-amber{background:#FDEFD3;color:#8A5A0B;border:1px solid #E9C46A}

/* locked: calm, and the fields plainly read as display, not input */
body.theme-instrument .txn-locked input[disabled],
body.theme-instrument .txn-locked select[disabled]{
  background:var(--surface-sunk,#F1F5F3);color:var(--tk-text,#12251A);
  opacity:1;-webkit-text-fill-color:var(--tk-text,#12251A);border-color:transparent;cursor:default}
body.theme-instrument .txn-locked .txn-items input[disabled]{background:transparent}

/* the data grid gets the same edit-mode signal as the documents (V103):
   when the View/Edit switch is on Edit, the whole card warms up so it is
   obvious cells are now live */
body.theme-instrument .b-card.grid-editing{
  border-color:#EBCB7E !important;
  box-shadow:inset 3px 0 0 #E8930C, var(--elev-2) !important;
  background-image:linear-gradient(180deg, rgba(232,147,12,.05), rgba(232,147,12,0) 90px)}
body.theme-instrument .b-card.grid-editing .vetoggle{
  background:#FDEFD3;border-color:#E9C46A}
body.theme-instrument .b-card.grid-editing .vetoggle span.act{
  background:#E8930C;color:#fff}
.b-card.grid-editing table.grid tbody td input.gcell:focus,
.b-card.grid-editing table.grid tbody td select.gcell:focus{
  outline-color:#E8930C}

/* ===========================================================================
   COLUMNS POPUP — one place for every column (V104)
   The two old buttons (create, and show/reorder) are now one "Columns" button
   opening this popup: a Create-new-column button on top, then every column as
   a draggable row with a show/hide tick, a pin, and rename/edit/delete.
   =========================================================================== */
.colmodal-top{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.colmodal .cm-list{max-height:56vh;overflow:auto;margin:0 -4px;padding:2px 4px}
.colmodal .cm-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  border:1px solid transparent}
.colmodal .cm-row:hover{background:var(--surface-sunk,#EEF4F1)}
.colmodal .cm-row.dragging{opacity:.5;background:var(--primary-soft)}
.colmodal .cm-grip{cursor:grab;color:var(--soft);font-size:13px;letter-spacing:-2px;flex:0 0 auto}
.colmodal .cm-label{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.colmodal .cm-label b{font-size:13.5px;font-weight:600}
.colmodal .cm-type{font-size:11.5px;color:var(--soft)}
.colmodal .cm-pin{
  border:0;background:none;cursor:pointer;font-size:14px;opacity:.35;
  filter:grayscale(1);flex:0 0 auto;padding:2px 4px;border-radius:6px}
.colmodal .cm-pin:hover{opacity:.7;background:var(--surface-sunk,#EEF4F1)}
.colmodal .cm-pin.on{opacity:1;filter:none}
.colmodal .cm-row .btn.sm{flex:0 0 auto}

/* ===========================================================================
   THE BRAND EDGE — every surface, every page (V107)
   The coloured left-edge accent people liked on the transaction cards now sits
   on every card across the whole app, so no page reads as a flat white sheet.
   It's a quiet teal by default; cards that already carry a MEANING colour
   (green released / amber hold / red reject / the amber editing state) keep
   theirs — those rules are more specific and win. This is one shared rule, so
   any page built in future inherits the edge automatically.
   =========================================================================== */
body.theme-instrument .b-card{
  position:relative;
  box-shadow:inset 3px 0 0 rgba(2,140,168,.55), var(--elev-1) !important;
  border-color:#DCE7E4;
}
body.theme-instrument .b-card:hover{
  box-shadow:inset 3px 0 0 var(--lg-teal,#028ca8), var(--elev-2) !important;
}
/* an interactive/KPI card leans a touch greener to feel clickable, and lifts */
body.theme-instrument a.b-card,
body.theme-instrument .b-card.kpi{
  box-shadow:inset 3px 0 0 rgba(97,157,57,.55), var(--elev-1) !important;
}
body.theme-instrument a.b-card:hover,
body.theme-instrument .b-card.kpi:hover{
  box-shadow:inset 3px 0 0 var(--lg-green,#619d39), var(--elev-3) !important;
}

/* the same edge on the other first-class surfaces so a whole page is unified:
   grid cards, table wrappers, the toolbar, the transaction panels, doct cards */
body.theme-instrument .gridwrap,
body.theme-instrument .toolbar,
body.theme-instrument .txn-side,
body.theme-instrument .txn-items,
body.theme-instrument .txn-totals,
body.theme-instrument .prodrail,
body.theme-instrument .hub-side,
body.theme-instrument .hub-body{
  box-shadow:inset 3px 0 0 rgba(2,140,168,.4), var(--elev-1) !important;
}

/* the meaning colours and the editing state are more specific and still win;
   re-assert the editing amber so it beats the blanket teal above */
body.theme-instrument .txn-editing .txn-side,
body.theme-instrument .txn-editing .txn-items,
body.theme-instrument .txn-editing .txn-totals{
  box-shadow:inset 3px 0 0 #E8930C, var(--elev-1) !important;
}
body.theme-instrument .b-card.grid-editing{
  box-shadow:inset 3px 0 0 #E8930C, var(--elev-2) !important;
}

/* tinted status cards keep their meaning edge over the blanket teal (V107) */
body.theme-instrument .b-card.tint-green{box-shadow:inset 3px 0 0 var(--state-released), var(--elev-1) !important}
body.theme-instrument .b-card.tint-teal {box-shadow:inset 3px 0 0 var(--state-process),  var(--elev-1) !important}
body.theme-instrument .b-card.tint-amber{box-shadow:inset 3px 0 0 var(--state-hold),     var(--elev-1) !important}
body.theme-instrument .b-card.tint-red  {box-shadow:inset 3px 0 0 var(--state-reject),   var(--elev-1) !important}
body.theme-instrument .b-card.tint-green:hover{box-shadow:inset 3px 0 0 var(--state-released), var(--elev-2) !important}
body.theme-instrument .b-card.tint-teal:hover {box-shadow:inset 3px 0 0 var(--state-process),  var(--elev-2) !important}
body.theme-instrument .b-card.tint-amber:hover{box-shadow:inset 3px 0 0 var(--state-hold),     var(--elev-2) !important}
body.theme-instrument .b-card.tint-red:hover  {box-shadow:inset 3px 0 0 var(--state-reject),   var(--elev-2) !important}

/* ===========================================================================
   THE DASHBOARD — a real welcome, not a flat wall of white (V109)
   A gradient hero in the brand's three colours greets you by name and shows
   the few things that actually need attention as tappable chips. The KPI cards
   below gain an icon, a coloured top accent and real depth, so the page reads
   as an arrival rather than a spreadsheet.
   =========================================================================== */
.dash-hero{position:relative;border-radius:18px;overflow:hidden;margin-bottom:22px;
  border:1px solid #CFE6DD;box-shadow:var(--elev-2)}
.dash-hero-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(680px 300px at 8% -10%, rgba(97,157,57,.30), transparent 60%),
    radial-gradient(720px 340px at 62% 120%, rgba(2,140,168,.32), transparent 62%),
    radial-gradient(520px 260px at 108% 0%, rgba(251,86,3,.20), transparent 60%),
    linear-gradient(120deg,#0b3b46,#0a6b81 58%,#0f7d5a)}
.dash-hero-bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(4,30,38,.20));
  mix-blend-mode:overlay}
.dash-hero-in{position:relative;z-index:1;display:flex;align-items:flex-start;
  justify-content:space-between;gap:16px;padding:26px 28px}
.dash-hero .dash-greet{font-size:26px;font-weight:800;letter-spacing:-.02em;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.18)}
.dash-hero .dash-greet b{color:#fff}
.dash-hero .dash-sub{color:rgba(255,255,255,.82);font-size:13.5px;margin-top:3px}
.dash-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dh-chip{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px);transition:background .14s,transform .14s}
.dh-chip:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
.dh-chip b{font-weight:800}
.dh-chip.warn{background:rgba(251,176,59,.26);border-color:rgba(251,176,59,.5)}
.dh-chip.ok{background:rgba(255,255,255,.14);color:rgba(255,255,255,.92)}
.dash-hero .dash-pick-btn{flex:0 0 auto;background:rgba(255,255,255,.18);color:#fff;
  border:1px solid rgba(255,255,255,.28)}
.dash-hero .dash-pick-btn:hover{background:rgba(255,255,255,.3)}
@media (max-width:640px){ .dash-hero-in{flex-direction:column} .dash-hero .dash-greet{font-size:22px} }

/* KPI cards: icon + coloured accent + depth */
body.theme-instrument a.b-card.kpi{
  padding:15px 16px 14px;border-radius:14px;
  box-shadow:inset 3px 0 0 rgba(2,140,168,.5), var(--elev-1) !important;
  transition:transform .16s, box-shadow .16s}
body.theme-instrument a.b-card.kpi:hover{
  transform:translateY(-3px);
  box-shadow:inset 3px 0 0 var(--lg-teal,#028ca8), var(--elev-3) !important}
.kpi-top{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.kpi-ic{width:26px;height:26px;flex:0 0 26px;display:grid;place-content:center;
  font-size:14px;border-radius:8px;background:var(--surface-sunk,#EAF3EE)}
.kpi .b-num{margin-top:4px;font-size:26px;font-weight:800;letter-spacing:-.02em}
.kpi-sub{font-size:11.5px;color:var(--soft);margin-top:auto;padding-top:8px;line-height:1.35}
/* tone cards get a matching icon-chip colour and a stronger left accent */
body.theme-instrument a.b-card.kpi.tint-teal{box-shadow:inset 3px 0 0 var(--state-process), var(--elev-1) !important}
body.theme-instrument a.b-card.kpi.tint-green{box-shadow:inset 3px 0 0 var(--state-released), var(--elev-1) !important}
body.theme-instrument a.b-card.kpi.tint-amber{box-shadow:inset 3px 0 0 var(--state-hold), var(--elev-1) !important}
body.theme-instrument a.b-card.kpi.tint-teal:hover{box-shadow:inset 3px 0 0 var(--state-process), var(--elev-3) !important}
body.theme-instrument a.b-card.kpi.tint-green:hover{box-shadow:inset 3px 0 0 var(--state-released), var(--elev-3) !important}
body.theme-instrument a.b-card.kpi.tint-amber:hover{box-shadow:inset 3px 0 0 var(--state-hold), var(--elev-3) !important}
.kpi.tint-teal .kpi-ic{background:rgba(2,140,168,.16)}
.kpi.tint-green .kpi-ic{background:rgba(97,157,57,.16)}
.kpi.tint-amber .kpi-ic{background:rgba(251,176,59,.18)}

/* ===========================================================================
   LINKED DOCUMENTS — a PO and its bills, visibly connected (V110)
   The PO side panel lists every bill raised against it and any rollover link;
   a bill links back to its source PO. One click moves between them.
   =========================================================================== */
.txn-linked{margin-top:14px}
.txn-linked .b-eyebrow{display:block;margin-bottom:6px}
.tl-row{display:flex;align-items:center;gap:8px;text-decoration:none;
  padding:8px 10px;border-radius:9px;border:1px solid #DCE7E4;background:var(--card);
  box-shadow:inset 3px 0 0 rgba(2,140,168,.45), var(--elev-1);
  margin-bottom:6px;transition:transform .12s,box-shadow .12s}
.tl-row:hover{transform:translateY(-1px);
  box-shadow:inset 3px 0 0 var(--lg-teal,#028ca8), var(--elev-2)}
.tl-no{font-weight:700;color:#04566a;font-size:13px}
.tl-meta{color:var(--soft);font-size:12px;margin-left:2px}
.tl-amt{margin-left:auto;font-weight:700;font-size:13px}
.tl-link{text-decoration:none;color:#04566a}
/* a clickable transaction number or partner name inside any table/report */
.rowlink{color:var(--lg-teal,#028ca8);text-decoration:none;cursor:pointer;border-bottom:1px solid transparent}
.rowlink:hover{border-bottom-color:currentColor}
.tl-link:hover b{text-decoration:underline}

/* ===========================================================================
   STICKY HEADERS EVERYWHERE — the page title and every table header stay put
   while you scroll (V111)
   Two rules, applied site-wide so no page is left out:
   1. The page heading (.pagehead) pins just under the top nav, so you always
      know what page you're on.
   2. Every table header row — grid, document line tables (doct), mini and
      tably — sticks to the top of its own scroll box, so column names never
      scroll out of view. Filter rows stick just beneath their header.
   =========================================================================== */

/* --- 1 · the page heading stays under the top bar --- */
body.theme-instrument .content > .pagehead,
body.theme-instrument .prodmain > .pagehead{
  position:sticky; top:56px; z-index:9;
  background:var(--canvas,#EEF4F1);
  margin-left:-28px; margin-right:-28px; padding:10px 28px 10px;
  box-shadow:0 6px 14px -10px rgba(2,45,58,.4);
}
@media (max-width:700px){
  body.theme-instrument .content > .pagehead,
  body.theme-instrument .prodmain > .pagehead{ top:52px; margin-left:-12px; margin-right:-12px; padding:8px 12px }
}

/* --- 2 · every table header sticks within its scroll box --- */
/* the wrappers scroll, and the header/ filter rows pin to their top */
.gridwrap{max-height:72vh}
table.grid thead th,
table.doct thead th,
table.mini thead th,
table.tably thead th{
  position:sticky; top:0; z-index:3;
}
/* doct/mini/tably headers need an opaque background so rows don't show through */
body.theme-instrument table.doct thead th,
body.theme-instrument table.mini thead th,
body.theme-instrument table.tably thead th{
  background:var(--gr-50) !important;
}
/* a filter row sits directly under its header, also sticky. Every enhanced
   list table is wrapped in a scroll box (see tably.js), so the header pins at
   top:0 and the filter row directly beneath it — the same for every table. */
table.doct tr.gfilter-row th,
table.tably tr.tably-filter th{
  position:sticky; top:var(--th-h); z-index:2;
}
/* an editable grid's header cell renders 1px taller than a document table's,
   so it gets its own offset — pinning it at --th-h left a 1px strip of the
   scrolling rows showing through between the header and the filter row. */
table.grid tr.gfilter-row th{
  position:sticky; top:var(--th-h-grid); z-index:2;
}
/* doct line tables that aren't in a .gridwrap still get a scroll box so their
   header has something to stick inside */
.txn-items table.doct, .doct-scroll table.doct{ }

/* Every enhanced list table is wrapped in a .gridwrap scroll box by tably.js,
   so its header sticks at top:0 within that box — no page-offset math, and the
   filter row sits cleanly beneath it. This is the same behaviour the big grids
   already had, now shared by every table. */
body.theme-instrument .b-card > .gridwrap table.doct thead th{ top:0 }

/* the width field in the document-table Columns popup (V112) */
.cm-row .cm-w{margin-left:auto;text-align:right;font-size:12px;padding:3px 6px}
.cm-row.cm-dragging{opacity:.5}

/* the two-signature sign-off popup at the end of receiving (V113) */
.rc-signwrap{display:grid;gap:12px;margin-top:10px}
.rc-signwrap .proof-block{margin:0}
.rc-signwrap .sigpad{width:100%;max-width:100%;height:130px;border:1px solid var(--line);border-radius:10px;background:#fff;touch-action:none}

/* document line-table: resize handle, pin button, pinned (frozen) columns (V114) */
/* sticky, not relative: relative was here so the resize grips could anchor,
   but it silently switched these headers OUT of sticky — the one table family
   whose header did not pin, which is why their filter rows misbehaved. Sticky
   is itself a positioning context, so the grips anchor exactly the same. */
table.doct.fixedcols thead th{position:sticky;top:0;z-index:3}
.dc-resize{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;
  user-select:none;touch-action:none}
.dc-resize:hover{background:linear-gradient(90deg,transparent,rgba(2,140,168,.35))}
.cm-pin{border:1px solid var(--line);background:var(--card);border-radius:7px;
  width:30px;height:28px;cursor:pointer;opacity:.5;font-size:13px;line-height:1}
.cm-pin.on{opacity:1;border-color:var(--lg-teal,#028ca8);box-shadow:inset 0 0 0 1px rgba(2,140,168,.3)}
/* a pinned doc column freezes to the left of its scroll box */
body.theme-instrument table.doct.fixedcols th.dc-pinned,
body.theme-instrument table.doct.fixedcols td.dc-pinned{
  position:sticky;left:0;z-index:2;background:var(--card);
  box-shadow:2px 0 0 rgba(2,140,168,.18)}
body.theme-instrument table.doct.fixedcols thead th.dc-pinned{z-index:4}

/* ===========================================================================
   PURCHASES WORKSPACE — one list, stage chips, lifecycle at a glance (V116)
   =========================================================================== */
.pf-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.pf-chips{display:flex;flex-wrap:wrap;gap:7px}
.pf-chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:var(--card);border:1px solid #DCE7E4;color:var(--ink);
  box-shadow:var(--elev-1);transition:transform .12s,box-shadow .12s,background .12s}
.pf-chip:hover{transform:translateY(-1px);box-shadow:var(--elev-2)}
.pf-chip.on{background:linear-gradient(180deg,#0a6b81,#028ca8);color:#fff;border-color:transparent}
.pf-count{display:inline-grid;place-content:center;min-width:20px;height:18px;padding:0 5px;
  border-radius:999px;font-size:11px;font-weight:700;background:var(--surface-sunk,#EAF3EE);color:var(--soft)}
.pf-chip.on .pf-count{background:rgba(255,255,255,.24);color:#fff}
.pf-tools{display:flex;gap:8px;align-items:center}
.pf-search{height:34px;min-width:220px;border:1px solid var(--line);border-radius:9px;padding:0 12px;font-size:13px}
.pf-summary{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:12px}
.pf-sum{display:flex;flex-direction:column;gap:2px;font-size:15px}
.pf-sum b{font-size:19px;font-weight:800;letter-spacing:-.01em}
.pf-owed{color:#B3261E}
.pf-row{cursor:pointer}
.pf-row:hover{background:var(--surface-sunk,#F3F8F4)}
.tag.t-grey{background:#Eceff1;color:#5b6b73}
.tag.t-teal{background:rgba(2,140,168,.14);color:#026076}

/* the vendor's/customer's own item code shown on a document line (V118) */
.pcode{color:#026076;font-weight:600}

/* chart-of-accounts modal wide field (V119) */
.nr-grid .nr-f.nr-wide{grid-column:1 / -1}

/* full-page bill entry — Expense vs Items tabs (V120) */
.be-tabs{margin:0 0 14px}

/* tables auto-wrapped by tably.js get the same scroll box as the grids (V121).
   No extra card chrome — the surrounding .b-card already provides it. */
.tably-wrap{max-height:72vh;overflow:auto;border-radius:10px}
.tably-wrap > table.doct{margin:0}

/* ===========================================================================
   TABLE PARITY (V125) — the auto-enhanced list tables (doct/mini/tably) get
   the same visual language + resize handles as the big data grid, so every
   table across the site reads the same whether it is a full page, a half
   page, or inside a popup.
   =========================================================================== */
/* resize grip on every enhanced header, mirroring the grid's .resizer */
table.tably thead tr:first-child th{position:sticky;top:0;z-index:3}
.tably-resize{position:absolute;top:0;bottom:0;right:-6px;width:12px;
  cursor:col-resize;z-index:6;background:none}
.tably-resize::before{content:'';position:absolute;left:5px;top:0;bottom:0;width:2px;
  background:transparent;border-radius:1px;transition:background .1s}
.tably-resize:hover::before,.tably-resize:active::before{background:var(--brand,#FB5703)}

/* header + filter row styled to match table.grid exactly */
body.theme-instrument table.tably thead tr:first-child th{
  background:var(--gr-50);
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gr-500);font-weight:700;white-space:nowrap;
  border-bottom:1px solid var(--gr-200);
}
body.theme-instrument table.tably tr.tably-filter th{
  background:var(--surface);padding:6px 9px;border-bottom:1px solid var(--tk-border-strong);
}
/* the enhanced-table filter box is the SAME rounded box as the grid's .gfilter
   input — one look for every filter on every table site-wide */
body.theme-instrument table.tably tr.tably-filter input{
  width:calc(100% - 2px);margin:0 1px;
  border:1px solid var(--tk-border-strong,#B2D2BE);border-radius:8px;
  padding:6px 10px;font-size:12.5px;
  background:linear-gradient(180deg,#fff,#f5faf8);
  box-shadow:inset 0 1px 2px rgba(2,45,58,.05);
  transition:border-color .12s, box-shadow .12s;
}
body.theme-instrument table.tably tr.tably-filter input:focus{
  outline:none;border-color:var(--lg-teal,#028ca8);
  box-shadow:0 0 0 3px rgba(2,140,168,.14);
}
body.theme-instrument table.tably tr.tably-filter input:not(:placeholder-shown){
  border-color:var(--primary);background:var(--primary-soft);font-weight:600;
}
/* zebra + row hover to match the grid */
body.theme-instrument table.tably tbody tr:hover{background:var(--primary-soft)}

/* =========================================================================
   UTILITIES — the shared measurements the views used to write inline.
   703 style="…" attributes were spread across the view files, which is why a
   new screen never matched an old one: the spacing lived in the markup, so
   there was nothing for new markup to inherit. These classes replace them.
   Spacing snaps to a 4px grid — the old values drifted across 4, 5, 6, 8, 10,
   12, 14 and 16px, which is what made rows and cards sit a hair out of line.
   ========================================================================= */
:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --fs-sm:12.5px; --fs-md:13px;
}
/* vertical rhythm */
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)}
.m-0{margin:0}
/* type steps — 12px, 12.5px and 13px all collapse to these two */
.fs-sm{font-size:var(--fs-sm)} .fs-md{font-size:var(--fs-md)}
.fw-6{font-weight:600} .fw-7{font-weight:700}
/* layout primitives */
.row{display:flex;align-items:center}
.row-wrap{display:flex;align-items:center;flex-wrap:wrap}
.row-between{display:flex;align-items:center;justify-content:space-between}
.col{display:flex;flex-direction:column}
.grid-2{display:grid;grid-template-columns:1fr 1fr}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.gap-1{gap:var(--sp-1)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)}
.gap-4{gap:var(--sp-4)} .gap-5{gap:var(--sp-5)} .gap-6{gap:var(--sp-6)}
.flex-1{flex:1} .w-full{width:100%} .w-auto{width:auto} .hidden{display:none}
.pointer{cursor:pointer} .no-border{border:0}
.text-danger{color:var(--danger)}
.bg-danger{background:var(--danger-soft);color:var(--danger)}
/* fixed widths for numeric cells — functional column fit, not rhythm, so these
   keep their exact pixel values */
.w-34{width:34px} .w-92{width:92px} .w-96{width:96px} .w-110{width:110px}
.w-120{width:120px} .w-130{width:130px} .w-150{width:150px}

/* =========================================================================
   DIALOG + STACKING
   ========================================================================= */
/* the dialog title, which used to be written as an inline font-size */
.sheet-title{font-size:16px}

/* ---- one stacking order, named ----
   Overlay layering was invented per feature: 9999, 6000, 5999, 5000, 100, 80,
   70, 60, 50, 40, 30 … so which overlay won was luck. These are the only
   layers that exist, in the order they must appear. Existing rules keep their
   numbers; anything NEW should use these. */
:root{
  --z-rail:10;        /* sticky rails and sub-headers      */
  --z-sticky:20;      /* sticky table headers              */
  --z-topnav:30;      /* the top bar                       */
  --z-dropdown:50;    /* menus opening from the top bar    */
  --z-float:60;       /* column filters, search popovers   */
  --z-fab:70;         /* the create button                 */
  --z-scrim:80;       /* the modal backdrop                */
  --z-toast:90;       /* toasts sit above the backdrop     */
  --z-update:100;     /* the "new version" banner, topmost */
}

/* =========================================================================
   TABLE CELLS — one size, whether you are reading or typing
   A cell used to change size the moment it became editable: read-only text sat
   at 13.5px in a 10px-padded cell (42px tall) while the input next to it sat at
   13px and 34px, so a row jumped from 40px to 61px just by toggling edit mode
   and the column of figures stopped lining up. One height, one size, both ways.
   ========================================================================= */
/* The in-cell editor is already defined once, at 34px tall with 9px of side
   padding (see the `table.doct td > input:not([type=checkbox])…` rule). The
   read-only value is what did NOT match it, so this aligns the text to the
   editor rather than the other way round. --cell-h is that same 34px, named. */
:root{ --cell-fs:13px; --cell-h:34px; --cell-pad-x:9px; --cell-pad-y:3px; }

/* one type size for a cell, whether it is text or a box you type in */
table.doct td, table.doct td .rocell,
table.mini td, table.mini td .rocell{ font-size:var(--cell-fs) }

/* a read-only value occupies exactly the space its editor would, so nothing
   moves when a row flips between reading and editing */
table.doct td .rocell,
table.mini td .rocell{
  display:block;
  height:var(--cell-h);
  line-height:var(--cell-h);
  padding:0 var(--cell-pad-x);
  margin:0 calc(var(--cell-pad-x) * -1);   /* sit on the editor's own edges */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* the cell hugs that height, so a row is the same height in both modes */
table.doct tbody td, table.mini tbody td{
  padding-top:var(--cell-pad-y); padding-bottom:var(--cell-pad-y);
}

/* ---- a column can never collapse to nothing ----
   table-layout:fixed gives a column with no explicit width whatever space is
   LEFT OVER. Once the other columns' saved widths add up to the table width
   that leftover is zero, and the column disappears completely — you could not
   see or click the quantity box. A floor keeps every column usable. */
table.doct.fixedcols th,
table.doct.fixedcols td,
table.grid th, table.grid td{ min-width:56px }

/* ---- the scroll box lines up with the card that holds it ----
   The line table is wider than its panel, so it scrolls. The panel is rounded
   14px and the scroll box was rounded 6px, so the table appeared to be cut off
   halfway along the edge. The box now shares the card's inner radius and clips
   to it, and a soft edge shows there is more to the right. */
/* needs the theme prefix to beat `body.theme-instrument .gridwrap`, which sets
   its own radius, border and shadow */
body.theme-instrument .txn-items{ overflow:hidden }
body.theme-instrument .txn-items > .gridwrap{
  border-radius:0;
  border-left:0; border-right:0;
  /* !important because the elevation rule above carries one too. A nested
     scroll box inside a card should not draw its own card edge. */
  box-shadow:none !important;
  margin:0 -14px;              /* run to the card's inner edge, not past it */
  padding:0;
}
body.theme-instrument .txn-items > .gridwrap::-webkit-scrollbar{ height:10px }

/* =========================================================================
   DASHBOARD — KPI rail on the left, the workflow board on the right.
   The board is four sections laid on the money flow: buy (Vendors) feeds
   make (Production) feeds sell (Customers), with Settings configuring the
   lot. Thin gray arrows drawn between the boxes carry that reading.
   ========================================================================= */
.dash-split{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start;margin-top:16px}
.dash-kpirail{display:flex;flex-direction:column;gap:10px;position:sticky;top:76px}
.dash-kpirail .kpi-band{margin:6px 0 0}
.dash-kpirail .b-card.kpi{width:100%;min-height:0;padding:12px 14px}
.dash-kpirail .b-card.kpi .b-num{font-size:22px}

.dash-board{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:34px}
.dash-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--gr-300,#C9D0D8);z-index:0}
.dash-arrows .da-line{fill:none;stroke:currentColor;stroke-width:1.6;stroke-dasharray:5 4}
.dash-arrows .da-faint{opacity:.55}

.dash-sec{position:relative;z-index:1;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column}
.dash-sec-head{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--line);background:var(--gr-50,#F7F9FB);
  text-decoration:none;color:var(--ink);transition:background .14s}
a.dash-sec-head:hover{background:var(--primary-soft)}
a.dash-sec-head:hover .dsh-go{transform:translateX(3px);opacity:1}
.dash-sec-head .dsh-ic{font-size:19px;line-height:1}
.dash-sec-head .dsh-t{display:flex;flex-direction:column;line-height:1.25}
.dash-sec-head .dsh-t b{font-size:14.5px;letter-spacing:-.01em}
.dash-sec-head .dsh-b{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--soft)}
.dash-sec-head .dsh-go{margin-left:auto;color:var(--soft);opacity:.5;transition:transform .14s,opacity .14s}
.dash-sec-head.is-locked{opacity:.55;cursor:default}

.dash-acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;padding:12px 14px}
.dash-act{display:flex;align-items:center;gap:8px;padding:9px 10px;
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer;
  transition:border-color .13s,background .13s,transform .13s,box-shadow .13s;text-align:left}
.dash-act:hover{border-color:var(--primary-line);background:var(--primary-soft);
  transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.dash-act .da-ic{flex:none;width:22px;height:22px;display:grid;place-content:center;
  font-size:13px;border-radius:6px;background:var(--gr-50,#F7F9FB)}
.dash-act:hover .da-ic{background:#fff}
.dash-act .da-lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:1100px){ .dash-split{grid-template-columns:1fr}
  .dash-kpirail{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .dash-kpirail .kpi-band{grid-column:1/-1} }
@media (max-width:820px){ .dash-board{grid-template-columns:1fr} }

/* =========================================================================
   THE FIT-THE-WINDOW RULE + the spreadsheet chrome (toolbar & pager).

   Rule, site-wide: on a working screen the FRAME — side panel with its
   action buttons, the totals, the toolbar, the pager — is visible without
   scrolling the page. Only the list of rows scrolls, inside its own box.
   ========================================================================= */

/* Document builders (.txn = PO / SO / invoice / receiving / delivery):
   the layout was already a flex column with the buttons pinned at the bottom
   of the side panel — it just had no height, so the page grew instead and
   pushed the buttons off screen. Bounding it to the window is the missing
   piece: fields scroll inside the panel, items scroll inside their card,
   Save / Print / Email stay on screen. On very short windows the bound would
   crush the content, so it falls back to normal page scrolling there. */
.txn{height:calc(100vh - 178px);min-height:430px}
@media (max-height:640px){ .txn{height:auto;min-height:0} }

/* List pages: the scroll box leaves room for the page title above and the
   pager below, instead of a fixed 72vh that pushed the pager off screen. */
.gridwrap{max-height:min(72vh,calc(100vh - 265px))}

/* A totals row rides the bottom of the scroll box, always visible while the
   rows scroll behind it — the spreadsheet way. */
table.doct tfoot td, table.tably tfoot td{
  position:sticky;bottom:0;background:var(--card);z-index:2;
  border-top:2px solid var(--tk-border-strong,#B2D2BE)}

/* ---- the toolbar every list table gets (count · Export · Reset) ---- */
.tably-bar{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.tably-bar .tb-count{font-size:12px;color:var(--soft);font-variant-numeric:tabular-nums}
.tably-bar .tb-sp{flex:1}

/* ---- pagination, bottom-right ---- */
.tably-pager{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin:8px 0 0}
.tably-pager select{width:auto;padding:4px 8px;font-size:12px}
.tably-pager .tp-lbl{font-size:12px;color:var(--soft);min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.tably-pager .btn.sm{padding:3px 10px}

/* rows hidden by the filter or parked on another page */
tr.tably-fhide, tr.tably-phide{display:none}

/* ---- power-user density: more records per screen ----
   Rows tighten from ~41px to ~31px and figures go tabular, so columns of
   numbers align digit-for-digit. The Touch density setting still overrides
   this for floor terminals. */
body.theme-instrument table.doct td,
body.theme-instrument table.tably td{padding:6px 10px;font-size:12.5px}
body.theme-instrument table.doct th,
body.theme-instrument table.tably th{padding:7px 10px}
body.theme-instrument table.doct td.mono,
body.theme-instrument table.tably td.mono{font-variant-numeric:tabular-nums}
body.theme-instrument tr.tably-filter th{padding:4px 6px}
body.theme-instrument tr.tably-filter input{height:26px;font-size:12px;padding:2px 8px}
body[data-density="touch"] table.doct td,body[data-density="touch"] table.tably td{padding:16px 12px;font-size:16px}

/* Focus-scroll respects the sticky header + filter rows: scrolling an input
   into view stops BELOW them instead of underneath them. --thead-h is
   measured per table by tably/grid, with a safe fallback. */
.gridwrap{scroll-padding-top:var(--thead-h,72px)}