/*
 * Regulations app — design-system re-skin (COD-308, batch 4).
 * ============================================================================
 * Six templates: the frameworks hub, the DSA article list (partly public — an
 * anonymous visitor sees the first N articles), the article detail, the
 * glossary, the coming-soon unlock page, and the recursive sub-item partial.
 * Scoped under .regulations-view, every value reads a design token.
 *
 * This is the app where the *content* is the product: legal text, obligations
 * and scenarios. So unlike the operations dashboards, these screens are read
 * rather than scanned, and the type here uses --fs-read / --lh-read for the
 * regulation text itself while everything around it stays on the UI scale.
 *
 * Colour discipline note
 * ----------------------
 * The old article detail used a coloured card header per column (bg-primary on
 * the legal text, bg-success on the scenarios) plus bg-info on the overview.
 * Three saturated header bars on one screen is decoration, which convention 5
 * rules out, and it made the page read as three unrelated apps stacked. The two
 * columns are now plain .ds-panel and the *relationship* is carried by the
 * shared obligation label, which is what actually ties them together.
 */

/* ── Page header ─────────────────────────────────────────────────────────── */
.regulations-view .rg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.regulations-view .rg-title {
  margin: 0;
  font-size: var(--fs-stat);
  font-weight: 800;
  color: var(--dark);
  line-height: var(--lh-tight);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.regulations-view .rg-subtitle {
  margin: var(--sp-2) 0 0;
  max-width: 70ch;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: var(--lh-base);
}
/* The article's own title, under the "Art. 16" label. Larger than a subtitle —
   it is the name of the thing, not commentary on it. */
.regulations-view .rg-article-title {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-section);
  font-weight: 700;
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
.regulations-view .rg-head-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
/* v2's page eyebrow above the title. */
.regulations-view .rg-eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}

/* v2's regulation info bar: name, state, in-force date, and the count on the right. */
.regulations-view .rg-info-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  padding: 0.55rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-md);
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.regulations-view .rg-info-name { font-size: var(--fs-body); font-weight: 700; color: var(--dark); }
.regulations-view .rg-tag {
  padding: 0.08rem 0.45rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-solid);
  font-size: var(--fs-label);
  font-weight: 600;
}
.regulations-view .rg-tag--active { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
.regulations-view .rg-info-count { margin-left: auto; font-family: var(--mono); }

/* The glossary's "No terms match" line while filtering as you type. */
.regulations-view .rg-gloss-filter-empty {
  padding: 2.5rem;
  text-align: center;
  font-size: var(--fs-body);
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-md);
}
.regulations-view .rg-gloss-filter-empty[hidden],
.regulations-view .rg-gloss-section[hidden],
.regulations-view .rg-gloss-row[hidden] { display: none; }

/* ── Vertical rhythm ─────────────────────────────────────────────────────── */
.regulations-view > .ds-panel,
.regulations-view > .ds-callout,
.regulations-view > .rg-section,
.regulations-view > .rg-cardgrid,
.regulations-view > .rg-para,
.regulations-view > .rg-footnav { margin-bottom: var(--sp-5); }
.regulations-view > :last-child { margin-bottom: 0; }

/* ── Section heading on the app background ───────────────────────────────────
 * The hub groups frameworks by availability. These sit between card grids, so
 * they are page furniture rather than panel chrome.
 */
.regulations-view .rg-section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-section);
  font-weight: 800;
  color: var(--dark);
}
.regulations-view .rg-section-sub {
  margin: 0 0 var(--sp-4);
  max-width: 70ch;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

/* ── Card grid (the frameworks hub) ──────────────────────────────────────── */
/* auto-FILL, not auto-fit. auto-fit collapses the empty tracks, so a group with
   one card in it — "Active frameworks" today has exactly one — stretches that
   card the full width of the page and turns its primary button into a blue bar
   the width of the viewport. auto-fill keeps the tracks, so a lone card is card
   sized and the group still reflows correctly when a second one is added. */
.regulations-view .rg-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}
/* A framework card is a .ds-panel that has to bottom-align its action, so the
   body grows and the footer is pinned. */
