/* ================================================================
   PLANET CONTENT VISIBILITY
   ================================================================ */

[data-planet-content] {
  display: none;
}

#ex-content-overlay[data-planet="ex-mercury-js"] [data-planet-content="ex-mercury-js"],
#ex-content-overlay[data-planet="ex-venus-js"]   [data-planet-content="ex-venus-js"],
#ex-content-overlay[data-planet="ex-earth-js"]   [data-planet-content="ex-earth-js"],
#ex-content-overlay[data-planet="ex-mars-js"]    [data-planet-content="ex-mars-js"],
#ex-content-overlay[data-planet="ex-jupiter-js"] [data-planet-content="ex-jupiter-js"],
#ex-content-overlay[data-planet="ex-saturn-js"]  [data-planet-content="ex-saturn-js"],
#ex-content-overlay[data-planet="ex-uranus-js"]  [data-planet-content="ex-uranus-js"],
#ex-content-overlay[data-planet="ex-neptune-js"] [data-planet-content="ex-neptune-js"],
#ex-content-overlay[data-planet="ex-sun-js"]     [data-planet-content="ex-sun-js"] {
  display: block;
}

/* ================================================================
   MERCURY OVERLAY
   Color palette: dusty silver-grey — rgba(210,195,175) → rgba(150,135,120)
   Evokes: cratered rock, ancient surface, lunar tones
   ================================================================ */

#ex-content-overlay[data-planet="ex-mercury-js"] {
  background: transparent;
  /* Scroll headroom: without this, the last section has nowhere left to
     scroll to reach vertical center — scrollIntoView({block:'center'}) and
     the progress-strip nav both clamp at max scrollTop before centering,
     which reads as the scroll abruptly ending / kicking the user out. */
  padding-bottom: var(--ex-scroll-headroom-lg);
}

#ex-content-overlay[data-planet="ex-mercury-js"] .ex-overlay-section,
#ex-content-overlay[data-planet="ex-mercury-js"] .ex-overlay-section--entry {
  background: transparent;
  min-height: unset;
  padding: 0;
}

#ex-content-overlay[data-planet="ex-mercury-js"] .ex-overlay-entry-header {
  border-radius: var(--ex-border-radius-outer);
  padding: var(--ex-space-md) var(--ex-space-lg);
  border-bottom: none;
  margin-left: var(--ex-space-xxl);
  margin-bottom: 0;
  display: inline-block;
}

/* ================================================================
   MERCURY — SECTION LAYOUT SYSTEM
   ================================================================ */

.ex-mercury-section {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background-color: rgba(8, 7, 9, 0.84);
  border-left: 2px solid var(--ex-color-mercury-border);
  border-radius: 0 var(--ex-border-radius-outer) var(--ex-border-radius-outer) 0;
  display: flex;
  flex-direction: column;
  gap: var(--ex-space-sm);
  justify-content: center;
  max-width: var(--ex-size-420);
  min-height: auto;
  padding: var(--ex-space-sm) var(--ex-space-md);
  position: relative;
}

.ex-mercury-section[data-layout="bottom-center"] {
  align-items: center;
  border-bottom: 2px solid var(--ex-color-mercury-border);
  border-left: none;
  border-radius: var(--ex-border-radius-outer) var(--ex-border-radius-outer) 0 0;
  margin: calc(100dvh * 0.55) auto 0;
  max-width: var(--ex-size-xxl);
  text-align: center;
}

.ex-mercury-section[data-layout="right"] {
  border-left: none;
  border-radius: var(--ex-border-radius-outer) 0 0 var(--ex-border-radius-outer);
  border-right: 2px solid var(--ex-color-mercury-border);
  margin-left: auto;
  margin-top: calc(100dvh * 0.2);
}

.ex-mercury-section[data-layout="center"] {
  align-items: center;
  border-left: none;
  border-radius: 0 0 var(--ex-border-radius-outer) var(--ex-border-radius-outer);
  border-top: 2px solid var(--ex-color-mercury-border);
  margin: calc(100dvh * 0.2) auto var(--ex-space-xxl);
  max-width: var(--ex-size-xxl);
  text-align: center;
}

