/* ═══════════════════════════════════════════════════════════════
   glass.css — THE GLASS SYSTEM

   Nothing in this OS is opaque. Every surface here is built from
   the same five optical layers, in this order:

     1. BODY      a very low-alpha tint gradient (the pane itself)
     2. BACKDROP  blur + saturate + brightness (light diffusing through)
     3. DISPERSION inset cool/warm shadows (prismatic split at the rim)
     4. RIM       a masked gradient border (the thickness of the pane)
     5. SHEEN     a specular highlight that tracks the cursor

   Layer 3 is what most "glassmorphism" forgets, and it is the layer
   that stops this looking like frosted plastic.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────── 1. THE GLASS SURFACE ───────────────────── */
.g {
  position: relative;
  isolation: isolate;
  border-radius: var(--g-radius);

  /* 1. body tint — asymmetric, so the pane has an implied light source */
  background:
    linear-gradient(157deg,
      rgb(var(--g-tint) / calc(var(--tint-a) * 1.85)) 0%,
      rgb(var(--g-tint) / calc(var(--tint-a) * 0.55)) 42%,
      rgb(var(--g-tint) / calc(var(--tint-a) * 0.35)) 62%,
      rgb(var(--g-tint) / calc(var(--tint-a) * 1.30)) 100%);

  /* 2. backdrop */
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bright));
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bright));

  /* 3. dispersion + depth (--g-inset carries layer 3; see base.css) */
  box-shadow: var(--g-inset), var(--shadow-lift);
}

/* 4. RIM — the masked gradient border that reads as physical thickness.
      Bright where light hits, dark where it does not. */
.g::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--g-thick);
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(148deg,
    rgb(var(--edge-hi) / .92) 0%,
    rgb(var(--edge-hi) / .22) 18%,
    rgb(var(--edge-hi) / .04) 42%,
    rgb(var(--edge-hi) / .10) 60%,
    rgb(var(--edge-hi) / .55) 88%,
    rgb(var(--edge-hi) / .85) 100%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
          mask-composite: exclude;
}

/* 5. SHEEN — specular highlight. --mx/--my are written by shell.js on
      pointer move, so light genuinely slides across the surface. */
.g::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(180px 180px at var(--mx, 50%) var(--my, 0%),
      rgb(var(--edge-hi) / calc(var(--g-sheen) * .16)) 0%,
      transparent 70%),
    linear-gradient(180deg,
      rgb(var(--edge-hi) / .07) 0%,
      transparent 22%);
  transition: opacity 200ms linear;
}

/* Optional true refraction band, injected as a child by shell.js.
   Displaces the actual pixels behind the rim, rather than faking it. */
