/*
 * hydiet-v12.css — iOS Premium Nutrition Tracker Upgrade
 * Research: Refero IDs 48 (FoodNoms), 278 (Foodllama), 271 (Athleats), 274 (Waterllama)
 * Springs:  kinetics.colorion.co (Tab Pill Glide, Card Resize, Toast Overshoot, Progress Spring)
 * Style:    iOS Glass Health Dark · soft-skill · DESIGN_VARIANCE=7 MOTION=8 DENSITY=6
 * Replaces: hydiet-v11.css + overrides hydiet.html inline style block
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ENHANCED DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Spring curves — 4 named curves from kinetics.colorion.co */
  --hd-spring:        cubic-bezier(.2,  .9,  .3,  1);    /* legacy keep */
  --hd-spring-card:   cubic-bezier(.34, 1.56, .64, 1);   /* card lift/expand */
  --hd-spring-smooth: cubic-bezier(.16, 1,   .3,  1);    /* tab content, ring fill */
  --hd-spring-glide:  cubic-bezier(.65, 0,   .35, 1);    /* tab pill glide */
  --hd-spring-toast:  cubic-bezier(.18, 1.25,.4,  1);    /* toast pop-in */

  /* Duration tiers */
  --hd-dur-tap:   150ms;   /* ripple / press feedback */
  --hd-dur-comp:  380ms;   /* cards, tabs, toggles */
  --hd-dur-fill:  580ms;   /* macro ring, progress bars */

  /* Spacing 4pt scale */
  --hd-sp-1: 4px;
  --hd-sp-2: 8px;
  --hd-sp-3: 12px;
  --hd-sp-4: 16px;
  --hd-sp-5: 20px;
  --hd-sp-6: 24px;
  --hd-sp-8: 32px;

  /* Radius scale — enforced system-wide */
  --hd-radius-sm:   8px;
  --hd-radius-md:   12px;
  --hd-radius-lg:   16px;
  --hd-radius-xl:   20px;
  --hd-radius-full: 9999px;

  /* Card elevation */
  --hd-shadow-base:  0 2px 16px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
  --hd-shadow-hover: 0 8px 32px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.10);
  --hd-shadow-modal: 0 24px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08);
}


/* ═══════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes hd-reveal-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hd-reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hd-toast-spring {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes hd-modal-spring {
  from { opacity: 0; transform: translateY(24px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hd-shimmer {
  from { background-position: -600px 0; }
  to   { background-position:  600px 0; }
}

@keyframes hd-pulse-glow {
  0%,100% { box-shadow: 0 0 8px  color-mix(in srgb, var(--hd-green) 30%, transparent); }
  50%     { box-shadow: 0 0 20px color-mix(in srgb, var(--hd-green) 55%, transparent); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CARD SYSTEM — 3-level depth hierarchy
   ═══════════════════════════════════════════════════════════════════════════ */

/* Level 1 — Base surface */
.hd-card {
  border-radius: var(--hd-radius-lg) !important;
  box-shadow: var(--hd-shadow-base);
  will-change: transform;
  transition:
    transform     var(--hd-dur-comp) var(--hd-spring-card),
    box-shadow    var(--hd-dur-comp) var(--hd-spring-card),
    border-color  var(--hd-dur-comp) ease;
}

/* Level 2 — Elevated (goals, macro summary) */
.hd-card-elevated {
  background: color-mix(in srgb, var(--bg-card, rgba(6,20,12,.88)) 100%, rgba(255,255,255,.03)) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Level 3 — Green accent card */
.hd-card-green {
  box-shadow:
    0 2px 20px color-mix(in srgb, var(--hd-green) 16%, transparent),
    var(--hd-shadow-base) !important;
}

/* Desktop hover spring lift */
@media (hover: hover) {
  .hd-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--hd-shadow-hover);
  }
  .hd-recipe-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
      0 12px 40px rgba(0,0,0,.56),
      0 0 0 1px var(--hd-green-glow);
  }
}

