/* Four public components, two material levels. All visual defaults live here. */
:root {
  --ui-main-radius: 48px; --ui-child-radius: 24px;
  --ui-main-thickness: 1; --ui-main-lift: 1;
  --ui-child-thickness: .55; --ui-child-lift: .45;
  --ui-control-size: 48px; --ui-panel-inset: clamp(12px, 4vmin, 24px);
}
.glass-surface {
  --glass-thickness: var(--ui-child-thickness); --glass-lift: var(--ui-child-lift);
  --glass-blur: calc(12px * var(--glass-thickness)); --glass-tint-opacity: .24; --glass-tint-strength: 1;
  --glass-edge-width: calc(20px * var(--glass-thickness));
  --glass-refraction-strength: calc(.14 + .22 * var(--glass-thickness));
  --glass-reflection-strength: calc(.10 + .28 * var(--glass-thickness));
  --glass-fresnel-lightness: .96; --glass-fresnel-width: max(1px, calc(3px * var(--glass-thickness)));
  --glass-occlusion-lightness: .32; --glass-occlusion-width: max(.75px, calc(2px * var(--glass-thickness)));
  --glass-shadow-value: 0 calc(1px + 3px * var(--glass-lift)) calc(2px + 10px * var(--glass-lift)) max(0px, calc(10px * var(--glass-lift) - 2px)) oklch(.10 0 0 / .10);
  --glass-radius: var(--ui-child-radius);
  --light-angle: 0deg; --light-chroma: .004; --light-hue: 85;
  position: relative; border: 0; background: none;
  border-radius: var(--glass-radius); corner-shape: squircle;
}
.glass-surface[data-ui="main-panel"] {
  --glass-thickness: var(--ui-main-thickness);
  --glass-lift: var(--ui-main-lift);
  --glass-radius: var(--ui-main-radius);
}
.glass-surface[data-emphasis="primary"] { --glass-tint-strength: 1.12; }
.glass-surface > .glass-layer {
  position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit;
  pointer-events: none;
}
.glass-surface > [data-glass-layer="shadow"] {
  box-shadow: var(--glass-shadow-value);
  transition: box-shadow 120ms ease;
}
.glass-surface > [data-glass-layer="occlusion"] {
  inset: -1px;
  box-shadow: 0 0 var(--glass-occlusion-width) .5px oklch(var(--glass-occlusion-lightness) 0 0 / .22);
}
.glass-surface > [data-glass-layer="blur"] { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
.glass-surface > [data-glass-layer="refraction"] {
  /* Alpha compositing keeps the same material in native modal top layers and scene panels. */
  background: linear-gradient(calc(var(--light-angle) + 180deg),
    oklch(.08 0 0 / calc(var(--glass-refraction-strength) * .55)) 0%,
    oklch(.08 0 0 / calc(var(--glass-refraction-strength) * .25)) 18%,
    oklch(.08 0 0 / 0) 56%,
    oklch(.96 0 0 / calc(var(--glass-refraction-strength) * .15)) 93%,
    oklch(.96 0 0 / calc(var(--glass-refraction-strength) * .3)) 100%);
}
.glass-surface > [data-glass-layer="reflection"] {
  background: linear-gradient(calc(var(--light-angle) + 180deg),
    oklch(.96 0 0 / calc(var(--glass-reflection-strength) * .60)) 0%,
    oklch(.96 0 0 / calc(var(--glass-reflection-strength) * .32)) 1.25%,
    oklch(.96 0 0 / calc(var(--glass-reflection-strength) * .12)) 3%,
    oklch(.96 0 0 / 0) 7%);
}
@supports ((mask-image: linear-gradient(oklch(1 0 0), oklch(1 0 0))) or (-webkit-mask-image: linear-gradient(oklch(1 0 0), oklch(1 0 0)))) {
  .glass-surface > :is([data-glass-layer="refraction"], [data-glass-layer="reflection"]) {
    /* Mask alpha shapes the edge field; it does not composite an authored color. */
    -webkit-mask:
      linear-gradient(to bottom, oklch(1 0 0) 0, oklch(1 0 0 / 0) var(--glass-edge-width)) top / 100% 50% no-repeat,
      linear-gradient(to top, oklch(1 0 0) 0, oklch(1 0 0 / 0) var(--glass-edge-width)) bottom / 100% 50% no-repeat,
      linear-gradient(to right, oklch(1 0 0) 0, oklch(1 0 0 / 0) var(--glass-edge-width)) left / 50% 100% no-repeat,
      linear-gradient(to left, oklch(1 0 0) 0, oklch(1 0 0 / 0) var(--glass-edge-width)) right / 50% 100% no-repeat;
    -webkit-mask-composite: source-over;
    mask:
      linear-gradient(to bottom, oklch(1 0 0) 0, oklch(1 0 0 / 0) var(--glass-edge-width)) top / 100% 50% no-repeat,
      linear-gradient(to top, oklch(1 0 0) 0, oklch(1 0 0 / 0) var(--glass-edge-width)) bottom / 100% 50% no-repeat,
      linear-gradient(to right, oklch(1 0 0) 0, oklch(1 0 0 / 0) var(--glass-edge-width)) left / 50% 100% no-repeat,
      linear-gradient(to left, oklch(1 0 0) 0, oklch(1 0 0 / 0) var(--glass-edge-width)) right / 50% 100% no-repeat;
    mask-composite: add;
  }
}
.glass-surface > [data-glass-layer="tint"] { background: oklch(.4 calc(var(--light-chroma) * var(--glass-tint-strength)) var(--light-hue) / calc(var(--glass-tint-opacity) * var(--glass-tint-strength))); }
.glass-surface > [data-glass-layer="fresnel"] {
  box-shadow: inset 0 0 var(--glass-fresnel-width) 0 oklch(var(--glass-fresnel-lightness) 0 0 / .14);
}
.glass-surface > .glass-content { position: relative; z-index: 1; border-radius: inherit; corner-shape: inherit; }

.surface-button {
  display: inline-grid; place-items: center; min-height: var(--ui-control-size); min-width: var(--ui-control-size); padding: 10px 18px;
  color: oklch(96% 0 0); transition: transform 120ms ease; -webkit-tap-highlight-color: oklch(0 0 0 / 0);
}
.surface-button[data-shape="circle"] { --glass-radius: 50%; width: var(--ui-control-size); height: var(--ui-control-size); flex: none; padding: 0; corner-shape: round; }
.surface-button-content { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; font-size: .875rem; font-weight: 550; }
.surface-button svg { width: 19px; height: 19px; }
.surface-button[data-shape="squircle"] .surface-button-content > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.surface-button:focus-visible { outline: 2px solid oklch(.96 0 0); outline-offset: 2px; }
.surface-button:not(:disabled):hover > [data-glass-layer="tint"] { filter: brightness(1.08); }
.surface-button:not(:disabled):active { --glass-shadow-value: 0 1px 1px oklch(.10 0 0 / .1); --glass-fresnel-lightness: .90; transform: translateY(.5px) scale(.99); }
.surface-button[aria-pressed="true"] { --glass-fresnel-lightness: .985; }
.surface-button:disabled { color: oklch(72% 0 0); cursor: default; }
.surface-button:disabled { --glass-shadow-value: 0 1px 2px oklch(.10 0 0 / .06); --glass-occlusion-lightness: .52; --glass-reflection-strength: .05; --glass-tint-strength: .25; }

.surface-field, .surface-field > .glass-content { display: block; min-width: 0; }
.surface-field > .glass-content > :is(input, select, textarea) { position: relative; display: block; width: 100%; min-width: 0; min-height: var(--ui-control-size); padding: 10px; border: 0; border-radius: inherit; corner-shape: inherit; background: transparent; color: inherit; font: inherit; font-size: 1rem; }
.surface-field > .glass-content > textarea { min-height: 6rem; resize: vertical; }
.surface-field:has(:is(input, select, textarea):focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.surface-field > .glass-content > :focus-visible { outline: none; }
.surface-field > .glass-content > :disabled { color: var(--muted); cursor: default; }
.glass-surface summary { cursor: pointer; min-height: var(--ui-control-size); padding-block: 10px; }
input:is([type="checkbox"], [type="radio"], [type="range"]) { accent-color: var(--accent); }

@media (prefers-reduced-motion: reduce) { .surface-button, .surface-button > [data-glass-layer="shadow"] { transition: none; } }
@supports not (backdrop-filter: blur(8px)) {
  .glass-surface { background: var(--surface); }
  .glass-surface > .glass-layer { display: none; }
}
@media (forced-colors: active) {
  :root { --scene-fill: Canvas; --ink: CanvasText; --muted: CanvasText; --line: CanvasText; --surface: Canvas; --accent: Highlight; --scrollbar-thumb: CanvasText; }
  .glass-surface { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .glass-surface > .glass-layer { display: none; }
  .surface-button:disabled { color: GrayText; }
}