/* Mobile section menu (shared/section-nav.js): a sticky strip at the bottom of the screen with the page's sections,
 * and, while the Work section is in view, a second strip with the projects. Phones and narrow windows only.
 * Themes can tune: --toc-bg, --toc-fg, --toc-accent, --toc-accent-fg, --toc-z. */
.toc { display: none; }
@media (max-width: 760px) {
  .toc {
    --toc-h: 46px;
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--toc-z, 880);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--toc-bg, rgba(17, 17, 20, .9)); color: var(--toc-fg, #fff);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .14), 0 -10px 30px rgba(0, 0, 0, .18);
    font: 500 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    transform: translateY(110%); transition: transform .25s ease;
  }
  .toc[hidden] { display: none; }
  .toc.toc-on { transform: none; }
  .toc ul { list-style: none; margin: 0; padding: 0 10px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .toc ul::-webkit-scrollbar { display: none; }
  .toc-proj { display: none !important; padding-bottom: 6px !important; }
  .toc.toc-work .toc-proj { display: flex !important; }
  .toc a {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border-radius: 999px;
    color: inherit; text-decoration: none; white-space: nowrap; opacity: .78; -webkit-tap-highlight-color: transparent;
  }
  .toc-proj a { min-height: 28px; font-size: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset; }
  .toc a[aria-current="true"] { opacity: 1; background: var(--toc-accent, #fff); color: var(--toc-accent-fg, #111); }
  .toc a:focus-visible { outline: 2px solid var(--toc-accent, #fff); outline-offset: 2px; }
  /* lift the theme switcher (and anything keyed to it) above the strip */
  body.has-toc { --ts-bottom: 64px; }
  body.has-toc.toc-work-on { --ts-bottom: 104px; }
  body.has-toc { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .toc { transition: none; } }