/*!
 * Rabid Pool -- shared chart & elevation design tokens (Phase 8A)
 *
 * Loaded on every coin page (XBT, BCH, ...). This file adds NEW custom
 * properties and a few not-yet-used utility classes only -- it makes no
 * visual change to any existing component. Later phases (8B+) build the
 * real sparkline / expanded-chart components on top of these tokens.
 *
 * Design ownership: visual direction comes from the owner/ChatGPT, not
 * invented here. These tokens implement the agreed direction (premium
 * industrial control system, restrained depth, no glassmorphism, no
 * neon) without hardcoding a coin's accent color -- every page already
 * defines --red (XBT) or --bchg (BCH) in its own :root block; this file
 * only adds a generic --rc-accent alias that each page points at its own
 * color (one line added to that page's existing :root, see Phase 8A
 * report), so a shared component always inherits the right coin accent.
 */
:root{
  /* panel elevation / depth -- restrained shadows, not glassmorphism */
  --rc-elev-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 16px rgba(0,0,0,.30);
  --rc-elev-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 28px rgba(0,0,0,.40);
  --rc-top-highlight: rgba(255,255,255,.06);   /* subtle top-edge highlight */
  --rc-bottom-shade: rgba(0,0,0,.35);          /* slightly darker lower edge */

  /* pressed / selected state (for range tabs, segmented controls, etc.) */
  --rc-pressed-bg: var(--panel-2);
  --rc-pressed-shadow: inset 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px var(--line-2);

  /* chart surface tokens -- consumed by Phase 8B's chart components */
  --rc-chart-bg: var(--panel);
  --rc-chart-grid: var(--line);
  --rc-chart-axis: var(--ink-3);
  --rc-chart-crosshair: var(--ink-2);

  /* data confidence / status */
  --rc-low-confidence: var(--ink-3);   /* faded/dashed treatment for low n_eff points */
  --rc-live: var(--green);
  --rc-stale: var(--gold);             /* stale-cache-served-anyway indicator */
  --rc-gap: var(--line-2);             /* null/gap break in a series */

  /* ======================================================================
     3D dashboard pass (Job 3) -- depth system.
     Four levels, restrained: chassis -> section plate -> raised module ->
     recessed display window, plus a small illuminated/active state. Each
     level is built from the PAGE's own existing palette tokens (--panel,
     --line, --bg, --ink) -- never a new hue, never glassmorphism (no
     backdrop-filter/blur anywhere here), never a whole-element glow. The
     "3D" comes entirely from directional gradient + layered shadow, which
     is what makes it read as physical material instead of a flat card with
     a border. Target: futuristic mining console / ASIC control panel, not
     AI-SaaS, not neon.
     ====================================================================== */

  /* Level 1 -- section plate (a whole section's own plane, distinct from
     the cards sitting inside it). Strengthened (correction pass 2): the
     first pass at these values read too close to the existing flat panel
     at normal viewing size -- the visible difference must survive a
     screenshot, not just a pixel-peep. */
  --rc-plate-bg: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 40%, rgba(0,0,0,.1) 100%), var(--panel);
  --rc-plate-border: rgba(255,255,255,.07);
  --rc-plate-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 22px 44px rgba(0,0,0,.42),
    0 2px 5px rgba(0,0,0,.6);
  --rc-plate-radius: 13px;

  /* Level 2 -- raised module (the six primary stat cards: a physical unit
     mounted to the section plate). Brighter top/left edge, darker
     bottom/right, a contact shadow underneath so it visibly sits ABOVE the
     plate rather than being flush with it. */
  --rc-module-bg: linear-gradient(152deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.015) 30%, rgba(0,0,0,.22) 100%), var(--panel);
  --rc-module-border-top: rgba(255,255,255,.20);
  --rc-module-border-side: rgba(255,255,255,.05);
  --rc-module-border-bottom: rgba(0,0,0,.7);
  --rc-module-shadow:
    0 1px 0 rgba(255,255,255,.09) inset,
    0 -10px 18px rgba(0,0,0,.34) inset,
    0 14px 28px rgba(0,0,0,.44),
    0 3px 8px rgba(0,0,0,.6);
  --rc-module-shadow-hover:
    0 1px 0 rgba(255,255,255,.11) inset,
    0 -10px 18px rgba(0,0,0,.3) inset,
    0 20px 38px rgba(0,0,0,.5),
    0 5px 11px rgba(0,0,0,.65);
  --rc-module-shadow-pressed:
    inset 0 5px 12px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(0,0,0,.7);
  --rc-module-radius: 11px;

  /* Level 3 -- recessed display window (sparklines, the main chart plot
     well): the opposite treatment from a module -- sunken INTO the surface
     rather than raised off it, like a screen installed in the console. */
  --rc-recess-bg: var(--bg);
  --rc-recess-shadow:
    inset 0 4px 10px rgba(0,0,0,.65),
    inset 0 -1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(0,0,0,.5);
  --rc-recess-radius: 8px;

  /* Level 4 -- illuminated / active state. Small and local only: a status
     lamp, an illuminated edge, a 1-2px accent reflection. Never a whole-
     card glow, never a giant neon border. */
  --rc-lamp-size: 7px;
}

