/* The device dialog: what this device will do, said once on the first visit. */

.device-dialog {
  width: min(30rem, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--tone-line);
  border-top-width: 6px;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
}

.device-dialog::backdrop {
  background: rgb(0 0 0 / 0.5);
}

/* Opening: the backdrop fades in and the dialog rises into place. Closing
   plays it back -- .is-closing is set by js/ui/device-view.js, which closes
   the dialog when the animation ends. */
.device-dialog[open] {
  animation: dialog-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.device-dialog[open]::backdrop {
  animation: backdrop-in 0.22s ease-out;
}

.device-dialog.is-closing {
  animation: dialog-out 0.18s ease-in forwards;
}

.device-dialog.is-closing::backdrop {
  animation: backdrop-out 0.18s ease-in forwards;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}

@keyframes dialog-out {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }
}

@keyframes backdrop-out {
  to {
    opacity: 0;
  }
}

/* The page's global reduced-motion rule reaches every element but not the
   ::backdrop pseudo-element. */
@media (prefers-reduced-motion: reduce) {
  .device-dialog[open]::backdrop,
  .device-dialog.is-closing::backdrop {
    animation: none;
  }
}

/* While it is open the page behind stays still; the gutter keeps a desktop
   layout from jumping sideways when the scrollbar goes. */
html:has(.device-dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.dialog-inner {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.25rem;
}

.dialog-inner .meter {
  color: var(--tone-line);
}

.dialog-title {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-wrap: balance;
}

.dialog-text,
.dialog-note {
  margin: 0;
}

.dialog-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.dialog-check {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  cursor: pointer;
}

.dialog-check input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.dialog-actions .ghost,
.dialog-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.dialog-ok {
  width: auto;
  min-width: 8rem;
}