/* Case section jump nav — iamvjb. Tokens only from site :root / case --ink. */

.case-jump-grid > section[id^="sec-"]{
  scroll-margin-top:calc(90px + var(--sws-operator-h, 0px));
}

.case-jump-rail-slot{ display:none; }
.case-jump-fab,
.case-jump-sheet,
.case-jump-backdrop{ display:none; }

.case-jump-rail-slot[hidden],
.case-jump-fab[hidden],
.case-jump-sheet[hidden],
.case-jump-backdrop[hidden]{
  display:none !important;
}

html.gate-pending .case-jump-rail-slot,
html.gate-pending .case-jump-fab,
html.gate-pending .case-jump-sheet,
html.gate-pending .case-jump-backdrop,
html[data-gate="locked"] .case-jump-rail-slot,
html[data-gate="locked"] .case-jump-fab,
html[data-gate="locked"] .case-jump-sheet,
html[data-gate="locked"] .case-jump-backdrop{
  visibility:hidden !important;
  pointer-events:none !important;
}

/* site.css overflow-x:clip on child pages computes overflow-y to auto and
   kills sticky. Keep the document scrollport visible; clip wide figures on
   the sections instead so the rail can pin. */
body[data-page="child"]:has(.case-jump-grid){
  overflow-x:visible;
}

@media (min-width:1100px){
  .case-jump-grid{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    column-gap:28px;
    align-items:start;
    width:min(var(--wide, 76rem), calc(100% - 80px));
    margin-inline:auto;
    overflow-anchor:none;
  }
  .case-jump-rail-slot{
    display:block;
    grid-column:1;
    grid-row:1;
    align-self:start;
    position:sticky;
    top:calc(78px + var(--sws-operator-h, 0px));
    z-index:20;
  }
  .case-jump-read{
    grid-column:2;
    min-width:0;
  }
  .case-jump-read > section{
    overflow-x:clip;
    max-width:100%;
  }
  .case-jump-rail:not([hidden]){
    display:block;
    background:var(--ivory);
    border:1px solid var(--color-line);
    border-radius:12px;
    padding:16px 14px 14px;
    /* Clear sticky top (78px + operator) + bottom breathing room; dock subtracts separately */
    max-height:calc(100vh - 94px - var(--sws-operator-h, 0px));
    overflow:auto;
  }
}

/* Sticky section jump must clear the fixed Listen dock — never sit under it */
html[data-listen-dock="on"] .case-jump-rail:not([hidden]){
  max-height:calc(100vh - 94px - var(--sws-operator-h, 0px) - var(--listen-dock-h, 72px) - 16px);
}

.case-jump-kicker{
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rust);
  margin:0 0 10px;
}

.case-jump-list{
  list-style:none;
  margin:0;
  padding:0;
}

/* Chrome, not prose: never inherit the case-study body-link underline. */
.case-study .case-jump-list a[href],
.case-jump-list a,
.case-jump-list a:hover,
.case-jump-list a:focus-visible,
.case-jump-list a *{
  text-decoration:none !important;
  text-decoration-thickness:0 !important;
}

.case-jump-list a{
  display:grid;
  grid-template-columns:1.7rem minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:8px 10px;
  margin:0;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--ink, var(--purple-deep));
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:400;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.case-jump-list a:hover,
.case-jump-list a:focus-visible{
  background:color-mix(in srgb, var(--periwinkle) 22%, var(--ivory));
  border-color:color-mix(in srgb, var(--periwinkle) 45%, var(--ivory));
}
.case-jump-list a:focus-visible{
  outline:2px solid var(--rust);
  outline-offset:2px;
}
.case-jump-list a[aria-current="true"]{
  background:var(--peach);
  border-color:color-mix(in srgb, var(--rust) 28%, var(--peach));
  font-weight:600;
}
.case-jump-list a[aria-current="true"]:hover,
.case-jump-list a[aria-current="true"]:focus-visible{
  background:var(--peach);
  border-color:color-mix(in srgb, var(--rust) 42%, var(--peach));
}
.case-jump-idx{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  color:var(--purple-muted);
  padding-top:.12rem;
}
.case-jump-list a[aria-current="true"] .case-jump-idx{
  color:var(--rust);
}
.case-jump-label{
  min-width:0;
  overflow-wrap:anywhere;
}

