/* Every value here comes from DESIGN.md. Add it there first if you need a new one. */
:root {
  --bg-go: #071A10;
  --bg-wait: #1C1204;
  --bg-stop: #1F0705;
  --go: #3DF28A;
  --wait: #FFB01F;
  --stop: #FF4B3E;
  --face-go: #182420;
  --face-wait: #2A1E0C;
  --face-stop: #2E100D;
  --hinge: #050807;
  --text: #F2F5F3;
  --text-muted: #93A39B;
  --well: rgba(255, 255, 255, 0.06);
  --edge: rgba(255, 255, 255, 0.16);
  --on-signal: #07110B;

  --display: "DIN Condensed", "Bahnschrift Condensed", Bahnschrift, "Arial Narrow", sans-serif;
  --figures: "DIN Alternate", Bahnschrift, system-ui, sans-serif;
  --sans: "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-tile: 10px;
  --r-control: 6px;
  --unit: 8px;
  --gutter: 20px;
  --section: 40px;
  --column: 1240px;

  --letter: clamp(96px, 26vw, 260px);
  --tile-h: calc(var(--letter) * 1.12);

  /* Set by the answer on <body>. */
  --bg: var(--bg-go);
  --signal: var(--go);
  --face: var(--face-go);
}

body[data-state="yes"]  { --bg: var(--bg-go);   --signal: var(--go);   --face: var(--face-go); }
body[data-state="wait"] { --bg: var(--bg-wait); --signal: var(--wait); --face: var(--face-wait); }
body[data-state="no"]   { --bg: var(--bg-stop); --signal: var(--stop); --face: var(--face-stop); }

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  transition: background-color 500ms ease;
}

/* Film grain so the large flat color does not band. Inline SVG filter, no image. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  filter: url(#grain);
  opacity: 0.05;
  z-index: 0;
  transform: translateZ(0); /* its own layer, so scrolling does not repaint the filter */
}

.grain-src { position: absolute; width: 0; height: 0; }

h1, h2, p { margin: 0; }

h2 {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: calc(var(--unit) * 2);
}

.fig {
  font-family: var(--figures);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ---------- Header ---------- */

.top {
  position: relative;
  z-index: 1;
  max-width: var(--column);
  margin: 0 auto;
  padding: 14px var(--gutter) 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--text-muted);
}

.brand {
  font-family: var(--display);
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}

.clock { font-size: 17px; }

/* ---------- Layout ---------- */

.layout {
  position: relative;
  z-index: 1;
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--gutter) var(--gutter) calc(var(--section) * 2);
  display: grid;
  gap: var(--section);
}

/* On a laptop the whole page fits the window: no page scroll at 100% zoom.
   The letters scale with the window height, and only the tape scrolls. */
@media (min-width: 960px) {
  :root { --letter: min(clamp(96px, 26vw, 260px), 22vh); }
  html, body { height: 100%; overflow: hidden; }
  .top { height: 48px; padding-top: 0; align-items: center; }
  .layout {
    height: calc(100vh - 48px);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: calc(var(--section) * 1.5);
    padding: var(--gutter) calc(var(--gutter) * 2) var(--gutter);
    align-items: stretch;
  }
  .signal {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .signal .instruments { margin-top: auto; }
  .reason { margin-top: calc(var(--unit) * 2); }
  main.controls {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: var(--gutter);
  }
  main.controls section + section, main.controls .foot { padding-top: var(--gutter); }
  main.controls > section:nth-child(2) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .tape-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .foot { display: grid; gap: var(--gutter); border-top: 1px solid var(--edge); }
  .foot section + section { border-top: none; padding-top: 0; }
  .foot .hint { margin: 0; }
  .foot section:last-child { display: flex; align-items: center; gap: var(--gutter); flex-wrap: wrap; }
  .foot .hint { flex: 1 1 200px; }
  .rules-box form { margin-top: var(--gutter); }
  /* While My rules is open, the trades list steps aside so the form fits the
     screen. If it still does not fit, this column scrolls instead of cutting off. */
  main.controls { overflow-y: auto; }
  main.controls:has(.rules-box[open]) > section:nth-child(2) { display: none; }
}

/* Short laptop windows: drop the reset hint so the tape keeps some rows. */
@media (min-width: 960px) and (max-height: 760px) {
  .foot .hint { display: none; }
  main.controls section:first-child h2 { margin-bottom: var(--unit); }
}

/* ---------- The signal ---------- */

.question {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: calc(var(--unit) * 2);
}

.flaps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 1.5vw, 12px);
}

.tile {
  position: relative;
  height: var(--tile-h);
  perspective: 900px;
}

.half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: var(--face);
  backface-visibility: hidden;
}

.half.top, .half.flip-top {
  top: 0;
  border-radius: var(--r-tile) var(--r-tile) 0 0;
  transform-origin: 50% 100%;
}

