/* repons — the entry page. One column: a wordmark that is itself a replay, then
   the two fields and the one button. Tokens all come from base.css; nothing
   here redefines a variable, and no colour is written out longhand except the
   two the canvas needs, which live in enter.js beside the drawing code. */

/* A faint colourless tape across the top of the document, behind the hero.
   Texture, not content: it takes no pointer events, it is pinned to the
   document rather than the viewport so it scrolls away with the masthead, and
   it is held far below the wordmark's own candles so the letters stay the
   brightest thing on the page. */
.tape{
  position:absolute;top:0;left:0;width:100%;height:min(620px,72vh);
  z-index:0;pointer-events:none;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 55%,transparent 96%);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 55%,transparent 96%);
}

/* One viewport tall and vertically centred while it is empty; the moment a
   coin resolves the content outgrows the screen and it becomes an ordinary
   top-anchored page. min-height, never height: a fixed height with centring
   pushes overflow off the top where it cannot be scrolled back to. */
.col{
  position:relative;z-index:1;
  width:100%;max-width:820px;margin:0 auto;
  padding:clamp(20px,4vh,44px) 22px 36px;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;justify-content:flex-start;
}

/* ---------- the account ---------- */
/* One outlined slab, the same object every switch on the replay page is, pinned
   to the corner so it is reachable from the board as well as from the top. It
   sits above the tape and below nothing. */
.xlink{
  position:fixed;top:14px;right:14px;z-index:5;
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--dim);background:rgba(0,0,0,.5);
  transition:color .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease),box-shadow .2s var(--ease);
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .xlink{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
.xlink svg{width:15px;height:15px;fill:currentColor;display:block}
.xlink:hover,.xlink:focus-visible{
  color:var(--accent);border-color:var(--accent);background:var(--bg-3);
  box-shadow:0 0 18px rgba(var(--accent-rgb),.16);outline:none;
}
@media (max-width:560px){ .xlink{top:10px;right:10px;width:32px;height:32px} }

/* ---------- hero ---------- */
.hero{margin-bottom:clamp(18px,3vh,30px);width:100%;max-width:580px;margin-inline:auto}
.logo-box{position:relative;width:100%;display:flex;align-items:center;gap:clamp(10px,2vw,20px)}
/* The mark, beside the drawn wordmark. It is the same pixel grid and the same
   lime, so it sits on the wordmark's line rather than above it — one lockup,
   not a logo with a title under it. */
.brand{
  flex:none;width:clamp(54px,9vw,108px);height:auto;display:block;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.28));
}
.logo-box .logo{flex:1 1 auto;min-width:0}
/* The canvas sizes its own height from the font it fits to the width; the CSS
   height is only a placeholder until the first draw so the column does not
   jump. width, not left+right: a canvas is a replaced element. */
.logo{display:block;width:100%;height:clamp(52px,9.5vw,134px)}
.sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.hero .sub{
  margin:14px 0 0;max-width:52ch;color:var(--dim);
  font-size:12.5px;line-height:1.55;letter-spacing:.01em;
  /* It sits on the background tape; a black halo keeps it off the candles. */
  text-shadow:0 1px 0 var(--bg),0 0 8px var(--bg),0 0 3px var(--bg);
}

/* ---------- the deck: both steps and the button ---------- */
/* The console. Both fields and the button sit on the same surface the
   replay plot and the result card are drawn on — the pixel grid, a hairline,
   the viewfinder corners — so the thing you type into is visibly the thing
   you are about to watch. One panel, and the only one on the page. */
.deck{
  position:relative;width:100%;max-width:580px;margin-inline:auto;
  padding:20px 22px 22px;border:1px solid var(--line);
  background-color:var(--bg-2);background-image:var(--grid-bg);background-size:var(--grid-px) var(--grid-px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
}
.deck::before{content:'';position:absolute;inset:8px;pointer-events:none;background:var(--vf-bg);background-repeat:no-repeat;opacity:.9}

.step{margin-top:22px}
.step:first-child{margin-top:0}
.cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.cap-x{font-size:11px;color:var(--faint)}
/* Sentence case, plain mono. The pixel numeral is the whole instruction
   manual: two of them say "there are two things to fill in, this is the
   first" — and there really are two steps, in order. */
.lbl{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.01em;text-transform:none;
  color:var(--dim);font-weight:500;display:flex;align-items:baseline;gap:9px;
}
.lbl i{
  font-style:normal;font-size:15px;line-height:1;color:var(--accent);
  min-width:1ch;
}

.field.addr{
  font-size:13.5px;padding:12px 14px;letter-spacing:.02em;
  background:var(--bg);border-color:var(--line-2);border-radius:var(--r);
}
.field.addr:focus{background:var(--bg);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12),0 0 28px rgba(var(--accent-rgb),.08)}

