/* bumblebeam pool: the Beam Explorer look (BeamMW/BeamExplorer frontend/src/app/styles.ts and
   explorer/shared/theme.ts): dark Beam blue, the #00f6d2 accent, mono type for data. */

:root {
  --color-red: #f25f5b;
  --color-yellow: #f4ce4a;
  --color-green: #00f6d2;
  --color-blue: #0bccf7;
  --color-purple: #da68f5;
  --color-dark-blue: #042548;
  --color-darkest-blue: #032e49;
  --gradient-beam: linear-gradient(135deg, #0b76ff 0%, #39fff2 100%);

  --bg: #042548;
  --surface: rgba(255, 255, 255, 0.03);
  --surface2: rgba(255, 255, 255, 0.05);
  --surface3: rgba(0, 0, 0, 0.4);
  --accent: #00f6d2;
  --accent-dim: rgba(0, 246, 210, 0.18);
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.8);
  --muted: rgba(255, 255, 255, 0.5);
  --muted2: rgba(255, 255, 255, 0.4);
  --border: rgba(255, 255, 255, 0.1);
  --border-dim: rgba(255, 255, 255, 0.06);
  /* form fields and the card list share one opaque fill, so they match wherever they sit */
  --field-bg: #193b55;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'DejaVu Sans Mono', monospace;
  --page-padding-x: clamp(14px, 2.5vw, 36px);
  --page-width: 1370px;
}

* { box-sizing: border-box; }
/* The page gradient on its own fixed layer, as tall as the viewport with the browser bars
   hidden (lvh). A "background-attachment: fixed" body is sized to the viewport with the bars
   shown, so on phones a band of restarted gradient showed at the bottom while scrolling. */
