/* Grand Theft Insurance. The page is one instrument on a black field: the geometry is drawn in
   canvas 2D to the ratios measured off the reference, and only type sits in the DOM on top of it.
   Palette, dashes and proportions all come from art/ref/scope-reference.jpg (see NOTE.md). */

@font-face { font-family: "DSEG7"; src: url("/fonts/dseg7-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Martian"; src: url("/fonts/martianmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Martian"; src: url("/fonts/martianmono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Anybody"; src: url("/fonts/anybody-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Anybody"; src: url("/fonts/anybody-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #081209;
  --mint: #74dcc2;          /* 13.9:1 on the ground: every value and label */
  --mint-hi: #a7f0dd;       /* the lit marks */
  --mint-mid: #4f9d87;      /* 6.6:1: secondary type only, never under 16px */
  --mint-dim: #2c6a55;      /* lines only, never type */
  --amber: #ff8a2b;         /* 8.9:1: the axes, the marks, the chip */
  --amber-deep: #c85700;
  --red: #f23c1a;
  --ink: var(--mint);
  --mono: "Martian", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Anybody", system-ui, sans-serif;
  --led: "DSEG7", "Martian", monospace;
  --gut: clamp(20px, 4vw, 56px);
  --col: 1120px;
  --hair: 1px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: hidden;
}
::selection { background: var(--amber); color: #120600; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--amber); color: #120600; font: 700 16px/1 var(--mono);
  padding: 16px 24px; text-decoration: none;
}
.skip:focus { left: 16px; top: 16px; }

a { color: var(--mint); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ===================== screen 1: the field ===================== */

.field {
  position: relative;
  padding: clamp(24px, 4vh, 44px) var(--gut) clamp(28px, 4vh, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vh, 34px);
}
#scope {
  display: block;
  width: 100%;
  height: auto;
  order: 2;
}

.corner { display: flex; flex-direction: column; gap: 6px; }

/* the one big readout, in the slot his picture gives the display code */
.led {
  margin: 0;
  font: 700 clamp(50px, 9.2vh, 100px)/0.92 var(--led);
  color: var(--red);
  letter-spacing: 0.02em;
  text-shadow: 0 0 22px rgba(242, 60, 26, 0.45);
}
.led-alt, .chip-alt, .sub, .stamp, .legal, .pole, .mark, .log, .win, .ch-head b, dt, .val, .lbl, .key, .list b, .note-mono {
  font-family: var(--mono);
}
.led-alt {
  margin: 2px 0 0;
  font-size: 16px; line-height: 1.4; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mint);
}
.wordmark {
  margin: 14px 0 0;
  font: 600 clamp(22px, 2.5vw, 28px)/1.15 var(--sans);
  letter-spacing: 0.005em;
  color: var(--mint-hi);
}
.sub { margin: 4px 0 0; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-mid); }
.sub .sep { padding: 0 10px; color: var(--mint-dim); }
.sub .tick { color: var(--amber); }

/* top right: the state chip, a solid block that runs off the frame as his LOADING does */
.tr { align-items: flex-start; }
.chip {
  margin: 0;
  background: var(--amber);
  color: #0d0500;
  font-size: 16px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 24px;
}
.chip-alt { margin: 8px 0 0; font-size: 16px; letter-spacing: 0.05em; color: var(--mint-mid); }

/* the poles of the judge axis */
.pole { margin: 0; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint); }
.pole span { display: block; font-size: 16px; letter-spacing: 0.03em; text-transform: none; color: var(--mint-mid); }

/* the channel marks, riding the axis */
.marks { display: flex; flex-wrap: wrap; gap: 10px 26px; order: 3; }
.mark {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 10px 18px 10px 14px;
  font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mint-mid); text-decoration: none;
}
.mark i { width: 14px; height: 14px; border-radius: 50%; background: var(--amber-deep); flex: none; transition: transform .18s, background .18s; }
.mark b { color: var(--amber); font-weight: 700; }
.mark:hover { color: var(--mint); }
.mark:hover i { transform: scale(1.25); background: var(--amber); }
.mark[aria-current="true"] { color: var(--mint-hi); }
.mark[aria-current="true"] i { background: var(--mint-hi); transform: scale(1.5); box-shadow: 0 0 14px rgba(167, 240, 221, .6); }

/* bottom left: the keeper's log, dotted leaders as in his console */
.stamp { margin: 0 0 8px; font-size: 16px; letter-spacing: 0.1em; color: var(--amber); }
.log { list-style: none; margin: 0; padding: 0; }
.log li { display: flex; align-items: baseline; gap: 10px; font-size: 16px; line-height: 2; letter-spacing: 0.02em; }
.log .k { color: var(--mint-mid); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.log .k::before { content: "> "; color: var(--amber); }
.log .lead { flex: 1 1 auto; min-width: 24px; height: 1em; background-image: radial-gradient(circle, var(--mint-dim) 1px, transparent 1.4px); background-size: 7px 7px; background-position: 0 0.72em; background-repeat: repeat-x; }
.log .v { color: var(--mint); white-space: nowrap; }

/* bottom right: the window the mint lives in */
.win { width: 100%; max-width: 520px; border: var(--hair) solid var(--mint-dim); background: rgba(8, 19, 13, 0.95); container-type: inline-size; }
.win-bar {
  margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 28px; height: 46px;
  border-bottom: var(--hair) solid var(--mint-dim);
  font-size: 16px; letter-spacing: 0.14em; color: var(--mint-mid);
}
.win-tick { color: var(--amber); }
.win-body { padding: 24px 28px 26px; }
.ca-row { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 18px; }
.ca-row .copy { flex: none; }
.ca {
  flex: 1 1 auto;
  margin: 0;
  font: 400 16px/1.6 var(--mono);
  color: var(--mint-hi);
  word-break: break-all;
  overflow-wrap: anywhere;
  min-width: 0;
  user-select: all;
}
/* only a real address breaks anywhere: the waiting line wraps like a sentence */
.ca.empty { color: var(--mint-mid); user-select: auto; letter-spacing: 0.04em; text-transform: uppercase; word-break: normal; overflow-wrap: normal; }
.win-keys { display: flex; flex-wrap: wrap; gap: 10px; }
@container (max-width: 470px) {
  /* the window carries the marks alone when it is narrow: the name stays as the accessible name */
  .win-keys .mark-key { padding: 12px; min-width: 48px; }
  .win-keys .mark-key span { display: none; }  /* the aria-label carries the name */
}
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 21px;
  background: transparent; color: var(--mint);
  border: var(--hair) solid var(--mint-dim);
  font: 400 16px/1 var(--mono); letter-spacing: 0.06em;
  text-decoration: none; cursor: pointer;
  transition: border-color .15s, color .15s, transform .08s;
}
.key img { display: block; width: 22px; height: 22px; object-fit: contain; }
.key:hover { border-color: var(--mint); color: var(--mint-hi); }
.key:active { transform: translateY(1px); }
.key[disabled], .key[aria-disabled="true"] { color: var(--mint-mid); border-style: dashed; cursor: not-allowed; }
.key[disabled] img, .key[aria-disabled="true"] img { opacity: .45; }
.copy-state { margin: 14px 0 0; min-height: 1.4em; font: 400 16px/1.4 var(--mono); color: var(--amber); }

.below { display: contents; }
.legal {
  margin: 0; order: 9;
  font-size: 16px; letter-spacing: 0.06em; color: var(--mint-mid);
}

/* ===================== the channel sheet ===================== */

.sheet {
  max-width: var(--col);
  margin: 0 auto;
  padding: clamp(40px, 7vh, 88px) var(--gut) clamp(56px, 9vh, 110px);
  outline: none;
}
.ch-head { display: flex; align-items: baseline; gap: 18px; padding: 22px 20px 24px; border-bottom: var(--hair) solid var(--mint-dim); }
.ch-head b { font-size: 16px; letter-spacing: 0.14em; color: var(--amber); }
.ch-head h2 { margin: 0; font: 600 clamp(28px, 3.4vw, 38px)/1.1 var(--sans); color: var(--mint-hi); }
.sub-head { margin: 46px 0 14px; padding: 0 20px; font: 400 16px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }

.rows { margin: 0; padding: 0; }
.row { padding: 18px 20px; border-bottom: var(--hair) solid rgba(44, 106, 85, .55); }
.rows .row:last-child { border-bottom: 0; }
dt {
  margin: 0 0 6px; font-size: 16px; line-height: 1.5; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mint-mid);
}
dd { margin: 0; color: var(--mint); max-width: 62ch; }
dd.val { font: 400 17px/1.5 var(--mono); color: var(--mint-hi); letter-spacing: 0.02em; }

