/* One glass for every Create surface (owner 2026-10-05).
 *
 * "This modal here and the preview pills and ALL elements modal on the create
 * app should be the blur like the nav side bar." The sidebar's material
 * (.dash-nav::before in styles.css) is the reference: a 38% paper fill, the
 * --dash-glass sheen, blur(22px) saturate(1.7), a 70% white hairline and the
 * desk's soft inset. Those values live once, below, on :root, so the dialogs
 * (appended to <body>, outside #view-dashboard) read the same tokens as the
 * editor surfaces.
 *
 * styles.css turns every backdrop-filter inside .dash-editor off with
 * !important ("a scrolling editor is one paper surface, not hundreds of
 * nested blur passes"). That stays true for everything nested: only the outer
 * surfaces listed here get the blur back, so each one is a single pass over the
 * wallpaper, never glass on glass.
 *
 * Loaded after the desk sheets and before wedding-phone.css.
 */
:root {
  --create-glass-fill: color-mix(in srgb, var(--paper, #f6efe6) 38%, transparent);
  --create-glass-sheen:
    radial-gradient(160% 90% at 18% -40%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(185deg, rgba(255, 248, 236, 0.16) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(255, 248, 236, 0.10) 100%);
  --create-glass-blur: blur(22px) saturate(1.7);
  --create-glass-edge: color-mix(in srgb, #ffffff 70%, transparent);
  --create-glass-inset:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -8px 16px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  --create-glass-drop: 0 10px 28px rgba(16, 12, 10, 0.1);
  /* Inner cards sit on the glass, so they tint it instead of blurring again. */
  --create-glass-card: color-mix(in srgb, #ffffff 30%, transparent);
  /* A modal's scrim stays light so its glass still shows the desk beneath. */
  --create-glass-scrim: rgba(21, 39, 29, 0.22);
}

/* The editor panel, the preview's pill bars, the preview frame, and every
   desk modal. */
#view-dashboard .dash-editor .ed-panel,
#view-dashboard .dash-editor .ed-bar :is(.ed-devices, .fw-pager),
#view-dashboard .dash-editor .ed-canvas,
.fw-editor-dialog,
.ws-background-gallery,
#view-dashboard #wsIntroPreview,
#view-dashboard #wsIntroPreview[open],
.onboard-sheet,
.help-sheet-card {
  border: 1px solid var(--create-glass-edge);
  background-color: var(--create-glass-fill);
  background-image: var(--create-glass-sheen);
  box-shadow: var(--create-glass-inset), var(--create-glass-drop);
  -webkit-backdrop-filter: var(--create-glass-blur) !important;
  backdrop-filter: var(--create-glass-blur) !important;
}
/* Modals lift a little further off the desk than the sidebar does. */
.fw-editor-dialog,
.ws-background-gallery,
#view-dashboard #wsIntroPreview,
#view-dashboard #wsIntroPreview[open],
.onboard-sheet,
.help-sheet-card {
  box-shadow: var(--create-glass-inset), 0 30px 90px rgba(20, 37, 30, 0.22);
}
.fw-editor-dialog::backdrop,
.ws-background-gallery::backdrop,
#view-dashboard #wsIntroPreview::backdrop,
dialog.onboard::backdrop {
  background: var(--create-glass-scrim);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.help-sheet { background: var(--create-glass-scrim); }

/* The Digital gifts frame joins the same glass (owner 2026-10-11: "a container
   which is not blurred ... find it everywhere for the create app and then sweep
   it"). styles.css gave .ws-gift-stage the glass edge and inset but left it
   clear, so My gifts, Bouquets, Simple, Advanced and the Desk sat on the sharp
   wallpaper. Budget GPUs keep the clear frame they had: with every blur off, a
   tint alone would only grey the plate. */
#view-dashboard .ws-gift-stage {
  background-color: var(--create-glass-fill);
  background-image: var(--create-glass-sheen);
  -webkit-backdrop-filter: var(--create-glass-blur);
  backdrop-filter: var(--create-glass-blur);
}
html[data-preview-tier="low"] #view-dashboard .ws-gift-stage {
  background-color: transparent;
  background-image: none;
}

/* Cards and controls inside a glass surface: a light tint, no second blur. */
#view-dashboard .dash-editor .ed-panel :is(.fw-design-trigger, .ws-background-launch),
.ws-background-gallery :is(.ws-background-choice, .ws-background-gallery-head button),
.fw-dialog-close {
  border-color: var(--create-glass-edge);
  background: var(--create-glass-card);
  box-shadow: var(--create-glass-inset);
}
.ws-background-gallery .ws-background-choice[aria-pressed="true"] {
  border-color: #2f4b32;
  background: color-mix(in srgb, #ffffff 52%, transparent);
}
/* Sticky headings inside a scrolling modal need a bed for the rows passing
   under them; a stronger paper wash does that without a nested blur. */
.ws-background-gallery .ws-background-gallery-head {
  background: color-mix(in srgb, var(--paper, #f6efe6) 86%, transparent);
  border-bottom-color: var(--create-glass-edge);
}
/* The phone's full-screen collection keeps its sticky heading (wedding-phone.css,
   which loads later; `body` outranks it) on the same paper wash. */
html[data-desk-device="phone"] body :is(.fw-design-collection, .fw-guest-experience) .fw-dialog-heading {
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper, #f6efe6) 86%, transparent) 82%, transparent);
}

/* Budget GPUs drop every blur (styles.css, data-preview-tier="low"), so these
   surfaces fall back to near-solid paper instead of turning see-through. */
html[data-preview-tier="low"] :is(
  #view-dashboard .dash-editor .ed-panel,
  #view-dashboard .dash-editor .ed-bar :is(.ed-devices, .fw-pager),
  .fw-editor-dialog,
  .ws-background-gallery,
  #view-dashboard #wsIntroPreview,
  #view-dashboard #wsIntroPreview[open],
  .onboard-sheet,
  .help-sheet-card
) {
  background-color: color-mix(in srgb, var(--paper, #f6efe6) 96%, transparent);
}

/* Guest & Send joins the same glass (owner 2026-10-07: "it's the blur of the old
   UI, not the new UI"). styles.css gave this sheet Home's 2px vellum; the sheet
   now takes the sidebar's one blur pass, and everything inside it tints that
   glass instead of frosting again. */
#view-dashboard .dash-sheet[data-pane="guests"] {
  --dash-blur: none;
  --dash-glass: none;
  --dash-hair: var(--create-glass-edge);
  border-color: var(--create-glass-edge);
  box-shadow: var(--create-glass-drop);
}
#view-dashboard .dash-sheet[data-pane="guests"]::before {
  background-color: var(--create-glass-fill);
  background-image: var(--create-glass-sheen);
  box-shadow: var(--create-glass-inset);
  -webkit-backdrop-filter: var(--create-glass-blur) !important;
  backdrop-filter: var(--create-glass-blur) !important;
}
#view-dashboard .dash-sheet[data-pane="guests"] :is(
  #wsGeneralSend,
  #wsGuestStats,
  .ws-filters .ws-search,
  .ws-filters > .btn,
  #wsGuestTable .ws-numbered-person,
  .ws-send-panel
) {
  border-color: var(--create-glass-edge);
  background: var(--create-glass-card);
  box-shadow: var(--create-glass-inset);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#view-dashboard .dash-sheet[data-pane="guests"] #wsGuestTable > .ws-group {
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#view-dashboard .dash-sheet[data-pane="guests"] #wsGuestTable .ws-numbered-person .ws-send-panel {
  background: none;
  border: 0;
  box-shadow: none;
}
html[data-preview-tier="low"] #view-dashboard .dash-sheet[data-pane="guests"]::before {
  background-color: color-mix(in srgb, var(--paper, #f6efe6) 96%, transparent);
}