/* THE PIT. A trading-floor terminal: black screen, dot-matrix display capitals,
   monospace body, one phosphor accent, and the pit itself as the only lit thing. */

:root {
  --ink: #060606;
  --ink-2: #0e0d0c;
  --line: #262320;
  --paper: #ece7dc;
  --dim: #8d857a;
  --green: #96d24a;
  --red: #e0392c;
  --slip: #f3efe6;

  --display: "Doto", "Courier New", monospace;
  --mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --gutter: 16px;
  --rhythm: clamp(32px, 6vw, 72px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.pit, .seat__face, .card__face, .grave__crate, .slip__mark {
  image-rendering: pixelated;
}

a { color: inherit; }

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

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

main {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) var(--gutter) clamp(56px, 9vw, 120px);
}

/* ---- first screen: the pit -------------------------------------------- */

.mark {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(52px, 13vw, 184px);
  line-height: 0.86;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
  color: var(--paper);
}

.mark__line {
  text-align: center;
  color: var(--dim);
  margin: clamp(12px, 2vw, 20px) auto 0;
  max-width: 44ch;
  font-size: 17px;
}

.pit {
  width: 100%;
  max-width: 740px;
  margin: clamp(8px, 2vw, 24px) auto clamp(16px, 3vw, 32px);
}

/* ---- the command line: links printed on order slips -------------------- */

.slips {
  max-width: 940px;
  margin: 0 auto;
}

.slips__contract {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.slips__label {
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--dim);
  flex: none;
}

.slips__ca {
  font-size: 16px;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  user-select: all;
  color: var(--green);
}

.slips__ca[data-empty="true"] { color: var(--dim); user-select: auto; }

.slips__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}

.slip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px 26px;
  border: 0;
  background: url("art/slip-wide.png") center / 100% 100% no-repeat;
  color: #171310;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s ease;
}

.slip--wide { flex: 1 1 260px; }

.slip--small {
  flex: 0 1 132px;
  background-image: url("art/slip-small.png");
  padding: 14px 16px;
  gap: 8px;
}

.slip:active { transform: translateY(2px); }

.slip[aria-disabled="true"] {
  cursor: not-allowed;
  filter: grayscale(1) brightness(0.55);
  color: #4a443e;
}

.slip__mark { width: 26px; height: 26px; object-fit: contain; flex: none; }
.slip--small .slip__mark { width: 22px; height: 22px; }
.slip__word { white-space: nowrap; }
.slip__word--small { font-size: 16px; }

.slips__note {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--dim);
}

.slips__note[hidden] { display: none; }

/* ---- the desk: floor / bench / graveyard -------------------------------- */

.desk { margin-top: var(--rhythm); }

.desk__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.tabs { display: flex; flex-wrap: wrap; gap: 10px; }

.tab {
  min-height: 48px;
  padding: 10px 22px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--green);
  border-color: var(--green);
}

.desk__keys { margin: 0; font-size: 14px; color: var(--dim); letter-spacing: 0.06em; }
.desk__keys b { color: var(--paper); font-weight: 600; }

.round {
  margin: 20px 0 22px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--dim);
}

.round b { color: var(--paper); font-weight: 600; }
.round[data-state="shut"] b { color: var(--green); }
.round[data-state="broken"] b { color: var(--red); }

.view__line { margin: 0 0 20px; color: var(--dim); max-width: 60ch; }

/* ---- the eight seats ---------------------------------------------------- */

.seats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.seat {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line);
}

.seat__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.seat__face {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 16%;
  background: #1b2338;
}

.seat__words { padding: 14px 16px 16px; }

.seat__no {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin: 0;
}

.seat__name {
  font-family: var(--display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0.06em;
  margin: 2px 0 0;
}

.seat__book { margin: 6px 0 0; font-size: 15px; color: var(--dim); letter-spacing: 0.08em; }

.seat__week {
  margin: 12px 0 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.seat__week[data-sign="up"] { color: var(--green); }
.seat__week[data-sign="down"] { color: var(--red); }
.seat__week[data-sign="flat"], .seat__week[data-sign="none"] { color: var(--dim); }

.seat__price { margin: 2px 0 0; font-size: 15px; color: var(--dim); font-variant-numeric: tabular-nums; }

.seat__hook {
  margin: 12px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--red);
  padding: 5px 10px;
  display: inline-block;
}

.seat__hook[hidden] { display: none; }

.seat[data-hooked="true"] { border-color: var(--red); }

/* ---- the bench ---------------------------------------------------------- */

.bench { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.bench__row {
  display: grid;
  grid-template-columns: 4ch 1fr auto auto;
  gap: 8px 18px;
  align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}

.bench__queue { color: var(--dim); font-variant-numeric: tabular-nums; }

.bench__sym {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.08em;
}

.bench__price { color: var(--dim); font-variant-numeric: tabular-nums; }

.bench__week { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right; }
.bench__week[data-sign="up"] { color: var(--green); }
.bench__week[data-sign="down"] { color: var(--red); }
.bench__week[data-sign="flat"], .bench__week[data-sign="none"] { color: var(--dim); }

.bench__row[data-next="true"] .bench__sym::after {
  content: " NEXT IN";
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--green);
}

/* ---- the graveyard ------------------------------------------------------ */

.grave {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}

.grave__head {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: 0.04em;
  margin: 0;
}

.grave__line { margin: 16px 0 0; color: var(--dim); max-width: 52ch; }
.grave__line b { color: var(--paper); font-weight: 600; }

/* ---- the trader card ---------------------------------------------------- */

.card {
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--paper);
  padding: 0;
  max-width: 720px;
  width: calc(100% - 32px);
}

.card::backdrop { background: rgba(0, 0, 0, 0.82); }

.card__body { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; }

.card__face {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  align-self: start;
  object-fit: cover;
  object-position: 50% 50%;
  background: #1b2338;
}

.card__words { padding: clamp(20px, 3vw, 32px); }

.card__seat { margin: 0; font-size: 15px; letter-spacing: 0.14em; color: var(--dim); }

.card__name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1;
  letter-spacing: 0.05em;
  margin: 4px 0 0;
}

.card__desk { margin: 8px 0 0; color: var(--dim); }

.card__rows { margin: 22px 0 0; display: grid; gap: 10px; }
.card__rows > div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.card__rows dt { color: var(--dim); font-size: 14px; letter-spacing: 0.12em; }
.card__rows dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.card__rows dd[data-sign="up"] { color: var(--green); }
.card__rows dd[data-sign="down"] { color: var(--red); }

.card__feed { display: inline-block; margin: 20px 0 0; color: var(--green); }

.card__close {
  display: block;
  margin: 22px 0 0;
  min-height: 48px;
  padding: 12px 26px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.12em;
  cursor: pointer;
}

/* ---- narrower --------------------------------------------------------- */

@media (max-width: 1080px) {
  .seats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .mark { font-size: clamp(46px, 17vw, 110px); }
  .slip--wide { flex: 1 1 100%; }
  .slip--small { flex: 1 1 calc(50% - 7px); }
  .grave { grid-template-columns: 1fr; }
  .grave__crate { max-width: 220px; }
  .card__body { grid-template-columns: 1fr; }
  .card__face { aspect-ratio: 3 / 2; object-position: 50% 12%; }
  .bench__row { grid-template-columns: 3ch 1fr auto; }
  .bench__price { display: none; }
}

@media (max-width: 400px) {
  .seats { grid-template-columns: 1fr; }
}

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