body::before {
  content: ''; position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: 100%; height: 100vh; height: 100lvh;
  background: linear-gradient(180deg, #031d35 0%, #043a5b 55%, #0a5a80 100%);
}
html, body { margin: 0; padding: 0; }
/* the colour past the page's ends (overscroll) is the gradient's last one. The scrollbar is
   always there, so a short page (a loading view, the explorer while it syncs) is as wide as a
   long one and the centred header does not shift between pages or between the two sites. */
html { background: #0a5a80; overflow-y: scroll; }
body {
  min-height: 100vh;
  display: flex; flex-direction: column;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  background: transparent;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus { outline: none; }

/* ---- header ---- */
.top { padding: 0 var(--page-padding-x); }
.top-row {
  max-width: var(--page-width); margin: 0 auto; height: 64px;
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); font-weight: 700; font-size: 19px; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; font-weight: 400; color: var(--muted); }
.brand b { font-weight: 700; background: var(--gradient-beam); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo { width: 42px; height: 42px; overflow: visible; }
/* Logo animation, in the Beam Explorer's manner (soft opacity pulses, 1.5 s), plus the bee: wings
   flutter, the body bobs, the light trail streams. Everything stops under prefers-reduced-motion. */
.logo .hex { filter: drop-shadow(0 0 0 rgba(57, 255, 242, 0)); animation: logo-glow 3s ease-in-out infinite; }
.logo .bee { animation: logo-bob 3s ease-in-out infinite; }
.logo .wing { transform-box: fill-box; transform-origin: 50% 100%; animation: logo-flutter .22s ease-in-out infinite alternate; }
.logo .wr { animation-delay: -.11s; }
.logo .trail path { animation: logo-trail 1.5s ease-in-out infinite; }
.logo .trail .t2 { animation-delay: -.5s; }
.logo .eye { animation: logo-blink 4s steps(1) infinite; }
@keyframes logo-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(57, 255, 242, 0)); } 50% { filter: drop-shadow(0 0 6px rgba(57, 255, 242, .55)); } }
@keyframes logo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.9px); } }
@keyframes logo-flutter { from { transform: rotate(-9deg) scaleY(.92); } to { transform: rotate(9deg) scaleY(1.05); } }
@keyframes logo-trail { 0%, 100% { stroke-opacity: .25; transform: translateX(1.2px); } 50% { stroke-opacity: .85; transform: translateX(-1px); } }
@keyframes logo-blink { 0%, 93%, 100% { opacity: 1; } 95%, 98% { opacity: 0; } }
.brand:hover .logo .wing { animation-duration: .14s; }
@media (prefers-reduced-motion: reduce) {
  .logo .hex, .logo .bee, .logo .wing, .logo .trail path, .logo .eye { animation: none; }
  .logo .trail path { stroke-opacity: .6; }
}
.search {
  flex: 0 1 380px; display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 8px 0 12px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
}
.search:focus-within { border-color: rgba(0, 246, 210, 0.5); }
.search svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2; flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: 13px var(--font-sans); }
.search input::placeholder { color: var(--muted); }
.search kbd { font: 10px var(--font-mono); color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; }
.main-nav { margin-left: auto; display: flex; gap: 6px; }
.main-nav a {
  color: var(--text-dim); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 8px 12px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.main-nav a:hover { color: var(--text); text-decoration: none; }
.main-nav a.active { color: var(--text); border-bottom-color: var(--accent); }
/* "Start mining" sits in the menu as a button, not a tab */
.main-nav a.nav-cta {
  margin-left: 6px; align-self: center; padding: 7px 12px; border: 1px solid rgba(0, 246, 210, 0.6); border-radius: 6px;
  color: var(--accent); background: rgba(0, 246, 210, 0.06);
}
.main-nav a.nav-cta:hover { background: var(--accent-dim); color: var(--accent); }
.top-row .cta-top { display: none; }
.cta-top.active { background: rgba(0, 246, 210, 0.15); }
.main-nav a.nav-cta.active { background: rgba(0, 246, 210, 0.15); border-bottom-color: rgba(0, 246, 210, 0.6); }

.demo-banner {
  box-sizing: border-box; width: calc(100% - 2 * var(--page-padding-x));
  max-width: var(--page-width); margin: 14px auto 0; padding: 10px 14px;
  font-size: 12px; color: var(--text-dim);
  border: 1px solid rgba(244, 206, 74, 0.35); background: rgba(244, 206, 74, 0.07); border-radius: 6px;
}
.demo-banner b { color: var(--color-yellow); }

/* ---- page ---- */
main { flex: 1 0 auto; width: 100%; max-width: var(--page-width); margin: 0 auto; padding: 8px var(--page-padding-x) 40px; }
.top, .demo-banner, .foot { flex: none; }
.foot { width: 100%; }
/* fixed heights, so titles and panels sit at the same place whether or not a button is beside them */
.page-head { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; min-height: 34px; }
.page-title { font: 700 13px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; }

.panel {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-dim); border-radius: 8px;
  padding: 16px; margin-bottom: 16px;
}
.panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; min-height: 24px; }
.panel-title { font: 700 12px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.panel-meta { margin-left: auto; font: 11px var(--font-mono); color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.panel-meta b { color: var(--text); font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: 700 12px var(--font-mono); color: var(--accent);
  background: rgba(0, 246, 210, 0.06); border: 1px solid rgba(0, 246, 210, 0.6); border-radius: 6px; padding: 8px 14px;
}
.btn:hover { background: var(--accent-dim); text-decoration: none; }
.btn.ghost { color: var(--text-dim); border-color: var(--border); background: transparent; }
.btn.small { padding: 4px 8px; font-size: 11px; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--border-dim); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.tile .k { font: 700 10px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tile .v { font: 700 22px var(--font-mono); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* a value too long for its tile wraps instead of being cut off with an ellipsis */
.tile .v, .tile .v .amt { white-space: normal; text-overflow: clip; }
.tile .s { font: 11px var(--font-mono); color: var(--muted); margin-top: 4px; }
.tile .v.accent { color: var(--accent); }

/* tables */
.table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: 12px; border-bottom: 1px solid var(--border-dim); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.num { text-align: right; }
.dim { color: var(--muted); }
.mono { font-family: var(--font-mono); }
tr.ours td { background: rgba(0, 246, 210, 0.05); }
.name { color: var(--accent); font-weight: 700; }
.sub { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.dot.off { background: var(--muted2); box-shadow: none; }

.bar { height: 3px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; margin-top: 6px; width: 100%; max-width: 300px; }
.bar > i { display: block; height: 100%; border-radius: 2px; background: var(--color-yellow); }
.bar.accent > i { background: var(--accent); }

.badge { display: inline-block; font: 700 10px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; }
.badge.ok { color: var(--accent); background: rgba(0, 246, 210, 0.1); }
.badge.pending { color: var(--color-yellow); background: rgba(244, 206, 74, 0.1); }
.badge.bad { color: var(--color-red); background: rgba(242, 95, 91, 0.12); }
.badge.solo { color: var(--color-purple); background: rgba(218, 104, 245, 0.12); }
/* a block our pool found: its height as a badge, in the explorer and the pool's network page */
.badge.ours-h { font-size: 11px; letter-spacing: 0.02em; line-height: 1.2; padding: 1px 6px; margin: -2px 0 -2px -6px; text-decoration: none; }
.badge.ours-h:hover { background: rgba(0, 246, 210, 0.2); }

.hashcell { display: flex; align-items: center; gap: 10px; }
.spark { width: 90px; height: 22px; flex: none; }

/* charts */
.chart { width: 100%; height: auto; display: block; }
.chart text { font: 9.5px var(--font-sans); fill: rgba(255, 255, 255, 0.6); }
.chart text.pill-text { font: 700 9.5px var(--font-mono); fill: var(--bg); }
.chart .grid { stroke: rgba(255, 255, 255, 0.06); }
.chart .now { stroke: var(--accent); stroke-opacity: 0.75; stroke-dasharray: 2 3; }
.chart text.peak-text { font: 700 9.5px var(--font-mono); fill: var(--muted); }
.legend { display: flex; gap: 16px; font: 11px var(--font-mono); color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

.grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid2 > .panel { margin-bottom: 0; }
/* the connect guide ends with its content instead of stretching to the taller right column */
#guide { align-self: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* small pieces */
.hint { margin: -4px 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.more { display: flex; justify-content: center; padding: 14px 0 2px; }
.addr { display: flex; align-items: center; gap: 10px; font: 12px var(--font-mono); word-break: break-all; color: var(--text-dim); }
.addr span { flex: 1; min-width: 0; }
.why { gap: 10px; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.why b { color: var(--accent); }
.note { margin-top: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.45; border-radius: 6px; border: 1px solid var(--border); color: var(--text-dim); }
.note.warn { border-color: rgba(244, 206, 74, 0.35); background: rgba(244, 206, 74, 0.07); }
.note.ok { border-color: rgba(0, 246, 210, 0.3); background: rgba(0, 246, 210, 0.06); }
.step .row { margin-top: 10px; }
#portline { font-size: 11px; }

/* connect page */
.steps { counter-reset: step; display: grid; gap: 14px; }
.step { position: relative; padding-left: 40px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font: 700 12px var(--font-mono); color: var(--bg); background: var(--gradient-beam);
}
.step h3 { margin: 3px 0 8px; font-size: 14px; }
.step p { margin: 0 0 8px; color: var(--text-dim); line-height: 1.5; }
.code {
  position: relative; display: flex; align-items: flex-start; gap: 8px;
  background: var(--surface3); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px;
  font: 12px var(--font-mono); color: var(--text-dim); overflow-x: auto;
}
.code pre { margin: 0; flex: 1; white-space: pre; }
.code .btn { flex: none; }
.code pre .arg { display: inline-block; max-width: 100%; }
/* phones: commands wrap instead of hiding behind a sideways scroll, copy goes under them */
@media (max-width: 480px) {
  .code { flex-wrap: wrap; justify-content: flex-end; }
  .code pre { flex-basis: 100%; white-space: pre-wrap; }
  .code pre .arg { overflow-wrap: anywhere; }
}
/* thumb-sized range switch on touch screens */
@media (pointer: coarse) { .seg.range button { padding: 8px 12px; } }
.seg { display: inline-flex; gap: 4px; }
.seg button, .pill {
  font: 700 11px var(--font-mono); letter-spacing: 0.02em; padding: 5px 10px; cursor: pointer;
  color: var(--text-dim); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px;
}
.seg button:hover, .pill:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--text); }
.seg button.on, .pill.on { color: var(--accent); border-color: rgba(0, 246, 210, 0.6); background: rgba(0, 246, 210, 0.15); }
.pill { cursor: default; }
.field { display: flex; flex-direction: column; gap: 6px; font: 700 10px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.field input {
  height: 36px; padding: 0 10px; color: var(--text); font: 13px var(--font-mono); text-transform: none; letter-spacing: 0;
  background: var(--field-bg); border: 1px solid var(--border); border-radius: 6px; color-scheme: dark;
}
.field input:focus { border-color: rgba(0, 246, 210, 0.5); outline: none; }
/* the card list (a listbox in place of a native select): one opaque fill for the button and the
   open list, so that, opened, they read as one shape: the button's bottom corners square, the
   list's round */
.dd { position: relative; min-width: 190px; }
.dd-btn {
  width: 100%; height: 36px; padding: 0 30px 0 10px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text); font: 13px var(--font-mono); text-transform: none; letter-spacing: 0;
  background: var(--field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2300f6d2' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;
  border: 1px solid var(--border); border-radius: 6px;
}
.dd-btn:focus-visible { outline: none; border-color: rgba(0, 246, 210, 0.5); }
.dd.open .dd-btn {
  border-color: rgba(0, 246, 210, 0.5); border-bottom-color: transparent; border-radius: 6px 6px 0 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 5l4-4 4 4' fill='none' stroke='%2300f6d2' stroke-width='1.5'/%3E%3C/svg%3E");
}
.dd-list {
  position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: 30; margin: 0; padding: 2px 0 6px; list-style: none;
  max-height: 300px; overflow-y: auto; color-scheme: dark;
  background: var(--field-bg); border: 1px solid rgba(0, 246, 210, 0.5); border-top: 0; border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  /* the shadow only below and beside: above, it fell on the button and drew a seam */
  clip-path: inset(0 -40px -40px -40px);
}
.dd-list [role="option"] { padding: 7px 10px 7px 20px; font: 13px var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.dd-list [role="option"].active { background: rgba(0, 246, 210, 0.12); color: var(--text); }
.dd-list [role="option"][aria-selected="true"] { color: var(--accent); }
/* scrolling boxes (wide tables, code, the card list): a thin accent bar, no track, no arrows */
.dd-list::-webkit-scrollbar, .table-wrap::-webkit-scrollbar, .code pre::-webkit-scrollbar, .doc-obj::-webkit-scrollbar { width: 4px; height: 4px; }
.dd-list::-webkit-scrollbar-track, .dd-list::-webkit-scrollbar-corner,
.table-wrap::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-corner,
.code pre::-webkit-scrollbar-track, .code pre::-webkit-scrollbar-corner,
.doc-obj::-webkit-scrollbar-track, .doc-obj::-webkit-scrollbar-corner { background: transparent; }
.dd-list::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb, .code pre::-webkit-scrollbar-thumb, .doc-obj::-webkit-scrollbar-thumb { background: rgba(0, 246, 210, 0.45); border-radius: 2px; }
.table-wrap::-webkit-scrollbar-thumb:hover, .code pre::-webkit-scrollbar-thumb:hover { background: rgba(0, 246, 210, 0.7); }
.dd-list::-webkit-scrollbar-button, .table-wrap::-webkit-scrollbar-button, .code pre::-webkit-scrollbar-button, .doc-obj::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports (-moz-appearance: none) { .dd-list, .table-wrap, .code pre, .doc-obj { scrollbar-width: thin; scrollbar-color: rgba(0, 246, 210, 0.45) transparent; } }
.dd-group { padding: 8px 10px 3px; font: 700 10px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.calc-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }

.empty { color: var(--muted); font: 12px var(--font-mono); padding: 24px 0; text-align: center; }
.err { color: var(--color-red); }
.foot {
  max-width: var(--page-width); margin: 0 auto; padding: 22px var(--page-padding-x) 30px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; justify-content: center;
  font: 700 11px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); text-decoration: none; }
.foot .dim { font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--muted2); }
.pill-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
  font: 700 11px var(--font-mono); letter-spacing: 0.02em; text-transform: none;
  color: var(--accent); border: 1px solid rgba(0, 246, 210, 0.5); background: rgba(0, 246, 210, 0.12);
}
.pill-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.pill-status.demo { color: var(--color-yellow); border-color: rgba(244, 206, 74, 0.5); background: rgba(244, 206, 74, 0.1); }
.pill-status.demo i { background: var(--color-yellow); box-shadow: 0 0 6px var(--color-yellow); }
.pill-status.off { color: var(--muted); border-color: var(--border); background: transparent; }
.pill-status.off i { background: var(--muted2); box-shadow: none; }

/* donut + block times, as on the explorer's mining page */
.donut-wrap { display: grid; grid-template-columns: 180px 1fr; gap: 20px 28px; align-items: center; }
.donut { width: 180px; height: 180px; display: block; }
.donut .total { font: 700 26px var(--font-mono); fill: var(--text); }
.donut .sub { font: 10px var(--font-mono); fill: var(--muted); letter-spacing: 0.06em; }
/* one grid for all rows, sized by content: pool, blocks and share stay next to each other */
.legend-rows { display: grid; grid-template-columns: 10px auto auto auto; justify-content: start; align-items: center; gap: 10px 14px; font: 12px var(--font-mono); }
.legend-row { display: contents; }
.legend-row i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.legend-row b { color: var(--text); font-weight: 700; }
.legend-row .n { color: var(--muted); text-align: right; }
.legend-row .p { color: var(--text-dim); text-align: right; }
.bars-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; font: 700 10px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; }
.bars-head > span:last-child { font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
.bars-key { display: flex; gap: 14px; margin-left: auto; font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
.bars-key span { display: inline-flex; align-items: center; gap: 5px; }
.bars-key i { width: 9px; height: 9px; border-radius: 2px; opacity: 0.75; }
.bars-key i.line { width: 12px; height: 0; border-radius: 0; border-top: 1px solid var(--accent); opacity: 0.6; }
.bars-foot { display: flex; justify-content: space-between; margin-top: 4px; font: 10px var(--font-mono); color: var(--muted); }
.bars { width: 100%; height: 104px; display: block; }
.bars text { font: 10px var(--font-mono); fill: var(--muted); }
.bars .target { stroke: var(--accent); stroke-opacity: .6; }


@media (max-width: 1080px) {
  .grid2 { grid-template-columns: 1fr; }
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
}
/* One header for the pool and the explorer, so switching sites does not move it. On one row
   (wide screens) the brand and the search have the same sizes on both: the brand is as wide as
   "BumbleBeam Explorer", the search width depends on the window only, leaving room for the
   pool's longest menu (with My stats). Narrower, the header wraps: menu and search get rows. */
@media (min-width: 1181px) {
  .brand { flex: none; width: 236px; }
  .search { flex: none; width: clamp(160px, calc(min(100vw - 2 * var(--page-padding-x), var(--page-width)) - 960px), 380px); }
}
@media (max-width: 1180px) {
  .top-row { flex-wrap: wrap; height: auto; padding: 12px 0; gap: 12px; }
  .search { order: 3; flex: 1 1 100%; }
  /* the menu takes its own full-width row and fits, no sideways scroll */
  .main-nav { order: 2; flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; justify-content: space-between; }
}
@media (max-width: 560px) {
  .main-nav a { padding: 8px 8px; font-size: 12px; }
  .tile .v { font-size: 18px; }
  .panel { padding: 12px; }
  .table-wrap { margin: 0 -12px; padding: 0 12px; }
}

/* grid/flex children must be allowed to shrink below their tables' width; tables scroll inside */
.grid2 > *, .top-row > *, .panel, main, .steps > *, .stack > *, .step > *, .row > * { min-width: 0; }
.code pre { min-width: 0; overflow-x: auto; }
.main-nav { max-width: 100%; }
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page-head .btn { padding: 6px 10px; }
  .panel-meta { margin-left: 0; }
  .main-nav { gap: 0; }
  .main-nav a { padding: 8px 3px; font-size: 11px; letter-spacing: 0; }
  .step .field { min-width: 0 !important; flex-basis: 100% !important; }
  .addr { flex-wrap: wrap; }
}

/* chart range switch in panel heads */
.seg.range button { padding: 3px 8px; font-size: 10px; }

/* API page: API.md rendered from GitHub */
.md { font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.md h2, .md h3, .md h4 { color: var(--text); font: 700 12px var(--font-mono); letter-spacing: 0.04em; margin: 26px 0 10px; }
.md h2 { font-size: 15px; margin-top: 4px; }
.md h3 { font-size: 13px; padding-top: 14px; border-top: 1px solid var(--border-dim); }
.md p { margin: 0 0 12px; }
.md ul, .md ol { margin: 0 0 12px; padding-left: 20px; }
.md li { margin: 0 0 6px; }
.md b { color: var(--text); }
.md code { font: 12px var(--font-mono); color: var(--text); background: rgba(255, 255, 255, 0.06); border-radius: 4px; padding: 1px 4px; }
.md pre { margin: 0 0 14px; padding: 12px 14px; overflow-x: auto; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border-dim); border-radius: 6px; }
.md pre code { background: none; padding: 0; font-size: 11.5px; line-height: 1.55; white-space: pre; }
.md .table-wrap { margin-bottom: 14px; }
.md h3 code { font-size: inherit; color: var(--accent); background: none; padding: 0; }

/* phones (below the width where the menu and the button share one row): Start mining leaves
   the menu for the logo's row */
@media (max-width: 700px) {
  .top-row .cta-top { display: inline-flex; order: 1; margin-left: auto; padding: 6px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; }
  .main-nav a.nav-cta { display: none; }
}

/* copy buttons keep one width for "copy", "copied" and "failed" (monospace, 7ch), so the text
   next to them does not jump */
.btn[data-copy] { flex: none; justify-content: center; min-width: calc(7ch + 18px); }

/* the product name after the logo: "BumbleBeam Pool", "BumbleBeam Explorer" */
.word .sub-word { font-style: normal; font-weight: 400; color: var(--muted); font-size: 0.8em; margin-left: 4px; }
.kernels summary { cursor: pointer; color: var(--accent); }
.kernels[open] summary { margin-bottom: 6px; }
.kernels div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }

/* chart labels stay readable over the bars */
.bars text { paint-order: stroke; stroke: rgba(4, 37, 72, 0.85); stroke-width: 3px; stroke-linejoin: round; }
/* documentation tables wrap their text: no sideways scrolling on the API pages */
.md table td, .md table th { white-space: normal; overflow-wrap: break-word; }
/* code in tables breaks only where the renderer allows it (after / ? & =), never mid-word */
.md table td code { white-space: normal; overflow-wrap: normal; }