/* The iOS install sheet.
 *
 * A native <dialog>, so Escape, the focus trap and the backdrop are the
 * browser's work rather than ours. It is the only overlay in the app that is
 * not the header's drawer, which is why it keeps its own file.
 *
 * This sheet's job is to be read in a moment and then left, standing over a
 * page the reader is about to leave for Safari's own menu. Nothing on it
 * scrolls, and nothing on it competes with the share mark.
 */

.install-sheet {
  width: min(24rem, calc(100vw - 2rem));
  padding: 1.4rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom));
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 18px 50px #172a3a2e;
}

/* Anchored low, within a thumb's reach of the share button it points at,
 * rather than centred where a phone puts it furthest from both. An iPad has
 * the room to hold it in the middle, and keeps its share button up top. */
.install-sheet:modal {
  margin: auto auto max(1rem, env(safe-area-inset-bottom));
}

@media (min-width: 40em) {
  .install-sheet:modal { margin: auto; }
}

/* Dark enough to read as one dimmed screen. The header's drawer is usually
   open behind this — it is where the button was tapped — and it stays open so
   that closing the sheet hands focus back to the button rather than to the
   top of the document. */
.install-sheet::backdrop { background: #172a3a8c; }

.install-sheet__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.install-sheet__lede {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.65;
}

.install-sheet__steps {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: install-step;
}

.install-sheet__steps li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.6rem 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

.install-sheet__steps li + li { border-top: 1px solid var(--line); }

/* The step number is drawn rather than written, so the share mark can sit
   inside the row as a word does and the two lines still start together. */
.install-sheet__steps li::before {
  counter-increment: install-step;
  content: counter(install-step);
  flex: none;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-wash);
  font-size: 0.72rem;
  font-weight: 700;
}

.install-sheet__glyph { flex: none; width: 1.15rem; height: 1.15rem; color: var(--accent); }

.install-sheet__dismiss { width: 100%; margin-top: 1.2rem; }

@media (prefers-reduced-motion: no-preference) {
  .install-sheet[open] { animation: install-sheet-rise 200ms ease; }
}

@keyframes install-sheet-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}