/*
  Liquid Glass material.

  Glass lives on the navigation and control layer only: bars, floating
  buttons, menus, sheets, and the lenses inside controls. Content (cards,
  lists) stays opaque so it can show through the glass above it.

  Layers, back to front:
    1. backdrop  – lensing (SVG displacement, Chromium), then a light frost
    2. fill      – tint whose strength follows the Clear … Tinted preference,
                   under a soft top-to-bottom sheen that gives the slab volume
    3. shadows   – inner glow along the rim, shade at the lower edge, drop shadow
    4. ::after   – specular highlight that follows the pointer
    5. ::before  – rim light: bright where light enters and leaves the edge
*/

.glass {
  --_r: 999px;
  position: relative;
  isolation: isolate;
  border-radius: var(--_r);
  color: var(--label);
  background: var(--glass-sheen), var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  /* With a lens filter the frost and saturation happen inside it. */
  backdrop-filter: var(--glass-refract, blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)));
  box-shadow: var(--glass-shadow), var(--glass-inner), inset 0 0 0 0.5px var(--glass-edge);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1.25px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(145deg,
    var(--rim-hi) 0%,
    var(--rim-mid) 16%,
    var(--rim-lo) 38%,
    rgb(255 255 255 / 0.02) 52%,
    var(--rim-lo) 66%,
    var(--rim-mid) 86%,
    var(--rim-hi) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  background: radial-gradient(circle 120px at var(--mx, 50%) var(--my, 0%),
    rgb(255 255 255 / 0.32), rgb(255 255 255 / 0) 70%);
}

@media (hover: hover) {
  .glass.interactive:hover::after { opacity: 0.4; }
}
.glass.interactive:active::after,
.glass.is-pressed::after { opacity: 0.8; transition-duration: 0.1s; }

/* Thicker glass for surfaces that carry text: menus, dialogs, toasts. */
.glass.thick {
  --glass-blur: 22px;
  background: var(--glass-sheen), var(--glass-thick);
}

/* Prominent, tinted glass for the single most important action. */
.glass.tinted {
  color: #fff;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 50%, rgb(0 0 0 / 0.06)),
    linear-gradient(color-mix(in srgb, var(--accent) 84%, transparent) 0 0);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 38%, transparent),
    0 2px 6px rgb(0 0 0 / 0.1), inset 0 0 8px -3px rgb(255 255 255 / 0.3), inset 0 0 0 0.5px rgb(0 0 0 / 0.08);
}

/* Glass floating over artwork, where the label is always white. */
.glass.on-art {
  color: #fff;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.02) 55%, rgb(255 255 255 / 0.06)), rgb(255 255 255 / 0.08);
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.2), inset 0 0 8px -3px rgb(255 255 255 / 0.35), inset 0 0 0 0.5px rgb(255 255 255 / 0.14);
}
.glass.on-art.solid { color: #000; background: rgb(255 255 255 / 0.94); }

/* Pressing glass makes it swell, then settle with a spring. */
.interactive {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--dur-bouncy) var(--spring-bouncy);
}
.interactive:active,
.interactive.is-pressed {
  transform: scale(var(--press, 1.08));
  transition-duration: 0.16s;
  transition-timing-function: var(--ease-out);
}
.interactive:disabled { opacity: 0.5; pointer-events: none; }

/* Content-layer press: recede instead of swell. */
.pressable { transition: transform var(--dur-bouncy) var(--spring-bouncy); cursor: pointer; }
.pressable:active:not(:has(button:active, a:active, .slider:active)) {
  transform: scale(0.975);
  transition-duration: 0.14s;
  transition-timing-function: var(--ease-out);
}

/* ---------- Lenses inside controls ----------
   A knob is an opaque white capsule at rest. While held it lifts into clear
   glass: it grows, drops its fill and refracts whatever it is resting on. */

.lens-held {
  background: rgb(255 255 255 / 0.03) !important;
  -webkit-backdrop-filter: brightness(1.03);
  backdrop-filter: var(--glass-refract, brightness(1.03));
  box-shadow:
    inset 0 0 0 0.75px rgb(255 255 255 / 0.7),
    inset 0 1.5px 2px rgb(255 255 255 / 0.55),
    inset 0 -1.5px 2px rgb(255 255 255 / 0.22),
    0 8px 20px rgb(0 0 0 / 0.2),
    0 2px 5px rgb(0 0 0 / 0.12) !important;
}

