/* Thermodynamics: the course's own content components, drawn in the Field
   Station style (fs.css). The older course's color names (--hot, --cold,
   --accent...) map onto Field Station tokens here, so its diagrams and
   simulators follow light and dark mode with everything else. */

:root{
  --surface:var(--paper-alt); --card:var(--paper); --border:var(--line); --text:var(--ink); --dim:var(--muted);
  --accent:#2C5F8E; --ah:#234C72; --ag:rgba(44,95,142,.10);
  --hot:#B4441C; --hbg:rgba(180,68,28,.09);
  --cold:#1F6E8C; --cbg:rgba(31,110,140,.09);
  --ok:#3E6B57; --okbg:#E3ECE6; --err:#B03A22; --errbg:#F4E3D8;
  --warn:#8A5A12; --purple:#6B3FA0; --pbg:rgba(107,63,160,.09);
  --r:10px;
  --brand:#B0234F; /* course color: the logo and the hub card (data/events.json in science-lab) */
  --c-g6:#2E7D5B; --c-g7:#8A3B6E; --c-g8:#4F5B66; --c-g9:#B4441C;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --accent:#8DB8E6; --ah:#A9CBEE; --ag:rgba(141,184,230,.14);
  --hot:#F2876A; --hbg:rgba(242,135,106,.13);
  --cold:#6CC3C7; --cbg:rgba(108,195,199,.12);
  --ok:#7FB89C; --okbg:#1E3329; --err:#F2876A; --errbg:#3A2418;
  --warn:#D9A15B; --purple:#C2A2EC; --pbg:rgba(194,162,236,.12);
  --c-g6:#7FCBA6; --c-g7:#E2A0CB; --c-g8:#AEBAC6; --c-g9:#F2876A;
  --brand:#FF8FAB;
} }
:root[data-theme="dark"]{
  --accent:#8DB8E6; --ah:#A9CBEE; --ag:rgba(141,184,230,.14);
  --hot:#F2876A; --hbg:rgba(242,135,106,.13);
  --cold:#6CC3C7; --cbg:rgba(108,195,199,.12);
  --ok:#7FB89C; --okbg:#1E3329; --err:#F2876A; --errbg:#3A2418;
  --warn:#D9A15B; --purple:#C2A2EC; --pbg:rgba(194,162,236,.12);
  --c-g6:#7FCBA6; --c-g7:#E2A0CB; --c-g8:#AEBAC6; --c-g9:#F2876A;
  --brand:#FF8FAB;
}

/* ---------- guide body text ---------- */
.tguide .gsec{margin:0 0 56px}
.tguide .gsec p{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0 0 14px;max-width:720px}
.tguide .gsec strong{color:var(--ink);font-weight:700}
.tguide .gsec ul:not(.vl),.tguide .gsec ol{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:720px;padding-left:22px}
.tguide .gsec h3{font-family:var(--f-display);font-size:21px;color:var(--slate);margin:28px 0 8px}
.tguide .gsec svg{max-width:100%;height:auto}
.tguide .gsec canvas{max-width:100%}

/* Why it matters */
.hook{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--moss);border-radius:0 var(--r-card) var(--r-card) 0;padding:18px 20px;margin:24px 0 40px;box-shadow:var(--shadow)}
.hook-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--moss);margin-bottom:4px}
.hook-title{font-family:var(--f-display);font-size:22px;font-weight:700;color:var(--slate);margin-bottom:6px}
.hook-body{font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.hook-examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hook-pill{font-family:var(--f-mono);font-size:11.5px;font-weight:600;color:var(--tint-moss-ink);background:var(--tint-moss-bg);border-radius:999px;padding:3px 10px}

/* Formula blocks */
.fb{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;margin:16px 0;overflow:hidden;max-width:760px}
.fb-eq{background:var(--paper-alt);padding:14px 18px;border-bottom:1px solid var(--line)}
.fb-eq-inner,.feq{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;line-height:1.5;font-size:21px;font-weight:600;color:var(--ink);font-family:var(--f-display)}
.fd{font-size:13.5px;color:var(--muted);line-height:1.5;padding:10px 18px}
.fb > .fd{padding:10px 18px 12px}
.vl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.vl li{display:flex;align-items:baseline;font-size:14px;color:var(--muted);line-height:1.5;padding:7px 0;border-bottom:1px solid var(--rule)}
.vl li:last-child{border-bottom:none}
.vk{font-weight:700;color:var(--accent);min-width:110px;flex-shrink:0;padding-right:12px;font-family:var(--f-display);font-style:italic;font-size:16px}
.vd{flex:1;color:var(--ink-2)}
@media (max-width:480px){ .vk{min-width:74px} .fb-eq-inner,.feq{font-size:18px} }
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 2px;font-size:.9em}
.frac .num{border-bottom:1.5px solid currentColor;padding:0 3px 2px;text-align:center;line-height:1.2}
.frac .den{padding:2px 3px 0;text-align:center;line-height:1.2}
.fsep{color:var(--muted);margin:0 4px;font-size:.9em;align-self:center}
.tguide sub,.tguide sup{font-size:.7em;line-height:0;position:relative;vertical-align:baseline}
.tguide sup{top:-.5em} .tguide sub{bottom:-.3em}

