/* =========================================================
   Flamma: styles
   ========================================================= */

/* ---------- design tokens ---------- */
:root {
  --bg: #0E1116;
  --card: #151B24;
  --card-2: #1A212C;       /* inputs / hover inside cards */
  --border: #232A35;
  --border-2: #2E3746;     /* slightly stronger border for controls */
  --text: #E8ECF1;
  --muted: #9AA4B2;
  --accent: #F28C38;
  --accent-hover: #FF9D4D;
  --accent-soft: rgba(242, 140, 56, 0.12);
  --on-accent: #1A1206;
  --focus: #F28C38;
  --border-hover: #3A4556;
  --placeholder: #6B7584;
  --tick: #4A5566;
  --thumb: #E8ECF1;
  --star: rgba(255, 255, 255, 0.3);
  --glow: rgba(242, 140, 56, 0.07);
  --alert-red-bg: #2A1517;  --alert-red-border: #4A2326;  --alert-red-text: #FFB3B3;
  --alert-blue-bg: #121D28; --alert-blue-border: #1F3346; --alert-blue-text: #A9D3F5;
  --scene-star: rgba(255, 255, 255, 0.55);
  --scene-frame: #222A36;
  --scene-sky: #11161E;
  --scene-dot: rgba(255, 255, 255, 0.10);
  --wind: rgba(190, 205, 225, 0.5);
  --o2-ring: rgba(127, 167, 201, 0.55);
  --o2-fill: rgba(127, 167, 201, 0.08);
  --o2-text: #9DBBD6;
  --solid-body: #6E6155;
  --liquid-body: #3E6578;
  --gas-body: #5C626D;
  --char-color: rgba(12, 9, 6, 0.75);
  --moon: #343A43;  --moon-rim: #4E5560;
  --mars: #4E2E24;  --mars-rim: #73432F;
  --earth: #1B3149; --earth-rim: #36628A;
  color-scheme: dark;

  --radius: 10px;
  --radius-sm: 6px;
  --speed: 200ms;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
}

/* ---------- light theme ----------
   Used when the computer is set to light mode (unless the user picked dark),
   or when the user picks light with the header toggle.
   The two blocks are identical on purpose. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F6F7F9;
    --card: #FFFFFF;
    --card-2: #F0F2F5;
    --border: #E2E6EC;
    --border-2: #CDD3DC;
    --text: #121821;
    --muted: #566170;
    --accent: #EE8030;
    --accent-hover: #DE7020;
    --accent-soft: rgba(238, 128, 48, 0.12);
    --on-accent: #1A1206;
    --focus: #B5520C;
    --border-hover: #AAB3C0;
    --placeholder: #8A94A3;
    --tick: #AAB3C0;
  --thumb: #FFFFFF;
    --thumb: #FFFFFF;
    --star: transparent;
    --glow: rgba(238, 128, 48, 0.08);
    --alert-red-bg: #FDF0F0;  --alert-red-border: #F2C9C9;  --alert-red-text: #8E1F1F;
    --alert-blue-bg: #EEF5FB; --alert-blue-border: #C9DDF0; --alert-blue-text: #164A72;
    --scene-star: rgba(40, 52, 72, 0.35);
    --scene-frame: #DCE1E8;
    --scene-sky: #FBFCFD;
    --scene-dot: rgba(20, 30, 50, 0.13);
    --wind: rgba(60, 80, 110, 0.42);
    --o2-ring: rgba(60, 100, 140, 0.45);
    --o2-fill: rgba(60, 100, 140, 0.06);
    --o2-text: #3F6A92;
    --solid-body: #B9A796;
    --liquid-body: #8DB3C7;
    --gas-body: #A6ADB7;
    --char-color: rgba(45, 32, 20, 0.65);
    --moon: #DADDE2;  --moon-rim: #BCC2CA;
    --mars: #EBCBBD;  --mars-rim: #D39C85;
    --earth: #D5E4F2; --earth-rim: #9FBEDD;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F6F7F9;
  --card: #FFFFFF;
  --card-2: #F0F2F5;
  --border: #E2E6EC;
  --border-2: #CDD3DC;
  --text: #121821;
  --muted: #566170;
  --accent: #EE8030;
  --accent-hover: #DE7020;
  --accent-soft: rgba(238, 128, 48, 0.12);
  --on-accent: #1A1206;
  --focus: #B5520C;
  --border-hover: #AAB3C0;
  --placeholder: #8A94A3;
  --tick: #AAB3C0;
  --star: transparent;
  --glow: rgba(238, 128, 48, 0.08);
  --alert-red-bg: #FDF0F0;  --alert-red-border: #F2C9C9;  --alert-red-text: #8E1F1F;
  --alert-blue-bg: #EEF5FB; --alert-blue-border: #C9DDF0; --alert-blue-text: #164A72;
  --scene-star: rgba(40, 52, 72, 0.35);
  --scene-frame: #DCE1E8;
  --scene-sky: #FBFCFD;
  --scene-dot: rgba(20, 30, 50, 0.13);
  --wind: rgba(60, 80, 110, 0.42);
  --o2-ring: rgba(60, 100, 140, 0.45);
  --o2-fill: rgba(60, 100, 140, 0.06);
  --o2-text: #3F6A92;
  --solid-body: #B9A796;
  --liquid-body: #8DB3C7;
  --gas-body: #A6ADB7;
  --char-color: rgba(45, 32, 20, 0.65);
  --moon: #DADDE2;  --moon-rim: #BCC2CA;
  --mars: #EBCBBD;  --mars-rim: #D39C85;
  --earth: #D5E4F2; --earth-rim: #9FBEDD;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* the reading area never grows wider than --page-w: header and footer stay full width,
   but full-width bands and the video intro stop at --page-w (centred) on big screens */
:root { --page-w: min(100vw, 1440px); }
html { background: var(--bg); }
body { overflow-x: hidden; }  /* the hero glow stretches wider than the page */

body {
  margin: 0;
  min-height: 100vh;                 /* with main growing (below), the footer always sits at the bottom */
  display: flex;
  flex-direction: column;
  transition: background var(--speed), color var(--speed);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3 { margin: 0; font-weight: 600; }
h3 { font-size: 16px; margin-bottom: 12px; }
.muted { color: var(--muted); margin: 0; }

/* hide visually but keep for screen readers */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

button { font-family: inherit; }

/* ---------- header ---------- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.logo-mark { color: var(--accent); flex: none; }

.header-right { display: flex; align-items: center; gap: 12px; }
.tabs { display: flex; gap: 4px; }

/* light / dark toggle */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--speed), border-color var(--speed), background var(--speed);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-hover); background: var(--card); }
/* show the moon in light mode (click = go dark), the sun in dark mode */
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
.tab {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--speed), background var(--speed), border-color var(--speed);
}
.tab:hover { color: var(--text); background: var(--card); }
.tab.active {
  color: var(--text);
  background: var(--card);
  border-color: var(--border);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---------- page layout ---------- */
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px 80px;
}
.page { display: none; }
.page.active { display: block; }

/* ---------- NASA Investigations page ---------- */
.exp-hero { text-align: center; padding: 56px 0 24px; }
.exp-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.exp-hero .hero-sub { margin-bottom: 0; }


/* investigation cards: one per row, each laid out horizontally */
.exp-grid { display: grid; gap: 20px; }
.exp-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);   /* left: about it, right: the data */
  gap: 0 36px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.exp-card-main, .exp-card-data { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.exp-card-data { padding-left: 36px; border-left: 1px solid var(--border); }
@media (max-width: 860px) {   /* not enough room: stack the two halves */
  .exp-card { grid-template-columns: 1fr; gap: 18px; }
  .exp-card-data { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
/* the triangle: lines drawn in SVG, the three corners are real buttons on top */
.pillar-triangle {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 300 / 240;
  margin: 0 auto;
}
.tri-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tri-lines:not(.tri-fancy) polygon { fill: var(--card); stroke: var(--border-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tri-center {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
  pointer-events: none;
}
.tri-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.tri-top   { left: 50%;    top: 11.7%; }     /* the polygon's corners: 150,28  34,208  266,208 */
.tri-left  { left: 11.3%;  top: 86.7%; }
.tri-right { left: 88.7%;  top: 86.7%; }
.tri-top { flex-direction: column-reverse; }  /* label above the top dot */
.tri-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tag-color);
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--border-2);
  transition: transform var(--speed), box-shadow var(--speed);
}
.tri-label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.tri-node:hover .tri-dot, .tri-node:focus-visible .tri-dot { transform: scale(1.15); }
.tri-node[aria-pressed="true"] .tri-dot { box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px var(--tag-color); transform: scale(1.15); }
.pillar-triangle.has-active .tri-node[aria-pressed="false"] { opacity: 0.45; }

/* hover / focus explanation */
.tri-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 20;
  width: 260px;
  transform: translate(-50%, -4px);
  padding: 10px 12px;
  background: var(--text);
  color: var(--bg);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--speed), transform var(--speed), visibility 0s var(--speed);
}
.tri-top .tri-tip { top: auto; bottom: calc(100% + 6px); }
.tri-left .tri-tip { left: 0; transform: translate(0, -4px); }
.tri-right .tri-tip { left: auto; right: 0; transform: translate(0, -4px); }
.tri-node:hover .tri-tip, .tri-node:focus-visible .tri-tip {
  opacity: 1; visibility: visible; transition: opacity var(--speed), transform var(--speed), visibility 0s;
}
.tri-node:hover .tri-tip { transform: translate(-50%, 0); }
.tri-left:hover .tri-tip, .tri-right:hover .tri-tip { transform: none; }

/* the chosen pillar's explanation, under the triangle */
.pillar-caption { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--muted); min-height: 0; }
.pillar-caption b { color: var(--tag-color); }
.link-btn { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--accent); }

/* pillar colours: only for the small tag dot and the card's top edge (not outcome colours) */
.tag-prevention  { --tag-color: #4f8cff; }
.tag-detection   { --tag-color: #a66cff; }
.tag-suppression { --tag-color: #1fa89a; }
.pillar-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: auto;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.pillar-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tag-color); }

/* search + sort */
.inv-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.search.inv-search { flex: 1; width: 100%; max-width: none; margin: 0; padding: 4px 6px 4px 14px; }   /* full width, unlike the Ask search */
.inv-search input { padding: 10px 4px; font-size: 15px; }
.inv-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.inv-sort select {
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.inv-count { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .inv-toolbar { flex-direction: column; align-items: stretch; } }

/* compare investigations */
.compare-hint { margin: -4px 0 14px; font-size: 13px; color: var(--muted); max-width: 820px; line-height: 1.55; }
.table-wrap.compare-wrap { max-height: none; border: 1px solid var(--border); border-radius: 12px; }   /* full height; scrolls sideways only */
.compare-table { font-size: 13px; }
.compare-table th, .compare-table td { white-space: normal; vertical-align: top; min-width: 190px; line-height: 1.5; }
.compare-table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 150px;
  background: var(--card);
  color: var(--muted);
  font-weight: 600;
}
.compare-table tr:first-child th { color: var(--text); font-size: 14px; }
.compare-table a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2); }
.compare-table a:hover { color: var(--accent); }
.compare-table .pillar-tag { margin-left: 0; }
.bar-mini { height: 10px; margin: 4px 0 8px; }
.cmp-sub { display: block; font-size: 11px; color: var(--muted); }


