/* The start page.
 *
 * It borrows the legal page's column and prose so the two static pages read as
 * one site; only the flasher row and its notes are new. The Install control is
 * `<esp-web-install-button>` — a custom element from a CDN whose own shadow DOM
 * we never style: everything below dresses what the page slots into it.
 */

.start-page ol,
.start-page ul {
  padding-left: 1.2rem;
}

.start-page li {
  margin-bottom: 0.6rem;
}

.start-page code {
  padding: 0.1rem 0.35rem;
  border-radius: 0.35rem;
  background: var(--chip);
  font-size: 0.85em;
}

/* The button, and beside it the release it is bound to. Both are absent until
 * `start.js` has read the pointer, so the row collapses rather than reserving
 * space for a control that may never appear. */
.install-row {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1.25rem 0;
}

.firmware-release {
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* The slotted button carries the page's own styling; the library's guidance
 * for a browser that cannot flash is plain text and should read as a note. */
.install-row [slot="unsupported"],
.install-row [slot="not-allowed"] {
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.start-note {
  max-width: 44rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--paper);
}

/* The pendant's Download is a link dressed as the page's primary button: a
 * `download` attribute on a same-origin file, nothing to press and hold. */
.start-page a.primary-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
}

.start-page a.primary-button:hover {
  background: var(--signal-hover);
}