/* Runner status page, option B (Rack). Styles the shell in index.html and the DOM that app.js builds; light and dark follow prefers-color-scheme only. */
/* Archivo is two Google Fonts &text= subsets (explorations/FONTS.md): body (wght 400-700) and display (wdth 72-100, wght 400-700) for the H1 and runner names. */
@font-face{font-family:'Archivo';font-weight:400 700;font-stretch:100%;font-display:swap;src:url(archivo.woff2) format('woff2')}
@font-face{font-family:'Archivo Display';font-weight:400 700;font-stretch:72% 100%;font-display:swap;src:url(archivo-display.woff2) format('woff2')}
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:98.5%;ascent-override:89.1%;descent-override:21.3%;line-gap-override:0%}
:root{color-scheme:light dark;--color-bg:#f4f4f2;--color-surface:#fff;--color-surface-2:#e8e7e4;--color-text:#141316;--color-text-muted:#56545b;--color-error:#b42318;--color-success:#3f6b1e;--color-focus:#141316;
--hair:rgb(20 19 22/9%);--hair-2:rgb(20 19 22/16%);--core-hi:rgb(255 255 255/75%);--core-shadow:0 1px 2px rgb(20 19 22/5%),0 18px 32px -22px rgb(20 19 22/28%);
--chassis:#e2e4e8;--chassis-edge:#c6cad1;--plate-hi:#f3f4f6;--plate-lo:#d6dae0;--ear:#c3c8d0;--screw:#9aa1ab;--vent:#8e959f;--led-busy:#1f9d55;--led-ring:rgb(20 19 22/35%);
--font:'Archivo','Archivo Fallback','Segoe UI',system-ui,sans-serif;--font-d:'Archivo Display','Archivo','Archivo Fallback','Segoe UI',system-ui,sans-serif;--gutter:clamp(16px,5vw,56px);--ease:cubic-bezier(.32,.72,0,1)}
@media (prefers-color-scheme:dark){:root{--color-bg:#121114;--color-surface:#1b1a1e;--color-surface-2:#252328;--color-text:#eeedf0;--color-text-muted:#aba9b1;--color-error:#ff8a75;--color-success:#a9d46e;--color-focus:#eeedf0;
--hair:rgb(255 255 255/8%);--hair-2:rgb(255 255 255/14%);--core-hi:rgb(255 255 255/6%);--core-shadow:0 1px 2px rgb(0 0 0/30%),0 18px 32px -22px rgb(0 0 0/80%);
--chassis:#16181c;--chassis-edge:#2b2f36;--plate-hi:#2c3038;--plate-lo:#1f2228;--ear:#353a43;--screw:#5d646f;--vent:#0f1114;--led-busy:#3ddc84;--led-ring:rgb(255 255 255/22%)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--color-bg);color:var(--color-text);font:400 1rem/1.5 var(--font);font-synthesis:none;overflow-wrap:break-word}
h1,h2,h3,p,dl,dd,ol{margin:0}
ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.num{font-variant-numeric:tabular-nums}
.t-bad{color:var(--color-error);font-weight:600}
.t-unk{color:var(--color-text-muted)}
/* Head: a condensed display H1, a one-line lead, and the live pill (the page's one live region). */
.head{display:grid;gap:14px;padding-block:clamp(36px,8vw,104px) clamp(28px,5vw,56px)}
h1{font-family:var(--font-d);font-weight:650;font-stretch:72%;font-size:clamp(3rem,1.7rem + 5.2vw,5.75rem);line-height:.92;letter-spacing:-.02em}
.lead{color:var(--color-text-muted);font-size:clamp(1rem,.95rem + .3vw,1.1875rem);max-width:46ch}
.updated{display:none;justify-self:start;align-items:center;flex-wrap:wrap;gap:2px 8px;min-height:36px;padding:6px 14px 6px 12px;border-radius:999px;background:var(--color-surface);box-shadow:0 0 0 1px var(--hair-2);font-size:.9375rem;color:var(--color-text-muted)}
.js .updated{display:inline-flex}
.updated strong{color:var(--color-text);font-weight:600}
.sig{flex:none;width:9px;height:9px;border-radius:50%;background:var(--color-success);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-success) 22%,transparent)}
.sig--ring{background:transparent;box-shadow:inset 0 0 0 2px var(--color-text-muted)}
.sig--bad{border-radius:2px;background:var(--color-error);box-shadow:none}
.banners{display:grid;gap:10px;margin-bottom:28px}
.banners:empty{display:none}
.banner{padding:14px 18px;border-radius:16px;background:var(--color-surface);box-shadow:0 0 0 1.5px var(--color-text);line-height:1.5;max-width:80ch}
.banner b{font-weight:650}
.banner--bad{box-shadow:0 0 0 2px var(--color-error)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:16px}
h2{font-size:1.25rem;font-weight:650;letter-spacing:-.01em;line-height:1.2}
.n{font-size:.9375rem;color:var(--color-text-muted)}
.note{margin-top:14px;font-size:.9375rem;color:var(--color-text-muted)}
.jn{display:block;font-weight:600;overflow-wrap:anywhere}
.sub{display:block;font-size:.875rem;color:var(--color-text-muted);overflow-wrap:anywhere}
.sub.t-bad{color:var(--color-error)}
/* Waiting jobs and the NUC: set apart from the runners in a quieter, flatter style. */
.rack-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.apart{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;margin-top:clamp(48px,7vw,88px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--hair-2)}
.queue{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.queue li{padding:12px 16px;border-radius:12px;background:var(--color-surface-2)}
.flag{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:3px 10px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--color-error);font-size:.875rem;font-weight:600}
.flag::before{content:'';flex:none;width:7px;height:7px;background:var(--color-error);transform:rotate(45deg)}
.empty{padding:14px 16px;border-radius:12px;background:var(--color-surface-2);color:var(--color-text-muted)}
.facts{border-radius:16px;background:var(--color-surface-2);padding:4px 16px}
.facts>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:12px 0;align-items:baseline}
.facts>div+div{border-top:1px solid var(--hair-2)}
.facts dt{font-size:.9375rem;color:var(--color-text-muted)}
.facts dd{font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.is-old .facts dd,.is-old .queue li{color:var(--color-text-muted)}
.foot{margin-top:clamp(48px,7vw,88px);padding-block:20px 36px;border-top:1px solid var(--hair-2);font-size:.875rem;color:var(--color-text-muted);display:grid;gap:2px}
.foot a{color:var(--color-text)}
.tap{display:inline-flex;align-items:center;min-height:44px}
/* The rack: one chassis, one 1U bay per runner; the faceplate is an SVG that app.js draws behind each bay's text. */
.chassis{padding:10px;border-radius:22px;background:var(--chassis);box-shadow:0 0 0 1px var(--chassis-edge),inset 0 1px 0 var(--core-hi),var(--core-shadow)}
.bays{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.bay{position:relative;overflow:hidden;border-radius:12px;box-shadow:0 0 0 1px var(--chassis-edge),0 1px 2px rgb(0 0 0/10%)}
.bay-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.plate-a{stop-color:var(--plate-hi)}.plate-b{stop-color:var(--plate-lo)}
.ear{fill:var(--ear)}.screw{fill:var(--screw)}.screw-in{fill:var(--plate-lo)}
.hi{fill:var(--core-hi)}.vent-hole{fill:var(--vent)}
.vents{height:calc(100% - 28px)}
.vents-wide{display:none}
.bay-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:12px 20px;padding:16px 36px 40px}
.bay-id{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bay-name{font-family:var(--font-d);font-size:1.375rem;font-weight:650;font-stretch:72%;letter-spacing:.02em;line-height:1}
.bay-state{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:600}
.led{flex:none;width:10px;height:10px;border-radius:50%;background:var(--plate-lo);box-shadow:inset 0 0 0 1.5px var(--led-ring)}
.led--busy{background:var(--led-busy);box-shadow:inset 0 0 0 1.5px var(--led-ring),0 0 0 3px color-mix(in srgb,var(--led-busy) 25%,transparent)}
.led--off{background:var(--color-error)}
.bay-job .jn{font-size:1.0625rem}
.bay-read{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.bay-read dt{font-size:.8125rem;color:var(--color-text-muted)}
.bay-read dd{font-size:.9375rem;font-weight:500;font-variant-numeric:tabular-nums}
.is-old .bay-body,.is-old .bay-name{color:var(--color-text-muted)}
.is-old .led{background:var(--plate-lo);box-shadow:inset 0 0 0 1.5px var(--led-ring)}
@media (min-width:800px){
  .vents-wide{display:inline}.vents-low{display:none}
  .bay-body{grid-template-columns:104px minmax(0,1fr) minmax(264px,1.5fr);align-items:start;padding:16px 116px 16px 40px;min-height:96px}
  .bay-id{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (min-width:1240px){.rack-wrap{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:start}.apart{margin-top:0;padding-top:0;border-top:0;grid-template-columns:minmax(0,1fr)}}
/* One-off entry: bays rise in order on the first render only; nothing moves with reduced motion, and refreshes never animate. */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(14px)}}
  .enter>li{animation:rise .7s var(--ease) both}
  .enter>li:nth-child(2){animation-delay:55ms}.enter>li:nth-child(3){animation-delay:110ms}.enter>li:nth-child(4){animation-delay:165ms}.enter>li:nth-child(5){animation-delay:220ms}.enter>li:nth-child(6){animation-delay:275ms}.enter>li:nth-child(7){animation-delay:330ms}.enter>li:nth-child(8){animation-delay:385ms}.enter>li:nth-child(9){animation-delay:440ms}.enter>li:nth-child(10){animation-delay:495ms}.enter>li:nth-child(11){animation-delay:550ms}.enter>li:nth-child(12){animation-delay:605ms}
}
@media (forced-colors:active){.bay,.banner,.updated,.queue li,.facts,.empty,.flag{border:1px solid CanvasText}.bay-art{display:none}}