/*
 * v0.7.3 Balanced Liquid Material
 * Restore optical depth without restoring theatrical motion.
 * Motion remains governed by motion-discipline.css.
 */

/* 1. Static material depth: readable edge refraction and restrained inner light. */
.liquid {
  border-color:rgba(255,255,255,.72);
  background:
    linear-gradient(146deg,rgba(255,255,255,.56),rgba(255,255,255,.19)),
    linear-gradient(90deg,rgba(92,184,232,.035),rgba(63,138,90,.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(125,173,203,.10),
    0 9px 22px rgba(52,91,118,.072);
  backdrop-filter:blur(21px) saturate(118%);
  -webkit-backdrop-filter:blur(21px) saturate(118%);
}
.liquid::after {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 9px 10px 21px rgba(255,255,255,.12),
    inset -9px -8px 18px rgba(74,139,176,.048);
}
.liquid--mist {
  border-color:rgba(255,255,255,.45);
  background:linear-gradient(146deg,rgba(255,255,255,.30),rgba(255,255,255,.085));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.47),0 4px 14px rgba(52,91,118,.04);
}
.liquid--control {
  border-color:rgba(255,255,255,.70);
  background:
    linear-gradient(146deg,rgba(255,255,255,.55),rgba(255,255,255,.18)),
    linear-gradient(90deg,rgba(92,184,232,.042),rgba(63,138,90,.028));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80),0 8px 20px rgba(52,91,118,.064);
}
.liquid--focus {
  border-color:rgba(255,255,255,.82);
  background:
    linear-gradient(146deg,rgba(255,255,255,.68),rgba(225,240,249,.28)),
    linear-gradient(90deg,rgba(92,184,232,.07),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.91),inset 0 -1px 0 rgba(47,136,197,.08),0 11px 26px rgba(52,91,118,.09);
}
.liquid--focus::after {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 11px 11px 23px rgba(255,255,255,.15),
    inset -10px -9px 18px rgba(55,142,192,.065);
}

/* 2. Toolbar should read as a floating material layer, not a white card. */
.topbar {
  border-color:rgba(255,255,255,.68);
  background:linear-gradient(146deg,rgba(255,255,255,.51),rgba(255,255,255,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(92,184,232,.06),0 7px 18px rgba(52,91,118,.06);
}
.topbar .icon-button { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.31); }
body.scrolled .topbar {
  border-color:rgba(255,255,255,.78);
  background:linear-gradient(146deg,rgba(255,255,255,.67),rgba(255,255,255,.25));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 10px 26px rgba(52,91,118,.105);
}

/* 3. Navigation lens: visible optical depth, no sweep or jelly behavior. */
.liquid-lens {
  border-color:rgba(255,255,255,.70);
  background:
    radial-gradient(ellipse at 18% 12%,rgba(255,255,255,.56),transparent 48%),
    linear-gradient(146deg,rgba(255,255,255,.52),rgba(222,240,249,.19));
  box-shadow:
    0 4px 12px rgba(52,91,118,.055),
    inset 0 1px 0 rgba(255,255,255,.80),
    inset -8px -7px 15px rgba(47,136,197,.055);
  backdrop-filter:blur(18px) saturate(124%);
  -webkit-backdrop-filter:blur(18px) saturate(124%);
}
.bottom-nav {
  border-color:rgba(255,255,255,.64);
  background:linear-gradient(146deg,rgba(255,255,255,.48),rgba(255,255,255,.15));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70),0 7px 18px rgba(52,91,118,.055);
}
.bottom-nav__indicator {
  border-color:rgba(255,255,255,.62);
  background:
    radial-gradient(ellipse at 18% 10%,rgba(255,255,255,.56),transparent 52%),
    linear-gradient(146deg,rgba(255,255,255,.48),rgba(222,240,249,.15));
  box-shadow:0 3px 9px rgba(52,91,118,.046),inset 0 1px 0 rgba(255,255,255,.74),inset -7px -6px 13px rgba(47,136,197,.045);
}

/* 4. Hero controls: restore lens-like presence while staying quiet. */
.hero__actions .liquid--focus,.hero__actions .liquid--control {
  border-color:rgba(255,255,255,.56);
  background:
    radial-gradient(ellipse at 22% 6%,rgba(255,255,255,.30),transparent 54%),
    linear-gradient(146deg,rgba(255,255,255,.48),rgba(222,240,249,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70),inset 0 -1px 0 rgba(47,136,197,.055),0 7px 17px rgba(15,72,106,.09);
}
.hero__actions .liquid--focus::after,.hero__actions .liquid--control::after { box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 7px 7px 15px rgba(255,255,255,.075),inset -7px -6px 14px rgba(47,136,197,.05); }

/* 5. Sheet outer shell carries material; content remains stable. */
.bottom-sheet {
  border-color:rgba(255,255,255,.79);
  background:
    linear-gradient(155deg,rgba(255,255,255,.92),rgba(245,251,254,.71)),
    linear-gradient(90deg,rgba(92,184,232,.045),rgba(63,138,90,.025));
  box-shadow:0 -14px 38px rgba(52,91,118,.12),inset 0 1px 0 rgba(255,255,255,.94);
}
.confirm-dialog { border-color:rgba(255,255,255,.76); }

/* 6. Low-power mode stays intentionally flatter. */
body.low-power .liquid,body.low-power .liquid-lens {
  backdrop-filter:blur(12px) saturate(106%);
  -webkit-backdrop-filter:blur(12px) saturate(106%);
}
body.low-power .liquid::after { box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }