@layer components {
  /* ─── A notification as a dialog ────────── */

  /* Opened with the page: a tinted mark, the title, a few words, then the
     event's own content and one button across. Fixed over the viewport, as
     a modal dialog is — anything else lays it out at the top of the
     document, so opening it scrolls the page there and it scrolls away
     with the page — and scrolling within itself when it outgrows the
     screen, never handing the scroll on to the page behind. */
  .notice-dialog {
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lifted);
    color: var(--color-ink);
    inline-size: min(34rem, calc(100dvw - 2rem));
    max-block-size: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2.25rem 2.25rem 2rem;
    position: fixed;

    &::backdrop {
      background: oklch(from var(--color-surface-inverted) l c h / 55%);
    }
  }

  /* The page holds still behind an open dialog. */
  :root:has(.notice-dialog:modal) {
    overflow: hidden;
  }

  .notice-dialog__close {
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    position: absolute;
  }

  .notice-dialog__mark {
    align-items: center;
    background: var(--color-brand-tint);
    block-size: 3.5rem;
    border-radius: var(--radius-lg);
    color: var(--color-brand);
    display: flex;
    inline-size: 3.5rem;
    justify-content: center;
    margin-block-end: 1.25rem;
  }

  .notice-dialog__title {
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 0.5rem;
  }

  .notice-dialog__text {
    color: var(--color-ink-secondary);
    line-height: 1.5;
    margin: 0 0 1.5rem;

    strong {
      color: var(--color-ink);
    }
  }

  .notice-dialog__confirm {
    margin-block-start: 1.75rem;
  }

  /* ─── Stages ────────────────────────────── */

  /* A vertical timeline: a dot per stage on a line down the start edge,
     brand up to the current stage, faint after it. */
  .notice-dialog__stages {
    display: grid;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .notice-dialog__stage {
    --stage-dot-size: 1.375rem;
    --stage-line: var(--color-border);

    color: var(--color-ink-secondary);
    display: grid;
    font-size: 0.875rem;
    gap: 0.125rem 0.875rem;
    grid-template-columns: var(--stage-dot-size) 1fr;
    position: relative;

    strong {
      color: var(--color-ink-muted);
      font-size: 1rem;
      grid-column: 2;
    }

    > span:last-child {
      grid-column: 2;
    }

    &:not(:last-child)::after {
      background: var(--stage-line);
      content: "";
      inline-size: 2px;
      inset-block: calc(var(--stage-dot-size) + 0.25rem) -0.875rem;
      inset-inline-start: calc(var(--stage-dot-size) / 2 - 1px);
      position: absolute;
    }

    &.is-done,
    &.is-current {
      strong {
        color: var(--color-ink);
      }
    }

    &.is-done {
      --stage-line: var(--color-brand);
    }
  }

  .notice-dialog__dot {
    align-items: center;
    block-size: var(--stage-dot-size);
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    grid-row: 1 / span 2;
    inline-size: var(--stage-dot-size);
    justify-content: center;

    .is-done & {
      background: var(--color-brand-fill);
      border-color: var(--color-brand-fill);
      color: var(--color-ink-inverted);
    }

    .is-current & {
      border-color: var(--color-brand);

      &::before {
        background: var(--color-brand);
        block-size: 0.5rem;
        border-radius: 50%;
        content: "";
        inline-size: 0.5rem;
      }
    }
  }
}