/* OrbitLab shared component layer.
   Design tokens (--bg, --panel, --accent, ...) live in theme.css, loaded first.
   This file is loaded after theme.css and before portal.css on every portal
   page, and directly by the Explore page.

   It was called explore.css until the design-system audit measured what is
   actually in it: 55 of its 65 classes are used by PORTAL pages, not by
   Explore. `.astro-card`, `.glossary-entry`, `.prose`, `.fig`, `.audio`, the
   `.tl-*` timeline set and `.viz` are the site's shared components, and the
   name said otherwise - so every edit to them started from a wrong model of
   what would be affected.

   The ten classes that really are Explore-only, kept here until that page is
   reworked and they can move into it:
     .explore-shell  .masthead-controls  .mode-label  .back-link
     .back-link--primary  .catnav-title  .contents-title  .credits  .grp
     .part-title

   The components are themed through the tokens and work in both light and dark
   (measured: .glossary-entry is 15.7:1 on dark, 17.7:1 on light). Explore's own
   PAGE chrome is dark-only by design; these components are not. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body, "Segoe UI", system-ui, -apple-system, sans-serif);
  font-size: var(--fs-body, 16.5px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- masthead ---------------- */
.masthead {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 26px;
  border-bottom: 1px solid var(--border);
  background: var(--app-bg);
}
.masthead .title { font-size: 15px; letter-spacing: .3px; color: var(--muted); }
.masthead .title b { color: var(--text); font-weight: 600; }
.masthead-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mode-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
#render-mode {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 10px; font-size: 13px;
}
#render-mode:hover { border-color: var(--accent); }
.back-link {
  color: var(--accent-2); text-decoration: none; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); padding: 7px 13px; border-radius: var(--r-sm); background: var(--panel);
  white-space: nowrap;
}
.back-link:hover { border-color: var(--accent); }
/* The "Back to Learn" link is the primary way out of the tour, so it carries
   the accent fill; the simulator link stays the quiet secondary action. */
.back-link--primary { background: var(--accent); color: #06101f; border-color: transparent; }
.back-link--primary:hover { filter: brightness(1.1); border-color: transparent; }

/* ---------------- layout ---------------- */
.explore { max-width: 1040px; margin: 0 auto; padding: 12px 26px 100px; }

.intro { padding: 28px 0 8px; }
.intro h1 { font-size: var(--fs-h1); line-height: 1.2; margin: 0 0 12px; letter-spacing: .2px; max-width: 760px; }
.intro .lead { font-size: 18px; color: var(--text-soft); margin: 0 0 12px; max-width: 760px; }
.intro .note { font-size: 14px; color: var(--muted); max-width: 760px; }

/* contents / table of sections */
.contents {
  margin-top: 22px; padding: 16px 20px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
}
.contents-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 0 0 10px; }
.contents ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
.contents .grp { font-weight: 600; color: var(--accent-2); margin-top: 6px; font-size: 13px; }
.contents a { color: var(--accent-2); text-decoration: none; font-size: 13.5px; }
.contents a:hover { text-decoration: underline; }

/* themed parts */
.part { margin-top: 76px; }
/* A part opener, not an eyebrow. It is an <h2> containing several <h3> module
   titles, and it rendered at 13px tracked uppercase directly above 21px module
   headings - so the document rank said "parent" while the page said "caption",
   and a reader scanning a 16,000px tour could not see where one part ended and
   the next began.

   It now takes the dense track's top step and drops the uppercase tracking (the
   brief asks for less shouting, and Arabic cannot be tracked at all). The
   spectral rule above it is the boundary marker - the same signature that marks
   position everywhere else in the system. */
.part-title {
  font-family: var(--font-display);
  font-size: var(--fs-c-h1);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 6px;
  padding-block-start: 16px;
  position: relative;
}
.part-title::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 52px; height: 2px; background: var(--spectral);
}
html[lang="ar"] .part-title { letter-spacing: 0; line-height: 1.35; }

