/* ==========================================================================
   Liquid Glass design system
   Tokens + reusable materials and controls, inspired by iOS 26.

   Depth model (back to front). Each layer has its own material so the page
   never turns into one uniform blur:
     1. Wallpaper – soft colour fields that give the glass something to show.
     2. Panels    – frosted, translucent content cards (.lg-surface). No
                    backdrop blur: the wallpaper is already soft, so they stay
                    cheap and text stays steady.
     3. Glass     – clear, blurred, lens-like floating controls (.lg-glass,
                    .lg-btn--glass).
     4. Overlay   – thicker glass for sheets, dialogs, toasts (.lg-glass--thick).

   Components: .lg-glass, .lg-surface, .lg-btn (+ --glass, --prominent,
   --tinted, --destructive, --icon, --plain), .lg-segmented, .lg-field,
   .lg-form, .lg-scroll-edge, .lg-icon.
   ========================================================================== */

/* ---------- Tokens: light ---------- */
:root {
  color-scheme: light;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display: 34px;
  --fs-title-1: 28px;
  --fs-title-2: 22px;
  --fs-title-3: 19px;
  --fs-headline: 16px;
  --fs-body: 15px;
  --fs-callout: 14px;
  --fs-subhead: 13px;
  --fs-footnote: 12px;
  --fs-caption: 11px;
  --tracking-display: -.026em;
  --tracking-title: -.018em;
  --tracking-body: -.008em;
  --tracking-caps: .06em;

  /* Spacing (4pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radii: nested shapes stay concentric (outer = inner + padding) */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 34px;
  --radius-pill: 999px;

  /* Accent: one restrained tint, derived from the BAF.So slate */
  --tint: #2f6690;
  --tint-hover: #285a80;
  --tint-on: #ffffff;
  --tint-soft: rgba(47, 102, 144, .11);
  --tint-ring: rgba(47, 102, 144, .30);

  /* Labels (vibrant: they adapt to whatever sits behind glass) */
  --label: #0d1217;
  --label-2: rgba(30, 38, 48, .70);
  --label-3: rgba(30, 38, 48, .48);
  --label-4: rgba(30, 38, 48, .28);
  --separator: rgba(30, 38, 48, .10);
  --separator-strong: rgba(30, 38, 48, .17);

  /* Fills for controls sitting on content */
  --fill-1: rgba(116, 126, 140, .22);
  --fill-2: rgba(116, 126, 140, .15);
  --fill-3: rgba(116, 126, 140, .10);
  --fill-4: rgba(116, 126, 140, .06);

  /* Status */
  --red: #d92d20;
  --red-dot: #ff3b30;
  --red-soft: rgba(255, 59, 48, .11);
  --orange: #a35a00;
  --orange-dot: #ff9f0a;
  --green: #1f7a3a;
  --green-dot: #34c759;

  /* 1 · Wallpaper: brand slate, sage and a warm sand, kept soft */
  --canvas: #cdd8e2;
  --canvas-gradient:
    radial-gradient(72vmax 62vmax at 0% 0%, rgba(104, 152, 204, .88), transparent 66%),
    radial-gradient(62vmax 56vmax at 100% 6%, rgba(158, 188, 136, .82), transparent 66%),
    radial-gradient(68vmax 58vmax at 100% 100%, rgba(238, 194, 146, .82), transparent 66%),
    radial-gradient(62vmax 56vmax at 0% 100%, rgba(118, 146, 198, .78), transparent 66%),
    radial-gradient(46vmax 40vmax at 50% 52%, rgba(232, 238, 244, .55), transparent 70%),
    linear-gradient(160deg, #d6e0ea 0%, #cad4de 100%);
  --ambient-a: rgba(84, 138, 200, .55);
  --ambient-b: rgba(230, 176, 120, .50);

  /* 2 · Frosted panels (translucent, no backdrop blur) */
  --surface: rgba(255, 255, 255, .46);
  --surface-solid: #ffffff;
  --surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .06) 36%, rgba(255, 255, 255, 0) 100%);
  --surface-hover: rgba(255, 255, 255, .48);
  --surface-highlight: rgba(255, 255, 255, .95);
  --surface-edge: rgba(20, 30, 42, .07);
  --surface-rim: rgba(255, 255, 255, .45);
  --shadow-content: 0 1px 2px rgba(16, 24, 32, .05), 0 12px 34px rgba(30, 50, 70, .10);

  /* 3 · Clear glass (floating controls) */
  --glass-bg: rgba(255, 255, 255, .24);
  --glass-blur: 14px;
  --glass-saturate: 210%;
  --glass-brightness: 1.08;
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, .06) 46%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .14) 100%);
  --glass-rim: rgba(255, 255, 255, .58);
  --glass-rim-top: rgba(255, 255, 255, 1);
  --glass-edge: rgba(20, 30, 42, .09);
  --glass-depth: rgba(20, 30, 42, .06);
  --glass-glow: rgba(255, 255, 255, .42);
  --glass-caustic: rgba(255, 255, 255, .55);
  --glass-shadow: 0 1px 1px rgba(16, 24, 32, .05), 0 6px 16px rgba(20, 40, 60, .10), 0 18px 44px rgba(20, 40, 60, .10);
  --spec-strong: rgba(255, 255, 255, 1);
  --spec-soft: rgba(255, 255, 255, .30);
  --spec-low: rgba(255, 255, 255, .75);

  /* 4 · Overlay glass (sheets, dialogs, toasts) */
  --glass-thick-bg: rgba(248, 250, 252, .60);
  --glass-thick-blur: 34px;
  --glass-thick-shadow: 0 2px 6px rgba(16, 24, 32, .06), 0 24px 70px rgba(20, 40, 60, .22);
  --dim: rgba(20, 30, 42, .16);

  /* Controls placed on glass or panels */
  --control-bg: rgba(255, 255, 255, .40);
  --control-bg-hover: rgba(255, 255, 255, .62);
  --control-bg-active: rgba(255, 255, 255, .85);
  --control-rim: rgba(255, 255, 255, .95);
  --control-edge: rgba(20, 30, 42, .08);
  --control-shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 3px 10px rgba(20, 40, 60, .06);
  --thumb-bg: rgba(255, 255, 255, .92);
  --thumb-shadow: 0 1px 2px rgba(16, 24, 32, .10), 0 4px 14px rgba(20, 40, 60, .12);
  --light-hover: rgba(255, 255, 255, .65);
  --light-press: rgba(255, 255, 255, .95);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.36, .64, 1);
  --spring-smooth: cubic-bezier(.25, 1.08, .4, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 380ms;
  --dur-4: 520ms;

  /* Glass recipe, shared by .lg-glass and by any element that needs to
     become glass only at some sizes. */
  --lg-glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  --lg-glass-shadow:
    inset 0 1px 0 0 var(--glass-rim-top),
    inset 0 0 0 .5px var(--glass-rim),
    inset 0 -10px 14px -12px var(--glass-caustic),
    inset 0 -1px 1px 0 var(--glass-depth),
    inset 0 0 16px 0 var(--glass-glow),
    0 0 0 .5px var(--glass-edge),
    var(--glass-shadow);
  --lg-panel-shadow:
    inset 0 1px 0 0 var(--surface-highlight),
    inset 0 0 0 .5px var(--surface-rim),
    0 0 0 .5px var(--surface-edge),
    var(--shadow-content);
  --lg-rim: linear-gradient(135deg, var(--spec-strong) 0%, var(--spec-soft) 24%, transparent 44%, transparent 60%, var(--spec-soft) 78%, var(--spec-low) 100%);
  --lg-thick-filter: blur(var(--glass-thick-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  --lg-thick-shadow:
    inset 0 1px 0 0 var(--glass-rim-top),
    inset 0 0 0 .5px var(--glass-rim),
    inset 0 0 24px 0 var(--glass-glow),
    0 0 0 .5px var(--glass-edge),
    var(--glass-thick-shadow);

  /* Pointer-driven light, written by js/theme.js and js/liquid-glass.js */
  --pointer-shift-x: 0px;
  --pointer-shift-y: 0px;
}

/* Real spring curves where the browser supports linear() easing. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .0921, .2893, .5075, .7002, .848, .9484, 1.0082, 1.0372, 1.0459, 1.0427, 1.034, 1.0239, 1.0149, 1.0078, 1.0029, .9999, .9984, .9979, .998, .9984, .9988, .9993, .9996, 1);
    --spring-smooth: linear(0, .088, .2676, .4594, .6268, .7577, .8523, .9165, .9575, .9819, .9954, 1.002, 1.0046, 1.005, 1.0044, 1.0035, 1.0025, 1.0017, 1.0011, 1.0007, 1.0004, 1.0002, 1.0001, 1, 1);
  }
}

/* ---------- Tokens: dark ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --tint: #8cbbe0;
  --tint-hover: #a6cbe9;
  --tint-on: #08131c;
  --tint-soft: rgba(140, 187, 224, .15);
  --tint-ring: rgba(140, 187, 224, .34);

  --label: #f3f5f7;
  --label-2: rgba(232, 238, 245, .68);
  --label-3: rgba(232, 238, 245, .45);
  --label-4: rgba(232, 238, 245, .26);
  --separator: rgba(255, 255, 255, .09);
  --separator-strong: rgba(255, 255, 255, .15);

  --fill-1: rgba(130, 142, 158, .34);
  --fill-2: rgba(130, 142, 158, .25);
  --fill-3: rgba(130, 142, 158, .17);
  --fill-4: rgba(130, 142, 158, .10);

  --red: #ff6b61;
  --red-dot: #ff453a;
  --red-soft: rgba(255, 69, 58, .17);
  --orange: #ffb547;
  --orange-dot: #ff9f0a;
  --green: #4cd97b;
  --green-dot: #30d158;

  --canvas: #0a0e15;
  --canvas-gradient:
    radial-gradient(72vmax 62vmax at 0% 0%, rgba(38, 92, 156, .88), transparent 66%),
    radial-gradient(62vmax 56vmax at 100% 6%, rgba(52, 100, 84, .66), transparent 66%),
    radial-gradient(68vmax 58vmax at 100% 100%, rgba(142, 92, 52, .62), transparent 66%),
    radial-gradient(62vmax 56vmax at 0% 100%, rgba(58, 70, 136, .68), transparent 66%),
    linear-gradient(160deg, #0d121a 0%, #070a0f 100%);
  --ambient-a: rgba(46, 104, 176, .44);
  --ambient-b: rgba(160, 104, 56, .30);

  --surface: rgba(20, 24, 32, .44);
  --surface-solid: #191d22;
  --surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .01) 36%, rgba(255, 255, 255, 0) 100%);
  --surface-hover: rgba(255, 255, 255, .07);
  --surface-highlight: rgba(255, 255, 255, .16);
  --surface-edge: rgba(0, 0, 0, .45);
  --surface-rim: rgba(255, 255, 255, .07);
  --shadow-content: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 36px rgba(0, 0, 0, .32);

  --glass-bg: rgba(40, 46, 56, .26);
  --glass-saturate: 185%;
  --glass-brightness: 1.06;
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .05) 100%);
  --glass-rim: rgba(255, 255, 255, .16);
  --glass-rim-top: rgba(255, 255, 255, .38);
  --glass-edge: rgba(0, 0, 0, .55);
  --glass-depth: rgba(0, 0, 0, .25);
  --glass-glow: rgba(255, 255, 255, .06);
  --glass-caustic: rgba(255, 255, 255, .16);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .34), 0 22px 50px rgba(0, 0, 0, .28);
  --spec-strong: rgba(255, 255, 255, .55);
  --spec-soft: rgba(255, 255, 255, .08);
  --spec-low: rgba(255, 255, 255, .26);

  --glass-thick-bg: rgba(30, 34, 42, .62);
  --glass-thick-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 28px 80px rgba(0, 0, 0, .55);
  --dim: rgba(0, 0, 0, .34);

  --control-bg: rgba(255, 255, 255, .09);
  --control-bg-hover: rgba(255, 255, 255, .15);
  --control-bg-active: rgba(255, 255, 255, .22);
  --control-rim: rgba(255, 255, 255, .18);
  --control-edge: rgba(0, 0, 0, .4);
  --control-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --thumb-bg: rgba(255, 255, 255, .22);
  --thumb-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --light-hover: rgba(255, 255, 255, .16);
  --light-press: rgba(255, 255, 255, .30);
}

/* No backdrop-filter: keep the same depth, but with solid-enough fills. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(250, 251, 252, .94); --glass-thick-bg: rgba(250, 251, 252, .98); }
  :root[data-theme="dark"] { --glass-bg: rgba(34, 39, 46, .96); --glass-thick-bg: rgba(30, 34, 40, .98); }
}
/* People who ask for less transparency get opaque materials. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: #f8f9fa; --glass-thick-bg: #f8f9fa; --surface: #ffffff; --control-bg: #eef1f4; }
  :root[data-theme="dark"] { --glass-bg: #23282e; --glass-thick-bg: #1f2328; --surface: #191d22; }
  .lg-glass, .lg-scroll-edge { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  :root { --glass-edge: rgba(20, 30, 42, .35); --surface-edge: rgba(20, 30, 42, .25); --separator: rgba(30, 38, 48, .3); --label-2: rgba(20, 28, 38, .86); }
  :root[data-theme="dark"] { --glass-edge: rgba(255, 255, 255, .4); --surface-edge: rgba(255, 255, 255, .3); --separator: rgba(255, 255, 255, .3); --label-2: rgba(240, 244, 248, .86); }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-body);
  background: var(--canvas);
  color: var(--label);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--label);
  transition: background-color .5s var(--ease-out), color .4s ease;
}
/* Wallpaper on its own fixed layer: no repaint while scrolling. It must sit
   above body's own solid background (z-index 0, first in paint order), or
   the gradient is hidden and the glass has nothing to show. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--canvas-gradient);
}
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; -webkit-user-select: none; user-select: none; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--tint-ring); outline-offset: 2px; }
::selection { background: var(--tint-ring); }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Lucide-style line icons */
.lg-icon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 3 · Glass ---------- */
.lg-glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-sheen), var(--glass-bg);
  -webkit-backdrop-filter: var(--lg-glass-filter);
  backdrop-filter: var(--lg-glass-filter);
  box-shadow: var(--lg-glass-shadow);
}
/* Specular rim: light catches the top-left and bottom-right edges and
   drifts a little with the pointer. */
