/* PROOF — production floor board for Union Street Bakery.
   Contract: design/DESIGN.md. Tokens first, then the shell, then screens.
   Zero border-radius across the whole system — a schedule board is painted steel, not a card. */

@font-face{font-family:'Plex';src:url('assets/fonts/IBMPlexSans.woff2') format('woff2');
  font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'PlexM';src:url('assets/fonts/IBMPlexMono.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  /* surface — warm near-black, brown cast. Not slate, not navy. */
  --floor:oklch(0.16 0.012 55);
  --slab:oklch(0.22 0.014 55);
  --slab-2:oklch(0.27 0.012 55);
  --steel:oklch(0.42 0.008 55);      /* hairline structure */
  --steel-hi:oklch(0.56 0.008 55);

  --ink:oklch(0.95 0.006 80);
  --ink-2:oklch(0.79 0.008 70);
  --ink-3:oklch(0.66 0.008 70);      /* ~5.8:1 on --floor */

  --ember:oklch(0.72 0.175 55);      /* heat. Mass = late. Edge = needs a human within 5 min. */
  --ember-ink:oklch(0.29 0.085 45);  /* secondary text ON ember */
  --clear:oklch(0.76 0.10 165);      /* done / on plan */
  --alarm:oklch(0.62 0.20 25);       /* destructive verbs and invalid input ONLY. Never data. */
  --focus:oklch(0.97 0.05 95);       /* near-white, so a focus ring is never read as heat */

  --hdr:70px;                        /* header height the sticky table head sits under */
  --tap:44px;
  --dur:120ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion:reduce){:root{--dur:0ms}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-text-size-adjust:100%;color:var(--ink)}
body{background:var(--floor);color:var(--ink);
  font:400 15px/1.5 'Plex',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word}
h1,h2,h3{font-weight:600;line-height:1.2;text-wrap:balance}
strong,b{font-weight:600}
p{text-wrap:pretty}
ul,ol{list-style:none}
a{color:var(--ember);text-decoration:none;font:500 15px/1.5 'Plex',system-ui,sans-serif}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:1360px;margin:0 auto;padding:0 24px}
.mono{font-family:'PlexM',ui-monospace,monospace}
.sa{display:none}
/* announced, never painted — kept out of the layout without display:none, which mutes it */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.skip{position:absolute;top:8px;left:8px;z-index:60;opacity:0;pointer-events:none;
  background:var(--ember);color:var(--floor);padding:10px 14px}
.skip:focus-visible{opacity:1;pointer-events:auto}

/* ── shell ─────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:20;background:var(--floor)}
.bar{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:12px 24px 10px;
  max-width:1360px;margin:0 auto}
.mark{font-size:26px;font-weight:600;letter-spacing:.14em;line-height:1}
.now{font-family:'PlexM',ui-monospace,monospace;font-size:26px;color:var(--ember);line-height:1}
.chip{font-family:'PlexM',ui-monospace,monospace;font-size:12px;letter-spacing:.1em;
  background:var(--slab-2);color:var(--ink-2);padding:4px 8px}
.date{font-size:15px;color:var(--ink-3)}
@media (max-width:1199px){.date{display:none}}
.bar nav{margin-left:auto}
.bar nav ul{display:flex;gap:2px}
.nav-a{display:block;padding:9px 16px 10px;color:var(--ink-2);
  border-top:3px solid transparent;border-bottom:0;border-left:0;border-right:0;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
@media (hover:hover){.nav-a:hover{background:var(--slab);color:var(--ink);text-decoration:none}}
.nav-a[aria-current]{color:var(--ember);font-weight:600;border-top-color:var(--ember)}
.rule{height:3px;background:var(--ember)}

main{display:block;min-height:60vh}
footer{border-top:1px solid var(--steel);margin-top:48px;padding:20px 24px 40px;
  max-width:1360px;margin-inline:auto}
.foot{font-size:15px;color:var(--ink-3);line-height:2}

/* ── type scale (10 painted steps; see DESIGN.md) ──────────────────────── */
.h-page{font-size:26px;font-weight:600;letter-spacing:-.01em}
.h-sec{font-size:19px;font-weight:600}
.lbl{font-family:'PlexM',ui-monospace,monospace;font-size:12px;font-weight:400;
  letter-spacing:.09em;color:var(--ink-3)}
.dat{font-family:'PlexM',ui-monospace,monospace;font-size:14px;font-weight:400}
.big{font-family:'PlexM',ui-monospace,monospace;font-size:19px;font-weight:400}

