/* Gauge. One object: a riveted steel instrument board, bolted to the wall of an engine room.
   Every surface on this page is a generated picture (nine sliced), never a bordered rectangle. */

@font-face {
  font-family: "Departure Mono";
  src: url("/font/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --steel: #102034;
  --steel-lit: #304c68;
  --steel-dark: #081220;
  --brass: #d48c18;
  --brass-hi: #f2c75c;
  --brass-lo: #8c5408;
  --cream: #fcf8ec;
  --red: #d2321f;
  --red-hot: #ff8a6a;
  --phos: #90b858;
  --phos-hi: #d8ff7a;
  --phos-dim: #4c6028;
  --glass: #040a06;

  --t-fine: 16.5px;
  --t-body: 22px;
  --t-title: 33px;
  --t-value: 44px;

  --slice-board: 48;
  --slice-screen: 23;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #06101c;
  color: var(--cream);
  font-family: "Departure Mono", ui-monospace, "Courier New", monospace;
  font-size: var(--t-body);
  line-height: 1.45;
  overflow-x: hidden;
}

img { display: block; image-rendering: pixelated; }

/* the world behind the board: the bulkhead, blurred, with its own slow clocks */
#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the board */

.board {
  position: relative;
  z-index: 1;
  width: min(1560px, calc(100vw - 72px));
  margin: 44px auto 56px;
  padding: 44px;
  border-style: solid;
  border-width: 48px;
  border-image: url("/img/board-plate.png") var(--slice-board) / 48px / 0 stretch;
  background: url("/img/steel-tile.png") repeat;
  background-size: 256px 256px;
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.72);
}

/* ------------------------------------------------------------------ the head */

.head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 32px;
}

.head::after,
.fleet::before,
.state-band::before,
.bind::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(48, 76, 104, 0.55);
}

.head::after { bottom: 0; }
.fleet::before,
.state-band::before,
.bind::before { top: 0; }

.head-name { min-width: 0; }

.wordmark {
  width: 300px;
  height: auto;
  margin-bottom: 14px;
}

.premise {
  margin: 0;
  max-width: 44ch;
  color: var(--cream);
  font-size: var(--t-body);
}

.head-chip {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}

.chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 232px;
  padding: 18px 28px;
  border-style: solid;
  border-width: 23px;
  border-image: url("/img/screen-plate.png") var(--slice-screen) / 23px / 0 stretch;
  background: var(--glass);
  text-align: right;
}

.chip-label,
.band-label,
.screen-label,
.field label {
  color: var(--phos-dim);
  font-size: var(--t-fine);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chip-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--phos-hi);
  font-size: var(--t-title);
  text-shadow: 0 0 14px rgba(144, 184, 88, 0.55);
}

.lever {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 28px;
  border: 0;
  background: linear-gradient(180deg, var(--brass) 0%, var(--brass-lo) 100%);
  box-shadow: inset 0 3px 0 var(--brass-hi), inset 0 -3px 0 #5e3604, 0 6px 0 #3a2203;
  color: #1b1003;
  font: inherit;
  font-size: var(--t-body);
  cursor: pointer;
}