/* ================================================================
   MERCURY — TYPOGRAPHY
   ================================================================ */

.ex-mercury-section-label {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--ex-color-mercury-label);
  display: block;
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xxxs);
  letter-spacing: var(--ex-tracking-xl);
  padding: 0;
  text-transform: uppercase;
}

.ex-mercury-section-title {
  background: linear-gradient(to right, var(--ex-color-mercury-hi), var(--ex-color-mercury-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: var(--ex-font-size-md);
  font-weight: var(--ex-heading-font-weight);
}

.ex-mercury-body {
  color: var(--ex-text-body);
  font-size: var(--ex-font-size-default);
  opacity: var(--ex-opacity-body);
}

/* ── Key Fact ── */
.ex-mercury-key-fact {
  display: flex;
  flex-direction: column;
  gap: var(--ex-space-xxs);
  padding-top: var(--ex-space-default);
  border-top: 1px solid var(--ex-color-mercury-border-inner);
}

.ex-mercury-fact-number {
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xl);
  font-weight: var(--ex-heading-font-weight);
  background: linear-gradient(to right, var(--ex-color-mercury-hi), var(--ex-color-mercury-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ex-mercury-fact-label {
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xxs);
  letter-spacing: var(--ex-tracking-md);
  text-transform: uppercase;
  color: var(--ex-text-body);
  opacity: var(--ex-opacity-faint);
}

/* ── Stats Row ── */
.ex-mercury-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ex-space-xs);
  padding-top: var(--ex-space-default);
  border-top: 1px solid var(--ex-color-mercury-border-inner);
  justify-content: center;
}

.ex-mercury-stat-pill {
  display: flex;
  flex-direction: column;
  gap: var(--ex-space-xxs);
  padding: var(--ex-space-xxs) var(--ex-space-md);
  border: 1px solid var(--ex-color-mercury-border-inner);
  border-radius: var(--ex-border-radius-full);
  background-color: var(--ex-color-mercury-pill-bg);
}

.ex-mercury-stat-pill-value {
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-default);
  font-weight: var(--ex-heading-font-weight);
  color: var(--ex-text-body);
}

.ex-mercury-stat-pill-label {
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xxxs);
  letter-spacing: var(--ex-tracking-sm);
  text-transform: uppercase;
  color: var(--ex-text-body);
  opacity: var(--ex-opacity-faint);
}

/* ── Fact number size modifier ── */
.ex-mercury-fact-number--sm {
  font-size: var(--ex-font-size-md);
}

/* ── Read link ── */
.ex-mercury-read-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ex-space-xxs);
  margin-top: var(--ex-space-sm);
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xxs);
  font-weight: var(--ex-font-weight-medium);
  letter-spacing: var(--ex-tracking-md);
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(to right, var(--ex-color-mercury-hi), var(--ex-color-mercury-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity var(--ex-duration-fast) ease;
}
.ex-mercury-read-link:hover { opacity: var(--ex-opacity-mid); }

/* ── Subscribe section accent icon ── */
.ex-mercury-subscribe-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ex-size-50);
  height: var(--ex-size-50);
  border-radius: var(--ex-border-radius-full);
  background: var(--ex-color-mercury-pill-bg);
  border: 1px solid var(--ex-color-mercury-border-inner);
  color: var(--ex-color-mercury-hi);
  font-size: var(--ex-font-size-lg);
  margin-bottom: var(--ex-space-xxs);
}

/* ── Newsletter form — single merged pill (icon + input + button) ── */
.ex-mercury-form {
  display: flex;
  align-items: center;
  gap: var(--ex-space-xxs);
  margin-top: var(--ex-space-sm);
  padding: var(--ex-space-xxs);
  border: 1px solid var(--ex-color-mercury-border-inner);
  border-radius: var(--ex-border-radius-full);
  background: var(--ex-color-mercury-pill-bg);
  transition: border-color var(--ex-duration-fast) ease;
}
.ex-mercury-form:focus-within { border-color: var(--ex-color-mercury-hi); }

