/*
 * Section navigation rail for oversing.com.
 *
 * Twin of runcible-public-core/runcible-page-progress.css. It could not be
 * copied byte-for-byte: every rule there is scoped to
 * body[class*="runcible-public-"], which never matches here. The scope is the
 * only structural difference.
 *
 * The second difference is that the hard-coded colours have been replaced with
 * the tokens they correspond to in runcible-tokens.css. The values resolve
 * identically; see the mapping table in SHARED-ASSETS.md, which is what
 * verify-shared-assets.py checks.
 *
 * The rail is also the index for the exhibit component. When a
 * [data-exhibit] element is present, oversing-exhibit.js takes over the
 * active-link state for that rail and the scroll spy stands down. Nothing in
 * this stylesheet needs to know which mode is active — both drive the same
 * .is-active class.
 */

/* Native blocks place the rail and page body beside each other. The theme's
   default block gap would otherwise show a strip of page background beneath
   the sticky rail. Page rhythm remains inside each section. */
body[class*="oversing-public-"] .wp-block-post-content,
body[class*="oversing-public-"] .wp-block-post-content.is-layout-flow,
body[class*="oversing-public-"] .entry-content {
  --wp--style--block-gap: 0px !important;
}

body[class*="oversing-public-"] .wp-block-post-content > .wp-block-group.oversing-page-body {
  margin-block: 0 !important;
}

body[class*="oversing-public-"] .page-progress {
  position: sticky;
  top: var(--oversing-header-offset, 80px);
  /* Core's global styles give every direct child of .wp-site-blocks a
     margin-block-start of 1.2rem. The block-gap override above clears that
     inside the post content, which is where runcible.com's rail lives -- but
     here the rail is injected as a direct child of .wp-site-blocks, so the
     override never reaches it. The rail therefore rested 19px below the
     header and had to travel that distance before it stuck, which reads as
     the rail coming unglued from the header on the first scroll.
     Core's selector is wrapped in :where(), which contributes no
     specificity, so a plain declaration beats it. */
  margin-block: 0;
  z-index: 14;
  display: flex;
  align-items: stretch;
  min-height: 34px;
  border-bottom: 1px solid var(--rail-border, #cfc3af);
  color: #1d2825;
  background: var(--rail-bg, rgba(242, 236, 223, .97));
  box-shadow: 0 1px 0 rgba(16, 18, 17, .04);
  backdrop-filter: blur(10px);
}

body[class*="oversing-public-"] .page-progress .progress-title,
body[class*="oversing-public-"] .page-progress .progress-current,
body[class*="oversing-public-"] .page-progress a {
  display: flex;
  align-items: center;
  min-height: 34px;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[class*="oversing-public-"] .page-progress .progress-title {
  flex: 0 0 auto;
  /* Same gutter as the header row, so the rail title and the wordmark share a
     left edge. runcible.com uses an 18px floor here against the header's 20px;
     the 2px is not deliberate. */
  padding: 0 var(--gutter-x);
  color: var(--rail-title, #b94f36);
  white-space: nowrap;
}

body[class*="oversing-public-"] .page-progress .progress-current {
  display: none;
}

body[class*="oversing-public-"] .page-progress .progress-links {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

body[class*="oversing-public-"] .page-progress a {
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 10px;
  border-left: 1px solid var(--rail-divider, #d7cdbc);
  color: var(--rail-link, #6d675c);
  text-align: center;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

body[class*="oversing-public-"] .page-progress a:hover,
body[class*="oversing-public-"] .page-progress a:focus-visible {
  color: var(--rail-link-hover, #17201d);
  background: var(--rail-hover-bg, #ece5d8);
  outline: none;
}

body[class*="oversing-public-"] .page-progress a.is-active,
body[class*="oversing-public-"] .page-progress a[aria-current="location"],
body[class*="oversing-public-"] .page-progress a[aria-current="true"] {
  color: #fff;
  background: var(--rail-active-bg, #1d3935);
  box-shadow: inset 0 -4px 0 var(--rail-active-accent, #d4a63d);
}

/* Focus must stay visible against the active teal fill, which the hover rule
   above would otherwise wash out. */
body[class*="oversing-public-"] .page-progress a:focus-visible {
  outline: 2px solid var(--rail-active-accent, #d4a63d);
  outline-offset: -2px;
}

/* Keep anchored titles clear of sticky header + progress rail.
   Use scroll-margin only (not also scroll-padding) to avoid double offset. */
body[class*="oversing-public-"] .section[id],
body[class*="oversing-public-"] .exhibit-panel[id],
body[class*="oversing-public-"] h1[id],
body[class*="oversing-public-"] h2[id],
body[class*="oversing-public-"] h3[id] {
  scroll-margin-top: var(--oversing-sticky-offset, 120px);
}

@media (max-width: 1050px) {
  body[class*="oversing-public-"] .page-progress a {
    flex: 0 0 auto;
    min-width: 112px;
  }

  body[class*="oversing-public-"] .page-progress .progress-links {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
}

@media (max-width: 720px) {
  body[class*="oversing-public-"] .page-progress {
    top: var(--oversing-header-offset, 72px);
    min-height: 34px;
  }

  body[class*="oversing-public-"] .page-progress .progress-title,
  body[class*="oversing-public-"] .page-progress .progress-current,
  body[class*="oversing-public-"] .page-progress a {
    min-height: 34px;
    font-size: .5rem;
  }

  body[class*="oversing-public-"] .page-progress .progress-title {
    /* Asymmetric on purpose: the rail scrolls horizontally here, and the
       tighter right side lets the next item peek through as an affordance.
       The left is the shared gutter, so the rail title keeps the same left
       edge as the wordmark above it and the footer below. */
    padding: 0 12px 0 var(--gutter-x);
  }

  body[class*="oversing-public-"] .page-progress .progress-current {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 14px;
    border-left: 1px solid var(--rail-divider, #d7cdbc);
    color: var(--rail-active-bg, #1d3935);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[class*="oversing-public-"] .page-progress .progress-links {
    flex: 0 0 34vw;
    min-width: 0;
    margin-left: auto;
    max-width: 34vw;
  }

  body[class*="oversing-public-"] .page-progress a {
    min-width: 102px;
  }
}