.tk { font-family: var(--mono); font-weight: 400; letter-spacing: 0.02em; }
.note { margin: 0 0 18px; color: var(--mint-mid); max-width: 62ch; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 16px 20px; border-bottom: var(--hair) solid rgba(44, 106, 85, .55); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.list li.empty { color: var(--mint-mid); border-bottom: 0; }
.list b { font-size: 16px; font-weight: 400; letter-spacing: 0.08em; color: var(--amber); white-space: nowrap; min-width: 0; overflow-wrap: anywhere; }
.list .t { flex: 1 1 320px; min-width: 0; color: var(--mint); }
.list .s { font: 400 16px/1.5 var(--mono); color: var(--mint-mid); word-break: break-all; }
.list a { color: var(--mint-hi); }

/* the four steps, drawn in the same language as the instrument */
.steps { display: block; width: 100%; height: auto; margin: 26px 0 8px; }
.steps-text { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 0 42px; padding: 0; }
.steps-text li { display: flex; flex-direction: column; gap: 8px; }
.steps-text b { font: 400 16px/1 var(--mono); letter-spacing: 0.14em; color: var(--amber); }
.steps-text span { color: var(--mint); }

.form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; }
.lbl { font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-mid); }
.in {
  flex: 1 1 320px; min-width: 0; min-height: 48px; padding: 12px 18px;
  background: rgba(10, 24, 17, .8); color: var(--mint-hi);
  border: var(--hair) solid var(--mint-dim);
  font: 400 16px/1.4 var(--mono);
}
.in::placeholder { color: var(--mint-mid); }
.rows.tight .row { padding: 14px 20px; }
.vote .w { font: 400 16px/1.5 var(--mono); color: var(--mint-hi); }

