/* bch2.org mining guide, v1 (/assets/editorial/mining.v1.css)
   Loaded after bch2.v1.css on mining.html only. Design-system tokens only; no new colours.
   Served with "cache-control: immutable": copy to mining.v2.css to change it after deploy.
   Shared patterns (data tables on ink, command boxes on ink and .command--wrap, multi-paragraph
   row text with compact callouts, typed step numbers, stacked closing buttons, prose measure)
   live in bch2.v1.css. */

/* Quick start: connection panel (two stratum endpoints + miner fields table) ------------- */
.connection {
  display: grid;
  gap: var(--space-m);
  min-width: 0;
}
.connection__endpoints { display: grid; grid-template-columns: minmax(0, 1fr); }
/* The panel has no eyebrow above its first field. */
.connection .panel__field { min-width: 0; margin-top: 0; }
.connection .panel__field:first-child { padding-top: 0; border-top: 0; }
.connection .panel__field .eyebrow { margin-bottom: var(--space-2xs); }
.connection__note { margin-top: var(--space-2xs); color: var(--on-dark-muted); font-size: var(--text-sm); }

/* Two endpoints side by side where the body column is wide enough for both URLs. */
@media (min-width: 80rem) {
  .connection__endpoints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connection .panel__field { padding-top: 0; border-top: 0; }
  .connection .panel__field:first-child { padding-right: var(--space-l); }
  .connection .panel__field + .panel__field { padding-left: var(--space-l); border-left: 1px solid var(--rule-on-dark); }
}

/* Miner fields table on ink: labels and notes muted, no rule under the last row. */
.connection__fields { --table-min: 28rem; }
.connection .data-table tbody tr:last-child > * { border-bottom: 0; padding-bottom: 0; }
.connection .data-table tbody th { white-space: nowrap; }
.connection .data-table td:last-child { color: var(--on-dark-muted); }
.connection .data-table code { white-space: nowrap; overflow-wrap: normal; }
/* Chromium breaks at <wbr> even inside nowrap, which would narrow the Value column and put the
   Pool URL on two lines from 768px up. The <wbr> only serves the stacked layout below. */
@media (min-width: 48rem) {
  .connection__fields code wbr { display: none; }
}
/* Below 768px the table stacks instead of scrolling: its values are what a phone user copies, and
   a scrolling box cut the Pool URL chip and hid the Notes column. This is the second exception to
   the phone-table rule, next to downloads' .dl-table (STYLEGUIDE 5.11). Each field reads label,
   value chip, note; the column headers stack label over label between two hairlines, like a
   stacked spec-table thead. The Pool URL is a code.token that breaks only at its <wbr> after "://".
   The wrapper keeps tabindex and its region name: from 768px up the table can still scroll. */
@media (max-width: 47.99rem) {
  .connection__fields { --table-min: 0; }
  .connection__fields :is(table, thead, tbody, tr, th, td) { display: block; width: auto; }
  .connection .data-table :is(th, td) { padding: 0; border: 0; }
  .connection .data-table :is(thead, tbody) tr { padding-block: var(--space-xs); border-bottom: 1px solid var(--rule-on-dark); }
  .connection .data-table thead tr { border-top: 1px solid var(--rule-on-dark); }
  .connection .data-table tbody tr:last-child { padding-bottom: 0; border-bottom: 0; }
  .connection .data-table tbody :is(th, td) { white-space: normal; }
  .connection .data-table tbody th,
  .connection .data-table tbody td:last-child { font-size: var(--text-sm); }
  .connection .data-table tbody td { margin-top: var(--space-3xs); }
  .connection .data-table code { white-space: normal; }
}

/* Compatible hardware: data table ------------------------------------------------------- */
.hardware { --table-min: 22rem; }

/* Block reward: three-cell stat strip above the ASERT paragraph --------------------------- */
.reward { display: grid; gap: var(--space-l); min-width: 0; }
.reward__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Value over label in every cell at every width, like the homepage and price strips on phones.
   From 1280px the system strip puts label beside value, but "~10 min" leaves its label no room,
   so only the middle cell would wrap under its value. */
.reward__stats .stat { flex-direction: column; align-items: flex-start; }
@media (max-width: 47.99rem) {
  /* The system strip turns 2 x 2 here; keep three cells in one row. */
  .reward__stats .stat:nth-child(2) { padding-right: 1.25rem; }
  .reward__stats .stat:nth-child(3) { padding-left: 1.25rem; border-left: var(--rule); border-top: 0; }
}
@media (max-width: 29.99rem) {
  /* Phones: one stat per row, value over label, a hairline between rows. */
  .reward__stats { grid-template-columns: minmax(0, 1fr); }
  .reward__stats .stat:nth-child(n) { padding-inline: 0; border-left: 0; }
  .reward__stats .stat:nth-child(n + 2) { border-top: var(--rule); }
}

/* Forge Solo sections: bodies that hold several blocks ----------------------------------- */
.forge-body { display: grid; gap: var(--space-xl); min-width: 0; }
.forge-body > .prose > p { max-width: 38rem; }
.forge-ports-block,
.forge-extra { display: grid; gap: var(--space-m); min-width: 0; }
/* The pool name and the "Ours" mark sit on one line, centred on the logo. */
.pool-cell { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.forge-ports-block .title { margin: 0; }
.forge-ports { --table-min: 18rem; }
.forge-ports .data-table tbody th { white-space: nowrap; }

/* Public pool list ----------------------------------------------------------------------- */
.pools__head { max-width: var(--measure); }
.pools__head .section-title { margin-top: var(--space-xs); }
.pools__test { margin-top: var(--space-s); }
.pools { --table-min: 56rem; }
/* The first column is the pool, not a row key: it reads in ink, like a table of links. */
.pools__table tbody th[scope="row"] { color: var(--ink); padding-right: var(--space-m); }
.pool-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--line-ui);
  text-underline-offset: 0.25em;
}
.pool-name:hover { color: var(--green); text-decoration-color: currentColor; }
/* solopool.site has no logo file: its name sits in the same slot, on the logo's line. */
.pool-name--plain { margin-left: calc(1.5rem + 0.5em); }
.pool-logo { flex: none; width: 1.5rem; height: 1.5rem; object-fit: contain; }
.pools__tag {
  margin-left: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--green);
}
.pools__note { display: block; margin-top: var(--space-3xs); color: var(--muted); font-size: var(--text-sm); }
.pools__caption { margin-top: var(--space-s); color: var(--muted); font-size: var(--text-sm); max-width: var(--measure); }
.pools__caption a { color: var(--ink); }
.pools__caption a:hover { color: var(--green); }
.pools__note-block { margin-top: var(--space-l); }
@media (max-width: 47.99rem) {
  /* The table scrolls in its box on phones (STYLEGUIDE 5.11); keep the name column readable. */
  .pools { --table-min: 50rem; }
}