/* Liquid-glass chrome. Blur stays on the bars and sheets that float over the page.
   List rows keep their existing fill so a long scroll does not blur every cell.
   html[data-hz="high"].hz-scrolling still drops the bar blur in hz.css. */

.top,
.tabs,
.install-pill,
dialog,
.toast {
  background-color: color-mix(in srgb, var(--bg) 46%, transparent);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  backdrop-filter: blur(34px) saturate(190%);
  border-color: color-mix(in srgb, white 58%, var(--line));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 72%, transparent),
    inset 0 -1px 0 color-mix(in srgb, white 16%, transparent),
    0 14px 36px color-mix(in srgb, var(--ink) 14%, transparent);
}

.btn,
.key,
.icon-btn,
.seg {
  border-color: color-mix(in srgb, white 58%, var(--line));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 70%, transparent),
    0 8px 18px color-mix(in srgb, var(--ink) 12%, transparent);
}

.tabs {
  background-image: linear-gradient(180deg, color-mix(in srgb, white 28%, transparent), transparent 42%);
}

.m2-ind {
  background: color-mix(in srgb, white 34%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 80%, transparent),
    0 8px 18px color-mix(in srgb, var(--ink) 16%, transparent) !important;
}

.toast {
  color: var(--ink);
  font-weight: 700;
}

.ios-ring {
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  background:
    radial-gradient(circle, color-mix(in srgb, white 70%, transparent) 0 18%, transparent 19% 42%),
    radial-gradient(circle, color-mix(in srgb, var(--pink, #F3A6B8) 55%, transparent), transparent 68%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 65%, transparent);
  animation: iosring .68s cubic-bezier(.16, 1, .3, 1) forwards;
}

html.m2-enter .kpi .v,
html.m2-enter .card h3 {
  animation: glass-pop .62s cubic-bezier(.16, 1.35, .32, 1) both;
}

html.m2-enter .card:nth-child(2) h3,
html.m2-enter .kpi:nth-child(2) .v { animation-delay: .04s; }
html.m2-enter .card:nth-child(3) h3,
html.m2-enter .kpi:nth-child(3) .v { animation-delay: .08s; }

@keyframes glass-pop {
  0% { transform: translate3d(0, 10px, 0) scale(.92); opacity: 0; }
  60% { transform: translate3d(0, -2px, 0) scale(1.04); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

:root[data-theme="dark"] .m2-ind {
  background: color-mix(in srgb, white 16%, transparent) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .m2-ind {
    background: color-mix(in srgb, white 16%, transparent) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.m2-enter .kpi .v,
  html.m2-enter .card h3,
  .ios-ring {
    animation: none;
  }
}