/* ==========================================================================
   /fotos — the QR landing page for the shared album. Kept out of fotos.html
   so the Content-Security-Policy can refuse inline <style> outright.
   ========================================================================== */

.sharepage {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-md);
  min-height: 100svh;
  padding: var(--space-2xl) var(--space-xl);
  background-color: var(--color-surface);
  text-align: center;
}

.sharepage__script {
  color: var(--color-accent);
  font-family: var(--font-script);
  font-size: clamp(2.75rem, 16vw, 4.25rem);
  line-height: 0.9;
}

.sharepage__title {
  max-width: 18ch;
  color: var(--color-primary);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.sharepage__text {
  max-width: 32ch;
  color: var(--color-secondary);
}

/* The one thing on the page worth tapping, sized for a thumb at a party. */
.sharepage__cta {
  min-width: 15rem;
  margin-top: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-paper);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.sharepage__cta:hover,
.sharepage__cta:focus-visible {
  color: var(--color-paper);
}

.sharepage__subtitle {
  margin-top: var(--space-md);
  color: var(--color-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

/* base.css strips list styling from any ol with a class (`ol[class]`), which
   outranks a bare class selector — hence `ol.` here, to match its specificity
   and win on order. The numbers are the point of this list. */
ol.sharepage__steps {
  max-width: 34ch;
  padding-left: 1.4rem;
  color: var(--color-secondary);
  font-size: var(--text-sm);
  list-style: decimal;
  text-align: left;
}

.sharepage__steps li + li {
  margin-top: var(--space-3xs);
}

.sharepage__note {
  max-width: 34ch;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-warm);
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.sharepage__hint {
  color: var(--color-secondary);
  font-size: var(--text-sm);
}

.sharepage__url {
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

.sharepage__back {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
}