/* The install sheet (js/install.js). Used by the app and by the landing page,
   which name their colors differently, so each color falls back to the other's. */

.yos-install-sheet {
  --sheet-bg: var(--surface, var(--card, Canvas));
  --sheet-ink: var(--ink, CanvasText);
  --sheet-muted: var(--muted, GrayText);
  --sheet-line: var(--line, #8888);
  --sheet-accent: var(--accent, var(--green, #0b6f6b));
  --sheet-accent-ink: var(--accent-ink, var(--green-ink, #fff));
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 20px 20px 16px;
  border: 1px solid var(--sheet-line);
  border-radius: 16px;
  background: var(--sheet-bg);
  color: var(--sheet-ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
.yos-install-sheet::backdrop { background: rgba(0, 0, 0, .45); }
.yos-install-sheet h2 { margin: 0 0 12px; font-size: 1.15rem; line-height: 1.25; text-wrap: balance; }
.yos-install-body { display: flex; flex-direction: column; gap: 12px; }
.yos-install-body p { margin: 0; }
.yos-install-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.yos-install-steps li { display: flex; gap: 12px; align-items: flex-start; }
.yos-install-steps li > div { display: flex; flex-direction: column; min-width: 0; }
.yos-install-steps strong { font-weight: 600; }
.yos-install-steps span { color: var(--sheet-muted); font-size: .9em; }
.yos-install-icon {
  flex: none; box-sizing: content-box; padding: 6px; border-radius: 10px;
  background: color-mix(in srgb, var(--sheet-accent) 14%, transparent); color: var(--sheet-accent);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.yos-install-note { color: var(--sheet-muted); font-size: .86em; border-top: 1px solid var(--sheet-line); padding-top: 12px; }
.yos-install-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.yos-install-btn {
  min-height: 44px; padding: 8px 18px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--sheet-accent); background: transparent; color: var(--sheet-accent); font: inherit; font-weight: 600;
}
.yos-install-primary { background: var(--sheet-accent); color: var(--sheet-accent-ink); }
.yos-install-btn:focus-visible { outline: 3px solid var(--sheet-accent); outline-offset: 2px; }
.yos-install-btn[disabled] { opacity: .6; cursor: default; }
@media (max-width: 480px) {
  .yos-install-sheet { margin: auto auto 16px; }
}