/* "Zet Denkplein op je beginscherm": the install card that assets/pwa.js shows in a
   [data-dp-install] slot. Built only from the tokens in denkplein.css. */
.dp-install { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "mark text go close"; align-items: center; gap: var(--space-2) var(--space-4); max-width: 640px; margin: 0 0 var(--space-8); padding: var(--space-4) var(--space-3) var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-raised); }
.dp-install[hidden] { display: none; }
.dp-install-mark { grid-area: mark; width: 44px; height: 44px; }
.dp-install-text { grid-area: text; min-width: 0; }
.dp-install-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: -0.01em; color: var(--ink); }
.dp-install-desc { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.dp-install-desc svg { width: 18px; height: 18px; margin: 0 2px -4px; fill: none; stroke: var(--kobalt); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dp-install-go { grid-area: go; }
.dp-install-close { grid-area: close; width: 34px; padding: 0; justify-content: center; color: var(--ink-muted); }
.dp-install-close svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
@media (max-width: 640px) {
  .dp-install { grid-template-columns: auto 1fr auto; grid-template-areas: "mark text close" "go go go"; align-items: start; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-6); }
  .dp-install-mark { width: 36px; height: 36px; }
  .dp-install-go { justify-content: center; }
  .dp-install-close { margin: -6px -6px 0 0; }
}