/* Screen styles for the chain group. Tokens and shared components live in ../app.css; use var(--…) tokens only. */

/* ---- Shared within the group -------------------------------------------------- */

/* Identity line: a full hash with its copy button */
.chain-id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); min-width: 0; }
.chain-id-label { font-size: var(--text-sm); color: var(--color-muted); }
.chain-hash { min-width: 0; font-size: var(--text-sm); color: var(--color-ink-2); word-break: break-all; }
.page-head .sub .chain-id { margin-top: var(--space-2xs); }
#body > .chain-id { margin: calc(-1 * var(--space-md)) 0 var(--space-lg); }

/* The ruled tally on slate, directly under the identity */
.chain-tally { margin-bottom: var(--space-lg); }
.chain-tally .tile .value .muted { font-size: 0.55em; }
.chain-tally .tile .value .badge { min-height: 28px; padding: 0 var(--space-sm); font: 500 var(--text-sm)/1 var(--font-body); letter-spacing: 0; vertical-align: middle; }
.chain-tally .tile .value .badge i { width: 15px; height: 15px; }

@media (max-width: 40rem) {
  .chain-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain-tally .tile { padding: var(--space-sm) var(--space-md); }
  .chain-tally .tile .value { font-size: var(--text-xl); white-space: normal; overflow-wrap: anywhere; }
}


/* Contract call: address, then the function */
.chain-call { display: inline-flex; align-items: center; gap: var(--space-3xs); white-space: nowrap; }
.chain-call .tag { margin-left: var(--space-2xs); }

/* Data words shown as labels read in sentence case */
.chain-optype, .chain-cap .tag { display: inline-block; }
.chain-optype::first-letter, .chain-cap .tag::first-letter { text-transform: uppercase; }

/* Filter bar inside the list card */
.chain-filters { justify-content: space-between; gap: var(--space-sm) var(--space-md); margin: 0; padding: var(--space-md) var(--space-lg); box-shadow: inset 0 -1px 0 var(--color-rule); }
.chain-segs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); min-width: 0; max-width: 100%; }
.chain-fields { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); min-width: 0; max-width: 100%; }
.chain-fields input { font-family: var(--font-mono); font-size: var(--text-xs); }
.chain-fields input::placeholder { font-family: var(--font-body); font-size: var(--text-sm); }
.chain-f-addr { width: 13rem; }
.chain-f-fn { width: 9rem; }
.chain-f-asset { width: 22rem; }
@media (max-width: 40rem) {
  .chain-filters { padding: var(--space-sm) var(--space-md); }
  .chain-fields, .chain-fields input { width: 100%; }
  .chain-fields input { flex: 1 1 100%; font-size: var(--text-md); }
  .chain-fields .btn { flex: 1 1 100%; }
}

/* Lists: on a phone the column that names the row stays in view */
@media (max-width: 48rem) {
  .chain-list table.t th:first-child, .chain-list table.t td:first-child { position: sticky; left: 0; z-index: 1; background: var(--glass-solid); }
  .chain-list table.t td:first-child { box-shadow: inset -1px 0 0 var(--color-rule), inset 0 -1px 0 var(--color-row); }
  .chain-list table.t th:first-child { box-shadow: inset -1px 0 0 var(--color-rule), inset 0 -1px 0 var(--color-rule); }
}

/* ---- Ledgers ------------------------------------------------------------------ */
.chain-seq { font: 500 var(--text-md)/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.chain-seq a { color: var(--color-ink); }
.chain-when { margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-muted); }
.chain-okbar { display: flex; align-items: center; gap: var(--space-xs); min-width: 8rem; }
.chain-okbar-track { flex: 1; display: flex; gap: var(--space-3xs); height: 6px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-hover); }
.chain-okbar-track span { display: block; height: 100%; }
.chain-okbar-ok { background: var(--s1); }
.chain-okbar-fail { background: var(--s2); }
.chain-okbar-pct { min-width: 2.75rem; text-align: right; font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
@media (forced-colors: active) { .chain-okbar-track span { forced-color-adjust: none; } }

/* ---- Ledger ------------------------------------------------------------------- */
/* Header facts run two pairs to a row under the transactions */
@media (min-width: 60rem) {
  .chain-header .kv { grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr) minmax(8rem, max-content) minmax(0, 1fr); column-gap: var(--space-lg); }
  .chain-header .kv > div:nth-last-child(-n+4) { box-shadow: none; }
}
.chain-btn-num { color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* ---- Transaction -------------------------------------------------------------- */
@media (min-width: 75rem) { .chain-tally-tx { grid-template-columns: minmax(0, 0.8fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); } }
.chain-flowcard { margin-bottom: var(--space-md); }
.chain-facts { align-items: start; }
.chain-tabs .tabs { margin: 0; padding: var(--space-xs) var(--space-md) 0; }
.chain-flowcard .card-body.flush { padding-top: 0; }
.chain-flowcard .flow-item { padding: var(--space-md) var(--space-lg); }
.chain-flowcard .flow-item .line > b { font-weight: 500; }
.chain-src, .chain-move, .chain-amt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.chain-src { margin-left: auto; font-size: var(--text-sm); }
.chain-amt b { font-weight: 500; font-variant-numeric: tabular-nums; }
.chain-memo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.chain-ev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
@media (max-width: 48rem) { .chain-ev { grid-template-columns: minmax(0, 1fr); } }
.chain-ev-label { margin-bottom: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.chain-raw { padding: var(--space-sm) var(--space-md); }

/* ---- Operations --------------------------------------------------------------- */
.chain-ops .card-head select { width: 16rem; max-width: 100%; }
.chain-ops table.t td.chain-det { min-width: 16rem; line-height: 1.7; }
.chain-mix .bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-xs) var(--space-xl); }
@media (max-width: 48rem) { .chain-mix .card-body { max-height: 15rem; overflow-y: auto; scrollbar-width: thin; } }
.chain-type { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.chain-type b { font-weight: 500; }

/* ---- Transfers ---------------------------------------------------------------- */
table.t th.chain-arrow, table.t td.chain-arrow { padding-left: 0; padding-right: 0; color: var(--color-muted); text-align: center; }