/* investigation card: the title link stretches over the whole card */
.exp-card { position: relative; transition: border-color var(--speed), transform var(--speed); }
.exp-card-head { display: flex; align-items: flex-start; gap: 14px; }
.inv-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #4f7cf0;                                   /* one blue flask for every investigation */
  background: color-mix(in srgb, #4f7cf0 14%, transparent);
  border: 1.5px solid color-mix(in srgb, #4f7cf0 38%, transparent);
}
.inv-icon svg { width: 24px; height: 24px; }
.inv-icon.small { width: 36px; height: 36px; border-radius: 10px; }
.inv-icon.small svg { width: 20px; height: 20px; }
.exp-card-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.exp-card-id { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.exp-card-id .doi { font-size: 12px; }
.exp-intro { margin: 0; font-size: 14px; line-height: 1.6; }
/* key facts above the outcome bar */
.exp-meta {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 16px;
  align-items: end;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.exp-meta dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.exp-meta dd { margin: 2px 0 0; font-size: 13px; }
.exp-meta dd.big {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
  .exp-meta { grid-template-columns: 1fr 1fr; }
  .exp-meta div:first-child { grid-column: span 2; }
}
/* what burned + conditions: label on the left, value on the right */
.exp-conditions { display: grid; gap: 8px; margin: 0; font-size: 13px; }
.exp-conditions > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.exp-conditions dt { color: var(--muted); }
.exp-conditions dd { margin: 0; }
.fuel-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.fuel-list b { color: var(--muted); font-weight: 500; margin-left: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .exp-conditions > div { grid-template-columns: 1fr; gap: 2px; }
}
/* the outcome bar (hover tooltips) and the DOI link sit above the card link */
.exp-card .outcome, .exp-card .doi { position: relative; z-index: 1; }
.exp-card .doi { align-self: flex-start; }

.pillar-badge {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--text);
}


/* outcome bar: one stacked row, 2px gaps, rounded ends */
.outcome-title { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.bar {
  display: flex;
  gap: 2px;
  height: 14px;
}
.bar-seg {
  position: relative;
  min-width: 3px;
  cursor: default;
}
.bar-seg:first-child { border-radius: 4px 0 0 4px; }
.bar-seg:last-child { border-radius: 0 4px 4px 0; }
.bar-seg:only-child { border-radius: 4px; }
.bar-seg:hover { outline: 2px solid var(--text); outline-offset: 1px; z-index: 1; }
/* hover tooltip */
.bar-seg::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--speed);
  z-index: 2;
}
.bar-seg:hover::after { opacity: 1; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--muted);
}
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.key { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.outcome-note { margin: 0; font-size: 13px; color: var(--muted); }


.doi { font-size: 13px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2); }
.doi:hover { color: var(--accent); text-decoration-color: currentColor; }

.exp-footnote { margin: 28px 0 0; font-size: 12px; color: var(--muted); text-align: center; max-width: 720px; margin-inline: auto; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: 56px 0 28px;
}

/* faint starfield + soft glow behind the hero (decorative only) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;          /* stretch past the content column */
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, var(--star), transparent),
    radial-gradient(1px 1px at 28% 68%, var(--star), transparent),
    radial-gradient(1px 1px at 41% 14%, var(--star), transparent),
    radial-gradient(1px 1px at 57% 80%, var(--star), transparent),
    radial-gradient(1px 1px at 66% 30%, var(--star), transparent),
    radial-gradient(1px 1px at 79% 60%, var(--star), transparent),
    radial-gradient(1px 1px at 88% 18%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 50% 45%, var(--star), transparent),
    radial-gradient(ellipse 480px 220px at 50% 42%, var(--glow), transparent 70%);
}
.hero { isolation: isolate; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 68px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.hero-sub {
  color: var(--muted);
  font-size: clamp(15px, 2vw, 18px);
  margin: 12px auto 28px;
  max-width: 640px;
  text-wrap: balance;
}

/* ---------- search bar ---------- */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  padding: 6px 6px 6px 18px;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  transition: border-color var(--speed), box-shadow var(--speed);
}
.search:hover { border-color: var(--border-hover); }
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.search-icon { color: var(--muted); flex: none; }
.search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 16px;            /* 16px+ stops iOS from zooming in */
  padding: 12px 4px;
}
.search input::placeholder { color: var(--placeholder); }
.search input:focus { outline: none; }  /* the whole bar shows focus instead */

.search-btn {
  flex: none;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--speed);
}
.search-btn:hover { background: var(--accent-hover); }


/* ---------- quick pick chips ---------- */
.quick-picks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.quick-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-right: 4px;
}
.chip {
  background: var(--card);
  border: 1px solid var(--border-2);
  color: var(--text);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--speed), background var(--speed), color var(--speed);
}
.chip:hover { border-color: var(--border-hover); background: var(--card-2); }
.chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- Ask page ---------- */
.search-lg { max-width: 760px; }
.search-lg input { font-size: 17px; padding: 14px 4px; }
.examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 760px;
  margin: 20px auto 0;
}
.examples .chip { max-width: 100%; text-align: center; }
.ask-results {
  display: grid;
  gap: 16px;
  max-width: 960px;
  margin: 8px auto 0;
}
.ask-results.hidden { display: none; }
.ask-answer { margin: 0; line-height: 1.7; white-space: pre-line; }   /* keep the blank line between paragraphs */
.section-title { margin: 8px 0 12px; }
.try-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--speed);
}
.try-btn:hover { background: var(--accent-hover); }
.ask-matched { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
/* related investigations inside the Answer box */
.ask-related { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.ask-related h4 { margin: 0 0 4px; font-size: 15px; }
.ask-inv-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }   /* minmax(0,..): a wide table can't stretch the card past the screen */
.ask-inv {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color var(--speed);
}
.ask-inv h5 { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.3; }
.ask-inv-intro { margin: 0; font-size: 14px; line-height: 1.55; }
.ask-inv-count { margin: 0; font-size: 12px; color: var(--muted); }
/* the table scrolls inside the card: sideways on small screens, down when there are many rows */
.table-wrap.ask-inv-tests {                /* (two classes, so it beats the general .table-wrap height) */
  position: relative;                       /* above the card link, so the table can be scrolled */
  z-index: 1;
  max-width: 100%;
  max-height: 320px;                        /* about 6 rows, then it scrolls down */
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ask-inv-tests th { background: var(--card); }   /* the sticky header row covers the rows scrolling under it */
.ask-inv-tests table { font-size: 13px; }
.ask-inv-tests td.merged { vertical-align: middle; border-right: 1px solid var(--border); }   /* one value shared by several rows */
.test-btn {
  position: relative;                       /* above the card link, so it gets the click */
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--speed), color var(--speed);
}
.test-btn svg { color: var(--accent); }
.test-btn:hover { background: var(--accent); color: var(--on-accent); }
.test-btn:hover svg { color: inherit; }
.test-btn-note { font-weight: 400; opacity: 0.8; }
.try-btn.hidden { display: none; }

/* ---------- cards (results) ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}

/* =========================================================
   Stage: big scene box on the left, conditions panel card on the right
   ========================================================= */
.stage {
  --panel-w: 340px;
  position: relative;
  height: clamp(440px, 62vh, 540px);   /* shorter, so the results below are in view when a test is done */
}

/* the picture: always the full width of the stage */
.scene-box {
  position: relative;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  overflow: clip;          /* like hidden, but the box can never be scrolled sideways by accident */
  background: var(--scene-sky);
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* ---------- conditions panel: pops up over the right side of the scene ---------- */
.panel {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 20;
  width: var(--panel-w);
  max-width: calc(100% - 28px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  transition: opacity 250ms ease, transform 250ms ease, visibility 0s 0s;
}
.stage.panel-closed .panel {
  opacity: 0;
  visibility: hidden;      /* also takes it out of keyboard focus */
  transform: translateY(10px) scale(0.98);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms;
}

/* close (x) button: outlined so it clearly reads as a button, with a "Hide panel" tooltip */
.panel-close {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  transition: color var(--speed), background var(--speed), border-color var(--speed);
}
.panel-close:hover { border-color: var(--accent); background: var(--accent-soft); }

/* small tooltip under the button (shown on hover and keyboard focus) */
.panel-close::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  padding: 4px 8px;
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--speed);
}
.panel-close:hover::after,
.panel-close:focus-visible::after { opacity: 1; }

/* "Show conditions" button that brings the panel back */
.panel-open {
  position: absolute;
  bottom: 14px;             /* bottom corner: the result badge uses the top */
  right: 14px;
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, border-color var(--speed), background var(--speed), visibility 0s 300ms;
}
.panel-open:hover { border-color: var(--accent); background: var(--accent-soft); }
.stage.panel-closed .panel-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease 150ms, border-color var(--speed), background var(--speed), visibility 0s;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 14px 12px 16px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: 15px; }
.hint { margin: 2px 0 0; font-size: 11px; color: var(--muted); }

.panel-body {
  flex: 1;
  overflow-y: auto;        /* scrolls only if the screen is short */
  padding: 0 16px;
}
.panel-foot {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
}

.cond {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.cond:last-child { border-bottom: 0; }

.cond-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-height: 24px;
}
.cond-label {
  margin-right: auto;      /* pushes the value + Any button to the right */
  font-size: 13px;
  font-weight: 600;
}
.cond-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cond-value small {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 3px;
}

/* slider set to "Any": value greyed out, slider faded (still usable) */
.cond.is-any .cond-value { color: var(--muted); font-family: var(--font); font-size: 13px; font-weight: 500; }
.cond.is-any .cond-value small { display: none; }
/* the "Any" stop label on the slider lights up when selected */
.cond.is-any input[type="range"] { opacity: 0.45; }
.cond.is-any input[type="range"]:hover { opacity: 0.8; }
input[type="range"] { transition: opacity var(--speed); }
.cond.is-any input[type="range"]::-webkit-slider-runnable-track { background: var(--border-2); }
.cond.is-any input[type="range"]::-moz-range-track { background: var(--border-2); }
.cond.is-any input[type="range"]::-webkit-slider-thumb { border-color: var(--muted); }
.cond.is-any input[type="range"]::-moz-range-thumb { border-color: var(--muted); }

/* ---------- sliders ---------- */
/* --fill (0–100%) is set from JS to colour the left part of the track */
/* "Any" tick box on the left of each slider */
.slider-row { display: flex; align-items: flex-start; gap: 12px; }
.slider-row .slider-wrap { flex: 1; min-width: 0; }
.any-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;               /* line up with the slider track */
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.any-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.cond.is-any .any-check { color: var(--accent); }
.slider-wrap { position: relative; padding-bottom: 32px; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --fill: 0%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--border-2) var(--fill));
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--border-2) var(--fill));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--thumb);
  border: 3px solid var(--accent);
  transition: transform var(--speed);
}
input[type="range"]::-moz-range-thumb {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--thumb);
  border: 3px solid var(--accent);
  transition: transform var(--speed);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:hover::-moz-range-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible { outline-offset: 4px; }

/* markers under the track. Inset by half the thumb width so they line up with the thumb centre */
.markers {
  position: absolute;
  left: 8px; right: 8px;
  top: 13px;
  height: 30px;
}
.markers span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding-top: 8px;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  color: var(--muted);
  white-space: nowrap;
}
.markers b { display: block; color: var(--text); font-weight: 600; }
/* small tick line above each label */
.markers span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px; height: 5px;
  background: var(--tick);
}
.markers .edge-start { transform: translateX(-8px); text-align: left; }
.markers .edge-start::before { left: 8px; }
.markers .edge-end { transform: translateX(calc(-100% + 8px)); text-align: right; }
.markers .edge-end::before { left: auto; right: 8px; }

