/* neb-ui-extra.css: block maturity cell + totals strip (Blocks), round details (index),
 * reward split (CoinInfos), extra tiles (YourStats). Built on the Material Dashboard tokens;
 * dark mode follows body.dark-version like the rest of the site. 2026-11-11 */

:root {
  --neb-accent: #FF6B35;            /* NEB orange: maturing */
  --neb-ok: #43A047;                /* mature / credited */
  --neb-bad: #E53935;               /* orphaned */
  --neb-track: #E9ECEF;
  --neb-ink: #344767;               /* Material Dashboard text-dark */
  --neb-muted: #7B809A;             /* Material Dashboard text-secondary */
  --neb-line: #EEF0F3;
}
body.dark-version {
  --neb-track: #2B3245;
  --neb-ink: #E9ECEF;
  --neb-muted: #A0A6BC;
  --neb-line: rgba(255, 255, 255, .08);
}

.neb-num { font-variant-numeric: tabular-nums; }

/* ---- status pill ---- */
.neb-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.neb-pill::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.neb-pill--maturing { color: #C2410C; background: rgba(255, 107, 53, .12); }
.neb-pill--mature   { color: #2E7D32; background: rgba(67, 160, 71, .12); }
.neb-pill--orphaned { color: #C62828; background: rgba(229, 57, 53, .12); }
body.dark-version .neb-pill--maturing { color: #FF9A6E; background: rgba(255, 107, 53, .18); }
body.dark-version .neb-pill--mature   { color: #81C784; background: rgba(67, 160, 71, .18); }
body.dark-version .neb-pill--orphaned { color: #EF9A9A; background: rgba(229, 57, 53, .2); }

/* ---- block maturity: pill on top, a thin track with a tick at the payable point below ---- */
.neb-mat { display: grid; row-gap: .35rem; min-width: 14.5rem; max-width: 17rem; }
.neb-mat-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.neb-mat-track { position: relative; height: .3rem; border-radius: 999px; background: var(--neb-track); overflow: hidden; }
.neb-mat-track > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--neb-accent); }
.neb-mat-meta { font-size: .72rem; color: var(--neb-muted); white-space: nowrap; }
.neb-mat-meta b { color: var(--neb-ink); font-weight: 600; }

/* ---- totals strip above the blocks table ---- */
.neb-totals { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; padding: .25rem 0 1rem; }
.neb-total { min-width: 9rem; }
.neb-total-label { font-size: .78rem; color: var(--neb-muted); margin: 0; }
.neb-total-value { font-size: 1.35rem; font-weight: 700; color: var(--neb-ink); line-height: 1.25; margin: .1rem 0; font-variant-numeric: tabular-nums; }
.neb-total-value small { font-size: .8rem; font-weight: 600; color: var(--neb-muted); margin-left: .2rem; }
.neb-total-detail { font-size: .75rem; color: var(--neb-muted); margin: 0; }

/* ---- label / value list (round details on index) ---- */
.neb-kv { list-style: none; margin: 0; padding: 0; }
.neb-kv li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .42rem 0; border-top: 1px solid var(--neb-line); font-size: .82rem; }
.neb-kv li:first-child { border-top: 0; }
.neb-kv span { color: var(--neb-muted); }
.neb-kv b { color: var(--neb-ink); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ---- reward split (CoinInfos) ---- */
.neb-split-bar { display: flex; height: .9rem; border-radius: 999px; overflow: hidden; background: var(--neb-track); margin: .75rem 0 1rem; }
.neb-split-bar > span { display: block; height: 100%; }
.neb-split-bar > span + span { box-shadow: inset 2px 0 0 #fff; }
body.dark-version .neb-split-bar > span + span { box-shadow: inset 2px 0 0 #1a2035; }
.neb-split-miners  { background: var(--neb-accent); }
.neb-split-fee     { background: #344767; }
.neb-split-project { background: #9AA3B5; }
body.dark-version .neb-split-fee { background: #E9ECEF; }
.neb-split-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem 1.5rem; }
.neb-split-legend .k { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--neb-muted); margin: 0; }
.neb-split-legend .k i { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
.neb-split-legend .v { font-size: 1.05rem; font-weight: 700; color: var(--neb-ink); margin: .1rem 0 0; font-variant-numeric: tabular-nums; }
.neb-split-legend .v small { font-size: .78rem; font-weight: 600; color: var(--neb-muted); margin-left: .25rem; }

/* average-effort footer row of the blocks table: readable in dark mode too */
body.dark-version #blockListTable tr.bg-gray-100 { background: rgba(255, 255, 255, .04) !important; }
body.dark-version #blockListTable tr.bg-gray-100 td { color: var(--neb-ink); }

/* round effort meter on index (replaces the donut, 2026-11-11): scale 0-200 %, tick at 100 % */
.neb-meter { position: relative; height: .75rem; border-radius: 999px; background: var(--neb-track); overflow: hidden; }
.neb-meter > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: #1A73E8; transition: width .6s ease; }
.neb-meter.is-over > i { background: var(--neb-accent); }
.neb-meter-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; opacity: .9; }
body.dark-version .neb-meter-mark { background: #1a2035; }
.neb-meter-scale { display: flex; justify-content: space-between; gap: .5rem; margin-top: .35rem; font-size: .72rem; color: var(--neb-muted); }
.neb-meter-scale span:nth-child(2) { text-align: center; }
@media (prefers-reduced-motion: reduce) { .neb-meter > i { transition: none; } }
/* line chart that fills its (stretched) card */
.neb-chart-fill { position: relative; flex: 1 1 auto; min-height: 300px; }