/* Mobile tap spring feedback */
@media (hover: none) {
  .hd-card:active,
  .hd-recipe-card:active,
  .hd-client-card:active {
    transform: scale(.98);
    transition-duration: var(--hd-dur-tap) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   STAGGER ENTRANCE ANIMATION
   (JS sets --hd-stagger on each card child on tab switch)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  .hd-panel.active .hd-card,
  .hd-panel.active .hd-meal-slot,
  .hd-panel.active .hd-recipe-card,
  .hd-panel.active .hd-pantry-item-row,
  .hd-panel.active .hd-client-card,
  .hd-panel.active .hd-goals-card,
  .hd-panel.active .hd-insight-card,
  .hd-panel.active .hd-docs-section {
    animation: hd-reveal-up var(--hd-dur-comp) var(--hd-spring-smooth) both;
    animation-delay: calc(var(--hd-stagger, 0) * 40ms + 50ms);
  }

  .hd-panel.active .hd-docs-section {
    animation-name: hd-reveal-fade;
    animation-duration: 0.28s;
  }

  /* Panel cross-fade on switch */
  .hd-panel.active {
    animation: hd-reveal-fade 0.22s ease both;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR — Premium iOS upgrade
   (Refero IDs 48, 278: FoodNoms / Foodllama pattern)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .hd-mobile-tabs {
    position: relative;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--bg-deep, #060f18) 92%, transparent) !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  }

  /* Sliding active pill indicator (Tab Pill Glide — kinetics.colorion.co) */
  .hd-tab-pill {
    position: absolute;
    top: 0;
    height: 3px;
    background: var(--hd-green);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--hd-green) 70%, transparent);
    transition:
      left  var(--hd-dur-comp) var(--hd-spring-glide),
      width var(--hd-dur-comp) var(--hd-spring-glide);
    pointer-events: none;
    z-index: 2;
  }

  .hd-mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    min-height: 56px;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 10px;          /* 10px minimum — down from 9px */
    font-weight: 500;
    line-height: 1.2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--hd-dur-tap) ease;
    position: relative;
  }

  .hd-mobile-tab iconify-icon {
    font-size: 22px !important;  /* was 20px */
    transition:
      transform var(--hd-dur-tap) var(--hd-spring-card),
      color     var(--hd-dur-tap) ease;
    display: block;
  }

  .hd-mobile-tab.active {
    color: var(--hd-green) !important;
    font-weight: 700;
  }

  .hd-mobile-tab.active iconify-icon {
    transform: scale(1.13);
  }

  /* Tap spring on press */
  .hd-mobile-tab:active iconify-icon {
    transform: scale(.9);
    transition-duration: var(--hd-dur-tap);
  }

}


/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP SIDEBAR — Remove SaaS green-box logo tile
   ═══════════════════════════════════════════════════════════════════════════ */

/* Remove the green rounded-square tile (impeccable anti-pattern) */
.hd-sidebar-logo-icon {
  background: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
}

.hd-sidebar-logo-icon iconify-icon {
  color: var(--hd-green) !important;
  font-size: 30px !important;
}

/* Sidebar nav section labels — minimum 11px */
.hd-nav-section-label {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .1em;
  opacity: .6;
}

/* Sidebar tab — spring transitions + left border indicator */
.hd-tab {
  border-left: 2px solid transparent !important;
  border-radius: 0 var(--hd-radius-md) var(--hd-radius-md) 0 !important;
  transition:
    background   var(--hd-dur-comp) var(--hd-spring-smooth),
    color        var(--hd-dur-comp) var(--hd-spring-smooth),
    border-color var(--hd-dur-comp) var(--hd-spring-smooth) !important;
}

.hd-tab.active {
  border-left-color: var(--hd-green) !important;
}

/* Fix tab badge font */
.hd-tab-badge {
  font-size: 11px !important;
}

