:root{
  --paper:#fdfcfa; --surface:#f7f5f1; --line:#e6e1d8; --hair:#efebe3; --track:#ece8e0;
  --ink:#211f1c; --ink2:#4b463e; --ink3:#6c665c; --muted:#938c80; --faint:#b6afa3;
  /* The rest of the palette as tokens (2026-09-16), so a dark theme is one block of overrides at the end of the file. */
  --bg:#e9e5dd; --surface2:#f1ede5; --surface3:#f0ece3; --row-alt:#faf8f4; --row-hover:#f3f0ea; --card:#fff; --tint-grey:#f1eee8;
  --line2:#d5cdbe; --line3:#d6d0c4; --line4:#b9b1a2; --tick:#cbc4b6; --tick-week:#ddd6c9; --tick-line:#e0dacf; --sep:#d3ccbf; --sep2:#cfc8bb;
  --cell-now:#f1ede5; --cell-now-hover:#e8e3d8; --toggle-on:#e6e1d6; --sk-a:#efebe3; --sk-b:#f7f5f1; --sk-node:#e0dacf; --scroll:#ddd6c9; --pulse:#eef7f1;
  --green:#5cb885; --err:#a34a2a; --err-line:#e3b9a8; --warn:#c8811c; --warn-deep:#a9701a; --neon:#e9ff3a; --on-neon:#211f1c; --grip-hover:#000;
  --sh:60,50,30; --sh2:33,31,28; --paper-rgb:253,252,250;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --disp:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;

  /* Basis: Luminex' logogrøn #5cb885 = hsl(147,39%,54%). Forecast-skalaen går fra en dæmpet gul
     for den mindst sandsynlige mulighed til logogrønt for den mest; de fire trin herunder er dem
     tones.js regner ud for en liste med fire muligheder (.s-forecast_<rang> laves dér, ikke her).
     Ordre er blå, faktura violet, umarkeret grå. */
  --tone-forecast_low:#dfbf6d; --tone-forecast_medium_low:#babf68; --tone-forecast_medium_high:#8ebd72; --tone-forecast_high:#5cb885;
  --tone-in_order:#4a83b5; --tone-invoiced:#8666b2; --tone-unmarked:#b6afa3;
}
.s-in_order{--tone:var(--tone-in_order);--deep:#19456b;--tint:#e6eff7;--row:#f5f9fb;--chk:#fff}
.s-invoiced{--tone:var(--tone-invoiced);--deep:#3c1f65;--tint:#ede8f5;--row:#f8f6fb;--chk:#fff}
.s-unmarked{--tone:var(--tone-unmarked);--deep:var(--ink2);--tint:var(--tint-grey);--row:var(--row-alt);--chk:#fff}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-y:scroll;scrollbar-gutter:stable}
body{background:var(--bg);display:flex;justify-content:center;padding:26px;
  font-family:var(--sans);color:var(--ink);
  font-feature-settings:'tnum' 1,'cv05' 1,'ss01' 1;-webkit-font-smoothing:antialiased}
.page{width:1180px;max-width:100%;background:var(--paper);padding:34px 40px 36px;
  box-shadow:0 1px 3px rgba(var(--sh),.09),0 12px 34px rgba(var(--sh),.07)}
/* New data has landed on a page already showing data (app.js pulse): a green glow expands from the
   box and fades while the paper tints for a moment. Under reduced motion the tint alone. */
.page.pulse{animation:pling 1.1s cubic-bezier(.2,.7,.2,1)}
@keyframes pling{
  0%{box-shadow:0 0 0 0 rgba(92,184,133,.55),0 1px 3px rgba(var(--sh),.09),0 12px 34px rgba(var(--sh),.07);background:var(--pulse)}
  35%{background:var(--pulse)}
  100%{box-shadow:0 0 0 30px rgba(92,184,133,0),0 1px 3px rgba(var(--sh),.09),0 12px 34px rgba(var(--sh),.07);background:var(--paper)}}
@media (prefers-reduced-motion:reduce){
  .page.pulse{animation:pling-still 1.1s ease-out}
  @keyframes pling-still{0%,35%{background:var(--pulse)}100%{background:var(--paper)}}}

/* ---- header ---- */
.head{padding-bottom:0}
.logo{height:26px;width:auto;flex:none;display:block;fill:var(--green)}
h1{font-family:var(--serif);font-size:34px;font-weight:500;letter-spacing:-.005em;line-height:1}

/* ---- periodevælger: the timeline's readout line; the bar itself is styled at the end of the file ---- */
/* ---- saved views (2026-09-16): the chips under the title, the save popover beside them (js/views.js) ---- */
.views{position:relative;min-width:0}
.vchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.vchip{font:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;padding:5px 12px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);color:var(--ink3);cursor:pointer;transition:color .12s,background .12s,border-color .12s}
.vchip:hover{color:var(--ink);background:var(--surface2);border-color:var(--line2)}
.vchip.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vchip.sel:hover{background:var(--ink2);border-color:var(--ink2)}
.vchip.mod{background:var(--paper);color:var(--ink);border-style:dashed;border-color:var(--ink3)}
.vchip.mod::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-left:7px;vertical-align:1px}
.vchip.add{background:none;border-style:dashed;color:var(--muted);padding:3px 10px;font-size:15px;line-height:1;font-weight:500}
.vchip.add:hover{color:var(--ink);background:var(--surface)}
/* The current chip and its edit button as one pill: the button hangs on the chip's right edge */
.vpair{display:inline-flex;align-items:stretch}
.vpair .vchip{border-top-right-radius:0;border-bottom-right-radius:0}
.vedit{display:inline-flex;align-items:center;justify-content:center;width:26px;padding:0;border:1px solid var(--line);border-left:0;border-radius:0 14px 14px 0;
  background:var(--surface);color:var(--ink3);cursor:pointer;transition:color .12s,background .12s,border-color .12s}
.vpair.sel .vedit{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:inset 1px 0 0 rgba(255,255,255,.18)}
.vpair.sel .vedit:hover{background:var(--ink2)}
.vpair.mod .vedit{background:var(--paper);color:var(--ink);border-style:dashed;border-color:var(--ink3)}
.vpair.mod .vedit:hover{background:var(--surface)}
.vedit:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.vchip:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.vpop{position:absolute;z-index:5;top:100%;left:0;margin-top:2px;width:320px;padding:14px 16px 12px;background:var(--paper);
  border:1px solid var(--line);border-radius:4px;box-shadow:0 8px 28px rgba(var(--sh),.14),0 1px 3px rgba(var(--sh),.08)}
.vpop label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:6px}
.vpop input{width:100%;font:inherit;font-size:13.5px;padding:7px 10px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink)}
.vpop input:focus{outline:none;border-color:var(--line4)}
.vact{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vbtn{font:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;padding:5px 11px;border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--ink2);cursor:pointer}
.vbtn:hover{background:var(--surface2);color:var(--ink)}
.vbtn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vbtn.primary:hover{background:var(--ink2)}
.vbtn.danger{margin-left:auto}
.vbtn.quiet.danger{color:var(--muted)}
.vbtn.quiet.danger:hover{color:var(--err);background:none}
.vbtn.quiet{background:none;border-color:transparent;color:var(--muted)}
.vbtn:disabled{opacity:.45;cursor:default}
.vhint{margin:8px 0 0;min-height:1em;font-size:11.5px;line-height:1.4;color:var(--muted)}
.range{padding:12px 0 10px;border-bottom:1px solid var(--hair)}
.rline{display:flex;align-items:baseline;gap:12px;min-height:22px;margin-bottom:6px}
.rval{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.005em;line-height:1.2}
.rsub{font-size:12px;color:var(--muted);line-height:1.2;font-feature-settings:'tnum' 1}
.warn.lead{margin-left:0;margin-right:5px}

