/* =====================================================
   MH Theme — Phase 90 Thinking nav reuse
   Purpose: Thinking filters and single-post TOC reuse the real header menu
   classes for glass + hover/active behavior.

   This file owns layout only. Hover/active artwork comes from:
   - .mht-nav__inner
   - .mht-nav__links
   - .mht-nav__link
   ===================================================== */

/* Thinking filter: sticky bar under the fixed header. */
.mht-thinking-page .mht-thinking-page__filters {
  position: sticky;
  top: calc(var(--nav-top-offset, 28px) + var(--nav-h, 64px) + clamp(10px, 1.3vw, 16px));
  z-index: 150;
  padding-block: 0;
  margin-block: clamp(10px, 1.6vw, 18px) clamp(22px, 3vw, 36px);
}

.mht-thinking-page .mht-thinking-page__filters-inner {
  width: var(--site-w);
  max-width: var(--site-max);
  margin-inline: auto;
}

.mht-thinking-page .mht-thinking-filter.mht-nav__inner {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  justify-content: flex-start !important;
  gap: clamp(8px, 1.1vw, 14px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mht-thinking-page .mht-thinking-filter.mht-nav__inner::-webkit-scrollbar { display: none; }

.mht-thinking-page .mht-thinking-filter.mht-nav__inner .mht-nav__link {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Remove the old filter-chip pill styling so the header nav class owns the
   active/hover surface. */
.mht-thinking-page .mht-thinking-filter.mht-nav__inner .mht-thinking-filter__chip,
.mht-thinking-page .mht-thinking-filter.mht-nav__inner .mht-thinking-filter__chip:hover,
.mht-thinking-page .mht-thinking-filter.mht-nav__inner .mht-thinking-filter__chip:focus-visible,
.mht-thinking-page .mht-thinking-filter.mht-nav__inner .mht-thinking-filter__chip.is-active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.mht-thinking-page .mht-thinking-filter__label { display: none !important; }

/* Single post TOC: same header glass/menu classes, sidebar layout only. */
@media (min-width: 981px) {
  .mht-post-single .mido-post-toc-layout {
    grid-template-columns: clamp(300px, 22vw, 350px) minmax(0, 1fr);
    gap: clamp(1.75rem, 3vw, 3.25rem);
  }
}

.mht-post-single .mido-post-toc {
  top: calc(var(--nav-top-offset, 28px) + var(--nav-h, 64px) + clamp(12px, 1.4vw, 18px));
}

.mht-post-single .mido-post-toc__inner.mht-nav__inner {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  gap: 0 !important;
  border-radius: 26px !important;
  padding: clamp(20px, 2.1vw, 26px) !important;
  max-height: calc(100svh - var(--nav-top-offset, 28px) - var(--nav-h, 64px) - 56px);
}

.mht-post-single .mido-post-toc__eyebrow {
  margin: 0 0 .95rem !important;
}

/* Shared post/legal TOC glass parity guard.
   Header nav owns the locked glass material and angled border through
   .mht-nav__inner + ::after. The TOC keeps that same border/depth language.
   Only the tall-card top highlight (::before) is suppressed because its
   percentage height creates a visible mid-card glass band in Chromium when the
   nav surface is reused vertically. Header nav and mobile dock keep both
   pseudo-elements unchanged. */
.mht-post-single .mido-post-toc__inner.mht-nav__inner::before {
  display: none !important;
  content: none !important;
}

/* Chromium compositor guard for sticky/backdrop-filter TOC cards.
   This does not change the approved glass material; it only forces the shared
   nav surface to paint as one isolated layer while preserving the header-owned
   background, border pseudo-element, shadow, and blur. */
.mht-post-single .mido-post-toc__inner.mht-nav__inner {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.mht-post-single .mido-post-toc__nav,
.mht-post-single .mido-post-toc__nav.mht-nav__links {
  display: grid !important;
  align-items: stretch !important;
  gap: .48rem !important;
  max-height: 330px !important;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .54rem .72rem .54rem 0 !important;
  scroll-padding-block: .9rem !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(183, 140, 255, .66) rgba(76, 52, 93, .20);
}

.mht-post-single .mido-post-toc__nav::-webkit-scrollbar { width: 7px; }

.mht-post-single .mido-post-toc__nav::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(76, 52, 93, .18);
}

.mht-post-single .mido-post-toc__nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(183, 140, 255, .72), rgba(142, 99, 163, .62));
  border: 2px solid rgba(13, 13, 13, .72);
}

.mht-post-single .mido-post-toc__nav::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(230, 216, 255, .86), rgba(183, 140, 255, .74));
}

