/* ==========================================================================
   A page's list of sections (the Privacy Policy's, for one): beside the
   words on a computer, marking the section being read; a soft blue bar that
   stays at the top and drops the list down on a tablet or a phone. Made by
   src/components/pages/Prose.astro and run by js/contents.js.
   ========================================================================== */
.with-contents{display:grid;grid-template-columns:14rem minmax(0,44rem);gap:72px;justify-content:center;padding:56px 0 110px}
.with-contents .prose{margin:0;padding:0}
.with-contents .prose h2{scroll-margin-top:24px}
.contents{position:sticky;top:24px;align-self:start;padding-top:4px}
.contents ol{display:grid}
.contents a{display:block;padding:7px 0 7px 16px;border-left:2px solid var(--line-strong);color:var(--muted);font-size:.92rem;line-height:1.35;transition:color .2s,border-color .2s}
.contents a:hover{color:var(--head)}
.contents a[aria-current]{border-color:var(--accent);color:var(--head);font-weight:600}
.contents svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:1000px){
  .with-contents{display:block;padding:0 0 90px}
  .with-contents .prose{padding-top:30px}
  .with-contents .prose h2{scroll-margin-top:90px}
  /* Without scripts the list simply sits above the words. */
  .contents{position:static;margin-top:30px}
  .js .contents{position:sticky;top:10px;z-index:2;margin-top:10px}
  .js .contents ol{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:65vh;overflow:auto;padding:12px 16px;border-radius:16px;background:var(--raised);border:1px solid var(--line);box-shadow:var(--shadow-lift)}
  .js .contents.open ol{display:grid}
  .contents a{padding:10px 0 10px 16px}
  .contents-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 18px;border-radius:16px;background:color-mix(in srgb,var(--accent) 13%,var(--bg));border:1.5px solid color-mix(in srgb,var(--accent) 30%,var(--bg));color:var(--head);text-align:left;box-shadow:0 6px 18px rgba(16,32,64,.10)}
  .contents-label{font:600 .72rem/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-strong)}
  .contents-now{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 1rem var(--f-body)}
  .contents-chev{transition:transform .25s}
  .contents.open .contents-chev{transform:rotate(180deg)}
}
@media(min-width:1001px){.contents-btn{display:none!important}}
@media(prefers-reduced-motion:reduce){.contents-chev{transition:none}}
@media(forced-colors:active){.contents-btn{border:1px solid ButtonText}.contents a[aria-current]{border-color:Highlight}}