/* 「那一刻的天空」 dialog (TASK-birth-sky-cover-20260928; poster only since
   TASK-birth-sky-polish-20260928 P1). Loaded with the lazy dialog chunk only,
   never on first paint. No panel and no title bar: the dialog is a dimmed
   stage showing the painted picture, 「保存图片」 under it and an icon × in the
   corner. The stage and controls use the night palette (DESIGN §17: the dark
   theme floor #1a1a19 and ink #f2f0ea), because the picture is always night. */
.birth-sky-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-4);
  padding-top: max(var(--space-4), env(safe-area-inset-top));
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  border: 0;
  background: transparent;
  color: #f2f0ea;
  overflow: hidden;
  box-sizing: border-box;
}
.birth-sky-dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.birth-sky-dialog::backdrop { background: color-mix(in srgb, #1a1a19 90%, transparent); }
.birth-sky-image {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  width: auto;
  height: auto;
  /* Room for the save row (44px) + gap + stage padding. */
  max-width: 100%;
  max-height: calc(100vh - 44px - 3 * var(--space-4) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  -webkit-touch-callout: default;
}
@supports (height: 1dvh) {
  .birth-sky-dialog { height: 100dvh; }
  .birth-sky-image { max-height: calc(100dvh - 44px - 3 * var(--space-4) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
.birth-sky-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.birth-sky-actions p { margin: 0; text-align: center; color: #b3afa4; font-size: var(--type-body-sm); }
.birth-sky-save {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid color-mix(in srgb, #f2f0ea 42%, transparent);
  border-radius: var(--radius-md);
  background: transparent;
  color: #f2f0ea;
  font: inherit;
  font-size: var(--type-body-sm);
  cursor: pointer;
  transition: background-color 120ms ease-out, transform 120ms ease-out;
}
.birth-sky-save:hover { background: color-mix(in srgb, #f2f0ea 10%, transparent); }
.birth-sky-save:active { transform: scale(.96); }
.birth-sky-close {
  position: absolute;
  top: max(var(--space-2), env(safe-area-inset-top));
  right: var(--space-2);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: #f2f0ea;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.birth-sky-close:hover { background: color-mix(in srgb, #f2f0ea 10%, transparent); }
.birth-sky-close svg { width: 20px; height: 20px; }
.birth-sky-save:focus-visible, .birth-sky-close:focus-visible { outline: 2px solid #f2f0ea; outline-offset: 2px; }
@media print { .birth-sky-dialog { display: none !important; } }