/* The homepage Structure register.
 *
 * Three categories of frozen, citable rows: name, supply, share, one-day change. The composition
 * follows the Final design — the category control sits in the page's own 15.5rem label column on
 * desktop, the register takes the measure beside it, and the whole thing collapses to one column
 * with horizontal tabs on a phone. Mobile is recomposed rather than scaled: the numeric columns
 * become a single metadata line under the name, because four right-aligned numeric columns cannot
 * be read at 390px.
 *
 * Every value here resolves against production tokens. `--radius-none` and `--motion-base` do not
 * exist in this repo, so the design's radius and transition are written as literals rather than
 * broadened into shared tokens.css, which this lane does not own.
 */

.sr {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  column-gap: 48px;
  margin-top: var(--rhythm-title-lead, 1rem);
  color: var(--theme-ink-primary);
  /* The enclosing .structure article is itself a two-column grid, so without this the register is
     confined to one of its tracks and its own 1fr column collapses to nothing. The register is a
     full-width object under the section header, not a column beside it. */
  grid-column: 1 / -1;
}

/* ---- category control + vintage ------------------------------------------------------- */

.sr-tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

.sr-tab {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 0 6px 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--theme-ink-muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
  transition: color 0.18s ease;
}

.sr-tab:hover { color: var(--theme-ink-primary); }
.sr-tab:focus-visible { outline: 2px solid var(--theme-focus-ring); outline-offset: 2px; }
.sr-tab[aria-selected="true"] { color: var(--theme-ink-primary); border-left-color: var(--theme-ink-primary); }

/* The date boundary. The hero above this section may carry a newer record, so the vintage is
   stated in the register's own column rather than hidden in a footnote. */
.sr-provenance {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 1.25rem 0 0;
  padding-left: 14px;
  font-family: var(--mono);
  font-size: var(--type-provenance-size);
  line-height: var(--type-provenance-lh, 1.5);
  letter-spacing: var(--type-provenance-ls, 0.02em);
  color: var(--theme-ink-muted);
  text-transform: uppercase;
  text-wrap: balance;
}

.sr-provenance-line:first-child { color: var(--theme-ink-secondary); }

/* ---- the register --------------------------------------------------------------------- */

.sr-panel[hidden] { display: none; }

/* The name column is capped rather than elastic, and a trailing flexible column absorbs what is
   left. With `1fr` on the name the figures were driven to the page edge and a short entity name sat
   ~300px from its own Supply figure (~500px at 1728), so a row read as two objects at opposite ends
   of the page rather than one record. The leftover now falls at the right margin, where whitespace
   reads as intended rather than as a gap. */
.sr-head,
.sr-row {
  display: grid;
  grid-template-columns: minmax(11rem, 18rem) 7rem 8rem 8rem minmax(0, 1fr);
  column-gap: 24px;
  align-items: center;
}

.sr--notifications .sr-head,
.sr--notifications .sr-row { grid-template-columns: minmax(11rem, 18rem) 7rem 8rem 8rem minmax(9rem, 1fr); }

.sr-head {
  padding: 0 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.sr-head span { white-space: nowrap; }
.sr-head span:first-child { padding-left: 38px; }
.sr-head span:not(:first-child) { text-align: right; padding-right: 2ch; }

.sr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--theme-rule-standard);
}

