.ai-summary-mark {
  color: var(--muted);
  font-size: .72rem;
}
.ai-summary-note {
  margin: 3px 0 12px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}
.constructive-mark {
  display: inline-block;
  margin: 0 0 8px;
  color: #5f704b;
  font-size: .70rem;
  font-weight: 730;
  letter-spacing: .03em;
}
.why-it-matters {
  margin: 10px 0 14px;
  padding: 9px 11px;
  border-left: 3px solid #7b9096;
  background: #f2f5f4;
  color: #425159;
  font-size: .86rem;
  line-height: 1.48;
}
.why-it-matters strong { color: var(--text); }

.reading-level-button {
  min-width: 34px;
  min-height: 30px;
  padding: 5px 7px;
}
.reading-level-control[role="group"] { gap: 2px; }
.reading-level-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.reading-level-status.is-loading,
.reading-level-status.is-error {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 0 5px !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  color: var(--muted);
  font-size: .70rem;
  line-height: 1.3;
}
.reading-level-status.is-error { color: #8a4b45; }

.story {
  padding-top: 22px;
  padding-bottom: 26px;
}
.story-featured { padding-top: 20px; }

/* Featured placement should not change the article headline typography. */
.story-featured h3 {
  font-size: clamp(1.18rem, 2.5vw, 1.38rem);
  line-height: 1.3;
  font-weight: 650;
}

/* Keep the primary source action first. The optional three-dot material
   follows it and gets a full row while expanded. */
.story-actions { flex-wrap: wrap; }
.story-actions .source-link { order: -1; }
.story-actions .story-info[open] { flex-basis: 100%; }

/* Desktop: visually place the compact Reading guide control in the spare
   header space just to the left of the appearance control. */
@media (min-width: 761px) {
  .reader-tools {
    position: absolute !important;
    z-index: 75;
    top: 19px;
    right: max(62px, calc((100vw - 780px) / 2 + 44px));
    margin: 0 !important;
    max-width: none !important;
  }
  .reader-tools > summary {
    margin: 0 !important;
    white-space: nowrap;
  }
  .reader-tools[open] > summary { margin-bottom: 0 !important; }
  .reader-tools .reader-tools-panel {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    width: min(560px, calc(100vw - 32px));
    max-width: min(560px, calc(100vw - 32px));
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
  }

  /* Keep Reading guide and appearance controls on the exact same baseline. */
  .topbar .quiet-nav { align-items: center; }
  .topbar #theme-toggle.theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 32px;
    line-height: 1 !important;
    vertical-align: middle;
  }
}

@media (max-width: 600px) and (hover: none) and (pointer: coarse) {
  .light-open.side-feature-tab,
  .weather-open.side-feature-tab {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px;
    padding: 7px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--muted) !important;
    font-size: .74rem !important;
    font-weight: 650;
    line-height: 1;
    text-decoration: none !important;
    transition: transform .2s ease-out, opacity .2s ease-out !important;
    opacity: .92;
  }

  body.mobile-reading .light-open.side-feature-tab {
    transform: translateX(calc(-100% + 10px));
    opacity: .28;
    pointer-events: none;
  }
  body.mobile-reading .weather-open.side-feature-tab {
    transform: translateX(calc(100% - 10px));
    opacity: .28;
    pointer-events: none;
  }

  .reading-level-button {
    min-width: 38px;
    min-height: 36px;
    padding: 7px 8px;
    font-size: .73rem;
  }
  .reading-level-status.is-loading,
  .reading-level-status.is-error {
    flex-basis: 100%;
    margin: 2px 0 0 !important;
  }

  .story {
    padding-top: 20px;
    padding-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-feature-tab { transition: none !important; }
}

/* Topic navigation should scroll away with the page, not stay pinned. */
.topic-jump-top,
.topic-jump-top.is-stuck {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

/* Keep the navigation visually simple: active section is underlined instead
   of shown as a filled pill. Place Elsewhere immediately after Top stories. */
.topic-jump-top a[href="#top"] { order: -2; }
.topic-jump-top a[href="#elsewhere"] { order: -1; }
.topic-jump-top a.is-active,
.topic-jump-top a[aria-current="true"] {
  background: transparent !important;
  color: #40535a !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: .18em !important;
}
html[data-effective-theme="night"] .topic-jump-top a.is-active,
html[data-effective-theme="night"] .topic-jump-top a[aria-current="true"] {
  color: #c9d5d0 !important;
}