@media (max-width:1099px){
  main.case-study{
    padding-bottom:96px;
  }
  .case-jump-fab:not([hidden]){
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    position:fixed;
    z-index:40;
    right:16px;
    bottom:max(16px, env(safe-area-inset-bottom));
    min-height:48px;
    padding:12px 16px;
    border:1px solid color-mix(in srgb, var(--peach) 35%, var(--purple-deep));
    border-radius:999px;
    background:var(--purple-deep);
    color:var(--white, #fff);
    font-family:var(--sans);
    font-size:.88rem;
    font-weight:600;
    letter-spacing:.01em;
    line-height:1;
    cursor:pointer;
    box-shadow:
      0 4px 20px color-mix(in srgb, var(--purple-deep) 32%, transparent),
      0 0 0 1px color-mix(in srgb, var(--peach) 22%, transparent);
  }
  .case-jump-fab-icon{
    flex-shrink:0;
    color:var(--peach);
  }
  .case-jump-fab:focus-visible{
    outline:2px solid var(--rust);
    outline-offset:3px;
  }
  .case-jump-backdrop:not([hidden]){
    display:block;
    position:fixed;
    inset:0;
    z-index:50;
    background:color-mix(in srgb, var(--purple-deep) 45%, transparent);
  }
  .case-jump-sheet:not([hidden]){
    display:flex;
    flex-direction:column;
    position:fixed;
    z-index:51;
    left:0; right:0; bottom:0;
    max-height:min(78vh, 640px);
    overflow-x:hidden;
    background:var(--ivory);
    border-radius:16px 16px 0 0;
    padding:0;
    box-shadow:0 -8px 32px color-mix(in srgb, var(--purple-deep) 16%, transparent);
  }
  .case-jump-sheet-notch{
    display:flex;
    justify-content:center;
    padding:10px 0 6px;
    flex-shrink:0;
  }
  .case-jump-sheet-notch::before{
    content:"";
    width:40px;
    height:4px;
    border-radius:999px;
    background:color-mix(in srgb, var(--purple-muted) 35%, var(--ivory));
  }
  .case-jump-sheet-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-shrink:0;
    margin:0;
    padding:8px 20px 12px;
    border-bottom:1px solid var(--color-line);
  }
  .case-jump-sheet-bar .case-jump-kicker{
    margin:0;
    color:var(--purple-deep);
  }
  .case-jump-dismiss{
    font-family:var(--mono);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.04em;
    background:transparent;
    border:0;
    color:var(--purple-muted);
    min-height:44px;
    padding:4px 8px;
    cursor:pointer;
  }
  .case-jump-dismiss:focus-visible{
    outline:2px solid var(--rust);
    outline-offset:2px;
  }
  .case-jump-sheet nav{
    overflow-x:hidden;
    overflow-y:auto;
    min-height:0;
    padding:12px 16px calc(24px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch;
  }
  .case-jump-sheet .case-jump-list{
    display:flex;
    flex-direction:column;
    gap:6px;
    overflow:visible;
  }
  .case-jump-sheet .case-jump-list a{
    padding:12px 14px;
    min-height:48px;
    border:1px solid var(--color-line);
    border-radius:8px;
    background:var(--ivory);
    font-size:.88rem;
    align-items:center;
  }
  .case-jump-sheet .case-jump-list a:hover,
  .case-jump-sheet .case-jump-list a:focus-visible{
    background:color-mix(in srgb, var(--periwinkle) 18%, var(--ivory));
    border-color:color-mix(in srgb, var(--periwinkle) 50%, var(--ivory));
  }
  .case-jump-sheet .case-jump-list a[aria-current="true"]{
    background:var(--peach);
    border-color:color-mix(in srgb, var(--rust) 28%, var(--peach));
  }
}

html[data-listen-dock="on"] .case-jump-fab:not([hidden]){
  bottom:calc(var(--listen-dock-h, 0px) + 12px);
}

@media print{
  .case-jump-rail-slot,
  .case-jump-fab,
  .case-jump-sheet,
  .case-jump-backdrop{
    display:none !important;
  }
}