:root{
  --page:#F1F2F1; --surface:#FFF; --head:#F6F6F5; --stripe:#FAFAF9;
  --ink:#161513; --ink2:#57564F; --ink3:#8A8A83;
  --line:#C4C7C6; --line-soft:#E1E2DF;
  --blue:#0A6ABF; --blue-d:#08508F; --blue-bg:#E7F0F9;
  --red:#B23122; --red-bg:#FAE9E6;
  --amber:#9C6100; --amber-bg:#FBF0DC;
  --green:#1E6B44; --green-bg:#E4F0E9;
  --mono:"Noto Sans Mono",ui-monospace,Menlo,monospace;
  --sans:"Noto Sans",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);
  font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2{margin:0;font-weight:600;letter-spacing:-.005em}

/* ---- app bar ---- */
.appbar{background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 18px;height:44px}
.brand{font-weight:700;font-size:13.5px;color:var(--blue);letter-spacing:-.01em;
  padding-right:14px;border-right:1px solid var(--line-soft);height:22px;display:flex;align-items:center}
.appbar .app{font-size:13px;font-weight:600}
.appbar .env{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-left:auto}

/* ---- page head ---- */
.pagehead{background:var(--surface);border-bottom:1px solid var(--line);padding:14px 18px;
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.pagehead h1{font-size:17px}
.pagehead .sub{font-size:12.5px;color:var(--ink2);margin-top:2px}
#drop{border:1px dashed var(--line);background:var(--head);padding:7px 14px;cursor:pointer;
  display:flex;align-items:center;gap:12px}
#drop:hover,#drop.hot{border-color:var(--blue);background:var(--blue-bg)}
#drop b{font-size:12.5px;font-weight:600}
#drop .stamp{font-family:var(--mono);font-size:11px;color:var(--ink3);
  padding-left:12px;border-left:1px solid var(--line-soft)}

.body{padding:14px 18px 40px;display:flex;flex-direction:column;gap:12px}

/* ---- kpi strip ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  border:1px solid var(--line);background:var(--line-soft);gap:1px}
.kpi{background:var(--surface);padding:10px 14px}
.kpi .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.kpi .n{font-family:var(--mono);font-size:25px;font-weight:600;line-height:1.15;margin-top:3px}
.kpi .s{font-size:11.5px;color:var(--ink2)}
.kpi.on{box-shadow:inset 3px 0 0 var(--red)} .kpi.on .n{color:var(--red)}
.kpi.on.w{box-shadow:inset 3px 0 0 var(--amber)} .kpi.on.w .n{color:var(--amber)}
.kpi.g .n{color:var(--green)}

/* ---- toolbar ---- */
.toolbar{background:var(--surface);border:1px solid var(--line);padding:7px 12px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toolbar .lb{font-size:11px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em}
select,input[type=search]{font-family:var(--sans);font-size:12.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);padding:4px 7px;height:27px}
input[type=search]{min-width:170px}
select:focus-visible,input:focus-visible,button:focus-visible,#drop:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.btn{font-family:var(--sans);font-size:12px;font-weight:600;padding:4px 11px;height:27px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.btn:hover{background:var(--head)}
.cnt{font-family:var(--mono);font-size:11.5px;color:var(--ink2);margin-left:auto}

