/* ═══════════════════════════════════════════════════════════════
   LANDING — the pixel floor.

   Every colour here was measured out of the pixel art itself
   (public/img/floor-warm.webp), not picked by eye:

     #604830  deep wood shadow
     #6c543c  wood, dark
     #84603c  wood, mid
     #906c48  wood, light
     #a88454  floor in sunlight
     #fcd86c  lamp light  ← the accent

   Those wood tones belong in the PICTURE, where they are lit. Used
   flat on panels they just read as mud, so the chrome is near-black
   with a warm undertone instead — cold grey would fight the video,
   brown competes with it. The clip carries all the colour; the
   frame around it stays out of the way.

   Pixel rules: hard edges, no border-radius, no soft shadows, no
   gradients on chrome. Depth is 1px offset blocks, the way a 90s
   interface did it.
   ═══════════════════════════════════════════════════════════════ */

.term {
  --wood-0:   #131110;
  --wood-1:   #1b1917;
  --wood-2:   #242120;
  --wood-3:   #302c2a;
  --wood-4:   #45403c;
  --wood-5:   #5d564f;
  --lamp:     #fcd86c;
  --lamp-hi:  #fff0b0;
  --lamp-dim: #c9a83f;
  --paper:    #f0ece4;
  --paper-2:  #a8a29a;
  --ink-w:    #6e6862;
  --up:       #8fd47a;
  --down:     #e0776a;

  height: 100%;
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr) 30px;
  background: var(--wood-0);
  color: var(--paper);
}

/* ── bar ─────────────────────────────────────────────── */

.term__bar {
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s4);
  background: var(--wood-1);
  border-bottom: 2px solid var(--wood-0);
  box-shadow: inset 0 1px 0 var(--wood-3);
}
.term__mark {
  font-weight: 800; font-size: 14px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--paper);
}
.term__state {
  font-family: var(--mono); font-size: 10.5px; color: var(--paper-2);
  display: flex; align-items: center; gap: 7px;
}
.term__state::before {
  content: ''; width: 7px; height: 7px; flex: none;
  background: var(--ink-w);
}
.term__state.is-live::before { background: var(--lamp); }
.term__clock {
  margin-left: auto; font-size: 11px; color: var(--paper-2);
  font-family: var(--mono);
}

/* a chunky 90s button: solid block, light top-left, dark bottom-right */
.enter {
  height: 26px; padding: 0 var(--s4);
  background: var(--lamp); color: #131110;
  border: 0; border-radius: 0;
  box-shadow:
    inset 1px 1px 0 var(--lamp-hi),
    inset -1px -1px 0 var(--lamp-dim),
    2px 2px 0 var(--wood-0);
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  transition: none;
}
.enter:hover { background: var(--lamp-hi); }
.enter:active {
  box-shadow: inset 1px 1px 0 var(--lamp-dim), 1px 1px 0 var(--wood-0);
  transform: translate(1px, 1px);
}
.enter:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* ── body ────────────────────────────────────────────── */

.term__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  min-height: 0;
}

/* ── the floor itself ────────────────────────────────── */

.plate { position: relative; min-height: 0; overflow: hidden; }

/* The still stays underneath as the floor of this element: it is what shows
   before the clip has buffered, if autoplay is refused, and for anyone who
   asked the system for reduced motion. The video fades in on top of it, so
   there is never a blank frame or a jump. */
.plate__art {
  position: absolute; inset: 0; overflow: hidden;
  background: url('/img/floor-warm.webp') 54% 44% / cover no-repeat;
  image-rendering: pixelated;
}
.plate__vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 54% 44%;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.plate__vid.is-live { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .plate__vid { display: none; }
}
.plate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(19,17,16,.96) 0%, rgba(19,17,16,.88) 28%, rgba(19,17,16,.1) 62%, rgba(19,17,16,.42) 100%),
    linear-gradient(0deg, rgba(19,17,16,.9) 0%, rgba(19,17,16,0) 32%);
}