.regulations-view .rg-cardgrid .ds-panel {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.regulations-view .rg-cardgrid .ds-panel__body { flex: 1 1 auto; }
.regulations-view .rg-card-foot {
  padding: var(--sp-4) 1.1rem;
  border-top: 1px solid var(--border-solid);
}
.regulations-view .rg-card-foot .ds-btn { width: 100%; justify-content: center; }
.regulations-view .rg-card-name {
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--dark);
}
.regulations-view .rg-card-meta {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.regulations-view .rg-card-desc {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

/* Inline stat row inside a framework card — articles / obligations / scenarios.
   Same box-shadow divider treatment as the operations stat strip, and for the
   same reason: this grid wraps. */
.regulations-view .rg-cardstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  margin-top: var(--sp-4);
  border-top: 1px solid var(--border-solid);
  overflow: hidden;
}
.regulations-view .rg-cardstat {
  padding: var(--sp-3) var(--sp-2) 0;
  text-align: center;
  box-shadow: 1px 0 0 var(--border-solid);
}
.regulations-view .rg-cardstat-value {
  font-family: var(--mono);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--dark);
}
.regulations-view .rg-cardstat-label {
  margin-top: var(--sp-1);
  font-size: var(--fs-label);
  color: var(--text-muted);
}

/* ── Glossary: the tools row ─────────────────────────────────────────────────
 * The search box and the A–Z strip on one line (App v2, design sweep item 6). The
 * search was a labelled `.ds-field` plus a Search button plus a Clear button —
 * three controls above a list you scan, where the strip beside it is the one you
 * actually navigate with.
 */
.regulations-view .rg-gloss-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.regulations-view .rg-gloss-tools .rg-search { flex: 0 0 33%; }

/* ── A–Z jump bar (glossary) ─────────────────────────────────────────────── */
.regulations-view .rg-azbar {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  gap: var(--sp-1);
  overflow-x: auto;
  padding: 0.28rem 0.55rem;
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-sm);
}
/* Deliberately not .ds-btn: 26 of them in a row is a keyboard, not 26 actions,
   and at button weight the bar outshouts the terms it indexes. */
.regulations-view .rg-az {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.15rem 0.3rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--blue);
  border-radius: var(--r-xs);
  text-decoration: none;
}
.regulations-view .rg-az:hover { background: var(--blue-pale); }
/* Inert, not absent: the strip keeps its shape as a search narrows the list, so a
   letter going quiet reads as "nothing under H" rather than as the bar reflowing. */
.regulations-view .rg-az--off { color: var(--text-sub); }

/* ── Glossary: letter sections and term rows ─────────────────────────────────
 * A row per term inside one bordered list per letter. It was a `.ds-panel` per
 * term, and at 60-odd terms that is 60 bordered surfaces down a page carrying one
 * line of prose each — the borders came to outnumber the definitions.
 */
.regulations-view .rg-gloss-section { margin-bottom: var(--sp-5); }
.regulations-view .rg-gloss-letter {
  margin-bottom: var(--sp-3);
  font-family: var(--mono);
  font-size: var(--fs-section);
  font-weight: 800;
  color: var(--dark);
}
.regulations-view .rg-gloss-list {
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.regulations-view .rg-gloss-row + .rg-gloss-row { border-top: 1px solid var(--border-solid); }
.regulations-view .rg-gloss-row-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2.2fr auto 1rem;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  list-style: none;
}
.regulations-view .rg-gloss-row-head::-webkit-details-marker { display: none; }
.regulations-view .rg-gloss-row-head:hover { background: var(--blue-pale); }
.regulations-view .rg-gloss-row-head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.regulations-view .rg-gloss-term {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--dark);
}
.regulations-view .rg-gloss-def {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: var(--lh-base);
  min-width: 0;
}
/* The explanation arrives as a <p> from the corpus. In a row it is the row. */
.regulations-view .rg-gloss-def p { margin: 0; }
.regulations-view .rg-gloss-src {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
}
.regulations-view .rg-gloss-chev { color: var(--text-sub); }
.regulations-view .rg-gloss-chev .ds-icon { transition: transform var(--dur-base) var(--ease-ui); }
.regulations-view .rg-gloss-row[open] .rg-gloss-chev .ds-icon { transform: rotate(180deg); }
.regulations-view .rg-gloss-body {
  padding: 0 var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border);
}