.lever img { width: 52px; height: auto; }
.lever:hover { filter: brightness(1.08); }
.lever:active { transform: translateY(3px); box-shadow: inset 0 3px 0 var(--brass-hi), inset 0 -3px 0 #5e3604, 0 3px 0 #3a2203; }
.lever[aria-pressed="true"] img { transform: scaleX(-1); }

/* ------------------------------------------------------------------ the deck */

.deck {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr) 452px;
  gap: 40px;
  align-items: stretch;
  padding: 40px 0;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.source {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 136px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  font: inherit;
  font-size: var(--t-fine);
  text-align: center;
  cursor: pointer;
}

.source-chip {
  position: relative;
  width: 90px;
  height: 90px;
  background: url("/img/chip-hex.png") center / contain no-repeat;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.source-chip .source-icon {
  position: absolute;
  inset: 26%;
  width: 48%;
  height: 48%;
  background-repeat: no-repeat;
  background-size: 500% 100%;
  filter: brightness(0.18) saturate(0);
}

.source:hover .source-chip,
.source[aria-pressed="true"] .source-chip {
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px rgba(242, 199, 92, 0.7));
}

.source[aria-pressed="true"] .source-name { color: var(--brass-hi); }

/* the dotted run between the chips, drawn as the rail's own background, not as an element */
.rail::before {
  content: "";
  position: absolute;
  z-index: -1;
}

.dial-well {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-width: 0;
}

.dial {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
}

.dial-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The needle picture is centred on its own pivot, so it is placed with its centre on the face's
   hub (49.2% / 49.1% of the face) and sized so its point stops just inside the ticks. */
.dial-needle {
  position: absolute;
  left: 13.2%;
  top: 13.1%;
  width: 72%;
  height: 72%;
  transform-origin: 50% 50%;
  transition: rotate 1.1s cubic-bezier(0.22, 1.4, 0.4, 1);
  rotate: -135deg;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.dial-plate {
  width: 100%;
  max-width: 460px;
  padding: 22px 32px;
  border-style: solid;
  border-width: 23px;
  border-image: url("/img/screen-plate.png") var(--slice-screen) / 23px / 0 stretch;
  background: var(--glass);
  text-align: center;
}

.dial-ticker {
  margin: 0;
  color: var(--phos-hi);
  font-size: var(--t-title);
  text-shadow: 0 0 16px rgba(144, 184, 88, 0.5);
  overflow-wrap: anywhere;
}

.dial-source {
  margin: 6px 0 0;
  color: var(--phos);
  font-size: var(--t-fine);
  overflow-wrap: anywhere;
}

.claim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 460px;
  padding: 22px 28px;
  border-style: solid;
  border-width: 23px;
  border-image: url("/img/screen-plate.png") var(--slice-screen) / 23px / 0 stretch;
  background: var(--glass);
  text-align: center;
}

.claim-line {
  flex: 1 1 200px;
  min-width: 0;
  color: var(--phos);
  font-size: var(--t-fine);
  overflow-wrap: anywhere;
}

.readouts {
  display: grid;
  gap: 16px;
}

.screen {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 20px 28px;
  border-style: solid;
  border-width: 23px;
  border-image: url("/img/screen-plate.png") var(--slice-screen) / 23px / 0 stretch;
  background: var(--glass);
}

.screen-value {
  color: var(--phos-hi);
  font-size: var(--t-value);
  line-height: 1.15;
  text-shadow: 0 0 18px rgba(144, 184, 88, 0.45);
  overflow-wrap: anywhere;
}

.screen-value.is-burning { color: #ffd05a; text-shadow: 0 0 18px rgba(255, 170, 40, 0.5); }
.screen-value.is-paying { color: var(--red-hot); text-shadow: 0 0 18px rgba(255, 90, 50, 0.5); }
.screen-value.is-waiting { color: var(--phos-dim); text-shadow: none; font-size: var(--t-title); }

/* ------------------------------------------------------------------ the fleet */

.fleet,
.state-band,
.bind {
  position: relative;
  padding: 36px 0 0;
}

.band-title {
  margin: 0 0 24px;
  color: var(--cream);
  font-size: var(--t-title);
  font-weight: 400;
  text-align: center;
}

.fleet-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 24px;
}

.unit {
  display: flex;
  flex: 1 1 180px;
  max-width: 260px;
  min-width: 150px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 0 14px;
  border: 0;
  background: none;
  color: var(--cream);
  font: inherit;
  cursor: pointer;
}

.unit-dial {
  position: relative;
  width: 132px;
  height: 132px;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.unit-dial img { position: absolute; inset: 0; width: 100%; height: 100%; }
.unit-dial .unit-needle {
  left: 13.2%;
  top: 13.1%;
  width: 72%;
  height: 72%;
  transform-origin: 50% 50%;
  transition: rotate 1.1s cubic-bezier(0.22, 1.4, 0.4, 1);
}

.unit:hover .unit-dial,
.unit[aria-pressed="true"] .unit-dial {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(242, 199, 92, 0.65));
}

.unit-name {
  max-width: 100%;
  font-size: var(--t-body);
  overflow-wrap: anywhere;
}

.unit-state { font-size: var(--t-fine); color: var(--phos); }
.unit-state.is-paying { color: var(--red-hot); }
.unit-state.is-burning { color: var(--brass-hi); }

/* ------------------------------------------------------------- the state band */

.state-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.state-word { display: flex; align-items: center; gap: 24px; min-width: 0; }
.state-word .lamp { width: 64px; height: auto; }
.state-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.state-text strong {
  font-size: var(--t-title);
  font-weight: 400;
  color: var(--cream);
  overflow-wrap: anywhere;
}

.pressure { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.segments {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  gap: 4px;
  height: 34px;
}

.segments i {
  display: block;
  background: #0d1b12;
  box-shadow: inset 0 0 0 2px #16281a;
}

.segments i.on {
  background: var(--phos);
  box-shadow: inset 0 0 0 2px var(--phos-hi), 0 0 10px rgba(144, 184, 88, 0.7);
}

.segments.is-paying i.on {
  background: var(--red);
  box-shadow: inset 0 0 0 2px var(--red-hot), 0 0 10px rgba(255, 90, 50, 0.6);
}

.pressure-value { color: var(--phos-hi); font-size: var(--t-title); }

/* ------------------------------------------------------------------- the case */

.case {
  margin-top: 40px;
  border-style: solid;
  border-width: 26px;
  border-image: url("/img/case-plate.png") 34 / 26px / 0 stretch;
  background: rgba(8, 18, 32, 0.92);
}

.case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 45%, var(--brass-lo) 100%);
  color: #1b1003;
}