/* Sidebar version note */
.hd-version-note {
  font-size: 11px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOOD LOG — iOS standard row height (FoodNoms pattern: 52px+)
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-food-item {
  min-height: 52px !important;
  padding: var(--hd-sp-3) var(--hd-sp-2) !important;
  border-radius: var(--hd-radius-md);
  transition: background var(--hd-dur-tap) ease;
}

@media (hover: hover) {
  .hd-food-item:hover { background: var(--hd-green-dim); }
}

.hd-food-item-name  { font-size: 14px !important; font-weight: 600; }
.hd-food-item-macros{ font-size: 12px !important; }
.hd-food-item-cal   { font-size: 14px !important; font-weight: 700; color: var(--hd-green); }


/* ═══════════════════════════════════════════════════════════════════════════
   MEAL SLOTS — Accordion spring
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-meal-slot {
  border-radius: var(--hd-radius-lg) !important;
  overflow: hidden;
  transition: box-shadow var(--hd-dur-comp) var(--hd-spring-smooth);
  margin-bottom: var(--hd-sp-3);
}

.hd-meal-slot:focus-within {
  box-shadow: 0 0 0 2px var(--hd-green-glow);
}

.hd-meal-slot-header {
  border-radius: 0 !important;
  min-height: 54px !important;
  padding: var(--hd-sp-3) var(--hd-sp-4) !important;
  display: flex;
  align-items: center;
  gap: var(--hd-sp-3);
}

.hd-meal-slot-name { font-size: 15px !important; font-weight: 700; }
.hd-meal-slot-cal  { font-size: 13px !important; }

.hd-meal-slot-body {
  padding: var(--hd-sp-2) var(--hd-sp-4) var(--hd-sp-3) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RECIPE CARDS — Kitchen Stories / Athleats full-bleed hero pattern
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-recipe-card {
  border-radius: var(--hd-radius-lg) !important;
  will-change: transform;
  overflow: hidden;
  transition:
    transform  var(--hd-dur-comp) var(--hd-spring-card),
    box-shadow var(--hd-dur-comp) var(--hd-spring-card) !important;
}

.hd-recipe-thumb,
.hd-recipe-thumb-placeholder {
  height: 162px !important;
  border-radius: 0 !important;
}

.hd-recipe-info     { padding: var(--hd-sp-3) var(--hd-sp-4) var(--hd-sp-4) !important; }
.hd-recipe-name     { font-size: 15px !important; font-weight: 700; letter-spacing: -.01em; }
.hd-recipe-meta     { font-size: 12px !important; gap: var(--hd-sp-2); }
.hd-recipe-macro-chip { font-size: 12px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   PANTRY
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-pantry-item {
  min-height: 52px;
  border-radius: var(--hd-radius-md);
  transition: background var(--hd-dur-tap) ease;
  margin-bottom: 2px;
  padding: var(--hd-sp-2) var(--hd-sp-4) !important;
}

@media (hover: hover) {
  .hd-pantry-item:hover { background: var(--hd-green-dim); }
}

.hd-pantry-name { font-size: 14px !important; font-weight: 600; }
.hd-pantry-qty  { font-size: 12px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   PLANNER GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-planner-header { border-radius: var(--hd-radius-md) !important; }

.hd-planner-cell {
  border-radius: var(--hd-radius-md) !important;
  min-height: 64px !important;
  transition:
    border-color var(--hd-dur-tap) ease,
    transform    var(--hd-dur-tap) var(--hd-spring-card) !important;
}

.hd-planner-cell:active { transform: scale(.97) !important; }

.hd-planner-chip {
  border-radius: var(--hd-radius-sm) !important;
  font-size: 11px !important;
}

.hd-planner-day-cal {
  font-size: 11px !important;  /* from 10px — still compact, readable */
}


/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS — Spring press + disabled + glow
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-btn {
  border-radius: var(--hd-radius-md) !important;
  transition:
    background   var(--hd-dur-tap) ease,
    transform    var(--hd-dur-tap) var(--hd-spring-card),
    box-shadow   var(--hd-dur-tap) ease !important;
}

.hd-btn:active { transform: scale(.96) !important; }

.hd-btn:disabled,
.hd-btn[disabled] {
  opacity: .38;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

.hd-btn-primary {
  box-shadow: 0 2px 14px color-mix(in srgb, var(--hd-green) 32%, transparent) !important;
}

@media (hover: hover) {
  .hd-btn-primary:hover {
    box-shadow: 0 4px 22px color-mix(in srgb, var(--hd-green) 44%, transparent) !important;
  }
}

.hd-btn-big { border-radius: var(--hd-radius-lg) !important; }

/* Snap / camera button — pulse glow */
.hd-snap-btn {
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--hd-green) 45%, transparent),
    0 0 0 1px rgba(34,197,94,.22) !important;
  transition:
    transform  var(--hd-dur-tap) var(--hd-spring-card),
    box-shadow var(--hd-dur-tap) ease !important;
}

@media (prefers-reduced-motion: no-preference) {
  .hd-snap-btn { animation: hd-pulse-glow 2.4s ease-in-out infinite; }
}

.hd-snap-btn:active {
  transform: scale(.91) !important;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--hd-green) 30%, transparent) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHIPS — Pill shape, spring press
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-chip {
  border-radius: var(--hd-radius-full) !important;
  min-height: 32px;
  transition:
    background   var(--hd-dur-tap) ease,
    border-color var(--hd-dur-tap) ease,
    transform    var(--hd-dur-tap) var(--hd-spring-card) !important;
}

.hd-chip:active { transform: scale(.94); }