/* The official regulation text, quoted. Recessed so it reads as cited material
   rather than the app's own words. */
.regulations-view .rg-quote {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  background: var(--gray-bg);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-md);
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--dark);
}

/* ── Article list ────────────────────────────────────────────────────────── */
/* The article code — mono and abbreviated ("Art. 16"), per convention 3. */
.regulations-view .rg-ref {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}
.regulations-view .rg-link { color: var(--blue); text-decoration: none; font-weight: 600; }
.regulations-view .rg-link:hover { text-decoration: underline; }
.regulations-view .rg-muted { color: var(--text-muted); }
/* The chapter chip on an article row (App v2 `.art-ch-badge`, design sweep item 4).
   Quiet on purpose: it is a grouping label, not the row's subject, so it must not
   compete with the mono blue `.rg-ref` beside it. */
.regulations-view .rg-chapter {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--gray-bg);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-xs);
  padding: 0.1rem 0.42rem;
  white-space: nowrap;
}
/* The obligation count on an article row (App v2 `.art-obl-n`, design sweep item 4).
   Mono because it is a number to compare down a column, not prose to read. */
.regulations-view .rg-count {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  padding: 0.1rem 0.42rem;
  border-radius: var(--r-xs);
}
.regulations-view .rg-count--has {
  color: var(--blue);
  background: var(--blue-pale);
  border: 1px solid var(--blue-light);
}
.regulations-view .rg-count--none { color: var(--text-sub); }
/* The article row's ref and title, typed as All Obligations types them (design sweep
   item 4): mono ref in the muted subdued weight, the title beside it as the row's
   subject. The title was a blue link and is not one any more — the row already has an
   affordance at its end, and a second blue thing per row made the ref and the title
   compete for the same job. */
.regulations-view .rg-art-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-sub);
  white-space: nowrap;
}
/* The preamble entry has no article number. Quieter than a ref, like the dash the
   Chapter and Obligations columns draw for the same reason. */
.regulations-view .rg-art-num--none { color: var(--text-sub); font-weight: 400; }
.regulations-view .rg-art-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--dark);
  line-height: var(--lh-snug);
}
.regulations-view .rg-art-row:hover .rg-art-title { color: var(--blue); }
/* The whole row opens its article (regulations-articles.js); a gated row carries no target. */
.regulations-view .rg-art-row[data-href] { cursor: pointer; }
.regulations-view .rg-row-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.25rem;
  color: var(--text-muted);
}
.regulations-view .rg-art-row:hover .rg-row-arrow,
.regulations-view .rg-row-arrow:focus-visible { color: var(--blue); }
.regulations-view .rg-art-empty td {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-meta);
}

/* The panel-head filter box (App v2 `.search-wrap` / `#art-search`). Same geometry as
   All Obligations' `.obl-search`, which is the other list this app draws. */
