/* ──────────────────────────────────────────────────────────────────────────
   Data Retention & Protection Policy — page-specific layer.

   The shared legal design system in legal.css now provides the hero, shell,
   cards, grids, callouts, chips, tables, and pill-tabs. This file only keeps
   the small hooks that the jurisdiction toggle (policy-data-retention.js)
   relies on, styled with solid dark surfaces — no gradients.
   ────────────────────────────────────────────────────────────────────────── */

/* Panel show/hide is driven by the [hidden] attribute from the toggle JS. */
.policy-panel[hidden] {
  display: none;
}

/* HIPAA / PHIPA header row inside a jurisdiction panel */
.policy-panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.policy-panel__head h2 {
  margin: 0;
}

/* Jurisdiction badge — solid dark surface with a subtle cyan border */
.policy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--nrx-public-surface-raised, #0b1424);
  border: 1px solid var(--nrx-public-border-strong, rgba(34, 211, 238, 0.28));
  color: var(--nrx-public-muted, #cbd5e1);
}