/* ---- panels ---- */
.panel{background:var(--surface);border:1px solid var(--line)}
.panel.ok{border-left:4px solid var(--green)}
.panel.ok .ptitle{background:var(--green-bg);border-bottom-color:#B6D6C4}
.panel.ok .ptitle h2{color:var(--green)}
.panel.ok .ptitle .note,.panel.ok .ptitle .cnt{color:#3D7A5A}
.panel.ok tbody td.po{color:var(--green)}
.ptitle{background:var(--head);border-bottom:1px solid var(--line);padding:7px 12px;
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.ptitle h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.ptitle .note{font-size:11.5px;color:var(--ink2)}
/* Scrolls in both directions, with a ceiling. Two reasons it is capped:
   the sticky headers below need a scroll container to stick inside, and a 49-row
   table that scrolls within itself keeps the page short instead of pushing
   everything below it out of reach. Shorter tables are unaffected — max-height
   only bites once the content passes it. */
.scroll{overflow:auto;max-height:70vh}
/* separate, not collapse. A collapsed border belongs to the table rather than to
   the cell, and Chrome and Safari have never positioned a sticky th correctly
   inside one — the heading simply scrolls away. With separate borders each cell
   owns its own edge, so the heading sticks and its rule travels with it. Only
   bottom edges are set, so nothing doubles up. */
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{padding:6px 12px;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap}
thead th{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);
  background:var(--head);
  /* Stays put while the rows scroll under it. The rule must be inset box-shadow,
     not border-bottom: with border-collapse the collapsed border belongs to the
     table rather than the cell, and scrolls away with it. */
  position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--line)}
tbody td{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
tbody td.tx{font-family:var(--sans);font-size:12.5px}
tbody td.po{font-weight:600}
tbody tr.r:hover>td{background:var(--stripe)}
tbody tr:last-child>td{border-bottom:0}
td .miss{color:var(--red);font-weight:600}
td .was{color:var(--ink3);text-decoration:line-through;margin-right:5px}
td .now{color:var(--amber);font-weight:600}

/* ---- chips ---- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;
  padding:2px 7px;border:1px solid;white-space:nowrap;font-family:var(--sans)}
.chip.good{background:var(--green-bg);color:var(--green);border-color:#B6D6C4}
.chip.warn{background:var(--amber-bg);color:var(--amber);border-color:#E4CB9C}
.chip.crit{background:var(--red-bg);color:var(--red);border-color:#E4B6AE}
.chip.demo{background:var(--head);color:var(--ink3);border-color:var(--line);font-weight:500}
.chips{display:flex;gap:4px;flex-wrap:wrap}

/* ---- action blocks ---- */
.zone{display:flex;flex-direction:column;gap:10px}
.zlabel{display:flex;align-items:baseline;gap:10px;padding:2px 1px}
.zlabel h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.zlabel .note{font-size:11.5px;color:var(--ink2)}
.zlabel .n{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-left:auto}

.po{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line)}
.po.crit{border-left-color:var(--red)}
.po.warn{border-left-color:var(--amber)}
.pohead{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  padding:9px 14px;background:var(--head);border-bottom:1px solid var(--line-soft)}
.pohead .num{font-family:var(--mono);font-size:14px;font-weight:600}
.pohead .sup{font-size:12.5px;color:var(--ink2)}
.pohead .right{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink3);
  display:flex;gap:14px;flex-wrap:wrap}

.dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
  gap:1px;background:var(--line-soft);border-bottom:1px solid var(--line-soft)}
