/* Grantee · Batches: new run + preflight + history (#batches) and the run ledger (#batches/:id).
   Builds on base.css tokens only. Segments: done = ink, running = graphite hatch, needs a person = amber, failed = --needs. */

.bx-pg { max-width: 1180px; }
.bx-h2 { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; }
.bx-h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; }
.bx-back { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--graphite); font-size: 13.5px; font-weight: 500; text-decoration: none; border-radius: 8px; }
.bx-back:hover { color: var(--ink); }
.bx-nf { font-size: 24px; font-weight: 600; margin: 12px 0 4px; }
.bx-amb { display: inline-block; width: 8px; height: 8px; border-radius: 0; background: var(--amber); flex: none; }
.bx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--needs); flex: none; }
.bx-hatch { display: inline-block; width: 14px; height: 10px; margin-right: 8px; vertical-align: -1px; background: repeating-linear-gradient(135deg, var(--graphite) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--graphite); opacity: .8; }

/* ───────── new run: a compact intake frame, then the saved lists at full width ───────── */
.bx-new { margin-bottom: 36px; }
.bx-new-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.bx-drop {
  --c: 9px; display: grid; grid-template-columns: 20px minmax(0, 1fr) 220px; align-items: center; gap: 0 16px;
  max-height: 120px; min-height: 104px; padding: 14px 20px; text-align: left; cursor: pointer; background: var(--surface); color: var(--ink);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.bx-drop:hover, .bx-drop.is-over { background: var(--hover); border-color: var(--ink); }
.bx-drop.is-over { border-style: solid; }
.bx-drop:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bx-drop-i { color: var(--graphite); display: grid; place-items: center; }
.bx-intake .dash, .bx-intake .solid { transition: opacity 160ms var(--ease); }
.bx-intake .solid { opacity: 0; }
.bx-drop.is-over .bx-intake .dash { opacity: 0; }
.bx-drop.is-over .bx-intake .solid { opacity: 1; }
.bx-drop.is-over .bx-drop-i, .bx-drop:hover .bx-drop-i { color: var(--ink); }
.bx-drop-c { display: grid; gap: 3px; min-width: 0; }
.bx-drop-t { font-size: 15px; font-weight: 600; }
.bx-drop-or { font-size: 13.5px; font-weight: 400; color: var(--graphite); margin-left: 4px; }
.bx-drop-or u, .bx-drop-s u { text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
.bx-drop-s { font-size: 12.5px; color: var(--graphite); line-height: 1.45; }
.bx-drop-s .mono { font-size: 11px; color: var(--ink); }
.bx-drop-m { min-height: 16px; font: 500 11px/1.4 var(--mono); color: var(--graphite); }
.bx-drop-m:empty { display: none; }
.bx-drop-m.is-bad { color: var(--needs); }
/* three ruled ghost rows: what a list looks like */
.bx-ghost { display: grid; align-self: center; font-size: 11px; color: var(--quiet); border-left: 1px solid var(--rule-strong); padding-left: 12px;
  background: repeating-linear-gradient(to bottom, transparent 0 21px, var(--rule) 21px 22px); }
.bx-ghost span { height: 22px; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bx-saved { min-width: 0; }
.bx-ready { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.bx-ready li { border-bottom: 1px solid var(--rule); }
.bx-ready button {
  width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n go" "f go"; gap: 2px 12px; align-items: center;
  padding: 12px 8px; text-align: left; border-radius: 8px; min-height: 56px; transition: background-color 160ms var(--ease);
}
.bx-ready button:hover { background: var(--hover); }
.bx-rn { grid-area: n; font-weight: 600; font-size: 13.5px; min-width: 0; }
.bx-rf { grid-area: f; font-size: 12.5px; color: var(--graphite); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-rf .mono { font-size: 11px; }
.bx-rgo { grid-area: go; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.bx-empty { display: grid; justify-items: start; gap: 10px; padding: 8px 0; }
.bx-empty-f { --c: 6px; width: 240px; height: 64px; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 0; transform: rotate(-1.5deg); color: var(--graphite); }
.bx-empty-f b { font: 700 17px/1 var(--sans); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; }
.bx-empty-f .mono { font-size: 10.5px; letter-spacing: .02em; }
.bx-empty p { margin: 0; font-size: 13.5px; color: var(--graphite); }

/* ───────── preflight ───────── */
.bx-pre-host:not(:empty) { margin-top: 20px; }
.bx-pre-solo { margin-top: 12px; }
.bx-pre { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-sm); animation: bx-in 260ms var(--ease) both; }
@keyframes bx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bx-pre-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 0 20px; }
.bx-eyebrow { display: block; font-size: 12.5px; color: var(--graphite); margin-bottom: 2px; }
.bx-pre-hd h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.bx-pre-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; padding: 14px 20px 6px; }
.bx-pre-c h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--graphite); }

.bx-checks, .bx-costs { list-style: none; margin: 0; padding: 0; }
.bx-ck { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); }
.bx-ck .n { font-size: 15px; font-weight: 500; text-align: right; }
.bx-ck .l { font-size: 13.5px; min-width: 0; }
.bx-ck .l small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--graphite); line-height: 1.45; }
.bx-ck .l small .mono { font-size: 11px; color: var(--ink); }
.bx-ck .t { font: 500 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.bx-ck.is-bad .n { color: var(--needs); }
.bx-ck.is-total { border-top: 1px solid var(--rule-strong); }
.bx-ck.is-total .l { font-weight: 600; }
.bx-ck.is-total .n { font-weight: 600; }

.bx-est { margin: 2px 0 10px; font-size: 21px; letter-spacing: -.02em; }
.bx-est b { font-weight: 500; }
.bx-est span { color: var(--quiet); }
.bx-costs li { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.bx-costs .l small { display: block; font-size: 12.5px; color: var(--graphite); margin-top: 1px; }
.bx-costs .q { font-size: 11px; color: var(--graphite); white-space: nowrap; }
.bx-costs .v { text-align: right; font-size: 12.5px; }
.bx-costs .is-total { border-top: 1px solid var(--rule-strong); font-weight: 600; }
.bx-costs .is-total .v { font-weight: 600; }
.bx-pace { margin: 10px 0 0; font-size: 12.5px; color: var(--graphite); }

.bx-pre-ft { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 20px 18px; margin-top: 10px; border-top: 1px solid var(--rule); }
.bx-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 12.5px; color: var(--ink); }
.bx-chain li { display: inline-flex; align-items: center; white-space: nowrap; }
.bx-chain li + li::before { content: "→"; color: var(--quiet); margin: 0 8px; font-family: var(--mono); font-size: 11px; }
.bx-pre-act { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.bx-pre-act .muted { font-size: 12.5px; }

/* ───────── runs: a ledger with a numbered margin ───────── */
.bx-hwrap { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.bx-hist { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bx-hist thead th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--graphite); padding: 10px 14px; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.bx-hist th.n, .bx-hist td.n { text-align: right; }
.bx-hist tbody tr { border-bottom: 1px solid var(--rule); cursor: pointer; transition: background-color 160ms var(--ease); }
.bx-hist tbody tr:last-child { border-bottom: 0; }
.bx-hist tbody tr:hover { background: var(--hover); }
.bx-hist tbody th, .bx-hist td { padding: 12px 14px; vertical-align: top; font-weight: 400; text-align: left; }
.bx-hist td { white-space: nowrap; }
.bx-hist .no { width: 28px; padding: 13px 6px 0 0; text-align: right; font-size: 11px; color: var(--graphite); border-right: 1px solid var(--rule-strong); }
.bx-hist thead .no { padding: 10px 6px 10px 0; }
.bx-hist td.n { font-size: 13.5px; }
.bx-hist td.n small { display: block; font: 400 11px/1.3 var(--mono); color: var(--graphite); margin-top: 2px; }
.bx-hn { display: block; font-weight: 600; text-decoration: none; }
.bx-hn:hover { text-decoration: underline; text-underline-offset: 3px; }
.bx-hf { display: block; font-size: 12.5px; color: var(--graphite); margin-top: 2px; }
.bx-hf .mono { font-size: 11px; }
/* the ink impression a finished run carries */
.bx-runimp { --c: 3px; position: relative; isolation: isolate; display: inline-block; margin-top: 6px; padding: 1px 5px; font-size: 10.5px; line-height: 1.5; letter-spacing: .02em; color: var(--ink); background: var(--ink); opacity: .92; transform: rotate(-1.5deg); transform-origin: left center;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.bx-runimp::before { --c: 2.6px; content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--surface);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.bx-hist tbody tr:hover .bx-runimp::before { background: var(--hover); }
.bx-hnote { display: block; font-size: 12.5px; color: var(--graphite); margin-top: 4px; padding-left: 22px; position: relative; }
.bx-hnote::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 9px; background: repeating-linear-gradient(135deg, var(--graphite) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--graphite); opacity: .75; }
.bx-hist tr.is-queued .bx-hn, .bx-hist tr.is-queued td { color: var(--graphite); }
/* six-cell stage tally */
.bx-hist td.d { white-space: nowrap; }
.bx-tally { display: inline-flex; gap: 2px; align-items: center; vertical-align: -1px; margin-right: 8px; }
.bx-tally i { width: 3px; height: 10px; background: var(--rule-strong); }
.bx-tally i.is-done { background: var(--ink); }
.bx-tally i.is-needs { background: var(--amber); }
.bx-tally i.is-run { background: var(--graphite); animation: bx-pulse 900ms ease-in-out infinite alternate; }
.bx-hist td.d .mono { font-size: 12.5px; }

/* ───────── the run ───────── */
body[data-layout="page"] #page:has(> .bx-run) { overflow: hidden; }
.bx-run { display: flex; flex-direction: column; height: 100%; max-width: 1440px; margin: 0 auto; padding: 14px 24px 0; }
.bx-run-hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "back back" "title speed"; align-items: end; gap: 2px 20px; }
.bx-run-hd .bx-back { grid-area: back; justify-self: start; margin-left: -2px; }
.bx-title { grid-area: title; min-width: 0; }
.bx-title h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.bx-title p { margin: 4px 0 0; font-size: 13.5px; color: var(--graphite); }
.bx-title p .mono { font-size: 12.5px; }
.bx-speed { grid-area: speed; display: flex; align-items: center; gap: 0; }
.bx-speed-n { font-size: 12.5px; color: var(--graphite); margin-right: 10px; white-space: nowrap; }
.bx-speed button { height: 32px; min-width: 44px; padding: 0 10px; font: 500 12.5px/1 var(--mono); border: 1px solid var(--rule-strong); color: var(--graphite); background: var(--surface); }
.bx-speed button:first-of-type { border-radius: 8px 0 0 8px; }
.bx-speed button:last-of-type { border-radius: 0 8px 8px 0; margin-left: -1px; }
.bx-speed button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); position: relative; }
.bx-speed button:focus-visible { position: relative; z-index: 1; }
.bx-speed button[hidden] { display: none; }