.lg-glass::before,
.lg-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.25px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--lg-rim);
  background-size: 140% 140%;
  background-position: calc(50% - var(--pointer-shift-x) * 3) calc(50% - var(--pointer-shift-y) * 3);
  -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);
}
.lg-glass--thick {
  background: var(--glass-sheen), var(--glass-thick-bg);
  -webkit-backdrop-filter: var(--lg-thick-filter);
  backdrop-filter: var(--lg-thick-filter);
  box-shadow: var(--lg-thick-shadow);
}

/* Scroll edge: content softens as it slides under floating controls. */
.lg-scroll-edge {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 15;
  height: 92px;
  pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--canvas) 72%, transparent), transparent);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%);
}
.lg-scroll-edge--top { top: 0; }
.lg-scroll-edge--bottom {
  display: none;
  bottom: 0;
  height: 110px;
  background: linear-gradient(to top, color-mix(in srgb, var(--canvas) 72%, transparent), transparent);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 100%);
}

/* Only phones float a bar at the bottom. */
@media (max-width: 650px) { .lg-scroll-edge--bottom { display: block; } }

/* ---------- 2 · Content surface ---------- */
.lg-surface {
  position: relative;
  isolation: isolate;
  background: var(--surface-sheen), var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--lg-panel-shadow);
}

