/* Gravity, the full account: the screen stack over the shared teaching layout (science.css), in light and dark.
   Tokens are set on the page's main element only, so the shared navigation and footer keep their own light styles.
   portal.css supplies the --gv tokens; gravity-page.css draws the figures with the --ga tokens below. */

html body[data-rpi-page] main.science-page {
  --rpi-ink: var(--gv-ink); --rpi-muted: var(--gv-soft); --rpi-gray: var(--gv-soft); --rpi-line: var(--gv-rule);
  --rpi-link: var(--gv-ink); --rpi-ice: var(--gv-faint); --rpi-lilac: var(--gv-faint); --rpi-paper: var(--gv-paper);
  --rpi-sans: var(--gv-text); --rpi-mono: var(--gv-mono);
  --ga-panel: #fffdf9; --ga-fill: #f1eee7; --ga-grid: #e7e3db; --ga-grey-light: #b9b5ac; --ga-grey: #8a8a8a; --ga-grey-dark: #67645e;
  color: var(--gv-body); font-family: var(--gv-text); font-weight: 420; font-optical-sizing: auto;
}
@media (prefers-color-scheme: dark) {
  html body[data-rpi-page] main.science-page {
    --ga-panel: #1c1c1a; --ga-fill: #252522; --ga-grid: #2f2f2c; --ga-grey-light: #57544e; --ga-grey: #8f8c86; --ga-grey-dark: #aaa69d;
  }
}

/* Type: the display cut for the page heading, the subhead role for section headings, mono labels. */
html body[data-rpi-page] .science-page .science-opening h1 {
  font: 820 clamp(2.6rem, 1rem + 5.2vw, 5.4rem)/.94 var(--gv-display); letter-spacing: -.045em; color: var(--gv-ink);
  text-shadow: 0 0 .5px color-mix(in srgb, var(--gv-ink) 55%, transparent); max-width: 20ch; text-wrap: balance;
}
html body[data-rpi-page] .science-page h2 {
  font: 780 clamp(1.55rem, 1.1rem + 1.4vw, 2.2rem)/1.08 var(--gv-display); letter-spacing: -.02em; color: var(--gv-ink); text-wrap: balance;
}
html body[data-rpi-page] .science-page h3 { font-weight: 780; letter-spacing: -.015em; color: var(--gv-ink); }
html body[data-rpi-page] .science-page p { line-height: 1.6; }
html body[data-rpi-page] .science-page .science-opening .deck { font-weight: 450; line-height: 1.45; color: var(--gv-ink); }
html body[data-rpi-page] .science-page .eyebrow, html body[data-rpi-page] .science-page .gp-panel-head,
html body[data-rpi-page] .science-page .gp-fig-title, html body[data-rpi-page] .science-page .gp-small-label,
html body[data-rpi-page] .science-page .gp-route-label {
  font-family: var(--gv-mono); font-weight: 700; letter-spacing: .14em;
}
html body[data-rpi-page] .science-page .eyebrow { font-size: 12px; color: var(--gv-soft); }
html body[data-rpi-page] .science-page a { color: var(--gv-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body[data-rpi-page] .science-page a:hover { text-decoration-thickness: 2px; }
html body[data-rpi-page] .science-page :is(a, button, summary, input):focus-visible { outline: 3px solid var(--gv-ink); outline-offset: 3px; }

/* Panels sit a step off the page in both modes. */
html body[data-rpi-page] .science-page .gp-panel { background: var(--ga-panel); border-color: var(--gv-rule); border-top: 1.5px solid var(--gv-ink); }
html body[data-rpi-page] .science-page .gp-panel button { background: var(--ga-panel); color: var(--gv-ink); border-color: var(--ga-grey); }
html body[data-rpi-page] .science-page .gp-panel button:hover:not(:disabled) { background: var(--ga-fill); border-color: var(--gv-ink); }
html body[data-rpi-page] .science-page .gp-panel button:disabled { color: var(--ga-grey-light); border-color: var(--ga-grid); }
html body[data-rpi-page] .science-page .gp-range { accent-color: var(--gv-ink); }
html body[data-rpi-page] .science-page .gp-run-out { background: var(--ga-fill); }
html body[data-rpi-page] .science-page .gp-status { background: var(--ga-fill); }
html body[data-rpi-page] .science-page details summary { color: var(--gv-ink); }
html body[data-rpi-page] .science-page ::selection { background: color-mix(in srgb, var(--gv-cyan) 30%, transparent); color: inherit; }

/* Links from a section of the account to its live explorer. */
html body[data-rpi-page] .science-page .ga-live { margin: -.4rem 0 1.4rem; font: 700 11.5px/1.8 var(--gv-mono); letter-spacing: .1em; text-transform: uppercase; }
html body[data-rpi-page] .science-page .ga-live span { color: var(--gv-soft); margin-right: .6rem; }
html body[data-rpi-page] .science-page .ga-live a { text-decoration: none; border-bottom: 2px solid var(--gv-cyan); padding-bottom: 1px; }