/* TOLLWAY skin for the Live Desk pack: a highway at night.
   One hue (sodium-lamp amber, three steps), headlight-white ink, taillight red for
   bad outcomes, interstate green for the shield and E-ZPass purple for the toll lane. */
@font-face { font-family: "Geist"; src: url(/desk/fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/desk/fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Pixel"; src: url(/desk/fonts/geist-pixel.woff2) format("woff2"); font-display: swap; }

:root {
  --desk-ink: #fff4de; --desk-ink-soft: #d9c8a4; --desk-ink-mute: #92836a;
  --desk-line: rgba(255, 178, 30, .15); --desk-fill: rgba(255, 178, 30, .07);
  --desk-accent: #ffb21e; --desk-accent-2: #ffd98a; --desk-accent-3: #6b4100;
  --desk-glow: rgba(255, 178, 30, .5); --desk-stream-tint: 1.0 0.70 0.12;
  --desk-up: #3ddc91; --desk-down: #ff3d33; --desk-warn: #ffb21e;
  --head: #fff1d6; --tail: #ff3d33; --lane: #a07bff; --shield: #00704a;
  --font-pixel: "Geist Pixel", "Geist Mono", ui-monospace, monospace;
}
.logo {
  background: linear-gradient(180deg, var(--desk-accent-3) 0%, var(--desk-accent-2) 36%, #fffaf0 52%, var(--desk-accent) 64%, var(--desk-accent-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0;
}
.btn-chrome { color: #1a0f00; text-shadow: 0 1px 0 #ffffff70; }
.btn-chrome[disabled] { filter: grayscale(.7) brightness(.7); cursor: not-allowed; transform: none; }
.lane { color: var(--lane); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--desk-accent); outline-offset: 2px; }

/* ---- bar ---- */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { flex: none; filter: drop-shadow(0 0 10px rgba(0, 112, 74, .55)); }
.grow { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip b { font-weight: 700; color: var(--desk-ink); }
.chip.lanechip { border-color: color-mix(in oklab, var(--lane) 55%, transparent); color: var(--lane); }
button.chip:disabled { opacity: .55; cursor: default; }
button.chip:disabled:hover { border-color: var(--desk-line); color: inherit; }

/* ---- roads (cards) ---- */
.card { text-align: left; color: inherit; font: inherit; }
.card .avatar { overflow: hidden; display: grid; place-items: center; background: #0b0905; }
.card .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .avatar b { font: 800 .7rem/1 var(--font-mono); color: var(--accent); }
.card .tag { background: var(--accent); color: #000; }
.card.empty { cursor: default; opacity: .4; }

/* ---- traffic matrix with row labels ---- */
.mx { display: grid; grid-template-columns: 4.6em 1fr; gap: 0 8px; align-items: start; }
.mx .labels { display: grid; grid-auto-rows: 9px; gap: 3px; font: 600 var(--fs-micro)/9px var(--font-mono); color: var(--desk-ink-mute); text-transform: uppercase; }
.mx .labels span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matrix { grid-auto-rows: 9px; gap: 3px 2px; }
.mxkey { display: flex; gap: 10px; margin-top: 10px; font: 400 var(--fs-micro)/1 var(--font-mono); color: var(--desk-ink-mute); text-transform: uppercase; letter-spacing: .04em; flex-wrap: wrap; }
.mxkey i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; vertical-align: -1px; border-radius: 1px; }

/* ---- incidents ---- */
.list .r { cursor: pointer; padding: 2px 0; border-radius: 2px; }
.list .r:hover b { color: var(--desk-accent); }
.list .bar i.d { background: var(--desk-down); box-shadow: 0 0 6px rgba(255, 61, 51, .5); }
.list .empty, .empty { color: var(--desk-ink-mute); font: 400 var(--fs-data)/1.5 var(--font-mono); }
.zz { display: inline-block; width: 8px; height: 8px; margin-right: 6px; transform: rotate(45deg); vertical-align: 0; background: var(--desk-accent); }
.zz.r { background: var(--desk-down); } .zz.o { background: #ff8a2b; } .zz.g { background: var(--desk-up); }

/* ---- plaza ---- */
.pzrow { display: flex; justify-content: space-between; gap: 8px; font: 400 var(--fs-data)/1.9 var(--font-mono); color: var(--desk-ink-soft); }
.pzrow b { color: var(--desk-ink); font-weight: 600; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.btn-line { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--desk-line); border-radius: 3px; background: transparent; cursor: pointer;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--desk-ink); text-decoration: none; white-space: nowrap; }
.btn-line:hover { border-color: var(--desk-accent); color: var(--desk-accent); }
.btn-line.lane { border-color: color-mix(in oklab, var(--lane) 50%, transparent); color: var(--lane); }
.btn-line[disabled] { opacity: .45; cursor: not-allowed; }
.btn-line[disabled]:hover { border-color: var(--desk-line); color: var(--desk-ink); }

/* ---- stage: overhead gantry (the paid Billboard) ---- */
.desk-stage { overflow: visible; }
.gantry { position: absolute; z-index: 2; left: clamp(16px, 2.4vw, 36px); top: 34px; width: min(430px, calc(100% - 32px)); cursor: pointer; }
.gantry .truss { height: 9px; border: 1px solid var(--desk-line); border-bottom: 0;
  background: repeating-linear-gradient(60deg, transparent 0 7px, rgba(255, 178, 30, .22) 7px 8px); }
.vms { position: relative; min-height: 88px; padding: 13px 16px; display: flex; flex-direction: column; justify-content: center; gap: 5px;
  background: #030201; border: 1px solid #2b2414; box-shadow: inset 0 0 0 3px #0b0905, 0 24px 60px -30px rgba(255, 160, 20, .45);
  font: 400 clamp(15px, 1.35vw, 20px)/1.12 var(--font-pixel); letter-spacing: .07em; text-transform: uppercase; color: var(--desk-accent);
  text-shadow: 0 0 5px rgba(255, 178, 30, .85), 0 0 18px rgba(255, 130, 0, .35); }
.vms span { display: block; white-space: nowrap; overflow: hidden; }
.vms.sponsor { color: #ffe3a6; }
.vms.sponsor::after { content: "SPONSORED"; position: absolute; right: 8px; top: 6px; font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .1em; color: var(--desk-ink-mute); text-shadow: none; }
.vms.flash { animation: vms-flash 1.8s var(--ease-out); }
.vms .swap { }
.gantry-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 8px; background: rgba(0, 0, 0, .86); border: 1px solid var(--desk-line); border-top: 0;
  font: 500 var(--fs-micro)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--desk-ink-mute); }
.gantry-foot .tag { cursor: pointer; }
.gantry:hover .vms { border-color: color-mix(in oklab, var(--desk-accent) 45%, #2b2414); }
.stage-label { top: auto; bottom: 12px; }
.stage-legend { position: absolute; right: 20px; bottom: 12px; display: flex; gap: 14px; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--desk-ink-mute); }
.stage-legend i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: 3px; border-radius: 2px; }
.lg-h { background: var(--head); box-shadow: 0 0 6px var(--head); } .lg-t { background: var(--tail); box-shadow: 0 0 6px var(--tail); }
.lg-a { background: var(--desk-accent); box-shadow: 0 0 6px var(--desk-accent); } .lg-p { background: var(--lane); box-shadow: 0 0 6px var(--lane); }

/* ---- bottom row ---- */
.strip { background: var(--desk-accent); color: #140c00; font: 700 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; border-radius: 2px; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.legend4 { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.legend4 b { font: 600 .9rem/1.3 var(--font-mono); color: var(--desk-ink); }
.split i.h { background: var(--head); } .split i.a { background: var(--desk-accent); }
.console .live button, .console .old button, .tk { all: unset; cursor: pointer; color: var(--desk-accent-2); border-bottom: 1px dotted currentColor; }
.console .live, .console .old { white-space: normal; }
.console .old { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.log-line { grid-template-columns: 2.2em 5.4em 6.2em 7em 1fr; }
.log-line .who { cursor: pointer; }
.v-FLOWING { color: var(--head); } .v-STEADY { color: var(--desk-accent); } .v-BRAKING { color: var(--desk-down); }
.v-QUIET { color: var(--desk-ink-mute); } .v-TRAP { color: var(--desk-accent-2); font-weight: 700; } .v-CRASH { color: var(--desk-down); font-weight: 700; }
.v-ONRAMP { color: var(--desk-up); } .v-TOLL { color: var(--lane); font-weight: 700; } .v-REPORT { color: var(--desk-accent-2); }
.v-MILESTONE { color: var(--desk-up); font-weight: 700; } .v-BILLBOARD { color: #ffe3a6; font-weight: 700; } .v-BUY { color: var(--head); } .v-SELL { color: var(--desk-down); }

/* ---- callouts in the toll lane colour ---- */
.callout { max-width: 260px; }

/* ---- sheets (X-ray, board, lane, plaza) ---- */
.scrim { position: fixed; inset: 0; z-index: 29; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }
.sheet { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; width: min(780px, 100%); display: flex; flex-direction: column;
  background: rgba(0, 0, 0, .96); border-left: 1px solid var(--desk-line); box-shadow: -40px 0 80px -40px rgba(255, 160, 20, .18); animation: sheet-in .45s var(--ease-out); }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--desk-line); }
.sheet-head h2 { margin: 0; font: 800 1.15rem/1 var(--font-sans); letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sheet-head h2 img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 1px var(--desk-line); }
.sheet-head h2 small { font: 400 var(--fs-data)/1 var(--font-mono); color: var(--desk-ink-mute); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-grab { display: none; }
.sheet-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 16px 20px 48px; font: 400 var(--fs-data)/1.5 var(--font-mono); }
.sheet-body h3 { margin: 22px 0 10px; font: 500 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--desk-ink-mute); }
.sheet-body h3::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; background: var(--desk-accent); vertical-align: 1px; }
.sheet-body p { margin: 0 0 10px; color: var(--desk-ink-soft); max-width: 72ch; }
.seg { display: inline-flex; border: 1px solid var(--desk-line); border-radius: 3px; overflow: hidden; }
.seg button { height: 26px; padding: 0 10px; border: 0; background: transparent; cursor: pointer; font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--desk-ink-mute); }
.seg button + button { border-left: 1px solid var(--desk-line); }
.seg button[aria-pressed="true"] { background: var(--desk-fill); color: var(--desk-accent); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--desk-line); border: 1px solid var(--desk-line); }
.grid4 > div { background: #000; padding: 10px 12px; min-width: 0; }
.grid4 .lbl { display: block; margin-bottom: 6px; }
.grid4 b { font: 600 1rem/1.1 var(--font-mono); color: var(--desk-ink); }
.verdict { padding: 10px 12px; border: 1px solid var(--desk-line); border-left: 3px solid var(--desk-up); margin-bottom: 12px; color: var(--desk-ink); background: rgba(61, 220, 145, .05); }
.verdict.y { border-left-color: var(--desk-accent); background: var(--desk-fill); } .verdict.r { border-left-color: var(--desk-down); background: rgba(255, 61, 51, .06); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--desk-line); border: 1px solid var(--desk-line); margin-top: 12px; }
.kv > div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; background: #000; }
.chartbox { height: 240px; margin-top: 12px; border: 1px solid var(--desk-line); }
.deep { margin-top: 14px; padding: 14px; border: 1px solid color-mix(in oklab, var(--lane) 45%, transparent); background: rgba(160, 123, 255, .05); }
.deep h4 { margin: 0 0 6px; font: 800 .9rem/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--desk-ink); }
.hbars > div { display: grid; grid-template-columns: 2em 1fr 5em; gap: 8px; align-items: center; margin: 3px 0; }
.hbars span:nth-child(2) { height: 6px; background: var(--desk-fill); position: relative; }
.hbars i { position: absolute; inset: 0 auto 0 0; background: var(--lane); }
.hbars i.pool { background: #4a4337; }
.xnote { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--lane); color: var(--desk-ink); background: #0008; }
.fine { font-size: var(--fs-micro); color: var(--desk-ink-mute); text-transform: uppercase; letter-spacing: .04em; line-height: 1.6; margin-top: 16px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--desk-line); }
.tbl { width: 100%; border-collapse: collapse; font: 400 var(--fs-data)/1.3 var(--font-mono); font-feature-settings: "tnum"; }
.tbl th { position: sticky; top: 0; z-index: 1; background: #000; text-align: right; padding: 0; border-bottom: 1px solid var(--desk-line); white-space: nowrap; }
.tbl th:nth-child(-n+2) { text-align: left; }
.tbl th button { all: unset; cursor: pointer; display: block; padding: 8px; font: 500 var(--fs-micro)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--desk-ink-mute); }
.tbl th[aria-sort] button { color: var(--desk-accent); }
.tbl th[aria-sort="ascending"] button::after { content: " ↑"; } .tbl th[aria-sort="descending"] button::after { content: " ↓"; }
.tbl td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 178, 30, .07); text-align: right; white-space: nowrap; }
.tbl td:nth-child(-n+2) { text-align: left; }
.tbl tbody tr { cursor: pointer; } .tbl tbody tr:hover, .tbl tbody tr:focus { background: var(--desk-fill); outline: none; }
.tok { display: flex; align-items: center; gap: 8px; }
.tok img, .tok .ph { width: 18px; height: 18px; border-radius: 5px; flex: none; background: #1b160c; }
.tok b { color: var(--desk-ink); }
.tok small { color: var(--desk-ink-mute); margin-left: 6px; }
.press { display: inline-block; width: 46px; height: 3px; background: rgba(255, 61, 51, .55); vertical-align: 2px; position: relative; }
.press i { position: absolute; inset: 0 auto 0 0; background: var(--head); }
.chk i { font-style: normal; display: inline-block; min-width: 14px; padding: 0 3px; margin-left: 2px; border-radius: 2px; font-weight: 700; font-size: var(--fs-micro); line-height: 14px; text-align: center; }
.chk i.ok { background: rgba(61, 220, 145, .14); color: var(--desk-up); } .chk i.no { background: rgba(255, 61, 51, .14); color: var(--desk-down); }
.tape tr.buy td:nth-child(2) { color: var(--head); } .tape tr.sell td:nth-child(2) { color: var(--desk-down); }
.tg { margin-left: 6px; padding: 1px 4px; border-radius: 2px; font-size: var(--fs-micro); text-transform: uppercase; }
.tg.k { background: rgba(160, 123, 255, .16); color: var(--lane); } .tg.w { background: var(--desk-fill); color: var(--desk-accent); }
.feed { list-style: none; margin: 0; padding: 0; } .feed li { padding: 8px 0; border-bottom: 1px solid rgba(255, 178, 30, .07); }
.feed .m { color: var(--desk-ink-mute); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em; }
.code { display: block; padding: 10px 12px; border: 1px solid var(--desk-line); background: #0a0804; color: var(--desk-accent-2); white-space: pre-wrap; word-break: break-all; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
input.field { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--desk-line); border-radius: 3px; background: #0a0804; color: var(--desk-ink); font: 400 .8rem/1 var(--font-mono); }
input.field:focus { outline: none; border-color: var(--desk-accent); }
label.lbl { display: block; margin: 12px 0 6px; }

/* ---- modal: wallet, Billboard composer, toll booth ---- */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.mbox { width: min(470px, 100%); max-height: 92dvh; overflow: auto; padding: 20px; background: #000; border: 1px solid var(--desk-line);
  box-shadow: 0 30px 80px -30px rgba(255, 160, 20, .35); font: 400 var(--fs-data)/1.5 var(--font-mono); animation: callout-in .35s ease-out; }
.mbox h3 { margin: 0 0 6px; font: 800 1.1rem/1.2 var(--font-sans); letter-spacing: -.02em; }
.mbox .sub { margin: 0 0 14px; color: var(--desk-ink-soft); }
.mbox .row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.wlist { display: grid; gap: 6px; }
.wlist button, .wlist a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--desk-line); border-radius: 3px; background: transparent; cursor: pointer; text-decoration: none; color: var(--desk-ink); font: 600 .78rem/1 var(--font-mono); }
.wlist button:hover, .wlist a:hover { border-color: var(--desk-accent); color: var(--desk-accent); }
.wlist img { width: 20px; height: 20px; }
.merr { min-height: 1.2em; margin-top: 8px; color: var(--desk-down); }
.priceline { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--desk-line); }
.priceline b { font: 700 1.1rem/1 var(--font-mono); color: var(--desk-ink); }
.vms.preview { min-height: 74px; margin-top: 12px; cursor: default; }
.gatebar { position: relative; height: 64px; margin: 4px 0 12px; border: 1px solid var(--desk-line); overflow: hidden;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 244, 222, .14) 22px 34px) center 50% / 100% 2px no-repeat, #050403; }
.gatebar .post { position: absolute; left: 58%; top: 10px; width: 8px; height: 44px; background: #2b2414; }
.gatebar .arm { position: absolute; left: calc(58% + 4px); top: 18px; width: 38%; height: 6px; transform-origin: 0 50%;
  background: repeating-linear-gradient(90deg, var(--desk-accent) 0 14px, #fff4de 14px 28px); transition: transform .8s var(--ease-pop); }
.gatebar.open .arm { transform: rotate(-78deg); }
.gatebar .car { position: absolute; left: 6%; top: 26px; width: 34px; height: 14px; border-radius: 3px; background: #1b160c; box-shadow: 10px 0 14px -4px var(--head); transition: left 1.2s var(--ease-io); }
.gatebar.open .car { left: 110%; }
.gatebar .gl { position: absolute; left: 12px; top: 8px; font: 400 18px/1 var(--font-pixel); color: var(--desk-accent); text-shadow: 0 0 6px rgba(255, 178, 30, .8); }
.gatebar.open .gl { color: var(--desk-up); text-shadow: 0 0 6px rgba(61, 220, 145, .8); }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stages li { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid transparent; color: var(--desk-ink-mute); }
.stages .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--desk-line); font-size: 9px; line-height: 12px; text-align: center; }
.stages li.on { color: var(--desk-ink); border-color: var(--desk-line); } .stages li.on .dot { border-color: var(--desk-accent); animation: pulse 1.2s var(--ease-io) infinite; }
.stages li.done { color: var(--desk-ink-soft); } .stages li.done .dot { background: var(--desk-up); border-color: var(--desk-up); color: #000; }
.stages li.fail { color: var(--desk-down); } .stages li.fail .dot { background: var(--desk-down); border-color: var(--desk-down); color: #000; }
.stages .code { display: inline; padding: 0 4px; border: 0; background: var(--desk-fill); }
.receipt { margin-top: 10px; color: var(--desk-ink-soft); }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 8px 14px; border: 1px solid var(--desk-accent); background: #000; color: var(--desk-accent); font: 600 var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; display: none; }

/* ---- boot: the gantry lights up until the first live data ---- */
.boot { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #000; transition: opacity .6s var(--ease-out), visibility .6s; }
.boot .vms { width: min(420px, 86vw); min-height: 96px; align-items: center; text-align: center; }
.boot .vms span { opacity: 0; animation: boot-row .01s steps(1) forwards; }
.boot .vms span:nth-child(2) { animation-delay: .35s; } .boot .vms span:nth-child(3) { animation-delay: .7s; color: var(--desk-ink-mute); text-shadow: none; font-size: .65em; }
.boot .vms span:first-child { animation-delay: .1s; }
body.ready .boot { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- hide the desk, keep the traffic (H) ---- */
.desk-bar, .desk-row, .gantry { transition: opacity .4s var(--ease-out); }
html.hud-off .desk-bar, html.hud-off .desk-row { opacity: 0; pointer-events: none; }
.restore { position: fixed; z-index: 20; right: 16px; bottom: 16px; }

@keyframes sheet-in { from { transform: translateX(48px); } to { transform: none; } }
@keyframes sheet-up { from { transform: translateY(48px); } to { transform: none; } }
@keyframes vms-flash { 0%, 12%, 30% { background: #2a1a00; color: #fff4de; } 6%, 22% { background: #030201; } 100% { background: #030201; } }
@keyframes vms-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes boot-row { to { opacity: 1; } }

/* ---- below desktop: stack and scroll, the stream follows its stage ---- */
@media (max-width: 1023px) {
  .tagline { display: none; }
  .desk-bar .vr { display: none; }
  .chips { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .desk-stage { min-height: 460px; }
  .gantry { top: 20px; }
}
@media (max-width: 760px) {
  .desk-bar { padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); }
  .logo-sub { display: none; }
  #bb-cta { margin-left: auto; }
  .panel { padding: 14px; }
  .sheet { top: auto; left: 0; width: 100%; max-height: 92dvh; border-left: 0; border-top: 1px solid var(--desk-line); border-radius: 10px 10px 0 0; animation-name: sheet-up; padding-bottom: env(safe-area-inset-bottom); }
  .sheet-grab { display: block; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--desk-line); }
  .sheet-head { flex-direction: row-reverse; justify-content: flex-end; padding-top: 16px; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two, .kv { grid-template-columns: 1fr; }
  .stage-legend { left: 14px; right: auto; bottom: 34px; gap: 10px; }
  .stage-label { left: 14px; }
}
@media (pointer: coarse) {
  .chip, .btn-line, .seg button { min-height: 40px; }
  .btn-chrome { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .vms.flash, .vms .swap, .boot .vms span { animation: none !important; opacity: 1; }
  .gatebar .arm, .gatebar .car { transition: none; }
}

/* ---- fit the desk to one row of chrome at 1440 ---- */
:root { --fs-logo: clamp(1.9rem, 2.9vw, 2.55rem); }
.tagline { max-width: 42ch; }
@media (max-width: 1499px) { .tagline, .desk-bar .vr { display: none; } }
@media (max-width: 1299px) and (min-width: 1024px) { .logo-sub { display: none; } }
@media (min-width: 1024px) {
  .desk-row.top { grid-template-columns: 2.55fr 1.05fr 1.1fr .95fr .6fr; }
  .chips { flex-wrap: nowrap; }
}
.card { grid-template-columns: 30px 1fr; }
.card .avatar { width: 30px; height: 30px; border-radius: 8px; }
.card .pct { font-size: var(--fs-data); white-space: nowrap; }
.card .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card .row1 { align-items: center; min-width: 0; }
.card .tag { white-space: nowrap; }
.split i.z0 { background: #ffffff14; }
#log { display: flex; flex-direction: column; }
@media (min-width: 1024px) { .desk-row.bottom { height: clamp(200px, 26vh, 280px); } }
.stage-label, .stage-legend { background: rgba(0, 0, 0, .78); padding: 5px 8px; border: 1px solid var(--desk-line); }
.stage-label { z-index: 2; } .stage-legend { z-index: 2; }
.panel .acts { flex-wrap: nowrap; } .panel .acts .btn-line { padding: 0 8px; }
/* Content never waits on an animation to become visible: if a busy device delays an
   animation start, rows, bars and sheets still show in their final state. */
.log-line.new, .callout-in, .list .bar i, .feed-in { animation-fill-mode: none; }
@media (max-width: 1023px) {
  .desk-stage { order: 1; min-height: 440px; border-bottom: 1px solid var(--desk-line); }
  .desk-row.top { order: 2; } .desk-row.bottom { order: 3; }
}
@media (max-width: 760px) {
  .sheet-head { flex-direction: row; justify-content: flex-start; }
  #sh-x { order: -1; }
  .desk-stage { min-height: 420px; }
  .gantry { width: calc(100% - 28px); left: 14px; }
}

/* ===================== v2 — the highway layout (TOLLWAY's own) ===================== */
.stream-canvas, .aurora { display: none; }
.sec > :first-child::before { width: 6px; height: 6px; transform: rotate(45deg); margin-right: 9px; }   /* warning diamond */
.kpi, .stat { font-family: var(--font-pixel); font-weight: 400; letter-spacing: .03em; }
.kpi { font-size: 2rem; color: var(--desk-accent); text-shadow: 0 0 10px rgba(255, 178, 30, .45); }
.stat { font-size: 1.05rem; }
.desk-stage { position: relative; overflow: hidden; background: #000; }
.road-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.road-callout { position: absolute; left: 0; top: 0; z-index: 3; }
.gantry { position: absolute; z-index: 2; left: 50%; top: 40%; width: 280px; transform: translateY(-100%); cursor: pointer; --vms-fs: 18px; }
.gantry .vms { min-height: 0; padding: 10px 12px; font-size: var(--vms-fs); text-align: center; align-items: center; }
.gantry-plate { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 6px; background: #00704a; color: #f2f4f0;
  border: 1px solid #f2f4f0; border-bottom: 0; border-radius: 3px 3px 0 0; font: 700 var(--fs-micro)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.gantry-plate span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantry-plate .tag { background: var(--desk-accent); color: #140c00; white-space: nowrap; }
.gantry:hover .gantry-plate { filter: brightness(1.15); }
.road-tip { position: absolute; z-index: 4; pointer-events: none; padding: 6px 8px; border: 1px solid var(--desk-accent); background: rgba(0, 0, 0, .9);
  font: 600 var(--fs-micro)/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--desk-ink); white-space: nowrap; }
.road-tip b { color: var(--desk-accent); font-size: var(--fs-data); }
.stage-legend { bottom: 12px; }

/* lanes list: one row per road, numbered left to right as they sit on the highway */
.lanes { display: flex; flex-direction: column; gap: 4px; }
.lane-row { --accent: var(--desk-accent); position: relative; display: grid; grid-template-columns: 22px 18px minmax(0, 1fr) auto auto; grid-template-rows: auto auto; gap: 3px 8px; align-items: center;
  width: 100%; padding: 5px 8px 6px 6px; border: 1px solid var(--desk-line); border-left: 2px solid var(--accent); border-radius: 2px; background: transparent; cursor: pointer;
  text-align: left; overflow: hidden; font: 400 var(--fs-data)/1.2 var(--font-mono); color: var(--desk-ink); transition: background .25s, border-color .25s; }
.lane-row:hover, .lane-row.hl { background: color-mix(in oklab, var(--accent) 8%, transparent); border-color: color-mix(in oklab, var(--accent) 55%, transparent); }
.shield { grid-row: span 2; width: 22px; height: 25px; display: grid; place-items: center; background: #00704a; color: #f2f4f0; border: 1.5px solid #f2f4f0;
  border-radius: 3px 3px 10px 10px; font: 800 .66rem/1 var(--font-sans); }
.lane-row.ex { --accent: var(--lane); }
.lane-row.ex .shield { background: #34265f; border-color: #cbb9ff; }
.li-ic { width: 18px; height: 18px; border-radius: 5px; overflow: hidden; background: #1b160c; display: grid; place-items: center; font: 700 .45rem/1 var(--font-mono); color: var(--accent); }
.li-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.li-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-tag { font: 700 var(--fs-micro)/1 var(--font-mono); padding: 2px 4px; border-radius: 2px; background: var(--accent); color: #000; text-transform: uppercase; white-space: nowrap; }
.li-pct { font-weight: 600; text-align: right; min-width: 4.4em; white-space: nowrap; }
.li-sub { grid-column: 2 / 5; font-size: var(--fs-micro); color: var(--desk-ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .02em; }
.li-bp { grid-column: 5; height: 3px; background: rgba(255, 61, 51, .6); position: relative; }
.li-bp i { position: absolute; inset: 0 auto 0 0; background: var(--head); }
.lane-row .fill { position: absolute; inset: 0; background: var(--accent); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.lane-row.acted .fill { animation: card-fill 1.6s var(--ease-out); }

.pzgrid { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.pzside .pzrow { gap: 16px; line-height: 1.75; }
.console { min-height: 96px; }

@media (min-width: 1024px) {
  .desk { display: grid; grid-template-columns: minmax(280px, 22vw) minmax(0, 1fr) minmax(300px, 24vw); grid-template-rows: auto minmax(0, 1fr); height: 100dvh; overflow: hidden; }
  .desk-bar { grid-column: 1 / -1; }
  .col { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: #000; }
  .col-l { border-right: 1px solid var(--desk-line); } .col-r { border-left: 1px solid var(--desk-line); }
  .col .panel + .panel { border-top: 1px solid var(--desk-line); }
  .log-panel { flex: 1; min-height: 120px; display: flex; flex-direction: column; }
  .log-panel .log-window { flex: 1; min-height: 0; }
  .desk-stage { min-height: 0; }
  html.hud-off .desk { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .desk-stage { order: 1; height: min(76vh, 660px); min-height: 460px; border-bottom: 1px solid var(--desk-line); }
  .col-l { order: 2; } .col-r { order: 3; }
  .col .panel + .panel { border-top: 1px solid var(--desk-line); }
  .col-l { border-bottom: 1px solid var(--desk-line); }
  .log-window { height: 260px; }
}
html.hud-off .col, html.hud-off .desk-bar { display: none; }
html.hud-off .desk-stage { height: 100dvh; }

/* ===================== v3 — bar order, sound, short screens ===================== */
.desk-bar .chips { margin-left: auto; }
.desk-bar > .grow { display: none; }
#bb-cta { flex: none; }
.chip.on#c-sound { border-color: var(--desk-accent); color: var(--desk-accent); }
#c-sound:not(.on) .dot { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
input.vol { -webkit-appearance: none; appearance: none; width: 70px; height: 26px; background: transparent; cursor: pointer; }
input.vol::-webkit-slider-runnable-track { height: 2px; background: var(--desk-line); }
input.vol::-moz-range-track { height: 2px; background: var(--desk-line); }
input.vol::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; border-radius: 50%; background: var(--desk-accent); box-shadow: 0 0 6px var(--desk-glow); }
input.vol::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--desk-accent); }
.log-line { grid-template-columns: 4.9em 6.2em 6.6em minmax(0, 1fr); }
.log-line .n { display: none; }
.log-line .who, .log-line > span:last-child { overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) {
  .col { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b2414 transparent; }
  .col::-webkit-scrollbar { width: 6px; } .col::-webkit-scrollbar-thumb { background: #2b2414; border-radius: 3px; }
}
/* laptops and short screens: compact rows so every panel fits without scrolling */
@media (min-width: 1024px) and (max-height: 900px) {
  .desk-bar { padding-top: 10px; padding-bottom: 10px; }
  :root { --fs-logo: clamp(1.7rem, 2.5vw, 2.2rem); }
  .panel { padding: 11px 16px; }
  .sec { margin-bottom: 8px; }
  .lanes { gap: 3px; }
  .lane-row { grid-template-rows: auto; padding: 4px 8px 4px 6px; }
  .shield { grid-row: auto; height: 20px; width: 20px; font-size: .6rem; }
  .li-sub { display: none; }
  .li-bp { grid-column: 2 / -1; grid-row: 2; height: 2px; }
  .mx .labels, .matrix { grid-auto-rows: 7px; }
  .mx .labels { font-size: .45rem; line-height: 7px; }
  .mxkey { margin-top: 6px; }
  .stats3 { margin: 8px 0; }
  .kpi { font-size: 1.7rem; }
  .console { min-height: 80px; }
  .list { gap: 5px; }
}
@media (max-width: 1023px) {
  #bb-cta { order: 1; margin-left: auto; }
  .desk-bar .chips { order: 2; margin-left: 0; }
}
@media (min-width: 1024px) and (max-width: 1499px) { .logo-sub { display: none; } }
@media (min-width: 1024px) and (max-width: 1365px) { #c-tps, #c-hide { display: none; } .desk-bar .chips { gap: 5px; } }
@media (min-width: 1024px) and (max-height: 760px) { .mxkey { display: none; } .stats3 { margin: 6px 0; } .legend4 { margin-top: 5px; } .kpi { font-size: 1.5rem; } }