.bx-strip { margin: 12px 0 0; min-height: 22px; }
.bx-clock { margin: 0; font-size: 13.5px; color: var(--graphite); }
.bx-clock b { color: var(--ink); font-weight: 500; font-size: 12.5px; }
.bx-sum { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "s" "a"; align-items: center; gap: 8px 20px; padding: 10px 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); animation: bx-in 260ms var(--ease) both; }
.bx-sum-s { grid-area: s; margin: 0; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.bx-sum-s b { font-weight: 600; }
.bx-sum-a { grid-area: a; display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.bx-sum-a .mono { font-size: 11px; color: var(--ink); }

/* per-stage segmented progress (one bar per stage) */
.bx-stages { list-style: none; margin: 14px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bx-stages li { min-width: 0; position: relative; }
.bx-stages li + li::before { content: ""; position: absolute; left: -11px; top: 7px; width: 6px; height: 6px; border: solid var(--rule-strong); border-width: 1px 1px 0 0; transform: rotate(45deg); }
.bx-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.bx-sh .nm { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-sh .ct { font-size: 11px; color: var(--graphite); white-space: nowrap; }
.bx-stages li.is-full .ct { color: var(--ink); }
.bx-bar { display: flex; gap: 2px; height: 10px; overflow: hidden; }
.bx-bar i { display: block; flex: none; width: 3px; height: 100%; background: var(--rule); transition: background-color 160ms var(--ease); }
.bx-bar i.on { background: var(--ink); }
.bx-bar i.nd { background: var(--amber); }
.bx-bar i.fl { background: var(--needs); }
.bx-bar i.ld { background: var(--ink); animation: bx-pulse 900ms ease-in-out infinite alternate; }
@keyframes bx-pulse { from { opacity: .4; } to { opacity: 1; } }
.bx-sub { margin-top: 5px; font-size: 11px; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ledger + tray */
.bx-main { flex: 1; min-height: 320px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; padding-bottom: 20px; }
.bx-ledger { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.bx-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; position: relative; }
.bx-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.bx-body { position: relative; contain: strict; width: 100%; }

.bx-r {
  position: absolute; left: 0; right: 0; top: 0; height: 52px; display: grid;
  grid-template-columns: 40px minmax(130px, 1fr) 88px minmax(170px, 1.35fr) 118px minmax(190px, 1.45fr) 58px;
  align-items: center; gap: 12px; padding: 0 14px 0 12px; border-bottom: 1px solid var(--rule); font-size: 13.5px;
  will-change: transform; contain: layout paint;
}
.bx-r:hover { background: var(--hover); }
.bx-r > span { min-width: 0; }
.bx-lh { position: relative; height: 36px; flex: none; font-size: 12.5px; color: var(--graphite); background: var(--surface); border-bottom: 1px solid var(--rule-strong); }
.bx-lh:hover { background: var(--surface); }
.bx-lh span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-r .c-no { font-size: 11px; color: var(--quiet); text-align: right; }
.bx-r .c-addr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.bx-r .c-addr a { text-decoration: none; }
.bx-r .c-addr a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bx-r .c-ppn { font-size: 11px; color: var(--graphite); white-space: nowrap; }
.bx-r .c-gr { display: flex; align-items: center; gap: 5px; overflow: hidden; }
.bx-r .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 200ms var(--ease); }
.bx-r .nm.is-ink { color: var(--ink); font-weight: 500; }
.bx-r .nm.is-roll { color: var(--graphite); font-size: 11px; letter-spacing: 0; }
.bx-r .nm.is-wait, .bx-r b.is-wait { color: var(--graphite); font-weight: 400; }
.bx-r .is-none { color: var(--quiet); font-weight: 400; }
.bx-tiny { --c: 3px; height: 16px; padding: 0 5px; font-size: 9.5px; flex: none; gap: 0; }
.bx-tiny::before { --c: 2.6px; }
.bx-r .c-occ, .bx-r .c-vd { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.bx-r .c-occ b, .bx-r .c-vd b { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-r .c-occ small, .bx-r .c-vd small { font-size: 12.5px; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.bx-r .c-tk { display: flex; gap: 2px; justify-content: flex-end; }
.bx-r .c-tk i { width: 6px; height: 14px; border-radius: 0; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.bx-r .c-tk .t-run { background: repeating-linear-gradient(135deg, var(--graphite) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 0 1px var(--graphite); }
.bx-r .c-tk .t-done { background: var(--ink); box-shadow: none; }
.bx-r .c-tk .t-needs { background: var(--amber); box-shadow: none; }
.bx-r .c-tk .t-fail { background: var(--needs); box-shadow: none; }
.bx-r.is-needs::before, .bx-r.is-fail::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0; background: var(--amber); }
.bx-r.is-fail::before { background: var(--needs); }
.bx-r.is-needs .c-vd b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 0; background: var(--amber); margin-right: 6px; vertical-align: 1px; }
.bx-r.is-fail .c-vd b { font-weight: 500; font-size: 12.5px; }
.bx-r.is-fail .c-vd b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--needs); margin-right: 6px; vertical-align: 1px; }
.bx-r.is-rel .c-vd b { color: var(--ink); }
.bx-retry { position: relative; font-weight: 600; font-size: 12.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--rule-strong); }
.bx-retry::after { content: ""; position: absolute; inset: -12px -6px; }
.bx-retry:hover { text-decoration-color: var(--ink); }
.bx-auto { color: var(--quiet); }
.bx-r.lands .bx-tiny { animation: bx-land 220ms var(--ease-stamp) both, bx-ink 160ms linear both; }
.bx-r.lands .nm.is-ink { animation: bx-ink 200ms linear both; }
@keyframes bx-land { from { transform: scale(1.12) rotate(-3deg); } to { transform: none; } }
@keyframes bx-ink { from { opacity: 0; } to { opacity: 1; } }
.bx-r.flash { animation: bx-flash 1200ms var(--ease) both; }
@keyframes bx-flash { 0%, 30% { background: var(--lit); } 100% { background: transparent; } }

.bx-follow { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--ink); color: var(--on-ink); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow); }
.bx-follow svg { transform: rotate(90deg); }
.bx-follow[hidden] { display: none; }

.bx-tray { align-self: start; max-height: 100%; overflow-y: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 14px 12px; }
.bx-tray-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bx-tray-hd h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.bx-tray-l { list-style: none; margin: 0 -6px; padding: 0; }
.bx-tray-l button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 8px 7px 14px; border-radius: 8px; text-align: left; position: relative; min-height: 44px; justify-content: center; }
.bx-tray-l button::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 3px; border-radius: 0; background: var(--amber); }
.bx-tray-l button:hover { background: var(--hover); }
.bx-tray-l .a { font-size: 13.5px; font-weight: 500; }
.bx-tray-l .v { font-size: 12.5px; color: var(--graphite); }
.bx-more { margin: 4px 0 0; font-size: 12.5px; color: var(--graphite); }
.bx-tray-e { margin: 0; font-size: 12.5px; color: var(--graphite); }
.bx-tray-f { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.bx-tray-f p { margin: 0 0 8px; font-size: 12.5px; color: var(--graphite); }
.bx-tray-f p b { color: var(--ink); font-weight: 600; }
.bx-tray-f .bx-dot { margin-right: 7px; vertical-align: 1px; }
.bx-tray-n { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--quiet); }