/* ---------- segmented + toggle buttons ---------- */
.segmented {
  display: flex;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.seg {
  flex: 1;
  background: none;
  border: 0;
  color: var(--muted);
  padding: 6px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--speed), background var(--speed);
}
.seg:hover { color: var(--text); }
.seg[aria-pressed="true"] {
  background: var(--card-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.select-wrap { position: relative; margin-top: 8px; }
select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 7px 30px 7px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--speed);
}
select:hover { border-color: var(--border-hover); }
select:disabled { opacity: 0.5; cursor: not-allowed; }
/* simple chevron */
.select-wrap::after {
  content: "";
  position: absolute;
  right: 12px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.toggle {
  flex: 1 0 auto;          /* buttons stretch to fill the row evenly */
  background: var(--bg);
  border: 1px solid var(--border-2);
  color: var(--text);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--speed), background var(--speed), color var(--speed);
}
.toggle:hover { border-color: var(--border-hover); background: var(--card-2); }
.toggle[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
/* the "Any" choice looks a little quieter */
.toggle[data-value="any"], .seg[data-value="any"] { color: var(--muted); }
.toggle[data-value="any"][aria-pressed="true"], .seg[data-value="any"][aria-pressed="true"] { color: var(--text); }

/* ---------- main action button ---------- */
.primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--speed), transform var(--speed);
}
.primary:hover { background: var(--accent-hover); }
.primary:active { transform: translateY(1px); }
.primary.big {
  width: 100%;
  font-size: 15px;
  padding: 12px 20px;
  letter-spacing: 0.01em;
}

/* ---------- scenario scene ---------- */
.scene {
  position: absolute;
  inset: 0;
}

/* every layer inside the scene fills it and fades in/out */
.scene-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease;
}
.scene-bg.is-visible { opacity: 1; }

/* curved horizon: a very wide ellipse whose top edge peeks in at the bottom */
.horizon {
  position: absolute;
  left: -80%;
  width: 260%;
  top: 76%;
  height: 300%;
  border-radius: 50%;
}
.bg-moon  .horizon { background: var(--moon);  box-shadow: inset 0 2px 0 var(--moon-rim); }
.bg-mars  .horizon { background: var(--mars);  box-shadow: inset 0 2px 0 var(--mars-rim); }
.bg-earth .horizon { background: var(--earth); box-shadow: inset 0 3px 0 var(--earth-rim); }

/* space station: a few tiny stars seen through a window frame */
.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 20%, var(--scene-star), transparent),
    radial-gradient(1px 1px at 18% 62%, var(--scene-star), transparent),
    radial-gradient(1.5px 1.5px at 26% 14%, var(--scene-star), transparent),
    radial-gradient(1px 1px at 34% 40%, var(--scene-star), transparent),
    radial-gradient(1px 1px at 42% 76%, var(--scene-star), transparent),
    radial-gradient(1.5px 1.5px at 49% 24%, var(--scene-star), transparent),
    radial-gradient(1px 1px at 56% 56%, var(--scene-star), transparent),
    radial-gradient(1px 1px at 12% 86%, var(--scene-star), transparent),
    radial-gradient(1px 1px at 30% 88%, var(--scene-star), transparent),
    radial-gradient(1px 1px at 52% 90%, var(--scene-star), transparent),
    radial-gradient(1px 1px at 72% 12%, var(--scene-star), transparent),
    radial-gradient(1px 1px at 88% 80%, var(--scene-star), transparent);
}
.window-frame {
  position: absolute;
  inset: 14px;
  border: 8px solid var(--scene-frame);
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px var(--border-2);
}

/* ---------- condition layers inside the scene ---------- */
.scene-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* pressure: faint dot grid. --dot-gap is set by JS (smaller gap = higher pressure) */
.pressure-dots {
  --dot-gap: 24px;
  background-image: radial-gradient(circle, var(--scene-dot) 1px, transparent 1.6px);
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: center;
  opacity: 0;
  transition: opacity 500ms ease, background-size 500ms ease;
}
.pressure-dots.is-visible { opacity: 1; }

/* airflow: thin lines drifting left to right */
.wind { overflow: hidden; opacity: 0; transition: opacity 300ms ease; }
.wind.is-visible { opacity: 1; }
.wind-line {
  position: absolute;
  left: -20%;
  margin-top: -24px;                       /* centre the gust on its line */
  animation: wind-drift linear infinite;   /* duration + delay set by JS */
}
.wind-line svg { display: block; overflow: visible; }
.wind-line path {
  fill: none;
  stroke: var(--wind);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes wind-drift {
  0%   { left: -20%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 105%; opacity: 0; }
}

/* oxygen: small "O₂" circles floating slowly.
   Spread over the scene by --x / --y (set in scene.js). */
.molecule {
  position: absolute;
  left: calc(100% * var(--x));
  top: calc(100% * var(--y));
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 500ms ease, transform 500ms ease, left 350ms ease;
}
.molecule.is-in { opacity: 1; transform: scale(1); }
.molecule.leaving { opacity: 0; transform: scale(0.6); }
.molecule-inner {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;            /* centre on its point */
  border: 1px solid var(--o2-ring);
  border-radius: 50%;
  background: var(--o2-fill);
  color: var(--o2-text);
  font-size: 10px;
  font-weight: 600;
  animation: molecule-drift var(--dur) ease-in-out var(--delay) infinite alternate;
}
@keyframes molecule-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx), var(--dy)); }
}

/* ---------- material (what's burning) ---------- */
/* sits on the ground, centred in the scene */
.material {
  --body-w: 280px;
  --body-h: 34px;
  --body-color: var(--solid-body);
  --char: 0;
  --char-dur: 0.4s;
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: var(--body-w);
  height: var(--body-h);
  margin-left: calc(var(--body-w) / -2);
  opacity: 0;
  transform: translateY(10px);
  transform-origin: 50% 100%;
  transition: opacity 400ms ease, transform 400ms ease, left 350ms ease;
  z-index: 2;
  scale: 1.1;              /* a bit bigger than before, but the tallest flame still fits the shorter scene */
}
.material.is-visible { opacity: 1; transform: none; }
/* same rectangle for every material, only the colour changes with the fuel type */
.material[data-phase="solid"]   { --body-color: var(--solid-body); }
.material[data-phase="liquid"]  { --body-color: var(--liquid-body); }
.material[data-phase="gas"]     { --body-color: var(--gas-body); }
.material[data-phase="generic"] { --body-color: transparent; }   /* "Any material": dashed outline */

.material-body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--body-color);
  border-radius: 6px;
  transition: background 300ms ease;
}
.material[data-phase="generic"] .material-body { border: 1px dashed var(--border-hover); }

/* char mark: grows from the middle outwards as it burns */
.char {
  position: absolute;
  inset: 0;
  background: var(--char-color);
  transform: scaleX(var(--char));
  transition: transform var(--char-dur) ease-out;
}

.material-tag {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* ---------- flames ---------- */
/* all sizes/colours come from CSS variables set in fire.js */
.flames {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);    /* sit on top of the material */
  width: 0;
  height: 0;
}
.flame {
  --k: 1;                      /* extra size factor (side flames are smaller) */
  --offset: 0px;
  position: absolute;
  bottom: 0;
  left: calc(var(--fw) / -2 + var(--offset));
  width: var(--fw);
  height: var(--fh);
  transform-origin: 50% 100%;
  transform: rotate(var(--lean)) scale(0);
  opacity: 0;
  transition: transform 1000ms ease, opacity 1000ms ease;   /* slow fade when it goes out */
}
.flame.is-on {
  transform: rotate(var(--lean)) scale(calc(var(--size) * var(--k)));
  opacity: var(--alpha);
  transition: transform 700ms ease, opacity 700ms ease;     /* catches a bit faster */
}
.flame.is-on.grow { transform: rotate(var(--lean)) scale(calc(var(--size) * var(--k) * 1.25)); }
.flame-left  { --k: 0.75; --offset: calc(var(--body-w) * -0.3); }
.flame-right { --k: 0.75; --offset: calc(var(--body-w) * 0.3); }

/* gentle flicker; Earth = fast and tall, space = slow and calm */
.flame-inner {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  animation: flicker var(--flicker-dur) ease-in-out infinite alternate;
}
.flame.sputter .flame-inner { animation-duration: 0.12s; }
@keyframes flicker {
  0%   { transform: scale(1, 1); }
  50%  { transform: scale(calc(1 - var(--amp) * 0.5), calc(1 + var(--amp))); }
  100% { transform: scale(calc(1 + var(--amp) * 0.3), calc(1 - var(--amp) * 0.6)); }
}

/* three layers: blue base, orange body, yellow-white core */
.f {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  border-radius: 50% 50% 50% 50% / var(--rt) var(--rt) var(--rb) var(--rb);
}
.f-blue  { width: 100%; height: 100%; background: hsl(212 85% 62% / var(--blue-alpha)); }
.f-outer {
  width: 86%; height: 92%;
  background: hsl(28 95% 55% / var(--orange-alpha));
  box-shadow: 0 0 calc(var(--fw) * 0.9) hsl(28 95% 55% / calc(var(--orange-alpha) * 0.55));
}
.f-core  { width: 44%; height: 48%; bottom: 6%; background: hsl(48 100% 86% / var(--core-alpha)); }

/* "Didn't ignite": a small spark that flashes and fades */
.spark {
  position: absolute;
  left: -6px; bottom: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: hsl(45 100% 80%);
  box-shadow: 0 0 18px 6px hsl(35 100% 60% / 0.7);
  opacity: 0;
}
.spark.flash { animation: spark-flash 1200ms ease-out; }
@keyframes spark-flash {
  0%   { opacity: 0; transform: scale(0.3); }
  25%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(0.6); }
}

/* ---------- result badge (after the animation) ---------- */
/* test finished: the flames stop moving */
.material.is-done .flame-inner,
.material.is-done .f { animation-play-state: paused !important; }

/* "Show animation" tickbox above the scene (same look as the other tickboxes, .check) */
.stage-tools { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.anim-check { font-weight: 600; }

/* Animation off: no scene, the panel sits on the page with the conditions in columns */
.stage.conditions-only { height: auto; }
.stage.conditions-only .scene-box { display: none; }
.stage.conditions-only .panel,
.stage.conditions-only.panel-closed .panel {
  position: static;
  width: auto;
  max-width: none;
  max-height: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border-radius: 16px;
}
.stage.conditions-only .panel-close { display: none; }
.stage.conditions-only .panel-body {
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  column-gap: 32px;
}
.stage.conditions-only .panel-foot .primary { max-width: 360px; }
.stage.conditions-only ~ .stage-foot .scene-note { display: none; }   /* no illustration in this mode */

/* empty state: text + "Set conditions" button in the middle of the scene (only while the panel is closed) */
.scene-empty {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 24px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s 300ms;
}
.scene-empty p { margin: 0; font-size: 15px; color: var(--muted); }
.scene-empty .primary { width: auto; padding-inline: 28px; }   /* a normal-sized button, not full width */
.stage.panel-closed .scene-empty.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease 100ms, visibility 0s;
}

