/* Installation belongs to the website, on both desktop and phone. */
[data-install-nota][hidden] { display: none !important; }
/* No private geometry: the button sits in the header's right cluster next to
   the avatar and the hamburger, both `.icon-btn`, and a 44px borderless tile
   beside two 34px bordered ones reads as a different system. `.icon-btn` owns
   the box and already grows to 44px under (pointer: coarse). */
.pwa-install-icon { flex: none; }
.pwa-install-icon:hover { color: var(--brand-on-surface); }

/* --- PWA install dialog ---------------------------------------------------
   Minimal, dark-first. Outline buttons only. Full-width on mobile, centred
   on tablet+. No decorative elements — pure functional clarity. */
.pwa-dialog {
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  padding: var(--space-12);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  overflow: auto;
}
.pwa-dialog::backdrop {
  background: rgb(16 24 32 / 60%);
  backdrop-filter: blur(6px);
}

/* Head: app icon + close button on one line */
.pwa-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.pwa-dialog-head img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
}

/* Title: Sora 800, compact */
.pwa-dialog h2 {
  margin: 0 0 var(--space-4);
  font: 800 clamp(19px, 1.5vw, 24px)/1.2 var(--font-display);
  letter-spacing: -0.035em;
}

/* Description: one line, muted */
.pwa-dialog .pwa-desc {
  margin: 0 0 var(--space-8);
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Platform steps: minimal, tight */
.pwa-dialog ol {
  padding-left: 20px;
  margin: 0 0 var(--space-8);
}
.pwa-dialog li {
  padding-left: var(--space-3);
  margin: var(--space-5) 0;
  line-height: 1.45;
  font-size: 14px;
}
.pwa-dialog li::marker {
  color: var(--ink-muted);
  font-weight: 600;
}

/* Fallback text for unsupported platforms */
.pwa-dialog [data-pwa-platform="other"] {
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 var(--space-8);
}

/* Help line at bottom — quiet, secondary */
.pwa-dialog .help {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Install button: full-width, outline primary */
#pwa-install-now {
  width: 100%;
  margin-block: var(--space-5) var(--space-6);
}

/* Mobile: full-width dialog, tighter padding */
@media (max-width: 480px) {
  .pwa-dialog {
    width: calc(100vw - 16px);
    padding: var(--space-10);
  }
  .pwa-dialog h2 {
    font-size: 19px;
  }
}

/* Bottom-sheet style on very small phones */
@media (max-height: 500px) and (max-width: 480px) {
  .pwa-dialog {
    max-height: calc(100dvh - 16px);
  }
}