/* Presentation-only follow-up. Mathematical data and the retained shared CSS
   stay byte-identical; no formula transforms or alternate content are added. */
/* Keep content columns stable when a vertical scrollbar appears or is hidden. */
html { scrollbar-gutter: stable; }
body { min-width: 0; }
#view { min-width: 0; overflow-wrap: anywhere; }
.object-hero-grid > *, .object-layout > * { min-width: 0; }
.formula-stage, .mathml { min-width: 0; max-width: 100%; }

@media (max-width: 560px) {
  .object-hero h1 { font-size: clamp(2.25rem, 11vw, 3.7rem); }
}

/* Long English navigation must not push the same-page language switch off-screen. */
@media (min-width: 821px) {
  .site-header { height: auto; min-height: 76px; gap: 20px; padding-block: 14px; }
  .site-brand { flex-shrink: 0; }
  .site-brand small { max-width: 200px; }
  .primary-nav { min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 14px clamp(10px, 1.2vw, 24px); }
}

/* A fixed menu needs its own scroll area in short landscape viewports. */
@media (max-width: 820px) {
  .primary-nav { max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; }
}

/* Home-only: the illustration must not impose its intrinsic width on the copy. */
@media (max-width: 1120px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); }
  .home-hero > * { min-width: 0; }
}
@media (max-width: 560px) {
  .home-hero .hero-copy h1 { font-size: clamp(2.25rem, 13vw, 3.4rem); }
}

/* A wrapped guide link is one target, including the space between its lines. */
.readable-content li > a[href*="/derivations/derivation-"] {
  display: inline-block;
  max-width: 100%;
}
.object-panel[data-panel="explanation"] a[href*="/derivations/"] {
  display: inline-block;
  max-width: 100%;
  min-height: 44px;
  padding: .65rem .85rem;
  border: 1px solid var(--line);
  border-radius: .55rem;
}