/* The Trenches board and the token page: everything only those two screens use, on the tokens of styles.css
   (docs/BLUEPRINT.md section 4.9). Made by the foundation from the old stylesheet (its board and token rules, in
   their old order, so the cascade is the one the views were written against); owned by builder C from here on.
   Shared classes (.btn, .chip, .card, .qpill, .st-pill, .seg, .stat, ...) live in styles.css: use them, do not
   redefine them here. Colours only through tokens. No inline style attribute anywhere: a dynamic size goes through a
   CSS variable set from JS.
   Names taken here that start like another builder's prefix (they stay; nobody else may reuse them):
   .tp .tp-buy .tp-sell .tp-side .tp-sol .tp-t .tp-tx .tp-usd .tp-w (tape rows), .tr-buy .tr-sell (tape flashes),
   .wl .wl-dev .wl-sniper .wl-bundler .wl-kol (wallet labels). */

/* ---------- the two full-width screens: no page gutter, the bars above and below stay put ---------- */
body[data-view="pulse"] .sheet, body[data-view="coin"] .sheet { max-width: none; padding: 0; min-height: 0; }
body[data-view="pulse"] .foot, body[data-view="coin"] .foot { max-width: none; padding-left: 16px; padding-right: 16px; }
@media (max-width: 899px) {
  body[data-view="pulse"] .sheet { overflow-x: clip; }
}

@keyframes blink { 50% { opacity: 0.2; } }
/* ---------- board ---------- */
.asof { font-size: 13px; color: var(--muted); }
/* ---------- coin / trade screen ---------- */
.coin-title { min-width: 0; flex: 1 1 auto; }
.coin-title h1 { font-size: clamp(24px, 6vw, 36px); margin: 0; overflow-wrap: anywhere; }
.chart-card { grid-area: chart; margin: 0; padding: 12px; }
.chart-svg { width: 100%; height: auto; overflow: visible; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-tick { font: 500 11px var(--font-mono); fill: var(--muted); }
.ch-wick { stroke-width: 1.5; }
.ch-up.ch-wick { stroke: var(--up); }
.ch-down.ch-wick { stroke: var(--down); }
.ch-body.ch-up { fill: var(--up-soft); stroke: var(--up); stroke-width: 1.2; }
.ch-body.ch-down { fill: var(--down-soft); stroke: var(--down); stroke-width: 1.2; }
.ch-last { stroke: var(--brand); stroke-width: 1; stroke-dasharray: 3 4; }
.ch-last-tag { fill: var(--brand); }
.ch-last-txt { font: 600 11px var(--font-mono); fill: var(--bg); }
.ch-line { stroke: var(--down); stroke-width: 1.5; stroke-dasharray: 6 4; }
.ch-line-label { font: 600 15px var(--font-ui); fill: var(--down); }
.check-card { grid-area: check; margin: 0; }
.check-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* ---------- Pulse: live columns ---------- */
.k { font-size: 11px; color: var(--muted); font-weight: 600; margin-right: 3px; letter-spacing: 0; }
.pulse-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.pulse-title { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.pulse-title h1 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: clamp(28px, 6vw, 38px); }
.pulse-tools { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; flex: 1 1 300px; justify-content: flex-end; }
.pulse-fine { margin-top: 14px; max-width: 90ch; }
.pulse-seg { margin: 0 0 10px; }
.pulse-seg .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.pulse-seg .seg-btn { padding: 6px 4px; font-size: 14px; }
.pcol { position: relative; min-width: 0; background: var(--bg-2-a78); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 8px 8px; }
.pcol.paused { border-color: var(--line-2); box-shadow: inset 0 3px 0 var(--brand-soft); }
.pcol-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 2px; }
.pcol-head h2 { margin: 0; font-size: 19px; }
.pcol-count { font-size: 12px; color: var(--muted); padding: 1px 7px; border-radius: 999px; background: var(--bg-3); }
.pcol-paused { font: 700 17px/1 var(--font-ui); color: var(--down); white-space: nowrap; }
.pcol-pause { margin-left: auto; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--bg-2); }
.pcol-pause[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--line-2); }
.pcol-pause .ico { width: 16px; height: 16px; }
.pcol-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (max-width: 899px) {
  .pulse[data-col="new"] .pcol:not([data-col="new"]), .pulse[data-col="stretch"] .pcol:not([data-col="stretch"]), .pulse[data-col="migrated"] .pcol:not([data-col="migrated"]) { display: none; }
}
/* one coin card */
.pc { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; padding: 8px 9px 8px 8px; }
.pc:hover { border-color: var(--line-2); }
.pc.busy { opacity: 0.72; }
.pc-link { display: flex; align-items: baseline; gap: 6px; min-width: 0; text-decoration: none; color: var(--text); }
.pc-link::after { content: ""; position: absolute; inset: 0; border-radius: 10px; z-index: 1; }
.pc-link:focus-visible { outline: none; }
/* the keyboard focus of a row: a solid orange line inside the row's own edge (the old ring was 14% orange on black:
   about 1.2 to 1 against the ground, and half of it was clipped by the lane) */