/* ---- panels ---- */
.grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:26px;margin-top:20px}
.cap{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;margin-bottom:14px}
.cap.scoped{border-left:3px solid var(--ink);padding-left:9px;margin-left:-12px}
.panel{display:flex;flex-direction:column;min-width:0}
.panel + .panel{padding-left:26px;border-left:1px solid var(--hair)}
.gauge{display:block;overflow:visible}

.samlet{display:flex;align-items:center;gap:26px;flex:1}
.bigwrap{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px}
.big{position:relative;padding-bottom:24px}
.showall{font:inherit;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  color:var(--ink3);background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:5px 13px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.showall:hover{background:var(--surface2);color:var(--ink);border-color:var(--line2)}
.showall.off{visibility:hidden;pointer-events:none}
.bigv{position:absolute;left:0;right:0;bottom:0;text-align:center}
.bigv b{display:block;font-family:var(--disp);font-size:36px;font-weight:600;
  letter-spacing:-.025em;line-height:1;color:var(--ink)}
.bigv > span{display:block;min-height:13px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-top:8px}
.bigv .u{display:inline;text-transform:none;margin-top:0;color:inherit}

.legcol{flex:1;display:flex;flex-direction:column;min-width:0}
.legend{display:flex;flex-direction:column;gap:2px}
.lg{display:grid;grid-template-columns:19px 1fr auto;align-items:center;gap:10px;
  padding:6px 11px 6px 9px;background:var(--tint);border-radius:3px;cursor:pointer;
  border:1px solid color-mix(in srgb, var(--tone) 34%, transparent);
  transition:background .12s,border-color .12s}
.lg.off{background:transparent;border-color:transparent}
.lg.off .lgn{color:var(--muted)}
.lg.off .lgv{color:var(--faint)}
.cb{width:19px;height:19px;display:grid;place-items:center;border-radius:3px;
  background:var(--tone);color:var(--chk,#fff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.lg.off .cb{background:transparent;color:transparent;box-shadow:inset 0 0 0 1px var(--line3)}
.lgn{font-size:13.5px;font-weight:450;color:var(--ink2)}
.u{font-size:11px;font-weight:500;letter-spacing:.01em;opacity:.5;margin-left:.32em}
.bigv .u{font-size:13px}
.lgv{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--deep);letter-spacing:-.015em}
.unit{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  margin-top:12px;text-align:right}

.slist{flex:1;min-height:0;display:flex;flex-direction:column}
.swrap{position:relative;flex:1;min-height:140px}
.swrap::after{content:'';position:absolute;left:0;right:0;bottom:0;height:26px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(var(--paper-rgb),0),var(--paper))}
#sellers{position:absolute;inset:0;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
#sellers::-webkit-scrollbar{width:8px}
#sellers::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:4px}
#sellers::-webkit-scrollbar-track{background:transparent}
.shead{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
  padding:0 18px 10px 10px;border-bottom:1px solid var(--line)}
.shead .th{font-size:11px;letter-spacing:.085em;text-transform:uppercase;color:var(--muted);
  font-weight:600;white-space:nowrap}
.shead .r{justify-self:end}
.sr{display:grid;grid-template-columns:80px auto 1fr auto;align-items:center;gap:0 12px;
  padding:7px 8px 7px 10px;border-bottom:1px solid var(--hair);cursor:pointer;
  transition:background .12s,opacity .12s,box-shadow .12s}
.sr:hover{background:var(--row-alt)}
.sr.sel{background:var(--card);box-shadow:inset 3px 0 0 var(--ink),0 1px 2px rgba(var(--sh),.05)}
.sr.dim{opacity:.42}
.sini{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink3);
  background:var(--surface);border-radius:3px;padding:3px 8px}