/* The rail is the "this is working" signal, one per slow call, parked under
   its own field. Held well below full accent: it sweeps for minutes at a
   time, and chartreuse at full strength on black is a strobe. */
.rail{
  position:relative;height:2px;margin-top:8px;border-radius:2px;overflow:hidden;
  background:var(--line);opacity:0;transition:opacity .2s var(--ease);
}
.rail.on{opacity:1}
.rail i{
  position:absolute;top:0;bottom:0;left:0;width:32%;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.55),transparent);
  animation:sweep 1.3s linear infinite;
}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(340%)}}

.status{margin:10px 0 0;min-height:16px;font-size:12px;letter-spacing:.01em;color:var(--faint);line-height:1.5}
.status:empty{margin:0;min-height:0}
.status.work,.status.ok{color:var(--dim)}
.status.err{color:var(--down)}

/* ---------- rows ---------- */
/* Both lists scroll: a busy coin resolves to thirty markets and a market can
   carry twenty-five traders, and neither may push the button off the screen. */
.rows{
  display:grid;gap:3px;
  max-height:206px;overflow-y:auto;overflow-x:hidden;padding-right:2px;
}
.rows:not(:empty){margin-top:10px}

/* One row shape for markets and wallets alike: name, note, number. The number
   is its own right-aligned column on a fixed measure so the counts line up
   down the list. No border and no fill until touched — a scrolling stack of
   outlined boxes was the busiest thing on the page. */
.prow{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:baseline;gap:14px;width:100%;text-align:left;
  padding:9px 12px 9px 16px;border-radius:var(--r-sm);background:transparent;
  border:1px solid transparent;
  transition:background .12s var(--ease),border-color .12s var(--ease),box-shadow .2s var(--ease);
}
.prow::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:3px;background:transparent;transition:background .12s var(--ease);
}
.prow:hover{background:rgba(var(--ink-rgb),.045)}
/* Selection survives being read without colour: the plate, the brighter name
   and the accent edge all carry it, and the glow is the fourth signal. */
.prow.on{
  background:var(--bg-3);border-color:rgba(var(--accent-rgb),.28);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.06),0 0 26px rgba(var(--accent-rgb),.10);
}
.prow.on::before{background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.7)}

.rsym{
  font-size:13.5px;letter-spacing:.02em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.prow.on .rsym{text-shadow:var(--glow-ink)}
.rsym em{font-style:normal;color:var(--faint)}

.rmeta{display:flex;align-items:baseline;gap:10px;font-size:11px;color:var(--faint);white-space:nowrap}
/* The market cap is the one thing on a market row a person actually decides
   on, so it is the brighter of the two notes. */
.rmeta .rcap{color:var(--dim);font-variant-numeric:tabular-nums}
.rn{
  font-size:11px;color:var(--dim);white-space:nowrap;
  text-align:right;min-width:11.5ch;font-variant-numeric:tabular-nums;
}
.rn em{font-style:normal;color:var(--faint)}
.rn.rn-dead{color:var(--faint);font-style:italic}
.rtag{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ---------- commit ---------- */
.commit{margin-top:24px;display:flex;flex-direction:column;align-items:stretch}
/* The button is the only large block of accent on the page, so it gets the
   room: a slab the width of the deck, in the pixel face at a size that reads
   from across a desk. Lit, it blooms; it does not blink. */
#go{
  width:100%;font-size:clamp(15px,2.4vw,19px);letter-spacing:.14em;
  padding:15px 20px;border-radius:var(--r);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),
    box-shadow .3s var(--ease),transform .08s var(--ease);
}
#go:not(:disabled){box-shadow:var(--glow-up)}
#go:not(:disabled):hover{box-shadow:0 0 22px rgba(var(--up-rgb),.6),0 0 64px rgba(var(--up-rgb),.28)}
/* Unusable means unlit, not a dimmed chartreuse slab: the accent arriving is
   the signal that a coin is chosen. */
#go:disabled,#go:disabled:hover{
  opacity:1;background:transparent;border-color:var(--line-2);color:var(--faint);box-shadow:none;
}
/* One pulse the moment it arms — a single breath, then it holds. The class is
   put on by enter.js only on the disabled -> enabled edge, so typing in the
   wallet field never re-fires it and a bfcache return, where the button was
   already lit, does not flash. */
#go.armed{animation:arm .9s var(--snap) both}
@keyframes arm{
  0%{transform:scale(.985);box-shadow:0 0 0 0 rgba(var(--up-rgb),.0)}
  35%{transform:scale(1.015);box-shadow:0 0 0 10px rgba(var(--up-rgb),.22),0 0 60px rgba(var(--up-rgb),.5)}
  100%{transform:scale(1);box-shadow:var(--glow-up)}
}
.note{margin:11px 0 0;text-align:center;font-size:11.5px;color:var(--faint);letter-spacing:.01em;line-height:1.5}
.note.warn{color:var(--down)}