/* caption + disclaimer under the stage */
.stage-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  margin: 10px 2px 0;
}
.scene-note {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

/* ---------- results ---------- */
.results { margin-top: 48px; scroll-margin-top: 16px; }
.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.section-title { font-size: 20px; }
.data-badge {
  font-size: 12px;
  color: var(--alert-red-text);
  background: var(--alert-red-bg);
  border: 1px solid var(--alert-red-border);
  padding: 3px 10px;
  border-radius: 999px;
}
.stale {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
}
#h-summary { line-height: 1.8; }
#h-summary.is-loading .summary-text { color: var(--muted); font-style: italic; }
.ai-label { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

.table-wrap { overflow-x: auto; max-height: 420px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--card); }

.pill { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; color: #111; }
.table-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.table-head h3 { margin: 0; }
.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; cursor: pointer; }
.check:hover { color: var(--text); }
.pill-unknown { background: transparent; color: var(--muted); border: 1px solid var(--border-2); font-weight: 500; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  border-left-width: 4px;              /* a strong coloured edge: easy to spot */
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.alert.hidden { display: none; }
.alert-icon { flex: none; margin-top: 1px; }
.alert-title { margin: 0 0 2px; font-weight: 700; }
.alert-text { margin: 0; }
.alert-list { margin: 0; padding-left: 18px; }
.alert-list li + li { margin-top: 2px; }
.alert.red { background: var(--alert-red-bg); border-color: var(--alert-red-border); border-left-color: var(--alert-red-text); color: var(--alert-red-text); }
.alert.blue { background: var(--alert-blue-bg); border-color: var(--alert-blue-border); border-left-color: var(--alert-blue-text); color: var(--alert-blue-text); }
.hidden { display: none; }

/* ---------- responsive ---------- */
/* tablets / phones: scene on top, conditions panel below it */
@media (max-width: 900px) {
  .stage { height: auto; }
  .scene-box { height: 340px; }
  /* the panel becomes a sheet sliding up from the bottom of the screen */
  .panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
  }
  .stage.panel-closed .panel { transform: translateY(24px); }
  .material { scale: 0.75; }      /* smaller scene on tablets/phones */
}
@media (max-width: 760px) {
  .exp-card { padding: 18px; }
  .site-header { padding: 12px 16px; }
  main { padding: 0 16px 64px; }
  .hero { padding: 40px 0 24px; }
  .card { padding: 20px; }
  .search-btn { padding: 12px 16px; }
  .scene-box { height: 280px; }
  .material { scale: 0.6; }
  .window-frame { inset: 10px; border-width: 6px; border-radius: 20px; }
  .quick-label { flex-basis: 100%; margin: 0 0 2px; }
}
@media (max-width: 420px) {
  .tab-long { display: none; }          /* "NASA Investigations" -> "Investigations" on phones */
  .header-right { width: 100%; justify-content: space-between; gap: 8px; }
  .tabs { min-width: 0; gap: 2px; }
  .tab { padding: 8px 8px; font-size: 13px; white-space: nowrap; }
  .logo { font-size: 16px; }
  .search-icon { display: none; }
  .search { padding-left: 14px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  /* no floating or drifting: show a still picture */
  .molecule-inner, .wind-line, .flame-inner { animation: none !important; }
  .wind-line { left: calc(var(--x) * 100%); }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
.ask-answer.is-loading { color: var(--muted); font-style: italic; }

/* sources under the Ask answer */
.ask-sources { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.ask-sources h4 { margin: 0 0 6px; font-size: 13px; }
.ask-sources ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.ask-sources a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2); }
.ask-sources a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* "Your test": the current conditions + "Will it burn?", under the scene */
.your-test {
  margin-top: 16px;
  scroll-margin-top: 16px;
  padding: 16px 20px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.your-test-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.your-test-head h3 { margin: 0; font-size: 15px; }
.your-test-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 24px;
  margin: 0;
}
.your-test-list dt { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.your-test-list dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
.your-test-list dd small { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--muted); }
.your-test-list .is-any dd { color: var(--muted); font-size: 18px; }

/* short loading step before the results appear */
.results-loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 160px;
  color: var(--muted);
  font-size: 14px;
}
.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.results.is-loading .results-loading { display: flex; }
.results.is-loading > :not(.results-head):not(.results-loading) { display: none !important; }
/* then each part fades in, one after another */
.results:not(.is-loading) > :not(.results-loading):not(.results-head) { animation: results-in 400ms ease both; }
.results:not(.is-loading) > :nth-child(3) { animation-delay: 60ms; }
.results:not(.is-loading) > :nth-child(4) { animation-delay: 120ms; }
.results:not(.is-loading) > :nth-child(5) { animation-delay: 180ms; }
.results:not(.is-loading) > :nth-child(n+6) { animation-delay: 240ms; }
@keyframes results-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* CFI-G inverse flames, inside the CFI-G card */
.inverse-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-2); }
.inverse-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.inverse-text { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.inverse-text b { color: var(--text); }
.muted-note { font-size: 11px; color: var(--muted); font-weight: 500; }

/* quick-pick tooltip: the oxygen, pressure, airflow and gravity it sets */
.chip[data-tip] { position: relative; }
.chip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 30;
  transform: translate(-50%, -4px);
  padding: 6px 10px;
  background: var(--text);
  color: var(--bg);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--speed), transform var(--speed);
}
.chip[data-tip]:hover::after,
.chip[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ================= Home ================= */
.home-hero {
  position: relative;
  isolation: isolate;
  max-width: 860px;
  padding: 72px 0 24px;
}
/* faint starfield + warm glow behind the hero (decorative) */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 8% 18%, var(--star), transparent),
    radial-gradient(1px 1px at 22% 72%, var(--star), transparent),
    radial-gradient(1px 1px at 37% 12%, var(--star), transparent),
    radial-gradient(1px 1px at 55% 84%, var(--star), transparent),
    radial-gradient(1px 1px at 63% 26%, var(--star), transparent),
    radial-gradient(1px 1px at 78% 66%, var(--star), transparent),
    radial-gradient(1px 1px at 91% 14%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 46% 46%, var(--star), transparent),
    radial-gradient(ellipse 520px 300px at 35% 50%, var(--glow), transparent 70%);
}
@media (max-width: 900px) { .home-hero { padding-top: 48px; } }
.home-kicker {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.home-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 5.5vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.home-hero .hero-sub { margin: 18px 0 0; max-width: 560px; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.home-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--speed), background var(--speed);
}
.home-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.home-btn.primary-link { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.home-btn.primary-link:hover { background: var(--accent-hover); }

.home-section { margin-top: 128px; }
.home-h2 { margin: 0 0 18px; font-family: var(--font-display); font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.015em; }
.home-h3 { margin: 0 0 10px; font-size: 15px; }
.home-p { margin: 0 0 12px; max-width: 760px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.home-p b { color: var(--text); }

.home-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-fact {
  padding: 22px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color var(--speed), transform var(--speed);
}
.home-fact:hover { border-color: var(--border-2); transform: translateY(-2px); }
.fact-icon {
  display: block;
  margin-bottom: 12px;
  padding: 8px;
  box-sizing: content-box;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
}
.home-fact h3 { margin: 0 0 6px; font-size: 16px; }
.home-fact p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
@media (max-width: 760px) { .home-facts { grid-template-columns: 1fr; } }

/* citation links like [5] */
a.cite { color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
a.cite:hover { text-decoration: underline; }

/* pillars: heading, then a small centred triangle with each pillar's text next to its dot.
   The diagram box is the same size as the triangle, so the texts can be placed at the corners:
   top dot 50% / 11.7%, bottom-left 11.3% / 86.7%, bottom-right 88.7% / 86.7% */
.home-pillars { display: block; }
.pillar-diagram { position: relative; width: min(340px, 100%); margin: 96px auto 56px; }
.pillar-diagram .pillar-triangle { max-width: none; width: 100%; }
.home-pillars .tri-tip { display: none; }
.home-pillars .tri-dot { width: 26px; height: 26px; }
.home-pillars .tri-label { display: none; }          /* the name is the heading of the text next to each dot */
.pd-text { position: absolute; width: 280px; transform: translateY(-50%); line-height: 1.5; }
.pd-text p { margin: 0; }
.pd-name { margin-bottom: 2px !important; font-weight: 700; color: var(--tag-color); }
.pd-first { color: var(--text); font-weight: 600; }
.pd-brief { margin-top: 4px !important; color: var(--muted); }
.pd-prevention { --tag-color: #4f8cff; } .pd-detection { --tag-color: #a66cff; } .pd-suppression { --tag-color: #1fa89a; }
.pd-prevention  { left: calc(50% + 48px);    top: 11.7%; }                     /* right of the top dot */
.pd-detection   { right: calc(88.7% + 48px); top: 86.7%; text-align: right; }  /* left of the bottom-left dot */
.pd-suppression { left: calc(88.7% + 48px);  top: 86.7%; }                     /* right of the bottom-right dot */

/* not enough room beside the dots: names back on the corners, texts as a list under the triangle */
@media (max-width: 860px) {
  .pillar-diagram { display: flex; flex-direction: column; margin-top: 32px; width: min(380px, 100%); }
  .pillar-diagram .pillar-triangle { order: -1; margin-bottom: 28px; }
  .home-pillars .tri-label { display: block; font-size: 14px; }
  .pd-text { position: static; width: auto; transform: none; margin-bottom: 12px; padding-left: 14px; text-align: left; border-left: 3px solid var(--tag-color); }
}

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; position: relative; padding-bottom: 26px; }
.tl-item::before {                                     /* the vertical line */
  content: "";
  position: absolute;
  left: 35px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.tl-item:last-child::before { display: none; }
.tl-year {
  position: relative;
  z-index: 1;
  align-self: start;
  padding: 4px 0;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
}
.tl-body {
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.tl-type {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.tl-body h3 { margin: 0 0 6px; font-size: 17px; }
.tl-body p { margin: 0 0 8px; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 780px; }
.tl-body .tl-lesson b { color: var(--text); }
@media (max-width: 520px) { .tl-item { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; } .tl-item::before { left: 27px; } }



/* ---------- Home: candle flame on Earth vs in microgravity (CSS drawing) ---------- */
.flame-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px;
  background: color-mix(in srgb, var(--card) 85%, transparent);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.fc-item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fc-stage {
  position: relative;
  width: 100%;
  height: 210px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 60%, #1b2230, #0b0e14 70%);   /* always a dark "chamber" */
  overflow: hidden;
}
.fc-candle {                                  /* the candle */
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 46px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #d9d2c3, #f4efe4 45%, #c9c1b0);
  border-radius: 4px 4px 0 0;
}
.fc-candle::before {                          /* the wick */
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 2px;
  height: 10px;
  transform: translateX(-50%);
  background: #2a2a2a;
}
.fc-flame { position: absolute; left: 50%; transform: translateX(-50%); }
/* Earth: tall bright teardrop that flickers */
.fc-earth {
  bottom: 50px;
  width: 34px;
  height: 92px;
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse 40% 34% at 50% 78%, #fffbe6 0%, #ffd56b 45%, transparent 75%),
              radial-gradient(ellipse 60% 60% at 50% 62%, #ff9f2e 0%, #f26b1d 55%, transparent 100%);
  box-shadow: 0 0 34px 10px rgba(255, 150, 40, 0.35);
  transform-origin: 50% 100%;
  animation: fc-flicker 1.4s ease-in-out infinite alternate;
}
.fc-earth i {                                  /* blue base */
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 16px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(80, 140, 255, 0.75);
  filter: blur(1px);
}
/* microgravity: dim, round, blue-edged, slowly breathing */
.fc-space {
  bottom: 30px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 170, 80, 0.55) 0%, rgba(255, 120, 40, 0.25) 35%, transparent 58%),
              radial-gradient(circle at 50% 50%, transparent 52%, rgba(90, 150, 255, 0.85) 62%, rgba(60, 110, 255, 0.25) 72%, transparent 74%);
  box-shadow: 0 0 30px 6px rgba(70, 130, 255, 0.25);
  animation: fc-breathe 4s ease-in-out infinite alternate;
}
.fc-space i { display: none; }
@keyframes fc-flicker {
  0%   { transform: translateX(-50%) scale(1, 1) skewX(0deg); }
  40%  { transform: translateX(-50%) scale(0.96, 1.05) skewX(-2deg); }
  100% { transform: translateX(-50%) scale(1.03, 0.97) skewX(2deg); }
}
@keyframes fc-breathe {
  from { transform: translateX(-50%) scale(0.96); opacity: 0.85; }
  to   { transform: translateX(-50%) scale(1.04); opacity: 1; }
}
.fc-item figcaption { text-align: center; font-size: 12px; color: var(--muted); line-height: 1.4; }
.fc-item figcaption b { display: block; font-size: 14px; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .fc-earth, .fc-space { animation: none; } }

/* ---------- Home: explore cards ---------- */
.explore-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.explore-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--speed), transform var(--speed);
}
.explore-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.explore-card svg { color: var(--accent); }
.explore-card h3 { margin: 4px 0 0; font-size: 17px; }
.explore-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.explore-go { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--accent); }
@media (max-width: 760px) { .explore-grid { grid-template-columns: 1fr; } }

/* the big version, under "Why fire in space is different" */
.flame-compare-big { gap: 18px; padding: 22px; margin-bottom: 18px; }
.flame-compare-big .fc-stage { height: 380px; }
.flame-compare-big .fc-candle { width: 42px; height: 90px; }
.flame-compare-big .fc-candle::before { top: -14px; width: 3px; height: 16px; }
.flame-compare-big .fc-earth { bottom: 96px; width: 62px; height: 170px; box-shadow: 0 0 70px 22px rgba(255, 150, 40, 0.35); }
.flame-compare-big .fc-earth i { width: 28px; height: 16px; }
.flame-compare-big .fc-space { bottom: 52px; width: 150px; height: 150px; box-shadow: 0 0 60px 14px rgba(70, 130, 255, 0.25); }
.flame-compare-big figcaption { font-size: 14px; }
.flame-compare-big figcaption b { font-size: 17px; margin-bottom: 2px; }
@media (max-width: 600px) {
  .flame-compare-big { padding: 12px; gap: 10px; }
  .flame-compare-big .fc-stage { height: 260px; }
  .flame-compare-big .fc-candle { width: 30px; height: 60px; }
  .flame-compare-big .fc-earth { bottom: 66px; width: 44px; height: 120px; }
  .flame-compare-big .fc-space { bottom: 34px; width: 100px; height: 100px; }
}

/* ================= dark strips: header and footer (dark in both themes, like nasa.gov) ================= */
.site-header, .site-footer {
  --text: #e8ecf1;
  --muted: #9aa4b2;
  --card: #161b23;
  --card-2: #1c222c;
  --border: #232a35;
  --border-2: #2e3644;
  --border-hover: #3b4556;
  --focus: #f6a35c;
  background: #07090c;
  color: var(--text);
  border-color: #1a1f27;
}
.site-header .theme-toggle { color: var(--muted); }

.site-footer { margin-top: 80px; border-top: 1px solid #1a1f27; padding: 32px 32px 22px; }
.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;      /* sources on the left, data link on the right */
  gap: 16px 40px;
  align-items: start;
}
.footer-data { margin: 0; font-size: 13px; color: var(--muted); }
.site-footer a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2); }
.site-footer a:hover { color: var(--accent); }

