/* BLOCKSPEED - brushed-metal instrument panel */

:root {
  --panel-1: #3c4149;
  --panel-2: #2b3037;
  --panel-3: #23272d;
  --ink: #e8eef6;
  --ink-2: #9aa4b1;
  --ink-3: #6b7480;
  --good: #3fb950;
  --warn: #d29922;
  --crit: #f0503a;
  --led-off: #2a2f36;
  --lcd: #7df3c0;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(120% 80% at 50% -10%, #1d2127 0%, #0d0f12 60%, #08090b 100%);
  color: var(--ink);
  font: 21px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---------- the panel itself ---------- */
.panel {
  max-width: 2250px;
  margin: 0 auto;
  padding: 27px;
  border-radius: 21px;
  /* brushed aluminium: fine vertical striations over a soft sheen */
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.028) 0px, rgba(255,255,255,.028) 1.5px,
      rgba(0,0,0,.022) 1.5px, rgba(0,0,0,.022) 4.5px),
    linear-gradient(160deg, var(--panel-1) 0%, var(--panel-2) 45%, var(--panel-3) 100%);
  border: 1.5px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.18),
    inset 0 -1.5px 0 rgba(0,0,0,.5),
    0 36px 90px rgba(0,0,0,.6);
}

/* ---------- masthead ---------- */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding-bottom: 21px;
  margin-bottom: 24px;
  border-bottom: 1.5px solid rgba(0,0,0,.45);
  box-shadow: 0 1.5px 0 rgba(255,255,255,.08);
}

.brandblock { margin-right: auto; }
.brand {
  font: 800 37.5px/1 var(--sans);
  letter-spacing: .22em;
  color: #f2f6fb;
  text-shadow: 0 1.5px 0 rgba(0,0,0,.7), 0 0 33px rgba(160,200,255,.14);
}
.brandsub {
  margin-top: 7.5px;
  font: 600 13.5px/1 var(--sans);
  letter-spacing: .2em;
  color: var(--ink-3);
}

