/* GENERATED from frontend/foundations/surfaces.css — do not edit this copy. */
/* Canonical Yoga With Ethan surface primitives.
 * These classes and data attributes are intentionally framework-neutral.
 * Product CSS may size and position them, but should not copy their paint or geometry. */

:root {
  /* Opal Parchment geometry belongs with the opt-in material layer so the
   * dashboard shell does not pay for it before an expressive surface renders. */
  --ywe-shape-frame: 46px;
  --ywe-shape-frame-mobile: 40px;
  --ywe-shape-card: 38px;
  --ywe-shape-card-mobile: 34px;
  --ywe-shape-journey: 56px;
  --ywe-shape-control: 999px;
  --ywe-shape-toggle: 999px;
  --ywe-shape-icon: 50%;
  --ywe-toggle-width: 3rem;
  --ywe-toggle-height: 1.75rem;
  --ywe-toggle-thumb-size: 1.25rem;
  --ywe-toggle-thumb-travel: 23px;
  --ywe-corner-frame: squircle;
  --ywe-corner-control: superellipse(1.25);
  --ywe-corner-toggle: round;
  --ywe-corner-icon: round;
  /* Deployment-local, visually equivalent derivative of the User Manual pearl
   * texture: 720×405 JPEG (~15 KB) instead of a 660 KB cross-origin PNG. */
  --ywe-texture-pearl: url("./opal-pearl.jpg");
  --ywe-surface-opal:
    radial-gradient(circle at 7% -8%, rgba(255, 190, 216, 0.23), transparent 38%),
    radial-gradient(circle at 98% 5%, rgba(183, 211, 255, 0.25), transparent 42%),
    radial-gradient(circle at 52% 108%, rgba(178, 235, 216, 0.20), transparent 45%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(244, 239, 231, 0.74));
  --ywe-surface-opal-control:
    linear-gradient(112deg, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.65) 44%, rgba(255, 255, 255, 0.84)),
    var(--ywe-texture-pearl) 52% 48% / cover no-repeat,
    rgba(250, 247, 242, 0.78);
  --ywe-surface-opal-selected:
    linear-gradient(120deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.72)),
    var(--ywe-texture-pearl) center / cover no-repeat;
  --ywe-surface-opal-toggle-on:
    linear-gradient(112deg, rgba(255, 199, 220, 0.46), rgba(255, 240, 184, 0.42) 35%, rgba(182, 239, 228, 0.46) 66%, rgba(190, 204, 255, 0.50)),
    var(--ywe-texture-pearl) center / cover no-repeat;
  --ywe-edge-opal: rgba(255, 255, 255, 0.88);
  --ywe-edge-control: rgba(67, 57, 52, 0.11);
  --ywe-shadow-opal-frame: 0 24px 58px rgba(48, 38, 33, 0.13), 0 0 30px rgba(187, 174, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  --ywe-shadow-opal-card: 0 12px 30px rgba(48, 38, 33, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

:where(.ywe-opal-frame, [data-ywe-ui="frame"]) {
  border: 1px solid var(--ywe-edge-opal, rgba(255, 255, 255, 0.88));
  border-radius: var(--ywe-shape-frame, 46px);
  corner-shape: var(--ywe-corner-frame, squircle);
  background: var(--ywe-surface-opal, rgba(255, 255, 255, 0.72));
  box-shadow: var(--ywe-shadow-opal-frame, 0 24px 58px rgba(48, 38, 33, 0.13));
}

:where(.ywe-opal-card, [data-ywe-ui="card"]) {
  border: 1px solid var(--ywe-edge-opal, rgba(255, 255, 255, 0.88));
  border-radius: var(--ywe-shape-card, 38px);
  corner-shape: var(--ywe-corner-frame, squircle);
  background: var(--ywe-surface-opal, rgba(255, 255, 255, 0.68));
  box-shadow: var(--ywe-shadow-opal-card, 0 12px 30px rgba(48, 38, 33, 0.09));
}

:where(.ywe-opal-control, [data-ywe-ui="control"]) {
  border: 1px solid var(--ywe-edge-control, rgba(67, 57, 52, 0.11));
  border-radius: var(--ywe-shape-control, 999px);
  corner-shape: var(--ywe-corner-control, superellipse(1.25));
  background: var(--ywe-surface-opal-control, rgba(255, 255, 255, 0.78));
  box-shadow: var(--ywe-shadow-opal-card, 0 2px 7px rgba(26, 23, 18, 0.07));
}

:where(.ywe-opal-control[aria-pressed="true"], [data-ywe-ui="control"][aria-pressed="true"], .ywe-opal-control.is-active) {
  background: var(--ywe-surface-opal-selected, rgba(255, 255, 255, 0.92));
  color: var(--ywe-color-ink, #1a1712);
}

:where(.ywe-toggle-track, [data-ywe-ui="toggle"]) {
  width: var(--ywe-toggle-width, 3rem);
  height: var(--ywe-toggle-height, 1.75rem);
  border: 1px solid var(--ywe-edge-control, rgba(65, 58, 54, 0.10));
  border-radius: var(--ywe-shape-toggle, 999px);
  corner-shape: var(--ywe-corner-toggle, round);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 1px 2px rgba(41, 34, 30, 0.08), 0 1px 0 rgba(255, 255, 255, 0.88);
}

:where(.ywe-toggle-track[aria-pressed="true"], .ywe-toggle-track[aria-checked="true"], .ywe-toggle-track[data-checked], [data-ywe-ui="toggle"][aria-pressed="true"], [data-ywe-ui="toggle"][aria-checked="true"], [data-ywe-ui="toggle"][data-checked]) {
  background: var(--ywe-surface-opal-toggle-on);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.92), 0 2px 8px rgba(89, 66, 113, 0.12);
}

:where(.ywe-icon-control, [data-ywe-ui="icon"]) {
  border: 1px solid var(--ywe-edge-control, rgba(67, 57, 52, 0.11));
  border-radius: var(--ywe-shape-icon, 50%);
  corner-shape: var(--ywe-corner-icon, round);
  background: var(--ywe-surface-opal-control, rgba(255, 255, 255, 0.78));
  box-shadow: var(--ywe-shadow-opal-card, 0 2px 7px rgba(26, 23, 18, 0.07));
}

:where(.ywe-opal-field, [data-ywe-ui="field"]) {
  border: 1px solid var(--ywe-edge-control, rgba(67, 57, 52, 0.11));
  border-radius: var(--ywe-shape-card-mobile, 34px);
  corner-shape: var(--ywe-corner-frame, squircle);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

:where(.ywe-opal-modal, [data-ywe-ui="modal"]) {
  border: 1px solid var(--ywe-edge-opal, rgba(255, 255, 255, 0.88));
  border-radius: var(--ywe-shape-frame, 46px);
  corner-shape: var(--ywe-corner-frame, squircle);
  background: var(--ywe-surface-opal, rgba(253, 250, 245, 0.96));
  box-shadow: var(--ywe-shadow-dialog, 0 12px 40px rgba(26, 23, 18, 0.2));
  backdrop-filter: blur(22px) saturate(1.12);
}

:where(.ywe-scroll-mask, [data-ywe-ui="scroll-mask"]) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 0.7rem, #000 calc(100% - 0.7rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 0.7rem, #000 calc(100% - 0.7rem), transparent 100%);
}

.ywe-render-deferred {
  content-visibility: auto;
  contain-intrinsic-size: 1px 520px;
}

@media (max-width: 760px) {
  :where(.ywe-opal-frame, [data-ywe-ui="frame"], .ywe-opal-modal, [data-ywe-ui="modal"]) {
    border-radius: var(--ywe-shape-frame-mobile, 40px);
  }

  :where(.ywe-opal-card, [data-ywe-ui="card"]) {
    border-radius: var(--ywe-shape-card-mobile, 34px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ywe-opal-control, [data-ywe-ui="control"]) { transition: none !important; }
}