.dcell{background:var(--surface);padding:8px 14px}
.dcell .k{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.dcell .v{font-family:var(--mono);font-size:12.5px;margin-top:2px;font-variant-numeric:tabular-nums}
.dcell .v .miss{color:var(--red);font-weight:600}
.dcell .v .was{color:var(--ink3);text-decoration:line-through;margin-right:5px}
.dcell .v .now{color:var(--amber);font-weight:600}

.dwrap{display:flex;flex-wrap:wrap}
.dcol{padding:11px 14px;flex:1 1 360px;min-width:0}
.dcol + .dcol{border-left:1px solid var(--line-soft)}
.dlabel{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  margin-bottom:5px;display:flex;align-items:center;gap:6px}
.dlabel .tagai{border:1px solid var(--line);background:var(--head);padding:0 4px;
  font-weight:600;letter-spacing:.04em;color:var(--ink2)}
.dcol p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink);max-width:70ch}
.dcol p b{font-weight:600}
.cmt{display:flex;gap:9px;padding:7px 0;border-top:1px solid var(--line-soft)}
.cmt:first-of-type{border-top:0;padding-top:0}
.av{width:24px;height:24px;flex:0 0 auto;background:var(--blue-bg);color:var(--blue-d);
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cmt .who{font-size:11.5px;font-weight:600}
.cmt .when{font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-left:6px;font-weight:400}
.cmt .txt{font-size:12.5px;color:var(--ink2);margin-top:1px}
.cmt.new .av{background:var(--amber-bg);color:var(--amber)}
.cmt.new .who::after{content:"new";font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--amber);color:#fff;padding:1px 4px;margin-left:6px}

.empty{padding:20px 14px;text-align:center;color:var(--ink2);font-size:12.5px}
.empty b{display:block;font-size:13px;color:var(--ink);margin-bottom:3px;font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:11.5px;color:var(--ink2);align-items:center;
  padding:2px 1px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- added for the hosted version ---- */
.userbar{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12px;color:var(--ink2)}
.userbar form{margin:0}
.banner{background:var(--amber-bg);border:1px solid #E4CB9C;color:var(--amber);
  padding:8px 14px;font-size:12.5px;display:flex;gap:10px;align-items:center}
.banner.err{background:var(--red-bg);border-color:#E4B6AE;color:var(--red)}
.banner b{font-weight:600}
.addnote{display:flex;gap:6px;margin-top:9px}
.addnote input{flex:1;font-family:var(--sans);font-size:12.5px;padding:5px 8px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.spin{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}

/* ---- signed out ---- */
/* The shell is served to anyone; it is what renders this screen. Everything that
   needs a session is hidden until there is one. */
body.signedout .pagehead,
body.signedout .body{display:none}
#signin:empty{display:none}
#signin{padding:14px 18px}
.panel.signin{max-width:440px}
.panel.signin .sbody{padding:14px 12px;display:flex;flex-direction:column;
  align-items:flex-start;gap:12px}
.panel.signin p{margin:0;font-size:12.5px;color:var(--ink2)}
.btn.primary{background:var(--blue);border-color:var(--blue-d);color:#FFF}
.btn.primary:hover{background:var(--blue-d)}
/* Two banners can stack — the standing no-auth warning and whatever else is
   happening today. */
#banner{display:flex;flex-direction:column;gap:8px}
#banner:empty{display:none}

/* ---- PO identity: order date, and the link back to the record ---- */
.pohead .pdate{font-family:var(--mono);font-size:11px;color:var(--ink3);
  padding-left:12px;border-left:1px solid var(--line-soft)}
/* Links stay the PO number's own type — underlined on hover only, so a dense
   table of them does not turn into a wall of blue. */
a.nslink{color:var(--blue);text-decoration:none}
a.nslink:hover{text-decoration:underline}
.pohead a.nslink{font-family:var(--mono);font-size:14px;font-weight:600}
td a.nslink{font-family:var(--mono)}
/* Quiet statement of what is deliberately not on the board. */
.held{font-size:12px;color:var(--ink3)}
.held:empty{display:none}

/* ---- tabs ---- */
.tabs{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line)}
.tab{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:7px 14px;
  border:1px solid transparent;border-bottom:none;background:none;color:var(--ink2);cursor:pointer}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--surface);border-color:var(--line);color:var(--ink);
  margin-bottom:-1px;padding-bottom:8px}

/* ---- purchase orders inside a consignment ---- */
/* One container carries dozens, so they are chips in a wrapping row rather than
   dozens of blocks repeating the same container dates. */
.polist{display:flex;flex-wrap:wrap;gap:4px 6px}
.pochip{display:inline-flex;align-items:baseline;gap:5px;border:1px solid var(--line-soft);
  background:var(--head);padding:2px 6px;font-family:var(--mono);font-size:11px}
.pochip .pd{color:var(--ink3);font-size:10.5px}
.od{color:var(--red);font-weight:600}
#view-unshipped .toolbar{border-top:none}
#view-unshipped label.lb{display:flex;align-items:center;gap:5px;cursor:pointer}

/* ---- tab counts and sort buttons ---- */
.tab .tn{font-family:var(--mono);font-size:10.5px;color:var(--ink3);
  border:1px solid var(--line-soft);background:var(--head);padding:0 4px;margin-left:5px}
.tab .tn:empty{display:none}
.tab.on .tn{background:var(--blue-bg);border-color:#BBD4EC;color:var(--blue-d)}
.sorts{display:inline-flex;border:1px solid var(--line)}
.sb{font-family:var(--sans);font-size:11.5px;font-weight:500;padding:3px 9px;height:25px;
  border:none;border-right:1px solid var(--line);background:var(--surface);color:var(--ink2);cursor:pointer}
.sb:last-child{border-right:none}
.sb:hover{background:var(--head);color:var(--ink)}
.sb.on{background:var(--blue-bg);color:var(--blue-d);font-weight:600}

/* ---- sortable table headings ---- */
table.sortable thead th[data-k]{cursor:pointer;user-select:none;position:relative;
  padding-right:15px;white-space:nowrap}
table.sortable thead th[data-k]:hover{color:var(--ink);background:var(--line-soft)}
/* The caret only appears on the sorted column: a row of arrows on every heading
   makes it harder to see which one is actually in force. */
table.sortable thead th.sorted{color:var(--blue-d)}
table.sortable thead th.sorted::after{content:"▲";position:absolute;right:5px;
  font-size:8px;line-height:1;top:50%;transform:translateY(-50%)}
table.sortable thead th.sorted.desc::after{content:"▼"}