/* Aftenlys: Safari installation guide. Illustrations are schematic, not
   interactive browser controls. All colors and radii use the design tokens. */
.install-guide-open { overflow: hidden; }

.install-guide {
  width: min(100% - 32px, 560px);
  max-height: calc(100dvh - 32px);
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
}

.install-guide::backdrop { background: var(--bg); }

.install-guide-header,
.install-guide-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.install-guide-header { margin-bottom: 16px; }
.install-guide-header .eyebrow { margin: 0; }
.install-guide h2,
.install-guide h3 { font-size: 24px; line-height: 1.2; letter-spacing: 0; }
.install-guide h2 { margin-bottom: 12px; }
.install-guide h3 { margin-bottom: 12px; }
.install-guide p { max-width: 48ch; margin-bottom: 16px; font-size: 16px; line-height: 1.65; color: var(--text-secondary); text-wrap: pretty; }
.install-guide .install-guide-progress { margin: 24px 0 12px; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.install-guide-figure { margin: 20px 0 0; }
.install-guide-figure figcaption { max-width: 48ch; margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.install-guide-actions { position: sticky; bottom: 0; justify-content: flex-end; flex-wrap: wrap; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); background: var(--surface); }
.install-guide-actions [data-guide-back] { margin-right: auto; }

.install-browser-preview,
.install-share-preview,
.install-add-preview {
  padding: 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-tile);
  background: var(--surface-sunken);
  font-size: 15px;
  line-height: 1.5;
}

.install-preview-brand { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 16px 0 24px; font-size: 17px; font-weight: 500; }
.install-guide svg { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.install-browser-bar { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-input); background: var(--surface); }
.install-preview-address { flex: 1; text-align: center; color: var(--text-secondary); }
.install-preview-target { color: var(--accent-quiet); }
.install-browser-bar .install-preview-target { display: flex; align-items: center; gap: 8px; }
.install-menu-alternative { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; color: var(--text-secondary); font-size: 13px; line-height: 1.4; }
.install-menu-dots { display: inline-flex; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); }
.install-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); }
.install-preview-row.install-preview-target { padding: 16px; border: 1px solid var(--accent-quiet); border-radius: var(--radius-input); }
.install-preview-toolbar { display: flex; justify-content: space-between; gap: 16px; color: var(--text-secondary); }
.install-preview-toolbar .install-preview-target { font-weight: 600; }
.install-preview-switch { display: flex; justify-content: flex-end; width: 48px; padding: 4px; border: 1px solid var(--positive); border-radius: var(--radius-pill); background: var(--positive-bg); }
.install-preview-switch > span { width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--positive); }

.install-entry { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.install-entry p { max-width: 48ch; margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.install-footer-button { padding: 0; border: 0; background: transparent; color: var(--text-secondary); font: inherit; cursor: pointer; }
.install-footer-button:hover { color: var(--text); }

@media (max-width: 560px) {
  .install-guide { padding: 24px 20px; }
  .install-guide-header { gap: 12px; }
  .install-browser-preview,
  .install-share-preview,
  .install-add-preview { padding: 16px; }
}