/* Poke Request. The page is one front panel: a dot matrix window and a row of keys.
   Two inversions and nothing else, both read off the reference photograph:
   the display is lit ink on black, a key is a lit plate with dark letters. */

@font-face {
  font-family: "Anybody";
  src: url("/fonts/anybody-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geistmono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000000;
  --haze: #000c1e;
  --dot: #1c7fd6;
  --core: #69bff5;
  --word: #7fefff;

  --ink: #8fd2ff;       /* body, 12.8:1 on black */
  --label: #5e9fd4;     /* labels, 7.4:1 */
  --mute: #4a84b6;      /* rules, disabled, separators, 5.3:1 */
  --warm: #ffc46b;      /* the one second accent: a status that needs the eye */
  --alarm: #ff8a6b;

  --key-face: #3d93dc;
  --key-ink: #001a3c;   /* 5.3:1 on the lit plate */
  --key-off-ink: #6fa8d8; /* 6.9:1 on the unlit plate */

  --face: "Anybody", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  --page: 1120px;   /* the whole panel */
  --band: 92.9%;    /* the display bands, his own share of the frame */
  --keys: 96.2%;    /* the key row, wider than the display, as on his panel */

  --key-w: 118px;
  --key-h: 94px;
  --bw: 11px;       /* border-image width: exactly half the 22 px slice */

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;

  --gauge-cols: 4;
  --brand-cols: 3;
  --act-w: 168px;
}

* { box-sizing: border-box; }

/* A heading's default margin is an em of ITS OWN size, so a 12 px head carries 9.96 px
   and every box under it starts on a fraction of a pixel. Every margin here is px. */
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }

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

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--face);
  font-size: 14px;
  line-height: 22px;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* the blue haze the glass throws onto the black around every lit band */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 62% at 50% 14%, rgba(10, 70, 150, 0.22), transparent 70%),
    radial-gradient(90% 40% at 50% 74%, rgba(10, 60, 140, 0.14), transparent 72%);
}

.panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 36px var(--s3) var(--s6);
}

/* ---------------------------------------------------------------- the window */

.glass {
  position: relative;
  width: var(--band);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.window { display: block; }
/* the display refreshing: one even band of light crossing the glass, nothing random */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 42%, rgba(127, 239, 255, 0.11) 50%, transparent 58%);
  background-size: 280% 100%;
  animation: sweep 11s linear infinite;
}
@keyframes sweep { from { background-position: 180% 0; } to { background-position: -80% 0; } }

.gauges {
  width: var(--band);
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: repeat(var(--gauge-cols), minmax(0, 1fr));
  column-gap: 5px;
}

.gauge-label {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 92, "wght" 650;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
}
.gauge-label span {
  display: block;
  color: var(--mute);
  letter-spacing: 0.06em;
  font-variation-settings: "wdth" 92, "wght" 450;
}

/* ------------------------------------------------- the drawer and the open pull */

.deck-row {
  width: var(--band);
  margin: var(--s3) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  column-gap: var(--s4);
  align-items: stretch;
}

.block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 92, "wght" 650;
  color: var(--label);
  padding-bottom: 7px;
  position: relative;
  white-space: nowrap;
}
/* a divider is a line of its own, never a border that turns the text into a box */
.block__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--dot);
  opacity: 0.55;
}