/* Conversion rows (Guide 2) */
.cv{display:flex;flex-direction:column;gap:8px;margin:8px 0 16px;max-width:760px}
.cv-row{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:10px 14px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.cv-row .fd{width:100%;padding:6px 0 0;margin-top:4px;border-top:1px solid var(--rule)}
.T{font-size:18px;font-weight:600;color:var(--ink)}
.Tlbl{display:inline-block;font-family:var(--f-mono);font-size:11px;font-weight:600;padding:1px 6px;border-radius:5px;vertical-align:middle;margin-left:2px;line-height:1.5}
.Tlbl-k{background:var(--pbg);color:var(--purple);border:1px solid var(--purple)}
.Tlbl-c{background:var(--ag);color:var(--accent);border:1px solid var(--accent)}
.Tlbl-f{background:var(--hbg);color:var(--hot);border:1px solid var(--hot)}
.cv-eq{font-size:17px;color:var(--ink);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cv-op{color:var(--muted)}
.cv-frac{display:inline-flex;flex-direction:column;align-items:center;font-size:.92rem;vertical-align:middle;margin:0 2px}
.cv-frac .cn{border-bottom:1.5px solid currentColor;padding:0 4px 1px;text-align:center;line-height:1.3}
.cv-frac .cd{padding:1px 4px 0;text-align:center;line-height:1.3}

/* Callouts */
.c-h,.c-c,.c-w,.c-p{border-radius:0 12px 12px 0;padding:12px 16px;margin:14px 0;font-size:15px;line-height:1.55;max-width:760px}
.c-h{background:var(--tint-rust-bg);color:var(--tint-rust-ink);border-left:4px solid var(--rust)}
.c-c{background:var(--tint-slate-bg);color:var(--tint-slate-ink);border-left:4px solid var(--cold)}
.c-w{background:var(--tint-ochre-bg);color:var(--tint-ochre-ink);border-left:4px solid var(--ochre)}
.c-p{background:var(--pbg);color:var(--ink);border-left:4px solid var(--purple)}
.c-h strong,.c-c strong,.c-w strong,.c-p strong{color:inherit}

/* Tables */
.tguide .tbl-wrap{margin:12px 0 18px;max-width:760px}
.dt{border-collapse:collapse;width:100%;font-size:14.5px;min-width:320px}
.dt th{text-align:left;padding:10px 14px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--paper-alt);border-bottom:1px solid var(--rule)}
.dt td{padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
.dt td:first-child{color:var(--ink);font-weight:600}
.dt tr:last-child td{border-bottom:none}

/* Pills */
.pr{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.pi,.pi-h,.pi-c{border-radius:999px;padding:4px 11px;font-size:13px;font-weight:600;line-height:1.35}
.pi{background:var(--ag);color:var(--accent);border:1px solid var(--accent)}
.pi-h{background:var(--hbg);color:var(--hot);border:1px solid var(--hot)}
.pi-c{background:var(--cbg);color:var(--cold);border:1px solid var(--cold)}

/* People */
.people{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:4px 20px;max-width:760px}
.person{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--rule)}
.person:last-child{border-bottom:none}
.pav{width:44px;height:44px;min-width:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:17px;font-weight:700;color:var(--c,var(--slate));background:color-mix(in srgb, var(--c,var(--slate)) 14%, var(--paper));border:1.5px solid var(--c,var(--slate))}
.pinfo{flex:1;min-width:0}
.pname{font-family:var(--f-display);font-size:19px;font-weight:700;color:var(--slate)}
.pdates{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);margin-top:1px}
.pdesc{font-size:15px;color:var(--ink-2);line-height:1.55;margin-top:4px}

/* Embedded labs (gas explorer, Carnot explorer, cooling simulator) */
#gas-explorer,#carnot-explorer,#nc-sim{background:var(--paper)!important;border:1px solid var(--line)!important;border-radius:var(--r-card)!important;padding:20px!important;box-shadow:var(--shadow);max-width:760px}
.ge-tab.active{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--paper)!important}
.tguide .gsec div[style*="background:var(--bg)"]{max-width:760px}

/* Bottom of a guide */
.keepgoing .card .mark{color:var(--c,var(--slate))}
.tguide .gsec .card h3{font-size:22px;margin:0 0 5px;color:var(--ink)}
.tguide .gsec .card p{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0}
.tguide .check-panel{max-width:760px}
.snonly{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;background:var(--tint-slate-bg);color:var(--tint-slate-ink);border:1px solid var(--tint-slate-line);border-radius:10px;padding:8px 12px;margin:4px 0 14px;font-size:14px;line-height:1.45;max-width:760px}
.snonly span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;background:var(--slate);color:var(--paper);border-radius:5px;padding:2px 7px;flex:none}