/* ============================================================
   Alpha Finance: blockchain data page
   Page-scoped skin, loaded after alpha.css. Additive only.
   ============================================================ */

body.bcd .section { padding: 34px 0 36px; }
body.bcd .section-head { margin-bottom: 16px; }

/* ---------- hero ---------- */

.bchero {
  position: relative;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 90% at 85% 10%, color-mix(in srgb, var(--lime) 4%, transparent), transparent),
    var(--bg);
  overflow: hidden;
}
.bchero .wrap { position: relative; }
.bchero-grid {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 20px 56px;
  align-items: center;
}
.bchero-inner { padding: 26px 0 0; max-width: 720px; }

.bchero h1 {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--text);
}
.bchero .dek {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}

.bchero-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 0 22px;
}
.bcstat {
  padding: 13px 15px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}
.bcstat-k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bcstat-v {
  margin-top: 9px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bcstat-v i { font-style: normal; font-size: 12px; }
.bcstat-v .up { color: var(--pos-text); }
.bcstat-v .down { color: var(--neg-text); }
.bcstat-s {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--faint);
}
@media (max-width: 860px) {
  .bchero-grid { grid-template-columns: 1fr; gap: 0; }
  .bchero-side { flex-direction: row; padding: 18px 0 22px; }
  .bchero-side .bcstat { flex: 1; }
}
@media (max-width: 480px) { .bchero-side { flex-direction: column; } }

/* live-state line */
.feed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 16px;
  padding-bottom: 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.feed b { font-weight: 500; color: var(--text-2); }
.feed .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--faint);
  vertical-align: 1px;
}
.feed.is-live .dot { background: var(--pos-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos-text) 18%, transparent); }
.feed.is-down .dot { background: var(--neg); }

/* ---------- shared control primitives ---------- */

.seg { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg button {
  padding: 6px 10px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.13s, background 0.13s;
}
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--text-2); background: var(--panel-2); }
.seg button[aria-pressed="true"] { color: #0a0b0d; background: var(--lime); }

.pick { display: flex; align-items: center; gap: 9px; }
.pick-l {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

/* ---------- the two chart panels ---------- */

.bc-panels {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 8px;
}
@media (max-width: 980px) { .bc-panels { grid-template-columns: 1fr; } }

.bc-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bc-phead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.bc-phead h2 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
  margin-right: auto;
}
.bc-phead h2 small {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.bc-pbody {
  flex: 1;
  padding: 16px;
  background: var(--bg-2);
}

/* the share bar: flat segments with a surface seam between them */
.bc-bar {
  display: flex;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  gap: 2px;
  background: var(--bg-2);
}
.bc-bar i { display: block; min-width: 2px; }

.bc-legend { margin-top: 14px; display: flex; flex-direction: column; }
.bc-lg {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6.5px 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
}
.bc-lg:last-child { border-bottom: 0; }
.bc-lg > i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.bc-lg b {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
/* the money span only: the round icon slot is a span too, and must not be pushed */
.bc-lg > span:not(.bc-cin) { margin-left: auto; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bc-lg em { font-style: normal; color: var(--faint); width: 46px; text-align: right; font-variant-numeric: tabular-nums; }

#bc-area { display: block; width: 100%; cursor: crosshair; }

/* ---------- the table ---------- */

.bcwrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}
.bc-tbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.bc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-2);
}
.bc-search svg { width: 13px; height: 13px; color: var(--faint); flex: none; }
.bc-search input {
  width: 170px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  outline: none;
}
.bc-search input::placeholder { color: var(--faint); }
.bc-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--faint);
}

.bc-scroll { overflow-x: auto; }
table.bchains {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.bchains th {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.bchains th.l { text-align: left; }
.bchains th[data-k] { cursor: pointer; }
.bchains th[data-k]:hover { color: var(--text-2); }
.bchains th[aria-sort] { color: var(--lime); }
.bchains th[aria-sort]::after { content: " \2193"; }
.bchains th[aria-sort="ascending"]::after { content: " \2191"; }

.bchains td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
}
.bchains tbody tr:last-child td { border-bottom: 0; }
.bchains tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }

.bchains td.rk { color: var(--faint); font-size: 10px; width: 34px; }
.bchains td.co { text-align: left; }
.bchains td.co b {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}
.bchains td.co small { margin-left: 8px; font-size: 10px; color: var(--faint); }
.bchains td.tv { color: var(--text); font-weight: 600; }
.bchains td.cup { color: var(--pos-text); }
.bchains td.cdn { color: var(--neg-text); }
.bchains td.cnone { color: var(--faint); }
.bchains td.sp { padding-top: 4px; padding-bottom: 4px; }
/* canvases are blocks site-wide, so the trend sat at the left of a cell whose
   heading is set to the right; it is pushed over to sit under its heading */
.bchains td.sp canvas { margin-left: auto; }
/* fixed widths for the figure columns, so the spare width goes to the chain
   name and the numbers sit in even, close columns instead of drifting apart */
.bchains th:nth-child(3), .bchains td:nth-child(3) { width: 112px; }
.bchains th:nth-child(4), .bchains td:nth-child(4),
.bchains th:nth-child(5), .bchains td:nth-child(5),
.bchains th:nth-child(6), .bchains td:nth-child(6) { width: 92px; }
.bchains th:nth-child(7), .bchains td:nth-child(7) { width: 124px; }
.bchains th:nth-child(8), .bchains td:nth-child(8),
.bchains th:nth-child(9), .bchains td:nth-child(9),
.bchains th:nth-child(10), .bchains td:nth-child(10) { width: 116px; }
.bchains td.none {
  text-align: center;
  padding: 26px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
}

.bc-cic {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: -4px;
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--line-2);
}
/* a chain with no local mark gets its initial in the same footprint */
.bc-cin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: -4px;
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--line-2);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
}

/* prose, not a row of items: see .fr-foot in css/funding.css */
.bc-foot {
  padding: 11px 16px 12px;
  line-height: 1.75;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.bc-foot b { font-weight: 500; color: var(--muted); }

/* hero tiles: the house stat tiles (terminal.css styles anything named
   *stats / *stat / *stat-row / *stat-ic), four across. Outside the terminal
   they fall back to a plain row of the cards above. */
.bcstats { display: flex; flex-wrap: wrap; gap: 8px; }
.bcstats .bcstat { flex: 1 1 0; min-width: 130px; }
.bcstat-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.bcstat-row .bcstat-v { margin-top: 0; }
.bcstat-ic { display: inline-flex; width: 22px; height: 22px; padding: 4px; border-radius: 6px; background: rgba(200, 255, 80, 0.08); color: var(--lime); }
.bcstat-c { font-family: var(--mono); font-size: 10.5px; }
.bcstat-c.up { color: var(--pos-text); }
.bcstat-c.down { color: var(--neg-text); }

/* status line: one quiet sentence in grey, not a row of mono chips.
   The dot still carries feed state; the words just read as words. */
.feed, .liqshero .feed {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  gap: 6px 0;
}
.feed > span + span::before, .liqshero .feed > span + span::before {
  content: "\00b7";
  margin: 0 9px;
  color: var(--faint);
}
.feed b, .liqshero .feed b { color: var(--text-2); font-weight: 500; }