/* pool-cosmetic.css — PrimeTriad cosmetic batch 2026-09-26 (?v=20260926cosm). Pool dashboard (index.html) only; NOT loaded on merge.html.
   Source: Game Art Director review 2026-09-26, items 2, 4, 7. Loaded LAST so it wins. Pool accent #7fb7ff unchanged. */

/* ---------- #2 Active miners: one subtitle, 14px #A89890 ---------- */
#miners-desc { font-size: 14px; color: #a89890; max-width: 40rem; }

/* ---------- #4 Label floor: 12px minimum ---------- */
.topbar-meta .chip,
.status-badge, .status-badge *,
.eyebrow,
.metric-label,
.window-chip, .window-chip span, .window-chip strong,
.tg-miners__eyebrow,
.table-wrap th,
.block-source-badge,
.pill-status,
.connect-row dt,
.connect-example-label,
.connect-ports .muted { font-size: max(12px, 0.75rem); }
@media (max-width: 420px) {
  /* pool-shell.css compacts the header pill to .66rem here; keep it at the 12px floor and let the wordmark give way */
  .topbar-end .status-badge { font-size: 12px; padding: 0.25rem 0.5rem; }
  .topbar-end .status-badge * { font-size: 12px; }
}

/* ---------- #4 Tap targets ---------- */
.seg-btn { min-height: 32px; }
@media (max-width: 640px) {
  .seg-btn { min-height: 44px; min-width: 44px; padding-inline: 0.95rem; }
  .brand { min-height: 44px; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
  /* label-style toggle: 44px hit area without moving the metric card layout */
  .metric-unit-toggle { min-height: 44px; margin-block: -16px; display: inline-flex; align-items: center; }
  .table-wrap a.tx-link, .table-wrap td a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-inner a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .copy-btn { min-height: 44px; }
}

/* ---------- #7 How to connect: one grid for every row (label | URL | Copy) ---------- */
@media (min-width: 1100px) {
  /* Connect card gets the full row so 200px | URL | 72px fits without clipping the URL; the worked example sits
     to the right of the rows, and Recent payouts moves below at full width (its table no longer scrolls). */
  #connect .two-col { grid-template-columns: minmax(0, 1fr); }
  #connect .connect-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    grid-template-areas: "list example" "note example";
    column-gap: 28px;
    align-items: start;
  }
  #connect .connect-card > .connect-example { grid-area: example; margin: 0; }
  #connect .connect-card > .connect-list { grid-area: list; }
  #connect .connect-card > .connect-note { grid-area: note; }
}
.connect-card { container-type: inline-size; container-name: ptconnect; }
.connect-list .connect-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 72px;
  column-gap: 12px;
  row-gap: 12px;
  align-items: center;
}
.connect-list .connect-row > dt { grid-column: 1; margin: 0; }
.connect-list .connect-row > dd {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  margin: 0;
}
.connect-list .connect-row > dd > .connect-code { grid-column: 1; }
.connect-list .connect-row > dd > .muted { grid-column: 1 / -1; }
/* port groups: the group name spans the row, each port is its own label | URL | Copy row */
#stratum-ports-row > dt, #stratum-eu-ports-row > dt, #stratum-sg-ports-row > dt { grid-column: 1 / -1; }
.connect-list .connect-row > dd.connect-ports { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
.connect-ports > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 72px;
  column-gap: 12px;
  align-items: center;
}
.connect-ports > div > .muted { grid-column: 1; min-width: 0; color: #a89890; line-height: 1.35; }
.connect-ports > div > .connect-code { grid-column: 2; }
.connect-ports > div > .copy-btn { grid-column: 3; }
.connect-list .copy-btn {
  width: 72px; min-width: 72px; min-height: 36px; height: 36px;
  padding: 0; justify-content: center; justify-self: end;
}
/* URLs stay on one line; a too-narrow field scrolls inside itself instead of breaking the hostname */
.connect-list .connect-code {
  display: block;
  min-width: 0;
  white-space: nowrap;
  word-break: normal;
  overflow-x: auto;
  scrollbar-width: none;
}
.connect-list .connect-code::-webkit-scrollbar { display: none; }
.connect-list .connect-row > dd > .muted .connect-code,
.connect-list .muted .connect-code { display: inline; }

/* narrow card or phone: label on its own line (12px #A89890), then the URL with Copy on its right */
@container ptconnect (max-width: 580px) {
  .connect-list .connect-row,
  .connect-ports > div { grid-template-columns: minmax(0, 1fr) 72px; row-gap: 6px; }
  .connect-list .connect-row > dt,
  .connect-ports > div > .muted { grid-column: 1 / -1; }
  .connect-list .connect-row > dd { grid-column: 1 / -1; }
  .connect-ports > div > .connect-code { grid-column: 1; }
  .connect-ports > div > .copy-btn { grid-column: 2; }
}
@media (max-width: 640px) {
  .connect-list .connect-row,
  .connect-ports > div { grid-template-columns: minmax(0, 1fr) 72px; row-gap: 6px; }
  .connect-list .connect-row > dt,
  .connect-ports > div > .muted { grid-column: 1 / -1; font-size: 12px; color: #a89890; }
  .connect-list .connect-row > dd { grid-column: 1 / -1; }
  .connect-ports > div > .connect-code { grid-column: 1; }
  .connect-ports > div > .copy-btn { grid-column: 2; }
  .connect-list .copy-btn { height: 44px; min-height: 44px; }
  /* the field scrolls sideways; a soft right-edge fade says there is more (Copy always copies the full URL) */
  .connect-list dd > .connect-code:not(:only-child), .connect-ports .connect-code {
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
}