/* ==========================================================================
   View-specific composition
   ========================================================================== */

/* --------------------------------------------------------------------------
   View transitions
   -------------------------------------------------------------------------- */

.view {
  animation: view-in var(--dur-base) var(--ease-out);
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* --------------------------------------------------------------------------
   Dashboard — hashrate summary cards

   These sit under the pool hashrate plot, inside its card. They replaced an
   inline "now · avg · peak · min" line that ran above the chart and took
   height from it. Scoped to this one panel on purpose: every other chart card
   on the site keeps exactly the layout it had.
   -------------------------------------------------------------------------- */

.hashrate-summary {
  /* Does not grow: the plot above it has flex: 1 1 auto and keeps the
     surplus, so the card's height is unchanged and no gap opens up. */
  flex: 0 0 auto;
  margin-top: var(--sp-5);
}

.hashrate-summary__grid {
  display: grid;
  /* Equal columns, and stretch keeps all four the same height whatever the
     longest caption wraps to. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--sp-3);
}

.hashrate-summary__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  border: 1px solid var(--glass-border);
  /* The identifying colour, set per card below. */
  border-left: 3px solid var(--summary-accent, var(--glass-border));
}

/* Same palette, same order as the chart series: orange, blue, green, purple. */
.hashrate-summary__card[data-series="1"] { --summary-accent: var(--series-1); }
.hashrate-summary__card[data-series="2"] { --summary-accent: var(--series-2); }
.hashrate-summary__card[data-series="3"] { --summary-accent: var(--series-3); }
.hashrate-summary__card[data-series="4"] { --summary-accent: var(--series-4); }

.hashrate-summary__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--summary-accent, var(--text-muted));
}

.hashrate-summary__value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* An unavailable figure must not read as a measured one. */
.hashrate-summary__value--empty {
  color: var(--text-muted);
}

.hashrate-summary__caption {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

.hashrate-summary__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* Two rows of two rather than four cramped columns. Still equal in width and
   height as a set. */
@media (max-width: 900px) {
  .hashrate-summary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Dashboard — hero block panel
   -------------------------------------------------------------------------- */

.hero-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.hero-block__height {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}

.hero-block__hash {
  display: block;
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  border: 1px solid var(--glass-border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  word-break: break-all;
  line-height: var(--lh-relaxed);
}

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
}

.kv__key {
  color: var(--text-muted);
  white-space: nowrap;
}

.kv__val {
  text-align: right;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Current Progress card

   Replaces the luck gauge. At solo-pool magnitudes an arc is always visually
   empty, so the hierarchy is: the figure, then the interpretation, then the
   two numbers it came from.
   -------------------------------------------------------------------------- */

.progress__value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
  color: var(--brand-ink);
}

.progress__odds {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Separated by a rule: these are the inputs to the figure above, not more
   headline numbers. */
.progress__facts {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--glass-border);
}

/* --------------------------------------------------------------------------
   Blocks view
   -------------------------------------------------------------------------- */

.block-row__height {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.block-row__hash {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Pool-found blocks get a brand rail so they read at a glance. */
.block-card {
  position: relative;
  padding-left: calc(var(--sp-5) + 3px);
}

.block-card--ours::after {
  content: "";
  position: absolute;
  left: 0;
  top: var(--sp-4);
  bottom: var(--sp-4);
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--brand);
}

/* --------------------------------------------------------------------------
   Workers view
   -------------------------------------------------------------------------- */

.worker-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.worker-name__label {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* Stand-in for the last-share column, drawn only where that column has been
   folded away to keep the worker name readable — see the worker table rules
   in components.css. Everywhere else the real column carries the figure and
   this must not double it. */
.worker-name__last {
  display: none;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.toolbar__search {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}


/* --------------------------------------------------------------------------
   Network view
   -------------------------------------------------------------------------- */

.retarget {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* --------------------------------------------------------------------------
   Settings view
   -------------------------------------------------------------------------- */

.settings {
  display: grid;
  /* Matches .stack, so Settings keeps the same card rhythm as every other
     page — it overrides .stack's flex layout and would otherwise sit on a
     tighter 16px grid. */
  gap: var(--sp-5);
  max-width: 760px;
}

.settings__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.settings__row-body {
  flex: 1;
  min-width: 220px;
}

.settings__row-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.settings__row-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.settings__control {
  flex-shrink: 0;
  min-width: 180px;
}

@media (max-width: 560px) {
  .settings__control {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   System health
   -------------------------------------------------------------------------- */

.health {
  display: flex;
  flex-direction: column;
}

.health__row {
  display: grid;
  grid-template-columns: minmax(140px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--divider);
}

.health__row:last-child {
  border-bottom: none;
}

.health__label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.health__dot--good {
  color: var(--status-good);
}

.health__dot--warning {
  color: var(--status-warning);
}

.health__dot--critical {
  color: var(--status-critical);
}

.health__dot--unknown {
  color: var(--text-muted);
}

.health__meta {
  min-width: 0;
}

/* Origins and timings can be long; they truncate rather than reflow the
   row, with the full text available via the title attribute. */
.health__origin {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--glass-border);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.health__note svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
  margin-top: 2px;
}

.health__note p + p {
  margin-top: var(--sp-2);
}

.health__unknown strong {
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .health__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'label badge'
      'meta  meta';
    gap: var(--sp-2) var(--sp-3);
  }

  .health__label {
    grid-area: label;
  }

  .health__meta {
    grid-area: meta;
  }

  .health__row > .badge {
    grid-area: badge;
  }

  .health__origin {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   Connection / stratum details
   -------------------------------------------------------------------------- */

.copy-field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Sits beside a --control-h icon button, so it matches that height and
   centres its single line rather than being padded to a taller box. */
.copy-field__value {
  flex: 1;
  min-width: 0;
  height: var(--control-h);
  padding: 0 var(--sp-3);
  line-height: calc(var(--control-h) - 2px);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  border: 1px solid var(--glass-border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: nowrap;
}