.hd-chip:disabled {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TOASTS — Spring pop-in (Toast Overshoot — kinetics.colorion.co)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  .hd-toast {
    animation: hd-toast-spring 0.5s var(--hd-spring-toast) both !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODALS — Spring entrance
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-modal {
  border-radius: var(--hd-radius-xl) !important;
  box-shadow: var(--hd-shadow-modal) !important;
}

@media (prefers-reduced-motion: no-preference) {
  .hd-modal {
    animation: hd-modal-spring 0.38s var(--hd-spring-card) both !important;
  }
}

.hd-modal-header  { padding: var(--hd-sp-4) var(--hd-sp-5) !important; }
.hd-modal-body    { padding: var(--hd-sp-4) var(--hd-sp-5) !important; }
.hd-modal-footer  { padding: var(--hd-sp-3) var(--hd-sp-5) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   DRAWER — Rounded left corners
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-drawer {
  border-radius: var(--hd-radius-xl) 0 0 var(--hd-radius-xl) !important;
  box-shadow: -8px 0 40px rgba(0,0,0,.42) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   GOALS / BMR CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-goals-card {
  border-radius: var(--hd-radius-xl) !important;
  padding: var(--hd-sp-5) !important;
}

.hd-goals-card-title {
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: -.01em;
}

.hd-bmr-display {
  border-radius: var(--hd-radius-lg) !important;
}

.hd-bmr-number { font-size: 40px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   CLIENT CARDS (Trainer Hub)
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-client-card {
  border-radius: var(--hd-radius-lg) !important;
  min-height: 72px;
  will-change: transform;
  transition:
    transform  var(--hd-dur-comp) var(--hd-spring-card),
    box-shadow var(--hd-dur-comp) var(--hd-spring-card) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   WATER TRACKER — Spring press
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-water-glass {
  border-radius: var(--hd-radius-sm) !important;
  transition:
    background var(--hd-dur-tap) var(--hd-spring-smooth),
    transform  var(--hd-dur-tap) var(--hd-spring-card) !important;
}

.hd-water-glass:active { transform: scale(.88); }


/* ═══════════════════════════════════════════════════════════════════════════
   HEATMAP
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-heatmap-cell {
  border-radius: var(--hd-radius-sm) !important;
  transition: transform var(--hd-dur-tap) var(--hd-spring-card) !important;
}

@media (hover: hover) {
  .hd-heatmap-cell:hover { transform: scale(1.18) !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   INPUTS & FORMS
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-input,
.hd-select,
.hd-textarea {
  border-radius: var(--hd-radius-md) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

.hd-input:disabled,
.hd-select:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.hd-search {
  border-radius: var(--hd-radius-full) !important;
  min-height: 40px;
}

.hd-range::-webkit-slider-thumb {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--hd-green) 44%, transparent) !important;
  transition: transform var(--hd-dur-tap) var(--hd-spring-card);
}

.hd-range:active::-webkit-slider-thumb { transform: scale(1.25); }


/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-topbar {
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  background: color-mix(in srgb, var(--bg-deep, #060f18) 68%, transparent) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PANEL SCROLL — bottom padding for mobile tab bar + safe area
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-panel-scroll {
  scroll-behavior: smooth;
  padding-bottom: var(--hd-sp-8) !important;
}

@media (max-width: 768px) {
  .hd-panel-scroll {
    /* Extra space for 56px tab bar + safe-area-inset-bottom */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   INSIGHTS
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-insight-card  { border-radius: var(--hd-radius-md) !important; }
.hd-alert-card    { border-radius: var(--hd-radius-md) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   DOCS / HELP
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-docs-section        { border-radius: var(--hd-radius-lg) !important; }
.hd-docs-section-header { padding: var(--hd-sp-3) var(--hd-sp-4) !important; font-size: 14px; }
.hd-docs-body           { padding: var(--hd-sp-3) var(--hd-sp-4) !important; font-size: 13px; line-height: 1.68; }
.hd-docs-num            { background: var(--hd-green) !important; border-radius: 50%; }


/* ═══════════════════════════════════════════════════════════════════════════
   MACRO LEGEND
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-macro-pill { font-size: 12px !important; font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON SHIMMER LOADER
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-skeleton {
  border-radius: var(--hd-radius-md);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--border, rgba(34,197,94,.15)) 60%, transparent) 25%,
    color-mix(in srgb, var(--border, rgba(34,197,94,.15)) 90%, transparent) 50%,
    color-mix(in srgb, var(--border, rgba(34,197,94,.15)) 60%, transparent) 75%
  );
  background-size: 600px 100%;
  animation: hd-shimmer 1.4s ease infinite;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — Cards grid, field rows, minimum font size enforcement
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .hd-cards-grid { grid-template-columns: 1fr !important; gap: var(--hd-sp-3); }
  .hd-field-row  { grid-template-columns: 1fr !important; }

  /* Enforce no text below 11px on mobile */
  .hd-recipe-meta,
  .hd-food-item-macros,
  .hd-pantry-qty,
  .hd-macro-pill,
  .hd-planner-day-cal,
  .hd-planner-chip,
  .hd-recipe-macro-chip {
    font-size: 11px !important;
  }

  .hd-topbar { flex-wrap: wrap; gap: var(--hd-sp-2) !important; }
  .hd-panel-header { padding: var(--hd-sp-3) var(--hd-sp-4) !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HYPATIA FAB — spring press
   ═══════════════════════════════════════════════════════════════════════════ */

#hd-hyp-fab {
  box-shadow: 0 4px 24px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.09) !important;
  transition:
    transform  var(--hd-dur-tap) var(--hd-spring-card),
    box-shadow var(--hd-dur-tap) ease !important;
}

#hd-hyp-fab:active { transform: scale(.91) !important; }