.regulations-view .rg-search { position: relative; width: 230px; max-width: 100%; }
.regulations-view .rg-search__icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-sub);
  pointer-events: none;
}
.regulations-view .rg-search .ds-input { padding-left: 1.9rem; }
.regulations-view .rg-cell-sub {
  margin-top: 0.1rem;
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.regulations-view .rg-hint {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: var(--lh-base);
}
.regulations-view .rg-hint:first-child { margin-top: 0; }

/* The instrument's own text (COD-408 AC8): root-level blocks no article contains —
   front matter above the table, the closing formula below it. Prose, not rows: body type
   for the front matter, meta type for the closing formula, no ref column, no count.
   The panel stack's own gap spaces the two panels. */
.regulations-view .rg-act-text + .rg-act-text { margin-top: var(--sp-3); }
.regulations-view .rg-act-text-p { margin: 0; line-height: var(--lh-base); }
/* Type is set on the panel body, not on the paragraph, so a block's sub-items — rendered
   by the article page's recursive include — inherit it and a continuation line of the
   closing formula is not larger than the formula itself. */
.regulations-view .rg-act-head .ds-panel__body { font-size: var(--fs-body); }
.regulations-view .rg-act-foot .ds-panel__body { font-size: var(--fs-meta); color: var(--text-muted); }

/* The anonymous paywall row, inserted mid-table. It spans every column and is
   the one place on this screen that is allowed to look like an advert. */
.regulations-view .rg-gate > td { padding: 0; }
.regulations-view .rg-gate-body {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  flex-wrap: wrap;
  padding: var(--sp-5) 1.1rem;
  background: var(--blue-pale);
  border-top: 1px solid var(--border-solid);
  border-bottom: 1px solid var(--border-solid);
}
.regulations-view .rg-gate-icon { color: var(--blue); flex-shrink: 0; margin-top: 0.15rem; }
.regulations-view .rg-gate-text { flex: 1 1 320px; min-width: 0; }
.regulations-view .rg-gate-title {
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: var(--sp-2);
}
.regulations-view .rg-gate-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

/* ── Search results ──────────────────────────────────────────────────────── */
.regulations-view .rg-result {
  padding: var(--sp-5) 1.1rem;
  border-bottom: 1px solid var(--border-solid);
}
.regulations-view .rg-result:last-child { border-bottom: none; }
.regulations-view .rg-result-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.regulations-view .rg-result-title { font-size: var(--fs-body); font-weight: 700; }
.regulations-view .rg-snippet {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--gray-bg);
  border-radius: var(--r-md);
  font-size: var(--fs-meta);
  line-height: var(--lh-base);
  color: var(--dark);
}
.regulations-view .rg-snippet-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* ── Article reader ──────────────────────────────────────────────────────────
 * App v2's `view-reg-article` (design sweep item 5). The screen was a panel of
 * legal text beside a panel of evaluation scenarios, per paragraph — 2N cards
 * down a page whose subject is one continuous piece of legal text. It is now one
 * surface, paragraphs separated by a rule, with each paragraph's obligations in a
 * rail on the right.
 *
 * The scenarios are gone from the page entirely, not hidden: they are read on an
 * obligation's own page against a platform's evidence, and this page serves the
 * first ANONYMOUS_ARTICLE_LIMIT articles to anonymous visitors.
 */

/* Top bar: back link on the left, prev/next on the right. */
.regulations-view .rg-artbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.regulations-view .rg-arthead { margin-bottom: var(--sp-5); }
.regulations-view .rg-art-eyebrow {
  font-size: var(--fs-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
  line-height: var(--lh-snug);
}
/* The section half of the eyebrow is context, not the subject — it is often a
   full line on its own, and at the article ref's weight it would out-shout the
   title under it. */
.regulations-view .rg-art-eyebrow-sec { color: var(--text-muted); font-weight: 500; }
/* The reader's and glossary's page title, scoped to the page head. Unscoped, this rule
   shared its selector with Browse Articles' title cell above and, coming later, set every
   row's title at stat size from 2026-09-07 until 2026-09-14. */
.regulations-view .rg-arthead .rg-art-title {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-stat);
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}
.regulations-view .rg-art-obls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.regulations-view .rg-art-obls .ds-icon { color: var(--blue); }

/* One surface for the whole article. */
.regulations-view .rg-artbody {
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-lg);
  padding: 0 var(--sp-5);
  margin-bottom: var(--sp-5);
}
.regulations-view .rg-para {
  border-top: 1px solid var(--border-solid);
  padding: var(--sp-5) 0;
}
.regulations-view .rg-para:first-child { border-top: none; }
.regulations-view .rg-para-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  margin-bottom: var(--sp-3);
  padding: 0.1rem 0.5rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--blue-dark);
  background: var(--blue-pale);
  border: 1px solid var(--blue-light);
  border-radius: var(--r-xs);
}
/* 2fr / 1fr, not auto-fit: the two columns are a text and its annotations, so
   they must not come out equal. Folds to one column below the breakpoint. */
.regulations-view .rg-para-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}

/* The legal text itself — the one place on the screen using the reading scale. */
.regulations-view .rg-para-body {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--dark);
}
.regulations-view .rg-para-body > :last-child { margin-bottom: 0; }
.regulations-view .rg-para-side { min-width: 0; }