/* a topic block */
.module { margin-top: 30px; scroll-margin-top: 70px; }
.module > h3 { font-size: var(--fs-c-h2); margin: 0 0 14px; }

.module-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.prose p { margin: 0 0 12px; }
.prose strong { color: #fff; }
.prose em { font-style: italic; }
.prose.wide { max-width: 820px; }

/* image figures and galleries */
.fig { margin: 0; }
.fig img { width: 100%; display: block; border-radius: var(--r-md); border: 1px solid var(--border); background: #06050e; }
.fig figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.fig.wide { max-width: 720px; margin: 22px 0 0; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 16px; }
.gallery.two { grid-template-columns: repeat(2, 1fr); }
.gallery .fig img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------------- visualization box ---------------- */
.viz {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--app-bg);
  overflow: hidden;
}
.viz canvas { display: block; width: 100%; height: 100%; }
.viz-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 18px; color: var(--muted); font-size: 14px;
}
.viz.scene-live .viz-fallback { display: none; }
/* Graph paper behind a still image: a faint grid on the plain surface, and
   no teal pool of light in the middle of it. */
.viz.scene-image {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 26px),
    var(--app-bg);
}

/* ---------------- audio / video ---------------- */
.audio {
  margin: 22px 0 0; padding: 16px 18px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.audio figcaption { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.audio-intro { font-size: 14px; color: var(--text-soft); margin: 0 0 12px; }
.audio audio { width: 100%; }
.audio video { width: 100%; display: block; border-radius: var(--r-sm); background: #000; }
.audio-source { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.audio-source a { color: var(--accent-2); }
.transcript { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.transcript summary { cursor: pointer; color: var(--accent-2); }
.transcript p { margin: 8px 0 0; }
.audio.audio-missing audio,
.audio.audio-missing video { display: none; }

/* ---------------- credits ---------------- */
.credits { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13.5px; }
/* Credits IS a top-level section of the page, so h2 is the right rank - but it
   was set at --fs-c-h3 (15px), a full step below the module h3s at 20.5px,
   so the outline and the type disagreed. It takes the h2 step of the dense
   scale now: the quietest h2 on the page rather than a mis-sized one. The
   block around it is already muted and rule-separated, so it stays modest
   without needing to be undersized. */
.credits h2 { font-size: var(--fs-c-h2); color: var(--text); }
.credits code { font-family: "Cascadia Code", Consolas, monospace; font-size: 12.5px; background: var(--panel-2); padding: 1px 5px; border-radius: var(--r-xs); color: #ffd9a0; }

/* ======================================================================
   Knowledge layer: search, sidebar, cards, timeline, glossary, tooltips
   ====================================================================== */

/* Search trigger, overlay, and inline glossary tooltip moved to search.css
   (a shared component loaded on every page with search). */

/* ---------------- two-column shell with sidebar ---------------- */
.explore-shell { display: block; }
.catnav {
  position: sticky; top: 64px;
  align-self: start;
  width: 230px; flex-shrink: 0;
  max-height: calc(100vh - 80px); overflow-y: auto;
  padding: 18px 6px 18px 0;
}
.catnav-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 0 0 10px 14px; }
.catnav ul { list-style: none; margin: 0 0 14px; padding: 0; }
.catnav .grp { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-2); font-weight: 600; margin: 14px 0 5px 14px; }
.catnav a {
  display: block; padding: 6px 14px; margin: 1px 0;
  color: var(--muted); text-decoration: none; font-size: 13.5px;
  border-left: 2px solid transparent;
}
.catnav a:hover { color: var(--text); }
.catnav a.active { color: var(--text); border-left-color: var(--accent); background: var(--panel); }

@media (min-width: 1100px) {
  .explore-shell { display: flex; gap: 8px; max-width: 1320px; margin: 0 auto; padding: 0 26px; }
  .explore-shell .explore { margin: 0; padding-left: 18px; }
}
@media (max-width: 1099px) {
  .catnav { display: none; }
}

/* ---------------- planet card grid ---------------- */
.astro-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.astro-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; transition: border-color 0.18s ease, transform 0.18s ease;
}
.astro-card:hover { border-color: var(--accent-2); }
.astro-card.open { border-color: var(--accent); }
.astro-card-head {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: transparent; border: 0; cursor: pointer; color: var(--text);
  padding: 14px 14px; font-family: inherit;
}
/* The dot is the body itself, drawn twice over: a flat disc in the object's
   colour, plus a highlight at 32%/30% that reads as a lit limb - light arriving
   from off to the upper left, which is what makes a circle read as a sphere.
   That much is true of everything in every catalogue, so it stays on the base.

   The HALO does not. It is light leaving the body, and most of these bodies do
   not emit any: Mars, Luna and Pluto are visible only because the Sun lights
   them, and a 14px glow in Mars's own rust colour is decoration wearing the
   costume of physics. It moved to .planet-dot--source, which the catalogue
   renderer sets only for bodies that shine by themselves - so the halo now
   tells the reader something, and /planets stops glowing in eight colours. */
.planet-dot {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 32% 30%, #fff5, transparent 45%), var(--dot);
}
.planet-dot--source { box-shadow: 0 0 14px -2px var(--dot); }
.astro-card-titles { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.astro-card-title { font-size: 16px; font-weight: 600; }
.astro-card-kind { font-size: 12px; color: var(--muted); }
.astro-card-chevron { color: var(--muted); transition: transform 0.18s ease; }
.astro-card.open .astro-card-chevron { transform: rotate(180deg); }
.astro-card-body { padding: 0 14px 14px; }
.astro-card-summary { font-size: 13.5px; color: var(--text-soft); margin: 0 0 12px; line-height: 1.65; }
.astro-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0 0 12px; }
.astro-facts .fact { display: flex; flex-direction: column; }
.astro-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.astro-facts dd { margin: 1px 0 0; font-size: 13.5px; color: var(--text); font-weight: 600; }
.astro-fact { font-size: 13px; color: var(--accent-2); margin: 0; padding: 9px 11px; background: var(--panel-2); border-radius: var(--r-sm); }

/* ---------------- missions timeline ---------------- */
.timeline { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 13px; top: 4px; bottom: 4px; width: 2px; background: var(--rule); }
/* The gap encodes the interval. One year of elapsed time is --tl-year-unit of
   vertical space, so the thirteen years from Voyager to Hubble open up and the
   two 2021 missions sit flush. The floor keeps consecutive years legible; the
   ceiling stops a long quiet stretch from becoming a screen of nothing. */
.timeline { --tl-year-unit: 3.4px; }
.tl-item {
  position: relative; padding: 0 0 22px 44px;
  margin-block-start: clamp(0px, calc(var(--gap-years, 0) * var(--tl-year-unit)), 84px);
}
/* Flush content on the axis, not a floating card: a timeline entry is read, not
   pressed, so it gets no border, no radius and no lift. */
.tl-card { background: none; border: 0; border-radius: 0; padding: 0 0 2px; }
.tl-year {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--accent-2);
}
.tl-scale {
  margin: 0 0 14px; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.02em; color: var(--muted);
}
html[lang="ar"] .tl-year, html[lang="ar"] .tl-scale { letter-spacing: 0; }

@media (max-width: 640px) {
  /* Less room, so the same 65 years are drawn at a tighter scale rather than
     pushing the list off the bottom of a phone. */
  .timeline { --tl-year-unit: 2px; }
  .tl-item { margin-block-start: clamp(0px, calc(var(--gap-years, 0) * var(--tl-year-unit)), 48px); }
}
.tl-marker { position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); }
/* A mission that has a photograph shows it beside its entry, small, so the
   axis stays the axis. */
.tl-photo {
  float: inline-end; width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  margin: 2px 0 8px 14px; margin-inline-start: 14px; margin-inline-end: 0;
}
.tl-title { font-size: 16px; margin: 3px 0 2px; }

/* ---------------- story block ----------------
   Picture, heading, text, one link: the "Let's know about" block of the
   Apollo reference. Opens Space Missions and the Timeline on the most recent
   mission that has a photograph, credited where it appears. */
.story-block {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0;
  margin: 0 0 26px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--panel); overflow: hidden;
}
.story-photo { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; background: var(--app-bg); }
.story-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.story-eyebrow {
  margin: 0; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2);
}
html[lang="ar"] .story-eyebrow { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.story-title { margin: 0; font-size: var(--fs-h2); }
.story-meta { margin: 0; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.story-text { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-soft); }
.story-fact { margin: 0; font-size: 13.5px; color: var(--accent-2); display: flex; gap: 8px; align-items: flex-start; }
.story-fact .svg-icon { flex: none; margin-top: 3px; }
.story-credit { margin: 0; font-size: 11.5px; color: var(--muted); }
.story-body .btn { margin-top: 8px; }
@media (max-width: 640px) {
  .story-block { grid-template-columns: minmax(0, 1fr); }
  .story-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .story-body { padding: 18px 16px 20px; }
}
.tl-agency { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.tl-summary { font-size: 13.5px; color: var(--text-soft); margin: 0 0 8px; }
.tl-fact { font-size: 12.5px; color: var(--accent-2); margin: 0; }

/* ---------------- glossary ---------------- */
.glossary-tools { margin: 6px 0 16px; }
.glossary-filter {
  width: 100%; max-width: 360px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 12px; font-size: 14px; font-family: inherit;
}
.glossary-filter:focus { outline: none; border-color: var(--accent); }
/* The rule above outranks theme.css's global ring, which left a keyboard user
   only a border hue change; give the keyboard its outline back. */
.glossary-filter:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* ── Glossary: a reference, not a deck of cards ──────────────────────────────
   42 definitions used to sit in 42 bordered panels on a 280px auto-fill grid.
   A glossary is looked UP, not browsed, so it is now a definition list grouped
   by initial letter with a sticky index rail. Entries are separated by a
   hairline; nothing is boxed. The grouping is script-agnostic (astro.js takes
   the first character of each title), so Arabic groups under Arabic letters. */
.glossary-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 26px; align-items: start; }

.glossary-index {
  position: sticky; top: calc(var(--nav-h, 57px) + 12px);
  display: flex; flex-direction: column; gap: 1px;
  padding-block-start: 4px;
}
.glossary-index a {
  display: flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 3px 5px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  color: var(--muted); text-decoration: none;
  border-inline-start: 2px solid transparent;
}
.glossary-index a:hover { color: var(--text); background: var(--panel-2); }
/* A letter the filter has emptied stops advertising itself as a destination. */
.glossary-index a.is-empty { opacity: 0.32; pointer-events: none; }

.glossary-group { margin-block-end: 26px; }
.glossary-group[hidden] { display: none; }
.glossary-letter {
  position: sticky; top: var(--nav-h, 57px); z-index: 1;
  margin: 0 0 2px; padding: 6px 0 5px;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2);
  background: var(--app-bg);
  border-block-end: 1px solid var(--border);
}
.glossary-list { display: block; margin: 0; }
/* Arabic is cursive: spacing the letters apart pulls the joins open, so the
   instrument-label treatment relaxes into a weight change, exactly as every
   other tracked label on the site does. */
