/*
 * 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;
}

/* ── 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);
}

/* ── Search bar ──────────────────────────────────────────────────────────── */
.regulations-view .rg-searchbar {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-end;
  flex-wrap: wrap;
}
.regulations-view .rg-searchbar .ds-field { flex: 1 1 220px; margin: 0; min-width: 0; }

/* ── A–Z jump bar (glossary) ─────────────────────────────────────────────── */
.regulations-view .rg-azbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
/* 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.9rem;
  padding: 0.2rem 0.35rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--blue);
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-xs);
  text-decoration: none;
}
.regulations-view .rg-az:hover { border-color: var(--blue); }
.regulations-view .rg-az--off { color: var(--text-sub); background: var(--gray-bg); }

/* ── Glossary ────────────────────────────────────────────────────────────── */
.regulations-view .rg-letter {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-solid);
  font-family: var(--mono);
  font-size: var(--fs-section);
  font-weight: 800;
  color: var(--dark);
}
.regulations-view .rg-term-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--dark);
}
.regulations-view .rg-prose {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--dark);
}
.regulations-view .rg-prose > :last-child { margin-bottom: 0; }
/* 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);
}

/* Disclosure toggle — a link that opens a collapse. The chevron rotates off
   aria-expanded, which the Bootstrap collapse plugin maintains, so no JS
   touches the icon. This is the pattern that replaces swapping bi- classes. */
.regulations-view .rg-disclose {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  cursor: pointer;
}
.regulations-view .rg-disclose .ds-icon { transition: transform var(--dur-base) var(--ease-ui); }
.regulations-view .rg-disclose[aria-expanded="true"] .ds-icon { transform: rotate(90deg); }

/* ── 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); }
.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 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 detail: the two-column paragraph row ────────────────────────────
 * Legal text on the left, its evaluation scenarios on the right. Folds to one
 * column below the breakpoint; align-items:stretch so both panels share a
 * height and the pairing stays legible when the text is much longer.
 */
.regulations-view .rg-para {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}
.regulations-view .rg-para > .ds-panel { margin-bottom: 0; }

/* The legal text itself — the one place on the screen using the reading scale. */
.regulations-view .rg-legal {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--dark);
}
.regulations-view .rg-legal > :last-child { margin-bottom: 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); }

/* ── Obligation card (left column) ───────────────────────────────────────── */
.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-obligations { margin-top: var(--sp-5); }
.regulations-view .rg-obligation {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  background: var(--gray-bg);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-md);
}
/* Clickable only when it has scenarios to focus; the cursor is set in the
   template's own class rather than here so a non-interactive card cannot
   inherit a pointer it does nothing with. */
.regulations-view .rg-obligation--linked { cursor: pointer; }
.regulations-view .rg-obligation--linked:hover { border-color: var(--blue-light); }
.regulations-view .rg-obligation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.regulations-view .rg-obligation-tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.regulations-view .rg-obligation-desc {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--dark);
  line-height: var(--lh-snug);
}
.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 callouts inside an obligation. A left accent
   bar rather than another tinted box — a tinted box inside a tinted card is
   two surfaces deep and the nesting stops reading. */
.regulations-view .rg-obligation-note {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: var(--fs-meta);
  color: var(--dark);
}
.regulations-view .rg-obligation-note--attest { border-left-color: var(--blue-light); }
.regulations-view .rg-obligation-note--evidence { border-left-color: var(--teal); }
.regulations-view .rg-obligation-note__label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.regulations-view .rg-obligation-count {
  margin-top: var(--sp-3);
  font-size: var(--fs-label);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ── Scenario column (right) ─────────────────────────────────────────────── */
.regulations-view .rg-scengroup {
  padding: var(--sp-4);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-md);
}
.regulations-view .rg-scengroup + .rg-scengroup { margin-top: var(--sp-4); }
/* Highlighted when its obligation card is clicked — the one moment the two
   columns are explicitly tied together. */
.regulations-view .rg-scengroup.is-focused { border-color: var(--blue); background: var(--blue-pale); }
.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-scenario + .rg-scenario { margin-top: var(--sp-2); }
.regulations-view .rg-scenario-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-meta);
  color: var(--dark);
  text-align: left;
  width: 100%;
}
.regulations-view .rg-scenario-head:hover { border-color: var(--blue-light); }
/* One chevron, rotated — not two glyphs swapped by script. The JS toggles
   aria-expanded and nothing else, so it never has to know what an icon is. */
.regulations-view .rg-scenario-head .ds-icon {
  color: var(--text-sub);
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-ui);
}
.regulations-view .rg-scenario-head[aria-expanded="true"] .ds-icon { transform: rotate(180deg); }
.regulations-view .rg-scenario-body {
  margin-top: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--border-solid);
  border-left: 3px solid var(--teal);
  border-radius: var(--r-sm);
}
.regulations-view .rg-scenario-section { margin-top: var(--sp-4); }
.regulations-view .rg-scenario-section:first-child { margin-top: 0; }
.regulations-view .rg-scenario-text {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  white-space: pre-line;
  line-height: var(--lh-base);
}
.regulations-view .rg-chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }

/* ── Expand/collapse control ─────────────────────────────────────────────────
 * A single chevron that rotates, rather than swapping an "expand" glyph for a
 * "collapse" one. Two glyphs would mean script choosing between them, which is
 * exactly the coupling that broke when the icons stopped being a font — and the
 * label beside it ("Expand all" / "Collapse all") already carries the wording,
 * so the icon only has to carry direction.
 */
.regulations-view .rg-expander .ds-icon { transition: transform var(--dur-base) var(--ease-ui); }
.regulations-view .rg-expander[aria-expanded="true"] .ds-icon { transform: rotate(180deg); }

/* 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 ─────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .regulations-view .rg-head { flex-direction: column; align-items: stretch; }
  .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); }
}