/* ---------- Buttons ---------- */
.lg-btn {
  --lg-light: var(--light-hover);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--control-bg);
  color: var(--label);
  font-size: var(--fs-callout);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: inset 0 1px 0 0 var(--control-rim), 0 0 0 .5px var(--control-edge), var(--control-shadow);
  transition:
    transform var(--dur-3) var(--spring),
    background-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    color var(--dur-2) ease,
    opacity var(--dur-2) ease;
}
/* Light that follows the pointer (js/liquid-glass.js), brighter on press. */
.lg-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(90px circle at var(--lg-x, 50%) var(--lg-y, 30%), var(--lg-light), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.lg-btn:hover:not(:disabled) { background-color: var(--control-bg-hover); }
.lg-btn:active:not(:disabled) {
  --lg-light: var(--light-press);
  transform: scale(.955);
  transition-duration: 90ms, var(--dur-1), var(--dur-1), var(--dur-1), var(--dur-1);
}
@media (hover: hover) { .lg-btn:hover:not(:disabled)::after { opacity: 1; } }
.lg-btn:active:not(:disabled)::after { opacity: 1; }
.lg-btn:disabled { opacity: .42; }
.lg-btn .lg-icon { width: 17px; height: 17px; stroke-width: 2.2; }

/* Prominent: tinted glass for the one primary action in view */
.lg-btn--prominent {
  --lg-light: rgba(255, 255, 255, .32);
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%), var(--tint);
  color: var(--tint-on);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, .42),
    inset 0 -1px 1px 0 rgba(0, 0, 0, .12),
    0 0 0 .5px color-mix(in srgb, var(--tint) 70%, #000),
    0 6px 18px -4px color-mix(in srgb, var(--tint) 55%, transparent);
}
.lg-btn--prominent:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 55%), var(--tint-hover); }
.lg-btn--prominent:active:not(:disabled) { --lg-light: rgba(255, 255, 255, .5); }

