/* Final reader refinements applied with deliberate priority while v3 is reviewed. */

body:has(.s5-reader-shell) {
  --s5-reader-prose: min(780px, 70ch) !important;
  --s5-reader-lead: min(900px, 76ch) !important;
}

.s5-reading-meta {
  display: flex;
  gap: .38rem;
  align-items: center;
  width: fit-content;
  margin: .7rem 0 2.15rem;
  color: var(--s5-muted);
  font-size: .52rem;
  font-weight: 680;
  letter-spacing: .025em;
}

.s5-reading-meta::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--s5-brand-blue);
  content: '';
}

.s5-reading-meta strong {
  color: var(--s5-text);
  font-weight: 780;
}

body:has(.s5-reader-shell) .sm-wrap {
  display: flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: .7rem 0 2.15rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.s5-reader-shell) .sm-wrap:hover {
  box-shadow: none !important;
}

body:has(.s5-reader-shell) .sm-wrap .sm-chips {
  gap: .62rem !important;
}

body:has(.s5-reader-shell) .sm-wrap .sm-chip {
  position: relative;
  gap: .28rem !important;
  padding: .15rem 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--s5-muted) !important;
  font-size: .52rem !important;
}

body:has(.s5-reader-shell) .sm-wrap .sm-chip + .sm-chip::before {
  position: absolute;
  top: 50%;
  left: -.36rem;
  color: var(--s5-line-strong);
  content: '·';
  transform: translateY(-52%);
}

body:has(.s5-reader-shell) .sm-wrap .sm-chip--time {
  color: var(--s5-text) !important;
}

body:has(.s5-reader-shell) .sm-wrap .sm-chip--count,
body:has(.s5-reader-shell) .sm-wrap .series-meta-row {
  display: none !important;
}

body:has(.s5-reader-shell) .sm-wrap .sm-dot {
  width: 6px !important;
  height: 6px !important;
  box-shadow: none !important;
}

.s5-reader-global-nav {
  display: none;
}

@media (min-width: 1320px) {
  body:has(.s5-reader-shell) .md-header {
    z-index: 5 !important;
  }

  body:has(.s5-reader-shell) .md-header__inner {
    position: relative;
  }

  /* Material swaps a second, page-title topic into the sticky header after
     scrolling. The reader already has a contextual rail and its own global
     navigation, so that long topic competes for the exact same horizontal
     space. Keep the stable site identity only and reserve a bounded title
     slot before the reader navigation starts. */
  body:has(.s5-reader-shell) .md-header__title {
    flex: 0 0 calc(var(--s5-reader-rail-width) - 76px) !important;
    width: calc(var(--s5-reader-rail-width) - 76px) !important;
    max-width: calc(var(--s5-reader-rail-width) - 76px) !important;
  }

  body:has(.s5-reader-shell) .md-header__topic:first-child {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body:has(.s5-reader-shell) .md-header__topic + .md-header__topic {
    display: none !important;
  }

  /* Material's second tab row remains the semantic source, but the reader
     presents one stable global navigation directly inside the header. */
  body:has(.s5-reader-shell) .md-tabs {
    display: none !important;
  }

  .s5-reader-global-nav {
    position: absolute;
    top: 0;
    right: 330px;
    left: calc(var(--s5-reader-rail-width) + var(--s5-reader-gap));
    display: flex;
    gap: 1.05rem;
    align-items: center;
    height: var(--s5-reader-header-height);
    overflow: hidden;
    white-space: nowrap;
  }

  .s5-reader-global-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--s5-muted) !important;
    font-size: .64rem;
    font-weight: 660;
    line-height: 1;
    text-decoration: none !important;
  }

  .s5-reader-global-nav__link:hover,
  .s5-reader-global-nav__link:focus-visible,
  .s5-reader-global-nav__link.is-active {
    color: var(--s5-text) !important;
  }

  .s5-reader-global-nav__link.is-active::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--s5-brand-blue);
    content: '';
  }

  /* The contextual rail already contains every chapter in the active series.
     Removing the second desktop navigator gives the title and lead room to
     breathe without sacrificing any route through the content. */
  body:has(.s5-reader-shell) .s5-reader-shell {
    height: 0;
    margin: 0 !important;
  }

  body:has(.s5-reader-shell) .s5-reader-topbar,
  body:has(.s5-reader-shell) .s5-reader-rail {
    display: none !important;
  }
}

@media (max-width: 1319px) {
  .s5-reader-global-nav {
    display: none !important;
  }
}

@media (max-width: 800px) {
  .s5-reading-meta,
  body:has(.s5-reader-shell) .sm-wrap {
    margin-top: .55rem !important;
    margin-bottom: 1.8rem !important;
  }

  .s5-reading-meta,
  body:has(.s5-reader-shell) .sm-wrap .sm-chip {
    font-size: .49rem !important;
  }
}

/* Inline article videos use a deterministic poster-first surface. The native
   video remains in the DOM for media coordination and indexing, but its browser
   chrome cannot leak into first paint before the reader asks to play it. */
.s5-video-embed__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--s5-line);
  background: #030708;
}

.s5-video-embed__frame > video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0 !important;
  background: #030708;
  object-fit: contain;
  visibility: hidden;
}

.s5-video-embed.is-playing .s5-video-embed__frame > video {
  visibility: visible;
}

.s5-video-embed__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  place-items: center;
  border: 0;
  background: #030708;
  color: #fff;
  cursor: pointer;
}

.s5-video-embed.is-playing .s5-video-embed__poster {
  display: none;
}

.s5-video-embed__poster img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s5-video-embed__play {
  position: relative;
  z-index: 1;
  display: grid;
  width: clamp(48px, 6vw, 66px);
  height: clamp(48px, 6vw, 66px);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 50%;
  background: rgba(3, 7, 8, .72);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
}

.s5-video-embed__play::before {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  content: '';
}

.s5-video-embed__poster:hover .s5-video-embed__play,
.s5-video-embed__poster:focus-visible .s5-video-embed__play {
  background: rgba(3, 7, 8, .9);
  transform: scale(1.04);
}

.s5-video-embed__poster:focus-visible {
  outline: 3px solid var(--s5-brand-blue);
  outline-offset: -3px;
}

@media (max-width: 800px) {
  /* The reader library is a deliberate horizontal selector, not a clipped
     desktop list. Keep the selected tab fully legible and show clean edges. */
  .s5-reader-series-list {
    gap: .4rem;
    padding-right: .75rem;
    padding-left: .75rem;
    scroll-padding-inline: .75rem;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .s5-reader-series-list::-webkit-scrollbar {
    display: none;
  }

  .s5-reader-series-tab {
    scroll-margin-inline: .75rem;
    scroll-snap-align: start;
    border-left: 1px solid var(--s5-line);
  }

  /* Video topic chips use the same interaction language. The end fade makes
     the additional horizontal content explicit instead of looking truncated. */
  .s5-video-library__filters {
    padding: .08rem 1.45rem .18rem .05rem;
    scroll-padding-inline: .05rem 1.45rem;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }

  .s5-video-library__filters::-webkit-scrollbar {
    display: none;
  }

  .s5-video-library__filters button {
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s5-video-embed__play {
    transform: none !important;
  }
}