/* Shared Structure-route layer — /issuers and /chains.
   ------------------------------------------------------------------------------------------------
   Generalises the dated Daily Tape record's publication patterns (record identity, metric pairs,
   source ledger, ranked composition, contribution rows) so both Structure routes read as the same
   publication rather than two dashboards that happen to share a header.

   COLOUR CONTRACT: every colour here resolves through a --theme-* role. There are no hard-coded
   colours and no rgba() overlay literals, so light and dark are a property of the token layer
   rather than of this file. Positive and negative are never carried by colour alone — each is
   additionally marked by a sign, a glyph and a text label (see .sr-contrib-*).

   MOTION CONTRACT: durations and easings are tokens named for the semantic behaviour they serve
   (see the motion constitution). Only transform and opacity are animated, so nothing reflows.
   Every optional transition is removed under prefers-reduced-motion, and the reduced-motion end
   state is identical to the animated end state. */

:root {
  /* Resolve: evidence or detail being revealed. Micro-interactions and disclosures. */
  --sr-motion-resolve: 150ms;
  /* Rebalance: composition or contribution changing position or measure. */
  --sr-motion-rebalance: 280ms;
  --sr-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --sr-measure: 68ch;
  --sr-gap: clamp(0.75rem, 1.4vw, 1.1rem);
}

/* Assistive-technology-only text. Load-bearing here: every contribution row states "expanded by"
   or "contracted by" in words, so direction never depends on seeing a colour or a glyph. */
.sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── page shell ─────────────────────────────────────────────────────────── */

.sr-page {
  max-width: var(--layout-measure-wide, 1080px);
  margin: 0 auto;
  padding-inline: var(--layout-gutter, 1.25rem);
  padding-bottom: var(--rhythm-section, 3rem);
}

.sr-section {
  margin-top: var(--rhythm-section, 3rem);
}

.sr-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--theme-rule-standard);
  margin-bottom: 1.1rem;
}

.sr-section-head h2 {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--theme-ink-primary);
}

.sr-section-note,
.sr-section-head p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--theme-ink-muted);
}

.sr-lede {
  max-width: var(--sr-measure);
  margin: 0.65rem 0 0;
  color: var(--theme-ink-secondary);
  line-height: 1.6;
}

/* ── record identity ────────────────────────────────────────────────────── */

.sr-identity {
  padding-top: var(--rhythm-page-top-clear, 5.5rem);
}

.sr-eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--theme-metadata-ink);
}

.sr-identity h1 {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--theme-ink-primary);
  max-width: 22ch;
}

/* The dated basis line. Metadata, deliberately quiet, but always present and never a "Live" chip. */
.sr-basis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--theme-rule-subtle);
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--theme-metadata-ink);
}

.sr-basis strong {
  font-weight: 600;
  color: var(--theme-ink-secondary);
}

.sr-basis-sep {
  color: var(--theme-rule-strong);
}

/* ── metric pairs ───────────────────────────────────────────────────────── */
/* Record-style measures. Deliberately not chips: a label, a figure, and a plain-English gloss. */

.sr-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sr-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-metric {
  border-top: 1px solid var(--theme-rule-standard);
  padding-top: 0.7rem;
  min-width: 0;
}

.sr-metric-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.sr-metric-value {
  display: block;
  margin-top: 0.2rem;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--theme-ink-primary);
}

.sr-metric-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--theme-ink-secondary);
}

/* ── tables ─────────────────────────────────────────────────────────────── */
/* One editorial table pattern for composition, contribution and the full directory. */

.sr-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.sr-table caption {
  text-align: left;
  font-size: 0.78rem;
  color: var(--theme-ink-muted);
  padding-bottom: 0.6rem;
}

.sr-table th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
  padding: 0 0.7rem 0.5rem 0;
  border-bottom: 1px solid var(--theme-rule-standard);
  white-space: nowrap;
}

.sr-table td {
  padding: 0.55rem 0.7rem 0.55rem 0;
  border-bottom: 1px solid var(--theme-rule-subtle);
  color: var(--theme-ink-secondary);
  vertical-align: baseline;
}