/* ---------- the cook board ---------- */
/* Breaks out of the 820px column to the width the tiles want. Every tile is a
   replay playing: the coin's own candles, the wallet's fills landing on them,
   and the score climbing in the corner. Same chrome as the replay page, at a
   tenth the size — a REPLAY light, the run the coin printed, the coin and who
   minted it, and the wallet's number. What draws inside is cooks.js. */
.board{
  position:relative;left:50%;transform:translateX(-50%);
  width:min(1040px,calc(100vw - 44px));
  margin-top:clamp(32px,5vh,54px);
}
.board-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.board-t{margin:0;font-size:clamp(17px,2.2vw,24px);font-weight:700;letter-spacing:.08em;color:var(--ink);line-height:1}
.board-t b{color:var(--accent);font-weight:700;animation:blink 1s steps(2) infinite}
.board-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px}

/* Three, big, above the grid. The board is thirty replays and they are all the
   same size, which makes none of them the one to watch first — the spotlights
   are the ones with the biggest number on them, at a size where the tape can
   actually be read. */
/* Under the lamp.
   The three are lit rather than just bigger: a beam falling from above the row,
   a pool of light behind them, and a warm top edge on each tile. The beam is
   one element and the glow is drawn with gradients — no images, and it costs
   nothing to paint. */
.spotlight{position:relative;padding-top:24px;margin-bottom:12px}
.lamp{
  position:absolute;left:50%;top:-14px;transform:translateX(-50%);
  width:min(660px,96%);height:150px;pointer-events:none;z-index:0;
  background:
    radial-gradient(52% 88% at 50% 0%,rgba(var(--accent-rgb),.20),rgba(var(--accent-rgb),.06) 46%,transparent 72%),
    radial-gradient(30% 40% at 50% 0%,rgba(var(--accent-rgb),.30),transparent 70%);
}
/* The bulb: a small bright bar the beam appears to fall from. */
.lamp::after{
  content:'';position:absolute;left:50%;top:6px;transform:translateX(-50%);
  width:52px;height:3px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.9),0 0 34px rgba(var(--accent-rgb),.5);
}
.spot-cap{
  position:relative;z-index:1;margin:0 0 8px;text-align:center;
  font-size:10px;letter-spacing:.28em;color:var(--dim);
  text-shadow:0 0 12px rgba(var(--accent-rgb),.35);
}
.board-spot{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cook.spot{
  aspect-ratio:16/10;border-color:var(--line-2);
  /* lit from above */
  box-shadow:inset 0 26px 48px -26px rgba(var(--accent-rgb),.22),0 0 30px rgba(var(--accent-rgb),.06);
}
.cook.spot:hover,.cook.spot:focus-visible{
  box-shadow:inset 0 26px 48px -26px rgba(var(--accent-rgb),.3),
             0 0 0 1px rgba(var(--accent-rgb),.35),0 0 34px rgba(var(--accent-rgb),.22);
}
.cook.spot .cook-live{font-size:9.5px;left:8px;top:8px}
.cook.spot .cook-run{font-size:13px;right:8px;top:7px}
.cook.spot .cook-h{padding:9px 8px 8px;gap:8px}
.cook.spot .cook-pfp{width:38px;height:38px;border-radius:4px}
.cook.spot .cook-t b{font-size:16px}
.cook.spot .cook-t em{font-size:10.5px}
.cook.spot .cook-p{font-size:17px}
.cook.spot::after{--vf-len:16px;--vf-th:2px}
@media (max-width:820px){ .board-spot{grid-template-columns:1fr;gap:6px} }
.cook{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;text-decoration:none;
  background:var(--bg);background-image:var(--grid-bg);background-size:16px 16px;
  border:1px solid var(--line);border-radius:3px;
  transition:border-color .15s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease);
}
/* The tape. Named, not just "any canvas in a tile": the fallback coin mark is
   a canvas too, and a bare `.cook canvas` rule outranks .cook-pfp and stretched
   it across the whole tile. */
.cook-tape{position:absolute;inset:0;width:100%;height:100%;display:block}
.cook:hover,.cook:focus-visible{
  z-index:2;transform:scale(1.06);outline:none;border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3),0 0 24px rgba(var(--accent-rgb),.18);
}
/* Scanlines and a vignette: the monitor's own texture, over the tape and under
   the chrome. */
