/* ─────────────────────────────────────────────────────────────────────────
   APED · conviction board  —  HUD

   Third desk, third face. Maru is a neon tty, Kyokai is a morning pond;
   APED dresses like the venue it works in — pump.fun. Near-black board,
   pump-green numbers, chunky rounded cards with hard thin borders, Inter
   for words and mono for money. The callout feed is the front page; the
   book rides shotgun. hud.js reads its colours from the variables below
   and renders the same data-* hooks as ever.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Sized so the two feeds stacked = the bag + vitals + wallet beside them,
     and the columns finish level. Fixed on purpose: the boxes must not
     resize as calls land, or the whole page shifts under the reader. */
  --feed-h: 228px;
  --bg:      #0e1015;
  --bg2:     #14171e;
  --card:    #171a21;
  --line:    #242938;
  --line2:   #2f3548;
  --ink:     #f2f4f8;
  --dim:     #8a93a6;
  --acc:     #6ee7a0;   /* pump green */
  --acc-d:   #234534;
  --cyan:    #7dd3fc;
  --green:   #6ee7a0;
  --red:     #f87171;
  --gold:    #fde047;
  --shadow:  0 8px 26px rgba(0, 0, 0, .45);
  --r:       14px;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --round:   'Inter', system-ui, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { max-width: 100%; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 500 15px/1.5 var(--round);
  background:
    radial-gradient(50rem 30rem at 85% -10%, rgba(110, 231, 160, .07), transparent 60%),
    radial-gradient(40rem 26rem at -10% 20%, rgba(253, 224, 71, .05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

.noise, .crt { display: none; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--card); color: var(--ink); padding: .5rem .9rem;
}
.skip:focus { left: 0; z-index: 99; }

a { color: var(--acc); }
::selection { background: var(--acc-d); }

.dim  { color: var(--dim); }
.hi   { color: var(--ink); }
.warn { color: var(--gold); }
.up, .green, .g { color: var(--green); }
.down, .red, .r { color: var(--red); }
.cy   { color: var(--cyan); }
.empty { color: var(--dim); font-size: .92em; margin: .3rem 0; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap { max-width: 1160px; margin: 0 auto; padding: 12px 16px 60px; display: grid; gap: 14px; }

.duo { display: grid; grid-template-columns: 1fr 330px; gap: 14px; align-items: stretch; }
.side { display: grid; gap: 14px; }
.row { display: grid; gap: 14px; align-items: stretch; }
.row2 { grid-template-columns: 1.2fr 1fr; }
.row4 { grid-template-columns: repeat(4, 1fr); }
.row4 .panel { display: flex; flex-direction: column; min-height: 190px; }
.row4 .pb { flex: 1; }
.row4 .scroll { max-height: 150px; }

/* ── the rail ──────────────────────────────────────────────────────────── */
.rail {
  display: flex; align-items: center; gap: .6rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  padding: .45rem .7rem;
  position: sticky; top: 8px; z-index: 20;
}
.rail .mark { width: 34px; height: 34px; border-radius: 9px; }
.brand {
  font-weight: 800; font-size: 1.15rem; letter-spacing: .06em;
  color: var(--acc);
}
.led { font-size: .8em; color: var(--dim); display: inline-flex; align-items: center; gap: .35rem; }
.led.on { color: var(--green); }
.led.old { color: var(--gold); }
.led i { font-style: normal; letter-spacing: .05em; }
.led.on::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .2; } }
.badge {
  font: 700 .7em var(--round); letter-spacing: .14em;
  border: 1.5px solid var(--line2); color: var(--dim);
  border-radius: 7px; padding: .16rem .5rem;
}
.badge.live { border-color: var(--green); color: var(--green); }
.spacer { flex: 1; }
.xlink {
  font: 700 .78em var(--round); letter-spacing: .02em;
  color: var(--dim); text-decoration: none;
  border: 1.5px solid var(--line2); border-radius: 8px;
  padding: .34rem .6rem; white-space: nowrap;
}
.xlink:hover { color: var(--ink); border-color: var(--acc); }

.ca {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 800 .8em var(--round); letter-spacing: .05em;
  color: #08130c; background: var(--acc);
  border: 0; border-radius: 9px; padding: .5rem .95rem;
  cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
.ca:hover { transform: translateY(-1px); filter: brightness(1.08); }
.ca.done { background: var(--gold); }
.ca .ca-addr { font: 600 .9em var(--mono); opacity: .8; }

/* ── panels ────────────────────────────────────────────────────────────── */
.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); min-width: 0;
}
.ph { display: flex; align-items: baseline; gap: .6rem; padding: .65rem .9rem .3rem; }
.ph h2 {
  margin: 0; font: 800 .82rem var(--round); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
.ph h2::before { content: '▮ '; color: var(--acc); }
.pm { margin-left: auto; font-size: .76em; color: var(--dim); white-space: nowrap; }
.pb { padding: .3rem .9rem .85rem; min-width: 0; }

.scroll { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 8px; }
.scroll { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }

/* ── the operator screen: the account, live ────────────────────────────── */
.colmain { display: grid; gap: 14px; min-width: 0; }
/* copy-to-post, on every callout */
.co-foot { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; }
.co-copy {
  font: 700 .68em var(--round); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); background: transparent;
  border: 1.5px solid var(--line2); border-radius: 7px;
  padding: .2rem .6rem; cursor: pointer;
}
.co-copy:hover { color: var(--ink); border-color: var(--acc); }
.co-copy.done { color: #08130c; background: var(--acc); border-color: var(--acc); }
.co-live { font: 700 .68em var(--round); letter-spacing: .08em; color: var(--green); }
.op-chrome {
  display: flex; align-items: center; gap: .6rem;
  margin: .2rem .9rem 0; padding: .3rem .55rem;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px;
}
.op-dots { display: inline-flex; gap: .28rem; }
.op-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); }
.op-dots i:first-child { background: var(--red); opacity: .7; }
.op-dots i:nth-child(2) { background: var(--gold); opacity: .7; }
.op-dots i:last-child { background: var(--green); opacity: .7; }
.op-url { font: 500 .78em var(--mono); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-body {
  font: 500 .84em var(--mono);
  height: var(--feed-h); overflow-y: auto;
  display: grid; gap: .18rem; align-content: start;
}
.op-line { color: var(--ink); overflow-wrap: anywhere; }
.op-t { color: var(--dim); font-size: .9em; margin-right: .35rem; }
.op-q { color: var(--acc); quotes: '"' '"'; }
.op-line.op-type .op-q::after {
  content: '▊'; color: var(--acc);
  animation: caret 1s steps(1) infinite;
}
html[data-motion="off"] .op-line.op-type .op-q::after { content: ''; }
@keyframes caret { 50% { opacity: 0; } }

/* ── the callout feed: the front page ──────────────────────────────────── */
.callouts { display: grid; gap: .55rem; max-height: 380px; }
.co {
  border: 1px solid var(--line); border-left: 4px solid var(--acc);
  border-radius: 11px; background: var(--bg2);
  padding: .55rem .75rem;
}
.co.watching { border-left-color: var(--gold); }
.co-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.co-sym { font: 800 1em var(--round); color: var(--ink); }
.co-kind {
  font: 800 .64em var(--round); letter-spacing: .12em; text-transform: uppercase;
  border-radius: 6px; padding: .14rem .45rem;
  color: #08130c; background: var(--acc);
}
.co.watching .co-kind { background: var(--gold); }
.co-when { color: var(--dim); font: 500 .76em var(--mono); }
.co-link { margin-left: auto; font: 600 .78em var(--round); }
.co-text { margin: .3rem 0 0; color: var(--ink); }
.co-note { margin-top: .2rem; font-size: .76em; color: var(--dim); }

/* ── the bag (book) ────────────────────────────────────────────────────── */
.figure { display: flex; align-items: baseline; gap: .25rem; margin: .15rem 0 .45rem; }
.cur { color: var(--acc); font: 800 1.3rem var(--round); }
.big { font: 800 2.9rem/1 var(--round); letter-spacing: -.01em; color: var(--ink); }
.book-kv { font-size: .95em; }
.paper-note { margin: .4rem .9rem .8rem; color: var(--dim); font-size: .8em; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .18rem .8rem; font-size: .92em; }
.kv .k { color: var(--dim); }
.kv .v { text-align: right; font-family: var(--mono); font-size: .95em; }

/* ── vitals tiles ──────────────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tile {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 10px; padding: .4rem .6rem; display: grid; gap: .05rem;
}
.tk { font-size: .68em; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.tv { font: 600 .95em var(--mono); color: var(--ink); }
.tiles .halt { grid-column: 1 / -1; }
.halt {
  margin: .4rem 0 0; padding: .45rem .7rem; border-radius: 10px;
  background: rgba(248, 113, 113, .12); color: var(--red); font-weight: 700; font-size: .85em;
}

/* ── wallet: tap to copy ───────────────────────────────────────────────── */
.addr { font: 500 .76em var(--mono); word-break: break-all; color: var(--ink); }
.jar-addr {
  display: grid; gap: .3rem; width: 100%; text-align: left;
  background: var(--bg2); border: 1.5px solid var(--line2);
  border-radius: 10px; padding: .55rem .65rem; cursor: pointer;
  transition: border-color .15s ease;
}
.jar-addr:hover { border-color: var(--acc); }
.jar-addr .jar-hint { font: 700 .68em var(--round); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.jar-addr.done { border-color: var(--green); }
.jar-addr.done .jar-hint { color: var(--green); }

/* ── the board: positions as coin cards ────────────────────────────────── */
.board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .6rem; max-height: 460px;
}
.pos {
  border: 1px solid var(--line); border-radius: 11px;
  padding: .55rem .7rem; background: var(--bg2);
  transition: border-color .15s ease;
}
.pos:hover { border-color: var(--acc); }
.pos header { display: flex; align-items: baseline; gap: .5rem; }
.pos .sym { font-weight: 800; }
.pos .tot { margin-left: auto; font-family: var(--mono); font-size: .9em; }
.pos .mc { font-family: var(--mono); font-size: .78em; color: var(--dim); margin: .15rem 0; }
.pos .arr { color: var(--dim); }
.pos .kv.pk { font-size: .8em; gap: .06rem .6rem; }
.pos.faint { opacity: .7; }

/* ── the chart ─────────────────────────────────────────────────────────── */
.ranges { display: inline-flex; gap: .2rem; margin-left: .6rem; }
.chartwrap { position: relative; padding-bottom: 1.4rem; }
.chart { width: 100%; height: 210px; display: block; }
.axis-y { position: absolute; inset: 0 0 1.4rem 0; pointer-events: none; }
.axis-y span {
  position: absolute; right: 4px; transform: translateY(-50%);
  font: 500 .68em var(--mono); color: var(--dim);
  background: rgba(23, 26, 33, .8); border-radius: 5px; padding: 0 .3rem;
}
.axis-x { position: absolute; left: 0; right: 0; bottom: .1rem; height: 1.1rem; pointer-events: none; }
.axis-x span {
  position: absolute; transform: translateX(-50%);
  font: 500 .68em var(--mono); color: var(--dim); white-space: nowrap;
}
.readout {
  position: absolute; top: .4rem; left: .6rem;
  background: var(--card); border: 1px solid var(--line2);
  border-radius: 8px; padding: .2rem .55rem;
  font: 500 .78em var(--mono); box-shadow: var(--shadow);
}

/* ── the screen (call screening) ───────────────────────────────────────── */
.mind {
  font-size: .87em; display: grid; gap: .5rem; padding-top: .2rem;
  /* max-height:none — the shared .scroll cap would otherwise win and the
     two feeds would not match. */
  height: var(--feed-h); max-height: none; overflow-y: auto; align-content: start;
}
.scan-row {
  background: var(--bg2); border: 1px solid var(--line);
  border-left: 4px solid var(--line2); border-radius: 10px;
  padding: .5rem .7rem .55rem;
}
.scan-row.took { border-left-color: var(--green); }
.scan-row.passed { border-left-color: var(--line2); }
.scan-head { display: flex; align-items: baseline; gap: .55rem; }
.scan-sym { color: var(--ink); font-weight: 800; }
.scan-when { color: var(--dim); font: 500 .76em var(--mono); }
.scan-pill {
  margin-left: auto; font: 800 .64em var(--round); letter-spacing: .1em;
  text-transform: uppercase; border-radius: 6px; padding: .12rem .5rem; white-space: nowrap;
}
.scan-row.took .scan-pill { color: #08130c; background: var(--green); }
.scan-row.passed .scan-pill { color: var(--dim); background: var(--bg); }
.scan-line { color: var(--dim); font-family: var(--mono); font-size: .82em; margin-top: .15rem; }
.scan-note { color: var(--ink); margin-top: .2rem; }
.scan-row.passed .scan-note { color: var(--dim); }
.scan-row.reveal .sl { animation: rise .5s ease both; }
.scan-row.reveal .sl:nth-child(2) { animation-delay: .25s; }
.scan-row.reveal .sl:nth-child(3) { animation-delay: .5s; }
html[data-motion="off"] .scan-row.reveal .sl { animation: none; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }

/* ── fills table ───────────────────────────────────────────────────────── */
.t { width: 100%; border-collapse: collapse; font: 500 .82em var(--mono); }
.t th {
  text-align: left; font: 700 .85em var(--round); color: var(--dim);
  letter-spacing: .08em; text-transform: uppercase;
  padding: .15rem .3rem .3rem; border-bottom: 1px solid var(--line2);
}
.t td { padding: .28rem .3rem; border-bottom: 1px solid var(--line); }
.t tr:last-child td { border-bottom: 0; }
.t .num { text-align: right; }

/* ── runners ───────────────────────────────────────────────────────────── */
.best-row { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.best-row:last-child { border-bottom: 0; }
.best-top { display: flex; align-items: baseline; gap: .5rem; }
.best-sym { font-weight: 800; }
.best-x { font: 800 1em var(--round); color: var(--gold); }
.best-tag {
  margin-left: auto; font: 700 .62em var(--round); letter-spacing: .12em;
  color: var(--dim); border: 1.5px solid var(--line2);
  border-radius: 6px; padding: .1rem .45rem; text-transform: uppercase;
}
.best-tag.live { color: var(--green); border-color: var(--acc-d); }
.best-line { font-size: .8em; color: var(--dim); margin-top: .1rem; }
.best-line b { color: var(--ink); font-weight: 600; }

/* ── log (journal) ─────────────────────────────────────────────────────── */
.ripples { font-size: .84em; }
.rip { display: flex; gap: .55rem; padding: .28rem 0; border-bottom: 1px solid var(--line); }
.rip:last-child { border-bottom: 0; }
.rip-t { font-family: var(--mono); color: var(--dim); flex: none; }
.rip-x { color: var(--ink); }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot {
  display: flex; align-items: center; gap: .5rem;
  padding: .2rem .4rem; color: var(--dim);
  border-top: 1px solid var(--line);
}
.bstat { font-size: .76em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bprog { font: 500 .76em var(--mono); color: var(--acc); }
.grow { flex: 1; }
.tbtn {
  font: 700 .74em var(--round); letter-spacing: .05em; color: var(--dim);
  background: transparent; border: 1.5px solid transparent;
  border-radius: 8px; padding: .26rem .6rem; cursor: pointer; text-decoration: none;
}
.tbtn:hover { color: var(--ink); border-color: var(--line2); }
.tbtn.on { color: #08130c; background: var(--acc); }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .duo { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .row4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .wrap { padding: 8px 8px 40px; gap: 10px; }
  .ca { padding: .4rem .7rem; }
  .ca .ca-addr { display: none; }
  .big { font-size: 2.4rem; }
  .row4 { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr 1fr; }
  .ph { flex-wrap: wrap; }
  .ranges { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-row.reveal .sl, .led.on::after { animation: none !important; }
}