/* ===================== the composition at desktop widths ===================== */

@media (min-width: 1100px) {
  .field {
    display: block;
    min-height: 100svh;
    padding: 0;
  }
  #scope { position: absolute; inset: 0; width: 100%; height: 100%; }
  .corner { position: absolute; z-index: 2; }
  .tl { left: var(--gut); top: clamp(24px, 3.2vh, 42px); }
  .tr { right: 0; top: 0; align-items: flex-end; }
  .tr .chip { padding-right: var(--gut); padding-left: 30px; }
  .tr .chip-alt { padding-right: var(--gut); text-align: right; }
  .bl { left: var(--gut); bottom: clamp(26px, 4vh, 46px); }
  .br { right: var(--gut); bottom: clamp(26px, 4vh, 46px); }
  .br .win { width: clamp(320px, 26vw, 500px); }

  .pole-top { position: absolute; z-index: 2; left: 50%; text-align: center; transform: translateX(-50%); width: min(360px, var(--midtop, 34vw)); }
  .below {
    display: block; position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
    top: calc(50% + var(--rad, 300px) + 16px); width: min(560px, var(--midbot, 560px)); text-align: center;
  }
  .below .pole { position: static; transform: none; width: 100%; }
  .below .legal { margin: 18px 0 0; }
  .pole-top { bottom: calc(50% + var(--rad, 300px) + 16px); }

  .marks { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; display: grid; grid-template-columns: 1fr 1fr; gap: 0; pointer-events: none; }
  .mark { position: absolute; pointer-events: auto; transform: translateY(-50%); }
  .mark.m1 { left: var(--gut); top: calc(50% - var(--mark-off, 52px)); }
  .mark.m2 { left: var(--gut); top: calc(50% + var(--mark-off, 52px)); }
  .mark.m3 { right: var(--gut); top: calc(50% - var(--mark-off, 52px)); flex-direction: row-reverse; }
  .mark.m4 { right: var(--gut); top: calc(50% + var(--mark-off, 52px)); flex-direction: row-reverse; }


  .rows .row { display: grid; grid-template-columns: 1fr 72px 1fr; align-items: baseline; }
  .rows dt { grid-column: 1; display: flex; align-items: baseline; gap: 12px; margin: 0; }
  .rows dt::after {
    content: ""; flex: 1 1 auto; height: 1em;
    background-image: radial-gradient(circle, var(--mint-dim) 1px, transparent 1.4px);
    background-size: 7px 7px; background-position: 0 .72em; background-repeat: repeat-x;
  }
  .rows dd { grid-column: 3; }
  .rows .row::before {
    content: ""; grid-column: 2; grid-row: 1;
    justify-self: center; align-self: stretch; width: 1px; min-height: 1.6em;
    background-image: linear-gradient(var(--mint-dim) 50%, transparent 50%);
    background-size: 1px 9px;
  }
}

@media (max-width: 1099px) {
  .field { padding-top: clamp(20px, 3vh, 32px); }
  .tr { order: 1; align-self: flex-start; }
  .tl { order: 0; }
  .pole-top { order: 1; }
  .pole-bot { order: 4; }
  .bl { order: 5; }
  .br { order: 6; }
  .legal { order: 7; }
  .marks { flex-direction: column; gap: 0; border-top: 1px solid var(--mint-dim); border-bottom: 1px solid var(--mint-dim); padding: 6px 0; }
  .mark { padding-left: 2px; }
  .steps-text { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  /* a console value wraps on a narrow phone instead of running past the screen */
  .log li { flex-wrap: wrap; }
  .log .v { white-space: normal; }
  /* on a narrow phone a row's own words wrap instead of pushing past their box */
  .list b { white-space: normal; }
  .list li { padding: 16px 18px; gap: 4px 12px; }
  .steps-text { grid-template-columns: 1fr; gap: 18px; }
  .win-body { padding: 20px 20px 22px; }
  .win-bar { padding: 0 20px; }
  .key { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}