.g-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 11px;
  pointer-events: none;
  z-index: 0;
  backdrop-filter: blur(2px) saturate(1.75) brightness(1.13);
  -webkit-backdrop-filter: blur(2px) saturate(1.75) brightness(1.13);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
          mask-composite: exclude;
  opacity: .85;
}
@supports (backdrop-filter: url("#ds-refract")) {
  .g-edge {
    backdrop-filter: blur(1px) url(#ds-refract) saturate(1.5) brightness(1.12);
    -webkit-backdrop-filter: blur(1px) url(#ds-refract) saturate(1.5) brightness(1.12);
  }
}

/* Radius modifiers */
.g-sm { border-radius: var(--g-radius-sm); }
.g-xs { border-radius: var(--g-radius-xs); }
.g-pill { border-radius: var(--r-pill); }

/* ───────────────────── BUTTONS ───────────────────── */
.g-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  background:
    linear-gradient(160deg,
      rgb(var(--g-tint) / calc(var(--tint-a) * 2.1)) 0%,
      rgb(var(--g-tint) / calc(var(--tint-a) * 0.6)) 55%,
      rgb(var(--g-tint) / calc(var(--tint-a) * 1.5)) 100%);
  backdrop-filter: blur(14px) saturate(170%) brightness(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(170%) brightness(1.08);
  box-shadow:
    inset 0 1.5px 7px -4px rgb(var(--refract-cool) / calc(var(--g-disperse) * .9)),
    inset 0 -1.5px 7px -4px rgb(var(--refract-warm) / calc(var(--g-disperse) * .7)),
    inset 0 1px 0 0 rgb(var(--edge-hi) / .3),
    0 1px 2px rgb(var(--edge-lo) / .18),
    0 6px 18px -8px rgb(var(--edge-lo) / .4);
  transition: transform 140ms var(--ease), box-shadow 180ms var(--ease),
              background 180ms var(--ease);
}
.g-btn::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  padding: var(--g-thick); pointer-events: none;
  background: linear-gradient(150deg,
    rgb(var(--edge-hi) / .9), rgb(var(--edge-hi) / .1) 40%,
    rgb(var(--edge-hi) / .06) 60%, rgb(var(--edge-hi) / .7));
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
          mask-composite: exclude;
}
.g-btn::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70px 40px at var(--mx, 50%) var(--my, 0%),
    rgb(var(--edge-hi) / .22), transparent 72%);
  opacity: 0; transition: opacity 200ms linear;
}
.g-btn:hover { transform: translateY(-1px); }
.g-btn:hover::after { opacity: 1; }
.g-btn:active {
  transform: translateY(0) scale(.975);
  box-shadow:
    inset 0 2px 8px -3px rgb(var(--edge-lo) / .3),
    inset 0 1px 0 0 rgb(var(--edge-hi) / .18),
    0 1px 2px rgb(var(--edge-lo) / .2);
}
.g-btn[disabled] { opacity: .38; pointer-events: none; }

.g-btn-accent {
  color: #fff;
  background:
    linear-gradient(160deg, hsl(var(--accent) / .5), hsl(var(--accent) / .22) 60%,
      hsl(var(--accent-2) / .38));
  box-shadow:
    inset 0 1.5px 8px -4px rgb(255 255 255 / .8),
    inset 0 -1px 8px -4px hsl(var(--accent) / .8),
    inset 0 1px 0 0 rgb(255 255 255 / .4),
    0 6px 22px -8px hsl(var(--accent) / .55);
}
.g-btn-danger { color: hsl(var(--danger) / 1); }
.g-btn-sq { width: 30px; padding: 0; border-radius: var(--g-radius-xs); }
.g-btn-lg { height: 36px; padding: 0 18px; font-size: 13px; }

/* Bare tappable glass — for menu bar items and list rows. */
.g-tap {
  position: relative;
  border-radius: var(--g-radius-2xs);
  transition: background 160ms linear, box-shadow 160ms linear;
}
.g-tap:hover {
  background: rgb(var(--edge-hi) / .12);
  box-shadow: inset 0 0 0 .5px rgb(var(--edge-hi) / .18);
}
.g-tap:active { background: rgb(var(--edge-hi) / .2); }
.g-tap.on {
  background: rgb(var(--edge-hi) / .16);
  box-shadow: inset 0 0 0 .5px rgb(var(--edge-hi) / .26);
}

/* ───────────────────── TEXT FIELDS ───────────────────── */
.g-field {
  position: relative;
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--g-radius-xs);
  color: var(--text);
  background: rgb(var(--edge-lo) / .14);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 4px rgb(var(--edge-lo) / .28),
    inset 0 0 0 .5px rgb(var(--edge-hi) / .18),
    inset 0 -1px 6px -3px rgb(var(--refract-warm) / .35);
  outline: none;
  user-select: text;
  cursor: text;
  transition: box-shadow 180ms var(--ease), background 180ms var(--ease);
}
[data-theme="lumen"] .g-field { background: rgb(255 255 255 / .35); }
.g-field::placeholder { color: var(--text-3); }
.g-field:focus {
  background: rgb(var(--edge-lo) / .2);
  box-shadow:
    inset 0 1px 4px rgb(var(--edge-lo) / .3),
    inset 0 0 0 1px hsl(var(--accent) / .55),
    0 0 0 3px hsl(var(--accent) / .14),
    inset 0 -1px 8px -3px rgb(var(--refract-cool) / .5);
}
textarea.g-field { height: auto; padding: 10px 12px; resize: none; line-height: 1.62; }

