/* ============================================================
   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);
  /* --glass-blur is a RUNTIME KNOB (Studio Design panel) — never hardcode */
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(170%);
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(170%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-card);
  /* Drop shadows + 4-way inset rim-light stack (top/bottom rims are
     theme-tokenized; side rims via --glass-rim-side) */
  box-shadow:
    var(--glass-shadow),
    0 24px 48px -12px rgba(0, 0, 0, .5),
    inset 1px 1px 0 var(--glass-rim-top, rgba(255,255,255,.75)),
    inset 0 -1px 1px var(--glass-rim-bottom, rgba(255,255,255,.30)),
    inset 1px 0 1px var(--glass-rim-side, rgba(255,255,255,.20)),
    inset -1px 0 1px var(--glass-rim-side, rgba(255,255,255,.20));
  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;
  flex-shrink: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
  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);
}

/* Small, flat completeness menu. The four-way pill remains primary; this is a
   quiet route inventory with one hairline between each lowercase label. */
.hub-menu__trigger {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--glass-ink, var(--reader-ink, #23211E));
  cursor: pointer;
  opacity: .72;
}
.hub-menu__trigger:hover,
.hub-menu__trigger[aria-expanded="true"] { opacity: 1; background: rgba(255, 255, 255, .1); }
.hub-menu__trigger:focus-visible,
.hub-menu__panel a:focus-visible { outline: 2px solid var(--accent-text, var(--reader-clay, #8F5330)); outline-offset: 2px; }
.hub-menu__icon { display: grid; gap: 3px; width: 14px; }
.hub-menu__icon i { display: block; height: 1px; background: currentColor; }
.hub-menu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hub-menu__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 102;
  width: min(188px, calc(100vw - 24px));
  max-height: min(420px, calc(100dvh - var(--tabbar-h, 72px) - 32px));
  overflow-y: auto;
  padding: 4px 12px;
  border: 1px solid var(--reader-line, rgba(35, 33, 30, .14));
  border-radius: 12px;
  background: color-mix(in srgb, var(--ground, var(--reader-ground, #E7E4DD)) 97%, transparent);
  box-shadow: 0 18px 38px -24px rgba(0, 0, 0, .55);
  color: var(--ink, var(--reader-ink, #23211E));
}
.hub-menu__panel[hidden] { display: none; }
.hub-menu__panel a,
.hub-nav .hub-menu__panel a {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 9px 1px 8px;
  border-radius: 0;
  border-bottom: 1px solid var(--reader-line, rgba(35, 33, 30, .14));
  background: transparent;
  color: inherit;
  font: 650 .76rem/1.2 var(--font-grotesque, var(--font-body));
  letter-spacing: .025em;
  text-decoration: none;
  text-transform: lowercase;
  opacity: .88;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
  transform: none;
  transition: color var(--dur-micro) var(--ease-gentle), opacity var(--dur-micro) var(--ease-gentle);
}
.hub-menu__panel a:last-child { border-bottom: 0; }
.hub-menu__panel a:hover { color: var(--accent-text, var(--reader-clay, #8F5330)); opacity: 1; background: transparent; }
.hub-menu--standalone {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 100;
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.hub-menu--standalone .hub-menu__panel { top: calc(100% + 8px); bottom: auto; }

/* ---- Active-pill slide (Glazed Maximalism, additive) ----
   Mechanism 1 (zero markup): the active link carries a view-transition-name,
   so on MPA navigation (@view-transition in editorial.css) the highlight pill
   MORPHS from the old tab to the new one. Progressive: browsers without
   view transitions just swap states.
   [v3] Coordinated with the cover-art morph — see "THE NAME MAP" in
   editorial.css (VIEW TRANSITIONS block): hub-active-pill and hub-art are
   separate named groups, both lifted out of the root cross-fade. */
/* The JS indicator carries the glide. Keeping the named transition off the
   anchor prevents the browser from scaling the label's glyph snapshot. */
.hub-nav a[aria-current="page"] { view-transition-name: none; }
::view-transition-group(hub-active-pill) {
  animation-duration: calc(.45s * var(--motion-scale, 1));
  animation-timing-function: var(--ease-spring);
}

/* Mechanism 2 (opt-in markup): JS may insert a single .nav-pill element that
   it positions/sizes to the active link; CSS animates the glide. While a
   .nav-pill is present, the per-link background steps aside. */
.hub-nav .nav-pill,
.local-nav .nav-pill {
  position: absolute;
  z-index: -1;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  pointer-events: none;
  transition:
    transform calc(.45s * var(--motion-scale, 1)) var(--ease-spring),
    width calc(.45s * var(--motion-scale, 1)) var(--ease-spring),
    height calc(.45s * var(--motion-scale, 1)) var(--ease-spring);
}
.hub-nav:has(.nav-pill) { isolation: isolate; }
.hub-nav:has(.nav-pill) a[aria-current="page"] { background: transparent; }

/* 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; }
  .hub-nav .hub-menu__panel { top: calc(100% + 8px); bottom: auto; }
}

/* Hover only where hover exists */
@media (hover: hover) and (pointer: fine) {
  .hub-nav a:hover { opacity: 1; background: rgba(255, 255, 255, .10); }
  /* [polish] interactive glass gets a true lift: rise + micro-scale + a
     deepened shadow step so the surface reads as picked-up-off-the-page, not
     just enlarged. Knob- and reduced-motion-aware (see block below). */
  .glass--interactive {
    transition:
      transform var(--dur-micro) var(--ease-spring),
      box-shadow var(--dur-micro) var(--ease-gentle);
  }
  .glass--interactive:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow:
      var(--glass-shadow),
      0 22px 48px -14px rgba(0, 0, 0, .5),
      inset 1px 1px 0 var(--glass-rim-top, rgba(255,255,255,.75)),
      inset 0 -1px 1px var(--glass-rim-bottom, rgba(255,255,255,.30)),
      inset 1px 0 1px var(--glass-rim-side, rgba(255,255,255,.20)),
      inset -1px 0 1px var(--glass-rim-side, rgba(255,255,255,.20));
  }
  .glass--interactive:active { transform: translate3d(0, -1px, 0); }
}

/* ---------- 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,
  .hub-nav .nav-pill, .local-nav .nav-pill { transition: none !important; }
  /* [polish] also neutralize the hover LIFT so nothing snaps for these users
     (shadow may still step — that's a non-motion cue) */
  .glass--interactive:hover,
  .glass--interactive:active { transform: none !important; }
  ::view-transition-group(hub-active-pill),
  ::view-transition-old(hub-active-pill),
  ::view-transition-new(hub-active-pill) { animation: none !important; }
}

/* ============================================================
   READING LAYER (2026-07-04, strictly additive) — sheet comfort.
   Long "The science" bodies scroll INSIDE the depth sheet: contain
   the scroll chain so the page never slides out from under a
   reading thumb, and keep the glass edge clean with a thin bar.
   Pure value additions on the existing .sheet — no new motion, no
   new transparency (nothing for the fallbacks above to disable).
   Type metrics for sheet content live in editorial.css.
   ============================================================ */
.sheet {
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* ============================================================
   RHODE CHARACTERISTICS LAYER (2026-07-05) — glass ledger.
   The characteristics surfaces added in this pass — .rt-spec /
   .rt-callout, frameless ground-fusion (.is-frameless / .is-fused),
   the .specimen refinement, and .review-card / .review-surface — are
   CONTENT surfaces (things you READ / LOOK AT). By Law 3 they are
   INTENTIONALLY glass-free: they live in editorial.css and add ZERO
   backdrop-filter, so the ≤3-backdrop-filter-per-viewport budget owned
   by this file is untouched. Recorded here so the glass ledger stays
   honest for review; no rule belongs in this file for them.
   ============================================================ */