.mht-post-single .mido-post-toc__nav .mht-nav__link {
  width: 100%;
  max-width: 100%;
  min-height: 0 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  padding: .88rem 1.12rem !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  font-size: clamp(.63rem, .57rem + .14vw, .71rem) !important;
  letter-spacing: .13em !important;
}

.mht-post-single .mido-post-toc__nav .mht-nav__link::after {
  display: none !important;
  content: none !important;
}

.mht-post-single .mido-post-toc__nav .mht-nav__link::before {
  border-radius: 999px !important;
}

/* Phase 151N.2.4.3: Chromium TOC active-pill repaint fix.
   The header link surface uses a transformed ::before layer. In a sticky,
   backdrop-filtered, internally scrollable TOC, Chromium can repaint that layer
   with a horizontal seam during scroll/cursor updates. Keep the approved header
   active-pill artwork, but render it inside a local TOC link stacking context
   instead of behind the link with negative z-index. */
.mht-post-single .mido-post-toc__nav .mht-nav__link {
  isolation: isolate !important;
  contain: paint;
  backface-visibility: hidden;
}

.mht-post-single .mido-post-toc__nav .mht-nav__link::before {
  z-index: 0 !important;
  transform: translate3d(0, 0, 0) scale(.86) !important;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.mht-post-single .mido-post-toc__nav .mht-nav__link:hover::before,
.mht-post-single .mido-post-toc__nav .mht-nav__link:focus-visible::before,
.mht-post-single .mido-post-toc__nav .mht-nav__link.is-active::before {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.mht-post-single .mido-post-toc__label {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  width: 100%;
  max-width: 100%;
  line-height: 1.28;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.mht-post-single .mido-post-toc__nav .mido-post-toc__sub {
  margin-left: 6px !important;
  max-width: calc(100% - 6px);
  font-size: clamp(.6rem, .56rem + .12vw, .68rem) !important;
  letter-spacing: .12em !important;
  opacity: .86;
}

html[data-mht-theme-effective="light"] .mht-post-single .mido-post-toc__nav,
html[data-mht-theme="light"] .mht-post-single .mido-post-toc__nav {
  scrollbar-color: rgba(142, 99, 163, .58) rgba(230, 216, 255, .52);
}

html[data-mht-theme-effective="light"] .mht-post-single .mido-post-toc__nav::-webkit-scrollbar-track,
html[data-mht-theme="light"] .mht-post-single .mido-post-toc__nav::-webkit-scrollbar-track {
  background: rgba(230, 216, 255, .50);
}

html[data-mht-theme-effective="light"] .mht-post-single .mido-post-toc__nav::-webkit-scrollbar-thumb,
html[data-mht-theme="light"] .mht-post-single .mido-post-toc__nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(183, 140, 255, .70), rgba(142, 99, 163, .56));
  border-color: rgba(246, 242, 247, .72);
}

@media (max-width: 900px) {
  .mht-thinking-page .mht-thinking-page__filters {
    position: static;
    margin-block: clamp(8px, 3vw, 16px) clamp(20px, 6vw, 32px);
  }

  .mht-thinking-page .mht-thinking-filter.mht-nav__inner {
    min-height: 52px !important;
    padding-inline: 16px !important;
  }
}

@media (max-width: 980px) {
  .mht-post-single .mido-post-toc-layout { display: block !important; }

  .mht-post-single .mido-post-toc {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    margin: 0 0 clamp(28px, 8vw, 44px) !important;
    transform: none !important;
  }

  .mht-post-single .mido-post-toc__inner.mht-nav__inner {
    width: 100% !important;
    max-height: none !important;
    padding: clamp(18px, 5vw, 24px) !important;
    border-radius: clamp(22px, 7vw, 30px) !important;
  }

  .mht-post-single .mido-post-toc__nav,
  .mht-post-single .mido-post-toc__nav.mht-nav__links {
    max-height: min(34svh, 260px) !important;
    padding: .48rem .46rem .48rem 0 !important;
    gap: .5rem !important;
  }

  .mht-post-single .mido-post-toc__nav .mht-nav__link {
    font-size: .7rem !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
    padding: .78rem .92rem !important;
  }

  .mht-post-single .mido-post-toc-body {
    max-width: 72ch !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 640px) {
  .mht-post-single .mido-post-toc__inner.mht-nav__inner { padding: 18px !important; }

  .mht-post-single .mido-post-toc__nav,
  .mht-post-single .mido-post-toc__nav.mht-nav__links {
    max-height: min(30svh, 220px) !important;
  }
}