.half.bottom, .half.flip-bottom {
  bottom: 0;
  border-radius: 0 0 var(--r-tile) var(--r-tile);
  transform-origin: 50% 0%;
}

.half .ch {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--tile-h);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: var(--letter);
  font-weight: 700;
  line-height: 1;
  padding-top: 0.19em; /* DIN Condensed sits high; this centers the capitals */
  color: var(--signal);
}

.half.bottom .ch, .half.flip-bottom .ch {
  top: calc(var(--tile-h) / -2);
}

/* Spare slots, so YES does not read as a word with a hole after it. */
.tile[data-letter=" "] .half { opacity: 0.45; }

/* The hinge line across the middle. */
.tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1px);
  height: 2px;
  background: var(--hinge);
  z-index: 3;
}

.flip-top, .flip-bottom { display: none; z-index: 2; }

.tile.flipping .flip-top {
  display: block;
  animation: fold-down 110ms ease-in forwards;
}

.tile.flipping .flip-bottom {
  display: block;
  transform: rotateX(90deg);
  animation: fold-in 110ms ease-out 110ms forwards;
}

@keyframes fold-down {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(-90deg); }
}

@keyframes fold-in {
  from { transform: rotateX(90deg); }
  to   { transform: rotateX(0deg); }
}

.reason.changed { animation: rise 400ms ease-out; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.reason {
  margin-top: calc(var(--unit) * 3);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--signal);
  max-width: 30ch;
}

.countdown {
  margin-top: var(--unit);
  font-family: var(--display);
  font-size: clamp(56px, 14vw, 96px);
  font-weight: 700;
  line-height: 1;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

.countdown .unit {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: var(--unit);
}

.countdown:empty { display: none; }

/* Instruments */
.instruments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: calc(var(--unit) * 4);
  padding-top: calc(var(--unit) * 3);
  border-top: 1px solid var(--edge);
}

.instrument {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.inst-label {
  margin-top: calc(var(--unit) * 1.5);
  font-size: 15px;
  color: var(--text-muted);
}

.inst-fig { font-size: 17px; }

.dial { width: 100%; max-width: 180px; display: block; }

.dial-wrap { align-items: flex-start; }

.dial-track, .dial-fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}

.dial-track { stroke: var(--face); }

.dial-fill {
  stroke: var(--signal);
  stroke-dasharray: 251.4;
  stroke-dashoffset: 251.4;
  transition: stroke-dashoffset 600ms cubic-bezier(.2,.8,.2,1), stroke 500ms;
}

.ticks line {
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.needle {
  stroke: var(--text);
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 100px 100px;
  transform: rotate(-90deg);
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1); /* a spring with a small overshoot */
}

.hub { fill: var(--text); }

.lamps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--unit);
  align-items: flex-end;
  min-height: 26px;
}

.lamp {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--face);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--edge);
}

.lamp.on {
  background: var(--stop);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35);
}

.lamp.lit-now { animation: ignite 360ms cubic-bezier(0.2, 1.4, 0.4, 1); }

@keyframes ignite {
  from { transform: scale(0.5); }
  to   { transform: scale(1); }
}

.bar {
  height: 24px;
  border-radius: var(--r-control);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--hinge) calc(25% - 1px) 25%),
    var(--face);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 0;
  background: var(--signal);
  transition: width 600ms cubic-bezier(.2,.8,.2,1), background-color 500ms;
}

.nets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin: calc(var(--unit) * 3) 0 0;
  padding-top: calc(var(--unit) * 2.5);
  border-top: 1px solid var(--edge);
}

.nets > div:last-child { grid-column: 3; }
.nets dt { font-size: 15px; color: var(--text-muted); }
.nets dd { margin: 0; font-size: 21px; }

/* ---------- Controls ---------- */

.controls {
  display: grid;
  gap: 32px;
}

.controls section + section {
  padding-top: 32px;
  border-top: 1px solid var(--edge);
}

@media (max-width: 959px) {
  .controls { border-top: 1px solid var(--edge); padding-top: 32px; }
}

.field label {
  display: block;
  margin-bottom: calc(var(--unit) / 2);
  color: var(--text-muted);
}

.optional { color: var(--text-muted); }

input, select {
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  font: inherit;
  color: var(--text);
  background: var(--well);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  color-scheme: dark;
}

input::placeholder { color: var(--text-muted); opacity: 0.6; }

input:focus, select:focus {
  outline: 2px solid var(--signal);
  outline-offset: 0;
  border-color: var(--signal);
}

input[aria-invalid="true"] { border-color: var(--stop); }

.log-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: calc(var(--unit) * 1.5);
  align-items: start;
}



.money-well {
  position: relative;
}

.money-sign {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  color: var(--text-muted);
}

.field-amount input {
  font-family: var(--figures);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 34px;
  padding: 4px 14px 4px 40px;
}