/* ───────────────────── RANGE SLIDER ───────────────────── */
.g-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
.g-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(90deg, hsl(var(--accent) / .55), hsl(var(--accent-2) / .45))
      no-repeat,
    rgb(var(--edge-lo) / .22);
  background-size: var(--fill, 50%) 100%, 100% 100%;
  box-shadow:
    inset 0 1px 3px rgb(var(--edge-lo) / .34),
    inset 0 0 0 .5px rgb(var(--edge-hi) / .2);
}
.g-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: -5px;
  border-radius: var(--r-round);
  background: linear-gradient(155deg, rgb(255 255 255 / .55), rgb(255 255 255 / .14));
  backdrop-filter: blur(8px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .85),
    inset 0 -1px 4px -1px rgb(var(--refract-warm) / .7),
    inset 0 1px 4px -1px rgb(var(--refract-cool) / .7),
    0 0 0 .5px rgb(var(--edge-hi) / .35),
    0 2px 6px rgb(var(--edge-lo) / .35);
  transition: transform 130ms var(--ease-back);
}
.g-range::-webkit-slider-thumb:hover { transform: scale(1.18); }
.g-range::-webkit-slider-thumb:active { transform: scale(.94); }
.g-range::-moz-range-track {
  height: 6px; border-radius: var(--r-pill); background: rgb(var(--edge-lo) / .22);
}
.g-range::-moz-range-progress {
  height: 6px; border-radius: var(--r-pill); background: hsl(var(--accent) / .55);
}
.g-range::-moz-range-thumb {
  width: 15px; height: 15px; border: 0; border-radius: var(--r-round);
  background: rgb(255 255 255 / .5);
  box-shadow: 0 0 0 .5px rgb(255 255 255 / .5), 0 2px 6px rgb(0 0 0 / .35);
}

/* ───────────────────── SWITCH ───────────────────── */
.g-switch {
  position: relative;
  flex: none;
  width: 42px; height: 24px;
  border-radius: var(--r-pill);
  background: rgb(var(--edge-lo) / .26);
  box-shadow:
    inset 0 1px 4px rgb(var(--edge-lo) / .38),
    inset 0 0 0 .5px rgb(var(--edge-hi) / .18);
  transition: background 240ms var(--ease), box-shadow 240ms var(--ease);
  cursor: pointer;
}
.g-switch i {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: var(--r-round);
  background: linear-gradient(155deg, rgb(255 255 255 / .62), rgb(255 255 255 / .2));
  backdrop-filter: blur(6px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .9),
    inset 0 -1px 4px -1px rgb(var(--refract-warm) / .6),
    0 1px 4px rgb(var(--edge-lo) / .4);
  transition: transform 260ms var(--ease-back);
}
.g-switch.on {
  background: linear-gradient(120deg, hsl(var(--accent) / .55), hsl(var(--accent-2) / .48));
  box-shadow:
    inset 0 1px 5px -2px rgb(255 255 255 / .6),
    inset 0 0 0 .5px rgb(var(--edge-hi) / .3),
    0 0 14px -4px hsl(var(--accent) / .6);
}
.g-switch.on i { transform: translateX(18px); }