/* ── controls: 5 button variants, 2 input, 1 select, 3 toggle. No more. ── */
.btn{display:inline-block;font:600 15px/1.2 'Plex',system-ui,sans-serif;
  padding:13px 18px;border:1px solid;cursor:pointer;min-height:var(--tap);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform 90ms var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-1{background:var(--ember);color:var(--floor);border-color:var(--ember)}
.btn-2{background:transparent;color:var(--ink);border-color:var(--steel-hi)}
.btn-3{background:transparent;color:var(--alarm);border-color:var(--alarm)}
@media (hover:hover){
  .btn-1:hover{background:oklch(0.80 0.16 58);border-color:oklch(0.80 0.16 58);text-decoration:none}
  .btn-2:hover{background:var(--slab);border-color:var(--ink-3);text-decoration:none}
  .btn-3:hover{background:oklch(0.24 0.05 25);text-decoration:none}
}
.btn:disabled{background:var(--slab);color:var(--ink-3);border-color:var(--steel);cursor:not-allowed}
.btn:disabled:active{transform:none}

.fld{font:400 15px/1.4 'Plex',system-ui,sans-serif;background:var(--slab);color:var(--ink);
  border:1px solid var(--steel-hi);padding:12px;min-height:var(--tap);width:100%;max-width:22ch;
  transition:border-color var(--dur) var(--ease)}
.fld::placeholder{color:var(--ink-3);opacity:1}
@media (hover:hover){.fld:hover{border-color:var(--ink-3)}}
.fld:disabled{background:var(--floor);color:var(--ink-3);border-color:var(--steel);cursor:not-allowed}
.fld-bad{border-color:var(--alarm);background:oklch(0.21 0.045 25)}
.fld-msg{display:block;font-size:15px;color:var(--alarm);margin-top:6px}
.fld-n{max-width:9ch}

/* one indicator paint shared by radios and checkboxes — a radio and a checkbox
   that look different for no reason is drift with a spec-shaped excuse */
.tgl{appearance:none;-webkit-appearance:none;color:inherit;width:18px;height:18px;flex:0 0 18px;
  background:var(--floor);border:1px solid var(--steel-hi);cursor:pointer;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.tgl:checked{background:var(--ember);border-color:var(--ember)}
.tgl:disabled{background:var(--slab);border-color:var(--steel);cursor:not-allowed}
.tgl-l{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);cursor:pointer;max-width:100%;
  padding:0 14px 0 12px;border:1px solid var(--steel);color:var(--ink-2);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.tgl-l:has(.tgl:checked){background:var(--slab-2);color:var(--ink)}
.tgl-l:has(.tgl:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
@media (hover:hover){.tgl-l:hover{background:var(--slab)}}
.tgl-n{font-family:'PlexM',ui-monospace,monospace;font-size:14px;color:var(--ink-3)}
.tgl-l:has(.tgl:checked) .tgl-n{color:var(--ember)}

/* ── tables ────────────────────────────────────────────────────────────── */
.toolbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;
  justify-content:space-between;padding:14px 0 18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.cnt{display:none;font-size:15px;color:var(--ink-3)}
/* CSS-only filtering: the chips are radios, so the table filters with scripting off */
.runs:has(#f-all:checked) .c-all,
.runs:has(#f-late:checked) .c-late,
.runs:has(#f-run:checked) .c-run,
.runs:has(#f-next:checked) .c-next,
.runs:has(#f-done:checked) .c-done{display:block}
.runs:has(#f-late:checked) tbody tr:not([data-state="late"]),
.runs:has(#f-run:checked) tbody tr:not([data-state="running"]),
.runs:has(#f-next:checked) tbody tr:not([data-state="queued"]),
.runs:has(#f-done:checked) tbody tr:not([data-state="done"]){display:none}

.tw{border-top:1px solid var(--steel)}
@media (max-width:1099px){.tw{overflow-x:auto}}
table{border-collapse:collapse;width:100%}
.tw-wide table{min-width:980px}   /* runs: 10 columns */
.tw-mid table{min-width:560px}    /* accounts, ovens: fits 768 so the toggle column stays on screen */
thead th{position:sticky;top:var(--hdr);z-index:5;background:var(--slab);text-align:left;
  font-family:'PlexM',ui-monospace,monospace;font-size:12px;font-weight:400;letter-spacing:.09em;
  color:var(--ink-3);padding:12px;border-bottom:1px solid var(--steel);white-space:nowrap}
th.n,td.n{text-align:right}
tbody td{font-family:'PlexM',ui-monospace,monospace;font-size:14px;font-weight:400;
  padding:12px;border-bottom:1px solid var(--slab-2);height:44px;vertical-align:middle;
  white-space:nowrap}   /* an oven id that wraps to two lines is not an id */
td.w{white-space:normal}
td.w{font-family:'Plex',system-ui,sans-serif;font-size:15px;font-weight:400}
@media (hover:hover){tbody tr:hover{background:var(--slab)}}
.sortb{background:transparent;color:var(--ink-2);border:0;padding:0;cursor:pointer;
  font-family:'PlexM',ui-monospace,monospace;font-size:12px;font-weight:600;letter-spacing:.09em;
  transition:color var(--dur) var(--ease)}
@media (hover:hover){.sortb:hover{color:var(--ember)}}
/* sort direction as a rule, not an arrow glyph: the vendored Plex subset is latin-only */
.sortb[data-dir]{color:var(--ember)}
.sortb[data-dir="asc"]{box-shadow:0 3px 0 var(--ember)}
.sortb[data-dir="desc"]{box-shadow:0 -3px 0 var(--ember)}
tr[data-state="late"] td{background:var(--ember);color:var(--floor);font-weight:500;
  border-bottom-color:var(--ember-ink)}
tr[data-state="late"] a{color:var(--floor);font-weight:600}
@media (hover:hover){tbody tr[data-state="late"]:hover td{background:oklch(0.80 0.16 58)}}

/* status pills — not controls: no focus, no interaction */
.pill{font-family:'PlexM',ui-monospace,monospace;font-size:12px;font-weight:400;letter-spacing:.06em;
  padding:3px 7px;display:inline-block;white-space:nowrap}
.p-late{background:var(--floor);color:var(--ember)}
.p-run{background:var(--slab-2);color:var(--ember)}
.p-queue{background:var(--slab-2);color:var(--ink-2)}
.p-done{background:var(--slab-2);color:var(--clear)}
.p-cold{background:var(--slab-2);color:var(--ink-3)}

/* ── the oven band: full-bleed, unequal cells, physical floor order ────── */
.band{display:grid;gap:1px;background:var(--steel);
  grid-template-columns:1.25fr 1.25fr 1.25fr 1.25fr 1.25fr 1fr 1fr 1fr 1fr 1fr 1fr;
  padding-top:2px}
.oven{background:var(--slab);padding:12px;min-height:188px;display:flex;flex-direction:column;
  border-top:6px solid var(--slab);min-width:0}
.oven-n{font-family:'PlexM',ui-monospace,monospace;font-size:12px;font-weight:400;
  letter-spacing:.09em;color:var(--ink-3)}
.oven-p{font-size:15px;line-height:1.25;margin-top:6px;min-height:2.5em}
.oven-q{font-family:'PlexM',ui-monospace,monospace;font-size:14px;color:var(--ink-2)}
.oven-f{flex:1;min-height:8px}
.oven-m{font-size:clamp(2rem,3vw,2.75rem);font-weight:560;line-height:.9;letter-spacing:-.02em}
.oven-u{font-family:'PlexM',ui-monospace,monospace;font-size:12px;color:var(--ink-3);margin-top:5px;
  letter-spacing:.06em}
.oven-s{font-size:15px;font-weight:600;color:var(--ink-2)}          /* status instead of a numeral */
.oven.soon{border-top-color:var(--ember)}
.oven.soon .oven-m{color:var(--ember)}
.oven.cold{background:var(--floor);box-shadow:inset 0 0 0 1px var(--steel);border-top-color:var(--floor)}
/* The hatch used to be the whole background, which left backgroundColor computing to transparent:
   no automated contrast checker can evaluate an element whose ground is only an image, and the
   striped field was the hardest text on the Floor to read. Solid ground, quieter hatch, brighter ink. */
.oven.dead{background-color:var(--floor);
  background-image:repeating-linear-gradient(135deg,transparent 0 7px,oklch(0.24 0.012 55) 7px 14px);
  border-top-color:var(--floor)}
.oven.dead .oven-n{text-decoration:line-through}
.oven.dead .oven-u,.oven.dead .oven-q{color:var(--ink-2)}

/* ── Floor: priority split + dispatch strip ────────────────────────────── */
.split{display:grid;grid-template-columns:7fr 5fr;gap:40px;padding:26px 0 8px}
.late-h{font-size:26px;font-weight:600;letter-spacing:.05em;color:var(--ember);
  border-bottom:1px solid var(--steel);padding-bottom:8px;margin-bottom:2px}
.late{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:baseline;
  background:var(--ember);color:var(--floor);padding:13px 18px;margin-bottom:2px;
  border:1px solid var(--ember);font:600 15px/1.2 'Plex',system-ui,sans-serif;
  transition:background-color var(--dur) var(--ease)}
@media (hover:hover){.late:hover{background:oklch(0.80 0.16 58);text-decoration:none}}
.late-id{font-family:'PlexM',ui-monospace,monospace;font-size:12px;letter-spacing:.09em;
  color:var(--ember-ink);grid-column:1/-1}
.late-w{font-size:19px;font-weight:600}
.late-b{font-size:19px;font-weight:600;text-align:right;white-space:nowrap}
.late-y{grid-column:1/-1;font-size:15px;font-weight:400;color:var(--ember-ink);line-height:1.45;
  margin-top:3px}

.next-h{font-family:'PlexM',ui-monospace,monospace;font-size:19px;font-weight:400;color:var(--ink);
  border-bottom:1px solid var(--steel);padding-bottom:8px}
.next-h span{display:block;font-family:'PlexM',ui-monospace,monospace;font-size:12px;
  letter-spacing:.09em;color:var(--ink-3);margin-top:7px}
.starts li{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--slab-2)}
.starts .t{font-family:'PlexM',ui-monospace,monospace;font-size:14px;color:var(--ember)}
.starts .o{font-family:'PlexM',ui-monospace,monospace;font-size:12px;color:var(--ink-3);
  letter-spacing:.09em}
.starts em{font-style:normal;font-family:'PlexM',ui-monospace,monospace;font-size:12px;
  letter-spacing:.06em;background:var(--ember);color:var(--floor);padding:2px 6px;margin-left:8px}

.vans{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--steel);
  border-top:1px solid var(--steel);border-bottom:1px solid var(--steel);margin-top:26px}
.van{background:var(--floor);padding:14px 16px}
.van-t{font-family:'PlexM',ui-monospace,monospace;font-size:19px;font-weight:400}
.van-d{font-size:15px;color:var(--ink-3);margin-top:4px}
.van-s{font-size:15px;font-weight:600;color:var(--clear);margin-top:6px}
.van.risk .van-s{color:var(--ember)}
.van.risk{box-shadow:inset 0 3px 0 var(--ember)}

/* ── Run detail ────────────────────────────────────────────────────────── */
.rhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;padding:22px 0 14px;
  border-bottom:1px solid var(--steel)}
.rail{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--steel);
  margin:22px 0;border:1px solid var(--steel)}
.stg{background:var(--slab);padding:12px;min-height:112px;display:flex;flex-direction:column;
  border-top:6px solid var(--slab);min-width:0}
.stg-n{font-family:'PlexM',ui-monospace,monospace;font-size:12px;letter-spacing:.09em;
  color:var(--ink-3)}
.stg-w{font-size:15px;font-weight:600;margin-top:6px}
.stg-t{font-family:'PlexM',ui-monospace,monospace;font-size:14px;color:var(--ink-2);margin-top:auto}
.stg.done{background:var(--floor)}
.stg.done .stg-w{color:var(--clear)}
.stg.live{border-top-color:var(--ember)}
.stg.live .stg-w{color:var(--ember)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:8px}
.cols>*{min-width:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;padding:14px 0;
  border-bottom:1px solid var(--slab-2)}
.verdict{background:var(--slab);border-left:0;border-top:3px solid var(--clear);padding:16px 18px;
  margin:18px 0}
.verdict.tight{border-top-color:var(--ember)}
.verdict p{font-size:15px;color:var(--ink-2);margin-top:6px}

/* ── Accounts ──────────────────────────────────────────────────────────── */
.grp{padding:26px 0 6px}
.grp-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--steel);padding-bottom:8px}

/* ── Settings ──────────────────────────────────────────────────────────── */
.form{max-width:70ch}
.set{padding:26px 0;border-bottom:1px solid var(--slab-2)}
.set h2{margin-bottom:4px}
.set p.note{font-size:15px;color:var(--ink-3);max-width:66ch;margin-bottom:16px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:14px}
.row label{font-size:15px;min-width:26ch}
.acts{display:flex;flex-wrap:wrap;gap:12px;padding:26px 0}

/* ── states: :target only, so they survive with JS off ─────────────────── */
.st-load,.st-empty,.st-err{display:none}
body:has(#state-loading:target) .st-load{display:block}
body:has(#state-loading:target) .st-live{display:none}
body:has(#state-empty:target) .st-empty{display:block}
body:has(#state-empty:target) .st-live{display:none}
body:has(#state-error:target) .st-err{display:block}
/* The moment of care: the error state does NOT hide the data, it drains the heat out of it.
   Opacity was the first attempt and it was wrong — at .5 the near-black text on the ember late
   blocks fell to about 2.6:1 and the state made its own copy unreadable. Greyscale removes the
   chroma and leaves lightness alone, so every contrast ratio survives and "the colour has gone
   out of the board" is a stronger stale signal than a fade. */
body:has(#state-error:target) .st-live{filter:grayscale(.6);opacity:.9}
/* …except where the error is a rejected edit rather than a dead feed: dimming a settings form the
   user is still holding would be theatre. Settings opts out. */
body:has(#state-error:target) .st-live.no-dim{opacity:1}
/* a rejected field replaces the section it belongs to, rather than repeating its heading below it */
body:has(#state-error:target) .hide-on-err{display:none}
.note-after{margin-top:14px}

.lead{padding:22px 0 0}

.empty{max-width:62ch;padding:56px 0}
.empty h2{margin-bottom:10px}
.empty p{color:var(--ink-2);margin-bottom:20px}
.banner{background:var(--slab);border-top:3px solid var(--ember);padding:16px 18px;margin:18px 0;
  display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.banner p{font-size:15px;max-width:78ch}
.banner b{font-weight:600;color:var(--ember)}
.skel{background:var(--slab-2);height:14px;animation:pulse 1.4s var(--ease) infinite}
.skel-head{background:var(--slab)}
.skel-row{display:grid;grid-template-columns:110px 1fr 90px 120px 90px;gap:16px;
  align-items:center;height:44px;border-bottom:1px solid var(--slab-2);padding:0 12px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.skel{animation:none;opacity:.7}}
.loadnote{font-family:'PlexM',ui-monospace,monospace;font-size:14px;color:var(--ink-3);
  padding:16px 12px}

/* ── responsive: the wall screen and the phone are different tools ─────── */
@media (max-width:1100px){
  /* eleven ovens do not divide by four, and the leftover cell reads as a twelfth oven with no
     data. Below the wall-screen width the band becomes a list in the same floor order instead. */
  .split{grid-template-columns:1fr;gap:28px}
  .band{grid-template-columns:1fr;gap:1px}
  .oven{min-height:0;display:grid;grid-template-columns:88px 1fr auto;gap:4px 12px;
    align-items:baseline;padding:12px;border-top-width:0;border-left:6px solid var(--slab)}
  .oven.soon{border-left-color:var(--ember)}
  .oven.cold,.oven.dead{border-left-color:transparent}
  .oven-n{grid-row:1}
  .oven-p{grid-column:2;grid-row:1;margin-top:0;min-height:0}
  .oven-q{grid-column:2;grid-row:2}
  .oven-f{display:none}
  .oven-m{grid-column:3;grid-row:1/3;font-size:2rem;align-self:center}
  .oven-s{grid-column:3;grid-row:1/3;align-self:center;text-align:right}
  .oven-u{grid-column:2/4;grid-row:3;margin-top:2px;text-align:left}

  .cols{grid-template-columns:1fr;gap:26px}
  .rail{grid-template-columns:repeat(4,1fr)}
  .vans{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .bar{padding:10px 16px 8px;gap:12px}
  .mark{font-size:20px}
  .now{font-size:20px}
  .date{display:none}
  .wrap{padding:0 16px}
  footer{padding:20px 16px 92px}

  /* nav detaches to the bottom: thumb reach for someone holding a tray */
  .bar nav{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:30;
    background:var(--floor);border-top:1px solid var(--steel)}
  .bar nav ul{gap:0}
  .bar nav li{flex:1}
  .nav-a{text-align:center;padding:12px 4px 14px;font-size:14px;min-height:56px;
    border-top:0;border-bottom:3px solid transparent}
  .nav-a[aria-current]{border-bottom-color:var(--ember);border-top-color:transparent}

  /* the band becomes a list, still in floor order, and LATE comes first */
  .floor-stack{display:flex;flex-direction:column}
  .floor-stack .band-wrap{order:3}
  .floor-stack .split{order:1}
  .floor-stack .vwrap{order:2}
  .vans{margin-top:0}
  .split{padding:20px 0 8px}
  .late-h{font-size:22px}
  .late{grid-template-columns:1fr;padding:12px 14px}
  .late-b{text-align:left;font-size:17px}
  .late-w{font-size:17px}
  .vans{grid-template-columns:1fr}
  .rail{grid-template-columns:repeat(2,1fr)}
  .stg{min-height:0}
  .row label{min-width:0;width:100%}
  .fld{max-width:none}
  .skel-row{grid-template-columns:90px 1fr 70px}
  .skel-row span:nth-child(n+4){display:none}
  /* the phone drops the columns a walking lead can look up on the run detail */
  .c-hide{display:none}
  /* min-widths sized for the desktop column set would force needless horizontal scroll here */
  .tw-wide table,.tw-mid table{min-width:0}
}