/* bc3.online — formspråk enligt godkänt designförslag (fas 1).
   Mörkt är default (miner-publik); ljust läge följer systemet och kan togglas. */

:root {
  --bg: #14110F;
  --surface: #1D1916;
  --surface2: #26201B;
  --line: #37302A;
  --text: #F0EAE2;
  --muted: #A2978C;
  --faint: #6E645B;
  --accent: #E07A3F;
  --accent-ink: #1A120C;
  --ok: #56C271;
  --warn: #E2B04C;
  --bad: #D9524B;
  /* Guld: stapeln för den share som vann ett block (graferna). */
  --gold: #F3C14B;
  /* Länkfärg: accenten duger mot mörkt (6,35:1) men är för ljus mot
     ljus bakgrund (3,7:1). Därför ett eget token per tema. */
  --link: #E07A3F;
  --radius: 10px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F7F3EE;
    --surface: #FFFFFF;
    --surface2: #EFE9E1;
    --line: #DFD6CA;
    --text: #221B15;
    --muted: #6E6259;
    --faint: #9C8F84;
    --accent: #C95F27;
    --accent-ink: #FFF6EF;
    --ok: #2E9E52;
    --warn: #B07E1D;
    --bad: #B8342D;
    --gold: #B8860B;
    --link: #A44A18;
  }
}
:root[data-theme="light"] {
  --bg: #F7F3EE;
  --surface: #FFFFFF;
  --surface2: #EFE9E1;
  --line: #DFD6CA;
  --text: #221B15;
  --muted: #6E6259;
  --faint: #9C8F84;
  --accent: #C95F27;
  --accent-ink: #FFF6EF;
  --ok: #2E9E52;
  --warn: #B07E1D;
  --bad: #B8342D;
  --gold: #B8860B;
  --link: #A44A18;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Sidan ska aldrig scrolla i sidled — breda element (tabeller, kod,
     tidslinjen) scrollar i sina egna behållare i stället. */
  overflow-x: hidden;
  max-width: 100vw;
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
/* Grid- och flex-barn krymper inte under sitt innehåll utan min-width: 0,
   vilket är den vanligaste orsaken till horisontell scroll på mobil. */
.grid > *, .card, section, main { min-width: 0; }
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
}

/* Mobil: header och navigering får radbryta i stället för att klippas. */
@media (max-width: 720px) {
  header.site { flex-wrap: wrap; gap: 10px; }
  .navlinks {
    width: 100%; gap: 14px; flex-wrap: wrap;
    font-size: 13.5px;
  }
  .navlinks a { font-size: 13.5px; }
  .hero { padding: 32px 0 28px; }
  h1 { font-size: clamp(26px, 7vw, 34px); }
  .hero p.lead { font-size: 16px; }
  .lb-value { font-size: 17px; }
}

h1, h2, h3, .btn, .navlinks a, .stat-title, .eyebrow {
  font-family: 'Chakra Petch', sans-serif;
}
h1 { font-weight: 700; font-size: clamp(30px, 5vw, 46px); line-height: 1.1; margin: 0; text-wrap: balance; }
h2 { font-weight: 600; font-size: 24px; margin: 0 0 8px; }
h3 { font-weight: 600; font-size: 16px; margin: 0; }
/* Stycken tar hela bredden. De hade ett tak på 64 tecken för läsbarhetens
   skull, men under ett kortraster som fyller raden såg taket ut som ett fel:
   texten slutade två tredjedelar in. Hero-ingressen har sitt eget tak. */
p { margin: 0; }
.muted { color: var(--muted); }
code, .mono {
  font-family: 'Spline Sans Mono', monospace;
  font-variant-numeric: tabular-nums;
}
code { background: var(--surface2); border-radius: 4px; padding: 1px 6px; font-size: 0.92em; }