/* ───────────────────── SEGMENTED CONTROL ───────────────────── */
.g-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-pill);
  background: rgb(var(--edge-lo) / .18);
  box-shadow:
    inset 0 1px 4px rgb(var(--edge-lo) / .3),
    inset 0 0 0 .5px rgb(var(--edge-hi) / .16);
}
.g-seg button {
  padding: 0 13px; height: 25px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  transition: all 180ms var(--ease);
}
.g-seg button:hover { color: var(--text); }
.g-seg button.on {
  color: var(--text);
  background: linear-gradient(160deg, rgb(var(--g-tint) / .26), rgb(var(--g-tint) / .1));
  box-shadow:
    inset 0 1px 0 rgb(var(--edge-hi) / .4),
    inset 0 -1px 6px -3px rgb(var(--refract-warm) / .6),
    0 1px 3px rgb(var(--edge-lo) / .28);
}

/* ───────────────────── CHECKBOX ───────────────────── */
.g-check {
  flex: none;
  width: 17px; height: 17px;
  border-radius: var(--g-radius-2xs);
  display: grid; place-items: center;
  background: rgb(var(--edge-lo) / .2);
  box-shadow:
    inset 0 1px 3px rgb(var(--edge-lo) / .3),
    inset 0 0 0 .5px rgb(var(--edge-hi) / .24);
  cursor: pointer;
  transition: all 180ms var(--ease);
}
.g-check svg { opacity: 0; transform: scale(.5); transition: all 200ms var(--ease-back); }
.g-check.on {
  background: linear-gradient(150deg, hsl(var(--accent) / .6), hsl(var(--accent-2) / .5));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .45),
    0 0 12px -3px hsl(var(--accent) / .6);
}
.g-check.on svg { opacity: 1; transform: scale(1); }

/* ───────────────────── CARDS / PANELS / MISC ───────────────────── */
.g-card {
  position: relative;
  border-radius: var(--g-radius-sm);
  padding: 14px;
  background: linear-gradient(158deg,
    rgb(var(--g-tint) / calc(var(--tint-a) * 1.5)),
    rgb(var(--g-tint) / calc(var(--tint-a) * .4)) 60%,
    rgb(var(--g-tint) / calc(var(--tint-a) * .9)));
  backdrop-filter: blur(12px) saturate(160%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(160%) brightness(1.05);
  box-shadow:
    inset 0 1px 8px -4px rgb(var(--refract-cool) / .55),
    inset 0 -1px 8px -4px rgb(var(--refract-warm) / .4),
    inset 0 0 0 .5px rgb(var(--edge-hi) / .2),
    0 4px 14px -8px rgb(var(--edge-lo) / .4);
}

.g-sep {
  height: 1px;
  margin: 8px 0;
  background: linear-gradient(90deg,
    transparent, rgb(var(--edge-hi) / .2) 15%, rgb(var(--edge-hi) / .2) 85%, transparent);
  box-shadow: 0 .5px 0 rgb(var(--edge-lo) / .12);
}

.g-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 500;
  color: var(--text-2);
  background: rgb(var(--g-tint) / calc(var(--tint-a) * 1.4));
  backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    inset 0 0 0 .5px rgb(var(--edge-hi) / .22),
    inset 0 1px 5px -3px rgb(var(--refract-cool) / .5);
}

.g-progress {
  height: 5px; border-radius: var(--r-pill); overflow: hidden;
  background: rgb(var(--edge-lo) / .24);
  box-shadow: inset 0 1px 3px rgb(var(--edge-lo) / .34),
              inset 0 0 0 .5px rgb(var(--edge-hi) / .16);
}
.g-progress i {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, hsl(var(--accent) / .7), hsl(var(--accent-2) / .6));
  box-shadow: 0 0 10px hsl(var(--accent) / .5);
  transition: width 200ms linear;
}

/* ───────────────────── PERFORMANCE ─────────────────────
   Stacked backdrop-filters are expensive. While a window is being
   dragged or resized we drop to a cheap glass so motion stays at
   60fps, then restore full optics on release. */
html.perf-lite .g,
html.perf-lite .g-btn,
html.perf-lite .g-card {
  backdrop-filter: blur(9px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(150%) !important;
}
html.perf-lite .g-edge { display: none; }
html.perf-lite .orb { animation-play-state: paused; }