/* CHECKPOINT $SAVE
   Colours are measured off his plate rather than guessed: the shell lime, the pale label paper,
   the steel of the shutter and the near-black of the shard field all come out of the two images
   in ref/. Everything on the page belongs to one of those materials. */

@font-face {
  font-family: "Pixeloid";
  src: url("assets/fonts/PixeloidSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Departure";
  src: url("assets/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --void: #05070a;
  --ink: #0a0d09;
  --edge: #141c07;
  --lime: #cbe70f;
  --lime-lit: #eafb52;
  --lime-deep: #8aa605;
  --glow: #a8e00c;
  --paper: #f2f88a;
  --paper-lit: #fbfec8;
  --paper-deep: #d5e455;
  --alarm: #ff4a2b;
  --alarm-deep: #a32410;
  --text: #cfe0a8;
  --text-dim: #74875a;
  --steel: #9aa08f;

  /* the two grids the type sits on: Pixeloid draws at 9 px, Departure at 11 px */
  --p: 9px;
  --d: 11px;

  --gap: clamp(14px, 1.6vw, 26px);
  color-scheme: dark;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

/* A class that sets display beats the user agent's [hidden] rule, so every hidden thing on this
   page needs saying once, out loud. Without it the save overlay ships visible on load. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: "Departure", ui-monospace, "Cascadia Mono", monospace;
  font-size: calc(var(--d) * 1.5);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  overflow: hidden; /* one scroll region per screen, and on desktop it is none */
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 60;
  padding: 8px 14px;
  background: var(--lime);
  color: var(--edge);
  font-family: "Pixeloid", monospace;
  font-size: var(--p);
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

/* ------------------------------------------------------------------ the world */

.world {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--void);
}
.world__plate,
.world__sweep {
  position: absolute;
  inset: -14%;
  background-image: url("assets/bg-shards.webp");
  background-size: cover;
  background-position: center;
  will-change: transform;
}
/* The background is more of the same world, out of focus. Two copies of the shard field drift
   against each other on their own clocks so the light in the corners keeps moving without
   anything ever competing with the type in the middle. */
.world__plate {
  animation: drift-a 96s ease-in-out infinite alternate;
}
.world__sweep {
  filter: blur(26px) saturate(1.35);
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: drift-b 71s ease-in-out infinite alternate;
}
.world__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(5, 7, 10, 0.9) 0%, rgba(5, 7, 10, 0.55) 42%, rgba(5, 7, 10, 0) 74%),
    linear-gradient(180deg, rgba(5, 7, 10, 0.72), rgba(5, 7, 10, 0.2) 30%, rgba(5, 7, 10, 0.86));
}
.world__vignette::after {
  /* the grain of the plate, kept as its own layer so it never blurs with the drift */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.055;
  background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);
}

@keyframes drift-a {
  from {
    transform: scale(1.06) translate3d(-1.4%, -0.8%, 0) rotate(-0.4deg);
  }
  to {
    transform: scale(1.13) translate3d(1.6%, 1.1%, 0) rotate(0.5deg);
  }
}
@keyframes drift-b {
  from {
    transform: scale(1.22) translate3d(2.2%, 1.4%, 0);
  }
  to {
    transform: scale(1.1) translate3d(-2.4%, -1.6%, 0);
  }
}

/* ------------------------------------------------------------------ screen shell */