/* Enumerated sub-items. The old version tinted the rule by nesting depth
   through four Bootstrap colours, which spent four hues on a structural cue.
   One rule, indented per level, says the same thing without the palette. */
.regulations-view .rg-subitem {
  margin-top: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--border-solid);
}
.regulations-view .rg-subitem--d1 { margin-left: var(--sp-4); }
.regulations-view .rg-subitem--d2 { margin-left: var(--sp-6); }
.regulations-view .rg-subitem--d3 { margin-left: var(--sp-7); }
.regulations-view .rg-subitem-id { font-weight: 700; color: var(--blue); }
/* Continuation text with no id — flows with the paragraph, no rule at all. */
.regulations-view .rg-subitem--flow { margin-top: var(--sp-3); }

/* ── The obligation rail ─────────────────────────────────────────────────── */
.regulations-view .rg-subhead {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.regulations-view .rg-para-obls-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.regulations-view .rg-para-obls-count { font-weight: 400; color: var(--text-sub); }

/* No grey background (item 5): white on the page ground, so an obligation reads
   as a thing standing beside the text rather than as an annotation layered over
   it. It was --gray-bg, which also meant every callout inside it was a second
   surface on a third — the nesting stopped reading at two levels down. */
.regulations-view .rg-obligation {
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-md);
}
.regulations-view .rg-obligation + .rg-obligation { margin-top: var(--sp-3); }
.regulations-view .rg-obligation-head {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--blue-dark);
  margin-bottom: var(--sp-2);
}
.regulations-view .rg-obligation-desc {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--dark);
  line-height: var(--lh-snug);
}
/* The machine identifier. Selectable, quiet, and allowed to break: these run to
   forty characters and a rail is a third of the column. */
.regulations-view .rg-obligation-id {
  margin-top: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-label);
  color: var(--text-sub);
  overflow-wrap: anywhere;
}
.regulations-view .rg-obligation-items {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  font-size: var(--fs-meta);
  color: var(--dark);
}
.regulations-view .rg-obligation-items > li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}
.regulations-view .rg-obligation-items > li + li { margin-top: var(--sp-2); }
.regulations-view .rg-obligation-items .ds-icon { margin-top: 0.2rem; flex-shrink: 0; color: var(--blue); }

/* Statement / evidence guidance, as disclosures. 80 of the corpus's 132
   obligations carry guidance; open by default in a rail this narrow, every one
   of them pushed the legal text beside it off the screen. */
.regulations-view .rg-obligation-note { margin-top: var(--sp-3); }
.regulations-view .rg-obligation-note__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  list-style: none;
}
.regulations-view .rg-obligation-note__toggle::-webkit-details-marker { display: none; }
.regulations-view .rg-obligation-note__toggle:hover { text-decoration: underline; }
.regulations-view .rg-obligation-note__toggle .ds-icon { transition: transform var(--dur-base) var(--ease-ui); }
.regulations-view .rg-obligation-note[open] .rg-obligation-note__toggle .ds-icon { transform: rotate(180deg); }
.regulations-view .rg-obligation-note__label {
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.regulations-view .rg-obligation-note__body {
  padding-left: var(--sp-3);
  border-left: 2px solid var(--border-solid);
  font-size: var(--fs-meta);
  color: var(--dark);
  line-height: var(--lh-base);
}
.regulations-view .rg-obligation-note__body > :last-child { margin-bottom: 0; }
.regulations-view .rg-obligation-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-solid);
}

/* Priority on an obligation footer is the shared ds-prio (design-system-components.css).
   It was a solid sky-blue chip on a fourth palette, whose colour thresholds disagreed with
   the label's; see the template for what that produced. */

/* "No obligations — <reason>". 409 of the corpus's paragraphs have none, so
   this is the common state of the rail and has to read as a stated fact rather
   than as a column that failed to render. */
.regulations-view .rg-para-no-obl {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--gray-bg);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-sm);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: var(--lh-base);
}
.regulations-view .rg-para-no-obl .ds-icon { margin-top: 0.15rem; flex-shrink: 0; }
.regulations-view .rg-para-no-obl strong { color: var(--text-muted); }