.pc-link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: -2px; }
.pc-sym { font: 700 15.5px/1.2 var(--font-ui); white-space: nowrap; }
.pc-name { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pc-age { color: var(--text); font-weight: 700; }
.pc-soc { display: inline-flex; gap: 1px; position: relative; z-index: 2; }
.soc { display: inline-flex; min-width: 20px; height: 18px; padding: 0 4px; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 700 10px/1 var(--font-mono); text-decoration: none; }
.soc:hover { background: var(--bg-3); color: var(--text); }
.pc-paid { font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: 4px; background: var(--brand-soft); color: var(--text); }
.qflag { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 var(--font-ui); padding: 3px 7px 3px 6px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; color: var(--text); }
.qflag .lvl-dot { width: 7px; height: 7px; }
.qf-red { background: var(--down-soft); border-color: var(--down); }
.qf-red .lvl-dot { background: var(--down); }
.qf-yellow { background: var(--brand-soft); border-color: var(--warn); }
.qf-yellow .lvl-dot { background: var(--warn); }
.qf-green { background: var(--up-soft); border-color: var(--up); }
.qf-green .lvl-dot { background: var(--up); }
.qf-unknown { background: var(--bg-2); border: 1px solid var(--muted); color: var(--muted); }
.qf-unknown .lvl-dot { background: var(--muted); }
.pc .num { border-radius: 4px; padding: 0 2px; }
.bs { position: relative; display: inline-block; width: 36px; height: 7px; border-radius: 999px; background: var(--down-soft); overflow: hidden; border: 1px solid var(--shade-a25); margin-right: 3px; }
.bs-b { position: absolute; inset: 0 auto 0 0; width: var(--b, 50%); background: var(--up); }
.bs-none { background: var(--bg-3); }
.bs-none .bs-b { display: none; }
.pc-chips { display: flex; gap: 3px; flex-wrap: wrap; }
.hchip { display: inline-flex; gap: 3px; align-items: baseline; font-size: 11px; padding: 1px 5px; border-radius: 5px; background: var(--bg-3); color: var(--text); white-space: nowrap; border: 1px solid transparent; }
.hchip .num { padding: 0 1px; }
.hc-red { background: var(--down-soft); }
.hc-yellow { background: var(--brand-soft); }
.hc-green { background: var(--up-a55); }
.hc-unknown { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.pc-quick { display: inline-flex; align-items: center; gap: 4px; position: relative; z-index: 2; margin-left: auto; }
.pc-nt { font-size: 11px; color: var(--muted); }
.pc-pop { position: absolute; z-index: 3; top: 4px; left: 4px; right: 4px; padding: 10px 12px; background: var(--down-a12); border: 1px solid var(--down); border-radius: 10px; box-shadow: 0 14px 24px -12px var(--shade-a55); font-size: 13px; }
.pc-pop ul { margin: 0 0 6px; padding-left: 18px; }
.pc-pop p { margin: 0 0 8px; color: var(--down); }
@media (max-width: 899px) {
  .pc-sym { font-size: 16.5px; }
}
/* ---------- token page: terminal ---------- */
.term { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "strip" "chart" "ticket" "pos" "tabs" "check"; }
.term > .card { margin: 0; }
.term-head { grid-area: head; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.term-id { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1 1 300px; }
.term-id .coin-lg { border-radius: 50%; }
.term-id h1 { font-size: clamp(24px, 6vw, 34px); margin: 0; overflow-wrap: anywhere; }
.term-name { font: 600 15px/1.2 var(--font-ui); color: var(--muted); }
.term-nums { display: flex; flex-wrap: wrap; gap: 8px; }
.tn { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); min-width: 82px; text-decoration: none; color: inherit; }
a.tn:hover { border-color: var(--line-2); }
.tn-k { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tn-v { font-size: 17px; font-weight: 700; color: var(--text); }
.tn-h { font-size: 11px; color: var(--muted); }
.tn-curve .bar { margin-top: 3px; width: 90px; }
.tn-chk .lvl { margin-top: 2px; font-size: 12px; padding: 2px 8px 2px 6px; }
.term .chart-card { grid-area: chart; }
.term-tabs { grid-area: tabs; }
.term .check-card { grid-area: check; scroll-margin-top: calc(var(--top-h) + 16px); }
.term-tabs .card-head .seg { flex: 0 1 auto; }
.tape { list-style: none; margin: 0; padding: 0; }
.tape-head, .tp { display: grid; grid-template-columns: 54px 46px minmax(56px, 1fr) minmax(70px, 1fr) minmax(0, 1.7fr); gap: 6px; align-items: center; }
.tape-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; padding: 0 4px 4px; border-bottom: 1px solid var(--line-2); }
.tp { padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 13px; border-radius: 6px; }
.tp-t { color: var(--muted); font-size: 12px; white-space: nowrap; }
.tp-side { font-size: 12px; font-weight: 700; text-align: center; padding: 1px 4px; }
.tp-buy .tp-usd { color: var(--up); font-weight: 700; }
.tp-sell .tp-usd { color: var(--down); font-weight: 700; }
.tp-w { display: flex; gap: 5px; align-items: center; min-width: 0; overflow: hidden; }
.tp-w a, .tp-w .num { font-size: 12px; white-space: nowrap; }
.wl { font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap; color: var(--text); }
.wl-dev { background: var(--down-soft); }
.wl-bundler { background: var(--down-a12); border: 1px solid var(--down); }
.wl-sniper { background: var(--brand-soft); }
.wl-kol { background: var(--brand-soft); }
.small-h { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 14px 0 6px; }
.tabs-body > .small-h:first-child { margin-top: 2px; }
.hbars { display: grid; gap: 7px; }
.hbar { display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; gap: 8px; align-items: center; font-size: 13px; }
.hbar-k { font-weight: 700; color: var(--text); }
.hbar .bar { height: 10px; }
.bar.hb-pink .bar-fill { background: repeating-linear-gradient(-45deg, var(--down) 0 4px, var(--down) 4px 8px); }
.bar.hb-yellow .bar-fill { background: repeating-linear-gradient(-45deg, var(--warn) 0 4px, var(--warn) 4px 8px); }
.bar.hb-green .bar-fill { background: repeating-linear-gradient(-45deg, var(--up) 0 4px, var(--up) 4px 8px); }
.hbar-v { text-align: right; }
.holders { list-style: none; margin: 0; padding: 0; }
.holders li { display: flex; gap: 8px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.holders li > :last-child { margin-left: auto; }
@media (max-width: 559px) {
  .tape-head, .tp { grid-template-columns: 46px 42px minmax(0, 1fr) minmax(0, 1.25fr); }
  .tp-sol, .tape-head span:nth-child(4) { display: none; }
  .tn { min-width: 0; flex: 1 1 30%; }
}
@media (min-width: 1000px) {
  .term { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "head head" "strip strip" "chart ticket" "tabs pos" "tabs check"; align-items: start; }
  .term-tabs .tabs-body { max-height: 620px; overflow-y: auto; overscroll-behavior: contain; }
}
/* wide sheets for the terminal views */
@media (min-width: 900px) {
  .pulse-seg { display: none; }
  .pulse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .pcol-body { max-height: calc(100vh - var(--top-h) - 170px); min-height: 440px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 3px 2px 1px; scrollbar-width: thin; }
}
.lvl, .qflag { font-family: var(--font-ui); }
.lvl-red, .qf-red { background: var(--down-soft); border-color: var(--down-a45); color: var(--down); }
.lvl-yellow, .qf-yellow { background: var(--warn-soft); border-color: var(--warn-a45); color: var(--warn); }
.lvl-green, .qf-green { background: var(--up-soft); border-color: var(--up-a45); color: var(--up); }
.lvl-unknown, .qf-unknown { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); }
.lvl-red .lvl-dot, .qf-red .lvl-dot { background: var(--down); }
.lvl-yellow .lvl-dot, .qf-yellow .lvl-dot { background: var(--warn); }
.lvl-green .lvl-dot, .qf-green .lvl-dot { background: var(--up); }
/* (a curve close to graduation keeps the ember-to-flame fill of styles.css: it is hot, not a profit) */
.bar.hb-green .bar-fill { background: var(--up); }
.bar.hb-pink .bar-fill { background: var(--down); }
.bar.hb-yellow .bar-fill { background: var(--warn); }
.tn-v, .hbar-k, .pc-age { color: var(--text); }
.ch-grid { stroke: var(--line); }
.ch-tick { fill: var(--dim); }
.ch-body.ch-up { fill: var(--up); stroke: var(--up); }
.ch-body.ch-down { fill: var(--down); stroke: var(--down); }
.ch-up.ch-wick { stroke: var(--up); }
.ch-down.ch-wick { stroke: var(--down); }
.ch-last { stroke: var(--brand-hi); }
.ch-last-tag { fill: var(--brand); }
.ch-last-txt { fill: var(--text); }
.ch-line { stroke: var(--warn); }
.ch-line-label { font: 600 11px var(--font-mono); fill: var(--warn); }
.tn { background: var(--bg-3); border-color: var(--line); }
a.tn:hover { border-color: var(--brand); text-decoration: none; }
.tn-k { display: flex; align-items: center; gap: 5px; }
/* Pulse */
.pcol { background: var(--bg-2); border-color: var(--line); padding: 10px 8px 8px; }
.pcol.paused { border-color: var(--line-2); box-shadow: inset 0 2px 0 var(--brand); }
.pcol-head h2 { font-size: 17px; }
.pcol-count { background: var(--bg-3); color: var(--muted); }
.pcol-paused { font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-hi); }
.pcol-pause { background: var(--bg-3); border-color: var(--line-2); }
.pcol-pause[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-hi); }
.pcol[data-col="stretch"] { border-color: var(--brand-a35); }
.pc { background: var(--bg-3); border-color: var(--line); box-shadow: none; }
.pc:hover { border-color: var(--line-2); background: var(--brand-a06); }
.pc-link, .pc-link:hover { color: var(--text); text-decoration: none; }
.pc-sym { font: 700 15px/1.2 var(--font-mono); }
.soc { background: var(--bg-2); border-color: var(--line-2); color: var(--muted); }
.soc:hover { background: var(--brand-soft); color: var(--brand-hi); text-decoration: none; }
.pc-paid { background: var(--brand-soft); color: var(--brand-hi); }
.bs { background: var(--down); border: 0; }
.bs-none { background: var(--line-2); }
.hchip { background: var(--bg-2); color: var(--muted); border-color: var(--line); position: relative; z-index: 2; cursor: help; font-family: var(--font-mono); }
.hc-red { background: var(--down-soft); color: var(--down); border-color: var(--down-a30); }
.hc-yellow { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-a30); }
.hc-green { background: transparent; color: var(--up); }
.hc-unknown { border: 1px dashed var(--line-2); color: var(--dim); }
.pc-pop { background: var(--bg-2); border: 1px solid var(--down); box-shadow: 0 24px 50px -10px var(--shade-a95); }
.pc-pop p { color: var(--muted); }
.qflag[data-tip] { position: relative; z-index: 2; cursor: help; }
.tape-head { border-bottom: 1px solid var(--line-2); }
.wl { font-family: var(--font-mono); }
.wl-dev { background: var(--down-soft); color: var(--down); }
.wl-bundler { background: var(--down-soft); border: 0; color: var(--down); }
.wl-sniper { background: var(--warn-soft); color: var(--warn); }
.wl-kol { background: var(--brand-soft); color: var(--brand-hi); }
.mark { display: block; flex: none; }
.mint, .pr-addr, kbd { font-family: var(--font-mono); }
/* ticker strip: 28 px */
.ticker { height: 28px; overflow: hidden; display: flex; align-items: center; border-bottom: 1px solid var(--line); background: var(--bg); }
@keyframes tick { to { transform: translateX(-50%); } }
/* Pulse header row */
.pulse-bar { margin: 0; padding: 10px 12px; gap: 8px 12px; flex-wrap: wrap; }
.pulse-title { gap: 8px; }
.pulse-title h1 { font: 600 20px/1 var(--font-ui); letter-spacing: -0.01em; gap: 0; }
.pulse-tools { flex: 0 1 auto; align-items: center; gap: 8px; }
.rbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--chip); color: var(--muted); cursor: pointer; padding: 0; }
.rbtn:hover { color: var(--text); border-color: var(--brand); }
.rbtn[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-hi); }
.rbtn .ico { width: 14px; height: 14px; }
.pbtn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--chip); color: var(--text); font: 600 12.5px/1 var(--font-ui); cursor: pointer; white-space: nowrap; }
.pbtn:hover { border-color: var(--brand); }
.pbtn .ico { width: 13px; height: 13px; }
.tog { position: relative; width: 26px; height: 14px; border-radius: 999px; background: var(--line-2); flex: none; }
.tog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); transition: transform 0.12s; }
[aria-pressed="true"] > .tog { background: var(--brand); }
[aria-pressed="true"] > .tog::after { transform: translateX(12px); background: var(--text); }
.qamt { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: 600 12px/1 var(--font-mono); }
.qamt .ico { width: 12px; height: 12px; color: var(--muted); }
.qamt input { width: 34px; background: none; border: 0; outline: none; color: var(--text); font: inherit; padding: 0; font-variant-numeric: tabular-nums; }
.qamt:focus-within { border-color: var(--brand); }
.qamt-u { color: var(--dim); font-size: 11px; }
.pulse-seg { margin: 0; padding: 0 12px 8px; }
.pulse-seg .seg { border-radius: 8px; padding: 3px; }
.pulse-seg .seg-btn { min-height: 34px; font: 600 13px/1 var(--font-ui); }
.pulse-fine { margin: 14px 12px 0; }
/* columns: hairlines, no boxes */
.pulse { border-top: 1px solid var(--line); }
.pcol, .pcol[data-col="stretch"] { background: none; border: 0; border-radius: 0; padding: 0; min-width: 0; }
.pcol.paused { box-shadow: inset 0 1px 0 var(--brand); border: 0; }
.pcol-head { height: 40px; padding: 0 12px; gap: 8px; border-bottom: 1px solid var(--line); }
.pcol-head h2 { font: 600 15px/1 var(--font-ui); white-space: nowrap; letter-spacing: 0; }
.pcol-count { background: none; padding: 0; font-size: 11px; color: var(--dim); }
.pcol-paused { font: 600 10.5px/1 var(--font-ui); letter-spacing: 0.04em; }
.pcol-q { flex: 1 1 60px; min-width: 0; max-width: 190px; height: 26px; margin-left: auto; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: 500 11.5px/1 var(--font-ui); outline: none; }
.pcol-q::placeholder { color: var(--dim); }
.pcol-q:focus { border-color: var(--brand); }
.pcol-pause, .pcol-filter { width: 26px; height: 26px; border: 0; background: none; margin-left: 0; color: var(--muted); border-radius: 6px; flex: none; }
.pcol-pause .ico, .pcol-filter .ico { width: 14px; height: 14px; }
.pcol-filter[aria-pressed="true"], .pcol-pause[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-hi); border: 0; }
.pcol-list { gap: 0; }
.pcol-body .empty { margin: 12px; }
.pcol-body .loading { padding: 16px 12px; }
/* one row (about 86 px) */
.pc { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 0 12px; align-items: start; padding: 9px 12px 8px; margin: 0; min-height: 86px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.pc:hover { background: var(--hover); border-color: var(--line); }
.pc.hide { display: none; }
.pc-link::after { border-radius: 0; }
.pr-l { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.pr-img { position: relative; display: block; width: 68px; height: 68px; border-radius: 4px; box-shadow: 0 0 0 1px var(--line-2); background: var(--chip); overflow: visible; }
.pr-img .coin-img { width: 68px; height: 68px; border-radius: 4px; border: 0; font-size: 15px; }
.pr-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--bg-a70); overflow: hidden; }
.pr-prog i { display: block; height: 100%; width: var(--w, 0%); background: var(--brand); }
.pr-prog.near i { background: linear-gradient(90deg, var(--brand), var(--heat-4)); }
.pr-dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg); background: var(--brand); }
.pr-dot.done { background: var(--brand-hi); }
.pr-addr { font-size: 10.5px; line-height: 1; color: var(--dim); white-space: nowrap; }
.pr-m { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-top: 1px; }
.pr-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pc-link { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 0 1 auto; }
.pc-sym { font: 600 15px/1.2 var(--font-ui); color: var(--text); }
.pc-name { font: 500 14.5px/1.2 var(--font-ui); color: var(--muted); }
.pr-copy { position: relative; z-index: 2; width: 18px; height: 18px; border: 0; background: none; padding: 0; color: var(--dim); cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.pr-copy:hover { color: var(--text); }
.pr-copy .ico { width: 12px; height: 12px; }
.pr-fee { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 3px; font: 500 11px/1 var(--font-mono); color: var(--muted); white-space: nowrap; flex: none; cursor: help; }
.pr-l2 { display: flex; align-items: center; gap: 9px; min-width: 0; font: 500 12px/1 var(--font-mono); color: var(--muted); white-space: nowrap; overflow: hidden; }
/* green and red are for buy / sell and profit / loss alone (spec section 3): an age is neither. A fresh age reads
   bright, an age that is old for its lane reads muted (both pass AA on the ground; --dim would not at this size). */
.pc-age { font: 500 13px/1 var(--font-mono); color: var(--text); }
.pc-age.old { color: var(--muted); }
.pc-soc { gap: 7px; }
.soc { min-width: 0; height: auto; padding: 0; border: 0; background: none; color: var(--muted); }
.soc:hover { background: none; color: var(--brand-hi); }
.soc .ico { width: 13px; height: 13px; }
.pr-n { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 3px; color: var(--text); font-weight: 600; cursor: help; }
.pr-n .ico { width: 13px; height: 13px; color: var(--muted); }
.qflag { position: relative; z-index: 2; padding: 0; border: 0; background: none; font: 600 11.5px/1 var(--font-ui); gap: 4px; cursor: help; }
.qf-red, .qf-yellow, .qf-green, .qf-unknown { background: none; border: 0; }
.qflag .lvl-dot { width: 6px; height: 6px; }
.pr-l3 { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.pc-chips { gap: 4px; flex-wrap: nowrap; }
.hchip { height: 20px; padding: 0 6px; gap: 4px; align-items: center; border-radius: 4px; border: 0; background: var(--chip); color: var(--muted); font: 600 11.5px/1 var(--font-mono); }
.hchip .ico { width: 11px; height: 11px; }
.hc-red { background: var(--down-soft); color: var(--down); border: 0; }
.hc-yellow { background: var(--chip); color: var(--warn); border: 0; }
.hc-green { background: var(--up-soft); color: var(--up); }
.hc-unknown { background: var(--chip); border: 0; color: var(--dim); }
.pc-paid { height: 20px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: 4px; background: var(--chip); color: var(--muted); font: 600 11px/1 var(--font-ui); position: relative; z-index: 2; cursor: help; }
.pr-r { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; padding-top: 1px; }
.pr-r1, .pr-r2 { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.pr-r2 { align-items: center; }
.pr-kv { position: relative; z-index: 2; display: inline-flex; align-items: baseline; gap: 4px; cursor: help; font: 500 12px/1 var(--font-mono); color: var(--text); }
.pr-kv .k { font: 500 10.5px/1 var(--font-ui); color: var(--dim); margin: 0; }
.pr-v b { font: 600 14px/1 var(--font-mono); border-radius: 3px; }
.pr-mc b { font: 700 16px/1 var(--font-mono); color: var(--text); border-radius: 3px; }
.pr-kv b.num { padding: 0 1px; }
.bs { width: 24px; height: 2px; margin: 0 0 0 2px; align-self: center; }
.pc-quick { margin: 3px 0 0; }
.pulse[data-quick="off"] .pc-quick { display: none; }
.pulse[data-dense="1"] .pr-l3 { display: none; }
.pulse[data-dense="1"] .pc { min-height: 0; }
.pc-pop { top: 6px; left: 8px; right: 8px; }
@media (max-width: 899px) {
  .pcol-q, .pcol-head .qamt { display: none; }
}
@media (min-width: 900px) {
  .pulse-bar { padding: 10px 16px; }
  .pulse { gap: 0; }
  .pcol + .pcol { border-left: 1px solid var(--line); }
  .pcol-body { max-height: none; height: calc(100vh - var(--top-h) - 28px - 50px - 41px - var(--mock-h, 0px)); min-height: 420px; padding: 0; }
}
/* token page: terminal */
.term { gap: 0; }
.term > .card { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 12px 0; }
.term-head { gap: 10px 18px; padding-top: 0; }
.term-id .coin-lg { border-radius: 6px; width: 48px; height: 48px; }
.term-id h1 { font: 600 clamp(20px, 5vw, 24px)/1.15 var(--font-ui); }
.term-name { font: 500 15px/1.2 var(--font-ui); }
.term-nums { gap: 4px 18px; }
.tn { background: none; border: 0; padding: 0; min-width: 0; border-radius: 0; }
.tn-k { font: 500 11px/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--dim); }
.tn-v { font: 600 15px/1.25 var(--font-mono); }
.tn-mc .tn-v { color: var(--text); }
.term .check-card { padding: 12px 0; }
@media (min-width: 1000px) {
  .term { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "head head" "strip strip" "chart ticket" "tabs pos" "tabs check"; column-gap: 0; }
  .term .chart-card, .term .term-tabs { padding-right: 16px; }
  .term .check-card { padding-left: 16px; border-left: 1px solid var(--line); }
}
@media (max-width: 559px) {
  .pulse-tools .pbtn-disp, .pulse-tools .qamt { display: none; }
  .pulse-bar { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
}
/* small pieces */
@media (min-width: 900px) and (max-width: 1279px) {
  .pcol-head .qamt, .pcol-count { display: none; }
}
.words { margin: 10px 0 0; display: grid; gap: 8px; }
.words dt { font-weight: 700; color: var(--text); }
.words dd { margin: 0 0 6px; color: var(--muted); }
.pr-l3:empty { display: none; }
.pc-nt { font-size: 11px; color: var(--dim); }
.pr-fee[hidden] { display: none; }
@media (max-width: 559px) {
  .pc { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0 10px; padding: 9px 12px 8px; }
  .pr-img, .pr-img .coin-img { width: 56px; height: 56px; }
  .pr-addr { font-size: 9.5px; }
  .pr-v { display: none; }
  .pc-name { font-size: 13px; }
  .pr-l2 { gap: 7px; }
  .pc-chips { gap: 3px; }
  .hchip { padding: 0 4px; gap: 3px; font-size: 11px; }
}
/* row height: about 86 px (image 62 + the short address under it) */
.pc { padding: 7px 12px 6px; min-height: 86px; }
.pr-l { gap: 2px; }
.pr-img, .pr-img .coin-img { width: 62px; height: 62px; }
.pc { grid-template-columns: 62px minmax(0, 1fr) auto; }
.pr-m { gap: 4px; }
.pr-r { gap: 4px; }
.pc-quick { margin-top: 1px; }
@media (max-width: 559px) {
  .pc { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .pr-img, .pr-img .coin-img { width: 56px; height: 56px; }
}
/* the round coin avatar (ui.js mark({ coin: true })): top bar, tab bar, loading and empty states */
.logo .mark.logo-mark { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px var(--glint-a12), 0 0 16px -4px var(--brand-a90); }
/* board rows: a 66 px picture like the reference, the row stays near 92 px */
@media (min-width: 560px) {
  .pc { grid-template-columns: 66px minmax(0, 1fr) auto; padding: 6px 12px 5px; min-height: 90px; }
  .pr-img, .pr-img .coin-img { width: 66px; height: 66px; }
}
/* 1280 to 1499 px: the amount box and the count stay, the search gives way */
@media (min-width: 1280px) and (max-width: 1499px) {
  .pcol-head { gap: 5px; padding: 0 8px; }
  .pcol-q { flex: 1 1 30px; max-width: 110px; padding: 0 8px; }
  .pcol-head .qamt { flex: none; }
  .pcol-head .qamt input { width: 34px; }
  .pcol-head .qamt .qamt-u { display: none; }
}
/* token page: dense tab tables (Safety check, My position) */
.term-tabs .card-head .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.term-tabs .card-head .seg::-webkit-scrollbar { display: none; }
.ttab { display: grid; }
.ttab-row { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(90px, 0.8fr) minmax(0, 1.6fr); gap: 0 12px; align-items: center; min-height: 34px; padding: 0 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ttab-row:hover { background: var(--hover); }
.ttab-k { color: var(--muted); }
.ttab-v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ttab-n { color: var(--dim); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttab-top { display: flex; align-items: center; gap: 10px; padding: 4px 4px 8px; }
.ttab-flags { margin-top: 10px; }
@media (max-width: 559px) {
  .ttab-row { grid-template-columns: minmax(0, 1.2fr) auto; }
  .ttab-n { display: none; }
}
/* the board picture sits in its box (an old rule offset it by 6 px, over the short address) */
.pr-img .coin-img { position: static; left: auto; top: auto; display: block; object-fit: cover; }
.pr-img .coin-fb { display: flex; align-items: center; justify-content: center; }
/* ---- review pass (2026-10-10): the row and the column header, closer to the reference board ---- */
.pr-m, .pr-r { align-self: stretch; }
.pc-quick { margin: auto 0 0; }
.pr-l3 { margin-top: auto; padding-bottom: 1px; gap: 5px; }
.hchip, .hc-red, .hc-yellow, .hc-green, .hc-unknown { height: 20px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); }
.hchip { color: var(--text); font-weight: 500; }
.hc-red, .hc-red .num { color: var(--down); }
.hc-yellow, .hc-yellow .num { color: var(--warn); }
.hc-green, .hc-green .num { color: var(--up); }
.hc-unknown, .hc-unknown .num { color: var(--dim); }
.pc-paid { border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); }
.pr-fee { padding: 2px 6px; border-radius: 999px; background: var(--chip); color: var(--text); }
.pr-l2 { gap: 8px; }
.pc-soc { gap: 6px; align-items: center; }
.pc-soc .soc { color: var(--text); display: inline-flex; }
.pc-soc .soc .ico, .pc-soc .soc svg { width: 15px; height: 15px; }
.pc-soc .soc:hover { color: var(--brand-hi); }
.pr-handle { position: relative; z-index: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1 var(--font-mono); color: var(--brand-hi); text-decoration: none; }
.pr-handle[hidden], .pr-kv[hidden] { display: none; }
.pc-sym { font: 600 16px/1.2 var(--font-ui); }
.pc-name { font: 400 15px/1.2 var(--font-ui); }
.pr-v b { font: 500 15px/1 var(--font-mono); }
.pcol-ctl { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pcol-q { flex: 0 1 150px; width: 150px; max-width: 150px; margin-left: 0; }
.pcol-count { display: none; }
.qgroup { display: inline-flex; align-items: center; height: 26px; padding-right: 5px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); flex: none; }
.qgroup .qamt { height: 24px; border: 0; background: none; padding-right: 6px; }
.qgroup:focus-within { border-color: var(--brand); }
@media (min-width: 900px) and (max-width: 1499px) {
  .pcol-q { flex-basis: 104px; width: 104px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .pcol-q { display: none; }
}
.qgroup .qamt-u { display: none; }
/* the strip and the bar: one calm colour for the caps, pills for the chips, no alarm colour while scores are counted */
.pulse-bar .asof { display: none; }
/* phone: the switch already names the column, so the column header is controls only and the Pulse line is one row */
@media (max-width: 899px) {
  .pcol-head h2 { display: none; }
  .pcol-ctl { margin-left: 0; flex: 1 1 auto; }
  .pcol-q { flex: 1 1 60px; width: auto; max-width: none; }
  .pulse-bar { flex-wrap: nowrap; padding: 8px 12px; }
  .pulse-tools { flex-wrap: nowrap; }
  .pulse-tools .qamt, .pulse-tools .pbtn-disp { display: none; }
  .pulse-title { flex-wrap: nowrap; }
  .pulse-title .rbtn[aria-pressed] { display: none; }
}
@media (max-width: 559px) {
  .pr-copy, .pc-soc { display: none; }
  .pr-l2 { gap: 7px; }
}
@keyframes tr-buy { from { background-color: var(--up-a26); } to { background-color: var(--up-a0); } }
@keyframes tr-sell { from { background-color: var(--down-a26); } to { background-color: var(--down-a0); } }
/* ---- live on-chain stream (appended block): rows blink on each real trade, tape rows link their transaction ---- */
.pc.tr-buy { animation: tr-buy 900ms ease-out 1; }
.pc.tr-sell { animation: tr-sell 900ms ease-out 1; }
.tp-tx { margin-left: auto; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 4px; font-size: 11px; line-height: 16px; color: var(--muted); text-decoration: none; flex: none; }
.tp-tx:hover, .tp-tx:focus-visible { color: var(--text); border-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .pc.tr-buy, .pc.tr-sell { animation: none; }
}
/* phone: the board must never be wider than the screen. The live pill's second half ("new coins on-chain") stays in
   the tooltip, and the Pulse line may wrap when a long pill ("Live on-chain") still does not fit. */
@media (max-width: 559px) {
  .pulse-bar { flex-wrap: wrap; row-gap: 6px; }
  .pulse-tools { flex-wrap: wrap; min-width: 0; }
}
/* ---- token page ---- */
.term-v2 { display: block; }
.term-v2 > .card, .term-v2 .term-side > .card { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.term-v2 .term-side { display: block; }
.term-v2 .tipq { width: 13px; height: 13px; font-size: 9px; border-color: var(--line-2); color: var(--dim); }
/* header strip */
.term-v2 .term-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 8px 12px; }
.term-v2 .term-id { flex: 0 1 auto; gap: 10px; min-width: 0; }
.th-img { display: block; width: 40px; height: 40px; flex: none; border-radius: 4px; box-shadow: 0 0 0 1px var(--line-2); background: var(--chip); overflow: hidden; }
.term-v2 .term-id .coin-img { display: flex; width: 40px; height: 40px; border-radius: 4px; border: 0; font-size: 12px; object-fit: cover; }
.term-v2 .term-id h1 { display: flex; align-items: baseline; gap: 6px; margin: 0; min-width: 0; font: 600 17px/1.15 var(--font-ui); letter-spacing: 0; white-space: nowrap; overflow-wrap: normal; }
.term-v2 .term-name { min-width: 0; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; font: 400 15px/1.2 var(--font-ui); color: var(--muted); }
.term-v2 .term-nums { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 22px; min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.term-v2 .term-nums::-webkit-scrollbar { display: none; }
.term-v2 .tn { display: flex; flex-direction: column; gap: 4px; padding: 0; min-width: 0; flex: none; border: 0; border-radius: 0; background: none; white-space: nowrap; }
.term-v2 .tn-k { display: flex; align-items: center; gap: 4px; font: 500 11px/1 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--dim); }
.term-v2 .tn-v { font: 600 14px/1 var(--font-mono); color: var(--text); }
.term-v2 .tn-mc .tn-v { font: 700 16px/1 var(--font-mono); color: var(--text); }
.term-v2 .tn-h { display: none; }
.term-v2 .tn-cv { display: inline-flex; align-items: center; gap: 6px; }
.term-v2 .tn-curve .bar { width: 56px; height: 4px; margin: 0; border: 0; background: var(--line-2); }
.term-v2 .tn-chk { margin-left: auto; }
.term-v2 .tn-chk .lvl { margin: 0; }
.term-v2 .lvl { height: 20px; padding: 0 8px 0 6px; gap: 5px; font: 600 11.5px/1 var(--font-ui); }
.term-v2 .lvl .lvl-dot { width: 6px; height: 6px; }
.term-v2 .lvl-big { height: 22px; font-size: 12px; }
/* pills (timeframes, tabs) */
.term-v2 .seg { flex-wrap: nowrap; gap: 2px; padding: 0; border: 0; border-radius: 0; background: none; }
.term-v2 .seg-btn { min-height: 0; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 12px/1 var(--font-ui); color: var(--muted); white-space: nowrap; }
.term-v2 .seg-btn:hover { color: var(--text); }
.term-v2 .seg-btn.on { background: var(--chip); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
/* chart */
.term-v2 .chart-card .card-head { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; height: 36px; margin: 0; padding: 0 12px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.term-v2 .chart-card h3 { margin: 0; font: 600 13px/1 var(--font-ui); letter-spacing: 0; }
.term-v2 .chart-card .card-head .small { font: 500 11.5px/1 var(--font-ui); color: var(--dim); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.term-v2 .chart-card .card-head .seg { margin-left: auto; flex: none; }
/* tabs: dense hairline tables */
.term-v2 .term-tabs .card-head { flex-wrap: nowrap; gap: 8px; height: 38px; margin: 0; padding: 0 12px 0 8px; border-bottom: 1px solid var(--line); }
.term-v2 .term-tabs .card-head .seg { flex: 0 1 auto; min-width: 0; }
.term-v2 .term-tabs .seg-btn { height: 26px; font-size: 12.5px; }
.term-v2 .st-pill { flex: none; height: 22px; padding: 0 9px; gap: 5px; font: 600 11px/1 var(--font-ui); }
.term-v2 .st-pill .st-dot { width: 6px; height: 6px; }
.term-v2 .tabs-body { padding: 0; }
.term-v2 .tape-head, .term-v2 .tp { grid-template-columns: 52px 46px minmax(64px, 0.7fr) minmax(86px, 0.7fr) minmax(0, 2.2fr); gap: 12px; padding: 0 12px; }
.term-v2 .tape-head { position: sticky; top: 0; z-index: 1; height: 26px; background: var(--bg); border-bottom: 1px solid var(--line); font: 500 11px/1 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--dim); }
.term-v2 .tp { min-height: 29px; border-radius: 0; border-bottom: 1px solid var(--line); font: 500 12.5px/1 var(--font-mono); }
.term-v2 .tp:hover { background: var(--hover); }
.term-v2 .tp-t { font-size: 12px; color: var(--muted); }
.term-v2 .tp-side { padding: 0; background: none; text-align: left; font: 600 12px/1 var(--font-ui); text-transform: capitalize; }
.term-v2 .tp-usd { font-weight: 600; }
.term-v2 .tp-sol { color: var(--muted); }
.term-v2 .tp-w a, .term-v2 .tp-w .num { font: 500 11.5px/1 var(--font-mono); color: var(--muted); }
.term-v2 .tp-w a:hover { color: var(--brand-hi); }
.term-v2 .wl { height: 17px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); font: 500 10.5px/1 var(--font-ui); }
.term-v2 .tp-tx { border-radius: 999px; border-color: var(--line-2); font: 500 10.5px/16px var(--font-ui); padding: 0 7px; }
.term-v2 .tabs-body > .small-h { margin: 12px 12px 6px; font: 600 12px/1 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--text); }
.term-v2 .tabs-body > p { margin: 8px 12px; font-size: 12px; }
.term-v2 .tabs-body > .loading, .term-v2 .tabs-body > .empty { margin: 12px; }
.term-v2 .empty { padding: 16px 12px; border-radius: 8px; font-size: 13px; }
.term-v2 .hbars { gap: 0; }
.term-v2 .hbar { grid-template-columns: 78px minmax(0, 1fr) 64px; gap: 12px; min-height: 29px; padding: 0 12px; border-bottom: 1px solid var(--line); font: 500 12.5px/1 var(--font-ui); }
.term-v2 .hbar-k { font-weight: 500; color: var(--muted); }
.term-v2 .hbar .bar { height: 4px; border: 0; background: var(--line-2); }
.term-v2 .hbar-v .hl { padding: 0; background: none; }
.term-v2 .hbar-v .hl-yellow, .term-v2 .ttab-v .hl-yellow { color: var(--warn); }
.term-v2 .bar.hb-none .bar-fill { background: var(--muted); }
.term-v2 .holders li { gap: 10px; min-height: 29px; padding: 0 12px; font: 500 12.5px/1 var(--font-mono); }
.term-v2 .holders li:hover { background: var(--hover); }
.term-v2 .holders a.num, .term-v2 .holders span.num:first-child { font-family: var(--font-mono); font-size: 11.5px; }
.term-v2 .ttab-row { min-height: 29px; padding: 0 12px; font: 500 12.5px/1.2 var(--font-ui); }
.term-v2 .ttab-v .hl { padding: 0; background: none; }
.term-v2 .ttab-top { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.term-v2 .ttab-top .small { font-size: 11.5px; color: var(--dim); }
.term-v2 .flags { margin: 0; }
.term-v2 .flag { gap: 8px; padding: 7px 0; font: 400 12.5px/1.4 var(--font-ui); }
.term-v2 .flag-mark { width: 6px; height: 6px; margin-top: 6px; }
.term-v2 .flag-title { font-weight: 600; }
.term-v2 .ttab-flags { margin: 0; padding: 2px 12px; }
/* right panel: token info + verdict */
.term-v2 .check-card { padding: 12px; scroll-margin-top: calc(var(--top-h) + 8px); }
.term-v2 .check-top { flex-wrap: nowrap; gap: 8px; }
.term-v2 .check-top h2, .term-v2 .tv-top h3 { display: flex; align-items: center; gap: 5px; margin: 0; font: 600 13px/1 var(--font-ui); letter-spacing: 0; white-space: nowrap; }
.term-v2 .check-when { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font: 500 11px/1 var(--font-ui); color: var(--dim); white-space: nowrap; }
.term-v2 .check-when .btn { min-height: 0; height: 22px; padding: 0 8px; gap: 4px; border-radius: 999px; border-color: var(--line-2); font: 600 11px/1 var(--font-ui); color: var(--text); }
.term-v2 .check-when .btn .ico { width: 11px; height: 11px; }
.ti-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0 12px; }
.ti { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 50px; padding: 0 4px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-2); color: var(--text); cursor: help; }
.ti:hover { border-color: var(--line-2); background: var(--hover); }
.ti-v { display: inline-flex; align-items: center; gap: 4px; font: 600 14px/1 var(--font-mono); }
.ti-v .ico { width: 12px; height: 12px; }
.ti-k { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1 var(--font-ui); color: var(--muted); }
.ti-red { border-color: var(--down-a35); background: var(--down-soft); }
.ti-red .ti-v { color: var(--down); }
.ti-yellow .ti-v { color: var(--warn); }
.ti-green .ti-v { color: var(--up); }
.ti-info .ti-v { color: var(--brand-hi); }
.ti-unknown .ti-v { color: var(--dim); }
.tv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.ti-verdict { padding-top: 10px; border-top: 1px solid var(--line); }
.ti-verdict > p { margin: 6px 0 0; font-size: 12.5px; }
.term-v2 .ti-more { margin: 6px -12px 0; border-top: 1px solid var(--line); }
.term-v2 .ti-more .ttab-row { grid-template-columns: minmax(0, 1fr) auto; }
.term-v2 .ti-more .ttab-n { display: none; }
.term-v2 .ti-more .ttab-k { display: flex; align-items: center; gap: 5px; }
.term-v2 .check-card > p.small { margin: 10px 0 0; font-size: 12px; }
.term-v2 .check-card .loading { padding: 14px 0; }
/* right panel: your position */
.term-v2 .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.term-v2 .stat { gap: 4px; padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-2); }
.term-v2 .stat-k { font: 500 11px/1.2 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--muted); }
.term-v2 .stat-v { font: 600 13.5px/1.2 var(--font-mono); }
.term-v2 .stat-h { font-size: 11px; color: var(--dim); }
@media (min-width: 1000px) {
  .term-v2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-areas: "head head" "strip strip" "chart side" "tabs side"; gap: 0; height: calc(100vh - var(--top-h) - 28px - var(--mock-h, 0px)); min-height: 560px; }
  .term-v2 .term-head { grid-area: head; flex-wrap: nowrap; padding: 8px 16px; min-height: 56px; }
  .term-v2 .chart-card { grid-area: chart; padding: 0; }
  .term-v2 .chart-card .card-head { padding: 0 12px 0 16px; }
  .term-v2 .term-tabs { grid-area: tabs; display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0; border-bottom: 0; }
  .term-v2 .term-tabs .card-head { flex: none; padding: 0 12px; }
  .term-v2 .term-tabs .tabs-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .term-v2 .tape-head, .term-v2 .tp, .term-v2 .hbar, .term-v2 .holders li, .term-v2 .ttab-row { padding-left: 16px; padding-right: 16px; }
  .term-v2 .tabs-body > .small-h, .term-v2 .tabs-body > p { margin-left: 16px; margin-right: 16px; }
  .term-v2 .ttab-top, .term-v2 .ttab-flags { padding-left: 16px; padding-right: 16px; }
  .term-v2 .term-side { grid-area: side; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-left: 1px solid var(--line); }
  .term-v2 .term-side > .card { flex: none; padding: 12px 14px; }
  .term-v2 .term-side > .check-card { order: 3; }
  .term-v2 .ti-more { margin-left: -14px; margin-right: -14px; }
  .term-v2 .ti-more .ttab-row { padding-left: 14px; padding-right: 14px; }
}
/* phone + tablet: chart, the sticky Buy / Sell bar, the tabs; the ticket opens from the bar as a sheet */
@media (max-width: 999px) {
  .term-v2 .term-nums { flex: 1 1 100%; flex-wrap: wrap; overflow: visible; gap: 10px 18px; }
  .term-v2 .tn-chk { margin-left: 0; }
  .term-v2 .term-tabs .seg { overflow-x: auto; scrollbar-width: none; }
  .term-v2 .term-tabs .seg-btn { height: 30px; }
}
@media (max-width: 559px) {
  .term-v2 .tape-head, .term-v2 .tp { grid-template-columns: 44px 40px minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 8px; }
  .term-v2 .chart-card .card-head .term-asof { display: none; }
  .term-v2 .term-name { max-width: 16ch; }
}
/* in-page links land below the sticky top bar */
.view [id], main [id] { scroll-margin-top: 72px; }
/* market cap by size, on the heat ramp (never green: green is a buy or a profit): flame from $40K, flame yellow from
   $100K, plain below */
.pr-mc b.mc-mid, .pr-mc.mc-mid b, .tn-mc.mc-mid .tn-v, .term-v2 .tn-mc.mc-mid .tn-v { color: var(--heat-3); }
.pr-mc b.mc-hi, .pr-mc.mc-hi b, .tn-mc.mc-hi .tn-v, .term-v2 .tn-mc.mc-hi .tn-v { color: var(--heat-4); }

/* ===== the board: three lanes that each scroll on their own ===== */
/* ---------- Pulse: three columns that each scroll on their own; the page stays still ----------
   views/pulse.js measures the room under the board header and sets --board-h on .pulse (window height minus
   everything above it, minus the phone tab bar). Each column is a flex column: a header that never moves and a
   list that scrolls inside the rest. */
.pulse { height: var(--board-h, calc(100vh - 190px)); min-height: 280px; }
.pcol { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
.pcol-head { position: sticky; top: 0; z-index: 6; flex: none; background: var(--bg); }
.pcol-body { flex: 1 1 0; height: auto; min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; padding: 0; }
.pcol-body::-webkit-scrollbar { width: 6px; }
.pcol-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.pcol-body::-webkit-scrollbar-thumb:hover { background: var(--dim); }
.pcol-body::-webkit-scrollbar-track { background: transparent; }
.pcol-list { padding-bottom: 12px; }
@media (min-width: 900px) {
  .pulse { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .pcol-body { height: auto; min-height: 0; max-height: none; }
  /* Under the board on a desktop: the footer every page carries (the disclaimer, with "Not affiliated with ..."), as
     one slim strip that is always on screen. The lanes end above it (views/pulse.js fit() reads its height) and its
     own bottom padding clears the bottom bar, so the page still has no scroll. It is never hidden: no other page says
     these words. The longer fine print stays a phone line: here the lanes keep that room, and "Real SOL, signed here"
     is on every quick-buy pill's own tooltip. */
  body[data-view="pulse"] .pulse-fine { display: none; }
  body[data-view="pulse"] .foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; padding-top: 6px; padding-bottom: calc(var(--tab-h) + 6px + env(safe-area-inset-bottom, 0px)); font-size: 11.5px; line-height: 1.4; }
  body[data-view="pulse"] .foot p { margin: 0; }
}
@media (max-width: 899px) {
  body[data-view="pulse"] .pulse-fine { margin-top: 10px; padding-bottom: calc(var(--tab-h) + 16px); }
  .pcol-q { display: block; }
}
/* PAUSED: a tag that floats over the top of the list, so the header does not jump when it shows */
.pcol-paused { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 4px 9px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--brand); color: var(--text); font: 700 10px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px -6px var(--shade-a90); }
.pcol-paused[hidden] { display: none; }
/* the filter button: lit with a dot while a filter is on */
.pcol-filter { position: relative; }
.pcol-filter[aria-expanded="true"], .pbtn-disp[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand-hi); border-color: var(--brand); }
/* ---------- panels: a column's filter, and Display ---------- */
.pp-host { position: relative; display: inline-flex; }
.ppanel { position: absolute; z-index: 40; top: 44px; right: 8px; width: 268px; max-width: calc(100vw - 16px); max-height: calc(100% - 52px); overflow-y: auto; padding: 10px 12px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); box-shadow: 0 24px 60px -12px var(--shade-a95), 0 0 0 1px var(--shade-a60); display: grid; gap: 7px; font: 500 12.5px/1.25 var(--font-ui); color: var(--text); text-align: left; }
.pp-host .ppanel { top: 36px; right: 0; max-height: calc(100vh - 200px); }
.pp-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pp-h b { font: 600 13.5px/1 var(--font-ui); }
.pp-x { width: 24px; height: 24px; border-radius: 6px; color: var(--muted); }
.pp-x:hover { color: var(--text); background: var(--chip); }
.pp-x .ico { width: 13px; height: 13px; }
.pp-sub { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font: 600 10.5px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.pd-segs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line-2); }
.pd-seg { height: 26px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 600 12px/1 var(--font-ui); cursor: pointer; }
.pd-seg[aria-pressed="true"] { background: var(--chip); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.pd-tog { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 28px; padding: 0; border: 0; background: none; color: var(--text); font: 500 12.5px/1 var(--font-ui); cursor: pointer; text-align: left; }
.pd-tog:hover { color: var(--text); }
.pd-hid { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 132px; overflow-y: auto; }
.pd-hid li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; font: 500 12px/1 var(--font-mono); }
.pd-show { border: 0; background: none; padding: 2px 4px; color: var(--brand-hi); font: 600 11.5px/1 var(--font-ui); cursor: pointer; }
.pd-show:hover { text-decoration: underline; }
.pd-none, .pd-keys { margin: 0; font-size: 11.5px; line-height: 1.35; }
.pd-all { justify-self: start; min-height: 26px; height: 26px; padding: 0 12px; font-size: 12px; }
.empty-f .btn { display: inline-flex; margin-top: 8px; }
/* ---------- Display settings on the rows ---------- */
.pulse[data-dense="1"] .pr-l3 { display: flex; }
.pulse[data-chips="off"] .pr-l3 { display: none; }
.pulse[data-soc="off"] .pc-soc, .pulse[data-soc="off"] .pr-handle { display: none; }
.pulse[data-dense="1"] .pc { padding-top: 4px; padding-bottom: 3px; min-height: 0; }
.pulse[data-dense="1"] .pr-img, .pulse[data-dense="1"] .pr-img .coin-img { width: 46px; height: 46px; }
.pulse[data-dense="1"] .pc { grid-template-columns: 46px minmax(0, 1fr) auto; }
.pulse[data-dense="1"] .pr-addr { display: none; }
.pulse[data-dense="1"] .pc-sym { font-size: 14px; }
.pulse[data-dense="1"] .pc-name { font-size: 13px; }
.pulse[data-pics="small"] .pr-img, .pulse[data-pics="small"] .pr-img .coin-img { width: 38px; height: 38px; font-size: 11px; }
.pulse[data-pics="small"] .pc { grid-template-columns: 38px minmax(0, 1fr) auto; }
.pulse[data-pics="small"] .pr-addr { display: none; }
/* ---------- rows: watch + hide buttons, the keyboard highlight, "price loading" ---------- */
.pr-act { position: relative; z-index: 2; width: 18px; height: 18px; border: 0; background: none; padding: 0; color: var(--dim); cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.1s; }
.pr-act .ico { width: 13px; height: 13px; }
.pr-act:hover { color: var(--text); }
.pc:hover .pr-act, .pc.kb .pr-act, .pr-act:focus-visible, .pr-star[aria-pressed="true"] { opacity: 1; }
.pr-star[aria-pressed="true"] { color: var(--warn); }
.pr-star[aria-pressed="true"] .ico path { fill: currentColor; }
@media (hover: none) {
  .pr-act { opacity: 1; }
}
/* the hide button is always there: quiet until the row or the button is pointed at; the ::before grows the tap area to 24px (30px on a touch screen) */
.pr-act.pr-hide { opacity: 0.62; color: var(--muted); border-radius: 5px; }
.pr-act.pr-hide::before { content: ''; position: absolute; inset: -3px; border-radius: 6px; }
.pc:hover .pr-act.pr-hide, .pc.kb .pr-act.pr-hide, .pr-act.pr-hide:focus-visible { opacity: 0.9; }
.pr-act.pr-hide:hover { opacity: 1; color: var(--text); background: var(--line-2); }
.pr-act.pr-hide .ico { width: 14px; height: 14px; }
@media (hover: none) {
  .pr-act.pr-hide { opacity: 0.8; margin: 0 2px; }
  .pr-act.pr-hide::before { inset: -6px; }
}
.pc.kb { background: var(--hover); box-shadow: inset 2px 0 0 var(--brand-hi), inset 0 0 0 1px var(--brand-a45); }
.pc-age.grad { color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; }