/* ---- Elevation / pressed-state utilities ------------------------------
   Not applied to any existing element yet. Available starting Phase 8B. */
.rc-panel-elevated{
  box-shadow: var(--rc-elev-1);
  border-top: 1px solid var(--rc-top-highlight);
  border-bottom: 1px solid var(--rc-bottom-shade);
}
.rc-panel-elevated-2{
  box-shadow: var(--rc-elev-2);
  border-top: 1px solid var(--rc-top-highlight);
  border-bottom: 1px solid var(--rc-bottom-shade);
}
.rc-pressed{
  background: var(--rc-pressed-bg);
  box-shadow: var(--rc-pressed-shadow);
}

/* ---- Depth utilities (Job 3) -------------------------------------------
   Applied directly in each page's own <style> to the elements that already
   exist (.sec-h + its section wrapper, .stat, .panel, .dgrid, .rc-chart-*)
   rather than introducing parallel markup -- see each page's own comments
   at the point of use for exactly which existing class picked these up. */
.rc-plate{
  background: var(--rc-plate-bg);
  border: 1px solid var(--rc-plate-border);
  border-radius: var(--rc-plate-radius);
  box-shadow: var(--rc-plate-shadow);
}
.rc-module{
  position: relative;
  background: var(--rc-module-bg);
  border-top: 1px solid var(--rc-module-border-top);
  border-right: 1px solid var(--rc-module-border-side);
  border-bottom: 1px solid var(--rc-module-border-bottom);
  border-left: 1px solid var(--rc-module-border-side);
  border-radius: var(--rc-module-radius);
  box-shadow: var(--rc-module-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.rc-module.rc-module-interactive{ cursor: pointer; }
.rc-module.rc-module-interactive:hover{ box-shadow: var(--rc-module-shadow-hover); transform: translateY(-1px); }
.rc-module.rc-module-interactive:active{ box-shadow: var(--rc-module-shadow-pressed); transform: translateY(0); }
.rc-recess{
  background: var(--rc-recess-bg);
  border-radius: var(--rc-recess-radius);
  box-shadow: var(--rc-recess-shadow);
}
/* Small illuminated status lamp -- LIVE/ACTIVE/selected states. A local dot
   with a restrained glow, never the whole element. */
.rc-lamp{
  display: inline-block; width: var(--rc-lamp-size); height: var(--rc-lamp-size);
  border-radius: 50%; background: var(--rc-live);
  box-shadow: 0 0 4px var(--rc-live), 0 0 1px rgba(255,255,255,.4) inset;
}
.rc-lamp.mute{ background: var(--ink-3); box-shadow: none; }
.rc-lamp.stale{ background: var(--rc-stale); box-shadow: 0 0 4px var(--rc-stale); }

@media (prefers-reduced-motion: reduce){
  .rc-module{ transition: none !important; }
}

/* ---- Chart shell + uPlot dark-theme overrides -------------------------
   Minimal, not referenced by any element yet. uPlot's own uPlot.min.css
   (vendor/uPlot-1.6.32.min.css) is loaded first; this just re-themes its
   grid/axis colors to the pool's dark palette for when charts are built. */
.rc-chart{
  background: var(--rc-chart-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.rc-chart .u-grid{ stroke: var(--rc-chart-grid); }
.rc-chart .u-axis{ color: var(--rc-chart-axis); }

/* ---- Live / stale status dot (for later cache-freshness badges) ------- */
.rc-status-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; vertical-align:middle; }
.rc-status-dot.live{ background: var(--rc-live); }
.rc-status-dot.stale{ background: var(--rc-stale); }
.rc-status-dot.mute{ background: var(--ink-3); } /* Phase 8C: "NO RECENT SHARES" / "NO HISTORY" */

/* ---- Phase 8A self-test scaffold ---------------------------------------
   Used ONLY by RabidCharts.selfTest() (rabid-pool-charts.js) to prove the
   self-hosted uPlot vendor file actually renders a chart. Positioned
   off-canvas (not display:none) so uPlot's real size/layout math runs;
   never visible to a real visitor and removed again immediately after
   the test completes. */
#rcSelfTestChart{ position:absolute; left:-9999px; top:-9999px; width:120px; height:60px; }

/* =========================================================================
   Phase 8B -- sparkline (SVG) + detailed chart panel (uPlot)
   ONE implementation, shared by every page that loads this file. Nothing
   here is wired into My Stats yet -- these classes are only exercised by
   the isolated test fixture (chart-test.html) until Phase 8C/8D.
   ========================================================================= */

/* ---- Sparkline (lightweight inline SVG, no axes, tiny DOM) ------------ */
.rc-spark{
  display:block; width:100%; height:100%;
  overflow:visible; /* so a last-point dot at the edge isn't clipped */
}
.rc-spark-line{
  fill:none;
  stroke:var(--rc-accent);
  /* Job 2: thicker, clearly visible line -- these are meant to read as a
     mini instrument trace now, not a decorative hairline. */
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke; /* crisp stroke width at any container size */
}
.rc-spark-line.rc-spark-step{ stroke-linejoin:miter; } /* crisp corners on a step chart -- never rounded like the smoothed hashrate line */
.rc-spark-dot{ fill:var(--rc-accent); }
.rc-spark-dot.single{ stroke:none; } /* an isolated one-point segment (no neighbor to connect to) */
/* Job 2/4: the live/latest point gets a small controlled illumination --
   a tiny instrument light, restrained (never a whole-card glow). */
.rc-spark-dot-live{
  stroke:var(--rc-accent); stroke-width:4; stroke-opacity:.22; fill:var(--rc-accent);
}
/* Job 2: restrained reference gridline at the floor of the plotted range. */
.rc-spark-grid{
  stroke:var(--line); stroke-width:1; stroke-dasharray:2 3; vector-effect:non-scaling-stroke; opacity:.6;
}
.rc-spark-empty{
  stroke:var(--line-2);
  stroke-width:1;
  stroke-dasharray:2 3;
  vector-effect:non-scaling-stroke;
}
a.rc-spark-activate, .rc-spark-activate{
  display:block; width:100%; height:100%; padding:0; margin:0;
  background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.rc-spark-activate:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px; border-radius:4px;
}

/* ---- Detail chart panel: inline instrumentation panel, never a modal --
   Job 4 (3D dashboard pass): redesigned as a real instrument housing --
   raised outer shell (rc-module treatment) > toolbar/control rail >
   recessed plot well (.rc-chart-host, below) > telemetry rail
   (.rc-chart-summary, below). Never a modal, mounted inline exactly as
   before. */
.rc-chart-panel{
  padding:18px 18px 16px;
  border-radius:var(--rc-module-radius);
  background:var(--rc-module-bg);
  border-top:1px solid var(--rc-module-border-top);
  border-right:1px solid var(--rc-module-border-side);
  border-bottom:1px solid var(--rc-module-border-bottom);
  border-left:1px solid var(--rc-module-border-side);
  box-shadow:var(--rc-module-shadow);
  display:flex; flex-direction:column; gap:14px;
}
.rc-chart-panel-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px;
}
.rc-chart-panel-title{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);
}
/* Job 4: the range toolbar (Current/1D/7D/30D/All Time) reads as a row of
   physical controls -- selected = pressed into the surface, unselected =
   slightly raised, matching the mode-selector treatment (Job 5). Scoped to
   inside the chart panel so it doesn't affect any other .seg control on the
   page (e.g. the PPLNS/SOLO mode selector styles itself, see each page's
   own <style>). */
.rc-chart-panel-controls .seg{
  background:var(--rc-recess-bg); border:1px solid var(--line-2); box-shadow:var(--rc-recess-shadow);
  padding:3px; border-radius:8px;
}
.rc-chart-panel-controls .seg button{
  border-radius:6px; background:var(--panel-2);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 1px 2px rgba(0,0,0,.3);
  transition:box-shadow .12s ease, background-color .12s ease, color .12s ease;
}
.rc-chart-panel-controls .seg button[aria-pressed=true]{
  background:var(--line-2);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(0,0,0,.6);
}
/* Phase 8C: "LIVE <value>" badge, inserted next to the title by the page
   (never by the chart engine itself -- see detailChart's own docs). Kept
   visually distinct from the plotted historical series it sits beside. */
.rc-chart-live-badge{
  font-size:11px; letter-spacing:.04em; color:var(--rc-live);
  background:rgba(32,217,132,.10); border:1px solid rgba(32,217,132,.28);
  border-radius:5px; padding:2px 7px; margin-left:8px;
}
.rc-chart-panel-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rc-chart-close{
  width:28px; height:28px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-2); border-radius:6px;
  color:var(--ink-2); font-size:15px; line-height:1; cursor:pointer;
}
.rc-chart-close:hover{ background:var(--panel-2); color:var(--ink); }