/* Sources: first 3 shown, the rest behind "Show all" */
.footer-title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.footer-sources ol { margin: 10px 0 0; padding-left: 22px; font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 900px; }
.footer-sources .src-extra { display: none; }
.footer-sources.show-all .src-extra { display: list-item; }
.src-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 0;
  background: none;
  color: var(--text);
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.src-more:hover { color: var(--accent); }
.src-more svg { transition: transform var(--speed); }
.src-more[aria-expanded="true"] svg { transform: rotate(-90deg); }   /* points up when the list is open */
.footer-sources li.flash { animation: source-flash 1.6s ease-out; border-radius: 4px; }
@keyframes source-flash { from { background: rgba(242, 140, 56, 0.35); } to { background: transparent; } }
.footer-note { max-width: 1320px; margin: 22px auto 0; padding-top: 14px; border-top: 1px solid #1a1f27; font-size: 12px; color: var(--muted); }
@media (max-width: 760px) {
  .site-footer { padding: 26px 16px 18px; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* ================= Home: lessons ================= */
/* lessons: "Read more" opens detailed notes + a link to the real source */
.tl-more { margin-top: 10px; }
.tl-more > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--speed), background var(--speed);
}
.tl-more > summary::-webkit-details-marker { display: none; }
.tl-more > summary::after { content: "↓"; color: var(--accent); }
.tl-more[open] > summary::after { content: "↑"; }
.tl-more > summary:hover { border-color: var(--accent); background: var(--accent-soft); }
.tl-notes { margin-top: 12px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.tl-notes p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 820px; }
.tl-notes p b { color: var(--text); }
.tl-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.tl-link:hover { background: var(--accent-hover); }

/* ---------- the pillar triangle, polished (Home) ---------- */
.tri-fancy polygon, .tri-fancy line { vector-effect: non-scaling-stroke; }
.tri-fancy .tri-base { fill: var(--bg); stroke: none; }
.tri-fancy polygon:not(.tri-base):not(.tri-inner) { stroke: none; }
.tri-fancy .tri-inner { fill: none; stroke: var(--border-2); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.8; }
.tri-fancy line { stroke-width: 2.5; stroke-linecap: round; }
.tri-center { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.3; }

/* glowing dots with a slow pulse ring */
.home-pillars .tri-dot {
  position: relative;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px color-mix(in srgb, var(--tag-color) 60%, transparent),
              0 0 22px 6px color-mix(in srgb, var(--tag-color) 45%, transparent);
}
.home-pillars .tri-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--tag-color);
  opacity: 0;
  animation: dot-pulse 3s ease-out infinite;
}
.home-pillars .tri-left .tri-dot::after { animation-delay: 1s; }
.home-pillars .tri-right .tri-dot::after { animation-delay: 2s; }
@keyframes dot-pulse { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .home-pillars .tri-dot::after { animation: none; } }
.home-pillars .tri-node:hover .tri-dot { transform: scale(1.12); }

/* ---------- Home: larger text throughout ---------- */
#home .hero-sub { font-size: clamp(17px, 2.2vw, 21px); }
#home .home-h2 { font-size: clamp(26px, 3.4vw, 34px); }
#home .home-kicker { font-size: 14px; }
#home .home-p { font-size: 17px; }
#home .home-fact h3 { font-size: 19px; }
#home .home-fact p { font-size: 16px; }
#home .fc-item figcaption { font-size: 15px; }
#home .fc-item figcaption b { font-size: 18px; }
#home .pd-first { font-size: 18px; }
#home .pd-brief { font-size: 15px; }
#home .pd-name { font-size: 23px; }
#home .tri-center { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: 0.06em; }
#home .tl-type { font-size: 12px; }
#home .tl-body h3 { font-size: 20px; }
#home .tl-body p { font-size: 16px; }
#home .tl-more > summary { font-size: 14px; }
#home .tl-notes p { font-size: 16px; }
#home .tl-link { font-size: 14px; }
#home .tl-year { font-size: 15px; }
#home .explore-card h3 { font-size: 19px; }
#home .explore-card p { font-size: 16px; }
#home .explore-go { font-size: 14px; }
#home a.cite { font-size: 13px; }

/* ================= NASA photos and video ================= */
/* tiny credit in the corner of each picture */
.img-credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  backdrop-filter: blur(4px);
}
.img-credit:hover { color: #fff !important; background: rgba(0, 0, 0, 0.7); }

/* Home: a big photo beside the headline */
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; max-width: none; }
.hero-photo { position: relative; margin: 0; }
.hero-photo img {
  display: block;
  width: 100%;
  height: clamp(440px, 66vh, 660px);
  object-fit: cover;
  object-position: 62% 45%;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; gap: 28px; }
  .hero-photo img { height: 360px; }
}

/* Ask: the photo fills the first screen; title + search on top (always dark, like the photo) */
.ask-hero {
  --text: #f3f5f8;
  --muted: #c3cad4;
  --card: rgba(12, 14, 19, 0.55);
  --card-2: rgba(20, 24, 31, 0.7);
  --border: rgba(255, 255, 255, 0.16);
  --border-2: rgba(255, 255, 255, 0.22);
  --border-hover: rgba(255, 255, 255, 0.4);
  --placeholder: rgba(255, 255, 255, 0.6);
  position: relative;
  margin: 0 calc(50% - var(--page-w) / 2);                      /* full width of the window */
  min-height: calc(100vh - 65px);                  /* the whole first screen under the header */
  padding: 64px 24px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(5, 7, 10, 0.25), rgba(5, 7, 10, 0.72) 100%),
    linear-gradient(180deg, rgba(5, 7, 10, 0.55) 0%, rgba(5, 7, 10, 0.35) 40%, rgba(5, 7, 10, 0.85) 100%),
    url("../assets/jsc2023e002281~orig.jpg") center 45% / cover no-repeat,
    #07090c;
}
.ask-hero::before { display: none; }                 /* no starfield on the photo */
.ask-hero .hero-title {
  color: #fff;
  font-size: clamp(42px, 7vw, 84px);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}