.sr.sel .sini{background:var(--surface3);color:var(--ink)}
.sname{font-size:13px;color:var(--ink3)}
.samt{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink2)}
.sr.sel .samt{color:var(--ink)}

/* ---- table ---- */
table{width:100%;border-collapse:collapse;margin-top:26px}
thead th{font-size:11px;letter-spacing:.085em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:0 7px 10px;border-bottom:1px solid var(--line);text-align:left;
  white-space:nowrap}
th.c{text-align:center} th.r{text-align:right}
.th{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.th{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.th .chev{color:var(--sep);flex:none;margin-top:1px;transition:transform .12s}
.th.on{color:var(--ink2)}
.th.on .chev{color:var(--ink2)}
.th.asc .chev{transform:rotate(180deg)}
tbody tr{background:var(--row)}
tbody td{padding:9px;font-size:13px;color:var(--ink2);border-bottom:1px solid var(--hair)}
td.c{text-align:center} td.r{text-align:right}
td.no{font-size:12.5px;color:var(--muted);letter-spacing:.01em}
td.pj{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.3}
.cu{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:2px}
.ini{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--ink3);
  background:var(--surface);border-radius:3px;padding:3px 8px}
.chip{display:inline-grid;grid-template-columns:8px 1fr;align-items:center;gap:9px;
  width:112px;white-space:nowrap;
  padding:5px 10px;border-radius:3px;font-size:12.5px;font-weight:600;letter-spacing:.005em;
  color:var(--deep);background:var(--tint);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.chip i{width:8px;height:8px;border-radius:2px;background:var(--tone)}
/* An unmarked project case: the triangle stands where the square would (table.js / details.js stateMark) */
.chip .warn.mark{margin:0 0 0 -2px;vertical-align:0;line-height:0}
.chip .warn.mark svg{width:12px;height:12px}
.chip b{font-weight:600;text-align:center;padding-right:8px}
.when{font-size:12.5px;color:var(--ink3);letter-spacing:.005em;line-height:1.25}
.whk{display:block;font-size:11px;color:var(--faint);letter-spacing:.02em;margin-top:2px}
.when.est{color:var(--muted)}
.ty{font-size:12px;color:var(--ink3);letter-spacing:.005em}
.warn{display:inline-block;color:var(--warn);margin-left:5px;vertical-align:-2px;cursor:help}
.warn svg{display:block}
.when.undated .whk{color:var(--warn-deep)}
td.amt{font-family:var(--disp);font-size:14.5px;font-weight:600;color:var(--deep);letter-spacing:-.012em}
tfoot td{padding:13px 9px 0;text-align:center;font-size:12px;color:var(--muted);letter-spacing:.005em}
.empty{padding:40px 9px 8px;text-align:center;font-size:13px;color:var(--muted)}

/* ---- beyond the mockup: the footer's second line, the wait state ---- */
.foot-meta{display:block;margin-top:5px;color:var(--faint)}
.foot-meta.err{color:var(--err)}
.empty.wait{color:var(--ink3)}

/* ---- the case modal ---- */
.idbtn{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;border-bottom:1px solid transparent;letter-spacing:inherit}
.idbtn:hover{color:var(--ink);border-color:var(--faint)}
.s-rejected{--tone:#c4bcae;--deep:var(--ink3);--tint:var(--row-hover)}
#modal{position:fixed;inset:0;z-index:10;overflow-y:auto;padding:26px}
.mback{position:fixed;inset:0;background:rgba(var(--sh2),.42)}
.modal{position:relative;width:940px;max-width:100%;margin:0 auto;background:var(--paper);
  box-shadow:0 2px 6px rgba(var(--sh),.12),0 24px 60px rgba(var(--sh),.22);padding:26px 32px 28px}
.mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.mhead h2{font-family:var(--serif);font-size:26px;font-weight:500;line-height:1.1}
.mhead h2 .no{color:var(--muted);font-family:var(--sans);font-size:15px;font-weight:500;margin-left:10px;letter-spacing:.01em;white-space:nowrap}
.msub{margin-top:7px;font-size:12.5px;color:var(--ink3)}
.msub code,.det code{font-family:var(--sans);background:var(--surface);border-radius:3px;padding:2px 6px;color:var(--ink2);font-size:12px}
.close{font:inherit;font-size:20px;line-height:1;color:var(--muted);background:none;border:0;cursor:pointer;padding:2px 6px}
.close:hover{color:var(--ink)}
.merr{padding:26px 0 8px;font-size:13.5px;color:var(--ink3)}
.graph{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 78px;margin-top:22px}
.graph .col{display:flex;flex-direction:column;gap:12px;min-width:0}
.graph .col .cap{display:flex;justify-content:space-between;margin-bottom:4px}
.graph .col .cap span{color:var(--faint);letter-spacing:.02em}
.node{position:relative;border:1px solid color-mix(in srgb,var(--tone) 40%,transparent);background:var(--tint);
  border-radius:4px;padding:9px 11px 9px 13px;cursor:pointer;transition:box-shadow .12s,border-color .12s,opacity .12s}
.node::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tone);border-radius:4px 0 0 4px}
.node:hover{border-color:var(--tone)}
.node.sel{box-shadow:0 0 0 2px var(--ink);border-color:var(--ink)}
.node.dim{opacity:.5}
.nk{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--ink)}
.nk .kind{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.star{font-size:11px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:3px;padding:1px 6px;font-weight:600}
.nc{font-size:12px;color:var(--ink3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf{display:flex;align-items:center;justify-content:space-between;margin-top:7px;gap:8px}
.node .chip,.det .chip{display:inline-flex;align-items:center;gap:6px;width:auto;font-size:11.5px;font-weight:600;color:var(--deep);
  background:var(--card);border-radius:3px;padding:3px 8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);grid-template-columns:none}
.node .chip i,.det .chip i{width:7px;height:7px;border-radius:2px;background:var(--tone)}
.node .amt{font-size:13.5px;font-weight:600;color:var(--deep);letter-spacing:-.012em}
.node .amt .u{font-size:10.5px;font-weight:500;opacity:.55;margin-left:.3em}
.node .amt.cnt{font-weight:700;color:var(--ink)}
.ghost{border:1px dashed var(--sep);background:transparent;color:var(--muted);border-radius:4px;padding:9px 11px;font-size:12px;cursor:default}
.ghost b{display:block;color:var(--ink3);font-size:12.5px}
svg.edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.edges path{fill:none;stroke:var(--line4);stroke-width:1.5;pointer-events:stroke}
.edges path.one{stroke-dasharray:4 4}
.edges path.ext{stroke:var(--sep);stroke-dasharray:2 4}
.edges path.hi{stroke:var(--ink);stroke-width:2}
.det{margin-top:26px;border-top:1px solid var(--hair);padding-top:18px}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.dhead .cap{display:flex;align-items:center;gap:10px;margin:0}
.dhead .cap b{font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600}
.dhead .hint{font-size:11.5px;color:var(--muted)}
.dact{display:flex;gap:14px;align-items:center}
.back{font:inherit;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--ink3);
  background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:5px 12px;cursor:pointer}
.back:hover{background:var(--surface2);color:var(--ink)}
.ext{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--faint);padding-bottom:1px}
.ext:hover{border-color:var(--ink)}
.kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 26px}
.kv div{min-width:0}
.kv dt{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:5px}
.kv dd{font-size:13.5px;color:var(--ink);font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.kv dd small{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}
.kv dd.big{font-size:18px;font-weight:600;letter-spacing:-.015em}
.kv dd .u{font-size:11px;font-weight:500;opacity:.55;margin-left:.3em}
.kv dd .muted{color:var(--muted);font-weight:400}
.kv dd .rule{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--ink3);background:var(--surface);border-radius:3px;padding:1px 5px}

