/* ==========================================================================
   NSW Ops Control — desktop application styles
   Desktop only: the screens are dense on purpose, no mobile layout.
   ========================================================================== */
:root{
  --ground:#F5F7F8; --surface:#FFFFFF; --surface-2:#ECF0F2; --surface-3:#E2E8EB;
  --ink:#14202A; --ink-2:#41525F; --muted:#71828F;
  --line:#D9E1E5; --line-2:#C2CDD3;
  --accent:#0B6E78; --accent-ink:#075159; --accent-soft:#E0F0F1;
  --ok:#2B7550; --ok-soft:#E2F0E9;
  --warn:#8F620E; --warn-soft:#F9EED8;
  --crit:#AF382C; --crit-soft:#FAE5E2;
  --info:#3C5A8A; --info-soft:#E6ECF5;
  --s-margin:#00919E; --s-cost:#A96426; --s-loss:#AF382C;
  --shadow:0 1px 2px rgba(20,32,42,.06), 0 4px 14px rgba(20,32,42,.05);
  --r:8px; --r-sm:5px;
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --disp:"Archivo", var(--sans);
  --mono:"IBM Plex Mono", ui-monospace, Consolas, Menlo, monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#0D141A; --surface:#141D24; --surface-2:#1C262F; --surface-3:#243039;
  --ink:#E3EBF0; --ink-2:#AEBDC7; --muted:#7C8C98;
  --line:#243039; --line-2:#334451;
  --accent:#3FB3BF; --accent-ink:#7FD3DB; --accent-soft:#0F323A;
  --ok:#57AC80; --ok-soft:#122C21;
  --warn:#D0A03F; --warn-soft:#2E2413;
  --crit:#E0705F; --crit-soft:#331714;
  --info:#8AA8D8; --info-soft:#182236;
  --s-margin:#00A8B8; --s-cost:#C4762E; --s-loss:#E0705F;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.24);
}}
:root[data-theme="dark"]{
  --ground:#0D141A; --surface:#141D24; --surface-2:#1C262F; --surface-3:#243039;
  --ink:#E3EBF0; --ink-2:#AEBDC7; --muted:#7C8C98;
  --line:#243039; --line-2:#334451;
  --accent:#3FB3BF; --accent-ink:#7FD3DB; --accent-soft:#0F323A;
  --ok:#57AC80; --ok-soft:#122C21;
  --warn:#D0A03F; --warn-soft:#2E2413;
  --crit:#E0705F; --crit-soft:#331714;
  --info:#8AA8D8; --info-soft:#182236;
  --s-margin:#00A8B8; --s-cost:#C4762E; --s-loss:#E0705F;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.24);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-width:1240px}
h1,h2,h3,h4{font-family:var(--disp);margin:0;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- sign-in gate ---------- */
#gate{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:var(--ground)}
#gate .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:34px 38px;width:400px;text-align:center}
#gate .mark{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;gap:9px}
#gate .mark span.dot{width:11px;height:11px;border-radius:2px;background:var(--accent)}
#gate .sub{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin-top:7px;font-weight:600}
#gate p{color:var(--ink-2);font-size:13px;margin:22px 0}
#gate .err{color:var(--crit);font-size:12.5px;margin-top:16px;display:none}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:214px 1fr;min-height:100vh}
.rail{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.brand .mark{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.brand .mark span.dot{width:9px;height:9px;border-radius:2px;background:var(--accent);flex:none}
.brand .sub{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:5px;font-weight:500}
.nav{padding:10px;display:flex;flex-direction:column;gap:1px;flex:1;overflow:auto}
.nav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;padding:8px 10px;
  border-radius:var(--r-sm);color:var(--ink-2);cursor:pointer;font-weight:500}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button[aria-current="true"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.nav .grp{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);padding:14px 10px 5px;font-weight:600}
.railfoot{padding:12px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:7px}
.railfoot .who{color:var(--ink-2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;background:var(--ground);border-bottom:1px solid var(--line);
  padding:12px 22px;display:flex;align-items:center;gap:14px}
.topbar h1{font-size:17px;font-weight:600}
.topbar .spacer{flex:1}
/* The Live clock. Quiet on purpose: it is a reassurance, not a control, and
   it sits next to the one dropdown in the bar that people do press. The dot
   breathes slowly so that "live" is visible at a glance without anything
   moving fast enough to pull the eye off the table. */
.live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:3px 11px 3px 9px;
  white-space:nowrap;cursor:default}
.live[hidden]{display:none}
.live .dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ok);
  animation:live-pulse 2.4s ease-in-out infinite}
.live .lab{font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.live .at{font-family:var(--mono);font-variant-numeric:tabular-nums}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Given up. Amber, not red: nothing is broken and nothing has been lost —
   the screen is simply older than it looks, which is the one thing it must
   not keep quiet about. The dot stops moving, which says it on its own. */
.live.off{border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:var(--warn-soft)}
.live.off .dot{background:var(--warn);animation:none}
.live.off .lab,.live.off .at{color:var(--warn)}
.content{padding:20px 22px 60px}

/* ---------- controls ---------- */
.ctl{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:5px 9px;color:var(--ink);cursor:pointer;font-weight:500;font-size:12.5px}
.ctl:hover{border-color:var(--accent);color:var(--accent-ink)}
.ctl.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.ctl.primary:hover{filter:brightness(1.08);color:#fff}
.ctl.danger{color:var(--crit)}
.ctl.danger:hover{border-color:var(--crit);background:var(--crit-soft)}
.ctl[disabled]{opacity:.45;cursor:not-allowed}
select.ctl,input.ctl{padding:5px 8px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:6px 8px;width:100%;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.searchwrap{position:relative;display:flex;align-items:center}
.searchwrap input{padding-left:28px;min-width:230px}
.searchwrap svg{position:absolute;left:8px;width:14px;height:14px;color:var(--muted)}

/* ---------- panels ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.panel-h{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line)}
.panel-h h2{font-size:13px;text-transform:uppercase;letter-spacing:.09em;font-weight:600;color:var(--ink-2)}
.panel-h .note{font-size:11.5px;color:var(--muted);margin-left:auto}
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start}
.gap{height:14px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.kpis.four{grid-template-columns:repeat(4,1fr)}
.kpi{padding:13px 15px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.kpi:last-child{border-right:0}
.kpi .lab{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.kpi .val{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.kpi.accent .val{color:var(--accent-ink)}

/* ---------- tables ---------- */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface);position:sticky;top:0;z-index:2}
td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--surface-2)}
tfoot td{font-weight:600;border-top:1px solid var(--line-2);background:var(--surface-2)}
td.trunc{max-width:280px;overflow:hidden;text-overflow:ellipsis}