.block__body { padding-top: 13px; flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.block__body .feedback { margin-top: auto; padding-top: var(--s1); }

.mintline {
  margin: 0;
  --audit-face: rgb(4, 13, 28);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 24px;
  color: var(--ink);
  overflow-wrap: anywhere;
  background: #040d1c;
  padding: 11px var(--s2);
  user-select: all;
  min-height: 46px;
}
.mintline[data-empty="1"] { color: var(--mute); user-select: none; }

.keyrow { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
/* four keys of one size in a 2 by 2 block, never a ragged wrap */
.mintrow { display: flex; gap: var(--s1); align-items: stretch; }
.mintrow .mintline { flex: 1 1 auto; min-width: 0; }
.key--copy { flex: none; width: 118px; height: auto; }
/* every key in this row wears its platform's own mark, or none of them would */
.keyrow--brand { display: grid; grid-template-columns: repeat(var(--brand-cols), minmax(0, 1fr)); gap: var(--s1); }

/* ------------------------------------------------------------------- the keys */

.key {
  --audit-face: rgb(6, 25, 52);
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--face);
  background: transparent;
  color: var(--key-off-ink);
  border: var(--bw) solid transparent;
  border-image: url("/img/key-off.png") 22 fill / var(--bw) / 0 stretch;
  padding: 5px 15px;
  transition: transform 0.08s ease, filter 0.12s ease;
}
.key:hover { filter: brightness(1.18); }
.key:active { transform: translateY(1px); }
.key:focus-visible { outline: 2px solid var(--word); outline-offset: 3px; }

.key.is-on,
.key--lit {
  --audit-face: rgb(61, 147, 220);
  color: var(--key-ink);
  border-image: url("/img/key.png") 22 fill / var(--bw) / 0 stretch;
}

.key[aria-disabled="true"],
.key:disabled {
  cursor: not-allowed;
  opacity: 0.74;
  filter: none;
}
.key[aria-disabled="true"]:active { transform: none; }

.key__name {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 92, "wght" 700;
  white-space: nowrap;
}
.key__sub {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  font-variation-settings: "wdth" 95, "wght" 450;
  white-space: nowrap;
  opacity: 0.82;
}

.key--mark { flex-direction: row; gap: 9px; }
.key--mark img { display: block; height: 15px; width: auto; flex: none; }
.key--nav { width: var(--key-w); height: var(--key-h); }
.key--act { height: 52px; width: var(--act-w); }
.keyrow--act { display: grid; grid-template-columns: repeat(2, minmax(0, var(--act-w))); gap: var(--s1); }
.key--small { height: 60px; min-width: 0; padding: 10px var(--s2); }

/* --------------------------------------------------------------- the wordmark */

.mark {
  width: var(--band);
  margin: 22px auto 0;
  display: flex;
  justify-content: center;
}
.mark canvas { display: block; }

.statement {
  width: var(--band);
  margin: 14px auto 0 !important;
  text-align: center;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink);
  font-variation-settings: "wdth" 100, "wght" 450;
}

/* ----------------------------------------------------------------- the key row */

.nav {
  width: var(--keys);
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: auto minmax(var(--s4), 1fr) auto;
  align-items: center;
}
.nav__group { display: flex; gap: 10px; }

.lamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  padding: 0 var(--s2);
}
.lamp__bulb {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--core);
  box-shadow: 0 0 10px 2px rgba(105, 191, 245, 0.75);
  animation: pulse 2.6s ease-in-out infinite;
}
.lamp[data-state="paused"] .lamp__bulb { background: var(--warm); box-shadow: 0 0 10px 2px rgba(255, 196, 107, 0.6); }
.lamp[data-state="unknown"] .lamp__bulb { background: var(--mute); box-shadow: none; animation: none; }
.lamp__word {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 92, "wght" 650;
  color: var(--label);
  white-space: nowrap;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* --------------------------------------------------------------------- panes */

.pane { width: var(--band); margin: var(--s6) auto 0; }
.pane[hidden] { display: none; }

.pane__title {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 92, "wght" 650;
  color: var(--label);
  margin: 0 0 var(--s3);
  position: relative;
  padding-bottom: 7px;
}
.pane__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--dot);
  opacity: 0.55;
}