.plate__copy {
  position: relative; z-index: 1;
  height: 100%;
  display: grid; align-content: center; justify-items: start;
  gap: var(--s4);
  padding: var(--s6) clamp(24px, 4vw, 52px);
  max-width: 700px;
}
.plate__title {
  font-size: clamp(36px, 4.6vw, 62px); font-weight: 800;
  letter-spacing: -.04em; line-height: .96; text-transform: uppercase;
  color: var(--paper);
  text-shadow: 3px 3px 0 rgba(0,0,0,.8);
}
.plate__title em { font-style: normal; color: var(--lamp); }
.plate__lede {
  max-width: 40ch; font-size: 14.5px; line-height: 1.6; color: var(--paper-2);
  border-left: 3px solid var(--lamp); padding-left: var(--s4);
}
.plate__go { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.plate__go span { font-family: var(--mono); font-size: 11px; color: var(--paper-2); }

.btn--lg {
  height: 46px; padding: 0 var(--s5);
  background: var(--lamp); color: #131110;
  border: 0; border-radius: 0;
  box-shadow:
    inset 2px 2px 0 var(--lamp-hi),
    inset -2px -2px 0 var(--lamp-dim),
    3px 3px 0 rgba(0,0,0,.75);
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  transition: none;
}
.btn--lg:hover { background: var(--lamp-hi); }
.btn--lg:active {
  box-shadow: inset 2px 2px 0 var(--lamp-dim), 1px 1px 0 rgba(0,0,0,.75);
  transform: translate(2px, 2px);
}

.plate__nums {
  display: flex; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap;
  padding-top: var(--s4);
  border-top: 2px solid rgba(240,236,228,.14);
  width: 100%; max-width: 540px;
}
.plate__nums div { display: grid; gap: 3px; }
.plate__nums dt {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-w);
}
.plate__nums dd {
  font-family: var(--mono); font-size: 24px; font-weight: 500; line-height: 1;
  color: var(--paper);
}

/* ── right rail ──────────────────────────────────────── */

.rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) minmax(0, .8fr);
  background: var(--wood-1);
  border-left: 2px solid var(--wood-0);
  min-height: 0;
}
.pane {
  display: flex; flex-direction: column; min-height: 0;
  border-bottom: 2px solid var(--wood-0);
}
.pane:last-child { border-bottom: 0; }
.pane__head {
  height: 28px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s3);
  background: var(--wood-2);
  box-shadow: inset 0 1px 0 var(--wood-4);
}
.pane__head h2 {
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--paper);
}
.pane__head span { font-family: var(--mono); font-size: 10px; color: var(--paper-2); }
.pane__foot {
  flex: none; display: flex; gap: var(--s3);
  padding: 2px var(--s3) 8px;
  font-size: 9px; letter-spacing: .06em; color: var(--ink-w);
}
.pane__foot span { display: flex; align-items: center; gap: 5px; }

.sw { width: 9px; height: 9px; display: inline-block; }
.sw--free { background: transparent; box-shadow: inset 0 0 0 2px var(--lamp-dim); }
.sw--held { background: var(--wood-3); }
.sw--sat  { background: var(--wood-4); position: relative; }
.sw--sat::after {
  content: ''; position: absolute; right: 0; top: 0; width: 3px; height: 3px;
  background: var(--lamp);
}

/* thirty desks, as thirty blocks */
.deskmap {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px;
  padding: var(--s3) var(--s3) var(--s2);
}
.dm {
  aspect-ratio: 1;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 8px;
  background: var(--wood-3); color: var(--paper-2);
  box-shadow: inset 1px 1px 0 var(--wood-4), inset -1px -1px 0 var(--wood-0);
  transition: none;
}
/* only the free desks carry lamp light — they are the ones worth noticing */
.dm:not(.held):not(.sat) {
  background: var(--wood-1); color: var(--lamp);
  box-shadow: inset 0 0 0 2px var(--lamp-dim);
}
.dm.sat { background: var(--wood-4); color: var(--paper); position: relative; }
.dm.sat::after {
  content: ''; position: absolute; right: 2px; top: 2px;
  width: 3px; height: 3px; background: var(--lamp);
}
.dm:hover { color: var(--paper); }

/* ── quotes ──────────────────────────────────────────── */