.sr-row {
  min-height: 56px;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

/* ---- name + mark ---------------------------------------------------------------------- */

.sr-name {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
  color: var(--theme-ink-primary);
  font-family: var(--serif-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.15;
  text-decoration: none;
}

a.sr-name:hover { color: var(--theme-ink-link); }
a.sr-name:hover span { text-decoration: underline; }
a.sr-name:focus-visible { outline: 2px solid var(--theme-focus-ring); outline-offset: 3px; }

/* Official artwork, drawn at its own aspect ratio and never recoloured or enclosed. Rows with no
   official mark reserve the same 32px so the names stay on one optical left edge. */
.sr-mark { display: block; flex: 0 0 auto; object-fit: contain; }
.sr-name > span { min-width: 0; overflow-wrap: anywhere; }
.sr-row .sr-name:not(:has(.sr-mark)):not(:has(.sr-sign)) { padding-left: 38px; }

/* ---- figures -------------------------------------------------------------------------- */

.sr-supply,
.sr-share,
.sr-change {
  font-family: var(--mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 2ch;
  white-space: nowrap;
}

.sr-supply { color: var(--theme-ink-primary); }
.sr-share { color: var(--theme-ink-secondary); }
.sr-change[data-direction="up"] { color: var(--theme-status-positive-ink); }
.sr-change[data-direction="down"] { color: var(--theme-status-negative-ink); }
.sr-change[data-direction="flat"],
.sr-change--unstated { color: var(--theme-ink-muted); }

.sr-withheld,
.sr-unavailable {
  margin: 0.75rem 0 0;
  color: var(--theme-provenance-ink);
  font-size: var(--type-provenance-size);
  line-height: 1.55;
}

.sr-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sr-foot a { color: var(--theme-ink-link); text-decoration: none; }
.sr-foot a:hover { text-decoration: underline; }

/* ---- narrow: recomposed, not scaled ----------------------------------------------------
 *
 * The switch was at 720px and that was too low, which was a real defect rather than a taste
 * question. The at-rest table needs its aside (15.5rem), a gutter, and a row whose four fixed
 * columns floor at 34rem; below roughly 1000px the row simply did not fit, and because .sr-main
 * clips rather than scrolls, the overflow was SILENT -- the Change column and, on the preview, the
 * Get signals control were drawn outside the viewport with no scrollbar to reveal them. A
 * document-level scrollWidth check cannot see that, which is why it went unreported.
 *
 * 860px is where the intermediate table below stops being comfortable, so the recomposed row takes
 * everything under it. Nothing here is a scaled-down table: the row becomes a name with its figures
 * on a second line, which is legible at any width. */

@media (max-width: 860px) {
  .sr { grid-template-columns: minmax(0, 1fr); row-gap: 0; }

  .sr-tabs { flex-direction: row; flex-wrap: wrap; gap: 0 16px; align-items: flex-end; }

  .sr-tab {
    padding: 0 0 6px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .sr-tab[aria-selected="true"] { border-left-color: transparent; border-bottom-color: var(--theme-ink-primary); }

  .sr-provenance { padding-left: 0; margin: 0.9rem 0 1.1rem; }

  /* The four numeric columns become one metadata line beneath the name, laid on their own three
     columns rather than nudged with padding, so a long figure can never collide with its neighbour. */
  .sr-head { display: none; }

  .sr-row,
  .sr--notifications .sr-row {
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    min-height: 0;
    padding-top: 8px;
  }

  .sr-name {
    grid-column: 1 / 4;
    grid-row: 1;
    font-size: 1.2rem;
    min-height: 48px;
  }

  .sr--notifications .sr-name { grid-column: 1 / 4; }

  .sr-row .sr-name:not(:has(.sr-mark)):not(:has(.sr-sign)) { padding-left: 0; }

  .sr-supply,
  .sr-share,
  .sr-change {
    grid-row: 2;
    text-align: left;
    padding: 0 0 10px;
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  .sr-supply { grid-column: 1; color: var(--theme-ink-secondary); }
  .sr-share  { grid-column: 2; color: var(--theme-ink-muted); }
  .sr-change { grid-column: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .sr-tab { transition: none; }
}

/* ---- mark plates ----------------------------------------------------------------------
 *
 * Five of fifteen marks cannot carry themselves on one of the two grounds, measured by
 * scripts/audit-structure-marks.mjs. Three are flat near-black artwork that disappears on the dark
 * page (contrast 1.14–1.16:1); two are white or pale-gold artwork that disappears on cream
 * (1.04–1.82:1). The artwork is never altered — a plate sits behind it, only on the theme that
 * needs one, and only for those five.
 *
 * The plate is deliberately quiet: no border, a 2px radius rather than a disc, and it keeps the
 * 32px footprint by paying for its own inset with border-box padding. A circular chip on every row
 * would read as a token dashboard, which is precisely what this register is not.
 */
.sr-mark[data-plate] {
  box-sizing: border-box;
  padding: 3px;
  border-radius: 2px;
}

/* Dark artwork, light plate, dark theme only. */
:root[data-theme="dark"] .sr-mark[data-plate="dark"] {
  background: var(--palette-bone-100, #ECEAE4);
}

/* Pale artwork, dark plate, light theme only. */
:root:not([data-theme="dark"]) .sr-mark[data-plate="light"] {
  background: var(--palette-ink-900, #1A1813);
}

/* ---- compact source comparison ---------------------------------------------------------
 *
 * Replaces the 966px definition ledger with the fact it existed to deliver: three organisations
 * publish a number for roughly this quantity and the numbers differ. Name and figure only, with one
 * doorway to /sources where the methodology actually lives.
 *
 * The designated source leads and is marked; the others are set at the same size but in secondary
 * ink, so the row does not read as an equal-weight comparison of like with like.
 */
.st-compare {
  width: min(100%, var(--layout-box-page));
  margin: 0 auto;
  padding: 1rem var(--layout-gutter) 0;
  border-top: 1px solid var(--theme-rule-subtle);
}

.st-compare-title {
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.st-compare-row { display: flex; flex-wrap: wrap; gap: 0.6rem 2.5rem; }

.st-compare-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.st-compare-name {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--theme-ink-muted);
}

.st-compare-value {
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--theme-ink-secondary);
}

/* The governed reading is the page's own figure, not one opinion among three. */
.st-compare-cell[data-designated="true"] .st-compare-name { color: var(--theme-object-identity-ink); }
.st-compare-cell[data-designated="true"] .st-compare-value { color: var(--theme-ink-primary); font-weight: 500; }

.st-compare-credit { font-size: 10.5px; color: var(--theme-ink-muted); }
.st-compare-credit a { color: inherit; }

.st-compare-doorway { margin: 0.75rem 0 0; font-size: var(--type-body-supporting-size); }
.st-compare-doorway a { color: var(--theme-ink-link); text-decoration: none; }
.st-compare-doorway a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .st-compare-row { gap: 0.9rem 1.75rem; }
  .st-compare-value { font-size: 14px; }
}

/* Register doorways and the comparison doorway are ordinary inline links, which on a phone left
   them as 19px targets. They keep their quiet type and gain a real touch height. */
@media (max-width: 860px) {
  /* The design sets the category control at 36px, which is right for a pointer and short of a
     touch target. It keeps its 36px type and box on desktop and gains the height on a phone. */
  .sr-tab { min-height: 44px; }

  .sr-foot { gap: 0 1.4rem; }
  .sr-foot a,
  .st-compare-doorway a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* A mark with official per-theme variants ships both files; the page shows the one that belongs to
   the active theme. This is preferred over a plate: an official variant is the artwork owner's own
   answer to the same problem. */
.sr-mark[data-variant="dark"] { display: none; }
:root[data-theme="dark"] .sr-mark[data-variant="light"] { display: none; }
:root[data-theme="dark"] .sr-mark[data-variant="dark"] { display: block; }

/* ---- notifications: the completion surface (preview only) --------------------------------
 *
 * Emitted only when the page is generated with notifications enabled, which the committed homepage
 * never is. One DOM, two presentations: a sticky column beside the register at >=1180px, a fixed
 * bar and bottom sheet below that. Nothing is reordered between them, so focus order and visual
 * order stay the same thing at every width.
 */

.sr-notify {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45em;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--theme-ink-muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.sr-notify:hover { color: var(--theme-ink-link); }
.sr-notify:focus-visible { outline: 2px solid var(--theme-focus-ring); outline-offset: 2px; }
.sr-notify[aria-checked="true"] { color: var(--theme-ink-link); font-weight: 500; flex-direction: row-reverse; }
.sr-notify-glyph { display: inline-block; width: 1em; text-align: center; }

/* The chosen record is marked on the record itself, not on a separate card. */
.sr-row:has([aria-checked="true"]) { box-shadow: inset 2px 0 0 var(--theme-ink-link); padding-left: 14px; }

/* ---- shared internals ------------------------------------------------------------------ */

.sr-complete[hidden], .sr-bar[hidden] { display: none; }

.sr-complete-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* Clear all sits in the head, always visible while anything is selected. The per-row Remove list
   stays behind the disclosure below: clearing is a one-press escape, reviewing is management. */
.sr-head-actions { flex: none; display: flex; align-items: center; gap: 4px; }

.sr-complete-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--theme-ink-primary);
}

.sr-complete-title span[data-sr-count] { color: var(--theme-ink-link); }
.sr-title-narrow { display: none; }

.sr-sheet-close {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 0;
  border: 0;
  background: none;
  color: var(--theme-ink-muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

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

/* The compact identity strip: what was chosen, without travelling the full list. */
.sr-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0.75rem 0 0; }
.sr-summary-mark { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.sr-summary-mark[data-plate] { box-sizing: border-box; padding: 2px; border-radius: 2px; }
:root[data-theme="dark"] .sr-summary-mark[data-plate="dark"] { background: var(--palette-bone-100, #ECEAE4); }
:root:not([data-theme="dark"]) .sr-summary-mark[data-plate="light"] { background: var(--palette-ink-900, #1A1813); }

.sr-summary-names {
  font-size: var(--type-body-supporting-size);
  line-height: 1.45;
  color: var(--theme-ink-secondary);
}

.sr-form { display: flex; flex-direction: column; gap: 6px; margin-top: 0.9rem; }
.sr-form-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--theme-ink-muted); }
.sr-field { display: flex; flex-wrap: wrap; gap: 8px; }

.sr-input {
  flex: 1 1 180px;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 0;
  background: var(--theme-surface-raised);
  color: var(--theme-ink-primary);
  font-family: var(--sans);
  /* 16px so iOS does not zoom the page on focus. */
  font-size: 16px;
}

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

.sr-submit {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--theme-ink-primary);
  border-radius: 0;
  background: var(--theme-ink-primary);
  color: var(--theme-surface-page);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sr-submit:focus-visible { outline: 2px solid var(--theme-focus-ring); outline-offset: 2px; }
/* Two states in one live region. A rejected address is the reader's to fix and reads as negative;
   the preview notice is not a failure and must not borrow the colour of one. */
.sr-error { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--theme-status-negative-ink); }
.sr-error[data-state="notice"] { color: var(--theme-ink-secondary); }
.sr-form-foot { margin: 2px 0 0; font-family: var(--mono); font-size: var(--type-provenance-size); line-height: 1.5; color: var(--theme-ink-muted); }

/* Management sits last and closed: it is editing, not completing. */
.sr-review { margin-top: 1rem; border-top: 1px solid var(--theme-rule-subtle); }

.sr-review-summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.sr-review-summary:hover { color: var(--theme-ink-primary); }
.sr-review-summary:focus-visible { outline: 2px solid var(--theme-focus-ring); outline-offset: 2px; }
.sr-review-summary span[data-sr-count] { margin-left: 0.4em; color: var(--theme-ink-link); }

/* Bounded, so a long selection scrolls inside its own box and can never push the email field
   off the panel. */
.sr-selected-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 15rem;
  overflow-y: auto;
}

.sr-selected-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 0 6px 12px;
  border-bottom: 1px solid var(--theme-rule-subtle);
  box-shadow: inset 2px 0 0 var(--theme-ink-link);
}

.sr-selected-mark { flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; }
.sr-selected-mark[data-plate] { box-sizing: border-box; padding: 2px; border-radius: 2px; }
:root[data-theme="dark"] .sr-selected-mark[data-plate="dark"] { background: var(--palette-bone-100, #ECEAE4); }
:root:not([data-theme="dark"]) .sr-selected-mark[data-plate="light"] { background: var(--palette-ink-900, #1A1813); }

.sr-selected-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.sr-selected-name { font-family: var(--serif-display); font-size: 1rem; line-height: 1.15; color: var(--theme-ink-primary); }
.sr-selected-kind { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-ink-muted); }

.sr-remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--theme-ink-link);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sr-remove:hover { text-decoration: underline; }
.sr-remove:focus-visible { outline: 2px solid var(--theme-focus-ring); outline-offset: 2px; }

.sr-clear {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--theme-ink-muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sr-clear:hover { color: var(--theme-ink-link); }
.sr-clear:focus-visible { outline: 2px solid var(--theme-focus-ring); outline-offset: 2px; }

.sr-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- wide: a sticky column beside the register ------------------------------------------ */

/* ---- the intermediate table: 861px to the sidebar breakpoint ---------------------------
 *
 * Wide enough for a real table, too narrow for the full-measure one. The aside drops from 15.5rem
 * to 11rem and the numeric columns are retuned to the measure that is actually available, the same
 * move the 1180px sidebar band already makes for the same reason. Nothing is hidden and nothing is
 * scaled; the columns are simply sized to the room.
 *
 * The floor is checked, not assumed. At 861px: aside 176px + 24px gutter leaves ~613px, and the
 * widest row template here floors at 25.5rem + four 12px gaps = 456px. */

@media (min-width: 861px) and (max-width: 1179px) {
  .sr { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 24px; }

  .sr-head,
  .sr-row {
    grid-template-columns: minmax(5rem, 1fr) 5.5rem 6rem 6.5rem;
    column-gap: 12px;
  }

  .sr--notifications .sr-head,
  .sr--notifications .sr-row {
    grid-template-columns: minmax(4.5rem, 1fr) 5.5rem 6rem 6.5rem 6.75rem;
    column-gap: 12px;
  }

  /* The column labels are wider than the tracks they sit over at this measure, and a nowrap label
     does not shrink -- it draws straight over its neighbour ("SHARE OF TOHANGE"). They lose the
     wide tracking, keep their type, and are allowed to wrap; bottom alignment keeps a wrapped
     two-line label sitting on the same baseline as its neighbours. */
  .sr-head { align-items: end; font-size: 10px; letter-spacing: 0.08em; }
  .sr-head span { white-space: normal; }
  .sr-head span:not(:first-child) { padding-right: 0; }

  .sr-name { font-size: 1.1rem; }
  .sr-supply,
  .sr-share,
  .sr-change { font-size: 12px; padding-right: 0; }
  .sr-notify { font-size: 10.5px; letter-spacing: 0.07em; }

  /* The register is the full width of the page here, so the note reads at the same measure as the
     rows rather than stopping short of them. */
  .sr-category-note { max-width: none; }
}

@media (min-width: 1180px) {
  /* The third column is reserved whether or not anything is selected, so choosing a record never
     reflows the table the reader is currently reading. */
  .sr--notifications { grid-template-columns: 11rem minmax(0, 1fr) 17rem; column-gap: 28px; }

  /* With a third column taken by the panel the register has ~592px, and the at-rest row template
     (12rem + 7 + 8 + 8 + 9 = 44rem) no longer fits: the action column overflowed the track and drew
     on top of the panel. The columns are retuned for the narrower measure rather than allowed to
     spill. */
  .sr--notifications .sr-head,
  .sr--notifications .sr-row {
    grid-template-columns: minmax(7rem, 1fr) 5.5rem 7rem 7.5rem 6.5rem;
    column-gap: 14px;
  }

  .sr--notifications .sr-head span:first-child { padding-left: 38px; }
  .sr--notifications .sr-name { font-size: 1.15rem; gap: 8px; }
  .sr--notifications .sr-supply,
  .sr--notifications .sr-share,
  .sr--notifications .sr-change { font-size: 12.5px; padding-right: 0; }
  .sr--notifications .sr-notify { font-size: 10.5px; letter-spacing: 0.08em; }

  .sr-complete {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: start;
    /* Clears the sticky site header so the panel is never tucked beneath it. */
    position: sticky;
    top: calc(var(--layout-nav-h, 64px) + 16px);
    padding: 14px 0 0 20px;
    border-left: 1px solid var(--theme-rule-standard);
  }

  .sr-bar { display: none; }
}

/* ---- narrow: a fixed bar, and the sheet it opens ---------------------------------------- */

@media (max-width: 1179px) {
  .sr-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--theme-surface-raised);
    border-top: 1px solid var(--theme-rule-strong);
  }

  .sr-bar-count {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--theme-ink-primary);
  }

  .sr-bar-open {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid var(--theme-ink-primary);
    border-radius: 0;
    background: var(--theme-ink-primary);
    color: var(--theme-surface-page);
    cursor: pointer;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

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

  /* Selected but not opened: the sheet stays out of the flow entirely. */
  .sr-complete:not([data-open]) { display: none; }

  .sr-complete[data-open] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: block;
    max-height: 85vh;
    overflow-y: auto;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--theme-surface-page);
    border-top: 2px solid var(--theme-ink-primary);
    box-shadow: 0 -12px 32px rgb(0 0 0 / 22%);
  }

  .sr-complete[data-open] .sr-sheet-close { display: inline-flex; }
  .sr-title-wide { display: none; }
  .sr-title-narrow { display: inline; }
  .sr-complete-title { font-size: 12px; }

  /* The submit sits under the field rather than beside it, so neither is squeezed on a phone.
     The input's flex-basis is reset because in a column the basis is the HEIGHT: left as 180px it
     drew a 180px-tall email box. */
  .sr-field { flex-direction: column; align-items: stretch; }
  .sr-input { flex: 0 0 auto; width: 100%; }
  .sr-submit { width: 100%; }
  .sr-selected-list { max-height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
  .sr-notify { transition: none; }
}

/* ---- currencies: measured and not-yet-measured ------------------------------------------
 *
 * The record measures a USD-pegged universe, so USD is the only currency it states. The other four
 * are carried as names because they are real Structure destinations, and a reader may want to be
 * told when they begin to be measured. Their figure cells are withheld with an em dash and the row
 * is marked, so the table never implies a measurement that does not exist.
 */
.sr-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  font-family: var(--serif-display);
  font-size: 1rem;
  font-variant-numeric: lining-nums;
  color: var(--theme-ink-muted);
}

.sr-name--pending { color: var(--theme-ink-secondary); }
.sr-row[data-pending] .sr-supply,
.sr-row[data-pending] .sr-share { color: var(--theme-ink-muted); }
.sr-withheld-cell { color: var(--theme-ink-disabled); }

.sr-category-note {
  max-width: 62ch;
  margin: 0.85rem 0 0;
  color: var(--theme-provenance-ink);
  font-size: var(--type-provenance-size);
  line-height: 1.55;
}

/* The doorway to the explainer, sitting inside the completion surface's own footnote. Inline so it
   reads as part of the sentence rather than as a second call to action competing with Get signals. */
.sr-foot-link {
  color: var(--theme-ink-link);
  text-decoration: none;
  white-space: nowrap;
}

.sr-foot-link:hover { text-decoration: underline; }

/* A currency row carries a typographic sign rather than artwork, so the completion surface shows the
   same sign where other rows show a mark. Sized to the mark's optical weight, not its box. */
.sr-summary-sign,
.sr-selected-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--theme-ink-secondary);
}

.sr-summary-sign { width: 18px; height: 18px; font-size: 13px; }
.sr-selected-sign { width: 22px; height: 22px; font-size: 15px; }