/* ============================================================
 * Regulation pages - extracted from landing/00_landing.html
 * Powers: /regulations index, /regulations/[country],
 *         /regulations/wad, /regulations/eaa,
 *         /regulations/enforcement, /regulations/compliance-checker
 * ============================================================ */

/* ===== REGULATION ===== */
/* Two surfaces:
   1. `.regulation-section` — the slim teaser block on the landing page
      (overline, title, lead, duo cards, "Explore regulation" CTA).
   2. `#screen-regulation` — the full dedicated regulation page with
      countries grid, comparison table, timeline and topic explainers.
   Both share the `.regulation-*` styles defined below so the visual
   language is identical. */
.regulation-section { padding: 88px 0; background: #FAFAFA; }
/* Dedicated regulation page — header band + content sections. */
.regulation-page-header {
  background: #FAFAFA;
  border-bottom: 1px solid #E4E5E7;
  padding: 48px 0 44px;
}
.regulation-page-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 700; font-size: 32px; letter-spacing: -0.02em;
  margin: 0 0 12px; color: #1A1A2E; line-height: 1.2;
}
.regulation-page-lede {
  font-family: 'Inter', sans-serif;
  font-size: 16px; color: #4F575E; max-width: 760px;
  margin: 0 0 24px; line-height: 1.55;
}
.regulation-page-lede a {
  color: #2D7A0E;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}
.regulation-page-lede a:hover { color: #1A5E04; text-decoration-thickness: 2px; }
.regulation-page-cta { margin: 0; }
.regulation-page-section {
  padding: 56px 0;
}
.regulation-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin: 18px 0 0; font-size: 12px; color: #636B74;
  font-family: 'Inter', sans-serif;
}
.regulation-meta span::before { content: "·"; margin-right: 8px; color: #C6CAD0; }
.regulation-meta span:first-child::before { content: none; }
.regulation-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #2D7A0E; color: #FFFFFF;
  padding: 12px 20px; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: background 120ms ease;
}
.regulation-cta:hover { background: #1A5E04; }
.regulation-cta-row {
  margin-top: 22px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.regulation-cta-hint {
  font-family: 'Inter', sans-serif; font-size: 12px; color: #636B74;
}
/* Sub-headings inside the regulation section */
.regulation-subhead {
  font-family: 'Barlow', sans-serif;
  font-weight: 700; font-size: 20px; letter-spacing: -0.01em;
  margin: 56px 0 8px; color: #1A1A2E;
}
.regulation-subhead-lead {
  font-family: 'Inter', sans-serif; font-size: 14px; color: #4F575E;
  margin: 0 0 18px; max-width: 720px; line-height: 1.55;
}

/* WAD / EAA directive cards — new structure modeled on .preview-summary.
   Heading ("Public sector" / "Private sector") sits ABOVE the card; the
   card holds the regulation title + meta + label-value rows. Labels are
   sentence-case (not uppercase) so they read like prose, not stamps. */
.regulation-sectors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) {
  .regulation-sectors-grid { grid-template-columns: 1fr; gap: 24px; }
}
/* On the country detail page the right column already has the
   quick-facts aside, so a 2-up directive grid leaves the cards too
   narrow for the "In Latvia" sub-block. Stack them vertically. */
.regulation-country-page .regulation-sectors-grid {
  grid-template-columns: 1fr;
  gap: 18px;
}
.regulation-sector { margin: 0; }
/* Small tag inside the directive card header — "Public sector" / "Private sector"
   in the green-on-light-green pill (same pattern as .modal-method-badge.is-current). */
.regulation-directive-tag {
  display: inline-block;
  background: #E8F5E1; color: #1A5E04;
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 6px;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 8px;
}
.regulation-directive-card {
  background: #FFFFFF;
  border: 1.5px solid #E4E5E7;
  border-radius: 12px;
  overflow: hidden;
}
/* When the card is wrapped in an `<a>` (full-page version), inherit the
   anchor's color resets and add hover + a trailing "Read more" affordance
   on the card itself. */
a.regulation-directive-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  border: 1.5px solid #E4E5E7;
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
}
a.regulation-directive-card-link:hover,
a.regulation-directive-card-link:focus-visible {
  border-color: #2D7A0E;
  box-shadow: 0 2px 12px rgba(45,122,14,0.08);
  outline: none;
}
a.regulation-directive-card-link .regulation-directive-card {
  border: none; border-radius: 0; background: transparent;
}
.regulation-directive-readmore {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px;
  padding: 10px 18px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500; color: #2D7A0E;
  background: #FAFAFA;
  border-top: 1px solid #F2F2F2;
}
a.regulation-directive-card-link:hover .regulation-directive-readmore { text-decoration: underline; }
/* Direct-link variant — when the readmore band is its own external anchor
   (e.g. "Read the act →" on the country page transposition cards). */
a.regulation-directive-readmore {
  text-decoration: none;
  transition: background 120ms ease;
}
a.regulation-directive-readmore:hover,
a.regulation-directive-readmore:focus-visible {
  background: #F2F2F2;
  text-decoration: underline;
}
/* Inline link next to a regulator name in a directive-card row.
   Matches the row-value text size so it reads as part of the same line,
   not as a smaller "metadata" annotation. */
.regulation-directive-row-value a.reg-inline-link {
  color: #2D7A0E;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-left: 6px;
  white-space: nowrap;
}
.regulation-directive-row-value a.reg-inline-link:hover,
.regulation-directive-row-value a.reg-inline-link:focus-visible {
  text-decoration: underline;
}
/* Footnote-style reference sitting just under a country directive card.
   Tells the reader which EU directive the national act transposes and
   links to its detail page. Lighter weight than the card itself so the
   reader's eye still treats the card as primary. */
.regulation-directive-footnote {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #4F575E;
  margin: 8px 0 0;
  padding: 0 4px;
  line-height: 1.55;
}
/* Higher-specificity copy so the footnote keeps its 12px size inside
   .regulation-country-content (where `.regulation-country-content p` would
   otherwise bump it to 14px). Mirrors the prototype. */
.regulation-country-content p.regulation-directive-footnote {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #4F575E;
  line-height: 1.55;
  margin: 8px 0 0;
  padding: 0 4px;
}
.regulation-directive-footnote a {
  color: #2D7A0E;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.regulation-directive-footnote a:hover,
.regulation-directive-footnote a:focus-visible {
  color: #1A5E04;
  text-decoration-thickness: 2px;
}

.regulation-directive-header {
  padding: 12px 18px 14px;
  border-bottom: 1px solid #F2F2F2;
  background: #FAFBFC;
}
/* Highest-specificity selectors. `.regulation-country-content h3` is
   defined later in this file with the same specificity (0,1,1) as
   `h3.regulation-directive-title`, so the later rule wins on a tie.
   Adding the parent class on the front bumps to (0,2,1) and wins. */
.regulation-country-content h3.regulation-directive-title,
.regulation-country-content h4.regulation-directive-title,
h3.regulation-directive-title,
h4.regulation-directive-title,
.regulation-directive-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 4px; padding: 0; border: none; color: #1A1A2E;
}
/* Title as a separate link inside the header (DS Linked-footer pattern):
   the title can navigate to one destination while the read-more strip points
   elsewhere. Default looks like plain (black) text; hover underlines. */
a.regulation-directive-title-link {
  color: inherit;
  text-decoration: none;
}
a.regulation-directive-title-link:hover,
a.regulation-directive-title-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a.regulation-directive-title-link:focus-visible {
  outline: 3px solid #66BA1E;
  outline-offset: 2px;
  border-radius: 2px;
}
/* Inline translation sitting next to a native-language directive title.
   Matches the title's Barlow + 19px so it balances visually, but
   lighter weight + secondary colour mark it as a parenthetical gloss
   rather than part of the official act name. */
.regulation-directive-title-translation {
  font-family: 'Barlow', sans-serif;
  font-size: 16px; font-weight: 500; color: #636B74;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.regulation-directive-meta {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #4F575E; margin: 0;
}
/* Subtle link on the directive number — taps EUR-Lex without competing
   visually with the directive title above it. */
.regulation-directive-meta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #C6CAD0;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.regulation-directive-meta a:hover,
.regulation-directive-meta a:focus-visible {
  color: #2D7A0E;
  text-decoration-color: #2D7A0E;
  text-decoration-thickness: 2px;
}
.regulation-directive-meta a .ext-arrow {
  font-size: 12px;
  color: #9098A0;
  margin-left: 2px;
}
.regulation-directive-meta a:hover .ext-arrow,
.regulation-directive-meta a:focus-visible .ext-arrow {
  color: #2D7A0E;
}
.regulation-directive-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid #F2F2F2;
  font-family: 'Inter', sans-serif;
}
.regulation-directive-row:last-child { border-bottom: none; }
.regulation-directive-row-label {
  font-size: 14px; font-weight: 500; color: #4F575E;
  line-height: 1.5;
}
.regulation-directive-row-value {
  font-size: 14px; color: #1A1A2E; line-height: 1.5;
}
/* Bullet list inside a directive row value — used for the EAA category list. */
.regulation-directive-row-value ul {
  list-style: disc;
  padding-left: 20px;
  margin: 6px 0 0;
}
.regulation-directive-row-value ul li {
  padding: 2px 0;
  color: #1A1A2E;
}
.regulation-directive-row-value ul li::marker { color: #9098A0; }
@media (max-width: 640px) {
  .regulation-directive-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 12px 18px;
  }
  .regulation-directive-header { padding: 16px 18px; }
}