.rc-chart-status{
  /* Job 5 (visual acceptance correction): range/history-availability status
     text was too dim to read comfortably -- bumped from ink-3 to ink-2 and
     11.5px to 12px. Still restrained, not a headline size. */
  font-family:var(--mono); font-size:12px; color:var(--ink-2);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-height:14px;
}
.rc-chart-status .sep{ opacity:.5; }
.rc-chart-status .stale-note{ color:var(--rc-stale); }

/* Job 4: the plot well is a RECESSED display -- sunk into the housing
   above, like a screen installed in the console, rather than a plain
   bordered box sitting flush with everything else. */
.rc-chart-host{
  position:relative;
  background:var(--rc-recess-bg);
  border-radius:var(--rc-recess-radius);
  box-shadow:var(--rc-recess-shadow);
  min-height:220px;
}
.rc-chart-host .u-wrap{ padding:10px 6px 6px; }
.rc-chart-msg{
  /* Job 5: same readability bump as .rc-chart-status -- this is the "no
     history for this range" / loading / error text inside the chart host. */
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px; font-family:var(--mono); font-size:13px; color:var(--ink-2);
}
.rc-chart-msg.error{ color:var(--red); }
.rc-chart-msg button{
  font:inherit; font-family:var(--mono); font-size:11.5px; margin-left:8px;
  background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink);
  border-radius:6px; padding:4px 10px; cursor:pointer;
}
.rc-chart-msg button:hover{ background:var(--line-2); }

