/* Isolated atlas preview. No selectors affect the original variety page. */
.atlas-paper .season {
  --paper-outset: clamp(0px, calc((100vw - 1208px) / 2), 48px);
  position: relative;
  isolation: isolate;
  margin: 18px calc(-1 * var(--paper-outset)) 0;
  padding-inline: min(20px, var(--paper-outset));
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

/* A short rear sheet: only its upper edge is exposed. It scrolls normally and
   does not produce a second border alongside the entire chapter. */
.atlas-paper .season::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: -10px;
  left: 16px;
  right: 10px;
  height: 112px;
  background: var(--surface-card);
  border: 1px solid rgb(146 128 92 / .10);
  box-shadow: 0 -1px 2px rgb(70 56 33 / .025);
  pointer-events: none;
}

/* The front sheet ends with .season, before .summary. The faint grain is CSS,
   not a raster texture; the only exterior shadow is a tiny bottom contact. */
.atlas-paper .season::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid rgb(146 128 92 / .11);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgb(107 90 63 / .008) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(107 90 63 / .006) 0 1px, transparent 1px 4px);
  box-shadow: 0 2px 2px -2px rgb(70 56 33 / .14);
  pointer-events: none;
}

.atlas-paper .panels { padding-bottom: 40px; }
.atlas-paper .panel > *,
.atlas-paper .pside > *,
.atlas-paper .boxes > * { min-width: 0; }

/* A layout wrapper only: the original SVG, labels, data and viewBox are intact. */
.atlas-chart-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-coral) transparent;
}
.atlas-chart-scroll:focus-visible {
  outline: 2px solid var(--grape);
  outline-offset: 3px;
  border-radius: 3px;
}
.atlas-chart-hint {
  display: none;
  margin: 6px 0 0;
  font: 12px/1.4 var(--sans);
  color: var(--ink3);
}

/* Opening a long observation list should not stretch a narrow right column
   for several screens. Keep the original main/metrics/chart grid above it,
   then let the same observations use a full-width row. No data is duplicated. */
@media (min-width: 1061px) {
  .atlas-paper .panel:has(.obs details[open]) {
    grid-template-rows: min-content min-content auto;
  }
  .atlas-paper .panel:has(.obs details[open]) > .pmain {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .atlas-paper .panel:has(.obs details[open]) > .pside { display: contents; }
  .atlas-paper .panel:has(.obs details[open]) > .pside > .stats {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .atlas-paper .panel:has(.obs details[open]) > .pside > .statnote {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  .atlas-paper .panel:has(.obs details[open]) > .pside > .chartcard {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }
  .atlas-paper .panel:has(.obs details[open]) > .pside > .obs {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .atlas-paper .obs:has(details[open]) .ob { max-width: 80ch; }
}

@media (max-width: 860px) {
  /* A full-width reading surface, with the original internal 16px text inset. */
  .atlas-paper .season {
    --paper-outset: 16px;
    margin-top: 18px;
    padding-inline: 0;
  }
  .atlas-paper .season::before { display: none; }
  .atlas-paper .season::after { border-inline: 0; }
  .atlas-paper .panels { padding-bottom: 28px; }
  .atlas-paper .shead { gap: 12px; }
  .atlas-paper .arrows { gap: 6px; }
  .atlas-paper .arrows button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  .atlas-paper .strip {
    touch-action: pan-x pan-y;
    scroll-padding-inline: 16px;
  }
  .atlas-paper .strip-hint { color: var(--ink2); }
  /* Preserve the SVG's native label sizes rather than shrinking a dense plot.
     Only the chart scrolls; the surrounding page and explanatory text do not. */
  .atlas-chart-scroll > .chart { min-width: var(--chart-width); }
  .atlas-paper .olist li { grid-template-columns: minmax(0, 1fr) auto; }
  .atlas-paper .ob { min-width: 0; overflow-wrap: anywhere; }
  .atlas-paper .known li { grid-template-columns: 110px minmax(0, 1fr) 28px; }
}

@media (max-width: 480px) {
  .atlas-chart-hint { display: block; }
}

@media print {
  .atlas-paper .season { margin-inline: 0; padding-inline: 0; }
  .atlas-paper .season::before { display: none; }
  .atlas-paper .season::after { box-shadow: none; background-image: none; }
  .atlas-chart-scroll { overflow: visible; }
  .atlas-chart-scroll > .chart { min-width: 0; }
  .atlas-chart-hint { display: none; }
}