/* Tinted: accent text on a soft accent fill */
.lg-btn--tinted { background: var(--tint-soft); color: var(--tint); box-shadow: none; }
.lg-btn--tinted:hover:not(:disabled) { background: color-mix(in srgb, var(--tint) 18%, transparent); }

/* Destructive */
.lg-btn--destructive { background: var(--red-soft); color: var(--red); box-shadow: none; }
.lg-btn--destructive:hover:not(:disabled) { background: color-mix(in srgb, var(--red-dot) 18%, transparent); }

/* Plain: text-only button */
.lg-btn--plain { background: transparent; box-shadow: none; color: var(--tint); }
.lg-btn--plain:hover:not(:disabled) { background: var(--fill-4); }

/* Glass: a standalone floating button with its own blur and lens rim */
.lg-btn--glass {
  background: var(--glass-sheen), var(--glass-bg);
  -webkit-backdrop-filter: var(--lg-glass-filter);
  backdrop-filter: var(--lg-glass-filter);
  box-shadow: var(--lg-glass-shadow);
}
.lg-btn--glass:hover:not(:disabled) { background: var(--glass-sheen), var(--control-bg); }

/* Round icon button */
.lg-btn--icon { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; }
.lg-btn--icon .lg-icon { width: 18px; height: 18px; }