.field-ticker input {
  text-transform: uppercase;
}

/* Numbers in the rules boxes are set like every other number on the page. */
.rules input {
  font-family: var(--figures);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 21px;
}

.field-amount input.pulse { animation: pulse 400ms ease-out; }

@keyframes pulse {
  from { background: var(--signal); color: var(--on-signal); }
  to   { background: var(--well); color: var(--text); }
}

.field-message {
  margin-top: var(--unit);
  color: var(--stop);
  font-size: 15px;
  font-weight: 500;
}

.field-message:empty { display: none; }

form .btn-main { margin-top: var(--gutter); }

/* Buttons */
button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--r-control);
  min-height: 44px; /* a finger-sized target */
}

select { cursor: pointer; }

button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.btn-main {
  padding: 16px 26px;
  color: var(--on-signal);
  background: var(--signal);
  border: 1px solid var(--signal);
  font-weight: 700;
  font-size: 17px;
  transition: background-color 500ms, filter 120ms;
}

.btn-main:hover { filter: brightness(1.12); }
.btn-main:active { transform: translateY(1px); }

.btn-quiet, .btn-danger {
  padding: 11px 16px;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--text);
}

.btn-quiet:hover { border-color: var(--text); }

.btn-danger {
  color: var(--stop);
  border-color: var(--stop);
  font-weight: 600;
}

/* The amount on its way from the well to the tape. */
.flyer {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  font-family: var(--figures);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* Tape */
.list-head {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  margin-bottom: var(--unit);
}

.list-head h2 { margin: 0; margin-right: auto; }

.all-link {
  color: var(--signal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.list-head select { width: auto; min-height: 44px; padding: 8px 12px; }

.tape {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--edge);
}

.tape li {
  display: grid;
  grid-template-columns: 4.5em 1fr auto auto;
  align-items: center;
  gap: var(--gutter);
  padding: 12px 0;
  border-bottom: 1px solid var(--edge);
}

.tape li.new { animation: arrive 500ms ease-out; }

@keyframes arrive {
  from { opacity: 0; transform: translateY(-10px); background: var(--well); }
  60%  { opacity: 1; transform: none; }
  to   { background: transparent; }
}

.tape .time {
  font-family: var(--figures);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.tape .ticker { font-weight: 500; }

.tape .result {
  font-family: var(--figures);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 21px;
  text-align: right;
}

.tape .btn-quiet {
  padding: 7px 4px;
  font-size: 15px;
  border-color: transparent;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tape .btn-quiet:hover { color: var(--text); border-color: transparent; }

.empty, .hint, .saved { color: var(--text-muted); }
.hint { margin-top: calc(var(--unit) * 1.5); font-size: 15px; }
.saved { margin-top: var(--unit); }
.saved:empty { display: none; }

/* Rules */
.rules-box summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--gutter);
  cursor: pointer;
  list-style: none;
}

.rules-box summary::-webkit-details-marker { display: none; }

.summary-title {
  font-family: var(--display);
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

.summary-text { color: var(--text-muted); font-size: 15px; line-height: 1.4; align-self: center; }

.summary-action {
  color: var(--signal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rules-box form { margin-top: calc(var(--unit) * 2.5); }

.rules { display: grid; gap: var(--gutter); }

@media (min-width: 520px) {
  .rules { grid-template-columns: 1fr 1fr; }
}

.resets { display: flex; flex-wrap: wrap; gap: calc(var(--unit) * 1.5); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .instruments { grid-template-columns: 1fr 1fr; }
  .dial-wrap { grid-column: 1 / -1; }
  .dial { max-width: 220px; }
  .nets { grid-template-columns: 1fr 1fr; }
  .nets > div:last-child { grid-column: auto; }
  .log-row { grid-template-columns: 1fr; }
  .summary-text { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 400px) {
  .tape li { grid-template-columns: auto 1fr auto auto; gap: 12px; }
  .tape .result { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  body, .dial-fill, .needle, .bar-fill, .btn-main { transition: none; }
  .tile.flipping .flip-top, .tile.flipping .flip-bottom { animation: none; display: none; }
  .tape li.new, .lamp.lit-now, .reason.changed, .field-amount input.pulse { animation: none; }
}

/* ---------- All trades page ---------- */

.history {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--gutter) var(--gutter) calc(var(--section) * 2);
}

.history-sum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin: 0 0 var(--section);
  padding-bottom: var(--gutter);
  border-bottom: 1px solid var(--edge);
}

.history-sum dt { font-size: 15px; color: var(--text-muted); }
.history-sum dd { margin: 0; font-size: 21px; }

.day { margin-bottom: var(--section); }

.day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gutter);
  margin-bottom: var(--unit);
}

.day-head h2 { margin: 0; }
.day-head .fig { font-size: 21px; }

.tape li.plain { grid-template-columns: 4.5em 1fr auto; }

.back {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}