/* Job 4: "a compact telemetry rail, not loose text scattered under the
   chart" -- a recessed strip with a fine divider between each stat instead
   of a bare CSS grid with no visual grouping. */
.rc-chart-summary{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  background:var(--rc-recess-bg); border-radius:var(--rc-recess-radius); box-shadow:var(--rc-recess-shadow);
  margin:0; padding:10px 0;
}
.rc-chart-summary > div{ padding:0 14px; border-left:1px solid var(--line); }
.rc-chart-summary > div:first-child{ border-left:none; }
.rc-chart-summary dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:0 0 3px; }
.rc-chart-summary dd{ margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); font-size:14.5px; }
@media (max-width:640px){
  .rc-chart-summary{ grid-template-columns:repeat(2,1fr); }
  .rc-chart-summary > div{ border-left:none; border-top:1px solid var(--line); padding:8px 14px 0; margin-top:8px; }
  .rc-chart-summary > div:nth-child(-n+2){ border-top:none; margin-top:0; padding-top:0; }
}

/* Job 5: lowconf note and footnote are still explanatory copy the miner is
   meant to actually read (odds/maturity/history caveats), not decoration --
   bumped from ink-3/11px to ink-2/11.5px for readability. */
.rc-chart-lowconf-note{ font-size:11.5px; color:var(--ink-2); }