.ask-hero .hero-sub { color: #e2e6ec; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
.ask-hero .search {
  width: min(760px, 100%);
  background: rgba(10, 12, 16, 0.55);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.ask-hero .search input { color: #fff; }
.ask-hero .search-icon { color: rgba(255, 255, 255, 0.7); }
.ask-hero .chip {
  background: rgba(10, 12, 16, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f3f5f8;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ask-hero .chip:hover { background: rgba(242, 140, 56, 0.25); border-color: var(--accent); }
.ask-hero .quick-label { color: rgba(255, 255, 255, 0.75); }
.ask-results { scroll-margin-top: 16px; padding-top: 28px; }
@media (max-width: 600px) { .ask-hero { padding: 48px 16px 56px; min-height: calc(100vh - 100px); } }

/* Home: a big, full-width NASA video of a real microgravity flame */
.feature-video { position: relative; margin: 8px 0 32px; }
.feature-video video {
  display: block;
  width: 100%;
  max-height: 72vh;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.feature-video .img-credit { bottom: auto; top: 12px; right: 14px; }   /* top corner: the controls are at the bottom */

/* ================= Home: dark band + lesson photos ================= */
/* "Lessons written in fire" sits on a full-width near-black band (like the header strip),
   in both themes, so the page alternates between light/dark sections */
.home-band {
  --bg: #05070a;
  --text: #eef1f5;
  --muted: #a3adba;
  --card: #10151d;
  --card-2: #161c26;
  --border: #212833;
  --border-2: #2e3746;
  --border-hover: #3b4556;
  --accent-soft: rgba(242, 140, 56, 0.14);
  margin: 128px calc(50% - var(--page-w) / 2) 0;                /* full width of the window */
  padding: 80px calc(var(--page-w) / 2 - 50%) 64px;             /* ...but the content keeps the page's width */
  background:
    radial-gradient(900px 340px at 15% 0%, rgba(242, 140, 56, 0.10), transparent 70%),
    #07090c;
  color: var(--text);
  border-block: 1px solid #1a1f27;
}
.home-band + .home-section { margin-top: 128px; }

/* each lesson card: text on the left, NASA photo on the right */
.tl-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 30%, 340px); gap: 24px; align-items: start; }
.tl-photo { position: relative; margin: 0; }
.tl-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
.tl-photo .img-credit { right: 8px; bottom: 8px; }
@media (max-width: 760px) {
  .tl-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tl-photo { order: -1; }                          /* photo on top on small screens */
  .tl-photo img { aspect-ratio: 16 / 9; }
}

/* Home 04: a wide photo from inside the ISS */
.wide-photo { position: relative; margin: 28px 0 0; }
.wide-photo img {
  display: block;
  width: 100%;
  height: clamp(280px, 52vh, 520px);
  object-fit: cover;
  object-position: center 45%;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* ================= CSV downloads ================= */
.csv-btn {
  position: relative;
  z-index: 1;                       /* above the card's whole-card link */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--speed), background var(--speed);
}
.csv-btn svg { color: var(--accent); flex: none; }
.csv-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.csv-n { color: var(--muted); font-weight: 500; }
.ask-inv .csv-btn { margin-top: 12px; }

/* card: DOI and downloads on one row */
.exp-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* NASA Investigations: "Download the data" */
.csv-all { margin-top: 40px; padding: 24px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.csv-all-title { margin: 0; font-family: var(--font-display); font-size: 20px; }
.csv-all-sub { margin: 4px 0 16px; font-size: 14px; color: var(--muted); }
.csv-all-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ================= NASA Investigations: sub-tabs + Compare view ================= */
.subtabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  margin: 0 auto 28px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.subtab {
  padding: 8px 20px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--speed), color var(--speed);
}
.subtab:hover { color: var(--text); }
.subtab.active { background: var(--accent); color: var(--on-accent); }

.compare-intro { margin: 0 0 14px; font-size: 15px; color: var(--muted); text-align: center; }
.compare-intro b { color: var(--text); }
.compare-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.compare-pick {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--speed), background var(--speed);
}
.compare-pick:hover { border-color: var(--border-hover); }
.compare-pick[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pick-check {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-2);
  border-radius: 6px;
  color: transparent;
}
.compare-pick[aria-pressed="true"] .pick-check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pick-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pick-name { font-size: 16px; font-weight: 700; }
.pick-full { font-size: 12px; color: var(--muted); line-height: 1.4; }
.compare-pick .pillar-tag { flex: none; }

.compare-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 22px 0 8px; }
.compare-go {
  padding: 11px 28px;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.compare-go:hover { background: var(--accent-hover); }
.compare-go:disabled { opacity: 0.4; cursor: not-allowed; }
.compare-clear { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.compare-clear:hover { color: var(--text); }
.compare-status { font-size: 13px; color: var(--muted); }
.compare-result { margin-top: 32px; scroll-margin-top: 80px; }
@media (max-width: 600px) { .compare-picks { grid-template-columns: 1fr; } }
.footer-credits { display: grid; gap: 6px; justify-items: end; text-align: right; }
@media (max-width: 760px) { .footer-credits { justify-items: start; text-align: left; } }

/* ================= Will It Burn?: "Where Flamma's NASA data has tests" chart ================= */
.test-map-sub { margin: 4px 0 10px; font-size: 13px; }
.test-map-svg { display: block; width: 100%; height: auto; }
.tm-grid { stroke: var(--border); stroke-width: 1; }
.tm-tick { fill: var(--muted); font-size: 11px; }
.tm-axis { fill: var(--muted); font-size: 12px; font-weight: 600; }
.tm-dot { stroke: var(--card); stroke-width: 1; opacity: 0.85; }
.tm-dot:hover { opacity: 1; stroke: var(--text); }
.tm-star { fill: var(--accent); stroke: var(--text); stroke-width: 1.5; }
.test-map-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.test-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.test-map-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.test-map-legend .tm-star-key { width: auto; height: auto; border-radius: 0; font-style: normal; color: var(--accent); font-size: 14px; line-height: 1; }

/* footer: the credit lines wrap instead of squeezing the Sources list;
   on narrower windows they move under the sources, and on phones the sources start closed */
.footer-credits { max-width: 560px; }
@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-credits { justify-items: start; text-align: left; max-width: none; }
}
@media (max-width: 760px) {
  .footer-sources:not(.show-all) li { display: none; }        /* closed until "Show all" */
  .footer-sources:not(.show-all) ol { margin-top: 0; }
}

/* Home 04: Back on Earth (NASA Spinoffs) */
.earth-card { cursor: default; }
.earth-card:hover { transform: none; }
.earth-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent); }
.earth-tag-earth { background: color-mix(in srgb, #1fa89a 16%, transparent); color: #1fa89a; }
.earth-card b { color: var(--text); }
.earth-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; }
.earth-links a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2); }
.earth-links .earth-ask { color: var(--accent); text-decoration: none; }
.earth-links a:hover { color: var(--accent); }

/* Home 04: big quote (Malaysian house fires -> wire insulation -> FLARE) */
.big-quote { position: relative; margin: 36px 0 0; padding: 8px 0 8px 56px; border: 0; }
.big-quote::before { content: "\201C"; position: absolute; left: 0; top: -18px; font-family: var(--font-display);
  font-size: 96px; line-height: 1; color: var(--accent); }
.big-quote p { margin: 0; max-width: 980px; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45; color: var(--text); letter-spacing: -0.01em; }
.big-quote b { color: var(--accent); }
@media (max-width: 600px) { .big-quote { padding-left: 34px; } .big-quote::before { font-size: 64px; top: -10px; } }

/* Home: "Closer to home" special section */
.closer-home .home-p b { color: var(--text); }

/* ================= Back on Earth tab ================= */
.earth-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 56px 0 40px; }
.earth-title { margin: 6px 0 14px; font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; }
.earth-hero .hero-sub { margin: 0; text-align: left; }
.earth-photo { position: relative; margin: 0; }
.earth-photo img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
@media (max-width: 860px) { .earth-hero { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; } }

/* story cards: problem -> in space -> on Earth */
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.story { --story: #ee8030; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 0 22px 20px;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.story-detector { --story: #a66cff; }
.story-tanks { --story: #1fa89a; }
.story-top { display: flex; align-items: center; justify-content: space-between; margin: 0 -22px; padding: 16px 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--story) 26%, transparent), transparent 75%);
  border-bottom: 1px solid color-mix(in srgb, var(--story) 30%, transparent); }
.story-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--story); background: color-mix(in srgb, var(--story) 18%, transparent); }
.story-years { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--story); }
.story h3 { margin: 4px 0 0; font-family: var(--font-display); font-size: 22px; }
.story-stat { margin: 0; font-size: 14px; color: var(--muted); }
.story-stat b { display: block; font-family: var(--font-display); font-size: 34px; line-height: 1.1; color: var(--story); }
.story-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.story-steps li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.story-steps li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--story); }
.story-steps li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: -10px; width: 2px;
  background: color-mix(in srgb, var(--story) 35%, transparent); }
.story-steps b { color: var(--text); }
.step-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.story .earth-links { margin-top: auto; padding-top: 6px; }
#earth .big-quote { margin-top: 56px; }
.explore-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* phones: 5 tabs -> tighter, and the row scrolls sideways instead of running into the theme button */
@media (max-width: 420px) {
  .tabs { flex: 1; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 8px 6px; font-size: 12.5px; flex: none; }
}

/* quick picks with photos */
.chip-pic { display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px; width: 132px; padding: 5px 5px 7px; text-align: center; }
.chip-img { display: block; width: 100%; height: 74px; object-fit: cover; border-radius: 5px; background: var(--card-2); }
.chip-img-empty { display: grid; place-items: center; font-size: 28px; }
.chip-label { font-size: 13px; font-weight: 600; }
.chip-pic[aria-pressed="true"] .chip-img { outline: 2px solid var(--accent); outline-offset: -2px; }
.preset-note { margin: 10px auto 0; max-width: 640px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted); }
.chip-credits { margin: 6px 0 0; text-align: center; font-size: 9px; line-height: 1.4; color: var(--muted); opacity: 0.75; }
.chip-credits a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) { .chip-pic { width: calc(33.3% - 6px); } .chip-img { height: 56px; } }

/* label tag in the scene: where you are */
.scene-place { position: absolute; top: 14px; left: 14px; z-index: 3; padding: 4px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px); }
/* story photos from the NASA Spinoff PDFs */
.story-photo { position: relative; margin: 0 -22px; }
.story-photo img { display: block; width: 100%; height: 190px; object-fit: cover; filter: saturate(0.9);
  border-bottom: 1px solid color-mix(in srgb, var(--story) 30%, transparent); }
.story-photo { margin-top: -12px; }   /* sit right under the coloured top (the card has a 12px gap) */

/* ================= Home: full-screen video intro ================= */
.logo-mark { width: 32px; height: 32px; object-fit: contain; }

/* the intro sticks to the top while the rest of Home (.home-over) scrolls up over it */
.intro { position: sticky; top: 0; z-index: 0; height: calc(100vh - 65px); min-height: 420px;
  margin: 0 calc(50% - var(--page-w) / 2); overflow: hidden; background: #000; }
.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.6) 75%),
              linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.55)); }
.intro-text { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 0 20px; text-align: center; }
.intro-name { margin: 0; padding-left: 0.4em;            /* balances the spacing after the last letter */
  font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 13vw, 190px); line-height: 1;
  letter-spacing: 0.4em; color: #fff; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55); }