/* Switch */
.switch {
  position: relative;
  flex: none;
  width: 64px;
  height: 28px;
  border-radius: 14px;
  background: var(--fill-2);
  transition: background 0.28s var(--ease-out);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.switch[aria-checked="true"] { background: var(--green); }
.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 39px;
  height: 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0.5px 3px rgb(0 0 0 / 0.14), 0 4px 10px rgb(0 0 0 / 0.12);
  transition: transform var(--dur-bouncy) var(--spring-bouncy), background 0.18s, box-shadow 0.18s;
}
.switch[aria-checked="true"] .switch-knob { transform: translateX(21px); }
.switch.is-pressed .switch-knob { transform: scale(1.3, 1.5); }
.switch[aria-checked="true"].is-pressed .switch-knob { transform: translateX(21px) scale(1.3, 1.5); }

/* Slider */
.slider {
  --p: 0;
  position: relative;
  height: 34px;
  touch-action: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.slider-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 4px;
  background: var(--fill-2);
  overflow: hidden;
}
.slider-fill {
  height: 100%;
  width: calc(19px + var(--p) * (100% - 38px));
  background: var(--accent);
}
.slider-thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * (100% - 38px));
  width: 38px;
  height: 24px;
  margin-top: -12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0.5px 4px rgb(0 0 0 / 0.14), 0 6px 13px rgb(0 0 0 / 0.14);
  transition: transform var(--dur-bouncy) var(--spring-bouncy), background 0.18s, box-shadow 0.18s;
}
.slider.is-pressed .slider-thumb { transform: scale(1.4, 1.5); }

/* Segmented control: press and drag the thumb between segments. */
.seg {
  --n: 2;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 38px;
  padding: 3px;
  border-radius: 999px;
  background: var(--fill);
  touch-action: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.seg-thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--n));
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.12), 0 3px 10px rgb(0 0 0 / 0.06), inset 0 0 0 0.5px var(--glass-edge);
  will-change: transform;
  transition: background 0.18s, box-shadow 0.18s;
}
html[data-theme="dark"] .seg-thumb { background: rgb(118 118 128 / 0.5); }
.seg.is-lifting .seg-thumb { z-index: 2; }
.seg-item {
  position: relative;
  z-index: 1;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--label);
  pointer-events: none;
  transition: color 0.2s;
}
.seg-item[aria-selected="true"] { font-weight: 600; }

/* ---------- Reduce Transparency (Settings › Liquid Glass) ---------- */

html[data-solid] .glass,
html[data-solid] .glass.thick {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface-2);
}
html[data-solid] .glass.tinted { background: var(--accent); }
html[data-solid] .glass.on-art { background: rgb(0 0 0 / 0.55); }
html[data-solid] .glass.on-art.solid { background: #fff; }
html[data-solid] .sheet.glass { background: var(--surface); }
html[data-solid] .tab-lens,
html[data-solid] .lens-held,
html[data-solid] .navbar::before {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-solid] .lens-held { background: #fff !important; }

@media (prefers-contrast: more) {
  .glass { box-shadow: var(--glass-shadow), inset 0 0 0 1.5px var(--label-2); }
  .glass::before { display: none; }
}

/* ---------- Shader-rendered light (lens.js) ----------
   Where the lens shader runs, its specular layer replaces the CSS rim and glow. */

.glass.has-spec::before {
  padding: 0;
  background: var(--glass-spec) 0 0 / 100% 100% no-repeat;
  -webkit-mask: none;
  mask: none;
  opacity: var(--spec-opacity, 1);
}
.glass.has-spec:not(.tinted):not(.on-art) { box-shadow: var(--glass-shadow), inset 0 0 0 0.5px var(--glass-edge); }

.lens-held.has-spec {
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.2), 0 2px 5px rgb(0 0 0 / 0.12) !important;
}
.lens-held.has-spec::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--glass-spec) 0 0 / 100% 100% no-repeat;
  opacity: var(--spec-opacity, 1);
}