/* bch2.org mining page: BCH2 earnings widget (/assets/editorial/mining-calc.v1.css)
   Loaded after bch2.v1.css and mining.v1.css on mining.html only.
   Served with "cache-control: immutable": copy to mining-calc.v2.css to change it after deploy.

   DELIBERATE EXCEPTION to the "design-system tokens only, no new colours" rule that the rest of
   mining.v1.css follows. The owner asked for this widget to carry hashrate.no's own look, so the
   palette below is sampled from hashrate.no/coins/BCH2: near-black ground, orange accent,
   bordered panels. Every one of those colours is declared as a local custom property on .hnw and
   is used nowhere else on the site. Spacing, type sizes and the focus ring still come from the
   design system, so the widget keeps the page's rhythm.

   Contrast on the widget's own grounds (all AA or better at their size):
     --hnw-text   #e8e8e8 on #0d0d0d = 15.9:1   --hnw-muted  #8f8f8f on #1a1a1a =  5.0:1
     --hnw-accent-text #ff7a4d on #1a1a1a = 5.9:1   --hnw-up #46c75a on #1a1a1a = 6.6:1
   The bare --hnw-accent is used for fills, borders and the focus ring only, never for small text. */

.hnw {
  /* hashrate.no palette, scoped to this widget */
  --hnw-bg: #0d0d0d;
  --hnw-panel: #1a1a1a;
  --hnw-field: #232323;
  --hnw-line: #333333;
  --hnw-accent: #e8542a;
  --hnw-accent-text: #ff7a4d;
  --hnw-text: #e8e8e8;
  --hnw-muted: #8f8f8f;
  --hnw-up: #46c75a;
  --hnw-down: #ff6b57;

  background: var(--hnw-bg);
  color: var(--hnw-text);
  border: 1px solid var(--hnw-line);
  border-radius: 3px;
  padding: clamp(1.125rem, 0.9rem + 1vw, 1.75rem);
  min-width: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* The widget sits on ink-free ground, so its own focus ring must be its own accent. */
.hnw :focus-visible {
  outline: 2px solid var(--hnw-accent-text);
  outline-offset: 2px;
}

/* Head --------------------------------------------------------------------------------- */
.hnw__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-s);
  flex-wrap: wrap;
  margin-bottom: var(--space-m);
}
.hnw__name { font-weight: 700; font-size: var(--text-md); letter-spacing: -0.01em; }
.hnw__ticker { color: var(--hnw-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.hnw__fresh {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--hnw-up);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.hnw__fresh::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* Set by the script when the cached figures are older than they should be. */
.hnw__fresh[data-stale="1"] { color: var(--hnw-muted); }

/* Stat cards ---------------------------------------------------------------------------- */
.hnw__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
  margin-bottom: var(--space-m);
}
@media (min-width: 40rem) {
  .hnw__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hnw-stat {
  background: var(--hnw-panel);
  border: 1px solid var(--hnw-line);
  border-radius: 3px;
  padding: var(--space-xs) var(--space-s);
  min-width: 0;
}
.hnw-stat__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2xs);
  margin-bottom: var(--space-3xs);
}
.hnw-stat__label { font-weight: 600; }
.hnw-stat__unit { color: var(--hnw-muted); font-size: var(--text-xs); white-space: nowrap; }
.hnw-stat__row { display: flex; align-items: baseline; gap: var(--space-2xs); flex-wrap: wrap; }
.hnw-stat__value {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hnw-stat__chg { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.hnw-stat__chg[data-dir="up"] { color: var(--hnw-up); }
.hnw-stat__chg[data-dir="down"] { color: var(--hnw-down); }
.hnw-stat__chg[data-dir="flat"] { color: var(--hnw-muted); }

/* Network specs ------------------------------------------------------------------------- */
.hnw__specs {
  background: var(--hnw-panel);
  border: 1px solid var(--hnw-line);
  border-radius: 3px;
  padding: 0 var(--space-s);
  margin: 0 0 var(--space-m);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 34rem) {
  .hnw__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-l); }
}
.hnw-spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--hnw-line);
  margin: 0;
}
.hnw-spec__k { color: var(--hnw-muted); }
.hnw-spec__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin: 0;
}
/* Drop the last rule in each column, whatever the column count resolves to. */
.hnw-spec:last-child { border-bottom: 0; }
@media (min-width: 34rem) {
  .hnw-spec:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* Calculator ---------------------------------------------------------------------------- */
.hnw__calc-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--hnw-accent-text);
  margin: 0 0 var(--space-xs);
}
.hnw__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  margin-bottom: var(--space-s);
}
@media (min-width: 30rem) {
  .hnw__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
  .hnw__fields { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.hnw-field { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.hnw-field > label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hnw-muted);
}
.hnw-field > select,
.hnw-field > input {
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--hnw-field);
  border: 1px solid var(--hnw-line);
  border-radius: 3px;
  color: var(--hnw-text);
  padding: 0.5rem 0.625rem;
  width: 100%;
  min-width: 0;
}
.hnw-field > select { cursor: pointer; }

/* Results ------------------------------------------------------------------------------- */
.hnw__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hnw-line);
  border: 1px solid var(--hnw-line);
  border-radius: 3px;
}
@media (min-width: 48rem) {
  .hnw__results { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hnw-res {
  background: var(--hnw-panel);
  padding: var(--space-xs) var(--space-s);
  min-width: 0;
}
.hnw-res--profit { background: #2a1913; }
.hnw-res__k {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hnw-muted);
  margin-bottom: var(--space-3xs);
}
.hnw-res__v {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.hnw-res--profit .hnw-res__v { color: var(--hnw-accent-text); }
/* "158.10 BCH2" wraps in a half-width tile and drops the row's baselines out of line. */
@media (max-width: 30rem) {
  .hnw-res__v { font-size: var(--text-base); }
}
.hnw-res__sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--hnw-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Foot ---------------------------------------------------------------------------------- */
.hnw__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  flex-wrap: wrap;
  margin-top: var(--space-s);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--hnw-line);
  color: var(--hnw-muted);
  font-size: var(--text-xs);
}
.hnw__foot p { margin: 0; max-width: var(--measure); }
.hnw__foot a { color: var(--hnw-accent-text); }
.hnw__foot a:hover { color: var(--hnw-text); }