/* Landing chapter drawer. Everything a station shows is a function of one
   number the drawer writes per frame: its nearness to the light. */

.landing-enhanced.pill-field-enhanced.landing-chapters-visible
  .pill-link[data-gravity-ready="true"] .pill-chapter-label{opacity:var(--spot-label,1)}
.landing-enhanced.pill-field-enhanced.landing-chapters-visible
  .pill-link[data-gravity-ready="true"]:is(:hover,:focus-visible) .pill-chapter-label{opacity:1}
.landing-enhanced.pill-field-enhanced .pill-chapter-label{
  top:calc(50% + var(--label-drop,calc((var(--pill-height,52px) / 2) + 22px)));
  max-width:min(340px,34vw)}
.pill-chapter-title{
  font-size:calc(15px + var(--spot,0) * 17px);
  font-weight:calc(500 + var(--spot,0) * 40);
  letter-spacing:-.036em;
  transition:color .18s ease}
/* Lettered method chapters sit left of the chronology; the mark distinguishes
   them from the numbered argument without a second type treatment. */
.pill-chapter-number{
  font-size:calc(10px + var(--spot,0) * 2px);
  letter-spacing:.085em}
[data-chapter-mark="letter"] .pill-chapter-number{letter-spacing:.14em}

.landing-enhanced.pill-field-enhanced .globe-chapter-description,
.landing-enhanced.pill-field-enhanced .pill-link:is(:hover,:focus-visible) .globe-chapter-description{
  top:calc(50% + var(--label-drop,calc((var(--pill-height,52px) / 2) + 22px)) + 54px);
  width:var(--drawer-brief-width,min(412px,34vw))!important;
  font-size:var(--drawer-brief-size,15px);
  line-height:1.5;
  text-wrap:pretty;
  hyphens:none;
  opacity:0;
  pointer-events:none}
/* The drawer picks its spotlight during the hero; reveal its brief only when
   the chapter and its label are ready, including on the return to the hero. */
.landing-enhanced.pill-field-enhanced.landing-chapters-visible
  .pill-link[data-gravity-ready="true"] .globe-chapter-description{
    opacity:var(--spot-brief,0)}
.pill-link{--title-hover-lift:-5px}
.pill-link:not(.is-spotlit){cursor:pointer}

/* Position indicator: a dot per chapter, the current one drawn out into a
   pill. It reports where you are and takes a pointer; the chapter links stay
   the keyboard route, so it is not a second tab stop. */
.pill-drawer-dots{
  --dot:6px;
  --dot-open:34px;
  --dot-gap:9px;
  --dot-pad:16px;
  position:absolute;
  z-index:6;
  left:50%;
  bottom:clamp(26px,4vh,46px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--dot-gap);
  /* Width is pinned to what the row measures at rest, so the marks can trade
     size without the centerd container breathing under them, and the reflow
     they do cause is contained to this box. */
  width:calc(var(--dot-count,8) * var(--dot) + (var(--dot-open) - var(--dot))
    + (var(--dot-count,8) - 1) * var(--dot-gap) + 2 * var(--dot-pad));
  padding:11px var(--dot-pad);
  contain:layout;
  border-radius:999px;
  background:color-mix(in srgb,var(--landing-ink) 5%,transparent);
  opacity:0;
  pointer-events:none;
  transform:translate3d(-50%,6px,0);
  transition:opacity .42s var(--landing-ease),transform .42s var(--landing-ease)}
body.landing-chapters-visible .pill-drawer-dots{
  opacity:1;pointer-events:auto;transform:translate3d(-50%,0,0)}
/* The current mark is drawn out into a pill, which is a width change: scaleX
   would squash the round caps into ellipses at this size, so transform cannot
   express it. The cost is bounded by the containment above. */
.pill-drawer-dot{
  display:block;
  flex:0 0 auto;
  width:var(--dot);
  height:var(--dot);
  border-radius:999px;
  background:color-mix(in srgb,var(--landing-ink) 34%,transparent);
  cursor:pointer;
  transition:width .34s var(--landing-ease),background .28s ease}
.pill-drawer-dot:hover{background:color-mix(in srgb,var(--landing-ink) 58%,transparent)}
.pill-drawer-dot.is-current{
  width:var(--dot-open);
  background:color-mix(in srgb,var(--landing-ink) 62%,transparent);
  cursor:default}

@media(max-width:700px){
  .landing-enhanced.pill-field-enhanced{
    --drawer-brief-width:min(320px,calc(100vw - 32px));
    --drawer-brief-size:13.5px}
  /* A neighbour's title has nowhere to go this close to the edge and clips.
     Its mark cannot: the numbered and lettered system already says which
     chapter is waiting, so peripheral stations keep the mark and drop the name. */
  .pill-link:not(.is-spotlit) .pill-chapter-title{display:none}
  .pill-link:not(.is-spotlit) .pill-chapter-number{font-size:11px}
  .pill-drawer-dots{--dot:5px;--dot-open:26px;--dot-gap:7px;--dot-pad:13px;padding:9px var(--dot-pad)}
}

@media(prefers-reduced-motion:reduce){
  .pill-drawer-dots{transition:none}
  .pill-drawer-dot{transition:none}
  .pill-chapter-title{transition:none}
}