.ex-mercury-form-icon {
  flex-shrink: 0;
  color: var(--ex-color-mercury-hi);
  font-size: var(--ex-font-size-xs);
  padding-left: var(--ex-space-xs);
  opacity: var(--ex-opacity-mid);
}

.ex-mercury-input {
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--ex-text-body);
  flex: 1;
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xxs);
  min-width: 0;
  padding: var(--ex-space-xs) var(--ex-space-xxs);
  outline: none;
}
.ex-mercury-input::placeholder { color: var(--ex-text-body); opacity: var(--ex-opacity-faint); }

.ex-mercury-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(to right, var(--ex-color-mercury-hi), var(--ex-color-mercury-lo));
  border: none;
  border-radius: var(--ex-border-radius-full);
  color: var(--ex-color-black);
  cursor: pointer;
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xxxs);
  font-weight: var(--ex-heading-font-weight);
  letter-spacing: var(--ex-tracking-lg);
  padding: var(--ex-space-xs) var(--ex-space-md);
  transition: opacity var(--ex-duration-fast) ease;
  white-space: nowrap;
}
.ex-mercury-btn:hover { opacity: var(--ex-opacity-high); }

.ex-mercury-form-note {
  color: var(--ex-text-body);
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xxxs);
  font-weight: var(--ex-para-font-weight);
  margin-top: var(--ex-space-xs);
  min-height: 1em;
  opacity: var(--ex-opacity-faint);
  text-align: center;
}

/* ================================================================
   ARTICLE PANEL — slides up from the bottom, full-bleed and immersive
   (no boxed sidebar chrome). Position, the translateY slide, and the
   open/close transition all come from @strata-packages/offcanvas's own
   [data-st-side="bottom"] + [aria-hidden] rules (offcanvas.css) — this
   block only adds the visual styling and overrides the package's
   height token for a taller sheet.
   ================================================================ */