/* ---------- row line 2: age, the safety word, the holders, the icon links ----------
   A number is shown whole or not at all. The line wraps and only its first line is drawn (max-height is one line,
   the gap between lines puts the second one below it): an item that does not fit drops whole out of sight instead of
   being sliced by the row's edge ("56'" for a longer count, "avo" for "avoid"). The order in the row (views/pulse.js)
   says what gives way first: the icon links, then the holders, then the safety word. The link group takes what room
   is left (never less than one icon) and wraps inside itself the same way, so it shows as many whole icons as fit.
   No `display` is set on .pc-soc here: the rules that hide it (phones, Display > Social links off) keep winning. */
.pr-l2 { flex-wrap: wrap; align-content: flex-start; max-height: 16px; }
.pr-l2 > .pc-age, .pr-l2 > .qflag, .pr-l2 > .pr-n { flex: none; }
.pr-l2 > .pc-soc { flex: 1 1 15px; min-width: 15px; flex-wrap: wrap; align-content: flex-start; max-height: 16px; overflow: hidden; }
.pr-r2[hidden] { display: none; }
.pc-quick { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.pc-load { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--brand-a50); background: var(--brand-soft); color: var(--brand-hi); font: 600 10px/1 var(--font-ui); letter-spacing: 0.03em; white-space: nowrap; }
.pc-load::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pcload 1.1s ease-in-out infinite; }
@keyframes pcload { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pc-load::before { animation: none; }
}
.qpill.qpill-wait:disabled { opacity: 0.38; cursor: not-allowed; }
.pc.pc-wait .pr-mc b { color: var(--dim); }
/* ---------- "Hidden 3" in the Pulse bar, and the Undo button inside a toast (ui.js toast) ---------- */
.pbtn-hid[hidden], .pp-host-hid[hidden] { display: none; }
.pbtn-hid { color: var(--muted); }
.pbtn-hid:hover { color: var(--text); }
.pbtn-hid .fp-n { background: var(--line-2); color: var(--text); }
.pbtn-hid[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand-hi); border-color: var(--brand); }
.pd-hid + .pp-sub { margin-top: 6px; }
/* ---------- the watchlist strip, pinned above the columns ---------- */
.pwatch { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-top: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; white-space: nowrap; }
.pwatch::-webkit-scrollbar { display: none; }
.pwatch[hidden] { display: none; }
.pw-t { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-right: 4px; color: var(--warn); font: 600 10.5px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.pw-t .ico { width: 12px; height: 12px; }
.pw-t .ico path { fill: currentColor; }
.pw-i { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 2px 0 6px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--chip); }
.pw-i:hover { border-color: var(--brand); }
.pw-a { display: inline-flex; align-items: center; gap: 5px; color: var(--text); text-decoration: none; font: 600 12px/1 var(--font-ui); }
.pw-a:hover { text-decoration: none; color: var(--text); }
.pwatch .coin-img { position: static; left: auto; top: auto; width: 14px; height: 14px; border-radius: 3px; border: 0; font-size: 0; object-fit: cover; flex: none; }
.pw-mc { color: var(--text); font: 500 11.5px/1 var(--font-mono); }
.pw-mc:empty { display: none; }
.pw-mc.mc-mid { color: var(--heat-3); }
.pw-mc.mc-hi { color: var(--heat-4); }
.pw-x { width: 18px; height: 18px; margin-left: 2px; border: 0; border-radius: 50%; background: none; padding: 0; color: var(--dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pw-x:hover { color: var(--text); background: var(--line-2); }
.pw-x .ico { width: 10px; height: 10px; }
/* ---------- phone: Display is reachable too (icon only), panels fit the screen ---------- */
@media (max-width: 899px) {
  .pulse-tools .pbtn-disp { display: inline-flex; width: 30px; padding: 0; justify-content: center; }
  .pulse-tools .pbtn-disp .pbtn-t { display: none; }
  .pulse-tools .pbtn-hid { padding: 0 8px; gap: 5px; }
  .pulse-tools .pbtn-hid .pbtn-t { display: none; }
  .pp-host .ppanel { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(var(--tab-h) + 8px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: 70vh; }
  .pcol > .ppanel { left: 8px; right: 8px; width: auto; }
}
/* The quiet-column line: one tap to the column that has coins. Phones only: a desktop shows all three columns. */
.pulse-quiet { display: none; }
/* A thin lane with coins behind the filters: one line in that lane that says how many and opens the filters. Wide
   screens only: a phone has the line above under its one open list. */
.pcol-hint { display: none; }
@media (min-width: 900px) {
  .pcol-hint:not([hidden]) { display: block; width: calc(100% - 24px); margin: 10px 12px; padding: 9px 12px; border: 1px dashed var(--brand-hi-a55); border-radius: 10px; background: var(--brand-soft); color: var(--brand-hi); font: 600 12.5px/1.35 var(--font-ui); text-align: left; cursor: pointer; }
  .pcol-hint:not([hidden])::after { content: " \2192"; }
  .pcol-hint:hover { border-color: var(--brand-hi); }
  .pcol-hint:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 2px; }
}
@media (max-width: 899px) {
  .pulse-quiet:not([hidden]) { display: block; width: calc(100% - 24px); margin: 12px; padding: 13px 14px; border: 1px dashed var(--brand-hi-a55); border-radius: 12px; background: var(--brand-soft); color: var(--brand-hi); font: 600 14px/1.35 var(--font-ui); text-align: left; cursor: pointer; }
  .pulse-quiet:not([hidden])::after { content: " \2192"; }
  .pulse-quiet:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 2px; }
}

/* ---------- the token page in the new shell (foundation) ----------
   Structure (views/coin.js): .term.term-v2 > header.term-head, section.chart-card, section.term-tabs,
   div.term-right > ( aside.term-side , section#chk.check-card ).
   .term-side belongs to the trade panel (ctx.mountTradePanel fills it). On a wide screen the right column scrolls on
   its own; on a phone everything is one column. The sticky .term-buybar and the bottom-sheet form of .term-side are
   builder C's to add (docs/BLUEPRINT.md section 4.5, the width contract). */
.term-v2 .term-right { display: block; min-width: 0; }
.term-v2 .term-right > .card, .term-v2 .term-side > .card { margin: 0; padding: 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.term-v2 .term-side { display: block; min-width: 0; }
@media (min-width: 1000px) {
  .term-v2 { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head head" "chart side" "tabs side"; height: calc(100vh - var(--top-h) - var(--bar2-h) - var(--tab-h) - var(--mock-h, 0px)); }
  .term-v2 .term-right { grid-area: side; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-left: 1px solid var(--line); }
  .term-v2 .term-right > .card, .term-v2 .term-side > .card { flex: none; padding: 12px 14px; }
  .term-v2 .term-side { grid-area: auto; flex: none; display: block; height: auto; overflow: visible; border-left: 0; }
}

/* the token page when the coin could not be drawn: the reason, a retry and the way back (the sheet has no gutter here) */
.coin-miss { margin: 16px; max-width: 640px; }
.coin-miss h1 { font-size: clamp(22px, 5vw, 30px); }
.coin-miss-next { margin: 14px 0 0; }

/* wallet labels next to an address in the tape and the holders list */
.hl-labels { display: inline-flex; gap: 4px; }

/* =====================================================================================================================
   Builder C: the heat meter, the lane header (count, amount box + preset chips, sound), fees / tax / the tracked-wallet
   bubble on a row, the green flash of a filled trade; and on the token page the stats block, the tape filters, the
   dev-launches table, the sticky Buy / Sell bar and the bottom sheet of the trade panel.
   Colours only through tokens. Green and red are for buy / sell and gain / loss alone; everything that is ours or hot
   is on the orange ramp. Every dynamic size comes in through a CSS variable (no style attribute anywhere).
   ===================================================================================================================== */

/* ---------- the heat meter (js/heat.js heatView): a flame, four bars on the heat ramp, the score ----------
   .heat-l1 ember, .heat-l2 orange, .heat-l3 flame, .heat-l4 white-hot. A cold coin has no meter at all.
   --heat-1 (ember red) appears only in here, as a shape: never as text. */
.heat { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 2px; border-radius: 6px; cursor: help; white-space: nowrap; vertical-align: middle; }
.heat-ico { width: 13px; height: 13px; flex: none; color: var(--heat-1); }
.heat-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.heat-b { display: block; width: 3px; border-radius: 1px; background: var(--heat-0); }
.heat-b1 { height: 5px; } .heat-b2 { height: 7px; } .heat-b3 { height: 9px; } .heat-b4 { height: 11px; }
.heat-b1.on { background: var(--heat-1); }
.heat-b2.on { background: var(--heat-2); }
.heat-b3.on { background: var(--heat-3); }
.heat-b4.on { background: linear-gradient(var(--heat-hot), var(--heat-4)); box-shadow: 0 0 6px var(--heat-3); }
.heat-n { font: 700 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.heat-l2 .heat-ico { color: var(--heat-2); }
.heat-l2 .heat-n { color: var(--brand-text); }
.heat-l3 .heat-ico { color: var(--heat-3); }
.heat-l3 .heat-n { color: var(--heat-3); }
.heat-l4 .heat-ico { color: var(--heat-4); filter: drop-shadow(0 0 3px var(--heat-2)); animation: heat-flicker 1.1s ease-in-out infinite; }
.heat-l4 .heat-n { color: var(--heat-hot); }
.heat-ico path { fill: currentColor; stroke-width: 1.4; }
.heat-cooling .heat-ico, .heat-cooling .heat-bars { opacity: 0.55; }
@keyframes heat-flicker { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16) translateY(-0.5px); } }
@media (prefers-reduced-motion: reduce) { .heat-l4 .heat-ico { animation: none; } }

/* ---------- board rows: the third line of the right side (heat + the quick-buy pill), fees, tax, the bubble ---------- */
.pr-r3 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; min-height: 24px; }
.pr-r3 .pc-quick { margin: 0; }
.pc-heat { display: inline-flex; align-items: center; }
.pc-heat:empty { display: none; }
/* a board that has heard nothing for minutes does not show how hot a coin is "right now" */
.pulse[data-heat="stale"] .pc-heat { display: none; }
.pr-f b, .pr-f .num { color: var(--text); }
.pr-tax { position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font: 600 10.5px/1 var(--font-mono); white-space: nowrap; cursor: help; }
.pr-tax[hidden] { display: none; }
.pc-bub { position: absolute; z-index: 3; top: 3px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 20px); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--brand); background: var(--bg-3); box-shadow: var(--shadow-pop); color: var(--text); font: 600 11.5px/1 var(--font-ui); white-space: nowrap; overflow: hidden; pointer-events: none; animation: bub-in 0.22s ease-out; }
.pc-bub[hidden] { display: none; }
.pc-bub-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pc-bub-t { flex: none; font-family: var(--font-mono); }
@keyframes bub-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* a trade on this coin just confirmed (bus 'trade': done + confirmed) */
@keyframes pc-filled { 0% { background-color: var(--up-soft); box-shadow: inset 3px 0 0 var(--up), inset 0 0 0 1px var(--up); } 100% { background-color: transparent; box-shadow: inset 3px 0 0 transparent, inset 0 0 0 1px transparent; } }
.pc.pc-filled { animation: pc-filled 1.4s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .pc.pc-filled { animation: none; box-shadow: inset 3px 0 0 var(--up); }
  .pc-bub { animation: none; }
}
/* a row whose buy is in flight: the pill waits, the row stays readable */
.pc.busy { opacity: 1; }
.pc.busy .qpill { opacity: 0.55; cursor: progress; }