.intro-caption { margin: 22px 0 0; max-width: 640px; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.55;
  color: rgba(255, 255, 255, 0.88); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.intro-scroll { position: absolute; bottom: 22px; left: 50%; z-index: 1; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.intro .img-credit { z-index: 1; }

/* the rest of Home: an opaque full-width layer that slides over the pinned video */
.home-over { position: relative; z-index: 1; margin: 0 calc(50% - var(--page-w) / 2); padding: 0 calc(var(--page-w) / 2 - 50%);
  background: var(--bg); box-shadow: 0 -24px 48px rgba(0, 0, 0, 0.35); }

/* header wordmark: FLAMMA */
.logo-text { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.22em; }

/* Closer to home: full-width band on a Moon photo, astronaut portrait beside the text */
.closer-home { position: relative; margin: 128px calc(50% - var(--page-w) / 2) 0; padding: 88px calc(var(--page-w) / 2 - 50%);
  --text: #f3f5f8; --muted: #c3cad4; color: var(--text);
  background: linear-gradient(90deg, rgba(5, 7, 10, 0.92) 0%, rgba(5, 7, 10, 0.75) 45%, rgba(5, 7, 10, 0.35) 100%),
              url("../assets/art002e012702~small.jpg") center / cover no-repeat, #05070a; }
.closer-home + .home-section { margin-top: 128px; }
.closer-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: 48px; align-items: center; }
.my-flag { display: block; width: clamp(120px, 14vw, 180px); height: auto; margin-bottom: 22px; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.closer-home .home-h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
.closer-home .home-p { font-size: 18px; max-width: 620px; }
.closer-photo { position: relative; margin: 0; justify-self: center; width: min(340px, 100%); }
.closer-photo img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.closer-bg-credit { right: 16px; bottom: 10px; }
@media (max-width: 860px) {
  .closer-home { padding-top: 56px; padding-bottom: 56px; }
  .closer-inner { grid-template-columns: 1fr; }
}

/* Closer to home: "Try Will It Burn?" button */
.closer-try { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 13px 22px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 15px;
  text-decoration: none; box-shadow: 0 10px 30px rgba(242, 140, 56, 0.35); transition: background var(--speed), transform var(--speed); }
.closer-try:hover { background: var(--accent-hover); transform: translateY(-1px); }
.closer-try-sub { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
.closer-try-q { margin: 26px 0 0; font-size: 18px; font-weight: 600; color: var(--text); }
.closer-try-q + .closer-try { margin-top: 14px; }

/* ================= Back on Earth: photo intro + big story sections ================= */
.intro-kicker { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #ffb37a; }
.intro-title { margin: 0; max-width: 980px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 6.4vw, 88px); line-height: 1.04; letter-spacing: -0.02em; color: #fff;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55); }

.earth-over { padding-top: 40px; padding-bottom: 40px; }
.story-row { --story: #ee8030; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px;
  align-items: center; padding: 96px 0; border-bottom: 1px solid var(--border); }
.story-row.story-detector { --story: #a66cff; }
.story-row.story-tanks { --story: #1fa89a; }
.story-row.story-mist { --story: #3a8fd9; }
.story-row:nth-of-type(even) .story-photo { order: 2; }          /* photo left, right, left as you scroll */
.story-row .story-photo { margin: 0; }
.story-row .story-photo img { width: 100%; height: clamp(320px, 52vh, 560px); border-radius: 22px; border: 0;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4); }
.story-row .story-photo .img-credit { right: 12px; bottom: 12px; }
.story-row .story-top { margin: 0 0 18px; padding: 0; background: none; border: 0; justify-content: flex-start; gap: 14px; }
.story-row h3 { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; }
.story-row .story-stat { margin: 14px 0 26px; font-size: 16px; color: var(--muted); }
.story-row .story-stat b { display: block; font-family: var(--font-display); font-size: clamp(48px, 6vw, 76px); line-height: 1; color: var(--story); }
.story-row .story-steps { gap: 18px; }
.story-row .story-steps li { font-size: 16px; padding-left: 24px; }
.story-row .story-steps li::before { width: 10px; height: 10px; top: 8px; }
.story-row .story-steps li:not(:last-child)::after { left: 7px; }
.story-row .earth-links { margin-top: 24px; font-size: 14px; }
.story-row .story-icon, .story-row .story-years, .story-row .story-steps li::before { --story: inherit; }
.story-row .story-icon { color: var(--story); background: color-mix(in srgb, var(--story) 18%, transparent); }
.story-row .story-years { color: var(--story); }
.story-row .story-steps li::before { background: var(--story); }
.story-row .story-steps li:not(:last-child)::after { background: color-mix(in srgb, var(--story) 35%, transparent); }
.earth-over .big-quote { margin: 96px 0 40px; }
@media (max-width: 860px) {
  .story-row { grid-template-columns: 1fr; gap: 28px; padding: 64px 0; }
  .story-row:nth-of-type(even) .story-photo { order: 0; }
}
/* smoke-detector photo: zoom in from the bottom so the handwritten archive note at the top stays hidden */
.story-row.story-detector .story-photo { overflow: hidden; border-radius: 22px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4); }
.story-row.story-detector .story-photo img { transform: scale(1.22); transform-origin: 60% 100%; box-shadow: none; }
/* Home 02: wide photo between the heading and the triangle */
/* tall photo down the left of the whole section; heading + triangle on the right */
.pillars-layout { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; align-items: stretch; }
.pillars-photo { position: relative; margin: 0; }
.pillars-photo img { display: block; width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: 30% center;
  border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.pillars-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1181px) {      /* beside the photo: a slightly smaller triangle and narrower labels so it all fits */
  .pillars-main .pillar-diagram { width: 280px; margin: 88px auto 40px; }
  .pillars-main .pd-text { width: 210px; }
  .pillars-main .pd-prevention { left: calc(50% + 46px); }
  .pillars-main .pd-detection { right: calc(88.7% + 34px); }
  .pillars-main .pd-suppression { left: calc(88.7% + 34px); }
}
@media (max-width: 1180px) {      /* not enough room: photo on top, then heading and triangle */
  .pillars-layout { grid-template-columns: 1fr; gap: 28px; }
  .pillars-photo img { min-height: 0; height: 320px; object-position: center 25%; }
}

/* triangle: corners are markers only; each caption has a "See investigations" link */
.home-pillars .tri-node { cursor: default; }
.pd-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 700;
  color: var(--tag-color); text-decoration: none; }
.pd-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-link span { transition: transform var(--speed); }
.pd-link:hover span { transform: translate(2px, -2px); }
.pd-link { justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 16px;
  border: 1px solid color-mix(in srgb, var(--tag-color) 45%, transparent); background: color-mix(in srgb, var(--tag-color) 12%, transparent); }
.pd-link:hover { text-decoration: none; background: color-mix(in srgb, var(--tag-color) 24%, transparent); }

/* NASA Investigations: tickbox filters */
.inv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin: 14px 0 4px; }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 0; border: 0; }
.filter-group legend { float: left; margin-right: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); }
.filter-check { font-size: 14px; }
.filter-clear { font-size: 13px; }
/* triangle: no pulsing rings; the ↗ link sits right beside the pillar name */
.home-pillars .tri-dot::after { animation: none !important; display: none; }
.pd-name .pd-link { width: 24px; height: 24px; margin: 0 0 0 6px; font-size: 13px; vertical-align: middle; }
.pd-detection .pd-name { justify-content: flex-end; }

/* ================= NASA Investigations: filters sidebar ================= */
.filter-toggle { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 12px 16px;
  background: var(--card); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--radius);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.filter-toggle:hover { border-color: var(--border-hover); }
.filter-toggle[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }

.inv-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 12px; }
.inv-layout.side-closed { grid-template-columns: minmax(0, 1fr); }
.inv-layout.side-closed .inv-side { display: none; }
.inv-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
  display: grid; gap: 18px; padding: 18px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.inv-side-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.inv-side-close { width: 28px; height: 28px; border: 1px solid var(--border-2); border-radius: 50%; background: none;
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; }
.tab-caret-btn svg { transition: transform 0.2s; }
.tab-caret-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.inv-side-close:hover { color: var(--text); border-color: var(--accent); }
.inv-side .inv-sort { display: grid; gap: 6px; }
.inv-side .inv-sort span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.inv-side .inv-sort select { width: 100%; }
.inv-side .inv-filters { display: grid; gap: 18px; margin: 0; }
.inv-side .filter-group { display: grid; gap: 8px; }
.inv-side .filter-group legend { float: none; margin: 0 0 8px; padding: 0; }
.inv-side .filter-clear { justify-self: start; }
.inv-results { min-width: 0; }
.inv-results .inv-count { margin-top: 0; }
@media (max-width: 900px) {   /* small screens: the panel sits above the list instead of beside it */
  .inv-layout { grid-template-columns: minmax(0, 1fr); }
  .inv-side { position: static; max-height: none; }
}

/* ================= header: "Investigations" dropdown ================= */
.tab-menu { position: relative; }
.tab-caret { font-size: 10px; margin-left: 2px; }
.tab-dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 50; width: 260px;
  display: grid; padding: 6px; background: #10151d; border: 1px solid #2e3746; border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.tab-dropdown[hidden] { display: none; }
.tab-dropdown a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; color: #e8ecf1; text-decoration: none; }
.tab-dropdown a span { font-size: 12px; color: #9aa4b2; }
.tab-dropdown a:hover, .tab-dropdown a:focus-visible { background: rgba(242, 140, 56, 0.14); }
@media (max-width: 420px) { .tab-dropdown { left: auto; right: 0; transform: none; } }

/* ================= Investigations overview + Other investigations ================= */
.ov-over { padding-top: 32px; padding-bottom: 64px; }
.ov-block { margin-top: 96px; }
.ov-block:first-child { margin-top: 56px; }
.ov-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ov-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 24px; }
.ov-stat { padding: 20px 22px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
.ov-stat b { display: block; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; color: var(--accent); }
.ov-stat span { font-size: 14px; color: var(--muted); }
.ov-compare { display: flex; justify-content: center; gap: 56px; padding: 32px; background: var(--card); border: 1px solid var(--border); border-radius: 20px; }
.ov-compare > div { display: grid; justify-items: center; gap: 14px; }
.ov-compare small { font-size: 13px; color: var(--muted); }
.ov-compare .fc-flame { position: relative; }
.ov-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.ov-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; }
.ov-card img { width: calc(100% + 44px); margin: -22px -22px 4px; height: 190px; object-fit: cover; border-radius: 18px 18px 0 0; }
.ov-card h3 { margin: 0; font-family: var(--font-display); font-size: 19px; }
.ov-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.ov-card b, .ov-block .home-p b, .ov-list b { color: var(--text); }
.ov-card > a { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.ov-card > a:hover { text-decoration: underline; }
.ov-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.ov-photo { position: relative; margin: 0; }
.ov-photo img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.ov-archive { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ov-archive a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; }
.ov-archive a:hover { border-color: var(--accent); }
.ov-archive span { font-size: 13px; color: var(--muted); }
.ov-go { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; }
.ov-go-card { position: relative; display: grid; gap: 6px; padding: 26px 56px 26px 26px; border-radius: 18px; text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, var(--accent-soft), var(--card) 70%); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.ov-go-card b { font-family: var(--font-display); font-size: 22px; }
.ov-go-card span { font-size: 14px; color: var(--muted); }
.ov-go-card i { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 24px; color: var(--accent); transition: transform var(--speed); }
.ov-go-card:hover i { transform: translate(4px, -50%); }
.ov-source { margin-top: 28px; font-size: 12px; color: var(--muted); }
.ov-source a { color: var(--muted); }
.ov-highlight { padding: 28px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--accent); }
.ov-highlight p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.ov-highlight .ov-highlight-k { margin-bottom: 8px; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); }
.ov-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ov-steps li { padding: 22px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.ov-steps li b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 18px; color: var(--accent); }
@media (max-width: 860px) {
  .ov-split, .ov-stats, .ov-steps { grid-template-columns: 1fr; }
}

/* Investigations tab: the tab opens the overview; a small ▾ opens the menu */
.tab-menu { display: inline-flex; align-items: center; }
.tab-caret-btn { margin-left: -6px; padding: 6px 10px; min-width: 34px; min-height: 34px; background: none; border: 0; border-radius: 8px;
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; }
.tab-caret-btn svg { transition: transform 0.2s; }
.tab-caret-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.tab-caret-btn:hover, .tab-caret-btn[aria-expanded="true"] { background: rgba(242, 140, 56, 0.12); }
.tab-caret-btn:hover, .tab-caret-btn[aria-expanded="true"] { color: var(--text); }
.tab-dropdown { width: 220px; left: 0; right: auto; transform: none; }
/* invisible bridge over the gap between the tab and the menu, so moving the mouse down doesn't close it */
.tab-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.tab-dropdown a { font-weight: 600; font-size: 14px; }

