/* A single movable navigation entry; the original bar remains the no-script fallback. */
.floating-nav { display: none; }
@media (max-width: 960px) {
  html.nav-floating { scroll-padding-bottom: 24px; }
  html.nav-floating body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  html.nav-floating .site-nav { display: none; }
  html.nav-floating .site-pulse-widget { display: none; }
  .floating-nav { display: block; position: fixed; left: 0; top: 0; width: 56px; height: 56px; z-index: 45; }
  .floating-nav-fab {
    width: 56px; height: 56px; display: grid; place-content: center; gap: 3px;
    border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 50%;
    background: color-mix(in srgb, var(--paper) 78%, transparent); color: var(--ink);
    backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%);
    box-shadow: 0 1px 3px rgb(40 28 15 / .07), 0 5px 16px rgb(40 28 15 / .08), inset 0 1px 0 rgb(255 255 255 / .35);
    font: 500 10px/1.2 var(--sans); padding: 0; cursor: grab; touch-action: none;
    user-select: none; -webkit-user-select: none; opacity: .62;
    transition: opacity 160ms ease-out, background-color 160ms ease-out;
  }
  .floating-nav-fab svg { width: 21px; height: 21px; margin: auto; stroke: currentColor; }
  .floating-nav[data-awake] .floating-nav-fab,
  .floating-nav[data-open] .floating-nav-fab,
  .floating-nav-fab:focus-visible { opacity: 1; background: color-mix(in srgb, var(--paper) 90%, transparent); }
  .floating-nav[data-dragging] .floating-nav-fab { cursor: grabbing; opacity: 1; }
  .floating-nav-fab:active { background: color-mix(in srgb, var(--accent) 10%, var(--paper)); }
  .floating-nav-fab:focus-visible, .floating-nav-panel :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .floating-nav-panel {
    position: fixed; left: 0; top: 0; width: min(320px, calc(100vw - 24px));
    max-height: var(--dock-panel-max, calc(100dvh - 24px)); overflow: auto; overscroll-behavior: contain;
    border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 22px;
    background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink);
    backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%);
    box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 8px 24px rgb(40 28 15 / .12), 0 24px 60px rgb(40 28 15 / .12);
    padding: 10px; z-index: 46; transform-origin: var(--dock-origin, right bottom);
    animation: floating-nav-reveal 160ms cubic-bezier(.2,.8,.2,1);
  }
  .floating-nav-panel[hidden] { display: none; }
  .floating-nav-head { display: flex; align-items: center; justify-content: space-between; padding-left: 10px; }
  .floating-nav-head strong { font: 600 15px/1.5 var(--sans); }
  .floating-nav-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
  .floating-nav-close svg { width: 18px; height: 18px; }
  .floating-nav-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 4px 0 10px; }
  .floating-nav-links a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 64px; border-radius: 12px; color: var(--ink); text-decoration: none; font: 500 13px/1.5 var(--sans); }
  .floating-nav-links svg { width: 21px; height: 21px; }
  .floating-nav-links a[aria-current] { color: var(--accent); background: color-mix(in srgb,var(--accent) 9%,transparent); font-weight: 600; }
  .floating-nav-links a:active, .floating-nav-panel button:active { background: color-mix(in srgb,var(--ink) 8%,transparent); }
  .floating-nav-pulse { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 500 14px/1.5 var(--sans); }
  .floating-nav-pulse > svg { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; }
  .floating-nav-pulse span { display: grid; gap: 1px; }
  .floating-nav-pulse small { color: var(--muted); font: 400 11px/1.5 var(--sans); }
  .floating-nav-position { display: flex; gap: 4px; border-top: 1px solid var(--line); padding-top: 5px; }
  .floating-nav-position button { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 500 12px/1.5 var(--sans); cursor: pointer; }
  .floating-nav-message { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  @keyframes floating-nav-reveal { from { opacity: 0; transform: translateY(5px) scale(.985); } to { opacity: 1; transform: none; } }
  @media (hover: hover) and (pointer: fine) {
    .floating-nav-fab:hover { opacity: 1; }
    .floating-nav-links a:hover, .floating-nav-position button:hover { background: color-mix(in srgb,var(--ink) 5%,transparent); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .floating-nav-panel { animation: none; }
  .floating-nav-fab { transition: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .floating-nav-fab, .floating-nav-panel { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; }
}