/* v12: final mobile navigation polish and curated-favorites cleanup. */
:root{--nav-h:76px}

/*
  Keep the sticky geometry absolutely fixed. Safari's collapsing browser chrome
  is much smoother when the sticky tree never changes height, scale or inset.
*/
.nav-shell,
.nav-shell.is-compact,
.nav-shell.is-scrolled{
  position:-webkit-sticky!important;
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  height:calc(76px + var(--safe-top))!important;
  padding:calc(6px + var(--safe-top)) 10px 6px!important;
  background:linear-gradient(180deg,rgba(245,245,247,.985),rgba(245,245,247,.955))!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  -webkit-transform:none!important;
  will-change:auto!important;
  overflow-anchor:none!important;
}

.nav-glass,
.nav-shell.is-compact .nav-glass,
.nav-shell.is-scrolled .nav-glass{
  --progress-pct:0%;
  position:relative!important;
  width:100%!important;
  max-width:70rem!important;
  height:64px!important;
  margin:0 auto!important;
  border:1px solid rgba(255,255,255,.9)!important;
  border-radius:32px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:rgba(245,247,251,.82)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(75,91,124,.055),
    0 8px 22px rgba(31,45,72,.075)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  -webkit-transform:none!important;
  will-change:auto!important;
}

/* The capsule surface itself carries the progress. No separate line or scaled pill. */
.nav-glass::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  border:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(88,151,255,.20),rgba(70,132,241,.14)) 0 0 / var(--progress-pct) 100% no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.90),rgba(239,243,250,.78)) 0 0 / 100% 100% no-repeat!important;
  box-shadow:none!important;
  transform:none!important;
  transition:none!important;
}
.nav-glass::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:1px!important;
  border-radius:31px!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 46%,transparent 72%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42)!important;
  transform:none!important;
  contain:paint;
}

.nav-scroll{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  padding:8px 10px!important;
  margin:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-padding-inline:10px!important;
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  overscroll-behavior-x:contain!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch;
}
.nav-scroll::-webkit-scrollbar{display:none!important}

/* Chips use one geometry and one material regardless of scroll position. */
.nav-chip,
.nav-shell.is-compact .nav-chip,
.nav-shell.is-scrolled .nav-chip{
  flex:0 0 auto!important;
  min-height:46px!important;
  height:46px!important;
  padding:0 16px!important;
  margin:0!important;
  border:1px solid rgba(50,60,82,.07)!important;
  border-radius:23px!important;
  background:rgba(255,255,255,.80)!important;
  color:#4a4b50!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 2px 7px rgba(31,41,63,.035)!important;
  font-size:14px!important;
  font-weight:680!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
  white-space:nowrap!important;
  transform:none!important;
  transition:background .14s ease,color .14s ease,border-color .14s ease,box-shadow .14s ease!important;
}
.nav-chip:active{opacity:.76!important;transform:none!important}
.nav-chip.is-active{
  background:linear-gradient(180deg,#3d78e6,#2f63d6)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 4px 10px rgba(47,99,214,.18)!important;
}
.read-progress,.read-progress__bar,.nav-top-btn,.top-tap{display:none!important}

/* A small, consistent breathing room between the sticky navigator and chapter hero. */
.chapter-hero{padding-top:2.55rem!important}
#intro .chapter-hero{padding-top:1.35rem!important}

/* Curated tools */
.curated-head{margin-top:0!important;margin-bottom:.8rem!important}
.curated-head p{margin-bottom:0!important}
.curated-tools{gap:8px!important}
.curated-tool{
  min-height:42px!important;
  height:42px!important;
  padding:0 14px!important;
  border:1px solid rgba(40,45,58,.07)!important;
  border-radius:21px!important;
  background:rgba(255,255,255,.86)!important;
  color:#55575d!important;
  box-shadow:0 3px 10px rgba(35,43,62,.035)!important;
  font-size:13px!important;
  font-weight:680!important;
}
.curated-tool.is-active{background:#202125!important;color:#fff!important;border-color:#202125!important}
.curated-tool__count{
  min-width:20px!important;height:20px!important;margin-left:5px!important;padding:0 6px!important;
  background:rgba(47,99,214,.10)!important;color:var(--accent)!important;font-size:10px!important
}
.curated-tool.is-active .curated-tool__count{background:rgba(255,255,255,.16)!important;color:#fff!important}

/* Flatten the favorites panel: header + independent saved rows, instead of a card inside a card. */
.curated-favorites-panel{
  margin:.15rem 0 1rem!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.curated-favorites-panel__top{
  min-height:40px!important;
  margin:0 2px 8px!important;
  padding:0!important;
}
.curated-favorites-panel__top strong{font-size:15px!important;font-weight:720!important}
.curated-favorites-close{
  min-height:34px!important;
  padding:0 11px!important;
  border:1px solid rgba(0,0,0,.055)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.8)!important;
  color:#676970!important;
  font-size:12px!important;
  font-weight:680!important;
}
.curated-favorites-list{display:grid!important;gap:8px!important}
.curated-favorite-row{
  grid-template-columns:56px minmax(0,1fr) 36px!important;
  gap:10px!important;
  min-height:72px!important;
  padding:8px!important;
  border:1px solid rgba(0,0,0,.05)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:0 6px 18px rgba(30,40,62,.04)!important;
}
.curated-favorite-row img{width:56px!important;height:56px!important;border-radius:12px!important}
.curated-favorite-row__copy small{font-size:10px!important;margin-bottom:3px!important}
.curated-favorite-row__copy a{
  font-size:14px!important;
  font-weight:680!important;
  line-height:1.38!important;
  white-space:normal!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.curated-favorite-remove{
  width:36px!important;height:36px!important;border-radius:18px!important;
  background:var(--grouped)!important;color:#6d7077!important;font-size:18px!important
}
.curated-favorites-empty{
  padding:14px 16px!important;
  border:1px solid rgba(0,0,0,.05)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.78)!important;
}

/* Remove the false empty block under the horizontal cards and keep the count with the heading. */
.curated-links-row{
  min-height:0!important;
  padding-top:14px!important;
  padding-bottom:30px!important;
}
.curated-status{
  min-height:0!important;
  margin:.4rem 0 0!important;
  padding:0!important;
  color:var(--tertiary)!important;
  font-size:12px!important;
}
.source-subheading{margin-top:1.6rem!important;margin-bottom:.35rem!important}

@media(max-width:430px){
  .nav-shell,.nav-shell.is-compact,.nav-shell.is-scrolled{
    height:calc(74px + var(--safe-top))!important;
    padding:calc(6px + var(--safe-top)) 8px 6px!important;
  }
  .nav-glass,.nav-shell.is-compact .nav-glass,.nav-shell.is-scrolled .nav-glass{height:62px!important;border-radius:31px!important}
  .nav-glass::after{border-radius:30px!important}
  .nav-scroll{padding:8px!important;gap:6px!important;scroll-padding-inline:8px!important}
  .nav-chip,.nav-shell.is-compact .nav-chip,.nav-shell.is-scrolled .nav-chip{
    min-height:44px!important;height:44px!important;padding:0 14px!important;border-radius:22px!important;font-size:13.5px!important
  }
  .curated-head{gap:.75rem!important}
  .curated-tools{width:100%!important}
  .curated-tool{height:40px!important;min-height:40px!important}
}

@media(max-width:370px){
  .nav-chip,.nav-shell.is-compact .nav-chip,.nav-shell.is-scrolled .nav-chip{padding:0 12px!important;font-size:13px!important}
}

@media(prefers-reduced-motion:reduce){
  .nav-chip,.curated-tool{transition:none!important}
}