/* Brödtextlänkar. Utan detta ärver de webbläsarens standardfärger, och
   :visited-lila (#551A8B) är nästan oläsligt mot mörk bakgrund.
   :visited måste sättas explicit — webbläsare tillåter bara färgändringar
   där, och utan regeln vinner standardfärgen. */
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: var(--link); }
a:hover { color: color-mix(in srgb, var(--link) 70%, var(--text)); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Komponenter med egen färg måste upprepa den för :visited: a:visited har
   högre specificitet (0,1,1) än t.ex. .brand (0,1,0) och skulle annars
   färga om loggan så fort man besökt startsidan. */
.brand, .brand:visited { color: var(--text); text-decoration: none; }
.btn, .btn:visited { color: var(--accent-ink); text-decoration: none; }
.btn.secondary, .btn.secondary:visited { color: var(--accent); }
.navlinks a, .navlinks a:visited { color: var(--muted); text-decoration: none; }
.price-chip, .price-chip:visited { color: var(--text); text-decoration: none; }
footer.site a, footer.site a:visited { color: var(--muted); }

/* Header */
header.site {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand .wordmark { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 22px; }
.brand .wordmark span { font-weight: 500; opacity: .45; }
.navlinks { display: flex; gap: 22px; align-items: center; }
.navlinks a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.navlinks a:hover, .navlinks a.active { color: var(--accent); }
#theme-toggle {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); cursor: pointer; padding: 6px 10px; font-size: 14px;
}

/* Hero */
.hero { padding: 56px 0 40px; display: flex; flex-direction: column; gap: 18px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.hero p.lead { font-size: 18px; color: var(--muted); max-width: 58ch; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.btn {
  display: inline-block; font-weight: 600; font-size: 15px; letter-spacing: .03em;
  background: var(--accent); color: var(--accent-ink); border: none; border-radius: 8px;
  padding: 12px 22px; cursor: pointer; text-decoration: none;
}
.btn.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
/* Ghost: en tyst knapp för sekundära handlingar (Copy, Refresh, Newer/Older,
   Forget this address). Sexton knappar hade klassen men ingen regel fanns,
   så alla ritades som orange primärknappar — "Forget this address" stod som
   det största orange elementet överst på statistiksidan. */
.btn.ghost, .btn.ghost:visited {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
}
.btn.ghost:hover { color: var(--text); border-color: var(--faint); filter: none; }
.btn.ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Heron är en flex-kolumn: en knapp som barn sträcks annars till full bredd. */
.hero > .btn { align-self: flex-start; }

/* Sections & cards */
section { padding: 32px 0; }
.grid { display: grid; gap: 16px; }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Fem rutor pa en rad. Med cols-4:s minmax(200px) hade 5 kort blivit 4+1
   och lamnat ett hal — auto-fit kollapsar bara TOMMA spar. */
.grid.cols-5 { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* Exakt två lika breda kolumner som fyller raden. auto-fit gav tre kolumner
   på breda skärmar, så två kort slutade två tredjedelar in. */
.grid.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .grid.pair { grid-template-columns: 1fr; } }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.card p { font-size: 14.5px; color: var(--muted); }

/* Mjuka mikrointeraktioner (stängs av vid reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  body { transition: background-color .25s ease, color .25s ease; }
  .card { transition: border-color .18s ease, transform .18s ease; }
  .card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); }
  .btn { transition: transform .15s ease, filter .15s ease; }
  .btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
  .tabpane { animation: pane-in .25s ease; }
  @keyframes pane-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
  .stat-value.bump { animation: stat-bump .4s ease; }
  @keyframes stat-bump { 0% { opacity: .35; transform: translateY(5px); } 100% { opacity: 1; } }
  .view { animation: pane-in .25s ease; }
}

/* Stat tiles */
.stat-title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.stat-value { font-family: 'Spline Sans Mono', monospace; font-size: 26px; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 15px; color: var(--muted); }

/* Chart */
#chart-card { overflow-x: hidden; }
.chart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.range-switch { display: flex; gap: 2px; background: var(--surface2); border-radius: 8px; padding: 2px; }
/* Knapparna stylas på behållaren, inte på klassnamnet. Reglerna räknade upp
   .range och .wrange var för sig, och lägesgrafens tredje uppsättning fick
   därför webbläsarens standardknappar tills den lades till på fem rader. */
.range-switch button {
  font-family: 'Chakra Petch', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 5px 12px; border-radius: 6px;
}
.range-switch button:hover { color: var(--text); }
.range-switch button.active { background: var(--accent); color: var(--accent-ink); }
.range-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Laddnings-/tomtillstånd ovanpå grafen — utan detta ritades en tom graf
   med flera månaders tidsaxel innan första datat kom (buggar.md). */
.chart-wrap { position: relative; min-height: 260px; }
.chart-state {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 14px; color: var(--muted);
  background: var(--surface); border-radius: 8px;
}
.chart-state.hidden { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .chart-state { animation: pane-in .2s ease; }
}
/* uPlots egen legend är avstängd (den skrev "Time: — PPLNS: — Solo: — Best
   share: —" och radbröt på mobil). En egen, statisk, med samma tecken som
   grafen ritar: linje, stapel, logga, kvadrat. Men uPlots legend var också
   dess värdevisning vid hover, så värdena följde med när den stängdes av —
   dem visar .charttip nedan i stället. */
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px;
  font-family: 'Spline Sans Mono', monospace; font-size: 12px; color: var(--muted);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
/* Tecknen är gemensamma för legenden och hover-rutan, så en rad i rutan
   ser ut som sin post i legenden. */
.chart-legend i, .charttip .tip-k i { display: inline-block; flex: 0 0 auto; }
.sw-line { width: 18px; height: 2px; background: var(--accent); }
.sw-line.solo { background: var(--text); }
.sw-bar { width: 8px; height: 12px; background: color-mix(in srgb, var(--ok) 50%, transparent); border-top: 2px solid var(--ok); }
.sw-bar.win { background: var(--gold); border-top-color: var(--gold); box-shadow: 0 0 6px color-mix(in srgb, var(--gold) 60%, transparent); }
.sw-ours { width: 12px; height: 12px; background: var(--accent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.sw-other { width: 9px; height: 9px; background: var(--text); border-radius: 2px; }
.sw-tick { width: 2px; height: 8px; background: var(--text); opacity: .6; }
/* Axelrubrikerna ritas av uPlot i canvas; färgerna sätts i JS. */

/* Hover-rutan med värden i graferna (attachValueTip i js/app.js). Den ligger
   i uPlots u.over och positioneras i JS intill pekaren: en rubrikrad med
   bucketens start och längd, sedan en rad per värde med etiketten till
   vänster och värdet till höger. Radbryt hellre än att klippa — rutan får
   aldrig bli bredare än grafen, på en telefon är den det annars. */
.charttip {
  position: absolute; left: 0; top: 0; z-index: 10; pointer-events: none;
  /* max-width sätts i JS: 260 px, eller grafens bredd om den är smalare. */
  width: max-content;
  background: var(--surface2); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  padding: 6px 10px 7px; font-size: 12px; line-height: 1.4; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.charttip.hidden { display: none; }
.charttip .tip-head {
  display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap;
  font-family: 'Spline Sans Mono', monospace; font-weight: 500;
}
.charttip .tip-span, .charttip .tip-sub { color: var(--muted); }
.charttip .tip-span { white-space: nowrap; }
.charttip .tip-sub { display: block; overflow-wrap: anywhere; }
/* Etikett till vänster, värde till höger. Ryms de inte på samma rad (en
   blockrad: "#60,433 · ArgfaMining" och "43 minutes ago") flyttar hela
   värdet ned en rad, högerställt — i stället för att etiketten bryts mitt i. */
.charttip .tip-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  column-gap: 14px; margin-top: 3px;
}
.charttip .tip-head + .tip-row, .charttip .tip-sub + .tip-row { margin-top: 6px; }
.charttip .tip-k { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); overflow-wrap: anywhere; }
.charttip .tip-v { margin-left: auto; font-family: 'Spline Sans Mono', monospace; text-align: right; white-space: nowrap; }
/* Andra raden i ett värde ("0.78% of target"), under det egentliga talet. */
.charttip .tip-subv { flex-basis: 100%; color: var(--muted); font-size: 11px; white-space: normal; }
/* Ett orphanat block i rutan: röd etikett, dämpat tecken. */
.charttip .tip-row.orphaned .tip-k { color: var(--bad); }
.charttip .sw-ours.orphaned { opacity: .45; }
.chart-legend .legend-hint { margin-left: auto; color: var(--faint); font-size: 11px; }

/* Live blocks — nätverkspanel med blocktidslinje och epokförlopp. */
.liveblocks-section { padding-top: 8px; }
.liveblocks {
  gap: 18px; position: relative; overflow: hidden;
  border-top: 2px solid var(--accent);
}
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-live {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted);
}
.lb-live .status-dot { margin: 0; }

.lb-stats {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lb-stats > div {
  background: var(--surface); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.lb-value {
  font-family: 'Spline Sans Mono', monospace; font-size: 19px;
  font-variant-numeric: tabular-nums; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-value .up { color: var(--ok); }
.lb-value .down { color: var(--bad); }
.lb-value .sub { color: var(--muted); font-size: 14px; }
/* Andra raden i en ruta: "in ≈ 34 h" under retarget-siffran. */
.lb-sub { font-size: 12px; color: var(--muted); font-family: 'Spline Sans Mono', monospace; }
/* Poolens och nodens hälsa, under "Live from node". En omstart förklarar ett
   hashrate-hack i grafen; nodens peers säger om vi ser kedjan alls. */
.lb-status { font-size: 12.5px; color: var(--muted); margin: -8px 0 0; max-width: none; }
.lb-status[hidden] { display: none; }
@media (max-width: 900px) { .lb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Epokförlopp: hur långt in i retarget-fönstret vi är och om vi ligger i fas. */
.epoch { display: flex; flex-direction: column; gap: 7px; }
.epoch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.epoch-label {
  font-family: 'Chakra Petch', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
#epoch-status { text-transform: none; letter-spacing: 0; font-weight: 500; }
#epoch-status.behind { color: var(--bad); }
#epoch-status.ahead { color: var(--ok); }
.epoch-count { font-size: 12.5px; color: var(--muted); }
.epoch-bar {
  /* Tjockare och mörkare bakgrund än korten ⇒ fyllningen syns tydligt
     (referensbilden har hög kontrast mellan spår och fyllning). */
  height: 14px; border-radius: 7px; background: var(--bg);
  border: 1px solid var(--line); overflow: hidden; position: relative;
}
/* Markör för var epoken *borde* ligga enligt klockan. */
.epoch-expected {
  position: absolute; top: -2px; bottom: -2px; width: 2px; z-index: 3;
  background: var(--text); opacity: .8; border-radius: 1px;
}
.epoch-expected.hidden { display: none; }
/* Faktiskt förlopp — ALLTID accentfärgad, även när vi ligger efter. Att färga
   om hela baren röd dolde hur långt vi kommit, vilket var hela poängen. */
.epoch-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 2;
  border-radius: 7px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 78%, white), var(--accent));
}
/* Avvikelsen: sträckan mellan faktiskt och förväntat läge. Randig så att den
   läses som "saknas/överskott" och inte som ännu en fylld del. */
.epoch-bar b {
  position: absolute; top: 0; bottom: 0; width: 0; z-index: 1;
  background-color: color-mix(in srgb, var(--bad) 30%, transparent);
  background-image: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--bad) 62%, transparent) 0 4px,
    transparent 4px 8px);
}
.epoch-bar b.ahead {
  background-color: color-mix(in srgb, var(--ok) 30%, transparent);
  background-image: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--ok) 62%, transparent) 0 4px,
    transparent 4px 8px);
}
.epoch-bar b.hidden { display: none; }
.epoch-label { font-size: 12.5px; }
.epoch-count { font-size: 13px; color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .epoch-bar i { transition: width .6s cubic-bezier(.2,.8,.3,1); }
}

