/* ══════════════════════════════════════════════════════════════════════════════
   PROJECT GRYD — operator console.

   Built in the grammar of the reference: monospace throughout, everything inside
   bordered panels that carry a title bar with a right-aligned status label, data
   as labelled rows, a timestamped console, and one acid colour that only ever
   marks what is live. The page still has to hold on a single screen, so the whole
   vertical rhythm is measured in vh.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --hot: #CCF60E;          /* sampled from the mark — the live conductor */
  --bg: #07080A;
  --panel: #0B0D10;
  --head: #101317;
  --line: #1C2128;
  --line-2: #2A3038;

  --ink: #D9DEE3;
  --ink-2: #79818B;
  --ink-3: #4E555E;

  --ok: #4ADE80;
  --warn: #E5B84B;
  --err: #FF6B6B;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* a faint drawing grid, plus a bloom under the live column */
.sheet {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(760px 460px at 72% 44%, rgba(204,246,14,.055), transparent 72%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}
body > * { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
.hot { color: var(--hot); }
.ok  { color: var(--ok); }
.dim { color: var(--ink-3); }

/* ══ top rail ═══════════════════════════════════════════════════════════ */
.bar {
  display: flex; align-items: center; gap: clamp(10px, 2vw, 22px);
  padding: clamp(7px, 1.3vh, 13px) clamp(12px, 2.6vw, 26px);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 13, 16, .72);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand span { font-size: clamp(11px, 1.4vh, 13px); font-weight: 700; letter-spacing: .12em; }

.rail { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 16px);
        flex: 1 1 auto; min-width: 0; overflow: hidden; }
.chip {
  padding: 3px 9px; border-radius: 3px;
  background: var(--hot); color: #07080A;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
}
.stat { font-size: 10.5px; letter-spacing: .12em; color: var(--ink-2); white-space: nowrap; }
.stat.dim { color: var(--ink-3); }
.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hot); margin-right: 7px; vertical-align: 1px;
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(204,246,14,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(204,246,14,0); }
  100% { box-shadow: 0 0 0 0 rgba(204,246,14,0); }
}

.bar-end { display: flex; align-items: center; gap: 10px; flex: none; }
.ico {
  display: grid; place-items: center; width: 30px; height: 28px;
  border: 1px solid var(--line); color: var(--ink-2); border-radius: 3px;
}
.ico:hover { color: var(--hot); border-color: var(--line-2); }
.btn-hot {
  padding: 7px 14px; border-radius: 3px;
  background: var(--hot); color: #07080A;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
}
.btn-hot:hover { filter: brightness(1.12); }

/* ══ the two columns ════════════════════════════════════════════════════ */
main {
  flex: 1; width: 100%; max-width: 1320px; margin: 0 auto;
  padding: clamp(10px, 2.4vh, 34px) clamp(12px, 2.6vw, 26px);
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(14px, 2.4vw, 34px); align-items: center;
}

.kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(9px, 1.2vh, 10.5px); letter-spacing: .2em; color: var(--ink-2);
  margin-bottom: clamp(7px, 1.5vh, 16px);
}
.kicker i { width: 26px; height: 2px; background: var(--hot); flex: none; }

h1 {
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(30px, min(6.4vw, 8.6vh), 92px);
  line-height: .9;
  letter-spacing: .004em;
  text-transform: uppercase;
}

.lede {
  margin: clamp(8px, 1.7vh, 18px) 0 clamp(10px, 2vh, 22px);
  max-width: 56ch; color: var(--ink-2);
  font-size: clamp(10px, 1.42vh, 12.5px); line-height: 1.72;
}

/* ══ panels ═════════════════════════════════════════════════════════════ */
.panel { border: 1px solid var(--line); background: var(--panel); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: clamp(6px, 1.1vh, 10px) 13px;
  border-bottom: 1px solid var(--line); background: var(--head);
}
.panel-head b { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--ink); }
.panel-head span { font-size: 9.5px; letter-spacing: .13em; color: var(--ink-3); white-space: nowrap; }
.panel-body { padding: clamp(10px, 2vh, 18px) clamp(12px, 1.6vw, 18px); }
.panel-body.flush { padding: 0; }

