/* site-reader.css — the same "Reader" scale on index.html.
   Load AFTER styles.css on index.html:
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="site-reader.css">

   It shares the --t-* token names with docs-reader.css on purpose. The two
   never load on the same page, so the values can differ where the page wants
   them to, and if they ever did load together the second declaration would
   simply win rather than break anything.

   Mono throughout, as the firmware. What changes is the floor: nothing
   under 14px, and the sentences get a taller line. */

:root {
  --t-label: 0.7rem;   /* 14 */
  --t-small: 0.75rem;  /* 15 */
  --t-body:  0.85rem;  /* 17 */
  --t-h3:    0.9rem;   /* 18, step titles inside the card */
}

/* ---------- header (shared with guide.html, floors only) ---------- */
.topnav a { font-size: var(--t-label); }

/* ---------- hero ---------- */
.eyebrow { font-size: var(--t-label); letter-spacing: 0.14em; }
.status-pill { font-size: var(--t-label); padding: 6px 12px; }
.reveal-caption { font-size: var(--t-label); letter-spacing: 0.16em; }

/* ---------- one screen, no scrolling ----------
   The page was 820px tall, which fits a 900px window and overflows a real
   laptop browser by about 80 once the tab strip and the address bar have
   taken their cut. Every number below is spacing or the title; no sentence
   and no control is lost, and the type floor is untouched. */
.install-shell { padding-top: 8px; padding-bottom: 4px; gap: 10px; }
.install-shell .hero-copy { gap: 8px; }
.install-shell h1 { font-size: clamp(1.6rem, 2.6vw, 2rem); }   /* 32-40, was 40-52 */

/* ---------- install card ---------- */
.install-shell .install-card { gap: 10px; padding: 18px; }
/* index.html only: the guide wants the taller bar, this page wants the room */
.topbar { padding: 10px 24px; }
.install-steps { gap: 14px; }
.verify-line { padding: 12px 16px; }
.install-steps li { grid-template-columns: 30px minmax(0, 1fr); gap: 3px 14px; }
.install-steps li::before { width: 30px; height: 30px; font-size: var(--t-label); }
.install-steps h3 { font-family: var(--mono); font-size: var(--t-h3); font-weight: 600; }
.install-steps p  { font-family: var(--mono); font-size: var(--t-small); line-height: 1.55; }

.verify-line strong { font-family: var(--mono); font-size: var(--t-body); font-weight: 600; }
.verify-line span   { font-size: var(--t-label); }

.ack-row { font-family: var(--mono); font-size: var(--t-body); line-height: 1.55; }
.flash-button { font-size: var(--t-small); letter-spacing: 0.06em; }

.sd-route { font-family: var(--mono); font-size: var(--t-small); line-height: 1.55; padding: 10px 15px; }
.sd-route a { font-family: var(--mono); font-size: var(--t-label); }

.receipt > summary { font-size: var(--t-label); letter-spacing: 0.16em; padding: 10px 20px; }
.receipt-row { padding: 12px 20px; }
.receipt-row span { font-family: var(--mono); font-size: var(--t-small); }
.receipt strong { font-size: var(--t-label); }

.browser-note { font-family: var(--mono); font-size: var(--t-small); }
.fineprint a { font-size: var(--t-label); }

/* The footer block from the handoff is not here. index.html has no footer any
   more, so .foot-links and .motto match nothing and their rules went out of
   styles.css with the markup. Put them back alongside a footer, not before. */

/* ---------- phone floors: styles.css drops the brand and tabs to 0.74–0.78rem ---------- */
@media (max-width: 640px) {
  .brand { font-size: var(--t-label); }
  .topnav a { font-size: var(--t-label); }
}
@media (max-width: 430px) {
  .topnav a { font-size: var(--t-label); padding: 6px 8px; }
}