/* ───────── top-bar run indicator ───────── */
.bx-ind { display: inline-flex; align-items: center; gap: 7px; height: 28px; margin-left: 2px; padding: 0 9px; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 11px; transition: background-color 160ms var(--ease); }
.bx-ind:hover { background: var(--hover); }
.bx-ind .mono { min-width: 3ch; text-align: right; }
.bx-ticks { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.bx-ticks i { width: 1.5px; height: 10px; background: var(--rule-strong); transition: background-color 200ms var(--ease); }
.bx-ticks i.on { background: var(--ink); }
.bx-ind.is-done { border-color: var(--rule-strong); }
.bx-badge { display: none; }
.nav .bx-ind[hidden], .nav .bx-badge[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .bx-bar i.ld, .bx-tally i.is-run { animation: none; }
  .bx-r.lands .bx-tiny, .bx-r.lands .nm.is-ink, .bx-pre, .bx-sum { animation: bx-ink 150ms linear both; }
}

/* ───────── narrower desktops ───────── */
@media (max-width: 1180px) and (min-width: 721px) {
  .bx-r { grid-template-columns: 36px minmax(120px, 1fr) 84px minmax(150px, 1.3fr) minmax(170px, 1.4fr) 56px; }
  .bx-r .c-occ { display: none; }
  .bx-main { grid-template-columns: minmax(0, 1fr) 260px; }
  .bx-stages { gap: 12px; }
}
@media (max-width: 960px) and (min-width: 721px) {
  .bx-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .bx-tray { max-height: 140px; }
  .bx-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bx-stages li:nth-child(4)::before { display: none; }
  .bx-pre-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ───────── phone ───────── */
@media (max-width: 720px) {
  body[data-layout="page"] #page:has(> .bx-run) { overflow-y: auto; }
  .bx-new-grid { grid-template-columns: 1fr; gap: 16px; }
  .bx-drop { grid-template-columns: 20px minmax(0, 1fr); gap: 0 12px; min-height: 0; max-height: none; padding: 14px 14px 14px 16px; }
  .bx-ghost { display: none; }
  .bx-drop-or { display: block; margin: 2px 0 0; }
  .bx-pre-hd { padding: 14px 12px 0 16px; }
  .bx-pre-grid { grid-template-columns: 1fr; gap: 14px; padding: 12px 16px 4px; }
  .bx-ck { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .bx-ck .t { display: none; }
  .bx-est { font-size: 15px; }
  .bx-est span { display: none; }
  .bx-est b { display: block; }
  .bx-costs li { grid-template-columns: minmax(0, 1fr) 60px; grid-template-areas: "l v" "q v"; gap: 0 10px; }
  .bx-costs .l { grid-area: l; }
  .bx-costs .q { grid-area: q; margin-top: 2px; }
  .bx-costs .v { grid-area: v; align-self: center; }
  .bx-pre-ft { padding: 12px 16px 16px; }
  .bx-pre-act { width: 100%; flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .bx-pre-act .btn { height: 46px; }
  .bx-pre-act .muted { text-align: center; }

  .bx-hist thead { display: none; }
  .bx-hist, .bx-hist tbody, .bx-hist tr { display: block; }
  .bx-hist tbody tr { display: grid; grid-template-columns: 28px repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 14px 12px 0; }
  .bx-hist .no { grid-column: 1; grid-row: 1 / span 3; width: auto; padding: 2px 6px 0 0; display: block !important; text-align: right !important; font-size: 11px; }
  .bx-hist tbody th { grid-column: 2 / -1; padding: 0; }
  .bx-hist td.d { white-space: nowrap; }
  .bx-hist td { padding: 0; display: flex; flex-direction: column; text-align: left !important; font-size: 13.5px; white-space: normal; }
  .bx-hist td::before { content: attr(data-l); font: 400 11px/1.3 var(--sans); color: var(--graphite); margin-bottom: 1px; }
  .bx-hist td .bx-amb { display: none; }
  .bx-hist tr.is-queued td:not(.no) { display: none; }

  .bx-run { height: auto; padding: 12px 16px 32px; }
  .bx-run-hd { grid-template-columns: 1fr; grid-template-areas: "back" "title" "speed"; gap: 2px; }
  .bx-title h1 { font-size: 21px; }
  .bx-speed { margin-top: 10px; flex-wrap: wrap; }
  .bx-speed-n { flex: 1; min-width: 0; white-space: normal; }
  .bx-speed button { height: 40px; min-width: 48px; }
  .bx-clock { font-size: 13.5px; }
  .bx-sum { grid-template-columns: 1fr; grid-template-areas: "s" "a"; }
  .bx-sum-a { justify-content: flex-start; }
  .bx-sum-a .btn { height: 44px; }

  .bx-stages { grid-template-columns: 1fr; gap: 0; margin: 12px 0; border-top: 1px solid var(--rule); }
  .bx-stages li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; grid-template-areas: "nm bar ct" "nm sub sub"; align-items: center; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .bx-stages li + li::before { display: none; }
  .bx-sh { display: contents; }
  .bx-sh .nm { grid-area: nm; font-size: 12.5px; }
  .bx-sh .ct { grid-area: ct; }
  .bx-bar { grid-area: bar; }
  .bx-sub { grid-area: sub; margin-top: 0; font-size: 10.5px; }

  .bx-main { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding-bottom: 0; }
  .bx-tray { order: -1; max-height: none; overflow: visible; }
  .bx-ledger { overflow: visible; border-radius: 10px; }
  .bx-scroll { overflow: visible; }
  .bx-body { contain: layout; }
  .bx-lh { display: none; }
  .bx-r {
    height: 64px; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "addr ppn tk" "gr gr vd";
    gap: 3px 10px; padding: 0 12px 0 14px; align-content: center;
  }
  .bx-r .c-no, .bx-r .c-occ { display: none; }
  .bx-r .c-addr { grid-area: addr; font-size: 13.5px; }
  .bx-r .c-ppn { grid-area: ppn; font-size: 11px; }
  .bx-r .c-tk { grid-area: tk; }
  .bx-r .c-tk i { width: 5px; height: 12px; }
  .bx-r .c-gr { grid-area: gr; font-size: 12.5px; }
  .bx-r .c-vd { grid-area: vd; align-items: flex-end; max-width: 46vw; }
  .bx-r .c-vd small { display: none; }
  .bx-r .c-vd b { font-size: 12.5px; }
  .bx-r.is-fail { grid-template-areas: "addr ppn tk" "vd vd vd"; }
  .bx-r.is-fail .c-gr { display: none; }
  .bx-r.is-fail .c-vd { flex-direction: row; align-items: center; justify-content: space-between; max-width: none; gap: 10px; }
  .bx-r.is-fail .c-vd b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
  .bx-r.is-fail .c-vd small { display: block; margin: 0; flex: none; }
  .bx-r.is-fail .bx-auto { display: none; }
  .bx-follow { position: fixed; bottom: 16px; }

  .nav .bx-ind { display: none; }
  .bx-badge { display: block; position: absolute; top: 2px; right: -6px; padding: 2px 3px; font-size: 9px; line-height: 1; border-radius: 3px; background: var(--ink); color: var(--on-ink); pointer-events: none; }
}