html[lang="ar"] .glossary-letter { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; }
html[lang="ar"] .gl-tag { letter-spacing: 0; }

.glossary-entry {
  padding-block: 13px 14px;
  border-block-end: 1px solid var(--rule);
  scroll-margin-top: 80px;
}
.glossary-entry:last-child { border-block-end: 0; }
.glossary-entry[hidden] { display: none; }
/* A deep-linked term is marked the way position is marked everywhere else. */
.glossary-entry:target { box-shadow: inset 2px 0 0 var(--accent); padding-inline-start: 12px; }
[dir="rtl"] .glossary-entry:target { box-shadow: inset -2px 0 0 var(--accent); }
.glossary-entry dt {
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: 600; color: var(--text); line-height: 1.3;
}
.glossary-entry dd {
  margin: 5px 0 0; font-size: var(--fs-sm); color: var(--text-soft);
  line-height: 1.65; max-width: var(--measure);
}
.gl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 8px !important; }
.gl-tag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--muted); background: none;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  padding: 2px 7px; cursor: pointer;
}
.gl-tag:hover { color: var(--accent-2); border-color: var(--accent-2); }
.gl-tag:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: var(--ring); }

.glossary-empty {
  margin: 20px 0 0; padding: 18px 0;
  color: var(--muted); font-size: var(--fs-sm);
  border-block-start: 1px solid var(--rule);
}
.glossary-empty[hidden] { display: none; }
.glossary-count {
  margin: 8px 0 0; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  /* The rail becomes a scrolling strip above the list: a 26-wide column of
     letters is not worth 26px of a 390px screen. */
  .glossary-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .glossary-index {
    position: static; flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scrollbar-width: none; gap: 2px;
    border-block-end: 1px solid var(--border); padding-block-end: 6px;
  }
  .glossary-index::-webkit-scrollbar { display: none; }
  .glossary-index a { flex: none; min-width: 32px; min-height: 32px; }
}