/* ---------- odometer ---------- */
.odo-housing {
  padding: 12px 18px 13.5px;
  border-radius: 9px;
  background: linear-gradient(180deg, #0a0b0d, #131519);
  border: 1.5px solid rgba(0,0,0,.7);
  box-shadow: inset 0 3px 10.5px rgba(0,0,0,.9), 0 1.5px 0 rgba(255,255,255,.1);
}
.odo-cap {
  font: 600 12px/1 var(--sans);
  letter-spacing: .22em;
  color: var(--ink-3);
  margin-bottom: 9px;
  text-align: center;
}
.odometer { display: flex; gap: 3px; }
.odo-col {
  position: relative;
  width: 1.05em;
  height: 1.5em;
  overflow: hidden;
  font: 700 37.5px/1.5 var(--mono);
  background: linear-gradient(180deg, #2a2e34 0%, #14171b 45%, #2a2e34 100%);
  border-radius: 3px;
  box-shadow: inset 0 0 9px rgba(0,0,0,.85);
}
.odo-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  /* height stays auto (20 rows) so one digit step is exactly 5% of the strip */
  white-space: pre;
  text-align: center;
  color: #f4f7fb;
  transition: transform .55s cubic-bezier(.2,.9,.25,1);
}
.odo-col.rolled { animation: odoflash .5s ease-out; }
@keyframes odoflash {
  0%   { box-shadow: inset 0 0 9px rgba(0,0,0,.85), 0 0 21px rgba(125,243,192,.8); }
  100% { box-shadow: inset 0 0 9px rgba(0,0,0,.85), 0 0 0 rgba(125,243,192,0); }
}

/* ---------- indicator lamps ---------- */
.lamps { display: flex; flex-wrap: wrap; gap: 12px; }
.lamp {
  display: flex;
  align-items: center;
  gap: 10.5px;
  padding: 9px 16.5px 9px 12px;
  border-radius: 7.5px;
  background: linear-gradient(180deg, #1b1f24, #121519);
  border: 1.5px solid rgba(0,0,0,.6);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.06);
  font: 700 13.5px/1 var(--sans);
  letter-spacing: .13em;
  color: var(--ink-3);
}
.lamp .bulb {
  width: 13.5px; height: 13.5px;
  border-radius: 50%;
  background: var(--led-off);
  box-shadow: inset 0 1.5px 1.5px rgba(0,0,0,.8);
}
.lamp.on { color: var(--ink); }
.lamp.on .bulb { background: var(--good); box-shadow: 0 0 13.5px var(--good), inset 0 0 3px rgba(255,255,255,.7); }
.lamp.warn.on .bulb { background: var(--warn); box-shadow: 0 0 13.5px var(--warn), inset 0 0 3px rgba(255,255,255,.7); }
.lamp.crit.on .bulb { background: var(--crit); box-shadow: 0 0 15px var(--crit), inset 0 0 3px rgba(255,255,255,.7); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- lamp explanation popup ---------- */
.lamp { cursor: help; }
.lamp:focus-visible { outline: 2px solid var(--lcd); outline-offset: 3px; }

.lamp-tip[hidden] { display: none; }
.lamp-tip {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: max-content;
  max-width: 400px;
  padding: 16px 18px;
  border-radius: 9px;
  background: #0b0d10;
  border: 1.5px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.75);
  pointer-events: none;
  font: 500 16.5px/1.45 var(--sans);
  color: var(--ink-2);
}
.lt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.lt-head strong {
  font: 700 15px/1 var(--sans);
  letter-spacing: .16em;
  color: var(--ink);
}
.lt-badge {
  font: 700 12px/1 var(--sans);
  letter-spacing: .14em;
  font-style: normal;
  padding: 5px 9px;
  border-radius: 4px;
  color: var(--ink-3);
  background: rgba(255,255,255,.07);
}
.lt-badge.ok   { color: var(--good); background: rgba(63,185,80,.14); }
.lt-badge.warn { color: var(--warn); background: rgba(210,153,34,.16); }
.lt-badge.crit { color: var(--crit); background: rgba(240,80,58,.16); }
.lt-now {
  font: 600 16.5px/1.35 var(--mono);
  color: var(--lcd);
}
.lt-rule { font-size: 15px; color: var(--ink-2); }
.lt-why { font-size: 15px; color: var(--ink-3); }

@media (max-width: 1080px) {
  .lamp-tip { max-width: calc(100vw - 24px); }
}

/* ---------- dial bank ---------- */
.dialbank {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 21px;
  margin-bottom: 24px;
}
.well {
  margin: 0;
  padding: 13.5px;
  border-radius: 50%;
  aspect-ratio: 1;
  background: linear-gradient(160deg, #1a1d22, #2c3138);
  box-shadow:
    inset 0 4.5px 12px rgba(0,0,0,.75),
    inset 0 -3px 6px rgba(255,255,255,.07),
    0 3px 7.5px rgba(0,0,0,.45);
}
.well canvas { width: 100%; height: 100%; display: block; }
.well.small { padding: 7.5px; }

/* ---------- lower deck ---------- */
.deck {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr .95fr;
  align-items: start;
  gap: 21px;
}
.module {
  padding: 21px;
  border-radius: 13.5px;
  background: linear-gradient(180deg, rgba(10,12,15,.72), rgba(16,19,23,.62));
  border: 1.5px solid rgba(0,0,0,.55);
  box-shadow: inset 0 3px 12px rgba(0,0,0,.6), 0 1.5px 0 rgba(255,255,255,.07);
  min-width: 0;
}
.module h2 {
  margin: 0 0 18px;
  font: 700 15px/1 var(--sans);
  letter-spacing: .2em;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.module h2 .unit {
  font: 500 13.5px/1 var(--sans);
  letter-spacing: .1em;
  color: var(--ink-3);
  text-transform: none;
}
.modfoot {
  display: flex;
  flex-wrap: wrap;
  gap: 21px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1.5px solid rgba(255,255,255,.07);
  font: 500 15px/1.3 var(--sans);
  letter-spacing: .06em;
  color: var(--ink-3);
}
.modfoot b { font: 700 19.5px/1 var(--mono); color: var(--ink); display: block; margin-bottom: 4.5px; }

/* ---------- fee bands ---------- */
.feebands { position: relative; display: flex; flex-direction: column; gap: 7.5px; }
.fb-row {
  display: grid;
  grid-template-columns: 78px 1fr 96px;
  align-items: center;
  gap: 13.5px;
  cursor: default;
  border-radius: 4.5px;
}
.fb-row:hover { background: rgba(255,255,255,.05); }
.fb-row.empty { opacity: .42; }
.fb-label { font: 600 15px/1 var(--mono); color: var(--ink-2); text-align: right; }
.fb-track {
  height: 19.5px;
  background: rgba(255,255,255,.055);
  border-radius: 4.5px;
  overflow: hidden;
}
.fb-bar {
  display: block;
  height: 100%;
  width: 0;
  /* 6px rounded data-end, anchored flat against the baseline */
  border-radius: 0 6px 6px 0;
  transition: width .5s cubic-bezier(.3,.9,.3,1);
}
.fb-val { font: 600 15px/1 var(--mono); color: var(--ink-2); }

.chart-tip[hidden] { display: none; }
.chart-tip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 15px;
  border-radius: 9px;
  background: #0b0d10;
  border: 1.5px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 33px rgba(0,0,0,.7);
  font: 500 16.5px/1.35 var(--sans);
  color: var(--ink-2);
  white-space: nowrap;
}
.chart-tip strong { color: var(--ink); font: 700 16.5px/1.35 var(--mono); }

/* ---------- block strip ---------- */
.blockstrip {
  display: flex;
  gap: 9px;
  align-items: flex-end;
  overflow-x: auto;
  /* fade the clipped edge so a scrolled-off block reads as scrollable, not broken */
  mask-image: linear-gradient(90deg, transparent 0, #000 36px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px);
  padding-bottom: 9px;
  min-height: 162px;
}
.blk {
  flex: 0 0 auto;
  width: 75px;
  border-radius: 6px 6px 4.5px 4.5px;
  padding: 9px 6px 7.5px;
  text-align: center;
  background: linear-gradient(180deg, #2f3640, #1a1e24);
  border: 1.5px solid rgba(255,255,255,.1);
  box-shadow: 0 3px 9px rgba(0,0,0,.5);
  cursor: default;
}
.blk:hover { border-color: rgba(255,255,255,.3); }
.blk.fresh { animation: landed 1.4s ease-out; }
@keyframes landed {
  0%   { transform: translateY(-24px); box-shadow: 0 0 33px rgba(125,243,192,.9); }
  100% { transform: translateY(0); box-shadow: 0 3px 9px rgba(0,0,0,.5); }
}
.blk-h { font: 700 13.5px/1 var(--mono); color: var(--ink-3); }
.blk-fill {
  height: 60px;
  margin: 7.5px 0;
  border-radius: 3px;
  background: rgba(255,255,255,.07);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.blk-fill i { display: block; width: 100%; background: linear-gradient(180deg, #f2b93b, #c46a10); }
.blk-sz { font: 700 15px/1 var(--mono); color: var(--ink); }
.blk-tx { margin-top: 4.5px; font: 500 12px/1 var(--mono); color: var(--ink-3); }

/* ---------- trend sparklines ---------- */
#mod-trend, #mod-plate { grid-column: 1 / -1; }
.trend { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.trend-row { min-width: 0; }
.trend-cap {
  display: block;
  margin-bottom: 9px;
  font: 700 13.5px/1 var(--sans);
  letter-spacing: .14em;
  color: var(--ink-2);
}
.trend-cap i { font-style: normal; color: var(--ink-3); letter-spacing: .08em; }
.spark { display: block; width: 100%; height: 144px; }

/* ---------- VU meters ---------- */
.vu { display: flex; flex-direction: column; gap: 12px; margin-bottom: 21px; }
.vu-row { display: grid; grid-template-columns: 33px 1fr 105px; align-items: center; gap: 13.5px; }
.vu-cap { font: 700 13.5px/1 var(--sans); letter-spacing: .12em; color: var(--ink-3); }
.vu-bar {
  width: 100%;
  height: 24px;
  display: block;
  padding: 3px;
  border-radius: 4.5px;
  background: #0a0c0f;
  box-shadow: inset 0 1.5px 6px rgba(0,0,0,.9);
}
.vu-val { font: 600 15px/1 var(--mono); color: var(--ink-2); text-align: right; }

.minidials { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 21px; }

/* ---------- readouts ---------- */
.readouts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5px;
  background: rgba(255,255,255,.07);
  border-radius: 7.5px;
  overflow: hidden;
}
.readouts > div {
  background: #0c0e12;
  padding: 10.5px 13.5px;
  min-width: 0;
}
.readouts dt {
  font: 600 12px/1 var(--sans);
  letter-spacing: .14em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.readouts dd {
  margin: 0;
  font: 600 16.5px/1.2 var(--mono);
  color: var(--lcd);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- foot ---------- */
.footbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1.5px solid rgba(0,0,0,.45);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.07);
  font: 600 13.5px/1 var(--sans);
  letter-spacing: .14em;
  color: var(--ink-3);
}
.status { margin-right: auto; }
.status.live { color: var(--good); }
.status.down { color: var(--crit); }
.srcinfo { color: var(--ink-3); letter-spacing: .1em; text-align: right; }
.rivet {
  width: 13.5px; height: 13.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #9aa1ad, #363b44 65%, #1b1e23);
  box-shadow: inset 0 -1.5px 1.5px rgba(0,0,0,.7), 0 1.5px 0 rgba(255,255,255,.1);
  flex: 0 0 auto;
}

/* ---------- responsive ---------- */
@media (max-width: 1860px) {
  .dialbank { grid-template-columns: repeat(3, 1fr); }
  .deck { grid-template-columns: 1fr 1fr; }
  .readouts { grid-template-columns: repeat(4, 1fr); }
  /* full width would strand the mini dials, so pair them with the VU meters */
  #mod-net {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 36px;
  }
  #mod-net h2 { grid-column: 1 / -1; }
  #mod-net .vu { margin-bottom: 0; }
  #mod-net .minidials { margin-bottom: 0; width: 420px; }
  #mod-net .minidials { max-width: 480px; }
}
@media (max-width: 1080px) {
  body { padding: 15px; }
  .panel { padding: 18px; }
  .dialbank { grid-template-columns: repeat(2, 1fr); gap: 15px; }
  .deck { grid-template-columns: 1fr; }
  #mod-trend, #mod-plate, #mod-net { grid-column: auto; }
  #mod-net { display: block; }
  #mod-net .vu { margin-bottom: 21px; }
  #mod-net .minidials { width: auto; }
  .trend { grid-template-columns: 1fr; }
  .readouts { grid-template-columns: 1fr 1fr; }
  .brand { font-size: 28.5px; }
  .odo-col { font-size: 28.5px; }
  .masthead { gap: 18px; }
  .readouts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .odo-strip, .fb-bar { transition: none; }
  .blk.fresh, .lamp.crit.on .bulb, .odo-col.rolled { animation: none; }
}