/*
 * The public pages (/reading-speed-test/, /learn/…), on top of styles.css:
 * the same tokens, header, hero, closing card and footer as the landing
 * page, plus what an article and the public speed test need. Every value
 * is a token or a size from the 4-point scale; DESIGN.md, "Public pages".
 */

/* ---------- Logged in or out ---------- */

/* The inline script in each page's head sets data-access before the first paint. */
html[data-access="out"] [data-when="in"],
html:not([data-access="out"]) [data-when="out"] { display: none; }

/* ---------- Header ---------- */

.site-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.site-nav {
  display: flex;
  gap: 2px;
  justify-self: center;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.site-nav a {
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  color: var(--muted-foreground);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.site-nav a:hover { color: var(--foreground); }
.site-nav a:is([aria-current="page"], [aria-current="true"]) { color: var(--on-ink); background: var(--ink); }

/* Phones: the brand and the account buttons; the footer lists every page. */
@media (max-width: 719px) {
  .site-nav { display: none; }
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
}
/* The closing card carries Join now, so a small phone's header keeps the brand and Log in. While the early access list runs, its one button stays. */
@media (max-width: 419px) {
  .site-header .public-actions .button[data-variant="primary"][data-when="out"][data-join-only] { display: none; }
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; color: var(--muted-foreground); font-size: 0.85rem; font-weight: 600; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumbs li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: 0.7; }
.breadcrumbs a { color: var(--muted-foreground); text-decoration: none; }
.breadcrumbs a:hover { color: var(--foreground); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--foreground); }

/* The breadcrumbs sit close above the hero. */
.site-page > .breadcrumbs { margin-bottom: calc(var(--space-6) * -1 + var(--space-3)); }

/* ---------- Articles ---------- */

/* The answer first, on a grey card: what a reader (and a search snippet) needs in one paragraph. */
.site-answer { display: grid; gap: 10px; padding: 26px; border-radius: var(--radius-card); background: var(--surface); }
.site-answer p { font-size: 1.05rem; max-width: 62ch; }

.site-article { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.site-article h2 { margin-top: var(--space-5); font: 700 1.35rem/1.2 var(--font-display); letter-spacing: -0.03em; scroll-margin-top: 16px; }
.site-article > h2:first-child { margin-top: 0; }
.site-article p, .site-article li { max-width: 66ch; font-size: 1.02rem; }
.site-article :is(ul, ol) { display: grid; gap: 10px; margin: 0; padding-left: 22px; }
.site-article li::marker { color: var(--muted-foreground); }
.site-article .limit { max-width: 66ch; }
.site-article .faq { margin-top: 2px; }
.site-article .sources { gap: 8px; color: var(--muted-foreground); }
.site-article .sources li { font-size: 0.85rem; }

/* ---------- Cards that link to pages ---------- */

.site-cards { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 10px;
  border-radius: var(--radius-container);
  background: var(--surface);
  color: var(--foreground);
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.site-card > .icon-tile { width: 52px; height: 52px; }
.site-card-text { display: flex; flex-direction: column; min-width: 0; }
.site-card-text strong { font-weight: 700; line-height: 1.35; }
.site-card-text span { color: var(--muted-foreground); font-size: 0.88rem; }
.site-card-arrow { width: 20px; height: 20px; color: var(--muted-foreground); }
.site-card:hover { background: var(--surface-muted); }
@media (hover: hover) and (pointer: fine) {
  .site-card:hover { transform: translateY(-2px); }
}
@media (min-width: 640px) {
  .site-related .site-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- The public speed test ---------- */

.speed-test { display: grid; gap: var(--space-4); }
.speed-test-step { display: grid; gap: var(--space-4); min-width: 0; }
.speed-test-step:focus { outline: none; }

.speed-test-passage { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: var(--radius-container); background: var(--surface); }
.speed-test-passage > .icon-tile { width: 52px; height: 52px; }
.speed-test-passage-text { display: flex; flex-direction: column; min-width: 0; }
.speed-test-passage-text strong { font-weight: 700; line-height: 1.35; }

.speed-test-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--muted-foreground); font-size: 0.94rem; }
.speed-test-steps li { display: flex; align-items: flex-start; gap: 10px; }
.speed-test-steps .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--foreground); }
.speed-test-steps strong { color: var(--foreground); }
/* While reading, only the page and I've finished. */
.speed-test[data-state="reading"] .speed-test-steps { display: none; }

.speed-test-keep { display: grid; gap: 16px; padding: 24px; border-radius: var(--radius-card); background: var(--surface); }
.speed-test-keep p { max-width: 54ch; }
.speed-test-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

/* Nibs in a page's header, where the doodle stood: a sticker, a little smaller. */
.site-hero .hero-sticker { max-width: 220px; height: auto; margin: 0 0 -4px; }
@media (max-width: 719px) {
  .site-hero .hero-sticker { width: 46%; max-width: 180px; }
}