/* Liquid controls. Tokens first; liquid.js replaces the cubic fallbacks with real springs where linear() exists. */
:root {
  --spring-settle: cubic-bezier(.22, 1, .36, 1); --spring-settle-ms: 420ms;
  --spring-liquid: cubic-bezier(.34, 1.32, .64, 1); --spring-liquid-ms: 520ms;
  --spring-press: cubic-bezier(.2, .9, .3, 1); --spring-press-ms: 220ms;
  --lq-ink: #17352f; --lq-accent: #236b5d; --lq-accent-2: #3f9b86; --lq-on: #fff;
}

/* ---------------------------------------------------------------- button */
.lq-btn {
  --mx: 50%; --my: 0%;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 1.05rem/1 var(--font-display, system-ui); color: var(--lq-on);
  background:
    radial-gradient(140px 90px at var(--mx) var(--my), rgb(255 255 255 / .28), transparent 70%),
    linear-gradient(180deg, var(--lq-accent-2), var(--lq-accent) 55%, color-mix(in srgb, var(--lq-accent) 80%, #000));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .14), 0 1px 2px rgb(16 40 34 / .2), 0 10px 24px -12px color-mix(in srgb, var(--lq-accent) 80%, transparent);
  transition: scale var(--spring-press-ms) var(--spring-press), box-shadow .2s, filter .2s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.lq-btn::after { /* the glass lip: a bright crescent along the top edge */
  content: ''; position: absolute; inset: 1px 1px 50% 1px; border-radius: 999px 999px 40% 40% / 999px 999px 18px 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / .32), rgb(255 255 255 / 0)); pointer-events: none; z-index: -1;
}
@media (hover: hover) and (pointer: fine) { .lq-btn:hover { filter: brightness(1.04) saturate(1.05); } }
.lq-btn:active { scale: .97; transition-duration: 90ms; }
.lq-btn:focus-visible { outline: 3px solid #1d5fa8; outline-offset: 3px; }
.lq-btn .lq-drop { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(255 255 255 / .55), rgb(255 255 255 / 0)); }
.lq-btn--glass { color: var(--lq-ink); background: radial-gradient(140px 90px at var(--mx) var(--my), rgb(255 255 255 / .9), transparent 70%), rgb(255 255 255 / .55);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / .6), inset 0 -1px 0 rgb(16 40 34 / .12), 0 8px 20px -12px rgb(16 40 34 / .4); }
.lq-btn--glass .lq-drop { background: radial-gradient(closest-side, rgb(35 107 93 / .22), transparent); }

/* ---------------------------------------------------------------- the selection pill */
[data-liquid-pill] { position: relative; isolation: isolate; }
.lq-pill {
  position: absolute; left: 0; top: 0; z-index: -1; border-radius: 999px; pointer-events: none; transform-origin: 0 0;
  background: linear-gradient(180deg, #fff, #eef6f2);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(35 107 93 / .16), 0 6px 16px -8px rgb(16 40 34 / .45), 0 1px 2px rgb(16 40 34 / .12);
  /* no CSS transition: it is placed at once on load (never grows in from the corner); liquid.js animates the moves */
}
.has-pill > .on, .has-pill > [aria-current], .has-pill > [aria-selected=true] { background: transparent !important; box-shadow: none !important; }

/* ---------------------------------------------------------------- switch */
.lq-switch {
  --w: 64px; --h: 38px; --k: 30px;
  position: relative; width: var(--w); height: var(--h); padding: 0; border: 0; border-radius: 999px; cursor: pointer; flex: none;
  background: #cfd9d5; box-shadow: inset 0 1px 3px rgb(16 40 34 / .25), inset 0 0 0 1px rgb(16 40 34 / .08);
  transition: background-color .3s;
}
.lq-switch::before {
  content: ''; position: absolute; top: calc((var(--h) - var(--k)) / 2); left: calc((var(--h) - var(--k)) / 2);
  width: var(--k); height: var(--k); border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fff, #f1f5f3 60%, #dfe7e3);
  box-shadow: 0 2px 6px rgb(16 40 34 / .3), inset 0 -1px 0 rgb(16 40 34 / .1);
  transition: translate var(--spring-liquid-ms) var(--spring-liquid), width .18s ease-out;
}
.lq-switch:active::before { width: calc(var(--k) * 1.3); }   /* the drop stretches under the finger */
.lq-switch[aria-checked=true] { background: var(--lq-accent); }
.lq-switch[aria-checked=true]::before { translate: calc(var(--w) - var(--h)) 0; }
.lq-switch[aria-checked=true]:active::before { translate: calc(var(--w) - var(--h) - var(--k) * .3) 0; }

/* ---------------------------------------------------------------- bar */
.lq-bar { --value: 0; position: relative; height: 14px; border-radius: 999px; overflow: hidden; background: #e3ebe8; box-shadow: inset 0 1px 2px rgb(16 40 34 / .18); }
.lq-bar > i {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--value)); border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / .35), transparent 50%), linear-gradient(90deg, var(--lq-accent-2), var(--lq-accent));
}
.lq-bar > i::after { /* the moving surface: one soft highlight drifting along the liquid */
  content: ''; position: absolute; inset: 0; opacity: .55;
  background: linear-gradient(100deg, transparent 0 35%, rgb(255 255 255 / .38) 50%, transparent 65% 100%);
  background-size: 220% 100%; animation: lq-flow 3.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes lq-flow { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.lq-bar--thick { height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .lq-btn, .lq-pill, .lq-switch::before { transition-duration: 0s !important; }
  .lq-bar > i::after { animation: none; }
}