/* ---------- lane header: the real row count, the ONE amount box with its preset chips, the sound switch ---------- */
.pcol-count { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--chip); color: var(--muted); font: 600 10.5px/1 var(--font-mono); flex: none; }
.pcol-count[hidden] { display: none; }
.pcol-head .qamt { display: inline-flex; }
.qhost { flex: none; }
.qgroup { padding-right: 1px; }
.qamt-more { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 24px; padding: 0; border: 0; border-left: 1px solid var(--line-2); border-radius: 0 999px 999px 0; background: none; color: var(--muted); font: 700 10px/1 var(--font-ui); cursor: pointer; }
.qamt-more:hover, .qamt-more[aria-expanded="true"] { color: var(--brand-hi); }
.pcol-sound { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--muted); flex: none; }
.pcol-sound .ico { width: 14px; height: 14px; }
.pcol-sound[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-hi); }
.ppanel.pq { width: 232px; }
.pq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pq-chip { min-width: 46px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--chip); color: var(--text); font: 600 12px/1 var(--font-mono); cursor: pointer; }
.pq-chip:hover { border-color: var(--brand); }
.pq-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pulse-seg .seg-n { margin-left: 5px; color: var(--dim); font: 500 11px/1 var(--font-mono); }
.pulse-seg .seg-btn.on .seg-n { color: var(--muted); }
.pulse-title h1 { text-transform: lowercase; }
/* the board's own status pill: lower case like the shell's; from 560 px up the shell's pill says the same words */
.pulse-title .st-pill { text-transform: lowercase; }
@media (min-width: 560px) {
  .pulse-title .st-pill { display: none; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  /* three narrow lanes: the lane's search gives way, the amount box, the sound and the filter stay */
  .pcol-q { display: none; }
  .pcol-head { gap: 5px; padding: 0 8px; }
  .pcol-ctl { gap: 5px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .pcol-head .qamt .ico { display: none; }
  .pcol-count { display: none; }
}
@media (max-width: 899px) {
  .pcol-ctl { gap: 6px; }
  .pcol-count { display: none; } /* the phone switch above carries the counts */
  .ppanel.pq { width: auto; }    /* the chips open as a strip above the tab bar, like the other panels */
}
@media (max-width: 559px) {
  /* a phone row: the flame and the score, without the bars */
  .pc-heat .heat-bars { display: none; }
  .pr-r3 { gap: 6px; }
  .pr-f { display: none; }   /* the fees are on the token page: a phone row keeps MC, the trades, the heat and the pill */
}

/* ---------- token page: the stats block (5m / 1h / 24h change, 5m volume, buys, sells, net buy, heat) ---------- */
.term-v2 > .card.term-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 0 12px; }
.term-v2 > .card.term-stats[hidden] { display: none; }
.ts { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-left: 1px solid var(--line); white-space: nowrap; flex: none; }
.ts:first-child { padding-left: 0; border-left: 0; }
.ts-k { color: var(--dim); font: 500 11px/1 var(--font-ui); }
.ts-v { color: var(--text); font: 600 12.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.ts-v.up { color: var(--up); }
.ts-v.down { color: var(--down); }
.ts-heatv { display: inline-flex; align-items: center; gap: 6px; }
.ts-word { color: var(--brand-hi); font: 600 11.5px/1 var(--font-ui); }
@media (max-width: 640px) {
  .term-v2 > .card.term-stats { padding: 4px 12px; }
  .ts { height: 26px; padding: 0 10px 0 0; border-left: 0; }
}

/* ---------- token page: the tape filters, own trades, the whale mark ---------- */
.tape-filters { display: flex; align-items: center; gap: 4px; flex: none; padding: 6px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tape-filters::-webkit-scrollbar { display: none; }
.tape-filters[hidden] { display: none; }
.tf-btn { flex: none; height: 22px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--muted); font: 600 11.5px/1 var(--font-ui); white-space: nowrap; cursor: pointer; }
.tf-btn:hover { border-color: var(--brand); color: var(--text); }
.tf-btn[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--text); }
.term-v2 .wl-whale { color: var(--brand-hi); border-color: var(--brand-deep); }
.term-v2 .wl-you { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 700; }
.term-v2 .tp-you { box-shadow: inset 2px 0 0 var(--brand); }
.term-v2 .tp-w .addr, .term-v2 .holders .addr { gap: 3px; font: 500 11.5px/1 var(--font-mono); color: var(--muted); }
.term-v2 .tp-w .addr-link, .term-v2 .holders .addr-link { color: var(--dim); }
.term-v2 .tp-w .addr-link:hover, .term-v2 .holders .addr-link:hover { color: var(--brand-hi); }
.ti-plain .ti-v { color: var(--text); }

/* ---------- token page: the creator's launches ---------- */
.dv-top { flex-wrap: wrap; gap: 8px 10px; }
.dv-head, .dv { display: grid; grid-template-columns: minmax(0, 2.2fr) 84px 76px 96px; gap: 12px; align-items: center; padding: 0 12px; }
.dv-head { position: sticky; top: 0; z-index: 1; height: 26px; background: var(--bg); border-bottom: 1px solid var(--line); color: var(--dim); font: 500 11px/1 var(--font-ui); }
.dv-list { list-style: none; margin: 0; padding: 0; }
.dv { min-height: 30px; border-bottom: 1px solid var(--line); font: 500 12.5px/1 var(--font-mono); }
.dv:hover { background: var(--hover); }
.dv-this { box-shadow: inset 2px 0 0 var(--brand); }
.dv-coin { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); font-family: var(--font-ui); text-decoration: none; }
.dv-coin:hover { color: var(--brand-hi); text-decoration: none; }
.dv-coin b { flex: none; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.dv-st { color: var(--muted); font: 500 11px/1 var(--font-ui); }
.dv-grad { color: var(--brand-hi); }
.dv .mc-hi { color: var(--heat-4); }
.dv .mc-mid { color: var(--heat-3); }
@media (min-width: 1000px) {
  .dv-head, .dv { padding-left: 16px; padding-right: 16px; }
  .tape-filters { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 559px) {
  .dv-head, .dv { grid-template-columns: minmax(0, 1.6fr) 64px 60px; gap: 8px; }
  .dv-head > :nth-child(4), .dv > :nth-child(4) { display: none; }
}

/* ---------- token page: the grid with the stats row ---------- */
@media (min-width: 1000px) {
  .term-v2 { grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-areas: "head head" "stats stats" "chart side" "tabs side"; }
  .term-v2 > .card.term-stats { grid-area: stats; flex-wrap: nowrap; padding: 0 16px; overflow: hidden; }
}

/* ---------- token page on a phone or a tablet: the sticky Buy / Sell bar and the trade panel as a bottom sheet ----------
   The page is one column under 1000 px, so the panel would sit far below the tape. Instead .term-side is taken out of
   the flow: the bar above the tab bar opens it as a sheet with the pressed side chosen (views/coin.js openSheet).
   What is inside .term-side belongs to the trade panel (css/trade.css). */
.term-buybar, .term-scrim { display: none; }
@media (max-width: 999px) {
  .term-v2 { padding-bottom: 62px; }
  body[data-view="coin"] .foot { padding-bottom: calc(var(--tab-h) + 62px + 28px + env(safe-area-inset-bottom, 0px)); }
  .term-buybar { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); z-index: 57; display: flex; align-items: center; gap: 8px; height: 61px; padding: 8px 12px; background: var(--bg); border-top: 1px solid var(--line); }
  .term-buybar .btn { flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 15px; }
  .term-buybar .btn.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
  .term-buybar-x { flex: none; width: 44px; height: 44px; border: 1px solid var(--line-2); color: var(--text); }
  .term-buybar-x[hidden] { display: none; }
  .term-scrim { display: block; position: fixed; inset: 0; z-index: 54; background: var(--scrim); }
  .term-scrim[hidden] { display: none; }
  .term-v2 .term-right > .term-side { display: none; }
  .term-v2.side-open .term-right > .term-side {
    display: block; position: fixed; left: 0; right: 0; z-index: 56;
    bottom: calc(var(--tab-h) + 61px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - var(--top-h) - var(--tab-h) - 61px - 20px); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 0 4px; border-radius: 16px 16px 0 0; border: 1px solid var(--line-2); border-bottom: 0;
    background: var(--bg-2); box-shadow: var(--shadow-pop); animation: sheet-up 0.18s ease-out;
  }
}
/* ---------- tap targets on the board ----------
   Lane header buttons on a phone or tablet: 36 px inside the 40 px header (they were 26 px). On a touch screen the
   row's watch and hide buttons keep their look and get a 28 px tap area each, spaced so the two never overlap (the
   hide button's area used to reach over the star: a tap meant to watch a coin could hide it). */
@media (max-width: 899px) {
  .pcol-sound, .pcol-filter, .pcol-pause { width: 36px; height: 36px; }
}
@media (hover: none) {
  .pr-act, .pr-act.pr-hide { margin: 0 5px; }
  .pr-act::before, .pr-act.pr-hide::before { content: ''; position: absolute; inset: -5px; border-radius: 6px; }
}
@keyframes sheet-up { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .term-v2.side-open .term-right > .term-side { animation: none; } }