@media (max-width: 820px) {
  .module-grid { grid-template-columns: 1fr; }
  .gallery, .contents ul { grid-template-columns: 1fr; }
  .masthead { flex-wrap: wrap; }
  .masthead-controls { flex-wrap: wrap; width: 100%; }
}

@media (max-width: 560px) {
  /* The masthead is sticky, and at 375px its six controls wrapped onto four
     rows - 209px, a quarter of the phone screen held permanently by chrome
     above a page whose whole point is the imagery. Three cuts, no lost
     function: the title's descriptive half goes (the page's own <h1> says the
     same thing two lines below it), the "Ctrl K" hint goes (there is no Ctrl
     key on a phone), the "Visuals" label goes (the select keeps its
     aria-label), and what remains rides one horizontal rail with the last item
     deliberately half-visible as the cue that it scrolls. */
  .masthead { padding: 10px 14px; gap: 8px 10px; }
  .masthead .title span { display: none; }
  .masthead .title b { font-size: 16px; }
  .masthead .mode-label { display: none; }
  .masthead-controls {
    flex-wrap: nowrap; width: 100%; gap: 10px;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .masthead-controls::-webkit-scrollbar { display: none; }
  .masthead-controls > * { flex: none; }
  .explore { padding: 12px 16px 80px; }
  .intro { padding: 20px 0 6px; }
  .intro .lead { font-size: 16px; }
  .gallery.two { grid-template-columns: 1fr; }
  .contents { padding: 14px 16px; }
  /* 16px controls avoid iOS focus auto-zoom. */
  #render-mode, .lang-select, .glossary-filter { font-size: 16px; }
}

/* Comfortable 44px targets on touch devices (WCAG 2.5.5 / pointer: coarse),
   matching the portal-wide convention in theme.css/portal.css/styles.css. */
@media (pointer: coarse) {
  .back-link { min-height: 44px; display: inline-flex; align-items: center; }
  #render-mode { min-height: 44px; }
  .glossary-filter { min-height: 44px; }
  .transcript summary { min-height: 44px; display: flex; align-items: center; }
  .contents a { min-height: 44px; display: flex; align-items: center; }
  /* Glossary tags are filters a thumb presses: 20px tall at 10.5px was a
     target for a stylus. */
  .gl-tag { min-height: 32px; padding-inline: 10px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .search-box { animation: none; }
  .astro-card, .astro-card-chevron { transition: none; }
}

/* ---------------- hover ----------------
   A colour change and nothing else. The figures used to zoom by 2% under the
   pointer, which promised a lightbox that never opened. */
.astro-card { transition: border-color var(--t-med) ease; }
.astro-card:hover { border-color: var(--accent-2); }
.astro-card-body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .astro-card, .tl-card { transition: none; }
}