/* ── Related evaluation cases ────────────────────────────────────────────── */
.regulations-view .rg-scengroup-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
/* The count beside a mono ALL-CAPS label. Needs an explicit separator: at the
   same size, uppercase mono running straight into sentence-case sans reads as
   one run of text ("AUTHORITY CONTACT DESIGNATION 1 scenario"), and whitespace
   alone is not enough contrast to break it. */
.regulations-view .rg-scengroup-count {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}
.regulations-view .rg-scengroup-head .rg-scengroup-count::before { content: "· "; }

.regulations-view .rg-chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }

/* `.rg-expander` was here — the "Expand all" control over the scenario column,
   which went with the column (design sweep item 5). The chevron-rotation pattern
   it established survives on `.rg-obligation-note__toggle` and `.rg-details`. */

/* Toggled by script onto elements that carry their own display from the
   component layer; at equal specificity the later rule wins and they never
   hide. The !important is load-bearing, not laziness. */
.regulations-view .is-hidden,
.rg-totop.is-hidden { display: none !important; }

/* ── Article prev/next navigation ────────────────────────────────────────── */
.regulations-view .rg-artnav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
/* The current article, between the two arrows. Not a button — it does nothing,
   and a disabled button in a nav group reads as "temporarily unavailable". */
.regulations-view .rg-artnav-current {
  padding: 0.36rem 0.7rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--gray-bg);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-sm);
}
.regulations-view .rg-footnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ── Related evaluation cases (collapsible <details>) ────────────────────── */
.regulations-view .rg-details { display: block; }
.regulations-view .rg-details > summary {
  list-style: none;
  cursor: pointer;
}
.regulations-view .rg-details > summary::-webkit-details-marker { display: none; }
.regulations-view .rg-details > summary .ds-icon { transition: transform var(--dur-base) var(--ease-ui); }
.regulations-view .rg-details[open] > summary .ds-icon { transform: rotate(180deg); }
.regulations-view .rg-platgroup + .rg-platgroup {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-solid);
}
.regulations-view .rg-paragroup + .rg-paragroup { margin-top: var(--sp-5); }

/* ── Unlock / coming-soon screen ─────────────────────────────────────────── */
.regulations-view .rg-unlock { max-width: 42rem; margin: 0 auto; text-align: center; }
.regulations-view .rg-unlock-icon { color: var(--blue); }
.regulations-view .rg-unlock-cta {
  margin-top: var(--sp-5);
  padding: var(--sp-6);
  background: var(--gray-bg);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-md);
}
.regulations-view .rg-unlock-about {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-solid);
  text-align: left;
}

/* ── Scroll-to-top ───────────────────────────────────────────────────────── */
.regulations-view .rg-totop {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-sticky);
}

/* ── Narrow viewport ─────────────────────────────────────────────────────── */
/* The rail stops being a rail before the page stops being wide. At 2fr/1fr a
   1000px viewport gives the obligation column ~280px, which is narrower than the
   ids and chips inside it — every card wraps its footer onto two rows and the
   legal text beside it loses a third of its measure for no gain. Below this it
   stacks: text first, then the obligations for that paragraph, which is the order
   they are read in anyway. */
@media (max-width: 1100px) {
  .regulations-view .rg-para-row { grid-template-columns: 1fr; gap: var(--sp-4); }
}

@media (max-width: 700px) {
  .regulations-view .rg-head { flex-direction: column; align-items: stretch; }
  .regulations-view .rg-search { width: 100%; }
  .regulations-view .rg-gloss-tools { flex-direction: column; align-items: stretch; }
  .regulations-view .rg-gloss-tools .rg-search { flex: 1 1 auto; }
  .regulations-view .rg-gloss-row-head { grid-template-columns: 1fr auto; row-gap: var(--sp-2); }
  .regulations-view .rg-gloss-def { grid-column: 1 / -1; }
  .regulations-view .rg-footnav { flex-direction: column; align-items: stretch; }
  .regulations-view .rg-gate-actions { flex-direction: row; flex-wrap: wrap; }
  .regulations-view .rg-subitem--d1,
  .regulations-view .rg-subitem--d2,
  .regulations-view .rg-subitem--d3 { margin-left: var(--sp-3); }
}