/* One quiet frosted backdrop; the content itself remains unfiltered. */
dialog:is(.project-dialog, .text-dialog) {
  --dialog-glass-surface: rgb(255 255 255 / .78);
  --dialog-glass-sheen: rgb(255 255 255 / .34);
  --dialog-glass-edge: rgb(255 255 255 / .66);
  --dialog-glass-shadow: rgb(15 20 24 / .2);
  --dialog-glass-toolbar: rgb(255 255 255 / .18);
  --muted: #50514b;
  --reading: #373a35;
  border-color: var(--dialog-glass-edge);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7),
    inset 0 -1px 0 rgb(255 255 255 / .15),
    0 28px 90px var(--dialog-glass-shadow), 0 4px 18px rgb(0 0 0 / .06);
}

html[data-theme="dark"] dialog:is(.project-dialog, .text-dialog) {
  --dialog-glass-surface: rgb(18 21 23 / .8);
  --dialog-glass-sheen: rgb(255 255 255 / .055);
  --dialog-glass-edge: rgb(255 255 255 / .22);
  --dialog-glass-shadow: rgb(0 0 0 / .46);
  --dialog-glass-toolbar: rgb(255 255 255 / .025);
  --muted: #c0beb6;
  --reading: #dedbd2;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14),
    inset 0 -1px 0 rgb(255 255 255 / .035),
    0 28px 90px var(--dialog-glass-shadow), 0 4px 18px rgb(0 0 0 / .2);
}

/* These selectors also override the opaque scrim used by the card flip. */
:root dialog:is(.project-dialog, .text-dialog)::backdrop {
  --dialog-glass-scrim: rgb(22 26 30 / .14);
  --dialog-glass-blur: 24px;
  background: var(--dialog-glass-scrim);
  opacity: 1;
}

html[data-theme="dark"] dialog:is(.project-dialog, .text-dialog)::backdrop {
  --dialog-glass-scrim: rgb(0 0 0 / .22);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root dialog:is(.project-dialog, .text-dialog)::backdrop {
    -webkit-backdrop-filter: blur(var(--dialog-glass-blur)) saturate(112%);
    backdrop-filter: blur(var(--dialog-glass-blur)) saturate(112%);
  }

  dialog:is(.project-dialog, .text-dialog) {
    background: linear-gradient(135deg, var(--dialog-glass-sheen), transparent 48%),
      var(--dialog-glass-surface);
  }

  dialog:is(.project-dialog, .text-dialog) > .dialog-shell {
    background: transparent;
  }

  dialog:is(.project-dialog, .text-dialog) > .dialog-toolbar {
    background: var(--dialog-glass-toolbar);
    border-bottom-color: color-mix(in srgb, var(--ink) 14%, transparent);
  }
}

/* The moving reverse face needs its own stable surface during the 3D flip. */
dialog:is(.project-dialog, .text-dialog) .project-card-transition__face--back {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 700px) {
  dialog:is(.project-dialog, .text-dialog) {
    --dialog-glass-surface: rgb(255 255 255 / .84);
  }
  html[data-theme="dark"] dialog:is(.project-dialog, .text-dialog) {
    --dialog-glass-surface: rgb(18 21 23 / .84);
  }
  :root dialog:is(.project-dialog, .text-dialog)::backdrop {
    --dialog-glass-blur: 18px;
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  dialog:is(.project-dialog, .text-dialog),
  dialog:is(.project-dialog, .text-dialog) > .dialog-toolbar {
    background: var(--paper);
    border-color: var(--line);
    box-shadow: none;
  }
  :root dialog:is(.project-dialog, .text-dialog)::backdrop {
    background: rgb(0 0 0 / .4);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  dialog:is(.project-dialog, .text-dialog),
  dialog:is(.project-dialog, .text-dialog) > .dialog-toolbar,
  dialog:is(.project-dialog, .text-dialog) .project-card-transition__face--back {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }
  :root dialog:is(.project-dialog, .text-dialog)::backdrop {
    background: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}