.rows { display: grid; gap: 0; }
.block__body .row { padding: 7px 0; }
.row {
  display: grid;
  align-items: center;
  gap: var(--s3);
  padding: 13px 0;
  position: relative;
  min-width: 0;
}
.row + .row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--mute);
  opacity: 0.35;
}
.row--kv { grid-template-columns: minmax(0, 1fr) auto; }
.row--kv3 { grid-template-columns: minmax(0, 1fr) auto auto; }
.row--kv .cell-val, .row--kv3 .cell-val { overflow-wrap: anywhere; }
.row--pack { grid-template-columns: 92px 1fr 104px 120px 132px; }
.row--vote { grid-template-columns: 136px minmax(0, 1fr); gap: var(--s4); align-items: start; padding: var(--s3) 0; }
.row__side { min-width: 0; }
.card__slab--small { width: 136px; }
.row--log { grid-template-columns: 92px 1fr; }

.cell-label {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 92, "wght" 650;
  color: var(--label);
}
.cell-val {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cell-val--big { font-size: 22px; line-height: 30px; margin: 0 0 4px; }
.cell-val--empty { color: var(--mute); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* Anybody's dollar sign loses its stroke at label sizes and "$PR" reads as "SPR",
   so the ticker is always set in the mono, wherever it appears in a sentence. */
.tick { font-family: var(--mono); font-size: max(14px, 1em); letter-spacing: 0; }
.right { text-align: right; }
/* the machine the binder's stage is on now */
.cell-label.is-now { color: var(--core); }
.cell-label.is-now::after { content: " in use"; color: var(--mute); }

.tier { font-variation-settings: "wdth" 92, "wght" 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px; }
.tier--common { color: var(--mute); }
.tier--uncommon { color: var(--ink); }
.tier--rare { color: var(--core); }
.tier--epic { color: var(--warm); }

.verdict--merge { color: var(--core); }
.verdict--close { color: var(--mute); }
.verdict--open { color: var(--warm); }

.bar {
  position: relative;
  height: 10px;
  background: #06182f;
  overflow: hidden;
}
.bar__fill { position: absolute; inset: 0 auto 0 0; background: var(--dot); }
.bar__fill--merge { background: var(--core); }

a { color: var(--core); text-decoration: none; border-bottom: 1px solid rgba(105, 191, 245, 0.4); }
a:hover { color: var(--word); border-bottom-color: var(--word); }
a:focus-visible { outline: 2px solid var(--word); outline-offset: 2px; }

.links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; font-size: 13px; line-height: 20px; }
.note { font-size: 13px; line-height: 21px; color: var(--mute); margin: 14px 0 0; }
.note:first-child { margin-top: 0; }
.feedback { font-size: 13px; line-height: 20px; min-height: 20px; margin: var(--s1) 0 0; color: var(--core); }
.feedback[data-bad="1"] { color: var(--alarm); }

.cards { --card-cols: 4; --card-gap: var(--s3); display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: var(--card-gap); }
.card { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.card .note { margin-top: 0; }
/* the pin block sits at the foot of its card, so every key in the row lands on one line
   however long the card's own name ran */
.pin { display: flex; flex-direction: column; gap: 9px; margin-top: auto; }
.pin .key--act { width: 100%; }
.card__slab {
  position: relative;
  aspect-ratio: 420 / 685;
  background: url("/img/slab.png") center / 100% 100% no-repeat;
}
.card__cert {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 7.5%;
  height: 11%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--core);
  white-space: nowrap;
}
.card__img {
  position: absolute;
  left: 7.5%;
  right: 7.5%;
  top: 22%;
  bottom: 5.5%;
  object-fit: contain;
  width: 85%;
  height: 72.5%;
}
.card__meta { display: flex; justify-content: space-between; gap: var(--s2); min-width: 0; align-items: baseline; }
.card__meta .cell-label { text-transform: none; letter-spacing: 0.02em; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.step__n { font-family: var(--mono); font-size: 30px; line-height: 36px; color: var(--core); margin: 0; }
.step__t {
  font-size: 12px; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase;
  font-variation-settings: "wdth" 92, "wght" 650; color: var(--ink); margin: 7px 0 5px;
}
.step__b { font-size: 14px; line-height: 22px; color: var(--mute); margin: 0; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }

.risk { font-size: 13px; line-height: 20px; color: var(--mute); margin: var(--s5) 0 0; }

@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .row--pack { grid-template-columns: 80px 1fr 96px 110px; }
  .row--pack > :nth-child(5) { grid-column: 2 / -1; }
}

@media (max-width: 760px) {
  :root { --s5: 36px; --s6: 44px; --key-w: 104px; --key-h: 84px; --brand-cols: 1; --gauge-cols: 2; --act-w: 100%; }
  .panel { padding: var(--s4) var(--s2) var(--s5); }
  .deck-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .nav { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: var(--s3); }
  .nav__group { flex-wrap: wrap; justify-content: center; }
  .lamp { order: 3; }
  .row--pack { grid-template-columns: 72px minmax(0, 1fr); row-gap: 6px; }
  .row--pack > :nth-child(n + 3) { grid-column: 1 / -1; }
  .row--log { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .row--vote { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s2); }
  .card__slab--small { width: 96px; }
  .cards { --card-gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .key--act { width: auto; }
  .keyrow--act { width: 100%; }
  .gauges { row-gap: 10px; }
  /* three keys of 118 px will not carry a mark and a word side by side on a phone */
  .mintrow { flex-wrap: wrap; }
  .key--copy { width: 100%; height: 56px; }
  .statement { text-align: left; }
  .block__head, .pane__title { white-space: normal; flex-wrap: wrap; row-gap: 2px; }
}

@media (max-width: 480px) {
  .cards { --card-cols: 2; }
  /* a label and a long mono value cannot share a 288 px row: the value takes its own line */
  .row--kv, .row--kv3 { grid-template-columns: minmax(0, 1fr); row-gap: 2px; column-gap: 0; }
  .row--kv .right, .row--kv3 .right, .row--kv .cell-val, .row--kv3 .cell-val { text-align: left; }
}

@media (max-width: 400px) {
  :root { --key-w: 96px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Nothing on this page starts on a half pixel: a band is rounded to an even number of
   pixels, and the panel's own content box is always even, so margin auto centres whole. */
@supports (width: round(down, 3px, 2px)) {
  .glass, .gauges, .deck-row, .mark, .statement, .pane { width: round(down, var(--band), 2px); }
  .nav { width: round(down, var(--keys), 2px); }
  .keyrow--brand {
    grid-template-columns: repeat(var(--brand-cols), round(down, calc((100% - (var(--brand-cols) - 1) * var(--s1)) / var(--brand-cols)), 1px));
  }
  .gauges {
    grid-template-columns: repeat(var(--gauge-cols), round(down, calc((100% - (var(--gauge-cols) - 1) * 5px) / var(--gauge-cols)), 1px));
  }
  /* a slab taking its height from an aspect ratio lands on a fraction of a pixel, and
     everything under it in the card (the pin key, a nine slice) inherits that fraction */
  .card { container-type: inline-size; }
  /* a card track that is 230.5 px wide starts every second card on half a pixel. Each
     track but the last is rounded down and the last one takes the remainder, so the row
     still runs edge to edge. */
  .cards {
    grid-template-columns:
      repeat(calc(var(--card-cols) - 1), round(down, calc((100% - (var(--card-cols) - 1) * var(--card-gap)) / var(--card-cols)), 1px))
      minmax(0, 1fr);
  }
  .card__slab { aspect-ratio: auto; height: round(down, calc(100cqw * 685 / 420), 1px); }
}

@media (min-width: 761px) {
  @supports (width: round(down, 3px, 2px)) {
    .deck-row { grid-template-columns: round(down, calc((100% - var(--s4)) * 0.44), 2px) minmax(0, 1fr); }
  }
}

/* Under 350 px two cards of 125 px are a thumbnail each: the binder goes to one column,
   which needs its own template because a row of "all but the last" track is empty. */
@media (max-width: 350px) {
  .cards { --card-cols: 1; }
  @supports (width: round(down, 3px, 2px)) {
    .cards { grid-template-columns: minmax(0, 1fr); }
  }
}