/* ══ the span ═══════════════════════════════════════════════════════════ */
.span { display: block; width: 100%; height: clamp(58px, 11vh, 132px); }
.wire { fill: none; stroke: #262C34; stroke-width: 2; }
.wire.dim { stroke: #171C22; }
.pulse {
  fill: none; stroke: var(--hot); stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(204,246,14,.85));
  stroke-dasharray: 66 1600;
  animation: run 4.6s cubic-bezier(.55,0,.5,1) infinite;
}
@keyframes run {
  0%        { stroke-dashoffset: 0;     opacity: 0; }
  6%        { opacity: 1; }
  86%, 100% { stroke-dashoffset: -1666; opacity: 1; }
}

/* the console: rolling telemetry under the span */
.log {
  border-top: 1px solid var(--line);
  padding: clamp(5px, 1vh, 9px) 13px;
  font-size: clamp(8.5px, 1.15vh, 10px); line-height: 1.85; color: var(--ink-2);
  min-height: 3.2em;
}
.log b { color: var(--ink-3); font-weight: 400; margin-right: 8px; }
.log .t-ok   { color: var(--ok); }
.log .t-sys  { color: var(--ink-2); }
.log .t-warn { color: var(--warn); }
.log .t-load { color: var(--hot); }

/* ══ nameplate rows ═════════════════════════════════════════════════════ */
.plate-panel { margin-top: clamp(8px, 1.5vh, 14px); }
.rows { display: grid; grid-template-columns: 1fr 1fr; }
.rows > div {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: clamp(5px, 1vh, 9px) 13px;
  border-bottom: 1px solid var(--line);
}
/* the internal rule between the two columns */
.rows > div:nth-child(even) { border-left: 1px solid var(--line); }
.rows > div:nth-last-child(-n+2) { border-bottom: 0; }
.rows span { font-size: 9.5px; letter-spacing: .16em; color: var(--ink-3); }
.rows b { font-size: clamp(10px, 1.35vh, 12px); font-weight: 400; }

/* ══ the intake card ════════════════════════════════════════════════════ */
.intake { box-shadow: 0 0 0 1px rgba(204,246,14,.06), 0 24px 60px rgba(0,0,0,.5); }

.field-lab { font-size: 9.5px; letter-spacing: .16em; color: var(--ink-2); margin-bottom: 7px; }
.field-lab em { color: var(--hot); font-style: normal; }
.field-lab.mt { margin-top: clamp(9px, 1.8vh, 16px); }

/* the declaration, shown verbatim — nothing is posted that is not on screen */
.term {
  border: 1px solid var(--line-2); background: #060709;
  padding: clamp(8px, 1.5vh, 13px) 12px;
  font-size: clamp(9.5px, 1.3vh, 11.5px); line-height: 1.7; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
.term::before { content: "> "; color: var(--hot); }

.checks { list-style: none; display: grid; gap: clamp(3px, .7vh, 6px); }
.checks li {
  display: flex; gap: 9px; align-items: baseline;
  font-size: clamp(9.5px, 1.3vh, 11.5px); color: var(--ink-2);
}
.checks i { color: var(--hot); font-style: normal; flex: none; }

.btn-plate {
  position: relative; display: block; text-align: center;
  margin-top: clamp(10px, 2vh, 18px);
  padding: clamp(9px, 1.8vh, 15px) 16px;
  border: 1px solid var(--hot);
  background: linear-gradient(rgba(204,246,14,.09), rgba(204,246,14,.02));
  transition: background .16s, box-shadow .16s;
}
.btn-plate::before, .btn-plate::after {
  content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--hot);
}
.btn-plate::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.btn-plate::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.btn-plate .lab { display: block; font-size: 9.5px; letter-spacing: .22em; color: var(--hot); opacity: .8; }
.btn-plate .word {
  display: block; margin-top: 4px;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(24px, min(4.6vw, 4.6vh), 46px); line-height: 1.05;
  letter-spacing: .03em; color: var(--hot);
  text-shadow: 0 0 24px rgba(204,246,14,.32);
}
.btn-plate:hover, .btn-plate:focus-visible {
  background: var(--hot); box-shadow: 0 0 40px rgba(204,246,14,.28); outline: none;
}
.btn-plate:hover .word, .btn-plate:focus-visible .word { color: #07080A; text-shadow: none; }
.btn-plate:hover .lab,  .btn-plate:focus-visible .lab  { color: #07080A; opacity: .75; }

.fine {
  margin-top: clamp(7px, 1.4vh, 13px); text-align: center;
  font-size: clamp(8.5px, 1.15vh, 10px); color: var(--ink-3); line-height: 1.65;
}

/* ══ foot ═══════════════════════════════════════════════════════════════ */
.foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: clamp(7px, 1.3vh, 14px) clamp(12px, 2.6vw, 26px);
  border-top: 1px solid var(--line);
  font-size: 9.5px; letter-spacing: .12em; color: var(--ink-3);
}
.foot a:hover { color: var(--hot); }

/* ══ narrow ═════════════════════════════════════════════════════════════ */
@media (max-width: 940px) {
  /* stacked, the two columns become one tall one — so the ambient parts give way
     and the nameplate folds to a 2×2 block instead of four full-width rows. */
  main { grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 1.6vh, 16px); align-items: start; }
  h1 { font-size: clamp(26px, min(9.2vw, 6.4vh), 60px); }
  .lede { max-width: none; margin: clamp(6px, 1.2vh, 12px) 0 clamp(6px, 1.2vh, 12px);
          font-size: clamp(9.5px, 1.25vh, 11.5px); line-height: 1.62; }
  .span { height: clamp(46px, 7.6vh, 96px); }
  .log { display: none; }
  .plate-panel { margin-top: clamp(6px, 1.2vh, 12px); }
  .field-lab.mt { margin-top: clamp(7px, 1.3vh, 12px); }
  .panel-body { padding: clamp(9px, 1.6vh, 14px) 13px; }
  main { padding: clamp(8px, 1.4vh, 20px) clamp(12px, 2.6vw, 26px); }
  /* three panel headers stacked cost real height on a phone */
  .panel-head { padding: clamp(4px, .8vh, 8px) 11px; }
  .rows > div { padding: clamp(4px, .85vh, 8px) 11px; }
  .kicker { margin-bottom: clamp(5px, 1vh, 10px); }
  .btn-plate { margin-top: clamp(8px, 1.5vh, 14px); }
}
@media (max-width: 720px) {
  /* On a phone the rail keeps the ticker chip alone — the state it used to spell out is
     already on the TRANSMISSION and NAMEPLATE headers, and crowding it here pushed the
     text under the buttons. */
  .rail .stat { display: none; }
  .brand span { font-size: 11px; }
  .foot .dim { display: none; }
}
@media (max-width: 420px) {
  .btn-hot { padding: 7px 10px; font-size: 10px; }
  .kicker i { width: 16px; }
}

/* On a short screen the supporting copy goes first; the headline, the line and
   the breaker are what the page exists for and never leave. Stacked, the column is
   far taller for the same height, so the same steps have to fire much earlier. */
@media (max-height: 720px) { .fine { display: none; } }
@media (max-height: 640px) { .log  { display: none; } }
@media (max-height: 560px) { .lede { display: none; } .plate-panel { display: none; } }

@media (max-width: 940px) and (max-height: 920px) { .fine { display: none; } }
@media (max-width: 940px) and (max-height: 780px) { .plate-panel { display: none; } }
@media (max-width: 940px) and (max-height: 700px) {
  .lede { display: none; }
  .span { height: clamp(40px, 6vh, 70px); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; stroke-dasharray: none; opacity: .9; }
  .dot { animation: none; }
  .btn-plate { transition: none; }
}


/* ══ whitelist form ════════════════════════════════════════════════════════
   Two fields, two tasks, one plate. The task rows are separated by a rule rather
   than boxed, so they read as a checklist instead of two more inputs. */

.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld .field-lab { margin: 0; }
.fld.mt { margin-top: 12px; }

.fld input[type="text"], .fld input:not([type]) {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line, #1E242C);
  border-radius: 3px;
  background: #0B0D11;
  color: #E7EBF0;
  font: inherit;
  font-size: 13px;
  letter-spacing: .02em;
  outline: none;
}
.fld input::placeholder { color: #4A525E; }
.fld input:focus { border-color: #CCF60E; box-shadow: 0 0 0 1px rgba(204,246,14,.25); }
.fld input:disabled { opacity: .5; }

.tasks {
  margin: 14px 0 0;
  border: 1px solid var(--line, #1E242C);
  border-radius: 3px;
  background: #0B0D11;
  padding: 4px 12px;
}
.task {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(30,36,44,.9);
  font-size: 12.5px;
  color: #C9D0D9;
  cursor: pointer;
}
.task:last-child { border-bottom: 0; }
.task input {
  appearance: none;
  flex: 0 0 auto;
  width: 15px; height: 15px;
  border: 1px solid #39414C;
  border-radius: 2px;
  background: #07080A;
  cursor: pointer;
}
.task input:checked { border-color: #CCF60E; background: #CCF60E; }
.task input:checked::after { content: "✓"; display: block; color: #07080A; font-size: 11px; line-height: 13px; text-align: center; font-weight: 700; }
.task a { color: #CCF60E; text-decoration: none; border-bottom: 1px solid rgba(204,246,14,.4); }
.task a:hover { border-color: #CCF60E; }

button.btn-plate { width: 100%; border: 0; cursor: pointer; font: inherit; text-align: left; margin-top: 14px; }
button.btn-plate.busy { opacity: .55; pointer-events: none; }

.fine.bad { color: #FF6B6B; }
.fine.good { color: #CCF60E; }

@media (max-height: 780px) { .task { padding: 9px 0; } .fld input { padding: 9px 11px; } }
@media (max-height: 680px) { .task { padding: 7px 0; font-size: 11.5px; } .fld input { padding: 7px 10px; } .fld.mt { margin-top: 9px; } }
@media (max-width: 940px) { .span-panel { display: none; } }
@media (max-width: 940px) and (max-height: 1000px) { .plate-panel { display: none; } .lede { display: none; } }