/* Block timeline — horisontell, mempool-style, nyaste till vänster.
   Ingen scroll: JS renderar exakt så många kuber som får plats. */
.timeline-wrap { position: relative; }
.timeline {
  display: flex; gap: 12px; overflow: hidden; padding: 6px 2px 12px;
}
/* Kuberna delar bredden lika och fyller hela containern — JS räknar ut hur
   många som får plats, CSS ser till att de inte lämnar en lucka till höger. */
.block-cube {
  flex: 1 1 0; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px 12px; position: relative;
  display: flex; flex-direction: column; gap: 3px;
}
/* Trippellager-motivet som kubens "topp": tre staplade band. */
.block-cube .layers { display: flex; flex-direction: column; gap: 2px; margin-bottom: 7px; }
.block-cube .layers i { display: block; height: 3px; border-radius: 2px; background: var(--faint); }
.block-cube .layers i:nth-child(2) { background: var(--muted); }
.block-cube .height {
  font-family: 'Spline Sans Mono', monospace; font-size: 16.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Höjden är en länk till utforskaren, men ska se ut som ett tal. */
.block-cube .height a, .block-cube .height a:visited { color: inherit; text-decoration: none; }
.block-cube .height a:hover { color: var(--link); }
.block-cube .pool {
  font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .03em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.block-cube .meta { font-size: 11px; color: var(--muted); font-family: 'Spline Sans Mono', monospace; }

/* Våra block: accentfärgade i paletten + läges-märkning (solo/pplns). */
.block-cube.ours {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.block-cube.ours .layers i { background: color-mix(in srgb, var(--accent) 45%, var(--faint)); }
.block-cube.ours .layers i:nth-child(2) { background: var(--accent); }
.block-cube.ours .pool { color: var(--accent); }
.block-cube .modepill {
  position: absolute; top: 8px; right: 8px;
  font-family: 'Chakra Petch', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; padding: 1px 7px;
}

/* Blocket som minas just nu: streckad accentram, avskiljare mot kedjan. */
.block-cube.pending {
  border-style: dashed; border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.block-cube.pending .pool { color: var(--accent); }
.timeline-sep {
  flex: 0 0 1px; align-self: stretch; margin: 4px 2px;
  border-left: 1px dashed var(--faint);
}

@media (prefers-reduced-motion: no-preference) {
  /* Nytt block: glider in från vänster och skjuter kedjan åt höger
     (margin-animationen flyttar syskonen mjukt). */
  .block-cube.arriving { animation: cube-in .6s cubic-bezier(.2,.8,.3,1); }
  @keyframes cube-in {
    from { opacity: 0; margin-left: -144px; transform: translateX(-10px) scale(.94); }
    60%  { opacity: 1; }
    to   { opacity: 1; margin-left: 0; transform: none; }
  }
  .block-cube.leaving { animation: cube-out .3s ease forwards; }
  @keyframes cube-out { to { opacity: 0; transform: scale(.92); } }
  .block-cube.pending .layers i { animation: layer-pulse 1.8s ease-in-out infinite; }
  .block-cube.pending .layers i:nth-child(2) { animation-delay: .3s; }
  .block-cube.pending .layers i:nth-child(3) { animation-delay: .6s; }
  @keyframes layer-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}

/* SPA-vyer */
.hidden { display: none; }
.view.hidden { display: none; }

/* Tabs (PPLNS / Solo) */
.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tab {
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .04em;
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 10px 18px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabpane.hidden { display: none; }
.tabpane { display: flex; flex-direction: column; gap: 18px; }
.endpoint {
  font-family: 'Spline Sans Mono', monospace; font-size: 15px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 16px; overflow-x: auto; white-space: nowrap;
}
.endpoint .label { font-family: 'Chakra Petch', sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-right: 10px; }

/* Best share — värde, procent och stapel på var sin rad så inget bryts mitt i. */
.bestshare-rows { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bestshare { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bestshare .stat-value { font-size: 24px; line-height: 1.15; }
.bestshare-pct { font-size: 12.5px; color: var(--accent); font-variant-numeric: tabular-nums; }
.bestshare .closeness-bar { margin-top: 4px; }

/* "How close is a block?" — staplar mot nätverkstargetet (100 %). */
.closeness { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.closeness-row {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center;
}
.closeness-label { font-size: 12.5px; color: var(--muted); }
.closeness-bar {
  height: 8px; border-radius: 4px; background: var(--surface2);
  overflow: hidden; min-width: 60px;
}
.closeness-bar i {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: var(--accent);
}
.closeness-row.target .closeness-bar i { background: var(--accent); opacity: .5; }
.closeness-val {
  font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Raden behöver minst ~415 px (150 etikett + 60 stapel + ~180 värde + gap),
   men i tvåkolumnsläget är kortet ~310 px brett. Värdet har nowrap och kunde
   inte krympa, så raden sköt ut ur sidan. Under 900 px hamnar stapeln därför
   på egen rad i stället. */
@media (max-width: 900px) {
  .closeness-row { grid-template-columns: minmax(0, 1fr) auto; }
  .closeness-bar { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .closeness-bar i { transition: width .5s cubic-bezier(.2,.8,.3,1); }
}
@media (max-width: 560px) {
  .closeness-row { grid-template-columns: 1fr auto; }
  .closeness-row .closeness-bar { grid-column: 1 / -1; }
}

/* Miners table */
/* min-width: 0 — ett flex-barn har min-width: auto som standard, sa utan
   detta VAXER wrappern med tabellen i stallet for att scrolla, och hela
   sidan far sidoscroll. */
.table-wrap { overflow-x: auto; min-width: 0; }
/* Adressen ar rubriken (ingen trunkerad dubblett, se buggar.md). Den ar 42
   tecken utan blanksteg, sa den maste fa krympa och radbryta — annars
   svammar den over pa smala skarmar. */
.wallet-title { font-size: clamp(20px, 6vw, 34px); overflow-wrap: anywhere; }
table.miners { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.miners th {
  font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
table.miners td {
  font-family: 'Spline Sans Mono', monospace; font-variant-numeric: tabular-nums;
  padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
  vertical-align: top;
}
/* Nowrap är regeln för TAL. Förklarande celler — status, bekräftelser,
   nedräkningen, procent av target — får radbryta i stället (se .cell-sub,
   .state-sub, .winleft-text, .maturity): annars kan tabellen inte krympa
   under sitt innehåll, och sex till åtta kolumner gav sidoscroll på desktop
   med den viktigaste kolumnen utanför kanten. */
table.miners td .cell-sub {
  display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35;
  white-space: normal;
}
/* Under 900 px får allt radbryta hellre än att scrolla. */
@media (max-width: 900px) { table.miners td { white-space: normal; } }
table.miners tr:last-child td { border-bottom: none; }
table.miners td.addr { color: var(--text); }
table.miners td.dim { color: var(--muted); }
/* Lifetime-tabellens blockcell: förkortad hash + lägesmärke (pplns/solo).
   Konturpill som .statuspill — fylld accent når inte 4,5:1 i ljust läge
   för så liten text; --link finns just för att accenten är för ljus där. */
table.miners .hashchip { margin-left: 10px; font-size: 12.5px; }
/* Marginalen sitter på syskonregeln nedan — chipet står numera ensamt i en
   egen Mode-kolumn, och då ska det inte ha något indrag. */
table.miners .modechip {
  display: inline-block; vertical-align: 1px;
  font-family: 'Chakra Petch', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--link);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px; padding: 1px 7px; line-height: 1.6;
}

/* ---------- PPLNS-fönstret: remsan och tabellens nedräkning ---------- */
/* Fönstret är ett SKJUTFÖNSTER med hård kant: en deltagares andel ligger helt
   still ända tills hennes shares når bakkanten, och blir sedan noll. Siffran
   som varnar finns därför inte i andelen utan i avståndet till kanten — det är
   det remsan och stapeln nedan ritar. */
.winstrip { margin: 16px 0 10px; }
.winstrip-track {
  position: relative; height: 26px; border-radius: 8px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--ok) 16%, var(--surface2)),
    var(--surface2) 55%,
    color-mix(in srgb, var(--warn) 22%, var(--surface2))
  );
  border: 1px solid var(--line);
}
/* Bakkanten markerad, så remsan läses som ett fönster med en utgång och inte
   som en stapel som fylls. */
.winstrip-track::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; right: -1px;
  width: 2px; border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--warn) 70%, transparent);
}
.winstrip-track i {
  position: absolute; top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px;
  border-radius: 2px; background: var(--muted);
}
.winstrip-track i.online { background: var(--ok); }
.winstrip-track i.idle { background: var(--warn); }
/* Den egna adressen (sparad i webbläsaren) — annars går man inte att hitta
   bland tolv streck. */
.winstrip-track i.mine { top: 0; bottom: 0; width: 5px; margin-left: -2.5px; }
@media (prefers-reduced-motion: no-preference) {
  .winstrip-track i { transition: left .5s cubic-bezier(.2,.8,.3,1); }
}
.winstrip-legend {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 6px; font-size: 11.5px; color: var(--faint);
  font-family: 'Chakra Petch', sans-serif; letter-spacing: .06em;
  text-transform: uppercase;
}
.winstrip-legend #m-winstrip-turnover { text-transform: none; letter-spacing: 0; }
/* Färgnyckeln under remsan: samma märken som i spåret, med förklaring. */
.winstrip-key {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px;
  font-size: 12px; color: var(--muted);
}
.winstrip-key span { display: inline-flex; align-items: center; gap: 7px; }
.winstrip-key span[hidden] { display: none; }
.winstrip-key i {
  display: inline-block; flex: 0 0 auto; width: 3px; height: 14px;
  border-radius: 2px; background: var(--muted);
}
.winstrip-key i.online { background: var(--ok); }
.winstrip-key i.idle { background: var(--warn); }
.winstrip-key i.mine { width: 5px; height: 18px; background: var(--ok); }
/* Hover-rutan över ett märke: ovanför spåret och med en rad per sak —
   adressen överst, resten dämpat under. */
.winstrip-track .markinfo {
  top: auto; bottom: calc(100% + 6px); text-align: left; line-height: 1.45;
  padding: 6px 11px;
}
.winstrip-track .markinfo .tip-head { display: block; color: var(--text); font-weight: 500; }
.winstrip-track .markinfo .tip-line { display: block; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { .winstrip-track .markinfo .tip-line { white-space: normal; } }
.winstrip-note, .contrib-foot { font-size: 12.5px; margin: 0; }
.contrib-foot { margin-top: 12px; }

/* Tabellens nedräkning: stapel + text i samma cell. Texten får radbryta
   under stapeln — "≈ 16 days · ≈ 37,680 pool shares" på en rad var det som
   sköt ut tabellen i sidled. */
.winleft { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.winleft-bar {
  height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden;
}
.winleft-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--ok); }
.winleft-bar.low i { background: var(--warn); }
.winleft-text { font-size: 12px; color: var(--muted); white-space: normal; line-height: 1.35; }

/* Status per deltagare. Punkten bär inte informationen ensam — texten bredvid
   säger samma sak, för färgen är osynlig för den som inte ser skillnaden.
   Två rader ("Stopped" / "28 hours ago") så kolumnen förblir smal. */
table.miners td .minerstate {
  display: inline-flex; align-items: flex-start; gap: 7px; font-size: 12.5px;
  white-space: normal; line-height: 1.3;
}
table.miners td .minerstate .status-dot { margin: 5px 0 0; flex: 0 0 auto; }
.state-sub { display: block; font-size: 11.5px; color: var(--faint); }
table.miners td .minerstate .status-dot.idle { background: var(--warn); }
table.miners td .minerstate .status-dot.cold { background: var(--faint); }
.dustpill {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-family: 'Chakra Petch', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: 999px; padding: 1px 7px; line-height: 1.6;
}
td.dusted { color: var(--muted); }
/* Den egna adressen i fönstertabellen — samma markering som remsans breda
   streck, så raden och märket hittas som ett par. */
table.miners td.addr.addr-mine { color: var(--link); font-weight: 600; }

/* Steps */
ol.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--muted); }
ol.steps strong { color: var(--text); }

/* Donate */
.donate {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 28px;
}
.donate h3 { margin-bottom: 6px; }
.donate p { font-size: 14px; }
.donate-addr { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.copy-row { display: flex; align-items: center; gap: 10px; }
.copy-row code {
  font-size: 12.5px; padding: 8px 12px; border-radius: 6px;
  background: var(--surface2); overflow-wrap: anywhere;
}
.btn.small { padding: 6px 14px; font-size: 13px; }
@media (max-width: 720px) {
  .donate { grid-template-columns: 1fr; gap: 16px; }
}

/* Plånboken */
.wa-status {
  margin: 14px 0; padding: 12px 16px; border-radius: 8px;
  border-left: 3px solid var(--muted); background: var(--surface);
  font-size: 14.5px; overflow-wrap: anywhere;
}
.wa-status.ok { border-left-color: var(--ok); }
.wa-status.bad { border-left-color: var(--bad, #E2704C); }
.wa-status.warn { border-left-color: var(--warn); }
.wa-status.hidden { display: none; }

.wa-words {
  display: grid; gap: 8px; margin: 6px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.wa-word {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px;
}
.wa-word .n {
  font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums;
  min-width: 16px;
}
.wa-word .w {
  font-family: 'Spline Sans Mono', monospace; font-size: 14.5px;
  color: var(--text); user-select: all;
}

.wa-phrase {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); padding: 12px;
  font-family: 'Spline Sans Mono', monospace; font-size: 14px; resize: vertical;
}
.wa-phrase:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.wa-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wa-check {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--muted); cursor: pointer;
  align-self: flex-start; /* bara så bred som texten kräver */
}
.wa-check input[type="checkbox"] {
  flex: 0 0 auto; width: 17px; height: 17px; margin: 0; padding: 0;
  accent-color: var(--accent); cursor: pointer;
}
.wa-check span { line-height: 1.4; }

.wa-form { display: flex; flex-direction: column; gap: 14px; }
/* :not(checkbox) — annars fick kryssrutan width:100% och padding och blev
   en stor vit ruta mitt i formuläret. */
.wa-form input:not([type="checkbox"]) {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); padding: 10px 12px; font-size: 14px; width: 100%;
  font-family: 'Spline Sans Mono', monospace;
}
.wa-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wa-form input:disabled { opacity: .5; }
.wa-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.wa-form-row .field { flex: 1 1 200px; }
.wa-form-row .field.narrow { flex: 0 1 170px; }

.wa-confirm {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.wa-confirm.hidden { display: none; }
.wa-summary {
  display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; margin: 0;
  font-size: 14px;
}
.wa-summary dt { color: var(--muted); }
.wa-summary dd { margin: 0; overflow-wrap: anywhere; }

.wa-addresses { display: flex; flex-direction: column; gap: 6px; }
.wa-addr-row {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px;
}
.wa-addr-row:first-child { border-top: none; }
.wa-addr-row .a { overflow-wrap: anywhere; }
.wa-addr-row .i { font-size: 12px; }

/* Footer */
footer.site { padding: 40px 0 60px; color: var(--faint); font-size: 13.5px; border-top: 1px solid var(--line); margin-top: 40px; }
footer.site a { color: var(--muted); }

.warn-box {
  border-left: 3px solid var(--warn); background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px; font-size: 14.5px; color: var(--muted);
}
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 7px; }
.status-dot.down { background: var(--warn); }

/* Wallet-sök ("View your stats") + wallet-vyn */
.wallet-search {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.wallet-search input {
  flex: 1 1 320px; min-width: 0;
  font-family: 'Spline Sans Mono', monospace; font-size: 14.5px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px;
}
.wallet-search input::placeholder { color: var(--faint); }
.wallet-search input:focus { outline: none; border-color: var(--accent); }
.addr-full {
  font-family: 'Spline Sans Mono', monospace; font-size: 14px; color: var(--muted);
  overflow-wrap: anywhere;
}
.statuspill {
  font-family: 'Chakra Petch', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 9px;
}
.statuspill.paid { color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.statuspill.maturing { color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
/* Blockstatus och förlorade payouts. "lost" i rött: en orphanad payout ska
   inte ligga kvar som betald, den ska se ut som det den är. */
.statuspill.confirmed { color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.statuspill.pending { color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.statuspill.lost, .statuspill.orphaned { color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); }
/* Tabellänkar (block, txid) ska se ut som tal, inte som brödtextlänkar. */
table.miners td a, table.miners td a:visited { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--faint); }
table.miners td a:hover { color: var(--link); border-bottom-color: var(--link); }
table.miners td a.proof { font-size: 12.5px; color: var(--muted); }
/* Orphanade block i tidslinjen: samma kub, men överstruken höjd och en
   röd bricka i stället för lägesbrickan. */
.block-cube.orphaned .height { text-decoration: line-through; color: var(--muted); }
.block-cube .modepill.lost { background: var(--bad); color: #fff; }

.stat-usd { font-size: 12.5px; color: var(--muted); font-family: 'Spline Sans Mono', monospace; }

/* ---------- Web-minern (#/mine) ---------- */
.wm-form { display: flex; flex-direction: column; gap: 14px; }
.wm-form .field { display: flex; flex-direction: column; gap: 6px; }
.wm-form input:not([type="checkbox"]), .wm-form select {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); padding: 10px 12px; font-size: 14px; width: 100%;
  font-family: 'Spline Sans Mono', monospace;
}
.wm-form input:focus-visible, .wm-form select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.wm-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.wm-form-row .field { flex: 1 1 260px; }
.wm-form-row .field.narrow { flex: 0 0 120px; }
.wm-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* Stoppläget byter BÅDE färg och fyllning. Bara en etikettändring är för lätt
   att missa på en telefon, och knappen är sidans enda lägesindikator. */
.btn.stop, .btn.stop:visited {
  background: transparent; color: var(--bad);
  border: 1px solid var(--bad);
}
.btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }
/* Pulserande punkt medan det minar. Stannar vid reduced motion — då räcker
   att den lyser. */
.wm-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Chakra Petch', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ok);
}
.wm-live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
}
@media (prefers-reduced-motion: no-preference) {
  .wm-live::before { animation: wm-pulse 1.6s ease-in-out infinite; }
  @keyframes wm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
}
.wm-live.hidden { display: none; }
.wm-status {
  font-size: 14px; color: var(--muted);
  border-left: 3px solid var(--line); padding-left: 12px;
}
.wm-status.ok { border-left-color: var(--ok); color: var(--text); }
.wm-status.bad { border-left-color: var(--bad); color: var(--text); }

/* Jämförelsestapeln: webbläsarens takt mot GPU:ns, logaritmiskt. */
.wm-compare-track {
  height: 14px; border-radius: 7px; background: var(--bg);
  border: 1px solid var(--line); overflow: hidden; position: relative;
}
.wm-compare-track i {
  display: block; height: 100%; width: 0; border-radius: 7px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 78%, white), var(--accent));
}
@media (prefers-reduced-motion: no-preference) {
  .wm-compare-track i { transition: width .6s cubic-bezier(.2,.8,.3,1); }
}

.wm-log {
  font-family: 'Spline Sans Mono', monospace; font-size: 12.5px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; height: 220px; overflow-y: auto; overflow-x: hidden;
  color: var(--muted);
}
.wm-log-line { white-space: pre-wrap; word-break: break-word; }
.wm-log-line.ok { color: var(--ok); }
.wm-log-line.bad { color: var(--bad); }

/* Jämförelsen: två linjära staplar (webbläsare vs GPU). */
.wm-bars { display: flex; flex-direction: column; gap: 10px; }
.wm-bar-row { display: flex; align-items: center; gap: 12px; }
.wm-bar-label {
  flex: 0 0 84px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; font-family: 'Chakra Petch', sans-serif;
}
.wm-bar-row .wm-compare-track { flex: 1 1 auto; }
.wm-bar-value { flex: 0 0 96px; text-align: right; font-size: 13px; color: var(--muted); }
.wm-compare-track i.gpu {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ok) 78%, white), var(--ok));
}
@media (max-width: 560px) {
  .wm-bar-label { flex-basis: 64px; font-size: 11px; }
  .wm-bar-value { flex-basis: 78px; font-size: 12px; }
}