.quotes { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.q {
  display: grid; grid-template-columns: 52px 1fr 56px;
  align-items: baseline; gap: var(--s2);
  padding: 4px var(--s3);
  border-bottom: 1px solid rgba(240,236,228,.07);
  font-family: var(--mono); font-size: 11px;
  color: var(--paper);
}
.q:last-child { border-bottom: 0; }
.q b { font-weight: 700; }
.q span, .q em {
  text-align: right; font-style: normal; font-variant-numeric: tabular-nums;
}
.q.up em { color: var(--up); }
.q.down em { color: var(--down); }
.q.shut b, .q.shut span, .q.shut em { color: var(--ink-w); }

/* ── tape ────────────────────────────────────────────── */

.tape { flex: 1; min-height: 0; overflow-y: auto; padding: 3px 0; scrollbar-width: thin; }
.tp2 {
  display: grid; grid-template-columns: 48px 40px 1fr auto;
  gap: var(--s2); align-items: baseline;
  padding: 3px var(--s3);
  font-family: var(--mono); font-size: 10px; color: var(--paper-2);
}
.tp2 b { color: var(--paper); font-weight: 700; }
.tp2 .sd { text-transform: uppercase; font-size: 9px; letter-spacing: .06em; }
.tp2 .sd.buy, .tp2 .sd.cover { color: var(--up); }
.tp2 .sd.sell, .tp2 .sd.short { color: var(--down); }
.tp2 .amt { text-align: right; font-variant-numeric: tabular-nums; }
.tape__empty { padding: var(--s3); font-size: 10.5px; color: var(--ink-w); }

/* ── foot ────────────────────────────────────────────── */

.term__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s4);
  background: var(--wood-1);
  border-top: 2px solid var(--wood-0);
  box-shadow: inset 0 1px 0 var(--wood-3);
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-w);
}

@media (max-width: 1100px) {
  .term__body { grid-template-columns: 1fr; grid-template-rows: minmax(260px, 1fr) minmax(0, 1fr); }
  .rail { border-left: 0; border-top: 2px solid var(--wood-0); }
}

/* ── the contract address ─────────────────────────────────────

   The one string on this page somebody will want to take with them, so it is a
   button and not a line of text. Full address, never truncated: people read a CA
   character by character, and an ellipsis in the middle is exactly where a fake
   one hides. Monospace, and none of the footer's tracking — letter-spacing on an
   address makes it harder to compare against the one in your wallet.
   ──────────────────────────────────────────────────────────── */

.ca {
  display: flex; align-items: center; gap: 8px;
  margin: 0 -6px 0 var(--s4); padding: 5px 6px;
  background: none; border: 0; border-radius: 0;
  cursor: pointer; min-width: 0;
  transition: color 140ms var(--ease);
}
.ca__k {
  flex: none;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-w);
}
.ca__v {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0; text-transform: none;
  color: var(--paper-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 140ms var(--ease);
}
/* A block that fills on copy — the pixel version of a check mark. */
.ca__s {
  flex: none; width: 7px; height: 7px;
  border: 1px solid var(--wood-4);
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.ca:hover .ca__v { color: var(--paper); }
.ca:hover .ca__s { border-color: var(--wood-5); }
.ca:focus-visible { outline: 1px solid var(--lamp); outline-offset: 0; }
.ca:active .ca__v { color: var(--lamp-dim); }

.ca.is-copied .ca__v { color: var(--lamp); }
.ca.is-copied .ca__s { background: var(--lamp); border-color: var(--lamp); }

@media (max-width: 720px) {
  .ca__k { display: none; }
}

/* Unreachable is a state, not an absence: the lamp goes out and turns red. */
.term__state.is-down::before { background: var(--down); }
.term__state.is-down { color: var(--down); }
.enter:disabled { background: var(--wood-3); color: var(--ink-w); cursor: not-allowed; box-shadow: none; }

/* The way to an account, offered but never in the way — a visitor is meant to
   look around first. Same shape as the primary button, none of its weight. */
.enter--ghost {
  background: none; color: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--wood-4);
}
.enter--ghost:hover { color: var(--lamp); box-shadow: inset 0 0 0 1px var(--lamp-dim); }
.enter--ghost[hidden] { display: none; }