/* stage-33-modal-action-polish: late Warm Glass OS layer for modals, footers, and action icons. */

dialog.modal {
  width: min(45rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: visible;
  border: 0;
  border-radius: var(--focus-radius-xl, 32px);
  background: transparent;
  box-shadow: none;
  color: var(--text-primary, var(--text));
  padding: 0;
}

dialog.modal::backdrop {
  background:
    radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--primary, #5678f5) 13%, transparent), transparent 36rem),
    linear-gradient(180deg, rgba(19, 23, 34, 0.24), rgba(20, 17, 14, 0.34));
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.modal-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  max-height: min(84dvh, 52rem);
  overflow: hidden auto;
  border: 1px solid color-mix(in srgb, var(--surface-border-strong, var(--glass-border-strong)) 78%, transparent);
  border-radius: clamp(24px, 3vw, var(--focus-radius-xl, 32px));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary, #5678f5) 12%, transparent), transparent 22rem),
    radial-gradient(circle at 84% 6%, color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 10%, transparent), transparent 19rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, var(--glass-elevated)) 88%, transparent), color-mix(in srgb, var(--surface-glass, var(--glass-surface)) 84%, transparent));
  box-shadow:
    0 30px 80px rgba(32, 25, 19, 0.18),
    inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
  backdrop-filter: blur(var(--focus-blur-lg, 28px)) saturate(1.08);
  -webkit-backdrop-filter: blur(var(--focus-blur-lg, 28px)) saturate(1.08);
  padding: clamp(1rem, 2vw, 1.35rem);
}