.ex-mercury-article-panel {
  --st-bg:               var(--ex-color-mercury-bg);
  --st-border:           transparent;
  --st-duration:         var(--ex-duration-slow);
  --st-easing:           cubic-bezier(0.4, 0, 0.2, 1);
  --st-offcanvas-height: min(85vh, 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
  pointer-events: none;
}

/* XL and above (≥1200px) — enough room that the panel can go fully
   transparent/immersive without its own text overlapping the section
   content behind it. Below that (XS/SM/MD/LG) the background above stays. */
@media (min-width: 1200px) {
  .ex-mercury-article-panel {
    --st-bg: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.ex-mercury-article-panel-inner,
.ex-mercury-article-panel-header,
.ex-mercury-article-panel-body,
.ex-mercury-article-panel-close {
  pointer-events: auto;
}

/* ── Scrollable inner container ── */
/* display/flex-direction/height/overflow-y now come from strata utilities
   (d-flex flex-column h-100 overflow-y-auto) on the element itself — only
   the properties with no strata utility equivalent stay here. */
.ex-mercury-article-panel-inner {
  overscroll-behavior: contain;
  scrollbar-color: var(--ex-color-mercury-border) transparent;
  scrollbar-width: thin;
}

/* ── Header ── */
.ex-mercury-article-panel-header {
  border-bottom: 1px solid var(--ex-color-mercury-border-inner);
  padding: var(--ex-space-xl) 0 var(--ex-space-md) var(--ex-size-md);
  position: relative;
}

.ex-mercury-article-panel-close {
  background: var(--ex-color-mercury-pill-bg);
  border: 1px solid var(--ex-color-mercury-border-inner);
  border-radius: var(--ex-border-radius-round);
  color: var(--ex-text-body);
  cursor: pointer;
  font-size: var(--ex-font-size-default);
  height: var(--ex-size-36);
  position: absolute;
  right: var(--ex-space-xl);
  top: var(--ex-space-xl);
  transition: background var(--ex-duration-fast) ease, border-color var(--ex-duration-fast) ease;
  width: var(--ex-size-36);
}
.ex-mercury-article-panel-close:hover {
  background: var(--ex-color-mercury-border);
  border-color: var(--ex-color-mercury-hi);
}

.ex-mercury-article-panel-cat {
  background: linear-gradient(to right, var(--ex-color-mercury-hi), var(--ex-color-mercury-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xxxs);
  font-weight: var(--ex-heading-font-weight);
  letter-spacing: var(--ex-tracking-xl);
  margin-bottom: var(--ex-space-sm);
  padding-right: var(--ex-size-40);
  text-transform: uppercase;
}

.ex-mercury-article-panel-title {
  color: var(--ex-text-body);
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xl);
  font-weight: var(--ex-heading-font-weight);
  margin-bottom: var(--ex-space-xs);
  max-width: var(--ex-size-xxl);
}

.ex-mercury-article-panel-meta {
  color: var(--ex-text-body);
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xxxs);
  font-weight: var(--ex-para-font-weight);
  letter-spacing: var(--ex-tracking-sm);
  opacity: var(--ex-opacity-faint);
  text-transform: uppercase;
}

/* ── Body ── */
.ex-mercury-article-panel-body {
  flex: 1;
  max-width: var(--ex-size-xxxl);
  /* Same scroll-headroom fix as the section list below: the last paragraph
     needs room past it to reach scrollIntoView's target position, otherwise
     paragraph-pagination nav hits max scroll before it gets there. */
  padding: var(--ex-space-xl) 0 var(--ex-scroll-headroom-sm) var(--ex-size-md);
}

.ex-mercury-article-panel-body p {
  color: var(--ex-text-body);
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-default);
  font-weight: var(--ex-para-font-weight);
  margin-bottom: var(--ex-space-md);
  opacity: var(--ex-opacity-body);
}

.ex-mercury-article-panel-body p:last-child { margin-bottom: 0; }

/* ================================================================
   MERCURY — PROGRESS STRIP
   Dual role: section pagination (default) / article paragraph nav
   (Stage 4 activates data-mode="article"). Fixed to the viewport so
   it persists across the whole scroll independent of overlay scroll.
   ================================================================ */

.ex-mercury-progress-backdrop {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--ex-color-black) 90%, transparent) 0%,
    color-mix(in srgb, var(--ex-color-black) 82%, transparent) 12%,
    color-mix(in srgb, var(--ex-color-black) 65%, transparent) 26%,
    color-mix(in srgb, var(--ex-color-black) 45%, transparent) 42%,
    color-mix(in srgb, var(--ex-color-black) 26%, transparent) 58%,
    color-mix(in srgb, var(--ex-color-black) 12%, transparent) 75%,
    color-mix(in srgb, var(--ex-color-black) 4%, transparent) 90%,
    transparent 100%
  );
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: opacity var(--ex-duration-slow) ease;
  width: var(--ex-size-lg);
  z-index: 9;
}

#ex-content-overlay[data-overlay-state="open"][data-planet="ex-mercury-js"] ~ .ex-mercury-progress-backdrop {
  opacity: 1;
}

.ex-mercury-progress-strip {
  display: flex;
  flex-direction: column;
  gap: var(--ex-space-lg);
  left: var(--ex-space-xl);
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 50%;
  transform: translateY(calc(-50% + var(--ex-space-xxl)));
  transition: opacity var(--ex-duration-slow) ease, transform var(--ex-duration-slow) ease;
  /* Above the article panel's default offcanvas z-index (1045) — the panel
     covers the bottom 85% of the viewport, which overlaps the strip's
     vertically-centered position, and it must stay clickable on top of it
     for paragraph navigation while the panel is open. */
  z-index: 1046;
}

#ex-content-overlay[data-overlay-state="open"][data-planet="ex-mercury-js"] ~ .ex-mercury-progress-strip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