/* ---------- what the background refresh brought in ----------
   The screen refreshes itself every half minute, so a row can appear, or a
   status change, under somebody's eyes. The row says so for a few seconds and
   then settles down on its own: no second redraw, nothing to dismiss.

   Twelve seconds — long enough to be noticed by somebody who looked away at
   the wrong moment, short enough to be gone before it becomes part of the
   furniture. The tint is the accent teal and not the red: red is this app's
   word for "wrong", and a shift somebody else added is not wrong.

   The static background matters as much as the animation. The global
   prefers-reduced-motion rule near the top of this file turns EVERY animation
   off, so without a plain background those users would see no tint at all. It
   clears on the next draw, which is what spends the marks. */
@keyframes justin-fade{
  from{background:color-mix(in srgb,var(--accent) 16%,transparent)}
  to{background:color-mix(in srgb,var(--accent) 0%,transparent)}
}
tr.justin>td{
  background:color-mix(in srgb,var(--accent) 11%,transparent);
  animation:justin-fade 12s ease-out 1 forwards;
}
/* Survives the hover tint, which outranks a plain background. */
tr.justin>td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
/* The word, because a tint on its own says "this one is different" without
   saying what happened — and is invisible to anybody who cannot tell it from
   the row below. */
.justtag{display:inline-block;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;background:var(--accent);color:var(--surface);padding:1px 5px;border-radius:3px;
  margin-right:6px;white-space:nowrap}
/* The one line for the screens with no shift rows to mark. */
.justin-note{margin:0 0 12px;color:var(--accent-ink);font-weight:600;font-size:12.5px}

