/* Regulations use the same cyan feedback as the navigation. The protection
   icon remains grey. Reference images are outside these disclosure controls. */
.regulation-card,
.regulation-nav-summary {
  --regulation-glow: 0 0 0 1px rgb(var(--dgu-color-22d3ee,34 211 238) / 0.8),
    0 0 16px rgb(var(--dgu-color-22d3ee,34 211 238) / 0.28),
    0 0 34px rgb(var(--dgu-color-22d3ee,34 211 238) / 0.22),
    inset 0 0 18px rgb(var(--dgu-color-22d3ee,34 211 238) / 0.055);
  transition: background-color var(--interaction-time) ease,
    border-color var(--interaction-time) ease,
    box-shadow var(--interaction-time) ease;
}
.regulation-grid { align-items: start; }
.regulation-card {
  min-width: 0;
  margin: 0;
  overflow: visible;
  border-top: 3px solid var(--accent);
  scroll-margin-top: calc(var(--dgu-header-height, 100px) + 24px);
}
.regulation-card > .regulation-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 102px;
  padding: 22px;
  border: 0;
  border-radius: 9px;
  list-style: none;
  background: transparent;
  transition: background-color var(--interaction-time) ease;
}
.regulation-summary::-webkit-details-marker,
.regulation-nav-summary::-webkit-details-marker { display: none; }
.regulation-summary > .icon-lg { flex: 0 0 28px; color: var(--accent); }
.regulation-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.regulation-chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--cyan);
  transition: transform var(--interaction-time) ease;
}
.regulation-card[open] > .regulation-summary > .regulation-chevron,
.regulation-nav[open] > .regulation-nav-summary > .regulation-chevron { transform: rotate(180deg); }
.regulation-card[open] > .regulation-summary {
  border-bottom: 1px solid var(--border);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.regulation-content { padding: 20px 22px 24px; color: var(--muted); }
.regulation-content .text-link { display: inline-block; }
.regulation-card:is(:focus-within, :active) {
  background-color: rgb(var(--dgu-color-080e19,8 14 25));
  border-color: var(--cyan);
  box-shadow: var(--regulation-glow);
}
/* Nested links stay inside their parent's popup at all viewport widths. */
.nav-submenu .regulation-nav {
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  overflow: visible;
}
.nav-submenu .regulation-nav-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  width: 100%;
  padding: 12px 13px;
  border: 0;
  border-radius: 6px;
  list-style: none;
  background: transparent;
  color: var(--muted);
  font-size: .97rem;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.regulation-nav-summary > span { flex: 1; min-width: 0; }
.regulation-nav-summary > .icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--cyan); }
.regulation-nav-summary > .regulation-chevron { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 4px; }
.nav-submenu .regulation-nav-summary:is(:focus-visible, :active) {
  background-color: rgb(var(--dgu-color-080e19,8 14 25));
  color: #fff;
  box-shadow: var(--regulation-glow);
}
.nav-submenu .regulation-nav-list {
  list-style: none;
  margin: 5px 0 8px 16px;
  padding: 0 0 0 8px;
  border-left: 1px solid rgb(var(--dgu-color-304564,48 69 100));
}
.nav-submenu .regulation-nav-link { font-size: .92rem; padding: 10px; }
@media (hover: hover) and (pointer: fine) {
  .regulation-card:hover {
    background-color: rgb(var(--dgu-color-080e19,8 14 25));
    border-color: var(--cyan);
    box-shadow: var(--regulation-glow);
  }
  .nav-submenu .regulation-nav-summary:hover {
    background-color: rgb(var(--dgu-color-080e19,8 14 25));
    color: #fff;
    box-shadow: var(--regulation-glow);
  }
}
@media (max-width: 760px) {
  .regulation-card > .regulation-summary { min-height: 84px; padding: 18px; }
  .regulation-content { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .regulation-card, .regulation-summary, .regulation-nav-summary,
  .regulation-chevron { transition: none !important; }
}
@media print {
  .regulation-card { box-shadow: none !important; background: #fff !important; }
  .regulation-card > .regulation-content { display: block !important; }
  .regulation-content { color: #111; }
}