/* /demos/mmr-log ------------------------------------------------------------
   Two deployed networks named side by side, a measurement table, and an errata
   block. Every colour is an existing estate token — no new hex — so both themes
   follow without a second palette.

   THE TABLE WRAPPER IS .table-responsive AND CARRIES ITS OWN a11y ATTRIBUTES IN
   THE MARKUP, per the house rule css.css states at its .zk-table-wrap block and
   responsive.spec.js enforces: tabindex="0", role="region" and an aria-label.
   Nothing here re-declares the scroll behaviour — the shared class already has
   it, along with the edge cue and the focus ring. */

.mmr-chains {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

/* Each network is one link and reads as one object: mark, network, address,
   role. Laid out as a column so a long address never forces the row sideways —
   the addresses are 32 and 20 bytes and would otherwise be the widest thing on
   a phone. */
.mmr-chain {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 20rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface-alt);
  text-decoration: none;
}
.mmr-chain:hover { border-color: var(--accent); }

.mmr-chain__net { font-weight: 600; }
/* overflow-wrap rather than a scroll container: an address has no internal
   break opportunity, so without this it is the one element that can push the
   page sideways at 320px. It is not prose, so breaking it mid-token costs a
   reader nothing — the opposite of the rule the rust labs need. */
.mmr-chain__id {
  font-size: 0.8rem;
  overflow-wrap: anywhere;
  color: var(--ink-muted);
}
.mmr-chain__role { font-size: 0.8rem; color: var(--ink-muted); }

.mmr-chain .chain-icon { vertical-align: text-bottom; margin-right: 0.4rem; }

/* The pre-registration note and the errata are the page's honest core, so they
   are marked as commentary rather than styled to disappear. */
.mmr-prereg,
.mmr-caveat {
  border-left: 3px solid var(--accent);
  padding-left: 0.9rem;
  color: var(--ink-muted);
}

.mmr-erratum {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface-alt);
}
.mmr-erratum__claim { margin-top: 0; }
.mmr-erratum__verdict { font-weight: 600; }
.mmr-erratum__survives { margin-bottom: 0; color: var(--ink-muted); }

/* Numeric columns: tabular figures so the sawtooth is visible as a shape down
   the column rather than only readable row by row. */
.mmr-cu .mmr-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mmr-cu .mmr-measured { font-weight: 600; }
.mmr-cu .mmr-naive { color: var(--ink-muted); }

.mmr-repos { line-height: 1.8; }