/* npm install money: one flight console of the dependency ship.
   Built to art/ref/console.jpg: an orange riveted chassis carrying cream bezelled screens of dark navy
   glass. Every surface is a drawn PNG (bezel, key, plate, glass, glare, rivet); nothing here is a bordered
   CSS rectangle standing in for an object. */

@font-face {
  font-family: "Audiowide";
  src: url("/fonts/audiowide.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Technor";
  src: url("/fonts/technor-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Technor";
  src: url("/fonts/technor-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Technor";
  src: url("/fonts/technor-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Tabular";
  src: url("/fonts/tabular-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Tabular";
  src: url("/fonts/tabular-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --chassis: #e8881f;
  --chassis-hi: #f3a134;
  --chassis-lo: #d4700f;
  --bezel: #f6e3b0;
  --line: #141c34;
  --glass: #0a1430;
  --glass-lo: #050b22;
  --ink: #f7efd6;
  --ink-dim: #bcb08f;
  --red: #e8382c;
  --teal: #7fb5ac;
  --peach: #f2994a;
  --steel: #8ea3c4;

  --display: "Audiowide", "Technor", system-ui, sans-serif;
  --text: "Technor", system-ui, sans-serif;
  --mono: "Tabular", ui-monospace, "SFMono-Regular", monospace;

  --gut: 24px;
  --bz: 32px; /* border-image-width: the bezel PNG's slice is 96, an exact third */
  --pad: 28px; /* the glass keeps its text a full 28 px off its own edge */
  --radius: 42px;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip; /* never overflow-x: hidden on body: it freezes position: sticky and clips */
  background: var(--chassis);
}

body {
  margin: 0;
  background-color: var(--chassis);
  background-image: url("/img/chassis.png");
  background-size: 512px 512px;
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
}
a {
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--peach);
  outline-offset: 3px;
}

/* ---- the console grid --------------------------------------------------- */
.console {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 290px minmax(400px, auto) minmax(320px, auto) auto;
  gap: var(--gut);
  padding: var(--gut);
  max-width: 2100px;
  margin: 0 auto;
}

.module--mast {
  grid-column: 8 / 13;
  grid-row: 1;
}
.module--main {
  grid-column: 1 / 8;
  grid-row: 1 / 3;
}
.module--matrix {
  grid-column: 8 / 13;
  grid-row: 2;
}
.module--bank {
  grid-column: 1 / 8;
  grid-row: 3;
}
.module--pot {
  grid-column: 8 / 11;
  grid-row: 3;
}
.module--bag {
  grid-column: 11 / 13;
  grid-row: 3;
}
.module--token {
  grid-column: 1 / 13;
  grid-row: 4;
}

/* ---- a module: a drawn bezel over navy glass ---------------------------- */
.module {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-style: solid;
  border-width: var(--bz);
  border-image: url("/img/bezel.png") 96 / var(--bz) / 0 stretch;
  border-radius: var(--radius);
  background-color: var(--glass);
  background-image: url("/img/stars.png"), url("/img/glass.png");
  background-repeat: repeat, repeat;
  background-size: 256px 256px, 8px 8px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.13);
}

.module__body {
  position: relative;
  z-index: 2;
  height: 100%;
  min-width: 0;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* the reflection sweep the reference paints into the top left corner of every screen */
.glare {
  position: absolute;
  inset: 0 auto auto 0;
  width: 54%;
  height: 62%;
  max-width: 640px;
  max-height: 420px;
  background: url("/img/glare-soft.png") no-repeat left top / 100% 100%;
  pointer-events: none;
  z-index: 1;
}

/* rivets belong to their own module, never to the page: a prop offset from a container edge lands on
   whatever happens to be there */
.rivet {
  position: absolute;
  width: 24px;
  height: 24px;
  background: url("/img/rivet.png") no-repeat center / contain;
  opacity: 0.9;
  z-index: 3;
  pointer-events: none;
}
.rivet--tl {
  top: calc(var(--bz) * -1 + 4px);
  left: calc(var(--bz) * -1 + 4px);
}
.rivet--tr {
  top: calc(var(--bz) * -1 + 4px);
  right: calc(var(--bz) * -1 + 4px);
}
.rivet--bl {
  bottom: calc(var(--bz) * -1 + 4px);
  left: calc(var(--bz) * -1 + 4px);
}
.rivet--br {
  bottom: calc(var(--bz) * -1 + 4px);
  right: calc(var(--bz) * -1 + 4px);
}

/* ---- type roles --------------------------------------------------------- */
.label {
  font-family: var(--text);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.label--title {
  font-size: 18px;
}
.value {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.value--small {
  font-size: 24px;
}
.note {
  font-size: 17px;
  color: var(--ink-dim);
}

/* ---- the masthead plate ------------------------------------------------- */
.mast__body {
  justify-content: center;
  gap: 18px;
}
.plate--red {
  border-style: solid;
  border-width: 34px;
  border-image: url("/img/plate-red.png") 76 fill / 34px / 0 round;
  border-radius: 40px;
  padding: 2px 12px;
  margin: 0;
}
.wordmark {
  font-family: var(--display);
  font-size: clamp(30px, 2.7vw, 50px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}
.mast__line {
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
}
.mast__state {
  font-family: var(--mono);
  font-size: 17px;
  color: var(--peach);
}

/* ---- the dot matrix readout --------------------------------------------- */
.matrix__body {
  gap: 16px;
}
.matrix__rail {
  margin-top: auto;
}
.matrix {
  width: 100%;
  height: auto;
  flex: 0 1 auto;
  image-rendering: pixelated; /* a canvas drawn at a whole scale is interpolated on the way up without it */
}
.matrix__rail {
  height: 16px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #121d3e;
  box-shadow: inset 0 0 0 2px #1d2b52;
  overflow: hidden;
}
.matrix__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
  border-radius: 8px;
  transition: width 0.6s ease;
}
.matrix__note {
  font-size: 17px;
  color: var(--ink-dim);
}

/* ---- the instrument bank: the console's navigation ----------------------- */
.bank__body {
  gap: 16px;
  justify-content: space-between;
}
.bank {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  flex: 1 1 auto;
}
/* six keys in a row only while a key is wide enough to hold its own word with 16 px of air each side */

/* every key is the same height as its neighbours, whatever its own word does */
.bank li {
  display: flex;
}
.bank__key {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 108px;
  padding: 12px 16px 10px;
  border-style: solid;
  border-width: 18px;
  border-image: url("/img/key.png") 36 fill / 18px / 0 stretch;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.bank__key:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 10px rgba(242, 153, 74, 0.45));
}
.bank__key:active {
  transform: translateY(1px);
}
.bank__key[aria-current="true"] {
  border-image-source: url("/img/key-lit.png");
}
.bank__key[aria-current="true"] .bank__word {
  color: var(--ink);
}
.bank__key[aria-current="true"] .bank__figure {
  color: var(--ink);
}
.bank__glyph {
  width: 42px;
  height: 42px;
  display: block;
}
/* the word and its figure travel together: beside the glyph when the key is a row, under it when the
   key is a square */
.bank__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.bank__word {
  font-family: var(--text);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: center;
  font-size: 16px;
  line-height: 1.08;
  overflow-wrap: normal;
  hyphens: none;
}
.bank__figure {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.strip {
  height: 26px;
  background: url("/img/strip.png") repeat-x left center / auto 26px;
  opacity: 0.85;
  flex: 0 0 auto;
}

/* ---- gauges ------------------------------------------------------------- */
.gauge__body {
  gap: 14px;
}
.gauge {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
}
.gauge__side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.tube {
  position: relative;
  width: 42px;
  height: 100%;
  min-height: 72px;
  flex: 0 0 auto;
  border-radius: 23px;
  background: no-repeat center / 100% 100%;
  display: flex;
  align-items: flex-end;
  padding: 7px;
}
.tube--teal {
  background-image: url("/img/tube-teal.png");
}
.tube--peach {
  background-image: url("/img/tube-peach.png");
}
.tube__fill {
  display: block;
  width: 100%;
  height: 0;
  border-radius: 16px;
  background: var(--red);
  transition: height 0.6s ease;
}
.tube--peach .tube__fill {
  background: var(--peach);
}
.gauge__value {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 28px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding-bottom: 4px;
}
.gauge__note {
  font-size: 16px;
  color: var(--ink-dim);
}

/* ---- the transponder ---------------------------------------------------- */
/* Two rows, each the full width of the glass: the address in its own well with the copy key on the same
   line, then the four platform keys in equal columns. Nothing here is centred on a third of the panel. */
.token__body {
  gap: 14px;
  justify-content: center;
}
.token__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.token__head .label--title {
  white-space: nowrap;
}
/* the sunken well a long value is printed into: a drawn plate, nine-sliced like the key */
.slot {
  border-style: solid;
  border-width: 16px;
  border-image: url("/img/slot.png") 32 fill / 16px / 0 stretch;
  border-radius: 20px;
  min-width: 0;
}
.token__slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 4px 8px;
}
.token__ca {
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
  user-select: all;
}
.token__ca[data-empty="true"] {
  color: var(--ink-dim);
  user-select: auto;
}
.key--copy {
  min-height: 48px;
  white-space: nowrap;
}
.token__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  min-width: 0;
}
.token__links .key {
  width: 100%;
  min-width: 0;
  padding: 0 16px;
  gap: 9px;
  white-space: nowrap;
}
.token__links .key span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- keys (the console's buttons) --------------------------------------- */
.key {
  position: relative;
  min-height: 52px;
  padding: 0 26px;
  border-style: solid;
  border-width: 18px;
  border-image: url("/img/key.png") 36 fill / 18px / 0 stretch;
  border-radius: 20px;
  background: transparent;
  font-family: var(--text);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.03em;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.key:hover:not([disabled]) {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 10px rgba(242, 153, 74, 0.4));
}
.key:active:not([disabled]) {
  transform: translateY(1px);
}
.key[disabled] {
  color: #e2d7b6;
  cursor: not-allowed;
}
.key--go {
  border-image-source: url("/img/key-lit.png");
  color: var(--ink);
}
.key--wide {
  width: 100%;
  max-width: 320px;
}
.key__mark {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

/* ---- the main screen's own furniture ------------------------------------ */
.screen__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.screen__title {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.screen__sub {
  font-size: 17px;
  color: var(--ink-dim);
}
.screen__scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* the search field */
.find {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.find__input {
  flex: 1 1 280px;
  min-width: 0;
  min-height: 56px;
  padding: 0 20px;
  border: 3px solid #27365c;
  border-radius: 16px;
  background: #0d1838;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 20px;
}
.find__input::placeholder {
  color: #6e7da4;
}
.registries {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.registries .key {
  min-height: 48px;
  padding: 0 20px;
  font-size: 16px;
}

/* rows of label and value, the console's readout grammar */
.rows {
  display: grid;
  gap: 12px;
}
.row {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 2px solid #1b2748;
}
.row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.row__label {
  font-family: var(--text);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}
.row__value {
  font-family: var(--mono);
  font-size: 19px;
  color: var(--ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* the orbit: the package as a planet, its direct dependencies around it */
/* the stage is sized by the height the screen can give it, and its width follows the rings' own
   proportion, so a moon placed by ring geometry always lands on a ring */
.orbit {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(260px, 25vw, 430px);
  aspect-ratio: 1000 / 680;
  width: auto;
  max-width: 100%;
  align-self: center;
  display: grid;
  place-items: center;
  background: url("/img/orbits.png") no-repeat center / 100% 100%;
}
.orbit__planet {
  width: 30%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.5));
}
.orbit__moon {
  position: absolute;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  background: no-repeat center / contain;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.orbit__moon:hover {
  transform: translate(-50%, -50%) scale(1.14);
  filter: drop-shadow(0 0 10px rgba(247, 239, 214, 0.6));
}
.orbit__moon[data-coin="true"] {
  box-shadow: 0 0 0 3px var(--peach);
}
.orbit__caption {
  font-family: var(--mono);
  font-size: 17px;
  color: var(--ink-dim);
  text-align: center;
  margin: 0 auto;
  padding: 0 8px;
}

/* a block of plain reading inside a screen */
.prose p {
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 12px;
}
.prose p:last-child {
  margin-bottom: 0;
}
.prose strong {
  color: var(--peach);
  font-weight: 600;
}

/* the form */
.form {
  display: grid;
  gap: 16px;
}
.field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.field__label {
  font-family: var(--text);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}
.field input,
.field select {
  min-height: 52px;
  padding: 0 18px;
  border: 3px solid #27365c;
  border-radius: 14px;
  background: #0d1838;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 18px;
  min-width: 0;
}
.field__hint {
  font-size: 16px;
  color: var(--ink-dim);
}
.form__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.form__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* a result slot is always reserved: pressing a key moves nothing */
.result {
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 14px;
  background: #0d1838;
  box-shadow: inset 0 0 0 2px #1d2b52;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.result[data-state="ok"] {
  color: var(--teal);
}
.result[data-state="bad"] {
  color: var(--red);
}
.result[data-state="work"] {
  color: var(--peach);
}

/* ---- the deck: long readouts, same grammar, under the console ------------ */
.deck {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gut);
  padding: 0 var(--gut) var(--gut);
  max-width: 2100px;
  margin: 0 auto;
}
.deck:empty {
  display: none;
}
.deck .module {
  grid-column: 1 / 13;
}
.deck .module--half {
  grid-column: span 6;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 18px;
}
.table th {
  font-family: var(--text);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  text-align: left;
  padding: 0 16px 12px 0;
  white-space: nowrap;
}
.table td {
  padding: 14px 16px 14px 0;
  border-top: 2px solid #1b2748;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.table td:last-child,
.table th:last-child {
  padding-right: 0;
  text-align: right;
}
.table .key {
  min-height: 48px;
  padding: 0 18px;
  font-size: 16px;
}
.table__name {
  color: var(--ink);
  font-size: 19px;
}
.table__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table tr.table__empty td {
  text-align: center;
  padding: 20px 0 6px;
}
.table__none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.table__none img {
  width: 44px;
  height: 44px;
  opacity: 0.7;
}
.table__none p {
  font-family: var(--text);
  font-size: 17px;
  color: var(--ink-dim);
  max-width: 78ch;
  text-align: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 17px;
  background: #142146;
  color: var(--teal);
  font-family: var(--text);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip--live {
  background: #2a1a16;
  color: var(--peach);
}
.chip--none {
  background: #16203f;
  color: var(--ink-dim);
}

/* ---- widths ------------------------------------------------------------- */
@media (max-width: 1500px) {
  /* on a phone a key is a labelled row of the console, not a square: a word like Maintainers cannot
     keep 16 px of air each side inside a 90 px square */
  .bank {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .bank__key {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 10px 24px;
  }
  .bank__glyph {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
  }
  .bank__text {
    align-items: flex-start;
    flex: 1 1 auto;
  }
  .bank__word {
    text-align: left;
  }
  :root {
    --pad: 24px;
    --radius: 32px;
  }
  .console {
    grid-template-rows: 276px minmax(380px, auto) minmax(430px, auto) auto;
  }
  /* the columns even out: a gauge needs room for its own line of text, and the readout for its dots */
  .module--main,
  .module--bank {
    grid-column: 1 / 7;
  }
  .module--mast,
  .module--matrix {
    grid-column: 7 / 13;
  }
  .module--pot {
    grid-column: 7 / 10;
  }
  .module--bag {
    grid-column: 10 / 13;
  }
}

@media (max-width: 1100px) {
  .console {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto;
  }
  .module--mast {
    grid-column: 1 / 7;
    grid-row: 1;
  }
  .module--main {
    grid-column: 1 / 7;
    grid-row: 2;
    min-height: 520px;
  }
  .module--matrix {
    grid-column: 1 / 7;
    grid-row: 3;
  }
  .module--bank {
    grid-column: 1 / 7;
    grid-row: 4;
  }
  .module--pot {
    grid-column: 1 / 4;
    grid-row: 5;
  }
  .module--bag {
    grid-column: 4 / 7;
    grid-row: 5;
  }
  .module--token {
    grid-column: 1 / 7;
    grid-row: 6;
  }
  .deck .module--half {
    grid-column: 1 / 7;
  }
}

@media (max-width: 760px) {
  :root {
    --bz: 24px; /* 96 / 4 */
    --pad: 22px;
    --gut: 14px;
    --radius: 24px;
  }
  body {
    font-size: 17px;
  }
  .module {
    border-image-source: url("/img/bezel-s.png");
    border-image-slice: 56;
  }
  .console,
  .deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .module--mast,
  .module--main,
  .module--matrix,
  .module--bank,
  .module--token,
  .deck .module,
  .deck .module--half {
    grid-column: 1 / 3;
  }
  .module--mast {
    grid-row: 1;
  }
  .module--main {
    grid-row: 2;
  }
  .module--matrix {
    grid-row: 3;
  }
  .module--bank {
    grid-row: 4;
  }
  .module--pot {
    grid-column: 1 / 3;
    grid-row: 5;
  }
  .module--bag {
    grid-column: 1 / 3;
    grid-row: 6;
  }
  .module--token {
    grid-row: 7;
  }
  .gauge {
    align-items: center;
  }
  .tube {
    min-height: 86px;
  }
  .console {
    grid-template-rows: auto;
  }
  .module--main {
    min-height: 460px;
  }
  .bank {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the scan key takes the width of the thing it acts on */
  .find {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .wordmark {
    font-size: clamp(24px, 7.2vw, 34px);
  }
  .screen__title {
    font-size: 24px;
  }
  .plate--red {
    border-width: 26px;
    border-image-width: 26px;
  }
  .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .token__ca {
    font-size: 19px;
  }
  .rivet {
    width: 18px;
    height: 18px;
  }
}

/* ---- the transponder across the widths ---------------------------------- */
/* These sit at the end of the file on purpose: a @media block carries no extra specificity, so a base
   rule further down the file would win over it.
   The key row drops 4 -> 2 -> 1 on the width its own longest label still fits in a column, measured, not
   guessed: "Buy on pump.fun" needs 152 px of label, and a key spends 99 px on its plate, its mark and
   its padding before that. */
@media (max-width: 1100px) {
  .token__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .token__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 700px) {
  .token__links {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .token__slot {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 10px 8px;
  }
  .key--copy {
    width: 100%;
  }
}

/* Narrower than this the longest label stops fitting on one line even with the whole row to itself, so
   it is allowed to wrap and every key is held at one height: a key ending in an ellipsis is a broken key. */
/* "Copy address" is wider than the whole well down here, whatever its padding: it takes two lines
   rather than pushing its own ink out through its padding. */
@media (max-width: 340px) {
  .key--copy {
    white-space: normal;
    line-height: 1.2;
    padding: 0 14px;
  }
}

@media (max-width: 380px) {
  .token__links {
    gap: 14px;
  }
  .token__links .key {
    white-space: normal;
    line-height: 1.2;
    min-height: 86px;
    padding: 0 12px;
    gap: 8px;
  }
  .token__links .key span {
    overflow: visible;
    text-overflow: clip;
  }
}

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

[hidden] {
  display: none !important;
}

/* the idle stage, before a package is on it */
.orbit--idle .orbit__planet {
  opacity: 0.72;
}


/* At 320 the key is narrower than its own word plus its own figure on one line, so the row becomes a
   stack again: glyph, word, figure, each on its own line, inside a full width key. */
@media (max-width: 420px) {
  .bank__key {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 12px 14px;
    min-height: 92px;
  }
  .bank__text {
    align-items: center;
  }
  .bank__word {
    text-align: center;
  }
}

/* On a phone a table is printed as rows, never as a box that scrolls sideways inside the page: each cell
   carries its own column name and stands on its own line. */
@media (max-width: 760px) {
  .table__wrap {
    overflow-x: visible;
  }
  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }
  .table thead {
    display: none;
  }
  .table tr {
    border-top: 2px solid #1b2748;
    padding: 12px 0 4px;
  }
  .table td {
    border: 0;
    padding: 4px 0;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: baseline;
    text-align: left;
  }
  .table td[data-label]::before {
    content: attr(data-label);
    font-family: var(--text);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal);
    flex: 0 0 auto;
  }
  .table td:last-child {
    justify-content: flex-start;
    padding-top: 10px;
  }
  .table .key {
    width: 100%;
  }
  /* printed as rows, the empty readout keeps its own centred block and no stray rule above it */
  .table tr.table__empty {
    border-top: 0;
  }
  .table tr.table__empty td {
    justify-content: center;
    padding: 14px 0 6px;
  }
}

/* the picture field: the console's own key, with the browser's input kept out of the way */
.file {
  position: relative;
}
.file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.file__key {
  cursor: pointer;
  justify-self: start;
}
.file:focus-within .file__key {
  outline: 3px solid var(--peach);
  outline-offset: 3px;
}