/* Full-screen day-three cancellation notice. Native <dialog> supplies focus
   containment, inert background and Escape; these rules make it a full page. */
.day-notice {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
.day-notice[open] { display: flex; flex-direction: column; }
.day-notice::backdrop { background: #15131c; }
html:has(.day-notice[open]) { overflow: hidden; }

.day-notice-scroll {
  flex: 1;
  display: grid;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
}
.day-notice-inner {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
}

.day-notice-label {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-top: 2.5rem;
  color: #8ce4de;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.day-notice-heading {
  margin-top: 1rem;
  font-size: clamp(2.5rem, 7vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.day-notice-body {
  margin-top: 1.75rem;
  max-width: 38rem;
  color: rgb(255 255 255 / .82);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.day-notice-body p + p { margin-top: 1rem; }

.day-notice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
}
.day-notice-link {
  color: #c5b4e3;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.day-notice-link:hover { color: #fff; }

@media (min-width: 640px) {
  .day-notice-scroll { padding: 3rem 2.5rem; }
  .day-notice-body { font-size: 1.1875rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .day-notice[open] .day-notice-inner { animation: day-notice-in .6s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes day-notice-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}