.cook::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--scan-bg),
             radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%);
}
/* The viewfinder corners the replay page and the card both draw, at tile
   scale — only under the pointer, so a still board is not forty lime brackets. */
.cook::after{
  content:'';position:absolute;inset:4px;z-index:2;pointer-events:none;opacity:0;
  background:var(--vf-bg);background-repeat:no-repeat;
  --vf-len:9px;--vf-th:2px;
  transition:opacity .15s var(--ease);
}
.cook:hover::after,.cook:focus-visible::after{opacity:.85}
.cook-live,.cook-run,.cook-h{position:absolute;z-index:3;font-family:var(--font-mono);line-height:1;pointer-events:none}
.cook-live{
  left:5px;top:5px;font-size:8px;letter-spacing:.12em;color:var(--ink);
  display:flex;align-items:center;gap:3px;text-shadow:0 1px 0 #000,0 0 4px #000;
}
.cook-live i{width:5px;height:5px;background:var(--down);border-radius:50%;box-shadow:0 0 6px var(--down);animation:blink 1.1s steps(2) infinite}
.cook-run{right:5px;top:4px;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:700;color:var(--accent);text-shadow:0 1px 0 #000,0 0 6px rgba(var(--accent-rgb),.5)}
/* The name plate: the coin's own artwork, what it is called, and the score.
   One flex row rather than three absolutely-placed pieces, so a long name
   shortens itself instead of running under the number. */
.cook-h{
  left:0;right:0;bottom:0;padding:6px 5px 5px;display:flex;align-items:center;gap:5px;
  font-size:8.5px;color:var(--dim);
  background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.6) 70%,transparent);
}
/* The coin's logo, read off its own contract. Squared and 64px on disk, so it
   is sharp at 2x and costs about 1.5 KB. */
.cook-pfp{
  width:24px;height:24px;flex:none;border-radius:3px;display:block;object-fit:cover;
  background:var(--bg-3);border:1px solid var(--line-2);
}
/* A named trader's own picture gets a ring, so the board says at a glance
   which tiles are somebody and which are a coin. */
.cook-pfp.who{border-color:var(--accent);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35)}
/* No logo on chain and nobody named: the ticker, set in the app's own face.
   The pattern this replaced was seeded noise, which read as a broken image. */
.cook-pfp.letter{
  display:flex;align-items:center;justify-content:center;
  font-size:10px;line-height:1;letter-spacing:.02em;color:var(--faint);
  background:var(--bg-3);
}
.cook-t{min-width:0;flex:1 1 auto;overflow:hidden}
.cook-t b,.cook-t em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cook-t b{font-size:11px;font-weight:700;color:var(--ink);letter-spacing:.04em;line-height:1.15}
.cook-t em{font-style:normal;line-height:1.3}
.cook-p{
  flex:none;font-weight:700;font-size:11px;color:var(--up);
  text-shadow:0 0 8px rgba(var(--up-rgb),.6),0 1px 0 #000;
}
.cook-p.neg{color:var(--down);text-shadow:0 0 8px rgba(var(--down-rgb),.6),0 1px 0 #000}
@keyframes blink{to{opacity:.25}}

/* ---------- footer ---------- */
.foot{
  margin-top:clamp(32px,6vh,64px);display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;font-size:11px;color:var(--faint);line-height:1.5;
}
.foot-k{white-space:nowrap}
kbd{
  font:inherit;font-size:10px;padding:1px 6px;border:1px solid var(--line-2);border-bottom-width:2px;
  border-radius:4px;color:var(--dim);background:var(--bg-2);
}

/* ---------- focus ---------- */
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Inset for rows: they live inside an overflow:auto list, which clips an
   outline drawn outside the border box. */
.prow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

@media (max-width:560px){
  .board{width:calc(100vw - 32px)}
  .board-g{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:4px}
  .cook-h{padding:5px 4px 4px;gap:4px;font-size:8px}
  .cook-t b{font-size:10px}
  .cook-pfp{width:20px;height:20px}
  .col{padding:36px 16px 32px}
  .hero .sub{font-size:12.5px}
  .step{margin-top:28px}
  .field.addr{font-size:14px;padding:14px 14px}
  .commit{margin-top:32px}
  #go{padding:17px 16px;letter-spacing:.1em}
  .rmeta{gap:6px}
  /* the number still carries the meaning; the word is what stops fitting */
  .rn em{display:none}
  .rn{min-width:6.5ch}
  .foot{flex-direction:column;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  /* base.css already flattens transitions; the sweep has to stop being a
     sweep, not just run instantly, or the rail flickers at one edge. */
  .rail i{width:100%;background:var(--line-2);animation:none}
  #go.armed{animation:none}
  .cook-live i,.board-t b{animation:none}
  .cook:hover{transform:none}
}