/* ---------- chips & flags ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 7px 2px 5px;
  border-radius:20px;border:1px solid transparent;white-space:nowrap}
.chip .pip{width:6px;height:6px;border-radius:50%;flex:none}
.chip.st-Request{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.chip.st-Request .pip{background:var(--info)}
.chip.st-Confirmed{background:var(--accent-soft);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.chip.st-Confirmed .pip{background:var(--accent)}
.chip.st-Completed{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.chip.st-Completed .pip{background:var(--warn)}
.chip.st-Invoiced{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.chip.st-Invoiced .pip{background:var(--ok)}
.chip.st-Paid{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.chip.st-Paid .pip{background:var(--ok)}
.chip.st-Cancelled{background:var(--surface-3);color:var(--muted);border-color:var(--line-2)}
.chip.st-Cancelled .pip{background:var(--muted)}
.flag{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;padding:1px 5px;border-radius:3px;margin-right:3px}
.flag.w{background:var(--warn-soft);color:var(--warn)}
.flag.c{background:var(--crit-soft);color:var(--crit)}
.flag.i{background:var(--info-soft);color:var(--info)}

/* ---------- risk centre ---------- */
.risklist{display:flex;flex-direction:column}
.riskrow{display:flex;align-items:center;gap:10px;padding:9px 15px;border:0;border-bottom:1px solid var(--line);
  cursor:pointer;background:none;width:100%;text-align:left}
.riskrow:last-child{border-bottom:0}
.riskrow:hover{background:var(--surface-2)}
.riskrow .stripe{width:3px;height:22px;border-radius:2px;flex:none}
.riskrow .nm{flex:1;font-weight:500}
.riskrow .ct{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.riskrow.zero{opacity:.5}
.riskrow.zero .ct{color:var(--muted)}

/* ---------- margin bars ---------- */
.mbar{position:relative;height:5px;background:var(--surface-3);border-radius:3px;min-width:60px;overflow:hidden;display:inline-block;vertical-align:middle}
.mbar>i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--s-margin)}
.mbar>i.low{background:var(--warn)}
.mbar>i.neg{background:var(--s-loss)}

/* ---------- chart ---------- */
.chartwrap{padding:14px 15px 8px}
.legend{display:flex;gap:16px;padding:0 15px 12px;align-items:center}
.legend .li{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);font-weight:500}
.legend .sw{width:11px;height:11px;border-radius:2px}
#tip{position:fixed;z-index:200;pointer-events:none;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-sm);box-shadow:var(--shadow);padding:8px 10px;font-size:11.5px;display:none;min-width:160px}
#tip .t{font-weight:600;margin-bottom:5px;font-family:var(--disp)}
#tip .r{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums}
#tip .r b{font-family:var(--mono);font-weight:500}

/* ---------- calendar ---------- */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cal .dh{background:var(--surface-2);padding:6px 8px;font-size:10px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:600;text-align:center}
.cal .day{background:var(--surface);min-height:124px;padding:5px 6px;display:flex;flex-direction:column;gap:3px}
/* The day's cost and revenue sit at the bottom of the cell, not wherever the
   venue list happens to end, so the eye can read down a week in one pass. */
.cal .day > div:last-child{margin-top:auto}
.cal .day.out{background:var(--surface-2);opacity:.55}
.cal .day.sun .dn{color:var(--warn)}
/* A public holiday is shaded and named, so it reads differently from the
   Sunday tint — the two are priced differently and must not look alike. */
.cal .day.hol{background:color-mix(in srgb, var(--crit) 7%, var(--surface))}
.cal .day.hol .dn{color:var(--crit);font-weight:700}
.cal .holname{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--crit);
  font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-2px}
.cal .dn{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:500}
.cal .day.today .dn{color:var(--accent-ink);font-weight:700}
.cal .ev{font-size:10.5px;padding:2px 5px;border-radius:3px;background:var(--surface-2);border-left:2px solid var(--muted);
  cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.cal .ev:hover{background:var(--surface-3)}
.cal .ev.s-Invoiced,.cal .ev.s-Paid{border-left-color:var(--ok)}
.cal .ev.s-Confirmed{border-left-color:var(--accent)}
.cal .ev.s-Request{border-left-color:var(--info)}
.cal .ev.s-Completed{border-left-color:var(--warn)}
.cal .ev.s-Cancelled{border-left-color:var(--muted);text-decoration:line-through;opacity:.6}
.cal .more{font-size:10px;color:var(--muted);padding-left:5px}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,18,24,.42);z-index:90;display:none}
.scrim.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:540px;background:var(--surface);border-left:1px solid var(--line);
  z-index:100;display:none;flex-direction:column;box-shadow:-8px 0 32px rgba(10,18,24,.18)}
