/* ==========================================================================
   COMPONENTS · MARGIN ASIDE — the report apparatus margin (workstream 4b).
   Composes the report's already-linked enrichment — a country-summary sidebar,
   glossary definitions, and one clinics/sources aside — into the reserved
   `.o-apparatus` margin, reusing the sidenote float mechanism. Desktop (≥72rem):
   each aside floats into the reserved aside column. Mobile/tablet: it collapses
   inline as a bordered card, exactly as the sidenote popover does, so the margin
   degrades to in-flow content on a phone. Unskinned beyond design tokens.
   ========================================================================== */

.op-aside {
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.op-aside__kicker {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  margin: 0 0 var(--space-2xs);
}
/* A kicker that introduces a second block inside one aside (the Sources list
   under the Clinics list) wants air above it. */
.op-aside__list + .op-aside__kicker { margin-top: var(--space-sm); }

.op-aside__head-link {
  color: var(--accent);
  text-decoration: none;
}
.op-aside__head-link:hover { color: var(--accent-ink); text-decoration: underline; }

.op-aside__body { margin: 0; }

.op-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.op-aside__list li + li { margin-top: var(--space-2xs); }

.op-aside__link {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.op-aside__link:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ----- DESKTOP (apparatus engaged): float each aside into the reserved margin,
   the same negative-margin technique the sidenote uses. `clear: right` stacks the
   asides (and any inline-citation sidenotes) down the column. ----- */
@media (min-width: 72rem) {
  .op-aside {
    float: right;
    clear: right;
    inline-size: var(--apparatus-aside);
    margin-right: calc(-1 * (var(--apparatus-gap) + var(--apparatus-aside)));
    margin-bottom: var(--space-md);
    padding-left: var(--space-sm);
    border-left: 2px solid var(--accent-keyline);
    text-align: left;
  }
}

/* ----- MOBILE / TABLET: fold inline as a bordered card (always shown — asides
   are substantial, so they stay in the flow rather than behind a toggle). ----- */
@media (max-width: 71.99rem) {
  .op-aside {
    margin-block: var(--space-md);
    padding: var(--space-sm);
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent-keyline);
    border-radius: var(--radius-xs);
  }
}