/* ---- the search field ---- */
.search input{font:inherit;font-size:12.5px;color:var(--ink2);background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:5px 10px;width:230px;font-family:var(--disp)}
.search input:focus{outline:none;border-color:var(--line4)}
.search input::placeholder{color:var(--faint)}

/* legend labels stay on one line; the template can make them longer than the mockup expected */
.lgn{white-space:nowrap}

/* ---- modal: the graph scrolls past four cards; the skeleton while loading; the table's show-all ---- */
.gscroll{--card:80px;max-height:calc(4 * var(--card) + 3 * 12px + 34px);overflow-y:auto;margin-top:22px;
  scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.gscroll .graph{margin-top:0}
.graph .col .cap{position:sticky;top:0;z-index:2;background:var(--paper);padding-bottom:6px;margin-bottom:0}
.sk{position:relative;color:transparent;border-radius:3px;background:linear-gradient(90deg,var(--sk-a) 25%,var(--sk-b) 50%,var(--sk-a) 75%);
  background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.skt{display:inline-block;width:320px;max-width:70%;height:24px;vertical-align:middle}
.skl{display:inline-block;width:420px;max-width:90%;height:12px}
.node.sk{height:var(--card,80px);border-color:var(--hair);cursor:default}
.node.sk::before{background:var(--sk-node)}
.node.sk>*{visibility:hidden}
.kv dt.sk{width:60%;height:9px}
.kv dd.sk{width:80%;height:16px;margin-top:6px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
.showmore{font:inherit;font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:3px;padding:4px 10px;cursor:pointer;margin-left:2px}
.showmore:hover{background:var(--surface2);border-color:var(--line2)}

/* ---- modal at three cards, scrolling inside itself; counts under the number ---- */
/* three cards with room to spare, well short of a fourth: the bar appears at four or more */
.gscroll{--card:82px;max-height:calc(3 * var(--card) + 2 * 12px + 60px)}
#modal{overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
.modal{max-height:calc(100vh - 52px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
html.modal-open{overflow:hidden}
.cnt{display:block;font-size:10.5px;color:var(--faint);letter-spacing:.03em;margin-top:3px;font-feature-settings:'tnum' 1;cursor:default}
.cnt:hover{color:var(--ink3)}
/* The host is flex when shown; the hidden attribute must still win, or the transparent overlay covers the page. */
#modal[hidden]{display:none}
.dhead .cap{min-width:0}

/* ---- sticky table header: the count and the search above the column names ---- */
thead{position:sticky;top:0;z-index:3;background:var(--paper)}
th.tbarcell{padding:0 0 12px;border-bottom:0;text-align:left}
.tbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:4px}
#tcount{font-size:13px;color:var(--ink3);text-transform:none;letter-spacing:0;font-weight:400}
#tcount b{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-right:.15em}
.unit{display:none}

/* ---- one installer's offers grouped in the modal; the exact amount on hover ---- */
.cgroup{display:flex;flex-direction:column;gap:8px;padding:6px 0 6px 9px;border-left:2px solid var(--line);border-radius:2px}
.cglbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-right:2px}
.cglbl .amt{font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink3);white-space:nowrap}
.cglbl .cgn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cglbl .pick{color:var(--ink);font-weight:700;margin-left:6px}
.cgroup.chosen{border-left-color:var(--ink)}
.mtype{font-weight:600;color:var(--ink2)}
.kr{cursor:help}

/* ---- headline breakdown and the search field's magnifier ---- */
#tcount .brk{margin-left:8px;color:var(--faint);font-size:12px}
.search{position:relative;display:inline-flex;align-items:center}
.search .mag{position:absolute;left:9px;color:var(--faint);pointer-events:none}
.search input{padding-left:30px}
.search input:focus + .mag,.search:focus-within .mag{color:var(--ink3)}

/* ---- modal: graph or list, the viewer's choice (details.js keeps it in localStorage) ---- */
.mact{display:flex;align-items:center;gap:14px;flex:none}
.vtoggle{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.vtoggle button{font:inherit;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--ink3);
  background:var(--surface);border:0;padding:5px 11px;cursor:pointer}
.vtoggle button+button{border-left:1px solid var(--line)}
.vtoggle button:hover{color:var(--ink)}
.vtoggle button.on{background:var(--ink);color:var(--paper)}
.gscroll.list{max-height:calc(3 * var(--card) + 2 * 12px + 60px)}
.dlist{display:flex;flex-direction:column;gap:16px}
.lsec{display:flex;flex-direction:column;gap:6px;min-width:0}
.lsec .cap{position:sticky;top:0;z-index:2;background:var(--paper);display:flex;justify-content:space-between;padding-bottom:4px;margin-bottom:0}
.lsec .cap span{color:var(--faint);letter-spacing:.02em}
.lsec .cgroup{gap:6px;padding:5px 0 5px 9px}
.node.lrow{display:grid;grid-template-columns:150px minmax(0,1fr) 190px 82px 96px;align-items:center;gap:14px;padding:7px 11px 7px 13px}
.lrow .ldt{font-size:12px;color:var(--ink3);white-space:nowrap;text-align:right;font-feature-settings:'tnum' 1;cursor:help}
.lrow .lid{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;font-feature-settings:'tnum' 1}
.lrow .lid .kind{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.lrow .lhd{font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .lcu{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .amt{text-align:right;white-space:nowrap}
.lrow.sk{height:34px}

/* ---- modal refinements: the auto view's effective choice ---- */
.vtoggle button.eff{background:var(--toggle-on);color:var(--ink)}
.star{cursor:help}
.msub code{cursor:help}

/* ---- the title opens the case like the number does; the counts sit under the number (.cnt above) ---- */
.idbtn.ttl{text-align:left;font-weight:inherit;font-size:inherit;line-height:inherit}

/* ---- the seller gauge's share of the total, in the hollow of the arc ---- */
.gauge .glbl{font-family:var(--disp);font-size:11px;font-weight:600;fill:var(--ink3);letter-spacing:-.01em;font-feature-settings:'tnum' 1}
.sr.sel .gauge .glbl{fill:var(--ink)}

/* ---- the big figure's baseline on the gauge's bottom line, the unit and the scoped name beneath ---- */
/* A zero-height line at the gauge's bottom edge; the number is an inline-block on that line's
   baseline, so its digits stand on the edge whatever the font's metrics. */
.big{padding-bottom:42px}
.bigv{top:118px;bottom:auto;height:0;line-height:0}   /* legend.js shifts it so the digits' baseline meets the edge */
.bigv b{display:inline-block;line-height:1}
.bigv > span{position:absolute;left:0;right:0;top:25px;margin:0;min-height:0;line-height:1.2}
.bigv .bigu{top:7px;font-size:12.5px;line-height:1;letter-spacing:.02em;text-transform:none;color:var(--muted)}

/* ---- the seller panel's header is one row: the title, then the two sortable column names ---- */
.shead{grid-template-columns:80px 48px 1fr auto;gap:0 12px;align-items:baseline}
.shead .cap{grid-column:1 / 3;margin:0;white-space:nowrap}
.sr{grid-template-columns:80px 48px 1fr auto}
.sini{justify-self:start}

/* ---- modal (2026-09-13): a draft or rejected offer and a cancelled order are paler in both views;
   the document header is one unit in two columns (kind over number, heading over customer); in a
   panel the dates open a row of their own and the seller takes the last column, gaps and all ---- */
.node.inactive{opacity:.55;filter:saturate(.35)}
.node.inactive.dim{opacity:.3}
.node.inactive.sel{opacity:1;filter:saturate(.6)}
.dtitle{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 16px;align-items:baseline;min-width:0}
.dtitle .dkind{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}
.dtitle .dno{font-size:13.5px;font-weight:600;color:var(--ink);font-feature-settings:'tnum' 1;white-space:nowrap}
.dtitle .dhd{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtitle .dcu{font-size:12.5px;color:var(--ink3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv .first{grid-column:1}
.kv .last{grid-column:-2}

/* ---- the period timeline (2026-09-13, js/timeline.js): today in the centre, the calendar rows
   above the bar, the months' amounts by state inside it, the two handles with their flags below ---- */
svg.tl{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans);font-feature-settings:'tnum' 1;
  user-select:none;-webkit-user-select:none;touch-action:none}
.tl .cell{fill:transparent;cursor:pointer}
/* A press on a cell starts a sideways drag over its row (timeline.js): the cursor says so until the release */
.range.selecting,.range.selecting .tl,.range.selecting .tl *{cursor:ew-resize}
.tl .cell:hover,.tl .cell.hover{fill:rgba(var(--sh2),.06)}
.tl .cell.now{fill:var(--surface2)}
.tl .cell.now:hover,.tl .cell.now.hover{fill:var(--cell-now-hover)}
.tl .lbl{fill:var(--ink3);pointer-events:none;font-weight:500}
.tl .lbl.year{font-size:11.5px;font-weight:600;letter-spacing:.08em;fill:var(--ink2)}
.tl .lbl.quarter{font-size:10.5px;font-weight:600;letter-spacing:.06em;fill:var(--muted)}
.tl .lbl.month{font-size:10.5px}
.tl .lbl.now{fill:var(--ink);font-weight:600}
.tl .sep{stroke:var(--hair);stroke-width:1}
.tl .sep.year{stroke:var(--sep)}
.tl .track{fill:var(--track)}
.tl .tline{stroke:var(--tick-line);stroke-width:1}
.tl .tline.quarter,.tl .tline.year{stroke:var(--sep2)}
.tl .dens{opacity:.92;pointer-events:none}
.tl .denshit{fill:transparent;cursor:pointer}
.tl .denshit:hover,.tl .denshit.hover{fill:rgba(var(--sh2),.06)}
.tl .weeknow{fill:rgba(var(--sh2),.08);pointer-events:none}
.tl .tick{stroke:var(--tick);stroke-width:1}
.tl .tick.week{stroke:var(--tick)}   /* every Monday is a snap point since 2026-09-16, so the week ticks carry the plain weight */
.tl .tick.month{stroke:var(--line4)}
.tl .tick.quarter,.tl .tick.year{stroke:var(--ink3);stroke-width:1.5}
.tl .today{stroke:var(--ink);stroke-width:1.5;pointer-events:none}
.tl .todaylbl{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;fill:var(--ink);cursor:pointer}
.tl .todaylbl:hover{text-decoration:underline}
.tl .dimmer{fill:rgba(var(--paper-rgb),.62);pointer-events:none}
.tl .selframe{fill:transparent;stroke:var(--ink);stroke-width:1.5;pointer-events:none}
.tl .handle{cursor:ew-resize;outline:none}
.tl .handle .hit{fill:transparent}
.tl .handle .grip{fill:var(--ink)}
.tl .handle:hover .grip{fill:var(--grip-hover)}
.tl .handle:focus-visible .grip{stroke:var(--green);stroke-width:2}
.tl .gripline{stroke:rgba(255,255,255,.55);stroke-width:1}
.tl .flag{font-size:11.5px;font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.tl .fade{pointer-events:none}

/* ---- the case-type filter above the legend (2026-09-13): a legend-styled row with a chevron in
   the check's place and the chosen types in words; its checklist opens beneath as a small panel ---- */
.tsel{position:relative;margin-bottom:2px}
.tsel .lg{--tone:var(--faint);--deep:var(--ink2);--tint:var(--tint-grey);--chk:#fff}
.tsel .tsum{background:var(--paper);border-color:var(--line)}
.tsel .tsum:hover,.tsel .tsum.open{border-color:var(--line2);background:var(--surface)}
.tsel .tsum .lgn{color:var(--ink2)}
.tsel .cb.chev{background:transparent;color:var(--ink3);box-shadow:inset 0 0 0 1px var(--line3);transition:transform .12s}
.tsel .tsum.open .cb.chev{transform:rotate(180deg)}
.tsel .tsum:focus-visible,.tsel .trow:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.tlist{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:6;display:flex;flex-direction:column;gap:2px;padding:6px;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:0 2px 6px rgba(var(--sh),.08),0 12px 28px rgba(var(--sh),.14)}
.tlist .trow{--tone:var(--ink);--deep:var(--ink);--tint:var(--surface);--chk:#fff}
.tlist .trow.last{cursor:not-allowed}
.tlist .trow.last .cb{opacity:.6}

/* ---- the document panel keeps one line per value and per note, so its two rows have one height
   whatever the document; the forecast under an offer's state reads in ink, "Ingen forecast" in grey ---- */
.kv.doc dd,.kv.doc dd small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
/* the forecast under an offer's state is a chip in the table's tinted look, in the option's tone (grey for none) */
.det .chip.fc{margin-top:5px;background:var(--tint);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
/* the type column's values are chips too, one neutral colour for all, no tone square */
td .chip.ty{display:inline-block;width:auto;max-width:100%;padding:4px 9px;font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--ink3);
  background:var(--surface);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}

/* ---- a row is one click and lights its title wherever it is hovered, except on the counts and the
   tooltips; the counts sit centred under the number; a customer group is a <tbody> with a header row
   that sticks under the column names while it is unfolded (2026-09-13) ---- */
tbody tr[data-key]{cursor:pointer}
tbody tr[data-key]:hover:not(:has(.cnt:hover,.warn:hover,.kr:hover)) .idbtn.ttl{color:var(--ink);border-color:var(--faint)}
.idw{display:inline-flex;flex-direction:column;align-items:center}
.idw .cnt{margin-top:2px}
.tlist .tcap{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:6px 0 2px;padding:8px 9px 0;border-top:1px solid var(--hair)}
.tlist .trow.gsel{--tone:var(--ink3)}
  background:none;color:var(--faint);cursor:pointer;transition:color .12s,background .12s,transform .2s}

/* ---- the page skeleton (2026-09-16): js/skeleton.js draws the layout's shapes in the modal's .sk shimmer
   while there is nothing to show — before the first snapshot, and after a resync the viewer asked for ---- */
.skb{display:inline-block;height:12px;vertical-align:middle}
.skv{display:inline-block;width:150px;height:30px}
.skc{width:220px;height:12px}
.lg.skel{background:transparent;border-color:var(--hair);cursor:default;pointer-events:none}
.lg.skel .cb{background:transparent;box-shadow:inset 0 0 0 1px var(--hair)}
.lg.skel .lgn .skb{width:110px}
.lg.skel .lgv .skb{width:44px;height:16px}
.sr.skel{cursor:default;pointer-events:none}
.sr.skel .skg{display:block;width:72px;height:41px;border-radius:36px 36px 3px 3px}
.sr.skel .sini .skb{width:22px;height:11px}
.sr.skel .sname .skb{width:120px}
.sr.skel .samt .skb{width:44px;height:16px}
tbody.skel td{padding-top:11px;padding-bottom:11px}
tbody.skel .skb{display:block;height:11px;margin:0 auto}
tbody.skel .skb+.skb{margin-top:6px;height:8px;opacity:.7}
tbody.skel td.no .skb,tbody.skel td.pj .skb{margin-left:0}
tbody.skel td.amt .skb{margin-right:0}
/* The timeline owns its DOM and is not rewritten: its host is veiled, and a bar is drawn over it */
.range.skel{position:relative}
.range.skel>*{visibility:hidden}
.range.skel::after{content:'';position:absolute;left:0;right:0;top:26px;height:64px;border-radius:3px;
  background:linear-gradient(90deg,var(--sk-a) 25%,var(--sk-b) 50%,var(--sk-a) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
@media (prefers-reduced-motion:reduce){.range.skel::after{animation:none}}

/* the group row is a case row in grey: the unmarked tone's lightness, the hairline the other rows have */
tbody.grp>tr.grp-row>td{background:var(--row-alt);cursor:pointer;border-bottom:1px solid var(--hair)}
tbody.grp>tr.grp-row:hover>td{background:var(--row-hover)}
/* The row itself is sticky, not its cells: a sticky cell is boxed by its row and never moves, while a
   sticky row is boxed by its <tbody>, so the header rides along only while its own cases scroll. */
tbody.grp.open>tr.grp-row{position:sticky;top:var(--thead-h,0px);z-index:2}
tbody.grp.open.past>tr.grp-row{position:static}   /* table.js: the group's last case has scrolled above the header */
/* The browser must not re-anchor the scroll when a header switches between sticky and static, or the
   switch moves the page, which moves the group past its line, which switches it back — a loop. */
table{overflow-anchor:none}
tbody.grp.open>tr.grp-row>td{box-shadow:0 1px 0 var(--line)}
.gtitle{font-size:13.5px;font-weight:500;color:var(--ink)}
.gcount{font-weight:400;color:var(--muted);font-size:12.5px}
.gchev{display:inline-block;color:var(--ink3);transition:transform .12s;transform:rotate(-90deg);margin-left:4px}
.gchev.open{transform:none}
tbody.grp>tr.sub>td:first-child{box-shadow:inset 3px 0 0 var(--line)}

/* The login page (Pages/login.html). Here rather than in the page: the content-security policy allows no inline style.
   The card is a column centred on its own height, so when #entry grows from nothing the logo above it is
   pushed up as the card recentres — the "move up" is layout, not a second animation to keep in step. */
body.plain{background:#fff;position:relative;overflow:hidden}   /* the login page: plain white, no box around the logo and the field */
/* The glow (js/login.js): a soft disc in the Luminex green, centred on the password field, that grows out once the field is there */
.glow{position:fixed;left:50%;top:50%;width:1800px;height:1800px;margin:-900px 0 0 -900px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(92,184,133,.40) 0%,rgba(92,184,133,.17) 26%,rgba(92,184,133,.05) 48%,rgba(92,184,133,0) 68%);
  transform:scale(0);opacity:0;transition:transform 1.8s cubic-bezier(.2,.7,.2,1),opacity .7s ease}
.glow.on{transform:scale(1);opacity:1}
@media (prefers-reduced-motion:reduce){.glow{transition:opacity .7s ease}}
.page.login{position:relative;z-index:1;width:420px;min-height:320px;padding:34px 40px 30px;margin-top:10vh;align-self:flex-start;background:none;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.login .mark{display:block;border:0;background:none;padding:14px 18px;cursor:pointer;border-radius:6px}
.login .mark:focus-visible{outline:2px solid var(--line4);outline-offset:2px}
.login .logo{height:64px;width:auto;fill:var(--green);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.login .mark:hover .logo,.login .mark:focus-visible .logo{transform:scale(1.07)}
.login.open .mark{cursor:default}
.login.open .mark:hover .logo{transform:none}
.login .entry{width:100%;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease .12s}
.login.open .entry{max-height:320px;opacity:1;padding-top:18px}
.login label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:8px}
.login input{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink)}
.login input:focus{outline:none;border-color:var(--line4)}
.login form button{margin-top:16px;width:100%;font:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;padding:9px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:var(--paper);cursor:pointer}
.login .err{margin-top:14px;font-size:12.5px;color:var(--err)}
.login .note{margin:0 0 18px;font-size:12.5px;line-height:1.45;color:var(--ink3)}
@media (prefers-reduced-motion:reduce){.login .logo,.login .entry{transition:none}}

/* ---- the header (2026-09-16, tasks/luminex-header-v2.html): two rows, the second a band across the page ---- */
.row1{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 0 16px}
.row1 .t{display:flex;align-items:center;gap:14px;min-width:0}
.row1 .right{display:flex;align-items:center;flex:none}
.row2{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 -40px;padding:10px 40px;background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.tools{display:flex;align-items:center;gap:10px;flex:none}
/* PREVIEW: a neon label with a light streak that sweeps across now and then */
.preview{position:relative;display:inline-block;overflow:hidden;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-neon);
  background:var(--neon);padding:3px 8px 2px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.05);cursor:default}
.preview::after{content:'';position:absolute;top:-40%;bottom:-40%;left:-60%;width:36%;transform:skewX(-22deg);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%);animation:shine 2.6s ease-in-out 4}
@keyframes shine{0%{left:-60%}30%{left:130%}100%{left:130%}}
/* The label has said its piece after four sweeps: the streak stops and the tag settles, dimmed, where it is */
.preview{animation:settle 1.2s ease 10.4s forwards}
@keyframes settle{to{opacity:.5}}
/* who is logged in, and the way out: two lines beside the logo, hidden when nobody is (Auth:Mode None) */
.who{display:flex;flex-direction:column;align-items:flex-end;gap:1px;margin-right:22px;padding-right:22px;border-right:1px solid var(--hair)}
.who[hidden]{display:none}   /* the attribute alone loses to the flex display above */
.who .name{font-size:12.5px;font-weight:500;color:var(--ink2);white-space:nowrap}
.logout button{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11px;letter-spacing:.02em;padding:2px 4px;margin-right:-4px;border:0;border-radius:3px;background:none;color:var(--faint);cursor:pointer;transition:color .12s,background .12s}
.logout button:hover{color:var(--ink3);background:var(--surface)}
.logout button:focus-visible{outline:2px solid var(--green);outline-offset:1px}
/* the gear: opens the settings modal (js/settings.js) */
.gear{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:3px;
  background:none;color:var(--muted);cursor:pointer;transition:color .12s,background .12s,transform .2s}
.gear:hover{color:var(--ink3);background:var(--paper)}
.gear.on{color:var(--ink2)}
.gear.on svg{transform:rotate(45deg)}
.gear svg{transition:transform .2s}
.gear:focus-visible{outline:2px solid var(--green);outline-offset:1px}
/* the resync chip: "Data hentet fra <Rackbeat> kl. 14:56"; the mark grey until hover or a sweep; the arrows spin while one is on */
.upd{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;color:var(--ink3);padding:4px 11px 4px 9px;border-radius:14px;border:1px solid var(--line);background:var(--paper);cursor:pointer;transition:border-color .12s,color .12s}
.upd .updtext{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.upd b{font-weight:600;color:var(--ink2)}
.upd .arr{display:inline-flex;color:var(--muted)}
:root[data-theme=dark] .rb.light,:root:not([data-theme=dark]) .rb.dark{display:none}   /* one mark per theme (app.js RACKBEAT) */
.upd .rb{height:13px;width:auto;display:block;filter:grayscale(1);opacity:.62;transition:filter .18s,opacity .18s;transform:translateY(.5px)}
.upd:hover{border-color:var(--line2);color:var(--ink)}
.upd:hover .rb,.upd.busy .rb{filter:none;opacity:1}
.upd.busy{cursor:default}
.upd.busy .arr svg{animation:spin 1s linear infinite}
.upd.err{border-color:var(--err-line);color:var(--err)}
.upd.err b{color:var(--err)}
.upd:focus-visible{outline:2px solid var(--green);outline-offset:1px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.upd.busy .arr svg{animation:spin 3s linear infinite}.preview::after{animation:none}}

/* ---- the dark theme (2026-09-16): warm dark greys under the same Luminex green; js/theme.js and js/settings.js set data-theme ---- */
:root[data-theme=dark]{color-scheme:dark;
  --bg:#141311; --paper:#1d1c19; --surface:#25231f; --surface2:#2d2a25; --surface3:#34312b; --line:#3a3731; --hair:#2b2925; --track:#33302a;
  --row-alt:#22201c; --row-hover:#2a2823; --card:#2a2824; --tint-grey:#2a2823;
  --ink:#f0ede6; --ink2:#d6d1c7; --ink3:#b1ab9f; --muted:#8a8478; --faint:#655f56;
  --line2:#4b473f; --line3:#403c35; --line4:#6c6659; --tick:#4f4a42; --tick-week:#3e3a33; --tick-line:#39352f; --sep:#4f4a42; --sep2:#5a544b;
  --cell-now:#2f2c26; --cell-now-hover:#38342d; --toggle-on:#3e3a33; --sk-a:#2a2823; --sk-b:#34312b; --sk-node:#3a3731; --scroll:#4b473f; --pulse:#1f2b24;
  --err:#e08d6f; --err-line:#6e3d2c; --warn:#e2a64f; --warn-deep:#f0c274; --grip-hover:#fff;
  --sh:0,0,0; --sh2:0,0,0; --paper-rgb:29,28,25;
  --tone-unmarked:#7a7469; --tone-in_order:#5b96c8; --tone-invoiced:#9b7fc9}
:root[data-theme=dark] .s-in_order{--deep:#a9cdf0;--tint:#1e2c3a;--row:#1c2229}
:root[data-theme=dark] .s-invoiced{--deep:#c9b4ec;--tint:#2a2438;--row:#221f28}
:root[data-theme=dark] .mback,:root[data-theme=dark] .sback{background:rgba(0,0,0,.6)}

/* ---- the settings modal (2026-09-16, js/settings.js) ---- */
#settings{position:fixed;inset:0;z-index:12;display:flex;align-items:flex-start;justify-content:center;padding:70px 26px}
#settings[hidden]{display:none}
.sback{position:absolute;inset:0;background:rgba(var(--sh2),.42)}
.sbox{position:relative;width:440px;max-width:100%;background:var(--paper);border-radius:6px;padding:20px 24px 16px;
  box-shadow:0 18px 50px rgba(var(--sh),.22),0 1px 3px rgba(var(--sh),.08)}
.sbox h2{font-family:var(--serif);font-size:24px;font-weight:500;line-height:1.1;margin-bottom:14px}
.sbox .close{position:absolute;top:12px;right:12px}
.sgroup{padding:12px 0 6px;border-top:1px solid var(--hair)}
.sgroup .cap{margin-bottom:8px}
.sopt{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px;color:var(--ink2);cursor:pointer}
.sopt input{width:15px;height:15px;accent-color:var(--green);cursor:pointer}
.shint{font-size:11.5px;color:var(--muted);line-height:1.45;margin:6px 0 4px}
.sradios{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.sradio{font-size:12px;font-weight:600;letter-spacing:.03em;padding:6px 14px;color:var(--ink3);background:var(--surface);cursor:pointer}
.sradio+.sradio{border-left:1px solid var(--line)}
.sradio:hover{color:var(--ink)}
.sradio.on{background:var(--ink);color:var(--paper)}
.sradio input{position:absolute;opacity:0;width:0;height:0}