/* stage-56-quick-form-parity: frequent entry forms aligned with the Warm Glass OS wizard layer. */

.quick-form-shell-surface {
  border-radius: var(--focus-radius-lg, 24px);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary, #5678f5) 10%, transparent), transparent 13rem),
    color-mix(in srgb, var(--surface-glass, rgba(255, 255, 255, 0.42)) 72%, transparent);
}

.quick-form-primary-field {
  border-radius: var(--focus-radius-lg, 24px);
}

.quick-form-voice-pill {
  border-radius: 999px;
}

.quick-form-action-bar {
  justify-content: flex-end;
}

#entryModal[data-action="reminder"] .modal-panel,
#entryModal[data-action="plan"] .modal-panel,
#entryModal[data-action="notes"] .modal-panel,
#entryModal[data-action="birthday"] .modal-panel {
  width: min(52rem, calc(100vw - 2rem));
  max-height: min(86dvh, 52rem);
  border-radius: var(--focus-radius-xl, 32px);
  overflow: hidden auto;
  background:
    radial-gradient(circle at 11% 0%, color-mix(in srgb, var(--primary, #5678f5) 13%, transparent), transparent 22rem),
    radial-gradient(circle at 91% 7%, color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 10%, transparent), transparent 18rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255, 255, 255, 0.55)) 88%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255, 255, 255, 0.42)) 82%, transparent));
  box-shadow:
    0 30px 80px rgba(32, 25, 19, 0.18),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}

#entryModal[data-action="plan"] .modal-panel {
  width: min(46rem, calc(100vw - 2rem));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--focus-accent-sage, #5f9073) 16%, transparent), transparent 21rem),
    radial-gradient(circle at 92% 7%, color-mix(in srgb, var(--primary, #5678f5) 9%, transparent), transparent 17rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255, 255, 255, 0.55)) 88%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255, 255, 255, 0.42)) 82%, transparent));
}

#entryModal[data-action="notes"] .modal-panel {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 15%, transparent), transparent 21rem),
    radial-gradient(circle at 92% 7%, color-mix(in srgb, var(--primary, #5678f5) 8%, transparent), transparent 17rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255, 255, 255, 0.55)) 88%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255, 255, 255, 0.42)) 82%, transparent));
}

#entryModal[data-action="birthday"] .modal-panel {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--label-birthday, #d96b5f) 14%, transparent), transparent 21rem),
    radial-gradient(circle at 92% 7%, color-mix(in srgb, var(--focus-accent-rose, #c96a87) 11%, transparent), transparent 17rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255, 255, 255, 0.55)) 88%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255, 255, 255, 0.42)) 82%, transparent));
}

#entryModal[data-action="reminder"] .modal-fields,
#entryModal[data-action="plan"] .modal-fields,
#entryModal[data-action="notes"] .modal-fields,
#entryModal[data-action="birthday"] .modal-fields {
  gap: clamp(12px, 1.5vw, 18px);
}

#entryModal[data-action="reminder"] .focus-reminder-shell,
#entryModal[data-action="plan"] .modal-fields > label,
#entryModal[data-action="notes"] .managed-shell,
#entryModal[data-action="birthday"] .managed-shell {
  display: grid;
  gap: clamp(12px, 1.5vw, 18px);
}

#entryModal[data-action="reminder"] .focus-reminder-field,
#entryModal[data-action="plan"] .smart-reminder-field,
#entryModal[data-action="notes"] .focus-note-compose,
#entryModal[data-action="birthday"][data-mode="create"] .focus-birthday-compose {
  border: 1px solid color-mix(in srgb, var(--surface-border, rgba(255, 255, 255, 0.22)) 78%, transparent);
  border-radius: var(--focus-radius-lg, 24px);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, #fff 17%, transparent), transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255, 255, 255, 0.55)) 54%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255, 255, 255, 0.42)) 70%, transparent));
  box-shadow:
    0 14px 36px rgba(58, 43, 30, 0.08),
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
  padding: clamp(14px, 1.7vw, 18px);
}

#entryModal[data-action="plan"] .smart-reminder-field > span {
  color: var(--text-secondary, #6f655e);
  font-size: 0.9rem;
  font-weight: 750;
}

#entryModal[data-action="reminder"] .smart-reminder-input,
#entryModal[data-action="plan"] .smart-reminder-input {
  position: relative;
  display: grid;
}

#entryModal[data-action="reminder"] .focus-reminder-input textarea,
#entryModal[data-action="plan"] .smart-reminder-input textarea,
#entryModal[data-action="notes"] .focus-note-field textarea {
  width: 100%;
  border-radius: var(--focus-radius-md, 18px);
  padding: 1rem 3.35rem 3.15rem 1rem;
  font-size: 1.02rem;
  line-height: 1.48;
  resize: vertical;
}

#entryModal[data-action="plan"] .smart-reminder-input textarea {
  min-height: clamp(7.6rem, 22dvh, 10.8rem);
}