.modal-panel::before {
  position: sticky;
  top: 0;
  z-index: -1;
  display: block;
  height: 0;
  content: "";
  box-shadow: 0 0 80px color-mix(in srgb, var(--primary, #5678f5) 10%, transparent);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: 0 0 clamp(0.82rem, 1.7vw, 1.12rem);
  padding: 0 0 clamp(0.82rem, 1.5vw, 1rem);
  border-bottom: 1px solid color-mix(in srgb, var(--surface-border, var(--glass-border)) 72%, transparent);
}

.modal-head > div {
  display: grid;
  min-width: 0;
  gap: 0.22rem;
}

.modal-head p {
  margin: 0;
  color: var(--text-secondary, var(--muted-strong));
  font-size: clamp(0.78rem, 1vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0;
}

.modal-head h2 {
  margin: 0;
  color: var(--text-primary, var(--text));
  font-size: clamp(1.38rem, 2vw, 1.85rem);
  line-height: 1.12;
  font-weight: 720;
  letter-spacing: 0;
}

.modal-head .round-control {
  width: 3.05rem;
  min-width: 3.05rem;
  height: 3.05rem;
  min-height: 3.05rem;
  border: 1px solid color-mix(in srgb, var(--surface-border-strong, var(--glass-border-strong)) 76%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 18%, color-mix(in srgb, #fff 28%, transparent), transparent 50%),
    color-mix(in srgb, var(--surface-glass, var(--glass-surface)) 72%, transparent);
  box-shadow: var(--focus-shadow-main, var(--shadow-xs)), inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
  color: var(--text-secondary, var(--muted-strong));
}

.modal-head .round-control:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 28%, var(--surface-border-strong, var(--glass-border-strong)));
  background:
    radial-gradient(circle at 34% 18%, color-mix(in srgb, #fff 34%, transparent), transparent 50%),
    color-mix(in srgb, var(--primary, #5678f5) 10%, var(--surface-elevated, var(--glass-elevated)));
  box-shadow: var(--focus-shadow-main, var(--shadow-xs)), 0 12px 28px color-mix(in srgb, var(--primary, #5678f5) 16%, transparent);
  color: var(--text-primary, var(--text));
}

.modal-fields {
  display: grid;
  gap: clamp(0.78rem, 1.4vw, 1rem);
  min-width: 0;
}

.modal-fields :where(input, textarea, select),
.create-fields :where(input, textarea, select),
.wizard-card :where(input, textarea, select) {
  border: 1px solid color-mix(in srgb, var(--surface-border, var(--glass-border)) 84%, transparent);
  border-radius: var(--focus-radius-md, 18px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, var(--glass-elevated)) 42%, transparent), color-mix(in srgb, var(--surface-glass, var(--glass-surface)) 70%, transparent));
  color: var(--text-primary, var(--text));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}

.modal-fields :where(input, textarea, select):focus,
.create-fields :where(input, textarea, select):focus,
.wizard-card :where(input, textarea, select):focus {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 46%, var(--surface-border-strong, var(--glass-border-strong)));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary, #5678f5) 13%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
}

:where(.modal-actions, .wizard-actions) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.72rem;
  margin-top: clamp(0.82rem, 1.7vw, 1.12rem);
}

:where(.modal-actions, .wizard-actions):not(:empty) {
  width: max-content;
  max-width: 100%;
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--surface-border, var(--glass-border)) 70%, transparent);
  border-radius: var(--focus-radius-lg, 24px);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary, #5678f5) 8%, transparent), transparent 10rem),
    color-mix(in srgb, var(--surface-glass, var(--glass-surface)) 72%, transparent);
  box-shadow: var(--focus-shadow-main, var(--shadow-xs)), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
  backdrop-filter: blur(var(--focus-blur-sm, 14px));
  -webkit-backdrop-filter: blur(var(--focus-blur-sm, 14px));
  padding: 0.42rem;
}

:where(.back-image-button, .next-image-button, .save-image-button, .cancel-image-button) {
  display: inline-grid;
  place-items: center;
  width: 2.85rem;
  min-width: 2.85rem;
  height: 2.85rem;
  min-height: 2.85rem;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--primary, #5678f5) 20%, var(--surface-border, var(--glass-border)));
  border-radius: 1rem;
  background:
    radial-gradient(circle at 36% 14%, color-mix(in srgb, #fff 24%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface-glass, var(--glass-surface)) 82%, transparent);
  color: color-mix(in srgb, var(--primary, #5678f5) 78%, var(--text-primary, var(--text)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
  font-size: 0;
  line-height: 0;
  padding: 0;
}

:where(.back-image-button, .next-image-button, .save-image-button, .cancel-image-button)::before {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  background: currentColor;
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: none;
  -webkit-mask: var(--action-icon, var(--icon-back)) center / contain no-repeat;
  mask: var(--action-icon, var(--icon-back)) center / contain no-repeat;
  transform: none;
  transform-origin: center;
}

:where(.back-image-button, .next-image-button, .save-image-button, .cancel-image-button):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 42%, var(--surface-border-strong, var(--glass-border-strong)));
  background:
    radial-gradient(circle at 36% 14%, color-mix(in srgb, #fff 32%, transparent), transparent 52%),
    color-mix(in srgb, var(--primary, #5678f5) 12%, var(--surface-elevated, var(--glass-elevated)));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    0 12px 28px color-mix(in srgb, var(--primary, #5678f5) 18%, transparent);
  color: color-mix(in srgb, var(--primary, #5678f5) 88%, var(--text-primary, var(--text)));
  filter: none;
  transform: translateY(-1px);
}

:where(.back-image-button, .next-image-button, .save-image-button, .cancel-image-button):is(:hover, :focus-visible)::before {
  filter: none;
  transform: scale(1.06);
}

.save-image-button::before {
  --action-icon: var(--icon-save);
}

.back-image-button::before {
  --action-icon: var(--icon-back);
}

.next-image-button::before {
  --action-icon: var(--icon-next);
}

.cancel-image-button::before {
  --action-icon: var(--icon-cancel);
}

.icon-action {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--surface-border, var(--glass-border)) 70%, transparent);
  border-radius: 0.88rem;
  background:
    radial-gradient(circle at 34% 16%, color-mix(in srgb, #fff 22%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface-glass, var(--glass-surface)) 78%, transparent);
  color: color-mix(in srgb, var(--text-secondary, var(--muted-strong)) 84%, var(--text-primary, var(--text)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.18rem 1.18rem;
}

.icon-action::before {
  display: block !important;
  width: 1.18rem;
  height: 1.18rem;
  border: 0;
  border-radius: 0;
  background: currentColor;
  -webkit-mask: var(--micro-icon, var(--icon-note)) center / contain no-repeat;
  mask: var(--micro-icon, var(--icon-note)) center / contain no-repeat;
  transition: transform var(--focus-motion-fast, 140ms cubic-bezier(.2, .8, .2, 1));
}

.icon-action:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 34%, var(--surface-border-strong, var(--glass-border-strong)));
  background:
    radial-gradient(circle at 34% 16%, color-mix(in srgb, #fff 30%, transparent), transparent 52%),
    color-mix(in srgb, var(--primary, #5678f5) 10%, var(--surface-elevated, var(--glass-elevated)));
  color: color-mix(in srgb, var(--primary, #5678f5) 80%, var(--text-primary, var(--text)));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary, #5678f5) 14%, transparent);
  transform: translateY(-1px);
}

.icon-action:is(:hover, :focus-visible)::before {
  transform: scale(1.08);
}

.icon-action.delete:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--focus-accent-coral, #d96b5f) 38%, var(--surface-border-strong, var(--glass-border-strong)));
  color: color-mix(in srgb, var(--focus-accent-coral, #d96b5f) 82%, var(--text-primary, var(--text)));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--focus-accent-coral, #d96b5f) 14%, transparent);
}

#entryModal[data-action="schedule"] .modal-panel {
  width: min(61.5rem, calc(100vw - 2rem));
  max-height: min(86dvh, 52rem);
}

#entryModal[data-action="schedule"] .wizard-card {
  border-radius: var(--focus-radius-lg, 24px);
}

@media (max-width: 760px) {
  dialog.modal {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    margin: auto auto 0;
    padding: 0;
  }

  #entryModal .modal-panel {
    width: min(100%, 34rem);
    max-height: min(92dvh, 50rem);
    margin: auto auto 0;
    border-radius: 30px 30px 0 0;
    padding: 0;
  }

  #entryModal .modal-panel::after {
    order: -1;
    justify-self: center;
    width: 2.75rem;
    height: 0.28rem;
    margin-top: 0.62rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted, var(--muted)) 34%, transparent);
    content: "";
  }

  #entryModal .modal-head {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 0;
    padding: 0.86rem 1rem 0.78rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated, var(--glass-elevated)) 84%, transparent), color-mix(in srgb, var(--surface-elevated, var(--glass-elevated)) 58%, transparent));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  #entryModal .modal-fields {
    padding: 0.94rem 1rem 0.84rem;
  }

  #entryModal :where(.modal-actions, .wizard-actions):not(:empty) {
    position: sticky;
    bottom: 0;
    z-index: 4;
    width: auto;
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated, var(--glass-elevated)) 38%, transparent), color-mix(in srgb, var(--surface-elevated, var(--glass-elevated)) 88%, transparent));
    box-shadow: 0 -18px 48px rgba(32, 25, 19, 0.12);
    padding: 0.74rem 1rem calc(0.82rem + env(safe-area-inset-bottom));
  }

  #entryModal[data-action="schedule"] .modal-panel {
    width: min(100%, 47rem);
    max-height: min(92dvh, 52rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-panel,
  .modal-head .round-control,
  :where(.back-image-button, .next-image-button, .save-image-button, .cancel-image-button),
  .icon-action,
  .icon-action::before {
    transition: none !important;
  }

  .modal-head .round-control:is(:hover, :focus-visible),
  :where(.back-image-button, .next-image-button, .save-image-button, .cancel-image-button):is(:hover, :focus-visible),
  .icon-action:is(:hover, :focus-visible) {
    transform: none;
  }
}