.case-title { font-size: var(--t-body); }
.case-ticker { color: #3c2405; }

.case-latch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe9a8 0%, var(--brass) 55%, #5e3604 100%);
  box-shadow: inset 0 0 0 3px #3a2203;
}

.case-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding: 32px;
}

.ca-block { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.ca-row { display: flex; align-items: stretch; gap: 16px; min-width: 0; }

.ca {
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px 30px;
  background: var(--glass);
  box-shadow: inset 0 0 0 3px #1d3450;
  color: var(--phos-hi);
  font-family: inherit;
  font-size: var(--t-body);
  overflow-wrap: anywhere;
  user-select: all;
}

.ca.is-empty { color: var(--phos-dim); }

.ca-note { color: var(--steel-lit); font-size: var(--t-fine); }

.key {
  min-height: 56px;
  padding: 14px 30px;
  border: 0;
  background: linear-gradient(180deg, var(--brass) 0%, var(--brass-lo) 100%);
  box-shadow: inset 0 3px 0 var(--brass-hi), inset 0 -3px 0 #5e3604, 0 5px 0 #3a2203;
  color: #1b1003;
  font: inherit;
  font-size: var(--t-body);
  text-align: center;
  cursor: pointer;
}

.key:hover:not(:disabled) { filter: brightness(1.08); }
.key:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 3px 0 var(--brass-hi), inset 0 -3px 0 #5e3604, 0 2px 0 #3a2203; }
.key:disabled { background: #3b4a5c; box-shadow: inset 0 3px 0 #556678, inset 0 -3px 0 #27323f; color: #8da0b4; cursor: not-allowed; }
.key-wide { min-width: 240px; }
.key-go { background: linear-gradient(180deg, #e2563c 0%, #8c1208 100%); box-shadow: inset 0 3px 0 #ff9a7a, inset 0 -3px 0 #5e0b04, 0 5px 0 #3a0702; color: var(--cream); }

.case-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 26px;
  text-align: center;
  background: linear-gradient(180deg, #27405c 0%, #15263a 100%);
  box-shadow: inset 0 3px 0 #3f5e80, inset 0 -3px 0 #0b1726, 0 5px 0 #060e18;
  color: var(--cream);
  font-size: var(--t-body);
  text-decoration: none;
}

.link img { flex: 0 0 auto; width: 24px; height: 24px; image-rendering: auto; }
.link:hover { filter: brightness(1.12); }
.link:active { transform: translateY(3px); box-shadow: inset 0 3px 0 #3f5e80, inset 0 -3px 0 #0b1726, 0 2px 0 #060e18; }
.link[aria-disabled="true"] { background: #2a3444; box-shadow: inset 0 3px 0 #3b4859, inset 0 -3px 0 #19202a; color: #7b8a9c; pointer-events: none; }

.case-rule { grid-column: 1 / -1; display: grid; min-width: 0; gap: 16px; padding: 0 10px; }
.case-rule p { margin: 0; padding: 0 8px; min-width: 0; max-width: min(92ch, 100%); overflow-wrap: anywhere; color: #cfd8e4; font-size: var(--t-body); }
.case-rule .risk { padding: 0 8px; color: var(--steel-lit); font-size: var(--t-fine); }

/* ------------------------------------------------------------------- the bind */

.bind-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
}

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }

.field input,
.field select {
  min-height: 60px;
  padding: 14px 24px;
  border: 0;
  background: var(--glass);
  box-shadow: inset 0 0 0 3px #1d3450;
  color: var(--phos-hi);
  font: inherit;
  font-size: var(--t-body);
}

.field input::placeholder { color: #3c5a3a; }
.field input:focus-visible,
.field select:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
.field-note { color: var(--steel-lit); font-size: var(--t-fine); }

.bind-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px; }
.bind-state { margin: 20px 0 0; min-height: 34px; color: var(--phos); font-size: var(--t-body); overflow-wrap: anywhere; }
.bind-state.is-bad { color: var(--red-hot); }

/* ------------------------------------------------------------------- focus */

:where(button, a, input, select):focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 3px; }

/* ------------------------------------------------------------------ widths */

@media (max-width: 1400px) {
  .deck { grid-template-columns: 136px minmax(0, 1fr) 390px; gap: 32px; }
  .dial { width: min(100%, 400px); }
}

@media (max-width: 1100px) {
  .board { width: calc(100vw - 32px); padding: 28px; border-width: 36px; border-image-width: 36px; }
  .deck { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rail { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .source { width: 112px; }
  .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .state-band { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .case-body { grid-template-columns: minmax(0, 1fr); }
  .bind-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --t-value: 33px; --t-title: 27.5px; }
  .board { margin: 20px auto 28px; padding: 20px; border-width: 28px; border-image-width: 28px; }
  .head { flex-direction: column; align-items: stretch; gap: 24px; }
  .head-chip { flex-direction: column; align-items: stretch; gap: 16px; }
  .chip { min-width: 0; text-align: left; }
  .lever { justify-content: center; }
  .wordmark { width: min(260px, 70vw); }
  .readouts { grid-template-columns: minmax(0, 1fr); }
  .bind-form { grid-template-columns: minmax(0, 1fr); }
  .segments { grid-template-columns: repeat(14, 1fr); }
  .key-wide { min-width: 0; width: 100%; }
  .bind-actions { flex-direction: column; }
  .ca-row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .dial-needle, .unit-dial .unit-needle { transition: none; }
}

/* a readout is one figure with its unit kept quiet beside it, so a long number stays one line tall */
.screen-value .figure { display: block; }
.screen-value .screen-unit {
  display: block;
  margin-top: 2px;
  color: var(--phos);
  font-size: var(--t-fine);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: none;
}

/* the hidden attribute must beat display:flex, or an empty plate is left standing on the board */
[hidden] { display: none !important; }

.link-label { display: flex; min-width: 0; flex-direction: column; gap: 2px; align-items: center; overflow-wrap: anywhere; text-wrap: balance; }
.link-wait { color: #7b8a9c; font-size: var(--t-fine); }

@media (max-width: 760px) {
  .wordmark { width: min(200px, 56vw); }
  .chip-value { font-size: var(--t-body); line-height: 1.3; }
  .chip { min-width: 0; border-width: 16px; border-image-width: 16px; padding: 18px 24px; }
  .key { padding: 14px 26px; }
  /* three link buttons in 390 px leave no room for their own labels: one per row */
  .case-links { grid-template-columns: minmax(0, 1fr); }
  .link { padding: 14px 26px; }
  .lever { padding: 14px 32px; }
  .fleet-row { gap: 24px 16px; }
}

@media (max-width: 1100px) {
  /* on one column the instrument comes first: the rail is a filter, not the point */
  .deck { display: flex; flex-direction: column; }
  .dial-well { order: 1; }
  .rail { order: 2; }
  .readouts { order: 3; }
}


/* At 320 the nested frames (board, then case, then screen) eat the line before the words get it,
   so every frame thins down and the text keeps its own air. */
@media (max-width: 360px) {
  .board { padding: 14px; border-width: 20px; border-image-width: 20px; }
  .case { border-width: 16px; border-image-width: 16px; }
  .case-body { padding: 18px; }
  .case-head { padding: 14px 26px; }
  .screen { border-width: 16px; border-image-width: 16px; padding: 14px 20px; }
  .chip { border-width: 14px; border-image-width: 14px; padding: 14px 18px; }
  .dial-plate, .claim { border-width: 16px; border-image-width: 16px; padding: 16px 20px; }
  .key, .link, .lever { padding: 14px 22px; }
  .ca { padding: 14px 26px; }
  .case-rule p { font-size: 18px; }
  .lever img { width: 40px; }
}