/* PONSTATION
   ground: deep bottle green at low lightness (die 2). ink: bone.
   ONE loud accent, the broker's green, which is also the console's ready light.
   A SECOND accent exists because the concept has a warning against a go:
   the machine is either ready or it is refusing a disc, and those cannot share a colour. */

:root {
  /* --- colour ------------------------------------------------------------- */
  --ground: #06120b;
  --ink: #e6f0e6;
  --accent: #00c805;          /* ready, market open, the disc is reading */
  --accent-2: #ff5a1f;        /* standby, market shut, read error */
  --pons: #d4fc50;            /* the launchpad's own lime. buy plate only. */

  --ground-2: color-mix(in oklch, var(--ground), var(--ink) 6%);
  --ground-3: color-mix(in oklch, var(--ground), #000 55%);
  --ink-2: color-mix(in oklch, var(--ink), var(--ground) 42%);
  --ink-3: color-mix(in oklch, var(--ink), var(--ground) 74%);
  --accent-dim: color-mix(in oklch, var(--accent), var(--ground) 55%);
  --scrim: oklch(from var(--ground) l c h / .72);

  /* --- type, ratio 1.333 -------------------------------------------------- */
  --t-hero: clamp(52px, 11.5vw, 176px);
  --t-head: clamp(21px, 2.4vw, 30px);
  --t-body: clamp(15px, 1.15vw, 18px);
  --t-label: 14px;
  --t-micro: 11px;

  --track-hero: -.035em;
  --track-head: -.015em;
  --track-caps: .14em;

  /* --- surface: roll 3. hard edge, zero radius, offset shadow at zero blur - */
  --edge: 2px solid var(--ink-3);
  --edge-lit: 2px solid var(--accent);
  --pad: 14px;
  --radius: 0px;
  --lift-1: 5px 5px 0 var(--ground-3);
  --lift-2: 9px 9px 0 var(--ground-3);

  --margin: clamp(18px, 3.4vw, 54px);
  --gap: clamp(12px, 1.6vw, 22px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 220ms;

  --z-page: 0;
  --z-deck: 10;
  --z-object: 20;
  --z-overlay: 40;
  --z-boom: 90;
}

@font-face {
  font-family: 'Cabinet';
  src: url('/assets/vendor/fonts/cabinet-extrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet';
  src: url('/assets/vendor/fonts/cabinet-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet';
  src: url('/assets/vendor/fonts/cabinet-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* metric matched stand in, so the swap does not move the page */
@font-face {
  font-family: 'Cabinet fallback';
  src: local('Arial');
  size-adjust: 103%;
  ascent-override: 87%;
  descent-override: 28%;
  line-gap-override: 9%;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ground);
  color: var(--ink);
}

body {
  font-family: 'Cabinet', 'Cabinet fallback', system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

h1, h2, h3 { text-wrap: balance; margin: 0; }
p, li { text-wrap: pretty; margin: 0; }

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

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: var(--z-page);
  touch-action: none;
  cursor: default;
}
#stage[data-grab='hover'] { cursor: grab; }
#stage[data-grab='drag'] { cursor: grabbing; }

/* ------------------------------------------------------------------------- */
/* the readout: the biggest type on the page, and the machine writes into it   */

#deck {
  position: relative;
  z-index: var(--z-deck);
  height: 100%;
  padding: var(--margin);
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: start;
  pointer-events: none;
}

#readout {
  max-width: min(52ch, 46vw);
  display: grid;
  gap: var(--gap);
}

.eyebrow {
  font-weight: 300;
  font-size: var(--t-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.2;
}

#shout {
  font-weight: 800;
  font-size: var(--t-hero);
  line-height: .86;
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  margin-block: -.06em 0;
  transition: color var(--dur) var(--ease);
}
#shout[data-state='error'] { color: var(--accent-2); }
#shout[data-state='booted'] { color: var(--accent); }

.line {
  font-size: var(--t-body);
  color: var(--ink-2);
  max-width: 42ch;
}

.verdict {
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.verdict[data-ok='1'] { color: var(--accent); }

/* the load bar IS the number: how far that token ever got up its own curve.
   there is no percentage printed anywhere, the bar is the finding. */
.bar {
  width: min(100%, 46ch);
  height: 18px;
  border: var(--edge);
  background: var(--ground-2);
  position: relative;
  overflow: hidden;
}
.bar-fill {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 0;
  background: var(--accent);
  transition: width 90ms linear, background-color var(--dur) var(--ease);
}
.bar[data-state='error'] .bar-fill { background: var(--accent-2); }
.bar-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  right: 0;
  background: var(--ink-3);
}

/* ------------------------------------------------------------------------- */
/* the plate: two buttons, each wearing its own brand's own mark               */

#plate {
  align-self: end;
  display: flex;
  gap: var(--gap);
  pointer-events: auto;
}

.plate-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pad) / 2);
  padding: calc(var(--pad) / 2) var(--pad);
  border: var(--edge);
  background: var(--ground-2);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.plate-btn img { display: block; height: 1.9em; width: auto; }
.plate-btn:hover, .plate-btn:focus-visible { border-color: var(--pons); transform: translate(-2px, -2px); }
.plate-btn:active { transform: translate(0, 0); }
.plate-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.plate-btn--x { padding-inline: var(--pad); }
.plate-btn--x:hover, .plate-btn--x:focus-visible { border-color: var(--ink); }
.xmark { display: block; width: 17px; height: 17px; }
.xmark svg { display: block; width: 100%; height: 100%; fill: var(--ink); }

.hint {
  justify-self: end;
  align-self: end;
  font-weight: 300;
  font-size: var(--t-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-2);
  transition: opacity var(--dur) var(--ease);
}
.hint[data-gone='1'] { opacity: 0; }

/* ------------------------------------------------------------------------- */
/* the serial plate: moulded into the plinth, so it sits where the plinth is   */

.serial {
  position: fixed;
  z-index: var(--z-object);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: calc(var(--pad) / 2);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: auto;
}
.serial-k { color: color-mix(in oklch, var(--ink-3), var(--ground) 40%); }
.serial-v { overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.serial-copy {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-dim);
  cursor: pointer;
}
.serial-copy:hover { color: var(--accent); }
.serial-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.noscript {
  position: fixed;
  inset: auto var(--margin) var(--margin) var(--margin);
  z-index: var(--z-overlay);
  font-size: var(--t-body);
  color: var(--ink-2);
}

[data-boom] {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-boom);
  padding: var(--pad);
  background: var(--accent-2);
  color: var(--ground);
  font-size: var(--t-label);
}

/* ------------------------------------------------------------------------- */
/* 390 is its own drawing: the shout sits on top, the rack is under the thumb  */

@media (max-width: 780px) {
  :root { --t-hero: clamp(46px, 15vw, 88px); }
  #readout { max-width: none; }
  #deck { grid-template-rows: auto 1fr auto; }
  .line { max-width: 34ch; font-size: var(--t-label); }
  #plate { align-self: end; justify-self: start; }
  .hint { justify-self: start; }
  .bar { width: 100%; }
  /* on a phone the plinth has no bare face left to etch, so the serial moves to the
     one place a thumb can reach it: straight above the buttons */
  .serial {
    left: var(--margin);
    right: var(--margin);
    top: auto;
    bottom: calc(var(--margin) + 5.4em);
    transform: none;
  }
  .serial-v { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bar-fill { transition: none; }
  .plate-btn { transition: none; }
}