:root{
    --paper:#E3E5E1; --paper2:#F1F2EF; --card:#FAFAF8;
    --ink:#161B19; --slate:#4A5654; --dim:#89918D; --line:#C6CAC4;
    --ochre:#B87F09; --oxide:#9E2E1B; --moss:#2B6247; --blueprint:#2C4A63;
    --disp:'Barlow Condensed',Impact,sans-serif;
    --body:'IBM Plex Sans',system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box}
  #root{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.45;min-height:100vh}
  #root h1,#root h2,#root h3,#root .disp{font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:0}
  .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}
  button{font-family:var(--body);cursor:pointer}
  input,select,textarea{font-family:var(--body);font-size:14px}
  :focus-visible{outline:2px solid var(--blueprint);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

  /* ---------- sign in ---------- */
  .gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
        background:
          repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 1px,transparent 1px 44px),
          repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 44px),
          var(--paper)}
  .gatebox{width:100%;max-width:430px}
  .stencil{font-family:var(--disp);text-transform:uppercase;line-height:.86;letter-spacing:-.01em}
  .stencil .l1{display:block;font-size:clamp(38px,11vw,58px);font-weight:700}
  .stencil .l2{display:block;font-size:clamp(38px,11vw,58px);font-weight:700;color:var(--ochre)}
  .eyebrow{font-family:var(--disp);text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--slate);font-weight:600}
  .rolecard{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);
            border-left:5px solid var(--line);padding:14px 16px;margin-top:10px;transition:border-color .15s,background .15s}
  .rolecard:hover{border-left-color:var(--ochre);background:#fff}
  .rolecard[aria-pressed="true"]{border-left-color:var(--ochre);background:#fff;box-shadow:inset 0 0 0 1px var(--ochre)}
  .rolecard .rn{font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:18px}
  .rolecard .rd{color:var(--slate);font-size:12.5px;margin-top:2px}
  .field{width:100%;padding:11px 12px;border:1px solid var(--line);background:#fff;color:var(--ink)}
  .btn{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:11px 18px;font-family:var(--disp);
       text-transform:uppercase;letter-spacing:.09em;font-weight:600;font-size:15px}
  .btn:hover{background:#000}
  .btn[disabled]{opacity:.4;cursor:not-allowed}
  .btn.ghost{background:transparent;color:var(--ink)}
  .btn.ghost:hover{background:rgba(0,0,0,.06)}
  .btn.sm{padding:6px 11px;font-size:13px}
  .btn.warn{background:var(--oxide);border-color:var(--oxide)}
  .err{color:var(--oxide);font-size:12.5px;margin-top:8px;font-weight:500}

  /* ---------- shell ---------- */
  .top{position:sticky;top:0;z-index:40;background:var(--ink);color:#EFF0ED;padding:9px 14px;
       display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .top .tt{font-family:var(--disp);text-transform:uppercase;letter-spacing:.07em;font-weight:700;font-size:17px}
  .top .per{font-family:var(--mono);font-size:11.5px;color:#A8B0AC}
  .spacer{flex:1}
  .badge{font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:700;
         padding:3px 9px;border:1px solid currentColor}
  .badge.adm{color:var(--ochre)} .badge.clk{color:#8FC4A9}
  .nav{position:sticky;top:0;z-index:30;display:flex;gap:0;background:var(--paper2);border-bottom:1px solid var(--line);overflow-x:auto}
  .nav button{background:transparent;border:0;border-bottom:3px solid transparent;padding:11px 15px;white-space:nowrap;
              font-family:var(--disp);text-transform:uppercase;letter-spacing:.09em;font-weight:600;font-size:14px;color:var(--slate)}
  .nav button[aria-current="true"]{color:var(--ink);border-bottom-color:var(--ochre)}
  .wrap{padding:16px 14px 72px;max-width:1500px;margin:0 auto}

  /* ---------- ticker / summary ---------- */
  .tick{display:flex;gap:0;border:1px solid var(--line);background:var(--card);margin-bottom:16px;flex-wrap:wrap}
  .tick>div{flex:1 1 108px;padding:10px 13px;border-right:1px solid var(--line)}
  .tick>div:last-child{border-right:0}
  .tick .k{font-family:var(--disp);text-transform:uppercase;letter-spacing:.13em;font-size:10.5px;color:var(--slate);font-weight:600}
  .tick .v{font-family:var(--mono);font-size:22px;font-weight:500;line-height:1.15}
  .tick .v.a{color:var(--oxide)} .tick .v.b{color:var(--ochre)} .tick .v.c{color:var(--moss)}

  /* ---------- filters ---------- */
  .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .filters input,.filters select{padding:9px 11px;border:1px solid var(--line);background:#fff}
  .filters input{flex:1 1 200px;min-width:0}

  /* ---------- table ---------- */
  .tscroll{overflow:auto;border:1px solid var(--line);background:var(--card);max-height:70vh}
  table{border-collapse:collapse;width:100%;min-width:1180px}
  thead th{position:sticky;top:0;z-index:10;background:var(--ink);color:#EFF0ED;font-family:var(--disp);
           text-transform:uppercase;letter-spacing:.07em;font-size:11px;font-weight:600;padding:8px 7px;
           text-align:right;white-space:nowrap;border-right:1px solid #2C3330}
  thead th.l{text-align:left}
  tbody td{padding:6px 7px;border-bottom:1px solid #E2E4DF;border-right:1px solid #EDEEEB;text-align:right;white-space:nowrap}
  tbody td.l{text-align:left;white-space:normal}
  tbody tr.grp td{background:var(--paper2);font-family:var(--disp);text-transform:uppercase;letter-spacing:.13em;
                  font-size:11.5px;font-weight:700;color:var(--slate);text-align:left;padding:7px}
  tbody tr.item{cursor:pointer}
  tbody tr.item:hover td{background:#FFFDF4}
  .iname{font-weight:500;max-width:330px}
  .iunit{color:var(--dim);font-size:11.5px;font-family:var(--mono)}
  .pill{font-family:var(--disp);text-transform:uppercase;letter-spacing:.07em;font-size:10.5px;font-weight:700;padding:2px 6px;display:inline-block}
  .pill.ok{color:var(--moss);background:rgba(43,98,71,.1)}
  .pill.low{color:#fff;background:var(--oxide)}
  tr.urgent td:first-child{
    box-shadow:inset 4px 0 0 0 transparent;
    background-image:repeating-linear-gradient(45deg,var(--oxide) 0 4px,#F2C21B 4px 8px);
    background-size:4px 100%;background-repeat:no-repeat;background-position:left center;padding-left:12px}
  tr.disc td{color:var(--dim)}
  tr.disc .iname{text-decoration:line-through}
  .flag{font-family:var(--disp);font-size:10px;letter-spacing:.1em;font-weight:700;color:var(--oxide);text-transform:uppercase}

  /* ---------- run-out board (signature) ---------- */
  .board{border:1px solid var(--line);background:var(--card);padding:14px}
  .brow{display:grid;grid-template-columns:minmax(120px,240px) 1fr 58px;gap:10px;align-items:center;padding:5px 0}
  .brow .bn{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .track{position:relative;height:17px;background:#EAEBE7;border:1px solid #DADCD7}
  .track .bar{position:absolute;left:0;top:0;bottom:0;background:var(--moss)}
  .track .bar.late{background:var(--ochre)}
  .track .bar.gone{background:var(--oxide)}
  .track .mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--blueprint)}
  .track .mark::after{content:'';position:absolute;top:-3px;left:-3px;width:8px;height:8px;background:var(--blueprint)}
  .bdays{font-family:var(--mono);font-size:12px;text-align:right}
  .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
          font-size:11.5px;color:var(--slate);align-items:center}
  .sw{display:inline-block;width:13px;height:11px;margin-right:5px;vertical-align:-1px}

  /* ---------- drawer ---------- */
  .scrim{position:fixed;inset:0;background:rgba(15,20,18,.45);z-index:60}
  .drawer{position:fixed;right:0;top:0;bottom:0;width:min(470px,100%);background:var(--card);z-index:61;
          overflow-y:auto;border-left:1px solid var(--line);box-shadow:-8px 0 28px rgba(0,0,0,.16)}
  .dhead{position:sticky;top:0;background:var(--ink);color:#EFF0ED;padding:13px 16px;display:flex;gap:10px;align-items:flex-start}
  .dhead .dn{font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:19px;line-height:1.1}
  .dhead .dc{font-family:var(--mono);font-size:11px;color:#A8B0AC;margin-top:3px}
  .x{background:transparent;border:1px solid #4A5450;color:#EFF0ED;width:29px;height:29px;flex:none;font-size:15px;line-height:1}
  .dbody{padding:16px}
  .card{border:1px solid var(--line);background:#fff;padding:13px;margin-bottom:14px}
  .card>h3{font-size:14px;letter-spacing:.13em;color:var(--slate);margin-bottom:10px}
  .kv{display:flex;justify-content:space-between;gap:10px;padding:4.5px 0;border-bottom:1px dotted #DEE0DB;font-size:13px}
  .kv:last-child{border-bottom:0}
  .kv .kk{color:var(--slate)}
  .kv .vv{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
  .chip{border:1px solid var(--line);background:#fff;padding:7px 11px;font-family:var(--disp);text-transform:uppercase;
        letter-spacing:.07em;font-size:12.5px;font-weight:600;color:var(--slate)}
  .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .chip.neg[aria-pressed="true"]{background:var(--oxide);border-color:var(--oxide)}
  .lab{font-family:var(--disp);text-transform:uppercase;letter-spacing:.13em;font-size:10.5px;color:var(--slate);
       font-weight:600;display:block;margin-bottom:4px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ledger{font-size:12.5px}
  .ledger .lr{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dotted #DEE0DB}
  .ledger .lm{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
  .ledger .lw{color:var(--dim);font-size:11px}
  .plus{color:var(--moss)} .minus{color:var(--oxide)}
  .locked{border:1px dashed var(--line);background:#F6F6F3;padding:11px;font-size:12.5px;color:var(--slate)}
  .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;background:var(--ink);color:#fff;
         padding:11px 20px;z-index:90;font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:13.5px;font-weight:600}
  .empty{border:1px dashed var(--line);padding:34px 18px;text-align:center;color:var(--slate);background:var(--card)}
  .empty .disp{font-size:19px;color:var(--ink);margin-bottom:5px}
  .note{font-size:12px;color:var(--slate);margin-top:8px;line-height:1.5}
  .rowbtns{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
  .banner{border-left:4px solid var(--ochre);background:#FBF6E6;padding:11px 13px;font-size:12.5px;margin-bottom:16px;color:#54481F}

/* ---------------- added for the multi-user build ---------------- */
.netbar{position:sticky;top:0;z-index:45;background:var(--oxide);color:#fff;padding:6px 14px;
        font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:600;
        display:flex;gap:10px;align-items:center}
.netbar.queued{background:var(--ochre);color:#231C05}
.userrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
         padding:10px 0;border-bottom:1px solid #E2E4DF}
.userrow:last-child{border-bottom:0}
.userrow .un{font-weight:500}
.userrow .um{font-family:var(--mono);font-size:11.5px;color:var(--slate)}
.tag{font-family:var(--disp);text-transform:uppercase;letter-spacing:.09em;font-size:10.5px;
     font-weight:700;padding:2px 7px;border:1px solid currentColor;display:inline-block}
.tag.admin{color:var(--ochre)} .tag.clerk{color:var(--moss)} .tag.off{color:var(--dim)}
.aud{font-size:12.5px;padding:7px 0;border-bottom:1px dotted #DEE0DB;display:flex;
     justify-content:space-between;gap:12px}
.aud .aw{color:var(--dim);font-size:11px;font-family:var(--mono);white-space:nowrap}
.spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;
      border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-1px}
@keyframes sp{to{transform:rotate(360deg)}}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}