/* Prischip i headern. Medvetet litet — det är en referenssiffra, inte en
   statruta. Låg i live-blocks-rutnätet förut och blev en sjätte cell i ett
   femkolumnersnät, där värdet dessutom klipptes. */
.price-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); text-decoration: none; color: var(--text);
  white-space: nowrap; line-height: 1.4;
  /* Headern är space-between; utan detta hamnar chipet mitt i stället för
     bredvid loggan. */
  margin-right: auto;
}
.price-chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.price-chip.hidden { display: none; }
.pc-value { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pc-change { font-size: 12px; font-variant-numeric: tabular-nums; }
.pc-change.up { color: var(--ok); }
.pc-change.down { color: var(--bad); }
/* Inaktuellt pris: dämpat med en varningsram i stället för att döljas. */
.price-chip.stale { border-color: var(--warn); }
.price-chip.stale .pc-value { color: var(--muted); }
/* Chipet visas bara när det finns plats. Brand + chip + nav behöver ~970 px;
   under det trycker chipet ut navigeringen ur vyn (horisontell scroll).
   Navigeringen är viktigare, så chipet är det som viker — och då tar
   prisraden i "If we win this block"-kortet över, så telefonen inte står
   helt utan pris. */
.price-inline { display: none; font-size: 12.5px; }
.price-inline[hidden] { display: none; }
@media (max-width: 1060px) {
  .price-chip { display: none; }
  .price-inline:not([hidden]) { display: block; }
}

/* ---------- Reward-kalkylator ---------- */
.calc-input { display: flex; gap: 14px; flex-wrap: wrap; }
.calc-input .field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; }
.calc-input .field.narrow { flex: 0 0 130px; }
.calc-input input, .calc-input select {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); padding: 10px 12px; font-size: 15px; width: 100%;
  font-family: 'Spline Sans Mono', monospace;
}
.calc-input input:focus-visible, .calc-input select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.calc-presets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip-btn {
  font-family: 'Chakra Petch', sans-serif; font-size: 12.5px; font-weight: 600;
  background: var(--surface2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); padding: 4px 12px; cursor: pointer;
}
.chip-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.calc-grid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.calc-grid > div {
  background: var(--surface); padding: 14px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
/* Beloppen är långa (8 decimaler för små hashrates) — låt dem krympa i
   stället för att spränga rutnätet. */
.calc-grid .stat-value {
  font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calc-usd { font-size: 12.5px; font-family: 'Spline Sans Mono', monospace; }
@media (max-width: 900px) { .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .calc-grid { grid-template-columns: 1fr; } }

/* Status + aterstaende block till mognad i blocklistorna och payouts.
   Får radbryta: brickan på en rad och "416 confirmations" under är bättre
   än en tabell som scrollar i sidled på desktop. */
.maturity {
  display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: wrap;
  white-space: normal; line-height: 1.3;
}
.maturity-left { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Hover-ruta över märkena på fönsterremsan (winstripTip i js/app.js). Den
   satt förut också över blockmarkörerna i graferna, men där är blocken
   numera rader i värderutan .charttip, så det aldrig blir två rutor. Märkena
   är för små att sätta title på, så de träfftestas i JS och rutan
   positioneras här. */
.markinfo {
  position: absolute; top: 20px; transform: translateX(-50%);
  background: var(--surface2); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 9px; font-size: 12px; color: var(--text);
  font-family: 'Spline Sans Mono', monospace;
  /* Radbryt hellre än att sticka ut. Innehållet är "Block #N · läge · pool ·
     tid", vilket på en telefon blir bredare än hela grafen - med nowrap
     hamnade rutan utanför skärmkanten. På desktop ryms raden ändå, så den
     ser likadan ut där. */
  white-space: normal; max-width: calc(100% - 8px); width: max-content;
  pointer-events: none; z-index: 10;
}
.markinfo.hidden { display: none; }
/* Raden under "hur nära ett block". Skild från staplarna av en linje, för
   den svarar på samma fråga men med en annan sorts tal. */
.closeness-eta {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

/* Sista cellen fyller radens rest i stället för att stå ensam bredvid ett
   hål. Fem celler i tre eller två kolumner lämnar alltid en tom plats sist. */
@media (max-width: 900px) {
  .lb-stats > div:last-child { grid-column: span 2; }
}

/* Docker-guiden: kommandoblock och variabeltabell.
   pre får egen bakgrund och vågrät scroll — ett docker run-kommando är
   långt, och sidan i övrigt får aldrig scrolla i sidled. */
pre.cmd {
  background: var(--surface2); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 16px; margin: 0;
  overflow-x: auto; font-size: 13px; line-height: 1.65;
  font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
}
pre.cmd .c { color: var(--faint); }
pre.cmd .v { color: var(--accent); }
.cmd-block { margin: 12px 0; }
/* Rubrikrad ÖVER kodblocket, inte en knapp ovanpå det. Absolut placerad låg
   Copy-knappen mitt i kommandot så fort raden var längre än rutan — och ett
   docker run-kommando är alltid längre än rutan. */
.cmd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 10px 7px 14px;
  background: var(--surface); border: 1px solid var(--line); border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.cmd-label {
  font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.cmd-head .btn.small { padding: 4px 12px; font-size: 12.5px; }
.cmd-block pre.cmd { border-radius: 0 0 8px 8px; }
table.vars { width: 100%; border-collapse: collapse; font-size: 14px; }
table.vars th {
  /* Samma rubrikbehandling som table.miners — den här tabellen ska se ut
     som sidans övriga, inte som något påklistrat. */
  font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  text-align: left; padding: 8px 12px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.vars td { padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
table.vars tr:last-child td { border-bottom: none; }
table.vars td:first-child, table.vars td:nth-child(2) { white-space: nowrap; color: var(--text); }

/* Hårdvarutabellen delar utseende med variabeltabellen men inte kolumnernas
   innebörd: här är kolumn två ett helt flaggpar, inte ett kort standardvärde.
   Med nowrap sköt den ut tabellen i sidled på mobil.
   Anmärkningen ligger UNDER flaggan och inte i en tredje kolumn - tre kolumner
   klämde ihop den till fyra tecken per rad så fort fönstret var smalt. */
table.cases td:nth-child(2) { white-space: normal; }
table.cases td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
/* table-layout: fixed, annars sätter det längsta flaggparet tabellens
   minimibredd och hela tabellen scrollar i sidled i stället för att bryta
   raden. Med fast layout bestämmer kolumnbredden, inte innehållet. */
table.cases { table-layout: fixed; }
table.cases th:first-child, table.cases td:first-child { width: 34%; }
table.cases code { white-space: normal; overflow-wrap: break-word; }
.case-note {
  display: block; margin-top: 6px; max-width: 46ch;
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
/* Guidens framhävda rutor använder sidans befintliga .warn-box — ingen egen
   variant. Två snarlika callout-stilar hade glidit isär vid nästa temaändring. */
.warn-box strong { color: var(--text); }

/* Sidnumrering under blocklistorna. Knapparna i ändarna, spannet i mitten —
   den ordningen gör att texten inte hoppar när "Newer" slås av. */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px;
}
.pager.hidden { display: none; }
.pager-range { color: var(--muted); font-size: 12.5px; }
.pager .btn[disabled] { opacity: .4; cursor: default; pointer-events: none; }

/* ---------- Effort och luck ---------- */
.effort-note { font-size: 13px; margin-top: 14px; max-width: none; }
.effort-note[hidden] { display: none; }
.stat-value .ok { color: var(--ok); }
.stat-value .warn { color: var(--warn); }
.stat-value .bad { color: var(--bad); }
/* Luck-raden: tre tal på en rad, mindre än ett vanligt statvärde. */
.stat-value.triple { font-size: 20px; }

/* ---------- Riggtabellen ---------- */
/* Statuscellen: punkt + text. Röd punkt för en rigg som tystnat — den ska
   se ut som en död rigg, inte försvinna ur listan. */
.rigstate {
  display: inline-flex; align-items: flex-start; gap: 7px; font-size: 12.5px;
  white-space: normal; line-height: 1.3;
}
.rigstate .status-dot { margin: 5px 0 0; flex: 0 0 auto; }
.rigstate.offline { color: var(--bad); }
.rigstate.offline .status-dot { background: var(--bad); }
.rigstate.idle .status-dot { background: var(--warn); }
.rigstate.never .status-dot { background: var(--faint); }
/* Rubriker på två rader — måttet på den första i versaler, fönstret på den
   andra i gemener — i stället för "Hashrate (15 min)" bruten där det råkade
   bli trångt. Från 980 px, där alla åtta kolumner ryms utan att brytas,
   radbryts varken rubriker, status eller underrader: hellre en sidoscroll
   i wrappern än "Offline / since" och "165.00% of / target" mitt itu. Det
   ryms tack vare smalare cellkanter och ett tak på riggnamnet (hela namnet
   står i title). Under 980 px gäller tabellens vanliga regel — allt får
   radbryta — och under 560 px staplas raderna. */
table.miners.rigs th { vertical-align: top; }
table.miners th .th-sub {
  display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500;
  letter-spacing: .04em; text-transform: none; color: var(--faint);
}
@media (min-width: 980px) {
  table.miners.rigs th, table.miners.rigs td .cell-sub,
  table.miners.rigs td .rigstate, table.miners.rigs td .state-sub { white-space: nowrap; }
  table.miners.rigs th, table.miners.rigs td { padding-left: 8px; padding-right: 8px; }
  table.miners.rigs td.addr { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
}
/* Stale över två procent: något i nätverket eller jobbtiden är fel. */
td.stale-high { color: var(--bad); }
.rig-select {
  font-family: 'Chakra Petch', sans-serif; font-size: 12.5px; font-weight: 600;
  background: var(--surface2); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); padding: 5px 10px; cursor: pointer;
}
.rig-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rig-select[hidden] { display: none; }

/* ---------- Intjäning per dag ---------- */
/* Trettio staplar utan bibliotek: höjden är andel av dagens största payout.
   Tomma dagar är tomma spår — det är också information. */
.daybars {
  display: flex; align-items: flex-end; gap: 3px; height: 90px;
  padding: 6px 0 0; border-bottom: 1px solid var(--line);
  /* Hover-rutan (.charttip) positioneras i remsan, se attachDaybarsTip. */
  position: relative; cursor: default;
}
.daybars i {
  flex: 1 1 0; min-width: 0; display: block; border-radius: 2px 2px 0 0;
  background: var(--surface2); height: 2px;
}
.daybars i.paid { background: var(--ok); }
.daybars i.maturing { background: var(--warn); }
.daybars i.today { outline: 1px solid var(--accent); outline-offset: 1px; }
.daybars i.hover { filter: brightness(1.3); box-shadow: 0 0 0 1px var(--text); }
/* "N orphaned" i lifetime-rutan: en länk som fäller ut listan. */
.orphans-link { color: var(--link); text-decoration: none; border-bottom: 1px dotted var(--faint); }
.orphans-link:hover { border-bottom-color: var(--link); }
.orphans-link[aria-expanded="true"]::after { content: " ▴"; font-size: 10px; }
.orphans-link[aria-expanded="false"]::after { content: " ▾"; font-size: 10px; }
.daybars-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 4px; font-family: 'Spline Sans Mono', monospace; }

/* ---------- Stratum- och API-sidorna ---------- */
.doc-grid { display: grid; gap: 12px 24px; grid-template-columns: max-content 1fr; font-size: 14.5px; }
.doc-grid dt { color: var(--faint); font-family: 'Chakra Petch', sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.doc-grid dd { margin: 0; color: var(--muted); }
.doc-grid dd code { white-space: nowrap; }
@media (max-width: 560px) { .doc-grid { grid-template-columns: 1fr; gap: 4px 0; } .doc-grid dd { margin-bottom: 10px; } }
.endpoint-list { display: flex; flex-direction: column; gap: 14px; }
.endpoint-list .ep { border-top: 1px solid var(--line); padding-top: 12px; }
.endpoint-list .ep:first-child { border-top: none; padding-top: 0; }
.endpoint-list .ep code.path { font-size: 14px; color: var(--text); }
.endpoint-list .ep .method { font-family: 'Chakra Petch', sans-serif; font-size: 11px; letter-spacing: .12em; color: var(--accent); margin-right: 8px; }
.endpoint-list .ep p { margin-top: 4px; font-size: 14px; }
.endpoint-list .ep .every { font-size: 12px; color: var(--faint); margin-left: 8px; }

/* ---------- Tabeller på telefon ---------- */
/* Under 560 px staplas raderna: varje cell får sin rubrik från data-label
   (sätts i JS ur thead). Payouts på telefon visade Block, When, Mode och
   klippte beloppet till "45" bakom en sidoscroll; fönstertabellen tappade
   andelen och utbetalningen helt. Att lägga beloppet först räcker inte på en
   riktigt smal skärm — därför en rad per fält. */
@media (max-width: 560px) {
  table.miners.stack, table.miners.stack tbody, table.miners.stack tr, table.miners.stack td { display: block; }
  table.miners.stack thead { display: none; }
  table.miners.stack tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  table.miners.stack tr:last-child { border-bottom: none; }
  table.miners.stack td {
    border-bottom: none; padding: 3px 0; white-space: normal;
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  }
  table.miners.stack td::before {
    content: attr(data-label); flex: 0 0 auto;
    font-family: 'Chakra Petch', sans-serif; font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--faint);
  }
  table.miners.stack td[colspan]::before { content: none; }
  table.miners.stack td .winleft { align-items: flex-end; }
  table.miners.stack td .maturity { justify-content: flex-end; }
}