/* Medication caption: quiet text in the open center above the pill arc. */
.landing-enhanced.pill-field-enhanced .pill-chapter-label{display:block}
.landing-enhanced.pill-field-enhanced .pill-chapter-number{position:absolute;top:12px;right:calc(100% - 3px);bottom:auto;line-height:1.2;transform:translateY(var(--title-reveal-lift))}
.pill-specimen{
  --note-ink:color-mix(in srgb,var(--landing-ink) 76%,var(--landing-paper));
  --note-muted:color-mix(in srgb,var(--landing-ink) 66%,var(--landing-paper));
  --note-rule:color-mix(in srgb,var(--landing-ink) 15%,var(--landing-paper));
  --caption-label-width:118px;--caption-column-gap:12px;
  position:absolute;z-index:6;left:50%;top:calc(var(--pill-caption-bottom,34%) - 64px);bottom:auto;
  display:grid;grid-template-columns:var(--caption-label-width) minmax(0,1fr);column-gap:var(--caption-column-gap);
  width:max-content;max-width:min(376px,calc(100% - 48px));transform:translate3d(calc(-50% + var(--pill-caption-offset-x,0px)),-50%,0);text-align:left;
  color:var(--note-ink);opacity:0;pointer-events:none;
  font:400 11.5px/1.55 var(--landing-mono);font-variant-numeric:tabular-nums;
  transition:opacity .32s var(--landing-ease)
}
.pill-specimen[hidden]{display:none}
body.landing-chapters-visible .pill-specimen{opacity:var(--specimen-settle,1);pointer-events:auto}
.pill-specimen h2,.pill-specimen p,.pill-specimen dl,.pill-specimen dd{margin:0}
/* Size the record to its actual text, then center that width over the pill.
   Shared tracks keep the header and every value on the same two columns. */
.pill-specimen .pill-specimen-heading,.pill-specimen .pill-specimen-facts>div{
  display:grid;grid-column:1 / -1;grid-template-columns:subgrid;
  column-gap:var(--caption-column-gap);align-items:baseline;justify-content:stretch;min-width:0
}
.pill-specimen .pill-specimen-heading{padding-bottom:8px;border-bottom:1px solid transparent}
/* Keep the rule out of both the drawer travel and the masked text reveal. */
body.landing-chapters-visible:not(.landing-auto-traversing) .pill-specimen[data-caption-state="readable"][data-caption-settled="true"] .pill-specimen-heading{border-bottom-color:var(--note-rule)}
.pill-specimen .pill-specimen-name{color:var(--note-ink);font:500 15px/1.4 var(--landing-sans);letter-spacing:-.015em}
.pill-specimen .pill-specimen-meta{color:var(--note-muted);font:400 11px/1.5 var(--landing-mono);letter-spacing:-.015em;text-align:left}
.pill-specimen[data-long-name="true"] .pill-specimen-heading{row-gap:2px}
.pill-specimen[data-long-name="true"] .pill-specimen-heading>*{grid-column:1 / -1}
.pill-specimen .pill-specimen-facts{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;gap:4px var(--caption-column-gap);margin-top:8px;justify-content:stretch}
.pill-specimen-facts dt{color:var(--note-muted);font:400 10.5px/1.55 var(--landing-mono);letter-spacing:.005em}
.pill-specimen-facts dd{min-width:0;color:var(--note-ink);font:500 11px/1.55 var(--landing-mono);letter-spacing:-.005em;text-wrap:pretty}
.pill-drawer-dots{bottom:35px;background:none}

/* The source video reveals scattered letters through a mask. Play once per
   arrival, then restore plain text for native shaping and quiet reading. */
.pill-caption-word{display:inline-block;white-space:nowrap}
.pill-caption-slot{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block:.10em;margin-block:-.10em}
.pill-caption-letter{display:inline-block;transform-origin:50% 100%}
[data-caption-state="waiting"] .pill-caption-letter{opacity:0;transform:translate3d(0,115%,0) rotate(var(--letter-tilt,0deg))}
[data-caption-state="revealing"] .pill-caption-letter{animation:pill-caption-arrive var(--letter-duration,560ms) cubic-bezier(.2,.72,.22,1) var(--letter-delay,0ms) both}
@keyframes pill-caption-arrive{
  0%{opacity:0;transform:translate3d(0,115%,0) rotate(var(--letter-tilt,0deg))}
  22%{opacity:1}
  78%{transform:translate3d(0,-3%,0) rotate(0deg)}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(0deg)}
}
@media(max-width:700px){
  .landing-enhanced.pill-field-enhanced .pill-link:not(.is-spotlit) .pill-chapter-number{position:static}
  .landing-enhanced.pill-field-enhanced .pill-link.is-spotlit .pill-chapter-number{top:10px;right:calc(100% + 2px);bottom:auto}
  .pill-specimen{--caption-label-width:112px;--caption-column-gap:8px}
  .pill-specimen .pill-specimen-meta{font-size:11px}
  .pill-specimen-facts dt{font-size:10px}
  .pill-specimen-facts dd{font-size:11px}
}
@media(max-width:360px){
  .pill-specimen{max-width:calc(100% - 32px)}
}
@media(max-height:640px){
  .pill-drawer-dots{bottom:17px}
}
@media(prefers-reduced-motion:reduce){
  .pill-specimen{transition:none}
  [data-caption-state] .pill-caption-letter{animation:none!important;opacity:1!important;transform:none!important}
}