.screen {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: clamp(14px, 2vw, 30px) clamp(14px, 3vw, 48px) clamp(12px, 1.6vw, 26px);
  display: grid;
  gap: var(--gap) clamp(20px, 3.4vw, 56px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head head"
    "card card"
    "rail tags";
}

/* ------------------------------------------------------------------ lockup */

.head {
  grid-area: head;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--gap) clamp(20px, 3.4vw, 56px);
  align-items: start;
}
.head__brand,
.head__console {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
}
.lockup {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 20px);
}
.lockup__disk {
  width: clamp(46px, 4.4vw, 68px);
  flex: none;
  transform: rotate(-8deg);
  filter: drop-shadow(0 0 14px rgba(168, 224, 12, 0.5));
}
.lockup__type {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "Pixeloid", monospace;
  font-weight: 700;
  text-transform: uppercase;
}
.wordmark {
  font-size: clamp(calc(var(--p) * 3), 4.6vw, calc(var(--p) * 5));
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--lime-lit);
  text-shadow:
    0 0 2px var(--edge),
    3px 3px 0 var(--edge),
    0 0 18px rgba(168, 224, 12, 0.75),
    0 0 44px rgba(168, 224, 12, 0.35);
}
.ticker {
  font-size: clamp(var(--p), 1.5vw, calc(var(--p) * 1.5));
  letter-spacing: 0.62em;
  color: var(--lime);
  text-shadow: 0 0 12px rgba(168, 224, 12, 0.6);
  padding-left: 0.3em;
}
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.links__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  color: var(--lime);
  text-decoration: none;
  font-family: "Pixeloid", monospace;
  font-size: var(--p);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, rgba(203, 231, 15, 0.13), rgba(203, 231, 15, 0.04));
  box-shadow:
    inset 0 0 0 2px var(--edge),
    inset 2px 2px 0 rgba(234, 251, 82, 0.22);
}
.links__item img {
  filter: brightness(0) saturate(100%) invert(84%) sepia(64%) saturate(1200%) hue-rotate(23deg) brightness(102%);
}
.links__item:hover,
.links__item:focus-visible {
  color: var(--edge);
  background: var(--lime);
}
.links__item:hover img,
.links__item:focus-visible img {
  filter: brightness(0) saturate(100%) invert(8%) sepia(30%) saturate(1400%) hue-rotate(48deg);
}
.links__item--sound {
  border: 0;
  cursor: pointer;
  font-family: "Pixeloid", monospace;
  font-size: var(--p);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.links__item--sound b {
  font-weight: 400;
  color: var(--lime-lit);
}
.links__item--sound[aria-pressed="true"] {
  color: var(--edge);
  background: var(--lime);
}
.links__item--sound[aria-pressed="true"] b {
  color: var(--edge);
}
.links__item[data-pending] {
  color: var(--text-dim);
  cursor: not-allowed;
}
.links__item[data-pending]::after {
  content: "soon";
  font-size: calc(var(--p) * 0.78);
  opacity: 0.75;
}

/* ------------------------------------------------------------------ pitch + console */

.pitch {
  margin: 0;
  max-width: 46ch;
  font-size: calc(var(--d) * 1.5);
  color: var(--text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.console {
  display: grid;
  gap: 8px;
}
.console__label,
.rail__title,
.sheet__title {
  font-family: "Pixeloid", monospace;
  font-size: var(--p);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0;
}
.console__row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  border-bottom: 2px solid var(--lime-deep);
  padding-bottom: 8px;
}
.console__caret {
  align-self: center;
  color: var(--lime);
  font-size: calc(var(--d) * 2);
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
.console__input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--lime-lit);
  font: inherit;
  font-size: clamp(var(--d), 1.05vw, calc(var(--d) * 1.2));
  letter-spacing: 0.02em;
  padding: 8px 0;
}
.console__input::placeholder {
  color: var(--text-dim);
}
.console__input:focus {
  outline: none;
  color: #fff;
}
.console__row:focus-within {
  border-bottom-color: var(--lime-lit);
  box-shadow: 0 6px 20px -14px var(--glow);
}
.console__note {
  margin: 0;
  min-height: calc(var(--d) * 3);
  font-size: calc(var(--d) * 1.2);
  color: var(--text-dim);
}
.console__note[data-tone="ok"] {
  color: var(--lime);
}
.console__note[data-tone="warn"] {
  color: var(--paper-deep);
}
.console__note[data-tone="error"] {
  color: var(--alarm);
}

/* ------------------------------------------------------------------ buttons */

.btn {
  font-family: "Pixeloid", monospace;
  font-size: var(--p);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  color: var(--edge);
  background: linear-gradient(180deg, var(--lime-lit), var(--lime) 55%, var(--lime-deep));
  box-shadow:
    inset 0 0 0 2px var(--edge),
    inset 0 3px 0 rgba(255, 255, 255, 0.45),
    0 0 0 2px var(--edge),
    4px 4px 0 rgba(0, 0, 0, 0.55);
  padding: 0 18px;
  min-height: 44px;
}
.btn--save {
  font-size: calc(var(--p) * 1.34);
  padding: 0 clamp(14px, 1.8vw, 26px);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn:hover:not(:disabled) {
  filter: brightness(1.12);
}
.btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow:
    inset 0 0 0 2px var(--edge),
    0 0 0 2px var(--edge),
    2px 2px 0 rgba(0, 0, 0, 0.5);
}
.btn:disabled {
  filter: grayscale(0.75) brightness(0.6);
  cursor: not-allowed;
}
.btn--ghost {
  color: var(--lime);
  background: rgba(203, 231, 15, 0.08);
  box-shadow:
    inset 0 0 0 2px var(--lime-deep),
    2px 2px 0 rgba(0, 0, 0, 0.5);
  min-height: 40px;
}
.btn--ghost:hover:not(:disabled) {
  color: var(--edge);
  background: var(--lime);
}
.btn--copy {
  min-height: 34px;
  padding: 0 12px;
  font-size: calc(var(--p) * 0.9);
}
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--lime-lit);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ the disk */