.sr-table tbody tr:last-child td { border-bottom: 0; }

.sr-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--theme-ink-primary);
}

.sr-rank {
  font-variant-numeric: tabular-nums;
  color: var(--theme-ink-muted);
  width: 2.5rem;
}

/* Long issuer names must wrap rather than force a horizontal scrollbar. */
.sr-name {
  color: var(--theme-ink-primary);
  font-weight: 500;
  overflow-wrap: anywhere;
  min-width: 9rem;
}

/* The explicit remainder row: visually part of the table, tonally an aside. */
.sr-remainder td {
  border-top: 1px solid var(--theme-rule-standard);
  color: var(--theme-ink-muted);
  font-style: normal;
}

/* The record's own residual bucket, drawn as a row so its size is read against the entities it
   stands in for. Its bar is deliberately quieter than an entity's: it is a real measured share,
   but it is not one thing, so it must never compete with the ranked rows for attention. */
.sr-residual .sr-bar-fill {
  background: var(--theme-ink-muted);
  opacity: 0.55;
}

/* ── share bars ─────────────────────────────────────────────────────────── */
/* A proportion readable at a glance. The figure beside it is the authority; the bar is support. */

.sr-bar {
  position: relative;
  display: block;
  height: 6px;
  min-width: 3rem;
  background: var(--theme-surface-inset);
  border-radius: 1px;
  overflow: hidden;
}

.sr-bar-fill {
  display: block;
  height: 100%;
  background: var(--theme-accent);
  transform-origin: left center;
  /* Rebalance: only runs when the reader changes measure or sort. */
  transition: transform var(--sr-motion-rebalance) var(--sr-motion-ease);
}

/* ── contribution rows ──────────────────────────────────────────────────── */
/* Expansion and contraction are distinguished FOUR ways, so colour is never load-bearing:
   a leading glyph, an explicit sign on the value, a text label for assistive technology,
   and bar direction from a fixed centre line. */

.sr-contrib-list {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-contrib {
  display: grid;
  grid-template-columns: minmax(8rem, 1.4fr) minmax(0, 2fr) minmax(5.5rem, auto);
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.sr-contrib:last-child { border-bottom: 0; }

.sr-contrib-name {
  color: var(--theme-ink-primary);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

/* Fixed zero line: expansion grows right of centre, contraction grows left. */
.sr-contrib-track {
  position: relative;
  height: 14px;
  min-width: 0;
  border-left: 1px solid var(--theme-rule-standard);
  border-right: 1px solid var(--theme-rule-standard);
}

.sr-contrib-track::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--theme-rule-strong);
}

/* Each half of the track is the full scale, so scaleX(1) reaches exactly one edge. The explicit
   width matters: an absolutely positioned element with only top/bottom set collapses to zero width,
   and scaling zero stays zero. */
.sr-contrib-fill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 50%;
  transform-origin: left center;
  transition: transform var(--sr-motion-rebalance) var(--sr-motion-ease);
}

.sr-contrib--up .sr-contrib-fill {
  left: 50%;
  background: var(--theme-status-positive-ink);
}

.sr-contrib--down .sr-contrib-fill {
  right: 50%;
  transform-origin: right center;
  background: var(--theme-status-negative-ink);
}

.sr-contrib-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
}

.sr-contrib--up .sr-contrib-value { color: var(--theme-status-positive-ink); }
.sr-contrib--down .sr-contrib-value { color: var(--theme-status-negative-ink); }

/* The non-colour carriers. */
.sr-contrib-glyph {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  margin-right: 0.35rem;
  color: inherit;
}

/* Entities entering or leaving the record: stated as a word, never as a percentage. */
.sr-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--theme-rule-interactive);
  border-radius: 2px;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
  vertical-align: baseline;
}

/* Expansions and contractions sit side by side on wide viewports and stack on narrow ones, so the
   two directions are legible as a pair rather than read as one long ranked leaderboard. */
.sr-contrib-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: 1.2rem;
}

