/* Modal dialogs on the native <dialog> element: focus trapping, Esc and the top layer for free.
   .welcome is the first-visit theme + account dialog; .prompt is the small "sign in to do that" one. */

@layer components {
  .modal {
    margin: auto; /* the reset zeroes margins; a modal dialog centres itself with auto */
    width: min(100% - 32px, 560px);
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--bp-surface);
    color: var(--bp-ink);
    box-shadow: var(--shadow-lg);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .modal::backdrop { background: var(--bp-scrim); backdrop-filter: blur(2px); }

  .modal[open] { animation: modal-in 220ms var(--ease); }

  @keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: none; }
  }

  .modal__body { position: relative; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: var(--space-4); }

  .modal__close { position: absolute; top: 12px; inset-inline-end: 12px; }

  .modal__title { font-size: var(--fs-2xl); }

  .modal__lead { color: var(--bp-ink-2); }

  /* Welcome */
  .welcome .modal__body { align-items: center; text-align: center; gap: var(--space-3); }

  .welcome__logo { height: 64px; }

  .welcome__lead { color: var(--bp-ink-2); max-width: 40ch; }

  .theme-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    width: 100%;
    margin-block: var(--space-2);
  }

  .theme-choice__option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 10px 10px 14px;
    border: 2px solid var(--bp-line);
    border-radius: var(--radius-lg);
    background: var(--bp-paper);
    text-align: start;
    cursor: pointer;
    transition: border-color var(--dur), background-color var(--dur), transform var(--dur) var(--ease);
  }

  .theme-choice__option:hover { border-color: var(--bp-brand-200); transform: translateY(-2px); }

  .theme-choice__option:has(input:checked) {
    border-color: var(--bp-brand-600);
    background: var(--bp-brand-50);
  }

  .theme-choice__option:has(input:focus-visible) { outline: 3px solid var(--bp-focus); outline-offset: 2px; }

  .theme-choice__tick {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bp-brand-600);
    color: var(--bp-on-primary);
    opacity: 0;
    transform: scale(.6);
    transition: opacity var(--dur), transform var(--dur) var(--ease);
  }

  .theme-choice__tick .icon { font-size: 18px; }
  .theme-choice__option:has(input:checked) .theme-choice__tick { opacity: 1; transform: none; }

  .theme-choice__label { display: flex; align-items: center; gap: 6px; padding-inline: 4px; font-weight: 700; }
  .theme-choice__hint { padding-inline: 4px; font-size: 13px; color: var(--bp-ink-2); }

  /* The previews show each theme as it really looks, whatever theme the page is in now. */
  .theme-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 96px;
    padding: 10px;
    border-radius: var(--radius-md);
    background-image: radial-gradient(var(--pv-grain) 1px, transparent 1px);
    background-size: 6px 6px;
    background-color: var(--pv-paper);
    box-shadow: inset 0 0 0 1px var(--pv-line);
  }

  .theme-preview--light {
    --pv-paper: var(--preview-light-paper);
    --pv-card: var(--preview-light-card);
    --pv-ink: var(--preview-light-ink);
    --pv-line: var(--preview-light-line);
    --pv-accent: var(--preview-light-accent);
    --pv-grain: var(--preview-light-grain);
  }

  .theme-preview--dark {
    --pv-paper: var(--preview-dark-paper);
    --pv-card: var(--preview-dark-card);
    --pv-ink: var(--preview-dark-ink);
    --pv-line: var(--preview-dark-line);
    --pv-accent: var(--preview-dark-accent);
    --pv-grain: var(--preview-dark-grain);
  }

  .theme-preview__bar { height: 8px; width: 55%; border-radius: 4px; background: var(--pv-ink); }

  .theme-preview__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1; }

  .theme-preview__card {
    border-radius: 6px;
    background: var(--pv-card);
    box-shadow: inset 0 0 0 1px var(--pv-line);
    position: relative;
  }

  .theme-preview__card::after {
    content: "";
    position: absolute;
    inset-inline: 6px;
    bottom: 6px;
    height: 6px;
    width: 40%;
    border-radius: 3px;
    background: var(--pv-accent);
  }

  .welcome__divider {
    width: 100%;
    height: 1px;
    margin-block: var(--space-2);
    background: var(--bp-line);
  }

  .welcome__account-lead { color: var(--bp-ink-2); font-size: 15px; }
  .welcome__account-lead strong { display: block; color: var(--bp-ink); font-size: var(--fs-md); }

  .welcome__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: 100%; margin-top: var(--space-1); }

  @media (min-width: 560px) {
    .modal__body { padding: 36px 40px 32px; }
  }

  /* Prompt */
  .prompt { width: min(100% - 32px, 420px); }

  .prompt__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
    background: var(--bp-brand-50);
    color: var(--bp-heart);
  }

  .prompt__icon .icon { font-size: 32px; }
  .prompt .modal__body { align-items: center; text-align: center; }
  .prompt__actions { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; margin-top: var(--space-2); }
}