.disk {
  position: relative;
  display: block;
  aspect-ratio: 48 / 50;
  /* the sticker's print is sized off the disk it is stuck to, not off the viewport, so one rule
     covers the stage, the rail thumbs and the phone */
  container-type: inline-size;
}
.disk-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.disk-key {
  fill: var(--edge);
}
.disk-shell-hi {
  fill: var(--lime-lit);
}
.disk-sheen {
  fill: #fff;
}
.disk-gloss path {
  fill: #fff;
}
.disk-badge {
  fill: var(--edge);
  font-family: "Pixeloid", monospace;
  font-size: 6px;
  letter-spacing: 0.04em;
  opacity: 0.5;
}

.disk--stage,
.disk--writing {
  filter:
    drop-shadow(0 0 22px rgba(168, 224, 12, 0.45))
    drop-shadow(0 18px 26px rgba(0, 0, 0, 0.75));
}
.disk--thumb {
  filter: drop-shadow(0 0 10px rgba(168, 224, 12, 0.28)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
}

/* the graphs, printed on the sticker */
.graph-band {
  fill: var(--lime-deep);
  opacity: 0.38;
}
.graph-band.is-down,
.graph-fill.is-down {
  fill: var(--alarm);
  opacity: 0.3;
}
.graph-fill.is-up {
  fill: var(--lime-deep);
  opacity: 0.42;
}
.graph-line {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.graph-line--frozen {
  stroke: #5c6a1e;
  stroke-width: 1.6;
  stroke-dasharray: 4 3;
}
.graph-line--actual,
.graph-line--delta {
  stroke: var(--edge);
  stroke-width: 2.2;
}
.graph-line--actual.is-down,
.graph-line--delta.is-down {
  stroke: var(--alarm-deep);
}
.graph-zero {
  stroke: #6d7a34;
  stroke-width: 1.2;
  stroke-dasharray: 2 3;
  fill: none;
}
.graph-empty {
  stroke: #9aa84f;
  stroke-width: 0.4;
  stroke-dasharray: 1 1;
  fill: none;
}

/* real text printed over the sticker, so it stays selectable and on the pixel grid */
.print {
  font-size: 2.7cqw;
  position: absolute;
  left: var(--label-x);
  top: var(--label-y);
  width: var(--label-w);
  height: var(--label-h);
  color: var(--edge);
  font-family: "Departure", monospace;
  pointer-events: none;
}
.print__head,
.print__foot {
  position: absolute;
  left: 5%;
  right: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.print__head {
  top: var(--head-y);
  height: var(--head-h);
}
.print__foot {
  top: var(--foot-y);
  height: var(--foot-h);
}
.print__stamp {
  font-weight: 400;
  letter-spacing: 0.02em;
}
.print__side,
.print__legend {
  color: #6a7429;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.print__result {
  font-family: "Pixeloid", monospace;
  font-size: 2.5cqw;
  flex: none;
}
.print__stamp {
  flex: none;
}
.print__side,
.print__legend {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.print__result.is-up {
  color: #37500a;
}
.print__result.is-down {
  color: #8e1c06;
}

/* ------------------------------------------------------------------ card: stage + sheet */

.card {
  grid-area: card;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "stage sheet";
  gap: var(--gap) clamp(20px, 3.4vw, 56px);
  min-height: 0;
}
.card__stage {
  grid-area: stage;
  min-height: 0;
  display: grid;
  place-items: center;
}
.disk--stage {
  height: 100%;
  width: auto;
  /* On a large monitor the row is tall enough to make the disk absurd. It is the hero object,
     not the whole screen, so it stops growing and the void around it does the rest. */
  max-height: min(100%, 520px);
  max-width: 100%;
  cursor: pointer;
}


.verdict {
  margin: 0;
  display: grid;
  gap: 2px;
  min-height: calc(var(--p) * 6.5);
  align-content: center;
}
.verdict__num {
  font-family: "Pixeloid", monospace;
  font-size: clamp(calc(var(--p) * 2.4), 3vw, calc(var(--p) * 4));
  line-height: 1;
  color: var(--lime-lit);
  text-shadow:
    3px 3px 0 var(--edge),
    0 0 26px rgba(168, 224, 12, 0.6);
}
.verdict__num.is-down {
  color: #ff7a5e;
  text-shadow:
    3px 3px 0 #2a0a03,
    0 0 26px rgba(255, 74, 43, 0.55);
}
.verdict__line,
.verdict__label {
  font-size: calc(var(--d) * 1.2);
  color: var(--text-dim);
}

.card__sheet {
  grid-area: sheet;
  min-height: 0;
  display: grid;
  gap: 8px;
  align-content: start;
}
.sheet__actions {
  margin: 2px 0 0;
}
.sheet__rows {
  margin: 0;
  display: grid;
  gap: 2px;
}
.sheet__row {
  display: grid;
  grid-template-columns: minmax(0, 15ch) minmax(0, 1fr);
  gap: 4px 14px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid rgba(203, 231, 15, 0.14);
}
.sheet__row dt {
  font-family: "Pixeloid", monospace;
  font-size: calc(var(--p) * 0.9);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sheet__row dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: calc(var(--d) * 1.2);
}
.sheet__row dd b {
  font-family: "Pixeloid", monospace;
  font-size: calc(var(--p) * 1.34);
  color: var(--lime-lit);
  font-weight: 400;
}
.sheet__row dd b.is-down {
  color: #ff7a5e;
}
.sheet__row dd small {
  font-size: calc(var(--d));
  color: var(--text-dim);
}
.sheet__row--out {
  border-bottom: 0;
  border-top: 2px solid var(--lime-deep);
  margin-top: 4px;
}
.sheet__foot {
  margin: 0;
  display: grid;
  gap: 4px;
  font-size: var(--d);
  color: var(--text-dim);
  max-width: 62ch;
}

/* ------------------------------------------------------------------ the slot rail */

.rail {
  grid-area: rail;
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: end;
}
.rail__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rail__list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--lime-deep) transparent;
}
.rail__list::-webkit-scrollbar {
  height: 6px;
}
.rail__list::-webkit-scrollbar-button {
  display: none;
}
.rail__list::-webkit-scrollbar-track {
  background: transparent;
}
.rail__list::-webkit-scrollbar-thumb {
  background: var(--lime-deep);
}
.rail__slot {
  flex: none;
}
.slot {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-dim);
  font-family: "Pixeloid", monospace;
  font-size: calc(var(--p) * 0.9);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.slot .disk--thumb {
  width: clamp(74px, 8vw, 104px);
}
.slot .print {
  font-size: 6.4cqw;
}
.slot .print__side,
.slot .print__legend,
.slot .print__result {
  display: none;
}
.slot.is-on {
  color: var(--lime-lit);
}
.slot.is-on .disk--thumb {
  filter: drop-shadow(0 0 16px rgba(168, 224, 12, 0.75)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
}
.rail__slot.is-empty {
  padding: 6px;
  display: grid;
  justify-items: center;
  gap: 4px;
}
.rail__slot.is-empty .disk--thumb {
  width: clamp(74px, 8vw, 104px);
  opacity: 0.5;
  filter: grayscale(0.72) brightness(0.72);
}
.rail__slot.is-empty::after {
  content: "empty";
  font-family: "Pixeloid", monospace;
  font-size: calc(var(--p) * 0.9);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4c5a34;
}

/* ------------------------------------------------------------------ the contract sticker */

.tags {
  grid-area: tags;
  align-self: end;
  justify-self: end;
  min-width: 0;
}
.sticker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  color: var(--edge);
  max-width: 100%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
}
.sticker__paper {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.paper-art {
  display: block;
  width: 100%;
  height: 100%;
}
.sticker__label {
  font-family: "Pixeloid", monospace;
  font-size: calc(var(--p) * 0.9);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5c6a1e;
  flex: none;
}
.sticker__value {
  font-family: "Departure", monospace;
  font-size: var(--d);
  letter-spacing: 0.01em;
  color: var(--edge);
  overflow-wrap: anywhere;
  min-width: 0;
}
.sticker__value[data-pending] {
  color: #6a7429;
  font-style: italic;
}
.sticker .btn--copy {
  color: var(--paper-lit);
  background: linear-gradient(180deg, #3c4a13, #1d2607);
  box-shadow:
    inset 0 0 0 2px var(--edge),
    2px 2px 0 rgba(0, 0, 0, 0.4);
}
.sticker__status {
  font-size: calc(var(--d) * 0.9);
  color: #3f4a15;
  min-width: 10ch;
}

/* ------------------------------------------------------------------ writing overlay */

.writing {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(3, 5, 3, 0.9);
  backdrop-filter: blur(6px);
}
.writing__inner {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 0 20px;
  text-align: center;
  width: min(420px, 86vw);
}
.disk--writing {
  width: clamp(120px, 18vw, 180px);
  animation: nudge 1.2s ease-in-out infinite;
}
@keyframes nudge {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-6px) rotate(1.5deg);
  }
}
.writing__title {
  margin: 0;
  font-family: "Pixeloid", monospace;
  font-size: calc(var(--p) * 2.4);
  color: var(--lime-lit);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.writing__bar {
  width: 100%;
  height: 16px;
  background: #12180a;
  box-shadow: inset 0 0 0 2px var(--lime-deep);
}
.writing__bar i {
  display: block;
  height: 100%;
  width: 2%;
  background: repeating-linear-gradient(90deg, var(--lime) 0 8px, var(--lime-lit) 8px 12px);
  background-size: 20px 100%;
  transition: width 0.35s linear;
  animation: crawl 0.6s linear infinite;
}
@keyframes crawl {
  to {
    background-position: 20px 0;
  }
}
.writing__warn {
  margin: 0;
  font-family: "Pixeloid", monospace;
  font-size: var(--p);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alarm);
  animation: warn 1.05s steps(2) infinite;
}
@keyframes warn {
  50% {
    opacity: 0.15;
  }
}
.writing__detail {
  margin: 0;
  font-size: var(--d);
  color: var(--text-dim);
}
.btn--abort {
  margin-top: 4px;
  color: var(--text-dim);
  box-shadow:
    inset 0 0 0 2px #3a4520,
    2px 2px 0 rgba(0, 0, 0, 0.5);
  background: none;
}

/* ------------------------------------------------------------------ report dialog */

/* The printout is a sheet off the same roll as the disk labels, not a panel: same paper, same
   keyline, same gloss, and the text is printed on it in the ink the label uses. */
.report {
  border: 0;
  padding: 0;
  max-width: min(760px, 92vw);
  max-height: 86dvh;
  background: none;
  color: var(--edge);
  overflow: visible;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.85));
}
.report__paper {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.report::backdrop {
  background: rgba(3, 5, 3, 0.82);
  backdrop-filter: blur(4px);
}
.report__inner {
  position: relative;
  isolation: isolate;
  padding: clamp(20px, 2.6vw, 34px);
  display: grid;
  gap: 16px;
  max-height: 86dvh;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--lime-deep) transparent;
}
.report__title {
  margin: 0;
  font-family: "Pixeloid", monospace;
  font-size: calc(var(--p) * 1.6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--edge);
}
.report__pair {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.report__pair h3 {
  margin: 0 0 8px;
  font-family: "Pixeloid", monospace;
  font-size: var(--p);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5c6a1e;
}
.report__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  counter-reset: coin;
}
.report__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dotted rgba(20, 28, 7, 0.28);
  font-size: calc(var(--d) * 1.2);
}
.report__list b {
  color: var(--edge);
  font-weight: 400;
}
.report__note,
.report__none {
  margin: 0;
  font-size: var(--d);
  color: #5c6a1e;
}
.report .btn--ghost {
  color: var(--paper-lit);
  background: linear-gradient(180deg, #3c4a13, #1d2607);
  box-shadow:
    inset 0 0 0 2px var(--edge),
    2px 2px 0 rgba(0, 0, 0, 0.35);
}
.report .btn--ghost:hover {
  color: var(--paper-lit);
  filter: brightness(1.3);
}

/* A very large monitor gets the same composition, centred, rather than a stretched one. */
@media (min-width: 901px) {
  body {
    display: flex;
  }
  .screen {
    width: 100%;
    height: min(100%, 1080px);
    max-width: 1720px;
    margin: auto;
  }
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 900px) {
  body {
    overflow: auto; /* the page itself becomes the one scroll region */
  }
  .screen {
    height: auto;
    min-height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "head"
      "card"
      "rail"
      "tags";
  }
  .head {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .pitch {
    font-size: calc(var(--d) * 1.2);
  }
  .links {
    justify-content: flex-start;
  }
  .card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "sheet";
    gap: var(--gap);
  }
  .disk--stage {
    height: auto;
    width: min(340px, 78vw);
  }
  .disk--stage .print {
    font-size: 10px;
  }
  .tags {
    justify-self: stretch;
  }
  .sticker {
    flex-wrap: wrap;
  }
  .rail {
    align-content: start;
  }
}

@media (max-width: 420px) {
  .wordmark {
    font-size: calc(var(--p) * 3);
  }
  .console__row {
    flex-wrap: wrap;
  }
  .links {
    gap: 6px;
  }
  .links__item {
    padding: 0 10px;
  }
  .btn--save {
    width: 100%;
  }
  .slot .disk--thumb {
    width: 84px;
  }
}

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