.sr-contrib-heading {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

/* A short universe is shown as ONE list ordered from largest expansion to largest contraction,
   rather than split into two columns. With ten rows the whole distribution fits, so the shared
   scale and the position of the zero line are visible at a glance instead of inferred across a
   gap — and the list gets a wider track, because it is the section's main figure. */
.sr-contrib-list--ordered {
  margin-top: 1.2rem;
}

.sr-contrib-list--ordered .sr-contrib {
  grid-template-columns: minmax(9rem, 1.1fr) minmax(0, 3fr) minmax(6rem, auto);
  padding: 0.5rem 0;
}

/* The residual row sits in its true position by magnitude, so the ordering stays honest, and is
   toned back so it never reads as one of the named entities. */
.sr-contrib--residual .sr-contrib-name,
.sr-contrib--residual .sr-contrib-value {
  color: var(--theme-ink-muted);
}

.sr-contrib--residual .sr-contrib-fill {
  opacity: 0.5;
}

/* A row the record names but declines to quantify. An empty track and an em dash, never a zero
   bar: zero would assert a contribution the record does not state. */
.sr-contrib-unstated {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--theme-rule-subtle);
}

.sr-contrib--unstated .sr-contrib-name,
.sr-contrib--unstated .sr-contrib-value {
  color: var(--theme-ink-muted);
}

.sr-contrib-track--empty {
  border-left-style: dashed;
  border-right-style: dashed;
}

/* ── subscription aside ─────────────────────────────────────────────────── */
/* The signup block is preserved from the previous pages unchanged (subscription work is out of
   scope). It is separated from the record content so it reads as an aside rather than as part of
   the ledger, and it sits after the source ledger, never near the benchmark figures. */
.signup-block {
  max-width: var(--layout-measure-wide, 1080px);
  margin: var(--rhythm-section, 3rem) auto 0;
  padding: 1.25rem var(--layout-gutter, 1.25rem);
  border-top: 1px solid var(--theme-rule-standard);
}

.signup-block h3 {
  margin: 0.25rem 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--theme-ink-primary);
}

.signup-kicker {
  margin: 0;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-metadata-ink);
}

.signup-description {
  margin: 0 0 0.75rem;
  max-width: 56ch;
  font-size: 0.86rem;
  color: var(--theme-ink-secondary);
}

.subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.subscribe-form input[type='email'] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--theme-rule-interactive);
  border-radius: 3px;
  background: var(--theme-surface-raised);
  color: var(--theme-ink-primary);
  font: inherit;
  font-size: 0.88rem;
}

.subscribe-form input[type='email']:focus-visible,
.subscribe-form button:focus-visible,
.signup-check input:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

.subscribe-form button {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--theme-accent);
  border-radius: 3px;
  background: var(--theme-accent);
  color: var(--theme-accent-ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.signup-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--theme-ink-secondary);
}

.subscribe-msg {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--theme-ink-secondary);
  min-height: 1.2em;
}

/* ── classification and limitations ─────────────────────────────────────── */
/* A definition list rather than prose, so each limitation is findable on its own and none of them
   can be skimmed past inside a paragraph. */

.sr-limits {
  margin: 1.2rem 0 0;
  display: grid;
  gap: 1rem;
}

.sr-limit {
  padding-left: 0.9rem;
  border-left: 2px solid var(--theme-rule-standard);
}

.sr-limit dt {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--theme-ink-primary);
}

.sr-limit dd {
  margin: 0;
  max-width: var(--sr-measure);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

/* ── concentration series ───────────────────────────────────────────────── */

.sr-series-figure {
  margin: 0;
}

.sr-series {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sr-series-grid { stroke: var(--theme-chart-grid); stroke-width: 1; }
.sr-series-axis { fill: var(--theme-chart-axis); font-size: 10px; font-variant-numeric: tabular-nums; }
.sr-series-line { fill: none; stroke: var(--theme-chart-series-primary); stroke-width: 2; }
.sr-series-area { fill: var(--theme-accent-surface); }

.sr-series-point {
  fill: var(--theme-chart-series-primary);
  opacity: 0;
  transition: opacity var(--sr-motion-resolve) var(--sr-motion-ease);
}

.sr-series-point:is(:hover, :focus-visible),
.sr-series-stop:is(:hover, :focus-visible) .sr-series-point { opacity: 1; }

.sr-series-stop:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

.sr-series-readout {
  margin-top: 0.6rem;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--theme-ink-secondary);
  min-height: 1.2em;
}

/* ── source ledger ──────────────────────────────────────────────────────── */

.sr-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sr-gap);
}

