/* VAIEV UI v8 — the three materials and the tactile layer.
   Plane  opaque tonal surface for content (lists, letters, tables).
   Plate  thick tinted glass for content cards: at least --plate-alpha opaque, so the contrast check holds
          over any background; a light edge on top and the field glowing faintly through the rim.
   Lens   thin glass for controls only (bars, chips on images, sheets, the Ask panel). Never paragraphs.
   Meso   "mesomorph", the tactile middle between flat and 3D: wells sink in, beads stand up, a press
          squishes into a squircle. Inner light and inner shade only; no outer drop shadows. */

.plane { background: var(--surface-container); color: var(--on-surface); border-radius: var(--shape-xl); }
.plane-low { background: var(--surface-container-low); }
.plane-high { background: var(--surface-container-high); color: var(--on-high, var(--on-surface)); }

.plate {
  --tone: var(--surface-container);
  position: relative; isolation: isolate;
  color: var(--on-plate, var(--on-surface));
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.07), transparent 42%),
    color-mix(in oklch, var(--tone) calc(var(--plate-alpha) * 100%), transparent);
  -webkit-backdrop-filter: blur(var(--plate-blur)) saturate(1.2);
  backdrop-filter: blur(var(--plate-blur)) saturate(1.2);
  border-radius: var(--shape-xl);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.16), inset 0 0 0 1px oklch(1 0 0 / 0.05);
}
/* post tones (any brand with --post-* tokens) */
.plate[data-tone] { --on-plate: var(--post-ink); }
.plate[data-tone="pine"]  { --tone: var(--post-pine); }
.plate[data-tone="lake"]  { --tone: var(--post-lake); }
.plate[data-tone="wine"]  { --tone: var(--post-wine); }
.plate[data-tone="clay"]  { --tone: var(--post-clay); }
.plate[data-tone="dusk"]  { --tone: var(--post-dusk); }
.plate[data-tone="moss"]  { --tone: var(--post-moss); }
.plate[data-tone="slate"] { --tone: var(--post-slate); }
.plate[data-tone="ember"] { --tone: var(--post-ember); }
.plate[data-tone="op"]    { --tone: var(--post-op); }
.plate[data-tone] .meta, .plate[data-tone] .muted { color: color-mix(in oklch, var(--post-ink) calc(var(--meta-alpha) * 100%), transparent); }

.lens {
  background: var(--lens);
  -webkit-backdrop-filter: blur(var(--lens-blur)) saturate(var(--lens-sat));
  backdrop-filter: blur(var(--lens-blur)) saturate(var(--lens-sat));
  box-shadow: inset 0 1px 0 var(--lens-rim), inset 0 0 0 1px color-mix(in oklch, var(--lens-rim) 45%, transparent);
  color: var(--on-surface);
}
/* without backdrop blur the glass would read as a smudge: make it nearly solid instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lens { background: color-mix(in oklch, var(--surface) 88%, var(--on-surface)); }
  .plate { background: var(--tone); }
}
@media (prefers-reduced-transparency: reduce) {
  .lens { background: color-mix(in oklch, var(--surface) 92%, var(--on-surface)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .plate { background: var(--tone); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .field::before, .field::after { opacity: 0.4; }
}

/* squircles where the browser can draw them (Chromium 139+); the round radius stays as the fallback */
@supports (corner-shape: squircle) {
  .plate, .plane, .object-card { corner-shape: squircle; border-radius: calc(var(--shape-xl) * 1.6); }
}

/* ── mesomorph ── */
.well { /* a field or a switch track: pressed into the surface */
  background: color-mix(in oklch, var(--on-surface) 6%, transparent);
  box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.18), inset 0 -1px 0 oklch(1 0 0 / 0.08);
}
.bead { /* a knob or the selected segment: standing out of the surface */
  background: color-mix(in oklch, var(--surface-container-high) 70%, oklch(1 0 0 / 0.35));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.55), inset 0 -1px 0 oklch(0 0 0 / 0.08), 0 0 0 1px oklch(0 0 0 / 0.04);
}
/* shape = state: a pressable pill squishes into a squircle while pressed */
.press {
  transition: transform var(--dur-spatial-fast) var(--spring-spatial-fast), border-radius var(--dur-spatial-fast) var(--spring-spatial-fast),
              background-color var(--dur-effects) var(--spring-effects), color var(--dur-effects) var(--spring-effects);
}
.press:active { transform: scale(0.97); border-radius: var(--shape-squircle); }