/* overview 03: big pictures in a horizontal row */
.ov-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ov-tile { display: flex; flex-direction: column; gap: 10px; }
.ov-tile img, .ov-tile video { display: block; width: 100%; height: clamp(220px, 28vw, 340px); object-fit: cover; background: #000;
  border-radius: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.ov-tile h3 { margin: 8px 0 0; font-family: var(--font-display); font-size: 24px; }
.ov-tile p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.ov-tile a { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.ov-tile a:hover { text-decoration: underline; }

/* overview 04: both rack photos */
.ov-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ov-photos img { height: 260px; object-fit: cover; }

/* overview 05: archived experiments as one horizontal, scrollable row */
.ov-hscroll { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.ov-hscroll li { flex: 0 0 240px; scroll-snap-align: start; }
.ov-hscroll a { height: 100%; }

/* Other investigations: one simple section per agency */
.agency { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin: 24px 0 0; }
.agency-photo { position: relative; margin: 0; }
.agency-photo img { display: block; width: 100%; height: clamp(260px, 32vw, 420px); object-fit: cover; border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
.agency-tag { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.agency h2 { margin: 6px 0 4px; font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); }
.agency-sub { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.agency-body > p:not(.agency-tag):not(.agency-sub) { margin: 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
.agency-body b { color: var(--text); }
.agency-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 14px; font-weight: 600; }
.agency-links a { color: var(--text); }
.agency-links .earth-ask { color: var(--accent); text-decoration: none; }
@media (max-width: 860px) {
  .ov-row, .agency, .ov-photos { grid-template-columns: 1fr; }
}
/* overview 04: two sections, photo left then photo right */
.ov-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 32px; }
.ov-feature-flip .ov-photo { order: 2; }
.ov-feature .ov-photo img { height: clamp(260px, 30vw, 400px); object-fit: cover; }
.ov-feature h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 26px; }
.ov-feature p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
.ov-feature b { color: var(--text); }
/* overview 05: a simple vertical list */
.ov-vlist { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 760px; }
@media (max-width: 860px) { .ov-feature { grid-template-columns: 1fr; gap: 20px; } .ov-feature-flip .ov-photo { order: 0; } }
/* Investigations overview: bigger text */
.ov-over .home-p { font-size: 18px; line-height: 1.75; max-width: 860px; }
.ov-over .home-h2 { font-size: clamp(28px, 3.2vw, 38px); }
.ov-over .home-kicker { font-size: 14px; }
.ov-stat span { font-size: 16px; }
.ov-tile h3 { font-size: 28px; }
.ov-tile p { font-size: 17px; }
.ov-tile a { font-size: 15px; }
.ov-feature h3 { font-size: 30px; }
.ov-feature p { font-size: 18px; line-height: 1.75; }
.ov-archive a { padding: 16px 18px; font-size: 17px; }
.ov-archive span { font-size: 15px; }
.ov-go-card b { font-size: 24px; }
.ov-go-card span { font-size: 16px; }
.ov-source { font-size: 14px; }
.ov-go-card { padding-top: 30px; padding-bottom: 30px; }

/* Home: Why Flamma? (centred) */
.why-flamma { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 56px 32px 48px; background: var(--card); border: 1px solid var(--border); border-radius: 28px; }
.why-logo { width: clamp(160px, 20vw, 240px); height: auto; filter: drop-shadow(0 16px 40px rgba(242, 140, 56, 0.35)); }
.why-name { margin: 18px 0 26px; padding-left: 0.3em; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(36px, 5vw, 56px); letter-spacing: 0.3em; }
.why-flamma .home-kicker { margin-bottom: 10px; }
.why-lead { margin: 0; max-width: 780px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.7; color: var(--text); }
.why-me { display: block; margin-top: 32px; }
.why-me img { display: block; width: 84px; height: auto; transition: transform var(--speed); }
.why-me:hover img { transform: scale(1.06); }
.why-by { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.why-by b { color: var(--accent); }
.why-connect { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.why-connect:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.why-disclaimer { margin: 28px 0 0; max-width: 720px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.6; color: var(--muted); }
.why-disclaimer a { color: var(--text); }
.why-me { margin-top: 24px; }
.why-me img { width: clamp(180px, 22vw, 260px); }
.why-me { margin-top: 8px; }
.why-me img { width: clamp(280px, 34vw, 420px); margin-bottom: -18px; }   /* the PNG has wide empty edges, so it is drawn larger */
.why-more { margin: 18px 0 0; font-size: 16px; font-weight: 600; color: var(--text); }
.why-more + .why-connect { margin-top: 10px; }
.why-by { margin-top: 32px; }
/* the creator's logo with a speech bubble on its right */
.why-me-row { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; }
.why-me-row .why-me { margin: 0; }
.why-bubble { position: relative; display: grid; justify-items: start; gap: 10px; max-width: 250px; padding: 16px 18px;
  text-align: left; background: var(--card-2); border: 1px solid var(--border-2); border-radius: 18px; }
.why-bubble::before { content: ""; position: absolute; left: -9px; top: 50%; width: 16px; height: 16px;
  background: var(--card-2); border-left: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2);
  transform: translateY(-50%) rotate(45deg); }   /* the tail, pointing at the drawing */
.why-bubble .why-more { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; }
.why-bubble .why-connect { margin: 0; padding: 7px 14px; font-size: 13px; }
@media (max-width: 600px) {
  .why-me-row { flex-direction: column; }
  .why-bubble { justify-items: center; text-align: center; }
  .why-bubble::before { left: 50%; top: -9px; transform: translateX(-50%) rotate(135deg); }
}
.why-bubble { margin-left: -70px; }      /* sit close to the drawing (the PNG has an empty right edge) */
@media (max-width: 600px) { .why-bubble { margin-left: 0; margin-top: -20px; } }

/* ================= one investigation's own page (#experiment/<name>, results.js) ================= */
/* fuels / materials in its graphs: categorical palette checked with the dataviz validator
   (dark: all checks pass on #151B24; light: three slots are under 3:1 on white, so every
   graph has a legend, hover numbers and the full data table below it) */
:root { --cat-1: #3987e5; --cat-2: #199e70; --cat-3: #9085e9; --cat-4: #d55181; --cat-5: #c98500; --cat-6: #008300; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --cat-1: #2a78d6; --cat-2: #1baf7a; --cat-3: #6250d6; --cat-4: #e87ba4; --cat-5: #eda100; --cat-6: #008300; }
}
:root[data-theme="light"] { --cat-1: #2a78d6; --cat-2: #1baf7a; --cat-3: #6250d6; --cat-4: #e87ba4; --cat-5: #eda100; --cat-6: #008300; }

.see-detail-btn { text-decoration: none; color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 700; }
.see-detail-btn:hover { filter: brightness(1.08); color: var(--on-accent); }
.detail { padding: 28px 0 72px; }
.detail-back { display: inline-flex; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.detail-back:hover { color: var(--accent); }
.detail-head { display: flex; align-items: flex-start; gap: 18px; margin-top: 22px; }
.detail-head .inv-icon { flex: none; width: 56px; height: 56px; }
.dt-head-text { flex: 1; min-width: 0; }
.td-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.dt-title { margin: 6px 0 10px; font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 36px); line-height: 1.2; }
.dt-intro { margin: 0 0 12px; font-size: 17px; line-height: 1.6; max-width: 820px; }
.dt-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 14px; color: var(--muted); }
.dt-links a { color: var(--accent); }
.detail-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 28px; }
.dt-text-card { padding: 18px 20px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.dt-text-card h3 { margin: 0 0 8px; font-size: 15px; }
.dt-clamp { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.dt-text-card.open .dt-clamp { display: block; -webkit-line-clamp: unset; }
.dt-more { margin-top: 8px; padding: 0; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer; }
.detail-block { margin-top: 56px; }
.detail-block > h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 24px; }
.detail-sub { margin: 0 0 16px; font-size: 14px; color: var(--muted); }

/* graphs */
.dt-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 18px; align-items: start; }
.rs-card { margin: 0; padding: 18px 20px; }
.rs-card h3 { margin: 0; font-size: 16px; }
.rs-sub { margin: 4px 0 12px; font-size: 13px; }
.rs-svg { display: block; width: 100%; height: auto; }
.rs-label { fill: var(--text); font-size: 12px; }
.rs-value { fill: var(--muted); font-size: 12px; font-weight: 700; }
.rs-mark { cursor: pointer; }
rect.rs-mark:hover { stroke: var(--text); stroke-width: 1.5; }
.rs-legend { margin-top: 10px; }
.rs-take { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.6; }
.rs-tip { position: fixed; z-index: 80; max-width: 320px; padding: 8px 10px; font-size: 12px; line-height: 1.45; pointer-events: none;
  color: #e8ecf1; background: #10151d; border: 1px solid #2e3746; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.rs-tip[hidden] { display: none; }

/* the data table: cleaned and/or NASA's original (side by side when both are ticked) */
.td-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.td-show { font-size: 13px; font-weight: 700; color: var(--muted); }
.td-check { font-size: 14px; font-weight: 600; cursor: pointer; }
#td-part { width: auto; margin-left: auto; }
.td-panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.td-panes.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.td-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.td-pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.td-pane-head h3 { margin: 0; font-size: 15px; }
.td-pane-head .csv-btn { margin-left: auto; }
.td-count { font-size: 13px; color: var(--muted); }
.td-note { margin: 0; font-size: 13px; color: var(--muted); }
.td-wrap.table-wrap { height: 460px; max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.td-table { font-size: 13px; }
.td-table th { position: sticky; top: 0; background: var(--card); white-space: nowrap; }
.td-table td { white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }

/* Ask about this investigation */
.td-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.td-ask input { flex: 1 1 260px; min-width: 0; padding: 12px 18px; font: inherit; font-size: 15px; color: var(--text);
  background: var(--card); border: 1px solid var(--border-2); border-radius: 999px; }
.td-ask input:focus { outline: none; border-color: var(--accent); }
.td-ask-btn { padding: 12px 22px; font: inherit; font-size: 15px; font-weight: 700; color: var(--on-accent);
  background: var(--accent); border: 0; border-radius: 999px; cursor: pointer; }
.td-ask .td-tag { margin: 0; font-size: 14px; border-radius: 999px; }
.td-answer { margin-top: 14px; padding: 16px 18px; background: var(--card);
  border: 1px solid var(--border-2); border-left: 3px solid var(--accent); border-radius: 12px; font-size: 15px; }
.td-answer-q { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.td-answer-text { margin: 0; line-height: 1.7; white-space: pre-line; }
.td-answer-text.is-loading { color: var(--muted); font-style: italic; }
.td-answer-src { margin: 12px 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.td-answer-list { margin: 0; padding-left: 18px; font-size: 13px; }
.td-answer-list a { color: var(--accent); }
@media (max-width: 800px) {
  .td-panes.two { grid-template-columns: minmax(0, 1fr); }
  .td-wrap.table-wrap { height: 360px; }
  #td-part { margin-left: 0; }
  .detail-head { flex-wrap: wrap; }
  .detail-head .pillar-tag { order: -1; }
}
.compare-dl { margin: 0 0 12px; }

/* ================= BM / EN button (Google Translate, js/translate.js) ================= */
.lang-toggle { width: auto; padding: 0 10px; gap: 6px; grid-auto-flow: column; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; margin-right: 8px; }
.lang-toggle .lang-sep { color: var(--border-2); font-weight: 400; }
.lang-toggle .lang-en { color: var(--accent); }                 /* English on */
.lang-toggle.is-ms .lang-en { color: inherit; }
.lang-toggle.is-ms .lang-ms { color: var(--accent); }           /* Malay on */
/* "Translated by Google Translate": shown only while Malay is on */
.gt-credit { position: fixed; z-index: 60; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none;
  background: var(--card); border: 1px solid var(--border-2); border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.gt-credit:hover { color: var(--text); border-color: var(--accent); }
.gt-credit[hidden] { display: none; }
/* hide Google's own banner bar, hover pop-ups and highlight, so Flamma's header stays in place */
.goog-te-banner-frame, iframe.skiptranslate, .VIpgJd-ZVi9od-ORHb-OEVmcd, #goog-gt-tt, .goog-te-balloon-frame,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-yAWNEb-L7lbkb { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight, font[style*="background-color"] { background: none !important; box-shadow: none !important; }
#google_translate_element { display: none; }