.drawer.on{display:flex}
.drawer-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.drawer-h h2{font-size:15px;font-weight:600;flex:1}
.drawer-b{padding:16px 18px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.drawer-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fgrid.c3{grid-template-columns:repeat(3,1fr)}
.fgrid.c4{grid-template-columns:repeat(4,1fr)}
.fgrid.c5{grid-template-columns:repeat(5,1fr)}
/* A checkbox sitting in a field grid lines up with the inputs beside it
   rather than stretching to their width. */
.field.check{justify-content:flex-end}
.field.check label{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer;
  padding:6px 0;text-transform:none;letter-spacing:0;color:var(--ink)}
.field.check input{width:auto;min-width:0;margin:0}
.sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;
  padding-bottom:5px;border-bottom:1px solid var(--line)}
.calcbox{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;
  display:flex;flex-direction:column;gap:6px}
.calcrow{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.calcrow .k{color:var(--ink-2)}
.calcrow .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}
.calcrow.big .v{font-size:15px;color:var(--accent-ink);font-weight:600}
.basis{font-size:11px;color:var(--muted);border-top:1px dashed var(--line-2);padding-top:6px;line-height:1.45}

/* ---------- misc ---------- */
.banner{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--r);border:1px solid;
  margin-bottom:14px;font-size:12.5px}
.banner.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn)}
.banner.crit{background:var(--crit-soft);border-color:color-mix(in srgb,var(--crit) 35%,transparent);color:var(--crit)}
.banner.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok)}
.banner.info{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 30%,transparent);color:var(--info)}
.banner b{display:block;margin-bottom:2px}
.empty{padding:36px 20px;text-align:center;color:var(--muted);font-size:12.5px}
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:28px 20px;text-align:center;background:var(--surface-2);cursor:pointer}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop .big{font-family:var(--disp);font-weight:600;font-size:14px;margin-bottom:4px}
.hint{font-size:11.5px;color:var(--muted);line-height:1.5}
.pill{display:inline-block;font-family:var(--mono);font-size:10.5px;background:var(--surface-2);border:1px solid var(--line);
  padding:1px 5px;border-radius:3px;color:var(--ink-2)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--ground);
  padding:9px 16px;border-radius:20px;font-size:12.5px;font-weight:500;z-index:300;box-shadow:var(--shadow);display:none}
.toast.on{display:block}

/* Searchable picker ---------------------------------------------------
   Used for project codes: a plain select of a few hundred projects is a
   list nobody scrolls to the bottom of, which is its own way of picking
   the wrong one. The popup is position:fixed and lives on <body> because
   .tw scrolls horizontally and would clip it. */
.pick{display:inline-block}
.pick input{width:290px;font-family:var(--mono);font-size:12px}
.pick input.unset{color:var(--muted);font-family:var(--sans)}
.pickpop{position:fixed;z-index:250;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:var(--shadow);max-height:300px;overflow-y:auto;
  min-width:340px;padding:4px;
  /* Keeps the wheel inside the list. Without this, reaching the bottom of a
     short list hands the scroll to the page behind, which then closes the
     popup out from under the person reading it. */
  overscroll-behavior:contain}
.pickpop .opt{padding:5px 8px;border-radius:var(--r-sm);cursor:pointer;line-height:1.35}
.pickpop .opt .c{font-family:var(--mono);font-weight:600;font-size:12px}
.pickpop .opt .n{display:block;color:var(--ink-2);font-size:11.5px}
.pickpop .opt .d{color:var(--muted);font-size:11px}
.pickpop .opt:hover,.pickpop .opt.on{background:var(--surface-2)}
.pickpop .none{padding:10px 8px;color:var(--muted);font-size:12px}
.pickpop .more{padding:6px 8px;color:var(--muted);font-size:11.5px;border-top:1px solid var(--line)}
.kpi.warn .val{color:var(--warn)}
.kpi.warn .sub{color:var(--warn)}

/* Column filters on the Labour Tracker -------------------------------
   A filter sits under the heading it applies to, because that is where
   someone looking at a column goes to narrow it. */
/* Sticky just under the headings, which are sticky too: scrolling a long
   month should not take the filters off screen. 32px is the heading's own
   height — 10px text at 1.5, 8px padding either side, 1px border. */
tr.filters td.filt{padding:4px 6px;background:var(--surface-2);
  border-bottom:1px solid var(--line-2);vertical-align:middle;
  position:sticky;top:32px;z-index:1}
tr.filters input,tr.filters select{width:100%;min-width:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 6px;
  font-size:11.5px;color:var(--ink)}
tr.filters input:focus,tr.filters select:focus{border-color:var(--accent);outline:none}
tr.filters input::placeholder{color:var(--muted)}