/* Country grid */
.regulation-countries {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
}
@media (max-width: 1000px) { .regulation-countries { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 700px) { .regulation-countries { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 460px) { .regulation-countries { grid-template-columns: repeat(3, 1fr); } }
.regulation-country {
  background: #FFFFFF; padding: 16px 10px; border-radius: 8px;
  text-align: center; transition: border-color 120ms ease, background 120ms ease;
  border: 1.5px solid #E4E5E7; cursor: pointer;
  color: #1A1A2E; display: block; text-decoration: none;
}
.regulation-country:hover {
  border-color: #2D7A0E; background: #FAFAFA;
}
.regulation-country .flag-img {
  width: 32px; height: 22px; border-radius: 3px; object-fit: cover;
  box-shadow: 0 1px 1px rgba(26,26,46,0.15); display: inline-block;
}
.regulation-country .name {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; margin-top: 8px; color: #1A1A2E;
}

/* Comparison table */
.regulation-table-wrap { overflow-x: auto; }
.regulation-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Inter', sans-serif; font-size: 14px;
  background: #FFFFFF; border: 1px solid #E4E5E7;
  border-radius: 8px; overflow: hidden;
}
.regulation-table th, .regulation-table td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid #EFF1F3;
}
.regulation-table th {
  background: #FAFAFA; font-weight: 600; color: #3D4449;
  white-space: nowrap; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-family: 'Barlow', sans-serif;
}
.regulation-table td .law { color: #1A1A2E; }
.regulation-table td .ref {
  font-size: 12px; color: #636B74; display: block; margin-top: 2px;
}
.regulation-table td .country-cell {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
}
.regulation-table td .country-cell a { color: #1A1A2E; text-decoration: none; }
.regulation-table td .country-cell a:hover { color: #2D7A0E; text-decoration: underline; }
.regulation-table td .country-cell img {
  width: 22px; height: 16px; border-radius: 2px; object-fit: cover;
  box-shadow: 0 1px 1px rgba(26,26,46,0.15);
}
.regulation-table tr:last-child td { border-bottom: none; }
.regulation-table tr:hover { background: #FAFAFA; }
.regulation-see-all {
  margin-top: 16px;
  font-family: 'Inter', sans-serif; font-size: 14px;
}
.regulation-see-all a {
  color: #2D7A0E; font-weight: 600; text-decoration: none;
}
.regulation-see-all a:hover { text-decoration: underline; }

/* Timeline */
.regulation-timeline {
  padding-left: 30px; position: relative; max-width: 720px;
}
.regulation-timeline::before {
  content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: #DCEBCE;
}
.regulation-timeline-item { position: relative; margin-bottom: 22px; }
.regulation-timeline-item:last-child { margin-bottom: 0; }
.regulation-timeline-item::before {
  content: ""; position: absolute; left: -26px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #FFFFFF; border: 2px solid #2D7A0E;
}
.regulation-timeline-item .date {
  font-family: 'Barlow', sans-serif;
  font-weight: 700; color: #1A5E04; font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.regulation-timeline-item .event {
  font-family: 'Inter', sans-serif;
  font-weight: 600; margin-top: 2px; font-size: 14px; color: #1A1A2E;
}
.regulation-timeline-item .detail {
  font-family: 'Inter', sans-serif;
  color: #4F575E; font-size: 14px; margin-top: 4px; line-height: 1.55;
}

/* Topic pillars */
.regulation-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 900px) { .regulation-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .regulation-pillars { grid-template-columns: 1fr; } }
.regulation-pillar {
  background: #FFFFFF; padding: 18px; border-radius: 8px;
  border: 1px solid #E4E5E7;
  transition: border-color 120ms ease, background 120ms ease;
}
.regulation-pillar:hover { border-color: #2D7A0E; background: #FAFAFA; }
.regulation-pillar h3,
.regulation-pillar h4 {
  font-family: 'Barlow', sans-serif;
  font-size: 15px; font-weight: 700; margin: 0 0 6px; color: #1A1A2E;
  letter-spacing: -0.005em;
}
.regulation-pillar p {
  font-family: 'Inter', sans-serif;
  color: #4F575E; font-size: 14px; margin: 0 0 10px; line-height: 1.5;
}
.regulation-pillar a {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; color: #2D7A0E; text-decoration: none;
}
.regulation-pillar a:hover { text-decoration: underline; }

/* Contextual checker banner — sits between the directive duo and the
   country grid. Soft green tint so it reads as a friendly nudge, not a
   hard sales push. Icon on the left, copy in the middle, CTA on the right. */
.regulation-checker-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: #F4FAEF;
  border: 1px solid #DCEBCE;
  border-radius: 12px;
  margin: 36px 0 0;
  flex-wrap: wrap;
}
.regulation-checker-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #E8F5E1;
  color: #2D7A0E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.regulation-checker-banner-body {
  flex: 1;
  min-width: 240px;
}
.regulation-checker-banner-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1A1A2E;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.regulation-checker-banner-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #4F575E;
  margin: 0;
  line-height: 1.5;
}
.regulation-checker-banner .btn-primary { flex-shrink: 0; }

/* Status note (under country grid) */
.regulation-status-note {
  background: #E8F5E1; border-left: 3px solid #2D7A0E;
  padding: 14px 18px; border-radius: 8px; margin-top: 22px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #1A5E04; line-height: 1.55;
}
.regulation-status-note strong { font-weight: 700; }

/* ===== REGULATION — COUNTRY DETAIL PAGE ===== */
/* Two-column reference layout: main legal content + a sticky quick-facts
   aside. Mirrors the colleague's per-country hub draft, adapted to use
   the prototype's design tokens (Barlow/Inter, #2D7A0E, #1A1A2E). */
.regulation-country-breadcrumb {
  font-family: 'Inter', sans-serif;
  font-size: 16px; color: #636B74; margin-bottom: 12px;
}
.regulation-country-breadcrumb a {
  color: #636B74; text-decoration: none;
}
.regulation-country-breadcrumb a:hover { color: #2D7A0E; text-decoration: underline; }
.regulation-country-breadcrumb .sep { margin: 0 8px; color: #C6CAD0; }
.regulation-country-title {
  display: flex; align-items: center; gap: 14px;
  font-family: 'Barlow', sans-serif;
  font-weight: 700; font-size: 32px; letter-spacing: -0.02em;
  margin: 0 0 8px; color: #1A1A2E; line-height: 1.2;
}
.regulation-country-title .flag-img {
  width: 48px; height: 36px; border-radius: 4px; object-fit: cover;
  box-shadow: 0 1px 2px rgba(26,26,46,0.15); flex-shrink: 0;
}
.regulation-country-title .native {
  font-family: 'Inter', sans-serif;
  font-size: 17px; color: #636B74; font-weight: 500;
}
.regulation-country-layout {
  display: grid; grid-template-columns: 1fr 280px;
  gap: 40px; align-items: start;
}
@media (max-width: 900px) {
  .regulation-country-layout { grid-template-columns: 1fr; }
}
/* Reset the global `section { padding: 80px 0 }` rule for the nested
   content sections — they're block-level groupings inside an already-
   padded outer `.regulation-page-section`, not standalone bands. */
/* Spacing between content sections inside a directive/country page.
   28px felt too tight against the larger h2 headings — bumped to 44px
   so each h2 reads as a clear topic break. */
.regulation-country-content section { padding: 0; margin-bottom: 44px; }
.regulation-country-content section:last-child { margin-bottom: 0; }
/* Reserve room above each anchor target so the sticky `.web-header`
   doesn't sit on top of the heading when the TOC scrolls to it. */
.regulation-country-content section[id] { scroll-margin-top: 88px; }
/* Tighten the header → content transition on the country detail screen.
   The default `.regulation-page-header` + `.regulation-page-section`
   padding stacks to ~100px of empty space, which feels wrong on a dense
   reference page. */
.regulation-country-page .regulation-page-header { padding: 36px 0 24px; }
.regulation-country-page .regulation-page-header .regulation-page-lede { margin-bottom: 0; }
.regulation-country-page .regulation-page-section { padding: 28px 0 56px; }
/* Global heading-spacing convention: ~3× more space ABOVE the heading
   than below, so each section feels visually separated from the previous
   one but the heading sits tight against its own content. */
.regulation-country-content h2 {
  font-family: 'Barlow', sans-serif;
  font-weight: 700; font-size: 20px; letter-spacing: -0.01em;
  margin: 56px 0 20px; color: #1A1A2E;
}
.regulation-country-content h3 {
  font-family: 'Barlow', sans-serif;
  font-weight: 700; font-size: 18px; margin: 22px 0 8px; color: #1A1A2E;
}
.regulation-country-content h4 {
  font-family: 'Barlow', sans-serif;
  font-size: 16px; font-weight: 600; margin: 16px 0 6px;
  color: #1A1A2E; letter-spacing: -0.005em; text-transform: uppercase;
}
.regulation-country-content p {
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #1A1A2E; line-height: 1.6; margin: 0 0 12px;
}
/* Default-state and hover combined below with the ol/li selectors. */
/* Both ordered and unordered lists share styling. Without explicit
   ol typography, browser defaults render the numbered list at body
   size (16px) instead of the 14px used elsewhere. */
.regulation-country-content ul,
.regulation-country-content ol {
  margin: 0 0 12px 20px; padding: 0;
  font-family: 'Inter', sans-serif;
}
.regulation-country-content ul li,
.regulation-country-content ol li {
  font-size: 14px; color: #1A1A2E; line-height: 1.6; margin-bottom: 6px;
}
.regulation-country-content ul li strong,
.regulation-country-content ol li strong { color: #1A1A2E; font-weight: 700; }
/* Inline content links — green by default, darker green + thicker
   underline on hover. Browsers already underline links by default, so
   a hover-only underline is invisible; we need a visible state change. */
.regulation-country-content p a,
.regulation-country-content ol li a,
.regulation-country-content ul li a {
  color: #2D7A0E;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
.regulation-country-content p a:hover,
.regulation-country-content ol li a:hover,
.regulation-country-content ul li a:hover,
.regulation-country-content p a:focus-visible,
.regulation-country-content ol li a:focus-visible,
.regulation-country-content ul li a:focus-visible {
  color: #1A5E04;
  text-decoration-thickness: 2px;
}
.regulation-country-note {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: #636B74; font-style: italic;
  margin: 10px 0 0; line-height: 1.55;
}

/* Contact card — for monitoring bodies and sector supervisors.
   Whole-card <details class="ds-card"> expandable variant. */
.regulation-contact-card {
  background: #FFFFFF;
  border: 1.5px solid #E4E5E7;
  border-radius: 8px;
  margin: 0 0 12px;
}
/* Make <details> a flex column so its <summary> can `flex:1` and stretch
   to the full card height. Grid equalises card heights; without this the
   summary would only be as tall as its content, leaving the chevron and
   tags floating mid-card on shorter cards. */
details.regulation-contact-card {
  display: flex;
  flex-direction: column;
  /* Only the <summary> toggles a native <details>; override the ds-card
     whole-card pointer so the expanded body reads as selectable text, not a
     (non-functioning) click target. The summary re-asserts pointer below. */
  cursor: default;
}
details.regulation-contact-card > summary {
  flex: 1;
}
/* Visual order inside the <summary>: name → website → role tags → chevron.
   HTML keeps tags first (semantically they describe the card), but flex
   `order` pushes them below the name+website pair; `margin-top:auto` floats
   the row to the bottom so cards in the grid align tags + chevron flush. */
details.regulation-contact-card > summary .role-tags {
  order: 2;
  margin: auto 0 0;
  padding-top: 12px;
}
.regulation-contact-card .role {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700; color: #1A5E04;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px;
}
.regulation-contact-card .name {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 600; color: #1A1A2E; margin-bottom: 8px;
}
.regulation-contact-card dl {
  margin: 0; font-family: 'Inter', sans-serif;
}
.regulation-contact-card dt {
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 600; color: #4F575E;
  letter-spacing: 0.05em; text-transform: uppercase; margin-top: 10px;
}
.regulation-contact-card dt:first-child { margin-top: 0; }
.regulation-contact-card dd {
  font-size: 14px; color: #1A1A2E; margin: 2px 0 0; line-height: 1.5;
}
.regulation-contact-card dd a { color: #2D7A0E; text-decoration: none; }
.regulation-contact-card dd a:hover { text-decoration: underline; }

/* Law-card — used on the country detail page to highlight a specific
   national act or statement template. Tinted box, small uppercase
   label, semibold native-language name with a green underlined link. */
.regulation-law-card {
  background: #FAFAFA;
  border: 1px solid #E4E5E7;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 14px 0;
  font-family: 'Inter', sans-serif;
}
.regulation-law-card .label {
  font-size: 12px; font-weight: 700; color: #1A5E04;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 6px;
}
.regulation-law-card .name-native {
  font-size: 15px; font-weight: 600; color: #1A1A2E;
  line-height: 1.4;
}
.regulation-law-card .name-native a {
  color: #2D7A0E;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.regulation-law-card .name-native a:hover { color: #1A5E04; text-decoration-thickness: 2px; }
.regulation-law-card .name-en {
  font-size: 12px; color: #4F575E; margin-top: 2px; line-height: 1.5;
}
.regulation-law-card .meta {
  font-size: 12px; color: #636B74; margin-top: 6px; line-height: 1.55;
}
.regulation-law-card a {
  color: #2D7A0E;
}

/* Clickable document card — full card is the link target (e.g. national
   statement template). Document icon on the left, neutral overline label,
   bold title with external-link arrow, optional one-line note. */
a.regulation-doc-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #FFFFFF;
  border: 1.5px solid #E4E5E7;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 14px 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
a.regulation-doc-card:hover,
a.regulation-doc-card:focus-visible {
  border-color: #2D7A0E;
  background: #FAFBFC;
  box-shadow: 0 2px 8px rgba(45,122,14,0.08);
  outline: none;
}
.regulation-doc-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #E8F5E1;
  color: #2D7A0E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.regulation-doc-card-body { flex: 1; min-width: 0; display: block; }
.regulation-doc-card-label {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #4F575E;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 4px;
}
/* Title stays dark even when the card is hovered/focused — per the
   design system, headings never flip to brand green. Hover feedback
   comes from the card's border + background, not from the title color. */
a.regulation-doc-card .regulation-doc-card-title {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1A1A2E;
  margin: 0;
  line-height: 1.3;
}
a.regulation-doc-card:hover .regulation-doc-card-title,
a.regulation-doc-card:focus-visible .regulation-doc-card-title {
  color: #1A1A2E;
}
.regulation-doc-card .ext-arrow {
  font-size: 14px;
  color: #2D7A0E;
  margin-left: 2px;
}
.regulation-doc-card-meta {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #4F575E;
  margin: 4px 0 0;
  line-height: 1.5;
}

/* Inline definition list (legal basis, response time, languages). */
.regulation-meta-list {
  margin: 14px 0 0; font-family: 'Inter', sans-serif;
}
.regulation-meta-list dt {
  font-size: 12px; font-weight: 700; color: #636B74;
  letter-spacing: 0.04em; text-transform: uppercase; margin-top: 12px;
}
.regulation-meta-list dt:first-child { margin-top: 0; }
.regulation-meta-list dd {
  font-size: 14px; color: #1A1A2E; margin: 2px 0 0; line-height: 1.5;
}

/* Quick-facts sidebar — sticky on desktop, in-flow on mobile. */
.regulation-facts {
  background: #FAFAFA;
  border: 1px solid #E4E5E7;
  border-radius: 12px;
  padding: 22px; position: sticky; top: 96px;
  height: fit-content;
}
.regulation-facts h2 {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700; color: #636B74;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0 0 16px; padding: 0; border: none;
}
.regulation-facts dl { margin: 0; }
.regulation-facts dt {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700; color: #636B74;
  letter-spacing: 0.04em; text-transform: uppercase; margin-top: 14px;
}
.regulation-facts dt:first-child { margin-top: 0; }
.regulation-facts dd {
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #1A1A2E; font-weight: 500;
  margin: 3px 0 0; line-height: 1.5;
}
.regulation-facts .status-note {
  background: #E8F5E1; border-left: 3px solid #2D7A0E;
  padding: 10px 14px; border-radius: 6px; margin-top: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #1A5E04; line-height: 1.5;
}
.regulation-country-sources li a {
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #2D7A0E; text-decoration: none;
}
.regulation-country-sources li a:hover { text-decoration: underline; }

/* Filter chips for the supervisory-bodies catalog. The chips correspond
   to the body's regulatory role (WAD monitoring, enforcement, EAA market
   surveillance, EAA sector supervision). Each body card carries one or
   more `data-categories` tokens. */
.regulation-bodies-intro {
  margin-bottom: 14px;
}
.regulation-filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 18px;
}
/* Filter chip — matches the rest of our selection patterns:
   light-green bg (#E8F5E1) + dark-green border + dark-green text when
   active. A ✓ glyph appears before the label so the active state is
   not communicated by colour alone (WCAG 1.4.1). */
.regulation-filter-chip {
  appearance: none; cursor: pointer;
  background: #FFFFFF;
  border: 1.5px solid #C6CAD0;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500; color: #1A1A2E;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.regulation-filter-chip:hover {
  background: #F2F2F2; border-color: #636B74;
}
.regulation-filter-chip:focus-visible {
  outline: 3px solid #66BA1E; outline-offset: 2px;
}
/* The ✓ glyph was tested as a non-color state indicator but reads as
   noise. Border + light-green fill carry the state; aria-pressed
   carries it to assistive tech. */
.regulation-filter-chip .check { display: none; }

/* Filter + bodies panel — one bordered container wraps the filter
   controls AND the cards grid so the user sees clearly that the
   filters act on the area below. Top band is tinted (filters),
   bottom band is white (results). */
.regulation-filterable {
  border: 1px solid #E4E5E7;
  border-radius: 10px;
  overflow: hidden;
}
.regulation-filter-controls {
  background: #FAFAFA;
  border-bottom: 1px solid #E4E5E7;
  padding: 14px 18px 16px;
  margin: 0;
}
.regulation-filter-controls-label {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 600; color: #4F575E;
  letter-spacing: 0.05em; text-transform: uppercase;
  margin: 0 0 10px;
}
/* Live results count between the filter panel and the cards grid —
   ties the two together so users see the filter is acting on these
   cards specifically. */
.regulation-filter-results {
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #4F575E;
  padding: 20px 18px 4px;
  margin: 0;
}
.regulation-filter-results strong { color: #1A1A2E; font-weight: 700; }
/* Cards sit right under the results count — no padding-top so the count
   belongs visually to the cards, not to the filter controls above. */
.regulation-filterable .regulation-bodies-grid {
  padding: 0 18px 18px;
}
.regulation-filterable .regulation-bodies-empty {
  margin: 14px 18px 18px;
}
.regulation-filter-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: flex-start;
}
.regulation-filter-group {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 220px;
}
.regulation-filter-group-label {
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 600; color: #4F575E;
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* Custom dropdown shell — button + panel, used by Role and Directive
   filters so they look identical at the surface level. */
.reg-dropdown { position: relative; }
.reg-dropdown-button {
  appearance: none;
  width: 100%;
  background: #FFFFFF;
  border: 1.5px solid #C6CAD0;
  border-radius: 6px;
  padding: 6px 32px 6px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500; color: #1A1A2E;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.reg-dropdown-button::after {
  content: "";
  position: absolute;
  right: 12px; top: 50%;
  width: 10px; height: 6px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%231A1A2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  transition: transform 0.15s ease;
}
.reg-dropdown[aria-expanded="true"] .reg-dropdown-button::after {
  transform: translateY(-50%) rotate(180deg);
}
.reg-dropdown-button:hover { border-color: #636B74; }
.reg-dropdown-button:focus-visible {
  outline: 3px solid #66BA1E; outline-offset: 2px;
  border-color: #2D7A0E;
}
.reg-dropdown-panel {
  position: absolute; z-index: 10;
  top: calc(100% + 4px); left: 0;
  min-width: 100%;
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(26,26,46,0.10);
  padding: 6px;
  display: none;
}
.reg-dropdown[aria-expanded="true"] .reg-dropdown-panel { display: block; }
.reg-dropdown-option {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #1A1A2E;
  cursor: pointer;
  white-space: nowrap;
}
.reg-dropdown-option:hover { background: #F2F2F2; }
.reg-dropdown-option input { margin: 0; accent-color: #2D7A0E; cursor: pointer; }
.reg-dropdown-option .count {
  margin-left: auto;
  font-size: 12px; font-weight: 600;
  background: #F2F2F2; color: #4F575E;
  padding: 1px 8px; border-radius: 999px; min-width: 22px; text-align: center;
}
.reg-dropdown-panel-actions {
  padding: 8px 10px 4px;
  border-top: 1px solid #F2F2F2;
  margin-top: 4px;
}
.reg-dropdown-clear {
  appearance: none;
  background: none; border: none; padding: 0;
  color: #2D7A0E;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.reg-dropdown-clear:hover { text-decoration: underline; }
.reg-dropdown-clear:disabled { color: #C6CAD0; cursor: not-allowed; text-decoration: none; }

/* Small directive tag on each body card — neutral pill style, sits
   next to the green role-tag so they don't fight visually. */
.role-tag-directive {
  display: inline-block;
  background: #F2F2F2; color: #4F575E;
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 6px;
  letter-spacing: 0.04em;
}
.regulation-filter-chip .count {
  font-size: 12px; font-weight: 700;
  background: #F2F2F2; color: #4F575E;
  padding: 1px 8px; border-radius: 999px;
  min-width: 20px; text-align: center;
  border: 1px solid transparent;
}
.regulation-filter-chip.is-active {
  background: #E8F5E1; border-color: #2D7A0E; color: #1A5E04; font-weight: 600;
}
/* White count bubble on the light-green chip — keeps both bubble and
   digits high-contrast (digits #1A5E04 on #FFFFFF, bubble outlined). */
.regulation-filter-chip.is-active .count {
  background: #FFFFFF; color: #1A5E04;
  border-color: #DCEBCE;
}
.regulation-bodies-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  align-items: start;
}
@media (max-width: 720px) {
  .regulation-bodies-grid { grid-template-columns: 1fr; }
}
/* `align-items:start` keeps each card at its intrinsic height so an
   expanded card doesn't stretch its row-mate; closed cards stay compact. */
.regulation-bodies-grid .regulation-contact-card {
  margin: 0;
}
.regulation-contact-card.is-hidden { display: none; }
/* Small role-tag pills inside each body card — show all categories the
   body is filtered under, so users get a visual key to the filters. */
.regulation-contact-card .role-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.regulation-contact-card .role-tag {
  display: inline-block;
  background: #F2F2F2; color: #4F575E;
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 6px;
  letter-spacing: 0.04em;
}
/* Body cards are compact by default — only role-tag, name, scope, and
   website are shown. Everything else (legal designation, postal address,
   etc.) lives inside the native <details> so users can expand on demand.
   Names are <h3> for proper heading hierarchy; selectors below reset
   default h3 styling and override the `.regulation-country-content h3`
   rule that would otherwise impose Barlow 15px + 22px top margin. */
.regulation-country-content .regulation-contact-card .name,
.regulation-contact-card h3.name,
.regulation-contact-card .name {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; color: #1A1A2E;
  line-height: 1.4;
  margin: 0 0 8px;
  padding: 0; border: none;
  letter-spacing: 0;
}
.regulation-contact-card .card-scope {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #4F575E;
  margin: 0 0 8px; line-height: 1.5;
}
.regulation-contact-card .card-website {
  font-family: 'Inter', sans-serif;
  font-size: 14px; margin: 0;
}
/* DS Inline link: underline by default (WCAG 1.4.1), green, hover darkens. */
.regulation-contact-card .card-website a {
  color: #2D7A0E;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
.regulation-contact-card .card-website a:hover {
  color: #1A5E04;
  text-decoration-thickness: 2px;
}
.regulation-contact-card .card-website a:focus-visible {
  outline: 3px solid #66BA1E;
  outline-offset: 2px;
  border-radius: 2px;
}
/* DS Card — Expandable variant. Whole card is <details class="ds-card">.
   Summary holds the collapsed-state content (tags, name, scope, website).
   A bare chevron sits absolutely at the bottom-right corner of the summary,
   rotating 180° via the .ds-card-chevron rule when the card is open.
   Body holds the dl details. */
details.regulation-contact-card > summary {
  cursor: pointer;
  list-style: none;
  display: flex; flex-direction: column;
  padding: 16px 44px 16px 20px;
  position: relative;
}
details.regulation-contact-card > summary > .ds-card-chevron {
  position: absolute;
  right: 16px;
  bottom: 16px;
  color: #4F575E;
}
details.regulation-contact-card > summary::-webkit-details-marker { display: none; }
details.regulation-contact-card > summary::marker { content: ""; }
details.regulation-contact-card > summary:focus-visible {
  outline: 3px solid #66BA1E; outline-offset: 2px; border-radius: 4px;
}
/* Body padding + dl spacing for the expanded details. */
details.regulation-contact-card > dl {
  margin: 0; padding: 0 20px 16px;
}
.regulation-bodies-empty {
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #636B74;
  padding: 24px; text-align: center;
  background: #FAFAFA; border: 1px dashed #E4E5E7; border-radius: 8px;
  display: none;
}
.regulation-bodies-empty.is-visible { display: block; }

/* ===== REGULATION — WAD / EAA DETAIL PAGES ===== */
/* Per-directive deep-dive pages. Reuse `.regulation-page-header`,
   `.regulation-country-layout` and the sticky-aside pattern from the
   country-detail screen. */
.regulation-wad-page .regulation-page-header,
.regulation-eaa-page .regulation-page-header { padding: 36px 0 28px; }
.regulation-wad-page .regulation-page-section,
.regulation-eaa-page .regulation-page-section { padding: 28px 0 56px; }

/* "On this page" sticky TOC — narrower than the country quick-facts
   aside, lighter visual weight. */
.regulation-pagetoc {
  position: sticky; top: 96px;
  height: fit-content;
  background: #FAFAFA;
  border: 1px solid #E4E5E7;
  border-radius: 10px;
  padding: 18px 20px;
  font-family: 'Inter', sans-serif;
}
.regulation-pagetoc h2 {
  font-size: 12px; font-weight: 700; color: #636B74;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0 0 12px; padding: 0; border: none;
}
.regulation-pagetoc ul { list-style: none; padding: 0; margin: 0; }
.regulation-pagetoc li {
  margin-bottom: 2px; font-size: 14px; line-height: 1.4;
}
/* TOC anchors follow the design-system standalone-link pattern —
   green by default so they read as links, underline + darker green
   on hover, full-block hit area for easier clicking. */
.regulation-pagetoc a {
  display: block;
  color: #1A1A2E;
  text-decoration: none;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.regulation-pagetoc a:hover {
  color: #2D7A0E;
  background: #E8F5E1;
  border-left-color: #2D7A0E;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.regulation-pagetoc a:focus-visible {
  outline: 3px solid #66BA1E;
  outline-offset: 2px;
}

/* EAA category grid — 12 cards (P1–P5 + S1–S7). */
.regulation-cat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 14px 0;
}
@media (max-width: 600px) { .regulation-cat-grid { grid-template-columns: 1fr; } }
.regulation-cat-card {
  background: #FFFFFF;
  border: 1px solid #E4E5E7;
  border-radius: 8px;
  padding: 12px 16px;
}
.regulation-cat-card .code {
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 600; color: #1A5E04;
  letter-spacing: 0.05em;
}
.regulation-cat-card .label {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; color: #1A1A2E;
  margin-top: 2px;
}
.regulation-cat-card .desc {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #4F575E; margin-top: 4px; line-height: 1.5;
}

/* Key-facts data block — sits as the first element inside the content
   column on a directive detail page. Uses the same row/divider
   pattern as `.regulation-directive-row` for visual consistency:
   sentence-case label on the left, value on the right, thin rule
   between rows. */
.regulation-keyfacts {
  background: #FFFFFF;
  border: 1px solid #E4E5E7;
  border-radius: 10px;
  margin: 0 0 24px;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}
/* When the keyfacts card is followed by a small note, drop the card's
   bottom margin so the note can sit tight against it (8px gap). */
.regulation-keyfacts:has(+ .regulation-keyfacts-note) {
  margin-bottom: 0;
}
/* Quiet metadata note below the keyfacts card — same convention as
   .regulation-directive-footnote so it reads as a footnote, not a callout. */
.regulation-country-content p.regulation-keyfacts-note {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #4F575E;
  margin: 8px 4px 28px;
  line-height: 1.55;
}
.regulation-keyfacts dl { margin: 0; }
.regulation-keyfacts dt,
.regulation-keyfacts dd { margin: 0; }
.regulation-keyfacts dd a {
  color: #2D7A0E;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
.regulation-keyfacts dd a:hover {
  color: #1A5E04;
  text-decoration-thickness: 2px;
}
.regulation-keyfacts dd a:focus-visible {
  outline: 3px solid #66BA1E;
  outline-offset: 2px;
  border-radius: 2px;
}
.regulation-keyfacts .row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid #F2F2F2;
}
.regulation-keyfacts .row:last-child { border-bottom: none; }
.regulation-keyfacts .row dt {
  font-size: 14px; font-weight: 500; color: #4F575E; line-height: 1.55;
}
.regulation-keyfacts .row dd {
  font-size: 14px; color: #1A1A2E; line-height: 1.55;
}
@media (max-width: 560px) {
  .regulation-keyfacts .row { grid-template-columns: 1fr; gap: 2px; padding: 12px 18px; }
}

/* Inline content callout — same green-tinted note used elsewhere
   for "applies to" hints. Amber variant for warnings. */
.regulation-content-callout {
  background: #E8F5E1;
  border-left: 3px solid #2D7A0E;
  border-radius: 6px;
  padding: 14px 18px; margin: 16px 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #1A5E04; line-height: 1.6;
}
.regulation-content-callout.is-amber {
  background: #FEF3E2; border-left-color: #6B3D00; color: #6B3D00;
}
.regulation-content-callout strong { font-weight: 700; }
.regulation-content-callout a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ===== REGULATION — ENFORCEMENT DETAIL PAGE ===== */
/* Dedicated enforcement page, adapted from the colleague's hub draft.
   Reuses `.regulation-page-header`, `.regulation-page-section`, and
   `.regulation-subhead` from the existing regulation styles. New parts
   below: case cards (with status labels), narrative content blocks,
   and the country-status comparison table. */
.regulation-enforcement-page .regulation-page-header { padding: 36px 0 24px; }
.regulation-enforcement-page .regulation-page-header .regulation-page-lede { margin-bottom: 0; }
.regulation-enforcement-page .regulation-page-section { padding: 28px 0 28px; }
.regulation-enforcement-page .regulation-page-section + .regulation-page-section { border-top: 1px solid #E4E5E7; }

/* Long-form text inside an enforcement section. */
.enforcement-content { font-family: 'Inter', sans-serif; }
.enforcement-content p {
  font-size: 14px; color: #1A1A2E; line-height: 1.55; margin: 0 0 12px;
  max-width: 820px;
}
.enforcement-content ul,
.enforcement-content ol { margin: 0 0 14px 22px; }
.enforcement-content li {
  font-size: 14px; color: #1A1A2E; line-height: 1.55; margin-bottom: 8px;
  max-width: 800px;
}
.enforcement-content li strong,
.enforcement-content p strong { color: #1A1A2E; font-weight: 700; }
.enforcement-content a { color: #2D7A0E; }
.enforcement-content a:hover { text-decoration: underline; }

/* Callout note. Green by default, amber variant for warnings. */
.enforcement-callout {
  background: #E8F5E1; border-left: 3px solid #2D7A0E;
  padding: 14px 18px; border-radius: 6px; margin: 16px 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #1A5E04; line-height: 1.6;
  max-width: 860px;
}
.enforcement-callout strong { font-weight: 700; }
.enforcement-callout a { color: #1A5E04; font-weight: 600; }
.enforcement-callout.is-amber {
  background: #FEF3E2; border-left-color: #6B3D00; color: #6B3D00;
}
.enforcement-callout.is-amber a { color: #6B3D00; }

/* Case card: one regulator's action on the public record. */
.enforcement-case {
  background: #FFFFFF;
  border: 1px solid #E4E5E7;
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.enforcement-case-title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: 'Barlow', sans-serif;
  font-size: 16px; font-weight: 700; color: #1A1A2E;
  margin: 0 0 6px; letter-spacing: -0.005em;
}
.enforcement-case-title img {
  width: 26px; height: 18px; border-radius: 2px; object-fit: cover;
  box-shadow: 0 1px 1px rgba(26,26,46,0.15);
}
.enforcement-case-meta {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #4F575E; margin: 0 0 8px;
}
/* Enforcement case details — uses the same tabular pattern as
   .regulation-keyfacts: label on the left, value on the right, thin
   dividers between rows. Replaces the stacked uppercase-overline layout. */
.enforcement-case dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  column-gap: 16px;
  row-gap: 0;
  margin: 12px 0 0;
  font-family: 'Inter', sans-serif;
  border-top: 1px solid #F2F2F2;
}
.enforcement-case dt {
  font-size: 14px; font-weight: 500; color: #4F575E;
  letter-spacing: 0; text-transform: none;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #F2F2F2;
  line-height: 1.5;
}
.enforcement-case dd {
  font-size: 14px; color: #1A1A2E;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #F2F2F2;
  line-height: 1.55;
}
.enforcement-case dd strong { color: #1A1A2E; font-weight: 600; }
.enforcement-case dd a { color: #2D7A0E; font-weight: 500; }
.enforcement-case dd a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .enforcement-case dl { grid-template-columns: 1fr; }
  .enforcement-case dt { padding-bottom: 0; border-bottom: none; }
}

/* Label tags inline with the case title (fine / judgment / notice / historical). */
.enforcement-label {
  display: inline-block;
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 4px;
}
.enforcement-label.is-fine { background: #FDEAEA; color: #8B1A0E; }
.enforcement-label.is-judgment { background: #F3E8FF; color: #6B21A8; }
.enforcement-label.is-notice { background: #FEF3E2; color: #6B3D00; }
.enforcement-label.is-historical { background: #F2F2F2; color: #4F575E; }
.enforcement-label.is-record { background: #FEF3E2; color: #6B3D00; }

/* Country-status table at the bottom of the page. */
.enforcement-table-wrap { overflow-x: auto; }
.enforcement-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Inter', sans-serif; font-size: 14px;
  background: #FFFFFF; border: 1px solid #E4E5E7;
  border-radius: 8px; overflow: hidden;
}
.enforcement-table th,
.enforcement-table td {
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid #F2F2F2; vertical-align: top;
}
.enforcement-table th {
  background: #FAFAFA; font-weight: 600; color: #4F575E;
  white-space: nowrap; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-family: 'Barlow', sans-serif;
}
.enforcement-table tr:last-child td { border-bottom: none; }
.enforcement-table tr:hover { background: #FAFAFA; }
.enforcement-table .country-cell {
  white-space: nowrap; font-weight: 600;
}
.enforcement-table .country-cell a {
  color: #1A1A2E; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.enforcement-table .country-cell a:hover { color: #2D7A0E; text-decoration: underline; }
.enforcement-table .country-cell img {
  width: 22px; height: 16px; border-radius: 2px;
  object-fit: cover; box-shadow: 0 1px 1px rgba(26,26,46,0.15);
}

/* Status badges in the table's last column. */
.enforcement-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 3px;
  white-space: nowrap;
}
.enforcement-badge.is-active { background: #FDEAEA; color: #8B1A0E; }
.enforcement-badge.is-record { background: #FEF3E2; color: #6B3D00; }
.enforcement-badge.is-anon { background: #FEF3E2; color: #6B3D00; }
.enforcement-badge.is-quiet { background: #F2F2F2; color: #636B74; }
.enforcement-badge.is-na { background: #FAFAFA; color: #636B74; }
.enforcement-badge.is-pending { background: #E5F0FB; color: #0B4F8F; }

/* Lightweight summary block on the regulation page (no country names).
   Hierarchy inside each stat: tiny uppercase label → big Barlow value
   → single-paragraph detail. Detail text is one uniform weight so the
   country list doesn't fragment the prose. Each pattern sits in its
   own white card so the three read as siblings, not a wall of text. */
/* Three plain white cards, no outer wrapper. Inside each card:
   sentence-case label as a small heading → count meta line → single
   description paragraph (one uniform weight). */
.enforcement-overview {
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
}
.enforcement-overview-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin: 0 0 14px;
}
@media (max-width: 720px) {
  .enforcement-overview-stats { grid-template-columns: 1fr; }
}
.enforcement-overview-stat {
  background: #FFFFFF;
  border: 1px solid #E4E5E7;
  border-radius: 8px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.enforcement-overview-stat .label {
  font-family: 'Barlow', sans-serif;
  font-size: 16px; font-weight: 600; color: #1A1A2E;
  letter-spacing: -0.005em;
  margin: 0;
}
.enforcement-overview-stat .value {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500; color: #4F575E;
  margin: 0;
}
.enforcement-overview-stat .value strong { color: #1A1A2E; font-weight: 700; }
.enforcement-overview-stat .detail {
  font-size: 12px; color: #4F575E; line-height: 1.55;
  margin: 4px 0 0;
}
.enforcement-overview p {
  font-size: 14px; color: #4F575E; line-height: 1.6; margin: 0 0 14px;
}
.enforcement-overview-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; color: #2D7A0E;
  text-decoration: none;
}
.enforcement-overview-cta:hover { text-decoration: underline; }

/* ===== COMPLIANCE CHECKER WIZARD ===== */
/* 4-step wizard adapted from the colleague's hub draft. Class names use
   a `cc-` prefix so they don't collide with the rest of the regulation
   styles. Reuses `.regulation-page-header` for the breadcrumb + title. */
.regulation-compliance-page .regulation-page-header { padding: 36px 0 28px; }
.regulation-compliance-page .regulation-page-header .regulation-page-lede { margin-bottom: 0; }
.regulation-compliance-page .regulation-page-section { padding: 32px 0 56px; }
/* Result view — hide the wizard step indicator and swap the header text.
   Activated by adding `is-result` to #screen-compliance-checker (done in
   showStep(4) and reset). */
#screen-compliance-checker .cc-header-result,
#screen-compliance-checker.is-result .cc-header-wizard { display: none; }
#screen-compliance-checker.is-result .cc-header-result { display: block; }
#screen-compliance-checker.is-result .cc-progress { display: none; }
/* Result-view header — audit-result style: back link + title/meta + actions */
.cc-result-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4F575E;
  margin-bottom: 14px;
  text-decoration: none;
}
.cc-result-back:hover,
.cc-result-back:focus-visible { color: #2D7A0E; }
.cc-result-context-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.cc-result-context-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.cc-result-context-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #E8F5E1;
  color: #2D7A0E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cc-result-context-info { min-width: 0; }
.cc-result-context-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #1A1A2E;
  margin: 0 0 6px;
  line-height: 1.2;
}
.cc-result-context-meta {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #4F575E;
  line-height: 1.55;
  margin: 0;
}
.cc-result-context-meta strong { font-weight: 700; color: #1A1A2E; }
.cc-result-context-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .cc-result-context-row { flex-direction: column; gap: 16px; }
  .cc-result-context-actions { width: 100%; }
}

.cc-demo-tag {
  display: inline-block;
  background: #6B3D00; color: #FFFFFF;
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 4px;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 10px;
}

.cc-wizard {
  background: #FFFFFF;
  border: 1px solid #E4E5E7;
  border-radius: 12px;
  overflow: hidden;
  max-width: 820px; margin: 0 auto;
}
.cc-progress {
  display: flex; align-items: center; flex-wrap: wrap;
  list-style: none;
  padding: 14px 22px;
  margin: 0;
  background: #FAFAFA;
  border-bottom: 1px solid #E4E5E7;
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #636B74;
  gap: 12px;
}
.cc-progress .cc-step-tab {
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
}
/* Chevron rendered as a CSS pseudo-element so screen readers never hear
   "greater-than" when traversing the step list. */
.cc-progress .cc-step-tab:not(:last-child)::after {
  content: "\203A";
  margin-left: 12px;
  color: #636B74;
}
/* Step number circle — matches the design-system numbered-list pattern:
   light-green bg (#E8F5E1) + dark-green text (#1A5E04), Barlow 700.
   Upcoming steps use a neutral grey fill so the active/done step
   stays visually dominant. */
.cc-progress .cc-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #F2F2F2; color: #636B74;
  font-family: 'Barlow', sans-serif;
  font-weight: 700; font-size: 14px;
  position: relative;
}
/* Current step — green pill with the visible number. aria-current="step"
   drives the AT announcement; the bold label communicates state visually. */
.cc-progress .cc-step-tab.is-active { color: #1A1A2E; font-weight: 600; }
.cc-progress .cc-step-tab.is-active .cc-step-num {
  background: #E8F5E1; color: #1A5E04;
}
/* Done step — green pill, number hidden visually with transparent ink, and
   a green check (✓) painted via ::after pseudo. The "Step N" text inside
   the number stays accessible (color:transparent is still announced by AT),
   so the completed state isn't communicated by colour alone. */
.cc-progress .cc-step-tab.is-done .cc-step-num {
  background: #E8F5E1;
  color: transparent;
}
.cc-progress .cc-step-tab.is-done .cc-step-num::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A5E04;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.cc-body { padding: 28px 30px; }
.cc-step { display: none; }
.cc-step.is-active { display: block; }
.cc-step-title {
  font-family: 'Barlow', sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  color: #1A1A2E; margin: 0 0 6px;
}
.cc-step-hint {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #4F575E;
  margin: 0 0 22px; line-height: 1.55;
}

.cc-options {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 22px;
}
@media (max-width: 600px) { .cc-options { grid-template-columns: 1fr; } }
.cc-option {
  appearance: none;
  text-align: left;
  background: #FFFFFF;
  border: 1.5px solid #F2F2F2;
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.cc-option:hover { border-color: #2D7A0E; }
.cc-option.is-selected {
  border-color: #2D7A0E; background: #F8FAF6;
}
.cc-option-label {
  display: block;
  font-size: 14px; font-weight: 600; color: #1A1A2E;
}
.cc-option.is-selected .cc-option-label { color: #1A1A2E; }
.cc-option-detail {
  display: block;
  font-size: 12px; color: #4F575E; margin-top: 2px;
  line-height: 1.45;
}

/* Markets toolbar — sits above the country grid. "Select all" checkbox
   on the left toggles between select-all and clear-all; "Clear all" on the
   right is an explicit shortcut. */
.cc-markets-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cc-markets-selectall {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 400; color: #1A1A2E;
  cursor: pointer;
  user-select: none;
}
.cc-markets-selectall-check {
  width: 16px; height: 16px;
  accent-color: #2D7A0E;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
.cc-markets-clear {
  appearance: none;
  background: transparent; border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500; color: #4F575E;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}
.cc-markets-clear:hover { color: #1A5E04; text-decoration-thickness: 2px; }
.cc-markets-clear:focus-visible { outline: 3px solid #66BA1E; outline-offset: 2px; border-radius: 2px; }

.cc-market-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  max-height: 320px; overflow-y: auto;
  border: 1px solid #F2F2F2; border-radius: 8px;
  padding: 10px; margin-bottom: 14px;
}
@media (max-width: 700px) { .cc-market-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .cc-market-grid { grid-template-columns: repeat(2, 1fr); } }
.cc-country-chip {
  appearance: none;
  display: flex; align-items: center; gap: 6px;
  background: #FFFFFF;
  border: 1.5px solid #F2F2F2;
  border-radius: 8px;
  padding: 8px 24px 8px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #1A1A2E;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.cc-country-chip:hover { border-color: #2D7A0E; }
.cc-country-chip.is-selected {
  background: #F8FAF6; border-color: #2D7A0E; color: #1A5E04; font-weight: 600;
}
.cc-country-chip img {
  width: 18px; height: 13px; border-radius: 2px;
  object-fit: cover; flex-shrink: 0;
}

.cc-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 8px; padding-top: 18px;
  border-top: 1px solid #F2F2F2;
}
.cc-actions .cc-spacer { flex: 1; }
/* Wizard buttons follow the global design system: primary action is
   BLACK (matches `.btn-primary`), secondary action is the outlined
   white-on-grey-border style. No green buttons — green is reserved
   for selected/active states only. */
.cc-btn-back, .cc-btn-next {
  appearance: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600;
  padding: 0 18px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.cc-btn-back {
  background: #FFFFFF;
  border: 1.5px solid #C6CAD0;
  color: #1A1A2E;
}
.cc-btn-back:hover { background: #F2F2F2; border-color: #636B74; }
.cc-btn-back:active { background: #E4E5E7; border-color: #636B74; }
.cc-btn-next {
  background: #000000;
  border: 1.5px solid #000000;
  color: #FFFFFF;
}
.cc-btn-next:hover { background: #1F1F1F; border-color: #1F1F1F; }
.cc-btn-next:active { background: #333333; border-color: #333333; }
.cc-btn-next:focus-visible,
.cc-btn-back:focus-visible { outline: 3px solid #66BA1E; outline-offset: 2px; }
.cc-btn-next:disabled {
  background: #F2F2F2; border-color: #F2F2F2; color: #C6CAD0; cursor: not-allowed;
}

/* Result step */
/* "Your answers" recap card — first thing the user sees in the result body
   so the connection between their inputs and the generated checklist is
   obvious. Subtle green-tinted background to read as a summary, not a CTA. */
.cc-result-answers {
  background: #F8FAF6;
  border: 1px solid #DAE6CC;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 22px;
}
.cc-result-answers-label {
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1A5E04;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
}
.cc-result-answers-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 16px;
  margin: 0;
  font-family: 'Inter', sans-serif;
}
.cc-result-answers-list dt {
  font-size: 12px;
  font-weight: 500;
  color: #4F575E;
  line-height: 1.5;
}
.cc-result-answers-list dd {
  font-size: 14px;
  font-weight: 500;
  color: #1A1A2E;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 540px) {
  .cc-result-answers-list { grid-template-columns: 1fr; gap: 2px 0; }
  .cc-result-answers-list dd { margin-bottom: 8px; }
}
.cc-applies-banner {
  display: block;
  background: #FFFFFF;
  border: 1.5px solid #E4E5E7;
  border-radius: 8px;
  padding: 14px 18px; margin-bottom: 12px;
  color: inherit; text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* Whole-card link variant — WAD / EAA banners render as <a> linking to the
   matching directive page; border flips green on hover/focus (no bg shift). */
a.cc-applies-banner:hover,
a.cc-applies-banner:focus-visible { border-color: #2D7A0E; outline: none; }
a.cc-applies-banner:focus-visible { outline: 3px solid #66BA1E; outline-offset: 2px; }
.cc-applies-banner.is-warning {
  background: #FEF3E2;
  border: none;
  border-left: 3px solid #6B3D00;
  border-radius: 6px;
}
.cc-applies-banner .cc-banner-label {
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 600; color: #1A5E04;
  letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px;
}
.cc-applies-banner.is-warning .cc-banner-label { color: #636B74; }
.cc-applies-banner h3 {
  font-family: 'Barlow', sans-serif;
  font-size: 16px; font-weight: 700; color: #1A1A2E;
  margin: 0 0 4px;
}
.cc-applies-banner p {
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #4F575E; margin: 0; line-height: 1.55;
}
.cc-result-subhead {
  font-family: 'Barlow', sans-serif;
  font-size: 16px; font-weight: 600; color: #1A1A2E;
  margin: 22px 0 10px;
}
.cc-market-card {
  display: block;
  background: #FFFFFF;
  border: 1.5px solid #E4E5E7;
  border-radius: 8px;
  padding: 16px 20px; margin-bottom: 12px;
  color: inherit; text-decoration: none;
  transition: border-color 0.15s ease;
}
/* Whole-card link: the entire card navigates to the country detail page;
   border flips green on hover/focus and the title gains an underline. */
a.cc-market-card:hover { border-color: #2D7A0E; }
a.cc-market-card:focus-visible { border-color: #2D7A0E; outline: 3px solid #66BA1E; outline-offset: 2px; }
a.cc-market-card:hover h3,
a.cc-market-card:focus-visible h3 {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.cc-market-card h3 {
  font-family: 'Barlow', sans-serif;
  font-size: 16px; font-weight: 700; color: #1A1A2E;
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cc-market-card h3 img {
  width: 24px; height: 18px; border-radius: 3px; object-fit: cover;
}
/* Card title is itself the link to the country detail page. Inherit
   colour from the h3 so it doesn't read as a generic link, but pick up
   an underline on hover to confirm it's clickable. */
.cc-market-card-title-link {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: inherit; text-decoration: none;
  transition: color 0.15s ease;
}
.cc-market-card-title-link:hover,
.cc-market-card-title-link:focus-visible {
  color: #2D7A0E; text-decoration: underline;
  text-underline-offset: 3px; outline: none;
}
.cc-market-card dl {
  margin: 10px 0 0; font-family: 'Inter', sans-serif;
}
.cc-market-card dt {
  font-size: 12px; font-weight: 500; color: #4F575E;
  letter-spacing: 0.04em; text-transform: uppercase; margin-top: 10px;
}
.cc-market-card dt:first-child { margin-top: 0; }
.cc-market-card dd {
  font-size: 14px; color: #1A1A2E; margin: 2px 0 0; line-height: 1.55;
}
.cc-market-card .cc-quirks {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #F2F2F2;
}
.cc-market-card .cc-quirks-label {
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 600; color: #6B3D00;
  letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px;
}
.cc-market-card .cc-quirks ul {
  margin: 0; padding-left: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #4F575E;
}
.cc-market-card .cc-quirks li { margin-bottom: 4px; line-height: 1.5; }
.cc-market-card-link {
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600;
}
.cc-market-card-link a { color: #2D7A0E; text-decoration: none; }
.cc-market-card-link a:hover { text-decoration: underline; }

.cc-demo-disclaimer {
  background: #FAFAFA;
  border: 1px solid #E4E5E7;
  border-radius: 8px;
  padding: 14px 18px; margin-top: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #4F575E; line-height: 1.55;
}
.cc-demo-disclaimer strong { color: #C77700; font-weight: 700; }

.cc-empty-markets {
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: #4F575E;
}

/* ════════════════════════════════════════════════════════
   CARD — base interactive shell (ported from design system).
   Holds the canonical border, background and hover behaviour
   shared by every Card variant. Variant-specific layout
   (flex/grid, padding, slot positioning) stays as inline
   style or per-variant utility on the element itself.
   ════════════════════════════════════════════════════════ */
.ds-card {
  background: #FFFFFF;
  border: 1.5px solid #E4E5E7;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}
/* Radius modifier — Rich and Fully-loaded variants use a slightly
   larger 12px radius to feel more substantial. */
.ds-card--lg { border-radius: 12px; }
/* Card title — the element that picks up the underline on hover.
   Inline size / weight per variant still wins via specificity; the
   class only carries the hover affordance. */
.ds-card-title { transition: text-decoration-thickness 0.15s ease; }
/* Hover — border picks up brand green AND title gains an underline
   (the non-colour signal required by WCAG 1.4.11).
   Scoped to <a>, <button>, <details> so static <div class="ds-card">
   (Informational / Linked-footer variants) doesn't trigger whole-card
   hover even though it shares the .ds-card shell. */
a.ds-card:hover,
button.ds-card:hover,
details.ds-card:hover,
.ds-card.is-hover { border-color: #2D7A0E; }
a.ds-card:hover .ds-card-title,
button.ds-card:hover .ds-card-title,
details.ds-card:hover .ds-card-title,
.ds-card.is-hover .ds-card-title,
a.ds-card:focus-visible .ds-card-title,
button.ds-card:focus-visible .ds-card-title,
details.ds-card:focus-visible .ds-card-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* Focus ring (DS standard). */
.ds-card:focus-visible { outline: 3px solid #66BA1E; outline-offset: 2px; }
/* Selected state — used by the Selectable variant (form input).
   Bg shifts to a quiet green tint; selection indicator is positioned
   by the variant itself. */
.ds-card.is-selected {
  background: #F8FAF6;
  border-color: #2D7A0E;
}
/* Reset for button-based cards (Selectable variant). */
button.ds-card {
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  font: inherit;
  padding: 0;
}
/* Informational variant — same visual surface, no interaction signals.
   Used for grids of static tiles that group content without navigating
   or selecting. Strips hover / focus affordance so users aren't misled
   into thinking the tile is clickable. */
.ds-card--static,
.ds-card--static:hover,
.ds-card--static.is-hover { border-color: #E4E5E7; cursor: default; }
.ds-card--static:hover .ds-card-title,
.ds-card--static.is-hover .ds-card-title { text-decoration: none; }
/* Selection indicator slot — top-right corner of Selectable cards.
   The indicator is present on every card in the group; the radio dot
   or checkmark only paints when the card carries .is-selected. */
.ds-card-indicator {
  position: absolute;
  top: 10px; right: 10px;
  width: 16px; height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
}
.ds-card-indicator--radio {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%23FFFFFF' stroke='%23C6CAD0' stroke-width='2'/></svg>");
}
.ds-card.is-selected .ds-card-indicator--radio {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%23FFFFFF' stroke='%231A5E04' stroke-width='2.5'/><circle cx='12' cy='12' r='5' fill='%231A5E04'/></svg>");
}
.ds-card-indicator--check { background-image: none; }
.ds-card.is-selected .ds-card-indicator--check {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A5E04' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* Linked-footer Card title link — title text wrapped in <a> so the title
   itself can carry a separate href (e.g., internal directive page) while
   the footer strip carries a different one (e.g., external act). Hover
   underlines the title; no colour change so it still reads as a heading. */
.ds-card-title-link {
  color: inherit;
  text-decoration: none;
}
.ds-card-title-link:hover,
.ds-card-title-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ds-card-title-link:focus-visible {
  outline: 3px solid #66BA1E;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Linked-footer Card footer link — the whole footer strip is <a> so the
   full bar is clickable, not just the text. Tinted #FAFAFA by default;
   on hover the bg darkens slightly (#F2F2F2) so users see the strip
   itself is the hit target, and the trailing label gets the standard
   link-hover underline + darker green. */
.ds-card-linked-footer {
  background: #FAFAFA;
  text-decoration: none;
  color: #2D7A0E;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ds-card-linked-footer:hover,
.ds-card-linked-footer:focus-visible {
  background: #F2F2F2;
  color: #1A5E04;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ds-card-linked-footer:focus-visible {
  outline: 3px solid #66BA1E;
  outline-offset: -3px;
}

/* Expandable card uses <details>; hide the native disclosure
   marker and rotate the in-card chevron when open. */
details.ds-card > summary { list-style: none; }
details.ds-card > summary::-webkit-details-marker { display: none; }
details.ds-card > summary::marker { content: ""; }
.ds-card-chevron {
  display: inline-flex;
  transition: transform 0.15s ease;
}
details.ds-card[open] > summary .ds-card-chevron {
  transform: rotate(180deg);
}