#entryModal[data-action="notes"] .focus-note-field textarea {
  min-height: clamp(9rem, 28dvh, 13rem);
}

#entryModal[data-action="reminder"] .focus-reminder-input .reminder-clear,
#entryModal[data-action="plan"] .smart-reminder-input .reminder-clear {
  right: 0.75rem;
  bottom: 0.75rem;
  width: 2.45rem;
  min-width: 2.45rem;
  height: 2.45rem;
  min-height: 2.45rem;
  border-radius: 0.9rem;
}

#entryModal[data-action="reminder"] .focus-reminder-details {
  gap: clamp(12px, 1.6vw, 18px);
}

#entryModal[data-action="reminder"] .focus-reminder-date input,
#entryModal[data-action="reminder"] .focus-reminder-time input,
#entryModal[data-action="birthday"] .focus-birthday-field input {
  min-height: 3.05rem;
}

#entryModal[data-action="reminder"] .voice-box,
#entryModal[data-action="plan"] .voice-box,
#entryModal[data-action="birthday"] .voice-box {
  width: max-content;
  max-width: 100%;
  margin-top: 0.2rem;
  border: 1px solid color-mix(in srgb, var(--surface-border, rgba(255, 255, 255, 0.22)) 62%, transparent);
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 0%, color-mix(in srgb, #fff 24%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface-glass, rgba(255, 255, 255, 0.42)) 62%, transparent);
  box-shadow:
    0 12px 30px color-mix(in srgb, var(--primary, #5678f5) 7%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
  padding: 0.35rem 0.45rem;
}

#entryModal[data-action="reminder"] .voice-head strong,
#entryModal[data-action="plan"] .voice-head strong,
#entryModal[data-action="birthday"] .voice-head strong,
#entryModal[data-action="reminder"] #voiceText,
#entryModal[data-action="plan"] #voiceText,
#entryModal[data-action="birthday"] #voiceText,
#entryModal[data-action="reminder"] #parseVoiceButton,
#entryModal[data-action="plan"] #parseVoiceButton,
#entryModal[data-action="birthday"] #parseVoiceButton {
  display: none;
}

#entryModal[data-action="reminder"] #voiceButton,
#entryModal[data-action="plan"] #voiceButton,
#entryModal[data-action="birthday"] #voiceButton {
  min-height: 2.45rem;
  border-radius: 999px;
  padding: 0 0.95rem;
  font-weight: 750;
}

#entryModal[data-action="notes"] .focus-note-card,
#entryModal[data-action="birthday"] .focus-birthday-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: var(--focus-radius-lg, 24px);
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary, #5678f5) 7%, transparent), transparent 12rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255, 255, 255, 0.55)) 58%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255, 255, 255, 0.42)) 54%, transparent));
}

#entryModal[data-action="notes"] .focus-note-empty,
#entryModal[data-action="birthday"] .focus-birthday-empty {
  border-radius: var(--focus-radius-lg, 24px);
}

#entryModal[data-action="birthday"][data-mode="create"] .focus-birthday-compose {
  grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 0.72fr);
  align-items: end;
}

#entryModal[data-action="notes"][data-mode="create"] .records-list,
#entryModal[data-action="notes"][data-mode="edit"] .records-list,
#entryModal[data-action="birthday"][data-mode="create"] .records-list,
#entryModal[data-action="birthday"][data-mode="edit"] .records-list {
  display: none;
}

#entryModal[data-action="reminder"] .modal-actions,
#entryModal[data-action="plan"] .modal-actions,
#entryModal[data-action="notes"] .modal-actions,
#entryModal[data-action="birthday"][data-mode="create"] .modal-actions {
  align-items: center;
  justify-content: flex-end;
  margin-top: clamp(8px, 1.2vw, 12px);
}

#entryModal[data-action="reminder"] .modal-actions .cancel-image-button,
#entryModal[data-action="plan"] .modal-actions .cancel-image-button,
#entryModal[data-action="notes"] .modal-actions .cancel-image-button,
#entryModal[data-action="birthday"][data-mode="create"] .modal-actions .cancel-image-button {
  display: none !important;
}

#entryModal[data-action="notes"][data-mode="list"] .modal-actions,
#entryModal[data-action="birthday"][data-mode="list"] .modal-actions {
  display: none;
}

