:root {
  --ink: #0d0e0c; --paper: #ece6d6; --dim: #8a8672; --line: #2b2c25; --faint: #55524a;
  --accent: #FF5A1F; --ok: #8fd694; --bad: #ff6a45;
  --serif: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--ink); color: var(--paper); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; font-family: var(--serif); }
#app { max-width: 680px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column;
  padding: max(20px, env(safe-area-inset-top)) 20px max(36px, env(safe-area-inset-bottom)); }
[hidden] { display: none !important; }

.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.logo { border: 3px solid var(--accent); padding: 5px; font: 900 24px/22px 'Arial Black', Arial, Helvetica, sans-serif;
  letter-spacing: .02em; color: var(--accent); user-select: none; -webkit-user-select: none; }
.clock { justify-self: end; font: 12px/1 var(--mono); letter-spacing: .14em; color: var(--dim); }

.hero { font-weight: 400; font-size: clamp(52px, 15vw, 112px); line-height: .9; letter-spacing: -.035em; margin: 12vh 0 30px; }
.btn { align-self: flex-start; font: 13px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 0; border-radius: 0; padding: 16px 22px; cursor: pointer; }
.btn:active { background: var(--accent); }
.field { display: block; max-width: 360px; margin-bottom: 26px; }
.field span { display: block; font: 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.field input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--dim); color: var(--paper);
  font: 22px var(--serif); padding: 8px 0; border-radius: 0; outline: 0; }
.field input:focus { border-bottom-color: var(--accent); }
#msg { font: 13px/1.5 var(--mono); color: var(--dim); margin-top: 22px; min-height: 1.5em; }
#msg[data-kind="err"] { color: var(--bad); }
.warn { font: 12px var(--mono); color: var(--bad); padding: 14px 0 0; }
.link { align-self: flex-start; margin-top: 34px; background: none; border: 0; color: var(--dim);
  font: 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; padding: 0; }

.stage { width: 100%; margin-top: 30px; }
.yard { display: block; width: 100%; height: auto; overflow: visible; }
.yard .ground, .yard .pillar, .yard .rail, .yard .bar { fill: none; vector-effect: non-scaling-stroke; stroke: var(--paper); }
.yard .ground { stroke-width: 1; }
.yard .pillar { fill: var(--ink); stroke-width: 1.5; }
.yard .rail { stroke-width: 1.5; }
.yard .bar { stroke-width: 1; }
.yard .latch { fill: var(--accent); }
.gatedraw[data-online="false"] .rail, .gatedraw[data-online="false"] .bar,
.gatedraw[data-online="null"] .rail, .gatedraw[data-online="null"] .bar { stroke: var(--faint); }
.gatedraw[data-online="false"] .rail { stroke-dasharray: 6 4; }
.gatedraw[data-online="false"] .latch, .gatedraw[data-online="null"] .latch { opacity: .45; }
.gatedraw.pulse .latch { animation: latch 1.1s ease-in-out 2; }
@keyframes latch { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .gatedraw.pulse .latch { animation: none; } }

.cols { display: grid; grid-template-columns: 1fr 1fr; padding: 0 18.235%; margin-top: 26px; }
.sub { font: 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: -4px; }
.cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-width: 0; }
.cell h2 { font-weight: 400; font-size: clamp(20px, 5.6vw, 30px); line-height: 1.05; letter-spacing: -.01em; }
.st { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; font: 13px var(--mono); color: var(--dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.cell[data-online="true"] .dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(143, 214, 148, .14); }
.cell[data-online="false"] .dot { background: var(--bad); }
.res { font: 12px/1.4 var(--mono); color: var(--dim); min-height: 1.4em; }
.res[data-kind="err"] { color: var(--bad); }

.hold { position: relative; width: clamp(64px, 18vw, 88px); aspect-ratio: 1; margin-top: 6px; padding: 0;
  background: none; border: 0; color: var(--paper); cursor: pointer; touch-action: manipulation;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.hold svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.hold .track { fill: none; stroke: var(--line); stroke-width: 3; }
.hold .prog { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 276.5; stroke-dashoffset: 276.5;
  transition: stroke-dashoffset .18s ease-out; }
.hold.holding .prog { stroke-dashoffset: 0; transition: stroke-dashoffset .7s linear; }
.hold.sent .prog { stroke: var(--ok); stroke-dashoffset: 0; transition: stroke .2s; }
.hold .label { position: absolute; inset: 0; display: grid; place-items: center;
  font: clamp(9.5px, 2.8vw, 11px) var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hold:disabled { opacity: .3; cursor: not-allowed; }
.hold:active:not(:disabled) .track { stroke: var(--accent); }
.hold:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }