/* ============================================================
   Liquid Glass material — Appendix A1/A2 recipes.
   Glass belongs on the NAVIGATION layer only (HIG rule):
   nav, packet cards, progress pill, sheets, buttons.
   Perf budget: ≤3 backdrop-filter surfaces per viewport.
   ============================================================ */

.glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-card);
  box-shadow:
    var(--glass-shadow),
    inset 1px 1px 0 var(--glass-rim-top),
    inset 0 -1px 1px var(--glass-rim-bottom),
    inset 1px 0 1px rgba(255, 255, 255, .16),
    inset -1px 0 1px rgba(255, 255, 255, .16);
  color: var(--glass-ink);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Glossy diagonal sheen */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .38) 0%,
    rgba(255, 255, 255, .07) 28%,
    transparent 58%);
  mix-blend-mode: screen;
  pointer-events: none;
}
[data-theme="dark"] .glass::after { opacity: .5; }

/* Stronger fill where text density is higher (sheets, forms) */
.glass--strong { background: var(--glass-fill-strong); }

/* Pill (progress, chips, small buttons) */
.glass--pill { border-radius: var(--r-pill); }

/* ---------- Adaptive navigation: ONE component ---------- */
.hub-nav {
  position: fixed;
  z-index: 100;
  display: flex;
  }
.hub-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 48px;
  min-height: 48px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  color: var(--glass-ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .78;
  transition: opacity var(--dur-micro) var(--ease-gentle),
              background var(--dur-micro) var(--ease-gentle);
}
.hub-nav a .icon { font-size: 1.25rem; line-height: 1; }
.hub-nav a[aria-current="page"] {
  opacity: 1;
  color: var(--accent-text);
  background: rgba(255, 255, 255, .12);
}

/* Phone: floating bottom glass tab bar */
@media (max-width: 767px) {
  .hub-nav {
    left: 12px; right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    height: var(--tabbar-h);
    justify-content: space-around;
    align-items: center;
    padding: 0 var(--sp-1);
  }
}

/* Desktop: floating top glass nav */
@media (min-width: 768px) {
  .hub-nav {
    top: 14px; left: 50%;
    transform: translateX(-50%) translateZ(0);
    height: var(--nav-h);
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
  }
  .hub-nav a { flex-direction: row; gap: 8px; font-size: .9rem; }
  .hub-nav a .icon { font-size: 1.05rem; }
}

/* Hover only where hover exists */
@media (hover: hover) and (pointer: fine) {
  .hub-nav a:hover { opacity: 1; background: rgba(255, 255, 255, .10); }
  .glass--interactive { transition: transform var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-gentle); }
  .glass--interactive:hover { transform: translateZ(0) scale(1.02); }
}

/* ---------- Depth sheet (ⓘ Go deeper) ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 10, 20, .45);
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-gentle);
}
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 201;
  max-height: 82dvh;
  overflow-y: auto;
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom));
  transform: translateY(102%);
  transition: transform .38s var(--ease-spring);
}
@media (min-width: 768px) {
  .sheet {
    left: 50%; right: auto; bottom: 6vh;
    width: min(640px, 92vw);
    transform: translateX(-50%) translateY(30px);
    opacity: 0;
    border-radius: var(--r-card);
    transition: transform .38s var(--ease-spring), opacity .3s var(--ease-out);
  }
}
.sheet.open { transform: translateY(0); opacity: 1; }
@media (min-width: 768px) { .sheet.open { transform: translateX(-50%) translateY(0); } }
.sheet-backdrop.open { opacity: 1; }

/* ---------- Accessibility fallbacks ---------- */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--strong, .sheet {
    background: var(--glass-solid-fallback) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .glass::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glass, .sheet, .hub-nav a, .glass--interactive { transition: none !important; }
}