/* ---------- Segmented control (sliding glass thumb) ---------- */
.lg-segmented {
  --lg-seg-count: 2;
  --lg-seg-index: 0;
  --lg-seg-pad: 3px;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: var(--lg-seg-pad);
  border-radius: var(--radius-pill);
  background: var(--control-bg);
  box-shadow: inset 0 1px 0 0 var(--control-rim), inset 0 0 0 .5px var(--control-edge);
}
.lg-segmented:has(> button:nth-of-type(3)) { --lg-seg-count: 3; }
.lg-segmented:has(> button:nth-of-type(2).active) { --lg-seg-index: 1; }
.lg-segmented:has(> button:nth-of-type(3).active) { --lg-seg-index: 2; }
.lg-segmented::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--lg-seg-pad);
  bottom: var(--lg-seg-pad);
  left: var(--lg-seg-pad);
  width: calc((100% - 2 * var(--lg-seg-pad)) / var(--lg-seg-count));
  border-radius: var(--radius-pill);
  background: var(--thumb-bg);
  box-shadow: inset 0 1px 0 0 var(--control-rim), 0 0 0 .5px var(--control-edge), var(--thumb-shadow);
  transform: translateX(calc(100% * var(--lg-seg-index))) scale(var(--lg-seg-press, 1));
  transition: transform var(--dur-4) var(--spring);
}
/* The thumb swells slightly while pressed, like a lens under a finger. */
.lg-segmented:active { --lg-seg-press: 1.035; }
.lg-segmented > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--label-2);
  font-size: var(--fs-subhead);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur-2) ease, transform var(--dur-3) var(--spring);
}
.lg-segmented > button:hover { color: var(--label); }
.lg-segmented > button.active { color: var(--label); }
.lg-segmented > button:active { transform: scale(.96); }
@supports not selector(:has(*)) {
  .lg-segmented::before { display: none; }
  .lg-segmented > button.active { background: var(--thumb-bg); box-shadow: var(--thumb-shadow); }
}

/* ---------- Search / text field ---------- */
.lg-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--control-bg);
  box-shadow: inset 0 1px 0 0 var(--control-rim), inset 0 0 0 .5px var(--control-edge);
  color: var(--label-3);
  transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.lg-field:hover { background: var(--control-bg-hover); }
.lg-field:focus-within {
  background: var(--control-bg-active);
  box-shadow: inset 0 1px 0 0 var(--control-rim), inset 0 0 0 .5px var(--control-edge), 0 0 0 4px var(--tint-ring);
}
.lg-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--label);
  font-size: var(--fs-callout);
}
.lg-field input::placeholder { color: var(--label-3); }
.lg-field input:focus-visible { outline: 0; }
.lg-field input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; }

/* ---------- Forms inside sheets ---------- */
.lg-form label { display: block; color: var(--label-2); font-size: var(--fs-subhead); font-weight: 600; }
.lg-form input:not([type="hidden"]),
.lg-form select,
.lg-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--radius-md);
  outline: 0;
  background: var(--fill-4);
  color: var(--label);
  font-size: 16px;
  font-weight: 400;
  box-shadow: inset 0 0 0 .5px var(--separator-strong);
  transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.lg-form input:not([type="hidden"]):hover,
.lg-form select:hover,
.lg-form textarea:hover { background: var(--fill-3); }
.lg-form input:focus,
.lg-form select:focus,
.lg-form textarea:focus {
  background: var(--control-bg-hover);
  box-shadow: inset 0 0 0 .5px var(--tint), 0 0 0 4px var(--tint-ring);
}
.lg-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a939d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.lg-form textarea { resize: vertical; line-height: 1.6; }
.lg-form ::placeholder { color: var(--label-3); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}