/* After Work floating dock nav (replaces the primary nav inside After Work).
   Frosted glass tray where backdrop-filter works; plain transparent floating
   icons where it does not (user-approved fallback). */
body.is-after-work { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

.aw-dock {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 12px; padding: 10px 16px; border-radius: 26px; z-index: 60;
}
.aw-dock a {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  width: 52px; height: 52px; transform-origin: 50% 100%;
  -webkit-tap-highlight-color: transparent;
}
.aw-dock a img { width: 46px; height: 46px; display: block; object-fit: contain; filter: drop-shadow(0 5px 12px rgb(0 0 0 / .5)); }
.aw-dock a[aria-current="page"]::after {
  content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 4.5px; border-radius: 2.5px;
  background: linear-gradient(rgb(255 255 255 / .95), rgb(214 211 195 / .95));
  box-shadow: 0 1px 2px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .8);
}

/* frosted glass tray, when supported */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .aw-dock {
    background: rgb(31 42 35 / .34);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgb(255 255 255 / .16);
    box-shadow: 0 14px 34px rgb(0 0 0 / .38), inset 0 1px 0 rgb(255 255 255 / .14);
  }
  .aw-dock a img { filter: none; }
}

/* desktop hover magnification + tooltip */
@media (hover: hover) and (min-width: 681px) {
  .aw-dock a { transition: transform .18s ease-out; }
  .aw-dock a:hover { transform: scale(1.3); }
  .aw-dock a:hover + a, .aw-dock a:has(+ a:hover) { transform: scale(1.12); }
  .aw-dock a:hover::before {
    content: attr(data-tip); position: absolute; top: -34px; left: 50%; transform: translateX(-50%) scale(0.77);
    background: rgb(31 42 35 / .75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: #f2f1e8; font-size: 13px; font-weight: 500; padding: 3px 10px; border-radius: 9px;
    border: 1px solid rgb(255 255 255 / .14); white-space: nowrap; pointer-events: none;
  }
}

/* tap: quick squash + spring back (transform-only, cheap on phones) */
@keyframes aw-dock-press { 0% { transform: scale(1); } 30% { transform: scale(.76) translateY(2px); } 62% { transform: scale(1.1); } 100% { transform: scale(1); } }
.aw-dock a:active { animation: aw-dock-press .38s cubic-bezier(.34, 1.56, .64, 1); }

@media (max-width: 680px) {
  body.is-after-work { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .aw-dock { gap: 16px; padding: 9px 18px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .aw-dock a { width: 44px; height: 44px; }
  .aw-dock a img { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .aw-dock a, .aw-dock a:hover, .aw-dock a:active { animation: none; transition: none; transform: none; }
}

/* light-mode recipe pages (the only After Work pages that follow the lamp) */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  [data-theme="light"] body.is-recipe-page .aw-dock {
    background: rgb(252 250 241 / .42);
    border: 1px solid rgb(23 30 25 / .12);
    box-shadow: 0 14px 34px rgb(28 25 19 / .14), inset 0 1px 0 rgb(255 255 255 / .6);
  }
}
[data-theme="light"] body.is-recipe-page .aw-dock a[aria-current="page"]::after {
  background: linear-gradient(rgb(64 70 60 / .95), rgb(35 40 32 / .95));
  box-shadow: 0 1px 2px rgb(28 25 19 / .35), inset 0 1px 0 rgb(255 255 255 / .25);
}