/* Side placements use the existing gutters; the page keeps its original width. */
.shell > main { position: relative; }

.mcc-side-ad-rail {
  display: none;
  position: absolute;
  top: var(--mcc-side-ad-top, 104px);
  bottom: 0;
  width: var(--mcc-side-ad-width, 300px);
}

.mcc-side-ad-rail--left { right: calc(100% + 24px); }
.mcc-side-ad-rail--right { left: calc(100% + 24px); }

/* This also hides the rails immediately during an Overview tab transition. */
.shell:has(.tabs [data-view="ban"][aria-selected="true"],
           .tabs [data-view="population"][aria-selected="true"],
           .tabs [data-view="rotations"][aria-selected="true"],
           .tabs [data-view="resources"][aria-selected="true"],
           .tabs [data-view="about"][aria-selected="true"])
  .mcc-side-ad-rail:not([hidden]) { display: block; }

.mcc-side-ad-placement { position: sticky; top: 24px; }
.mcc-side-ad-slot { width: 100%; min-height: 100px; }
.mcc-side-ad-slot > iframe { display: block; width: 100%; max-width: 100%; }
.mcc-side-ad-caption {
  display: none;
  margin: 0 0 8px;
  color: var(--muted);
  font: 10px/1.5 Inter, Arial, sans-serif;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.mcc-side-ad-placement:has(iframe) .mcc-side-ad-caption { display: block; }

/* Do not pin an ad taller than the viewport; let visitors scroll through it. */
.mcc-side-ad-placement--tall { position: static; }

/* The JS uses measured gutters (including scrollbar width) for the final fit. */
@media (max-width: 2435px) {
  .shell .mcc-side-ad-rail { display: none !important; }
}
@media print {
  .shell .mcc-side-ad-rail { display: none !important; }
}