:root[data-theme="dark"] #entryModal[data-action="reminder"] .modal-panel,
:root[data-theme="dark"] #entryModal[data-action="plan"] .modal-panel,
:root[data-theme="dark"] #entryModal[data-action="notes"] .modal-panel,
:root[data-theme="dark"] #entryModal[data-action="birthday"] .modal-panel {
  background:
    radial-gradient(circle at 11% 0%, color-mix(in srgb, var(--primary, #6f8cff) 13%, transparent), transparent 22rem),
    radial-gradient(circle at 91% 7%, color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 7%, transparent), transparent 18rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, #1a2030) 70%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255, 255, 255, 0.06)) 92%, transparent));
}

:root[data-theme="dark"] #entryModal[data-action="reminder"] .focus-reminder-field,
:root[data-theme="dark"] #entryModal[data-action="plan"] .smart-reminder-field,
:root[data-theme="dark"] #entryModal[data-action="notes"] .focus-note-compose,
:root[data-theme="dark"] #entryModal[data-action="birthday"][data-mode="create"] .focus-birthday-compose,
:root[data-theme="dark"] #entryModal[data-action="notes"] .focus-note-card,
:root[data-theme="dark"] #entryModal[data-action="birthday"] .focus-birthday-card {
  border-color: color-mix(in srgb, var(--primary, #6f8cff) 17%, rgba(255, 255, 255, 0.10));
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary, #6f8cff) 10%, transparent), transparent 13rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.044));
}

@media (max-width: 760px) {
  #entryModal[data-action="reminder"],
  #entryModal[data-action="plan"],
  #entryModal[data-action="notes"],
  #entryModal[data-action="birthday"] {
    align-items: end;
    padding: 0;
  }

  #entryModal[data-action="reminder"] .modal-panel,
  #entryModal[data-action="plan"] .modal-panel,
  #entryModal[data-action="notes"] .modal-panel,
  #entryModal[data-action="birthday"] .modal-panel {
    width: min(100%, 34rem);
    max-height: min(92dvh, 50rem);
    margin: auto auto 0;
    border-radius: 30px 30px 0 0;
    padding: 0;
  }

  #entryModal[data-action="reminder"] .modal-fields,
  #entryModal[data-action="plan"] .modal-fields,
  #entryModal[data-action="notes"] .modal-fields,
  #entryModal[data-action="birthday"] .modal-fields {
    padding: 0.92rem 1rem 0.84rem;
  }

  #entryModal[data-action="reminder"] .focus-reminder-hero,
  #entryModal[data-action="notes"] .focus-notes-hero,
  #entryModal[data-action="birthday"] .focus-birthday-hero {
    display: none;
  }

  #entryModal[data-action="reminder"] .focus-reminder-field,
  #entryModal[data-action="plan"] .smart-reminder-field,
  #entryModal[data-action="notes"] .focus-note-compose,
  #entryModal[data-action="birthday"][data-mode="create"] .focus-birthday-compose {
    border-radius: 22px;
    padding: 0.9rem;
  }

  #entryModal[data-action="reminder"] .focus-reminder-details,
  #entryModal[data-action="birthday"][data-mode="create"] .focus-birthday-compose {
    grid-template-columns: 1fr;
  }

  #entryModal[data-action="plan"] .smart-reminder-input textarea {
    min-height: clamp(7rem, 30dvh, 10.5rem);
  }

  #entryModal[data-action="reminder"] .focus-reminder-input textarea,
  #entryModal[data-action="notes"] .focus-note-field textarea {
    min-height: clamp(7.8rem, 30dvh, 11.5rem);
  }

  #entryModal[data-action="reminder"] .voice-box,
  #entryModal[data-action="plan"] .voice-box,
  #entryModal[data-action="birthday"] .voice-box {
    width: max-content;
    margin: 0 1rem 0.74rem;
    padding: 0.24rem;
  }

  #entryModal[data-action="reminder"] .modal-actions,
  #entryModal[data-action="plan"] .modal-actions,
  #entryModal[data-action="notes"] .modal-actions,
  #entryModal[data-action="birthday"][data-mode="create"] .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    width: auto !important;
    max-width: none;
    justify-self: stretch;
    justify-content: flex-end;
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 0;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated, rgba(255, 255, 255, 0.55)) 34%, transparent), color-mix(in srgb, var(--surface-elevated, rgba(255, 255, 255, 0.55)) 84%, transparent));
    box-shadow: none;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    padding: 0.74rem 1rem calc(0.82rem + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  #entryModal[data-action="reminder"] *,
  #entryModal[data-action="plan"] *,
  #entryModal[data-action="notes"] *,
  #entryModal[data-action="birthday"] * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  #entryModal[data-action="reminder"] :is(.modal-panel, .icon-action, .button):is(:hover, :focus-visible),
  #entryModal[data-action="plan"] :is(.modal-panel, .icon-action, .button):is(:hover, :focus-visible),
  #entryModal[data-action="notes"] :is(.modal-panel, .icon-action, .button):is(:hover, :focus-visible),
  #entryModal[data-action="birthday"] :is(.modal-panel, .icon-action, .button):is(:hover, :focus-visible) {
    transform: none !important;
  }
}