/* Token page. Layout + section styles; colours come from bearco-core.css variables (--bc-*). */
.tp-root { color: var(--bc-text); background: var(--bc-bg); font: 13px/1.4 var(--bc-mono); max-width: 1440px; margin: 0 auto; padding: 16px 16px 40px; box-sizing: border-box; }
.tp-root *, .tp-root *::before, .tp-root *::after { box-sizing: border-box; }
.tp-root a { color: var(--bc-blue); text-decoration: none; }
.tp-root a:hover { text-decoration: underline; }
.tp-root code { font-family: var(--bc-mono); }
.tp-loading { color: var(--bc-dim); padding: 18px 4px; }
.tp-err { color: var(--bc-red); }
.tp-sp { flex: 1; }
.tp-num { font-variant-numeric: tabular-nums; text-align: right; }
.tp-note { font-size: 11px; margin: 8px 0 0; }

/* header */
.tp-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start;
  background: linear-gradient(135deg, var(--bc-panel), var(--bc-bg)); border: 1px solid var(--bc-border); border-radius: 14px; padding: 16px; }
.tp-id { display: flex; gap: 14px; min-width: 0; flex: 1 1 420px; }
.tp-id > div { min-width: 0; flex: 1; }
.tp-ico { width: 64px; height: 64px; font-size: 20px; }
.tp-name { font-size: 26px; font-weight: 800; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-issuer { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; font-size: 12px; }
.tp-issuer code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bc-dim); }
.tp-desc { color: var(--bc-dim); margin: 8px 0 0; max-width: 640px; }
.tp-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tp-price { text-align: right; }
.tp-p-xrp { font-size: 26px; font-weight: 800; color: var(--bc-accent); font-variant-numeric: tabular-nums; }
.tp-p-usd { color: var(--bc-dim); margin-top: 2px; }
.tp-acts { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.tp-tier { font-size: 10px; letter-spacing: 1.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; font-weight: 800; }
.tp-root a.tp-tier:hover { text-decoration: none; }
.tp-tier-tsunami { color: #7FE3FF; } .tp-tier-waves { color: var(--bc-blue); } .tp-tier-swells { color: #2EE6C8; }
.tp-tier-ripples { color: var(--bc-green); } .tp-tier-splash { color: var(--bc-yellow); } .tp-tier-drops { color: var(--bc-orange); } .tp-tier-trenches { color: var(--bc-dim); }

/* key numbers */
.tp-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.tp-kv { background: var(--bc-card); border: 1px solid var(--bc-border); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.tp-kv span { display: block; font-size: 10px; letter-spacing: 1px; color: var(--bc-dim); }
.tp-kv b { display: block; font-size: 15px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-status:empty { display: none; }
.tp-status { padding: 8px 12px; border: 1px solid var(--bc-border); border-radius: 8px; margin-bottom: 10px; }

/* sections */
.tp-tabs { display: none; }
.tp-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.tp-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tp-sec { background: var(--bc-panel); border: 1px solid var(--bc-border); border-radius: 14px; padding: 12px 14px; min-width: 0; }
#tp-holders { margin-top: 12px; }
.tp-sec-h { margin: 0 0 10px; font-size: 12px; letter-spacing: 2px; color: var(--bc-accent); }
.tp-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.tp-card { background: var(--bc-card); border: 1px solid var(--bc-border); border-radius: 10px; padding: 10px 12px; margin-top: 10px; min-width: 0; }
.tp-card h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: 1.5px; color: var(--bc-dim); }
.tp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tp-tile { background: var(--bc-card); border: 1px solid var(--bc-border); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.tp-tile span { display: block; font-size: 10px; letter-spacing: 1px; color: var(--bc-dim); }
.tp-tile b { display: block; font-size: 16px; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-tile small { color: var(--bc-dim); font-size: 10px; }

/* chart */
.tp-chart-bar { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tp-chart-info { color: var(--bc-dim); font-size: 11px; min-height: 16px; margin: 6px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-chart-box { position: relative; height: 380px; }
.tp-chart-plot { position: absolute; inset: 0; }
.tp-attr { color: var(--bc-dim); text-decoration: none; font-size: 10px; } .tp-attr:hover { color: var(--bc-accent); }
.tp-chart-info b { font-weight: 600; } .tp-chart-info .bc-up { color: #39FF88; } .tp-chart-info .bc-down { color: #FF5C5C; }
.tp-chart-msg { position: absolute; inset: 0; z-index: 3; background: rgba(10,14,15,.6); display: flex; align-items: center; justify-content: center; color: var(--bc-dim); text-align: center; padding: 20px; }
.tp-legend { display: flex; gap: 12px; font-size: 11px; margin-top: 4px; }

/* trades */
.tp-live { font-size: 11px; font-weight: 700; color: var(--bc-dim); }
.tp-live-live { color: var(--bc-green); }
.tp-live-down { color: var(--bc-red); }
.tp-press { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; }
.tp-press-bar { height: 8px; background: var(--bc-red); border-radius: 4px; overflow: hidden; margin: 4px 0 8px; }
.tp-press-bar div { height: 100%; background: var(--bc-green); }
.tp-dots { width: 100%; height: 90px; display: block; background: var(--bc-card); border-radius: 8px; }
.tp-list { max-height: 460px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--bc-border); }
.tp-trade { display: grid; grid-template-columns: 64px 46px 88px 1fr 110px 18px 18px; gap: 8px; padding: 5px 2px; border-bottom: 1px solid #1a2224; align-items: center; font-size: 12px; }
.tp-fresh { animation: tp-flash 2.5s ease-out; }
@keyframes tp-flash { from { background: rgba(57,255,136,.18); } to { background: transparent; } }
.tp-k-buy { color: var(--bc-green); } .tp-k-sell { color: var(--bc-red); } .tp-k-lp_add { color: var(--bc-blue); } .tp-k-lp_remove { color: var(--bc-orange); }
.tp-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* holders */
.tp-hgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tp-donut-row { display: flex; gap: 12px; align-items: center; }
.tp-donut { width: 130px; height: 130px; flex: none; }
.tp-legend-list { flex: 1; min-width: 0; font-size: 11px; }
.tp-legend-list div { display: grid; grid-template-columns: 10px 1fr auto; gap: 6px; align-items: center; padding: 1px 0; }
.tp-legend-list i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.tp-legend-list span, .tp-legend-list a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-bar { display: grid; grid-template-columns: 70px 1fr 104px; gap: 8px; align-items: center; font-size: 11px; margin: 5px 0; }
.tp-bar b { text-align: right; font-weight: 600; }
.tp-bar-t { height: 10px; background: var(--bc-card2); border-radius: 5px; overflow: hidden; }
.tp-bar-t div { height: 100%; border-radius: 5px; min-width: 2px; }
.tp-curve { width: 100%; height: 120px; display: block; }
.tp-htable { margin-top: 6px; overflow-x: auto; }
.tp-hrow { display: grid; grid-template-columns: 40px minmax(260px, 2.4fr) 90px 80px 90px 70px 120px 50px; gap: 8px; padding: 5px 2px; border-bottom: 1px solid #1a2224; align-items: center; font-size: 12px; min-width: 900px; }
.tp-hhead { color: var(--bc-dim); font-size: 10px; letter-spacing: 1px; position: sticky; top: 0; background: var(--bc-panel); }
.tp-waddr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-pooltag { color: var(--bc-blue); font-size: 10px; }
.tp-htable > .bc-btn { margin-top: 8px; }

/* safety */
.tp-verdict { font-size: 15px; font-weight: 800; padding: 8px 12px; border-radius: 8px; border: 1px solid currentColor; }
.tp-verdict span { color: var(--bc-dim); font-weight: 400; font-size: 12px; }
.tp-v-ok { color: var(--bc-green); } .tp-v-warn { color: var(--bc-orange); } .tp-v-bad { color: var(--bc-red); }
.tp-checks { list-style: none; padding: 0; margin: 10px 0 0; }
.tp-checks li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid #1a2224; }
.tp-checks i { font-style: normal; font-weight: 800; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 11px; color: #061008; }
.tp-checks b { display: block; font-size: 12px; }
.tp-checks span { color: var(--bc-dim); font-size: 11px; }
.tp-c-ok i { background: var(--bc-green); } .tp-c-warn i { background: var(--bc-orange); } .tp-c-bad i { background: var(--bc-red); }

/* footer, toast, name chooser */
.tp-foot { margin-top: 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 11px; }
.tp-foot p { margin: 0; flex: 1; }
.tp-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--bc-accent); color: #061008; font: 700 12px var(--bc-mono); padding: 8px 14px; border-radius: 8px; z-index: 50; }
.tp-pick { max-width: 760px; margin: 40px auto; }
.tp-pick-row { display: grid; grid-template-columns: 28px 120px 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--bc-border); border-radius: 10px; margin-top: 6px; color: var(--bc-text) !important; }
.tp-pick-row code { overflow: hidden; text-overflow: ellipsis; color: var(--bc-dim); }

/* tablet: strip wraps */
@media (max-width: 1200px) { .tp-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tp-hgrid { grid-template-columns: 1fr 1fr; } }

/* phone: one column, sticky tabs, one section at a time */
@media (max-width: 900px) {
  .tp-root { padding: 10px 10px 30px; }
  .tp-head { padding: 12px; }
  .tp-id { flex-basis: 100%; }
  .tp-ico { width: 48px; height: 48px; }
  .tp-name { font-size: 20px; }
  .tp-price { text-align: left; width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .tp-p-xrp { font-size: 20px; }
  .tp-acts { margin: 0 0 0 auto; }
  .tp-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .tp-kv { padding: 6px 7px; }
  .tp-kv span { font-size: 8.5px; letter-spacing: .5px; }
  .tp-kv b { font-size: 12px; }
  .tp-tabs { display: flex; position: sticky; top: 0; z-index: 10; background: var(--bc-bg); gap: 4px; padding: 6px 0; overflow-x: auto; margin-bottom: 6px; }
  .tp-tabs button { flex: 1; background: var(--bc-card); color: var(--bc-dim); border: 1px solid var(--bc-border); border-radius: 8px; padding: 8px 6px; font: 700 11px var(--bc-mono); white-space: nowrap; }
  .tp-tabs button.on { background: var(--bc-accent); color: #061008; border-color: var(--bc-accent); }
  .tp-grid { display: block; }
  .tp-col { display: contents; }
  .tp-sec { display: none; padding: 10px; }
  .tp-sec.tp-active { display: block; }
  #tp-holders { margin-top: 0; }
  .tp-sec-h { display: none; }
  .tp-chart-box { height: 300px; }
  .tp-hgrid { grid-template-columns: 1fr; }
  .tp-trade { grid-template-columns: 56px 40px 74px 1fr 22px 18px; font-size: 11px; }
  .tp-trade .tp-addr { display: none; }
  .tp-list { max-height: none; }
  .tp-pick-row { grid-template-columns: 28px 1fr auto; }
  .tp-pick-row code { display: none; }
  .tp-foot { flex-direction: column; align-items: stretch; }
}
@media (max-width: 420px) { .tp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* site bar above the token page: home + the other web tools + token search */
.tp-top { display: flex; align-items: center; gap: 12px; max-width: 1440px; margin: 0 auto; padding: 12px 16px 0; box-sizing: border-box; font: 600 13px/1.2 var(--bc-mono); color: var(--bc-text); }
.tp-home { display: flex; align-items: center; gap: 8px; color: var(--bc-text); text-decoration: none; letter-spacing: .12em; white-space: nowrap; }
.tp-home:hover { color: var(--bc-green); }
.tp-home img { width: 22px; height: 22px; border-radius: 6px; }
.tp-tools { display: flex; gap: 8px; flex: 1; justify-content: flex-start; align-items: center; overflow-x: auto; scrollbar-width: none; }
.tp-tools > :first-child { margin-left: auto; } .tp-tools > :last-child { margin-right: auto; }
.tp-tools::-webkit-scrollbar { display: none; }
/* 2026-10-20 (Jeff: "token page top buttons dont look like the main pages"): same chips as Lookout's top bar */
.tp-tools a, .tp-tools b { white-space: nowrap; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.tp-tools a { color: #E7ECE9; border: 1px solid rgba(43,255,122,.5); background: rgba(43,255,122,.1); }
.tp-tools a:hover { border-color: #2BFF7A; }
.tp-tools b { color: #8FA69C; border: 1px dashed #26302F; font-weight: 600; } .tp-tools small { font-size: 10px; opacity: .8; }
.tp-find input { width: 170px; background: var(--bc-card2); color: var(--bc-text); border: 1px solid var(--bc-border); border-radius: 999px; padding: 6px 12px; font: 12px var(--bc-mono); box-sizing: border-box; }
.tp-find input:focus { outline: none; border-color: var(--bc-green); }
.tp-issuer-link { color: inherit; text-decoration: none; }
.tp-issuer-link:hover code { color: var(--bc-green); text-decoration: underline; }
@media (max-width: 900px) { .tp-top { flex-wrap: wrap; } .tp-tools { order: 3; flex-basis: 100%; justify-content: flex-start; } .tp-find { margin-left: auto; } .tp-find input { width: 140px; } }

/* trade search by wallet (2026-10-20) */
.tp-wsearch { width: 230px; max-width: 100%; background: #0a0e0f; color: var(--bc-text); border: 1px solid rgba(43,255,122,.4); border-radius: 999px; padding: 5px 12px; font: 600 12px/1.2 var(--bc-mono); }
.tp-wsearch:focus { outline: none; border-color: #2BFF7A; box-shadow: 0 0 10px rgba(43,255,122,.25); }
.tp-wmatch { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 2px 0 8px; font-size: 12px; }
.tp-wfilter { background: none; border: 0; color: var(--bc-dim, #8FA39D); cursor: pointer; font-size: 13px; padding: 0 4px; } .tp-wfilter:hover { color: #2BFF7A; }
@media (max-width: 600px) { .tp-wsearch { width: 100%; order: 5; } }

/* order book (2026-11-01): under Pool on desktop, its own "Book" tab on phones */
#tp-book .tp-row { margin: 10px 0 6px; }
.tp-ob-chart { position: relative; margin: 6px 0 8px; background: var(--bc-card); border: 1px solid var(--bc-border); border-radius: 10px; padding: 6px 6px 2px; }
.tp-ob-depth { width: 100%; height: 130px; display: block; }
.tp-ob-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--bc-dim); padding: 0 4px 2px; font-variant-numeric: tabular-nums; }
.tp-ob-ymax { position: absolute; top: 6px; left: 10px; font-size: 10px; }
.tp-ob { border-top: 1px solid var(--bc-border); font-size: 12px; }
.tp-ob-row { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 3px 4px; align-items: center; }
.tp-ob-row > * { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-ob-row::before { content: ""; position: absolute; top: 1px; bottom: 1px; right: 0; width: var(--w, 0); border-radius: 3px; }
.tp-ob-ask::before { background: rgba(255,92,92,.13); } .tp-ob-bid::before { background: rgba(57,255,136,.12); }
.tp-ob-ask .tp-ob-px { color: var(--bc-red); } .tp-ob-bid .tp-ob-px { color: var(--bc-green); }
.tp-ob-amm { font-style: italic; } .tp-ob-amm .tp-ob-px { opacity: .85; }
.tp-ob-head { color: var(--bc-dim); font-size: 10px; letter-spacing: 1px; border-bottom: 1px solid var(--bc-border); }
.tp-ob-who { text-align: right; font-size: 11px; }
.tp-ob-mid { display: flex; gap: 6px; align-items: baseline; padding: 6px 4px; margin: 2px 0; border-top: 1px dashed var(--bc-border); border-bottom: 1px dashed var(--bc-border); font-variant-numeric: tabular-nums; }
.tp-ob-mid b { font-size: 15px; color: var(--bc-accent); }
#tp-book > .tp-sec-b > .bc-btn { margin-top: 8px; }
.tp-ob-hint { margin: 0 0 6px; }
@media (max-width: 900px) { .tp-ob-row { font-size: 11px; } .tp-ob-depth { height: 110px; } }
.tp-ob-row .tp-ob-px { text-align: left; }
.tp-ob-head span:last-child { text-align: right; }
/* limit orders from the book (2026-11-01) */
.tp-ob-click { cursor: pointer; } .tp-ob-click:hover { background: rgba(238,245,242,.05); border-radius: 3px; }
.tp-ob-mine { box-shadow: inset 2px 0 0 var(--bc-accent); }
.tp-ob-you { color: var(--bc-accent); font-size: 10px; letter-spacing: 1px; }
.tp-ob-acts { margin: 0 0 8px; } .tp-ob-lb { color: var(--bc-green); } .tp-ob-ls { color: var(--bc-red) !important; }
/* ladder on the big chart (2026-11-01): drag handles on each side's end lines; page makes room for the docked Buy panel */
.tp-ladh-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.tp-ladh { position: absolute; transform: translateY(-50%); pointer-events: auto; cursor: ns-resize; touch-action: none; user-select: none;
  font: 700 11px var(--bc-mono); padding: 4px 10px; border-radius: 999px; background: #0B0F10; border: 1.5px solid currentColor; box-shadow: 0 2px 10px rgba(0,0,0,.6); white-space: nowrap; }
.tp-ladh-buy { color: #39FF88; } .tp-ladh-sell { color: #FF5C5C; }
.tp-ladh:hover, .tp-ladh:focus { outline: none; background: #121a1c; box-shadow: 0 0 0 3px rgba(238,245,242,.12), 0 2px 10px rgba(0,0,0,.6); }
body.tp-dragging, body.tp-dragging * { cursor: ns-resize !important; user-select: none !important; }
@media (min-width: 901px) {
  body.bb-docked .tp-root, body.bb-docked .tp-top { max-width: none; margin-right: min(470px, 45vw); margin-left: 0; }
  body.bb-docked .tp-chart-box { height: min(70vh, 640px); }
}
@media (max-width: 900px) { body.bb-docked .tp-root { padding-bottom: 52vh; } body.bb-docked .tp-chart-box { height: 44vh; } }
@media (min-width: 901px) { body.bb-docked .tp-grid { grid-template-columns: minmax(0, 1fr); } }

/* live candles (2026-11-06) */
.tp-chart-live { font: 10px/1 var(--bc-mono, ui-monospace, monospace); letter-spacing: .05em; color: #5f716b; padding: 0 6px; white-space: nowrap; transition: color .3s, text-shadow .3s; }
.tp-chart-live.on { color: #39FF88; }
.tp-chart-live.flash { text-shadow: 0 0 8px #39FF88; }

/* 2026-11-10: in the Swarm page's chart window (?pop=1) the site bar is hidden */
html[data-pop] .tp-top { display: none; }