/* Phase 8E: static, unobtrusive footnote under a chart panel (e.g. the
   worker-identity note) -- set once at build time, never re-rendered. */
.rc-chart-footnote{
  margin:0; font-size:11.5px; line-height:1.5; color:var(--ink-2);
}

/* ---- Phase 8E: worker table row -- name truncation, default-worker
   labeling, per-row sparkline cell, clickable-row affordance ------------ */
.worker-name-wrap{
  display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:bottom;
}
/* Job 5: default-worker label kept italic/de-emphasized (it's not a real
   firmware-provided name) but bumped from ink-3 to ink-2 -- it was hard to
   read in the worker table at a glance. */
.worker-name-wrap.worker-default .worker-name{ color:var(--ink-2); font-style:italic; font-weight:500; }
.worker-spark-cell{ width:78px; padding-top:6px; padding-bottom:6px; }
.worker-spark{ height:22px; width:70px; }
tr.worker-row{ cursor:pointer; }
tr.worker-row:hover td{ background:rgba(255,255,255,.02); }
tr.worker-row:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; }

/* ---- Job 1 (3D dashboard pass): precision crosshair ---------------------
   uPlot's own default (.u-cursor-x, vendor CSS) is a 1px DASHED line in a
   fixed blue-grey (#607D8B) -- low-contrast enough against this dark
   palette to read as "the cursor doesn't track" even though it IS moving.
   Restyled solid + high-contrast + a very restrained accent glow, matching
   "thin high-contrast line ... subtle accent illumination" from the spec.
   The cursor point (.u-cursor-pt, the highlighted-nearest-data-point dot)
   gets the same restrained glow. Neither is a giant tooltip. */
.rc-chart-host .u-cursor-x{
  border-right-style:solid !important;
  border-right-color:var(--rc-chart-crosshair) !important;
  box-shadow:1px 0 4px rgba(var(--rc-accent-rgb), .35);
}
.rc-chart-host .u-cursor-pt{
  box-shadow:0 0 5px rgba(var(--rc-accent-rgb), .55);
}

/* ---- Job 1: the floating inspector --------------------------------------
   ONE compact, dark, restrained tooltip -- replaces the old event-only
   tooltip. Positioned by updateInspector() in rabid-pool-charts.js (left is
   set inline, clamped so it never runs off the plot edge; a small CSS arrow
   points back at the true cursor x via the --rc-insp-tip-x custom property
   also set inline). Deliberately NOT a giant tooltip: fixed max-width,
   small type, only the fields that exist for this point/metric. */
