/* Story detail: universal flow guard.
   Content height, not a device breakpoint, decides where the next block starts. */
.story-page{
  --story-dock-space:calc(4.7rem + env(safe-area-inset-bottom));
  padding-bottom:max(5.6rem,var(--story-dock-space)) !important;
}

.story-page .story-detail-primary,
.story-page .story-top,
.story-page .story-hero,
.story-page .story-info{
  min-height:0;
}

.story-page .story-top{
  position:relative;
  display:flow-root;
}

.story-page .story-hero{
  height:auto !important;
  overflow:visible;
}

.story-page .story-info{
  height:auto !important;
  overflow:visible !important;
}

/* Large serif titles need extra descender room for letters such as g and y. */
.story-page .story-copy{
  overflow:visible !important;
}

.story-page .story-info h1{
  line-height:1.12 !important;
  padding-bottom:.12em;
  margin-bottom:.16rem !important;
  overflow:visible;
}

.story-page .story-info .by,
.story-page .story-info .tags{
  position:relative;
  z-index:1;
}

.story-page .story-metrics,
.story-page .story-acts{
  position:relative;
  inset:auto;
  flex-shrink:0;
}

.story-page .story-acts{
  margin-bottom:.5rem !important;
}

.story-page .story-tabs{
  position:relative;
  inset:auto;
  z-index:1;
  clear:both;
  flex:none;
  margin-top:.35rem !important;
}

.story-page .story-tab{
  position:relative;
  z-index:0;
  clear:both;
}

.story-dock{
  min-height:calc(3.9rem + env(safe-area-inset-bottom));
}

/* Keep long tables of contents inside a dedicated vertical scroller. */
.story-page .toc-box{
  min-height:0;
}

.story-page .toc-box .chapter-list{
  max-height:none;
  overflow-x:hidden;
  overflow-y:visible;
  overscroll-behavior-y:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(159,139,232,.52) rgba(14,18,32,.55);
  border-top:1px solid rgba(168,154,230,.14);
  border-bottom:1px solid rgba(168,154,230,.14);
  -webkit-overflow-scrolling:touch;
}

.story-page .toc-box .chapter-list.is-scrollable{
  height:clamp(16rem,40dvh,24rem);
  overflow-y:auto;
}

.story-page .toc-box .chapter-list::-webkit-scrollbar{width:6px}
.story-page .toc-box .chapter-list::-webkit-scrollbar-track{background:rgba(14,18,32,.55)}
.story-page .toc-box .chapter-list::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(159,139,232,.52);
}

.story-dock .dock-fav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* iOS must not enlarge text again when the device rotates. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* One reading scale for every landscape phone and tablet. Portrait is untouched. */
@media (min-width:640px) and (orientation:landscape), (min-width: 1100px){
  .story-page .story-tab .intro-body,
  .story-page .story-tab .info-body p{
    font-size:15px !important;
    line-height:1.6 !important;
  }

  .story-page .story-tab .intro-title,
  .story-page .story-tab .info-title{
    font-size:13px !important;
    line-height:1.3 !important;
  }
}

/* Guest note above the chapter list: reading chapters needs an account. */
.story-page .toc-guest{display:flex;align-items:center;gap:.55rem;margin:0 0 .8rem;padding:.65rem .85rem;border-radius:12px;
  border:1px dashed rgba(38,194,220,.45);background:rgba(38,194,220,.08);font-size:.84rem;line-height:1.45}
.story-page .toc-guest svg{flex-shrink:0;width:18px;height:18px;fill:none;stroke:#26c2dc;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.story-page .toc-guest a{color:#26c2dc;font-weight:700;text-decoration:underline;text-underline-offset:3px}
#app[data-theme="light"] .story-page .toc-guest{border-color:rgba(15,144,168,.45);background:rgba(15,144,168,.07)}
#app[data-theme="light"] .story-page .toc-guest svg{stroke:#0f90a8}
#app[data-theme="light"] .story-page .toc-guest a{color:#0f90a8}