/* Delivery-style tracking view: one headline, one button, five stops. The full board lives in a drawer. */
#track{scroll-margin-top:100px}
.track{margin:0 auto 12px;padding:22px 26px 18px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.track-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start}
.track-head h2{margin:0;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.04em;line-height:1.05}
.track-head p{margin:8px 0 0;max-width:62ch;color:var(--text-soft);font-size:13px;line-height:1.5}
.track-counters{margin:10px 0 0;color:var(--text-faint);font:500 10px "DM Mono",monospace;letter-spacing:.02em}
.track-counters b{color:var(--text)}
.track-cta{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.track-cta .button{min-height:46px;padding-inline:20px;font-size:14px}
.track-cta .button[disabled]{opacity:.55;cursor:default}
.track-cta small{color:var(--text-faint);font-size:10px;text-align:right;max-width:26ch}
.track-case{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.track-case > span{color:var(--text-faint);font:600 9px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.track-case select{min-height:34px;max-width:420px;padding:5px 10px;border:1px solid var(--line-strong);border-radius:9px;background:var(--bg-elevated);color:var(--text);font:inherit;font-size:12px}
.track-case .origin-chip,.track-case .boundary-chip{font-size:9px}
.track-link{all:unset;cursor:pointer;color:var(--brand);font-size:11px;font-weight:600;padding:6px 8px;border-radius:8px}
.track-link:hover,.track-link:focus-visible{background:var(--brand-soft)}
.show-all-inline{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--text-soft);font-size:11px;cursor:pointer}
.show-all-inline input{accent-color:var(--brand)}
.stops{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0}
.stop{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;position:relative;padding:0 0 14px}
.stop::before{content:"";position:absolute;left:16px;top:30px;bottom:0;width:2px;background:var(--line)}
.stop:last-child::before{display:none}
.stop.done::before{background:var(--brand)}
.stop-dot{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--surface);border:1px solid var(--line-strong);color:var(--text-faint);font:700 12px "DM Mono",monospace;position:relative;z-index:1}
.stop.done .stop-dot{background:var(--brand);border-color:var(--brand);color:var(--ink-inverse)}
.stop.done .stop-dot::before{content:"\2713"}
.stop.done .stop-dot span{display:none}
.stop.current .stop-dot{background:var(--bg-elevated);border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 5px var(--brand-soft)}
.stop.current.live .stop-dot{animation:stop-pulse 1.8s ease-in-out infinite}
@keyframes stop-pulse{0%,100%{box-shadow:0 0 0 5px var(--brand-soft)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--brand) 12%,transparent)}}
.stop-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-height:34px;padding-top:8px}
.stop-head b{font-size:14px;letter-spacing:-.01em}
.stop-head small{color:var(--text-faint);font-size:11px}
.stop.todo .stop-head b{color:var(--text-faint);font-weight:500}
.stop-body{display:none;margin:6px 0 0;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--surface) 55%,var(--bg-elevated))}
.stop.current .stop-body,.stop.done.open .stop-body{display:block}
.stop.done .stop-head{cursor:pointer}
.stop.done .stop-head::after{content:"Details";margin-left:auto;color:var(--brand);font-size:10px}
.stop.done.open .stop-head::after{content:"Hide"}
/* Mirrored artifacts inside stops */
.stop-body .metric-row{border:0;background:var(--bg-elevated);margin-bottom:8px}
.stop-body .metric-row div{padding:8px 10px}
.stop-body .metric-row strong{font-size:14px}
.stop-body .fridge{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;align-items:stretch}
.stop-body .fridge .metric-row{grid-template-columns:1fr;margin:0}
.stop-body .fridge .metric-row div{border-right:0;border-bottom:1px solid var(--line)}
.stop-body .fridge .metric-row div:last-child{border-bottom:0}
.stop-body .mini-chart{height:150px;padding:6px 8px;border-radius:10px;background:var(--bg-elevated)}
.stop-body .mini-chart svg{width:100%;height:100%}
.stop-body .package-label{min-height:0;padding:9px 11px;border-radius:9px;display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:2px;align-items:baseline;margin-bottom:8px;background:#f4f0e7;color:#10201b}
.stop-body .package-label small{grid-column:1 / -1;color:#a33b30;font:700 7px "DM Mono",monospace}
.stop-body .package-label b{margin:2px 0 0;font-size:13px;line-height:1.1}
.stop-body .package-label span{margin:0;font-size:10px;text-align:right;color:#087965;font-weight:700}
.stop-body .package-label i{margin:0;font-size:8px;font-style:normal}
.stop-body .package-label code{margin:0;font-size:8px;text-align:right;color:#5b6863}
.stop-body .verified-fields{display:flex;flex-wrap:wrap;gap:6px}
.stop-body .verified-field{display:inline-flex;align-items:baseline;gap:5px;padding:4px 9px;border:0;border-radius:999px;background:var(--bg-elevated)}
.stop-body .verified-field span{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.stop-body .verified-field b{font-size:10px}
.stop-body .verified-field small{display:none}
.stop-body .stop-note{margin:8px 0 0;color:var(--text-faint);font-size:10px;line-height:1.45}
.stop-body .stop-note a{color:var(--brand)}
.stop-body .injection-screen{margin:8px 0 0;padding:6px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline}
.stop-body .injection-screen b{font-size:10px}.stop-body .injection-screen span{font-size:9px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stop-body .review-packet,.stop-body .empty-review{min-height:0;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--bg-elevated);display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.stop-body .empty-review{display:flex;align-items:center;gap:10px;text-align:left}
.stop-body .empty-review h3{margin:0;font-size:12px}.stop-body .empty-review p{margin:0;font-size:10px;color:var(--text-faint)}
.stop-body .review-packet .eyebrow{grid-column:1 / -1;margin:0 0 2px;font-size:8px}
.stop-body .review-packet h3{grid-column:1 / -1;margin:0 0 6px;font-size:15px}
.stop-body .review-packet .packet-row{padding:4px 0;font-size:10px}
.stop-body .review-packet .human-stamp,.stop-body .review-packet > p{grid-column:1 / -1}
.stop-body .review-packet .human-stamp{margin-top:8px;padding:7px 10px;font-size:9px}
.stop-body .review-packet > p{margin:6px 0 0;font-size:10px}
.stop-body .agent-line{margin:8px 0 0;display:flex;gap:8px;align-items:baseline;font-size:10px}
.stop-body .agent-line span{color:var(--text-faint);font:500 9px "DM Mono",monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stop-body .agent-line b::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#26c281}
.stop-body .agent-line.flagged b::before{background:var(--danger)}
.stop-body .wake-list{margin:0;padding:0;list-style:none;display:grid;gap:0}
.stop-body .wake-row{display:flex;gap:9px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--line)}
.stop-body .wake-row:last-child{border-bottom:0}
.stop-body .wake-row b{display:block;font-size:11px}.stop-body .wake-row small{display:block;color:var(--text-faint);font:500 9px "DM Mono",monospace;margin-top:2px}
.stop-body .wake-state{flex:0 0 8px;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--text-faint)}
.stop-body .wake-row[data-status=pending] .wake-state{background:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.stop-body .wake-row[data-status=done] .wake-state{background:#26c281}
.stop-body .wake-row[data-status=cancelled] .wake-state{opacity:.5}
.stop-body .worker-status{margin:10px 0 0;padding:8px 10px;border-radius:10px;font:500 9px "DM Mono",monospace;line-height:1.45;color:var(--text-faint);background:var(--bg-elevated);border:1px solid var(--line)}
.stop-body .worker-status[data-state=live]{border-color:color-mix(in srgb,#26c281 45%,var(--line));color:var(--text)}
.stop-body .hands-off{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.03em}
.stop-body .facts{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stop-body .facts div{padding:8px 10px;border-radius:10px;background:var(--bg-elevated)}
.stop-body .facts dt{color:var(--text-faint);font:600 8px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.stop-body .facts dd{margin:4px 0 0;font-size:15px;font-weight:700}
.track-recent{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;color:var(--text-faint);font-size:10px}
.track-recent b{color:var(--text)}
/* The full board becomes a drawer */
.board-head{display:none}
.board{display:none}
body[data-show-all=true] .board{display:block}
body[data-show-all=true] .board-head{display:flex}
body[data-show-all=true] .board .stage-bar{display:none}
body[data-show-all=true] .board[data-stage] .evidence-cell:not(.stage-card){display:block}
body[data-show-all=true] .board .stage-card{display:none}
body[data-show-all=true] .board #tab-temperature{grid-column:auto}
body[data-show-all=true] .board #tab-review{grid-column:1 / -1}
body[data-show-all=true] .board .timeline-item{display:grid}
@media(max-width:820px){.track{padding:16px}.stop-body .fridge{grid-template-columns:1fr}.track-head{grid-template-columns:1fr}.track-cta{align-items:stretch}.track-cta small{text-align:left;max-width:none}.stop-body .facts{grid-template-columns:1fr 1fr}.stop-body .review-packet{grid-template-columns:1fr}}

/* Tighter band around the tracker */
.demo-section{padding:44px 0 56px}

/* Working state: the click is acknowledged immediately */
.track-cta .button.working{opacity:1;color:var(--ink-inverse);background:var(--brand);cursor:progress}
.track-cta .button.working::before{content:"";width:14px;height:14px;margin-right:10px;border:2px solid color-mix(in srgb,var(--ink-inverse) 45%,transparent);border-top-color:var(--ink-inverse);border-radius:50%;display:inline-block;vertical-align:-2px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#track[data-working=true] .track-head h2{color:var(--brand)}
#track[data-working=true] .stop.current .stop-dot{animation:stop-pulse 1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.track-cta .button.working::before,#track[data-working=true] .stop.current .stop-dot{animation:none}}
.track-dev{margin:6px 0 0}
.track-dev .track-link{padding-left:0}