.rc-inspector{
  position:absolute; top:6px; transform:translateX(-50%);
  min-width:150px; max-width:200px;
  background:var(--rc-recess-bg); border:1px solid var(--line-2); border-radius:7px;
  box-shadow:0 8px 20px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04) inset;
  padding:8px 10px; font-family:var(--mono); font-size:11px; line-height:1.5;
  pointer-events:none; z-index:6;
}
.rc-inspector::before{
  content:""; position:absolute; top:-5px; left:calc(50% + var(--rc-insp-tip-x, 0px));
  width:8px; height:8px; background:var(--rc-recess-bg); border-left:1px solid var(--line-2); border-top:1px solid var(--line-2);
  transform:translateX(-50%) rotate(45deg);
}
.rc-insp-when{
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:5px; padding-bottom:5px; border-bottom:1px solid var(--line);
}
.rc-insp-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; white-space:nowrap; }
.rc-insp-k{ color:var(--ink-3); font-size:10px; letter-spacing:.04em; }
.rc-insp-v{ color:var(--ink); font-variant-numeric:tabular-nums; }
.rc-insp-row.rc-insp-main .rc-insp-v{ color:var(--rc-accent); font-weight:700; }
.rc-insp-row.rc-insp-low .rc-insp-v{ color:var(--rc-stale); }
.rc-insp-note{ color:var(--ink-3); font-style:italic; }
.rc-insp-event{
  margin-top:5px; padding-top:5px; border-top:1px solid var(--line);
  color:var(--rc-live); font-weight:600; letter-spacing:.03em; white-space:normal;
}

@media (prefers-reduced-motion: reduce){
  .rc-chart-panel, .rc-chart-host, .rc-chart-msg, .rc-spark-activate{ transition:none !important; }
}

/* =========================================================================
   Job 6 (3D dashboard pass) -- Recent Rabid Pool block rail. A horizontal
   row of compact physical modules: the live target first (Depth Level 4,
   a restrained illuminated accent), then real pool.blocks entries newest
   first. Shared by XBT and BCH -- each page's own render function (see
   renderBlockRail() in each page's <script>) builds this same markup from
   real pool.blocks / node.height data; nothing here is page-specific.
   ========================================================================= */
.rc-block-rail{
  display:flex; gap:10px; overflow-x:auto; overflow-y:hidden;
  padding:4px 2px 12px; margin:0 -2px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.rc-block-card{
  flex:0 0 auto; width:152px; box-sizing:border-box;
  background:var(--rc-module-bg);
  border-top:1px solid var(--rc-module-border-top);
  border-right:1px solid var(--rc-module-border-side);
  border-bottom:1px solid var(--rc-module-border-bottom);
  border-left:1px solid var(--rc-module-border-side);
  border-radius:var(--rc-module-radius);
  box-shadow:var(--rc-module-shadow);
  padding:12px 13px;
}
.rc-block-card + .rc-block-card{ position:relative; }
/* A restrained connecting rail between modules -- "sitting on a chain",
   never a heavy line. */
.rc-block-card + .rc-block-card::before{
  content:""; position:absolute; left:-10px; top:50%; width:10px; height:1px;
  background:var(--line-2);
}
.rc-block-live{
  box-shadow:var(--rc-module-shadow), 0 0 0 1px rgba(var(--rc-accent-rgb),.5), 0 0 10px rgba(var(--rc-accent-rgb),.25);
}
.rc-block-live .rc-block-k{ color:var(--rc-accent); }
.rc-block-k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:5px; margin-bottom:6px;
}
.rc-block-height{ font-family:var(--mono); font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.2px; }
.rc-block-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-family:var(--mono); font-size:11px; margin-top:5px; white-space:nowrap;
}
.rc-block-row .rc-block-lbl{ color:var(--ink-3); }
.rc-block-row .rc-block-val{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
.rc-block-tag{
  display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  padding:2px 6px; border-radius:5px; margin-top:8px;
}
.rc-block-tag.mature{ background:rgba(32,217,132,.14); color:var(--rc-live); }
.rc-block-tag.immature{ background:rgba(215,169,40,.14); color:var(--rc-stale); }
.rc-block-tag.orphan{ background:rgba(225,45,50,.14); color:var(--red); }
.rc-block-mode{ font-size:9.5px; opacity:.85; margin-left:5px; }
.rc-block-empty{
  font-family:var(--mono); font-size:12.5px; color:var(--ink-3); padding:20px 4px;
}