.ex-mercury-progress-line {
  background-color: var(--ex-color-mercury-border-inner);
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 1px;
}

.ex-mercury-progress-item {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: grid;
  gap: 0 var(--ex-space-sm);
  /* Fixed-length first track (matches the bullet's own width) instead of
     "auto" — auto-sized columns combined with the bullet's old negative
     margin computed a slightly different column width per item (each
     button is an independent grid), causing the text column to drift
     left/right row to row. A fixed track removes that variance entirely. */
  grid-template-columns: var(--ex-space-xxs) auto;
  opacity: var(--ex-opacity-faint);
  padding: 0;
  text-align: left;
  transition: opacity var(--ex-duration-fast) ease;
}

.ex-mercury-progress-item[data-in-range="false"] {
  display: none;
}

.ex-mercury-progress-bullet {
  background-color: var(--ex-color-mercury-border);
  border-radius: var(--ex-border-radius-round);
  grid-row: 1 / 3;
  height: var(--ex-space-xxs);
  transition: background-color var(--ex-duration-fast) ease, transform var(--ex-duration-fast) ease;
  width: var(--ex-space-xxs);
}

.ex-mercury-progress-number {
  color: var(--ex-text-body);
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xs);
  font-weight: var(--ex-heading-font-weight);
  transition: opacity var(--ex-duration-fast) ease;
}

.ex-mercury-progress-label {
  color: var(--ex-text-body);
  font-family: var(--ex-font-main);
  font-size: var(--ex-font-size-xxxs);
  letter-spacing: var(--ex-tracking-sm);
  text-transform: uppercase;
  transition: opacity var(--ex-duration-fast) ease;
}

.ex-mercury-progress-item[data-swapping="true"] .ex-mercury-progress-number,
.ex-mercury-progress-item[data-swapping="true"] .ex-mercury-progress-label {
  opacity: 0;
}

.ex-mercury-progress-item:hover { opacity: var(--ex-opacity-mid); }

.ex-mercury-progress-item[data-active="true"] {
  opacity: var(--ex-opacity-high);
}

.ex-mercury-progress-item[data-active="true"] .ex-mercury-progress-bullet {
  background-color: var(--ex-color-mercury-hi);
  transform: scale(1.6);
}

.ex-mercury-progress-item[data-active="true"] .ex-mercury-progress-number {
  background: linear-gradient(to right, var(--ex-color-mercury-hi), var(--ex-color-mercury-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ================================================================
   MERCURY — RESPONSIVE
   Breakpoints match the project convention (css-standards.md RULE 17).
   Placed after the base rules above so the overrides win the cascade.
   ================================================================ */

/* ── XS: strip has no room at all — hide it and the backdrop entirely,
   sections and the article panel fall back to plain full-width margins ── */
@media (max-width: 575.98px) {
  .ex-mercury-article-panel-close {
    right: var(--ex-space-sm);
  }

  .ex-mercury-progress-strip,
  .ex-mercury-progress-backdrop {
    display: none;
  }

  .ex-mercury-article-panel-header,
  .ex-mercury-article-panel-body {
    padding-left: var(--ex-space-xs);
    padding-right: var(--ex-space-xs);
  }

  #ex-content-overlay[data-planet="ex-mercury-js"] .ex-overlay-entry-header {
    margin: 0;
  }
}

/* ── SM: strip shows bullets only — numbers/labels hidden, narrow backdrop ── */
@media (min-width: 576px) and (max-width: 767.98px) {
  .ex-mercury-progress-number,
  .ex-mercury-progress-label {
    display: none;
  }

  .ex-mercury-article-panel-header,
  .ex-mercury-article-panel-body {
    padding-left: var(--ex-space-xxl);
  }
}

/* ── MD: strip shows number only — label hidden, medium backdrop/offset ── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ex-mercury-progress-label {
    display: none;
  }

  .ex-mercury-article-panel-header,
  .ex-mercury-article-panel-body {
    padding-left: var(--ex-size-md);
  }
}