.sr-source {
  border: 1px solid var(--theme-rule-subtle);
  background: var(--theme-surface-raised);
  padding: 0.85rem 0.95rem;
  border-radius: 4px;
  min-width: 0;
}

.sr-source-role {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--theme-metadata-ink);
}

.sr-source-name {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--theme-ink-link);
}

.sr-source-value {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--theme-ink-primary);
  overflow-wrap: anywhere;
}

.sr-source-note {
  margin: 0.45rem 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--theme-ink-secondary);
}

.sr-ledger-rows {
  margin-top: 1rem;
  border-top: 1px solid var(--theme-rule-standard);
}

.sr-ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--theme-rule-subtle);
  font-size: 0.82rem;
}

.sr-ledger-row span { color: var(--theme-provenance-ink); }

.sr-ledger-row strong {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--theme-ink-primary);
  text-align: right;
  overflow-wrap: anywhere;
}

/* Reconciliation state: a word plus a rule colour, never a coloured dot alone. */
.sr-recon {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.sr-recon-state {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sr-recon--within .sr-recon-state { color: var(--theme-status-positive-ink); }
.sr-recon--outside .sr-recon-state { color: var(--theme-status-warning-ink); }

/* ── disclosure ─────────────────────────────────────────────────────────── */
/* Resolve. The complete directory stays reachable; it simply does not open by default. */

.sr-disclosure {
  border-top: 1px solid var(--theme-rule-standard);
  margin-top: 1.2rem;
}

.sr-disclosure > summary {
  cursor: pointer;
  padding: 0.75rem 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--theme-ink-link);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sr-disclosure > summary::-webkit-details-marker { display: none; }

.sr-disclosure > summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--sr-motion-resolve) var(--sr-motion-ease);
}

.sr-disclosure[open] > summary::before { transform: rotate(90deg); }

.sr-disclosure > summary:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

.sr-disclosure-body { padding-bottom: 1rem; }

.sr-empty {
  padding: 1rem 0;
  color: var(--theme-ink-muted);
  font-size: 0.86rem;
}

/* ── unavailable state ──────────────────────────────────────────────────── */

.sr-unavailable {
  border: 1px solid var(--theme-rule-standard);
  background: var(--theme-surface-raised);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  color: var(--theme-ink-secondary);
}

.sr-unavailable strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--theme-ink-primary);
}

/* ── mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .sr-contrib {
    grid-template-columns: minmax(0, 1fr) minmax(4.5rem, auto);
    row-gap: 0.35rem;
  }
  /* The track spans both columns rather than shrinking to nothing, and the name and figure are
     placed explicitly onto the first row so the figure sits beside its label instead of being
     pushed below the track by source order. Placement is visual only: the track is aria-hidden,
     so the reading order stays name then figure either way. */
  .sr-contrib-name { grid-column: 1; grid-row: 1; }
  .sr-contrib-value { grid-column: 2; grid-row: 1; }
  .sr-contrib-track { grid-column: 1 / -1; grid-row: 2; }
  .sr-contrib-list--ordered .sr-contrib { grid-template-columns: minmax(0, 1fr) minmax(4.5rem, auto); }
  .sr-metrics { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .sr-table { font-size: 0.82rem; }
  .sr-table th, .sr-table td { padding-right: 0.5rem; }
}

/* ── reduced motion ─────────────────────────────────────────────────────── */
/* Every optional transition is removed outright. The end state is unchanged, so nothing is lost. */

@media (prefers-reduced-motion: reduce) {
  .sr-bar-fill,
  .sr-contrib-fill,
  .sr-series-point,
  .sr-disclosure > summary::before {
    transition: none;
  }
}