/* wetbulb — one stylesheet, no framework, no build step.
 *
 * The grammar, held to deliberately:
 *   · radius 0 everywhere — this is an instrument, not a card deck
 *   · monospace with tabular figures for every number, sans for prose
 *   · hairlines and corner brackets instead of boxes
 *   · one accent per meaning; danger is never decorative
 *   · modelled values are dashed, measured values are solid — honesty as form
 */

:root {
  color-scheme: dark light;

  --bg: #0e0d0c;
  --bg-panel: #151312;
  --bg-sunken: #1c1917;
  --ink: #ece7df;
  --ink-soft: #a49c90;
  --ink-faint: #6f665c;
  --line: #2a2622;
  --line-bright: #3d3730;

  /* One temperature ramp, used for meaning and nothing else. */
  --cool: #6f9dc4;
  --temperate: #b9a06a;
  --warm: #d4813f;
  --hot: #c8502f;
  --critical: #a8232a;

  --accent: var(--warm);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 40px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f4ef;
    --bg-panel: #fffdf9;
    --bg-sunken: #efeae1;
    --ink: #1a1714;
    --ink-soft: #554d44;
    --ink-faint: #8b8175;
    --line: #ddd6ca;
    --line-bright: #c4bbab;

    --cool: #3f6f96;
    --temperate: #8a7134;
    --warm: #b2652a;
    --hot: #a63a1c;
    --critical: #8c1a20;
  }
}

* { box-sizing: border-box; }

/* Long monospace strings and unbroken words are what usually push a page
 * sideways, and the damage is global: one over-wide child clips every line.
 *
 * Deliberately NOT `overflow-x: hidden` on the body. That hides the symptom
 * and leaves the bug, which is worse than the bug — the next person to widen
 * something would never find out. Breaking words fixes the cause. */
p, li, td, th, h1, h2, h3, figcaption, label, legend { overflow-wrap: break-word; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 var(--s5); }

.mono-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s2);
}

/* ---------------------------------------------------------- masthead ---- */

.masthead {
  border-bottom: 1px solid var(--line);
  padding: var(--s6) 0 var(--s5);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hot) 7%, transparent) 0%, transparent 70%),
    var(--bg);
}

.masthead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}
@media (max-width: 52rem) { .masthead-grid { grid-template-columns: 1fr; gap: var(--s4); } }

.masthead h1 {
  margin: 0 0 var(--s2);
  font-family: var(--mono);
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.lede {
  margin: 0 0 var(--s3);
  font-size: clamp(1.05rem, 2.3vw, 1.28rem);
  line-height: 1.42;
  color: var(--ink);
  max-width: 34ch;
}

.blurb { margin: 0; color: var(--ink-soft); max-width: 56ch; }
.blurb strong { color: var(--warm); font-weight: 600; }

.masthead-note {
  border-inline-start: 2px solid var(--line-bright);
  padding-inline-start: var(--s4);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.masthead-note p { margin: 0 0 var(--s2); }
.privacy { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-faint); }

main { padding: var(--s6) var(--s5) var(--s6); }

/* -------------------------------------------------------- instruments ---- */

.instrument {
  position: relative;
  border-top: 1px solid var(--line);
  padding: var(--s6) 0 var(--s5);
}
.instrument::before,
.instrument::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--line-bright);
}
.instrument::before { left: 0; border-left: 1px solid var(--line-bright); }
.instrument::after { right: 0; border-right: 1px solid var(--line-bright); }

.instrument-head { margin-bottom: var(--s5); max-width: 62ch; }
.instrument h2 {
  margin: 0 0 var(--s2);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.instrument-sub { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }
.instrument-quiet { opacity: 0.9; }

/* -------------------------------------------------------------- chart ---- */

.chart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 56rem) { .chart-layout { grid-template-columns: 1fr; } }

.chart-frame { margin: 0; }
.chart-surface { background: var(--bg-panel); border: 1px solid var(--line); }
.chart-surface svg { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
.chart-surface svg:active { cursor: grabbing; }

.wb-grid { stroke: var(--line); stroke-width: 0.5; }
.wb-tick {
  fill: var(--ink-faint);
  font-family: var(--mono);
  font-size: 8px;
}
.wb-axis {
  fill: var(--ink-faint);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.wb-zone-danger { fill: var(--critical); opacity: 0.16; }

.wb-iso {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 0.7;
  opacity: 0.55;
}
.wb-iso-measured { stroke: var(--hot); stroke-width: 1.6; opacity: 1; }
.wb-iso-theoretical {
  stroke: var(--ink);
  stroke-width: 1.1;
  opacity: 0.85;
  stroke-dasharray: 7 3;
}
.wb-iso-personal { stroke: var(--warm); stroke-width: 1.4; opacity: 1; stroke-dasharray: 1 2.5; }

.wb-iso-label {
  fill: var(--ink-faint);
  font-family: var(--mono);
  font-size: 7px;
}
.wb-iso-label-limit { fill: var(--hot); font-weight: 600; }
.wb-iso-label-theoretical { fill: var(--ink-soft); font-weight: 600; }
.wb-iso-label-personal { fill: var(--warm); font-weight: 600; }

.wb-fan-edge {
  fill: none;
  stroke: var(--cool);
  stroke-width: 1.6;
  stroke-dasharray: 1 2.5;
  stroke-linecap: round;
  opacity: 1;
}

.wb-crosshair { stroke: var(--ink-soft); stroke-width: 0.5; stroke-dasharray: 2 2; opacity: 0.65; }
.wb-point-halo { fill: var(--accent); opacity: 0.18; }
.wb-point { fill: var(--accent); stroke: var(--bg-panel); stroke-width: 1.5; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
}
.legend-key { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch { width: 16px; height: 0; border-top-width: 2px; border-top-style: solid; }
.legend-swatch.measured { border-color: var(--hot); }
.legend-swatch.theoretical { border-color: var(--ink); border-top-style: dashed; }
.legend-swatch.personal { border-color: var(--warm); border-top-style: dotted; }
.legend-swatch.fan { border-color: var(--cool); border-top-style: dashed; }
.legend-swatch.iso { border-color: var(--ink-faint); border-top-width: 1px; }

/* ------------------------------------------------------------ readout ---- */

.readout { border-inline-start: 2px solid var(--line-bright); padding-inline-start: var(--s4); }

.readout-verdict { margin: 0 0 var(--s4); }
.readout-band {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--s1);
}
.readout-headline { margin: 0; font-size: 1.06rem; line-height: 1.4; }

.band-safe .readout-band { color: var(--cool); }
.band-watch .readout-band { color: var(--temperate); }
.band-strain .readout-band { color: var(--warm); }
.band-danger .readout-band { color: var(--hot); }
.band-critical .readout-band { color: var(--critical); }
.band-critical .readout-headline { color: var(--critical); font-weight: 600; }

/* A readout of several facts is a table, not a stack of sentences. */
.readout-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.readout-table th,
.readout-table td { padding: var(--s2) 0; border-bottom: 1px solid var(--line); text-align: start; }
.readout-table th { font-weight: 400; color: var(--ink-soft); }
.readout-table td.value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
.readout-table td.source {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  text-align: end;
  padding-inline-start: var(--s3);
  white-space: nowrap;
}

/* Below this the provenance column is what has to give. It is the least
 * urgent thing in the table and the widest, and keeping it would push the
 * whole document past the viewport — which clips everything else, including
 * the prose. Horizontal overflow is always a bug; this is where it starts. */
@media (max-width: 34rem) {
  .readout-table td.source { display: none; }
  .readout-table th { font-size: 0.82rem; }
}
.readout-table tr.primary td.value { font-size: 1.15rem; color: var(--accent); }

.margin-bar {
  margin-top: var(--s4);
  height: 3px;
  background: var(--bg-sunken);
  position: relative;
  overflow: hidden;
}
.margin-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.margin-caption {
  margin: var(--s2) 0 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
}

/* ----------------------------------------------------------- controls ---- */

.controls {
  display: grid;
  /* Two named columns, not auto-fit: with auto-fit the two sliders claimed
   * two of five possible tracks and left the rest of the row empty. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

/* The presets are a set, not a field: give them the full row so they lay out
 * in two lines instead of four in a starved column. */
.control-presets { grid-column: 1 / -1; }

@media (max-width: 40rem) {
  .controls { grid-template-columns: 1fr; }
}

.control { display: block; }
.control-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: var(--s2);
}
.control-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-size: 0.92rem;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  background: transparent;
}

input[type="range"]:focus-visible,
button:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.preset-row { display: flex; flex-wrap: wrap; gap: var(--s1); }

button.preset {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 5px var(--s2);
  border: 1px solid var(--line-bright);
  border-radius: 0;
  background: var(--bg-sunken);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
button.preset:hover { color: var(--ink); border-color: var(--accent); }
button.preset[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------ factors ---- */

.factor-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s5);
}

.factor-group h3 {
  margin: 0 0 var(--s3);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}

.factor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: baseline;
  padding: var(--s2) 0;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.factor:hover { border-bottom-color: var(--line); }
.factor input { margin: 0; accent-color: var(--accent); }
.factor-label { font-size: 0.88rem; }
.factor-shift {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  color: var(--ink-faint);
}
.factor input:checked ~ .factor-shift { color: var(--accent); }
.factor-why {
  grid-column: 2 / -1;
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.45;
  margin-top: 2px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.18s ease, opacity 0.18s ease;
}
.factor:hover .factor-why,
.factor:focus-within .factor-why,
.factor input:checked ~ .factor-why { max-height: 8rem; opacity: 1; }

.shift-summary {
  margin: var(--s5) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.shift-summary strong { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------ actions ---- */

.actions { list-style: none; margin: 0; padding: 0; counter-reset: step; }

.actions li {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.actions li:last-child { border-bottom: 0; }
.actions li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  padding-top: 2px;
}
.action-title { margin: 0 0 var(--s1); font-size: 1rem; font-weight: 600; }
.action-detail { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

.tone-urgent .action-title { color: var(--critical); }
.tone-urgent::before { color: var(--critical); }
.tone-stop .action-title { color: var(--hot); }
.tone-stop::before { color: var(--hot); }

/* ---------------------------------------------------------------- day ---- */

.day-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 56rem) { .day-layout { grid-template-columns: 1fr; } }

.day-side { border-inline-start: 2px solid var(--line-bright); padding-inline-start: var(--s4); }
.window-summary { margin: 0 0 var(--s5); font-size: 0.95rem; line-height: 1.5; }
.window-summary strong { color: var(--accent); font-family: var(--mono); }

.day-controls { display: grid; gap: var(--s4); }
.control-compact .control-label { font-size: 0.78rem; }

.building { border: 0; padding: 0; margin: 0; }
.building div { display: grid; gap: var(--s1); margin-top: var(--s2); }
.building label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s2);
  align-items: baseline;
  font-size: 0.84rem;
  cursor: pointer;
}
.building input { margin: 0; accent-color: var(--accent); }
.building-note {
  grid-column: 2;
  font-size: 0.74rem;
  color: var(--ink-faint);
  line-height: 1.4;
}

.wb-day-grid { stroke: var(--line); stroke-width: 0.5; }
.wb-day-outdoor { fill: none; stroke: var(--warm); stroke-width: 1.4; stroke-dasharray: 3 2; }
.wb-day-indoor { fill: none; stroke: var(--cool); stroke-width: 1.4; stroke-dasharray: 3 2; }
.wb-day-window { fill: var(--cool); opacity: 0.14; }
.wb-day-now { stroke: var(--ink-faint); stroke-width: 0.5; stroke-dasharray: 1 2; }

/* ----------------------------------------------------------- measures ---- */

.measures { display: grid; gap: var(--s3); }

.measure {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.measure:last-child { border-bottom: 0; }

.measure-weight { display: grid; gap: 3px; padding-top: 4px; }
.weight-bar { height: 3px; background: var(--bg-sunken); position: relative; }
.weight-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.weight-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  color: var(--ink-faint);
}
.measure-title { margin: 0 0 var(--s1); font-size: 0.98rem; font-weight: 600; }
.measure-detail { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }

/* ------------------------------------------------------------- limits ---- */

.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s5); }
.limit p:last-child { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

/* ------------------------------------------------------------- footer ---- */

footer {
  padding: var(--s5) var(--s5) var(--s6);
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.84rem;
}
footer a { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .factor-why { max-height: none; opacity: 1; }
}

/* ------------------------------------------------------- location + live ---- */

.instrument-first { border-top: 0; padding-top: var(--s5); }
.instrument-first::before, .instrument-first::after { display: none; }

.where {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 46rem) { .where { grid-template-columns: 1fr; gap: var(--s4); } }

.place-form { display: grid; gap: var(--s2); }
.place-row { display: flex; gap: var(--s2); }
.place-row input { flex: 1 1 auto; min-width: 0; }
.place-row button { flex: 0 0 auto; }
.preset-wide { width: 100%; text-align: center; padding: var(--s2); }

input[type="text"] {
  width: 100%;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-bright);
  border-radius: 0;
  background: var(--bg-sunken);
  color: var(--ink);
  font: inherit;
  font-family: var(--mono);
  font-size: 0.85rem;
}
input[type="text"]::placeholder { color: var(--ink-faint); }

.where-status {
  min-height: 3rem;
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--line-bright);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.where-status:empty { border-inline-start-color: transparent; }
.where-ok { border-inline-start-color: var(--cool); }
.where-error { border-inline-start-color: var(--hot); color: var(--hot); }
.where-busy { border-inline-start-color: var(--temperate); }
.where-detail {
  display: block;
  margin-top: var(--s1);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.spin { font-family: var(--mono); font-size: 0.85rem; }

/* --- findings: what live data adds ---------------------------------------- */

.findings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
}
.findings:empty { margin-top: 0; }

.finding {
  border-top: 2px solid var(--line-bright);
  padding-top: var(--s3);
}
.finding-strong { border-top-color: var(--hot); }
.finding-good { border-top-color: var(--cool); }
.finding-flat { border-top-color: var(--line-bright); }

.finding-source {
  margin: 0 0 var(--s2);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.finding-title { margin: 0 0 var(--s2); font-size: 1rem; font-weight: 600; line-height: 1.35; }
.finding-strong .finding-title { color: var(--hot); }
.finding-detail { margin: 0; font-size: 0.87rem; color: var(--ink-soft); }

/* --- the measured day ------------------------------------------------------ */

.wb-wetbulb-curve {
  fill: none;
  stroke: var(--hot);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.wb-over-threshold { fill: var(--critical); opacity: 0.28; }

.wb-threshold-line {
  stroke: var(--warm);
  stroke-width: 1.2;
  stroke-dasharray: 1 2.5;
  stroke-linecap: round;
}
.wb-threshold-label {
  fill: var(--warm);
  font-family: var(--mono);
  font-size: 7px;
}

.wb-mark line { stroke-width: 0.7; }
.wb-mark-hot line { stroke: var(--ink-faint); stroke-dasharray: 2 2; }
.wb-mark-hot circle { fill: var(--bg-panel); stroke: var(--ink-soft); stroke-width: 1.2; }
.wb-mark-worst line { stroke: var(--hot); }
.wb-mark-worst circle { fill: var(--hot); stroke: var(--bg-panel); stroke-width: 1.5; }

/* --- nights, as a run of cells -------------------------------------------- */

.wb-night rect { stroke: var(--bg-panel); stroke-width: 1; }
.wb-night-cool rect { fill: var(--cool); opacity: 0.35; }
.wb-night-hot rect { fill: var(--critical); opacity: 0.75; }
.wb-night-unknown rect { fill: var(--line-bright); opacity: 0.5; }
.wb-night-today rect { stroke: var(--ink); stroke-width: 1.5; }

/* ------------------------------------------------------------- globe ---- */

.globe-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 54rem) { .globe-layout { grid-template-columns: 1fr; } }

.globe-frame { margin: 0; }

.globe-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 30rem;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--cool) 9%, transparent) 0%, transparent 62%),
    var(--bg-panel);
  border: 1px solid var(--line);
  cursor: grab;
  touch-action: none;
}
.globe-canvas:active { cursor: grabbing; }

.globe-note {
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  line-height: 1.5;
}
.globe-note-error { color: var(--temperate); font-family: var(--sans); font-size: 0.85rem; }

.globe-side { display: grid; gap: var(--s5); }

.globe-legend { display: grid; gap: 2px; }

.globe-key {
  display: grid;
  grid-template-columns: 14px 4.5rem minmax(0, 1fr);
  gap: var(--s2);
  align-items: center;
  padding: 3px 0;
  font-size: 0.8rem;
}
.globe-swatch { width: 14px; height: 14px; }
.globe-key-label { font-family: var(--mono); font-size: 0.76rem; color: var(--ink); }
.globe-key-note { color: var(--ink-faint); font-size: 0.78rem; }

.globe-facts { display: grid; gap: var(--s3); }

.globe-fact { border-inline-start: 2px solid var(--line-bright); padding-inline-start: var(--s3); }
.globe-fact-title {
  margin: 0 0 2px;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--hot);
}
.globe-fact-detail { margin: 0; font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; }

.globe-key-empty { opacity: 0.42; }
.globe-key-empty .globe-swatch { outline: 1px dashed var(--line-bright); outline-offset: -1px; }

/* ===================== LANGUAGE ===================== */

.language-bar {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 24px;
}

.language-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  position: relative;
}

/* The chevron the browser stopped drawing when `appearance: none` removed the
   native control. Without it the switch reads as a button, and a button does
   not promise a list. Drawn from borders so it inherits `currentColor` and
   follows the theme; a data-URI would have needed a hard-coded colour. */
.language-pick::after {
  content: '';
  position: absolute;
  inset-inline-end: 10px;
  width: 5px;
  height: 5px;
  border-inline-end: 1px solid var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.language-select {
  appearance: none;
  /* NOT transparent. With `appearance: none` the OPTION elements inherit the
     colour and nothing else, and the popup is painted by the operating
     system -- measured at 1.23:1 against a white OS popup, where AA wants
     4.5:1. Only the cursor highlight made a row readable. */
  background: var(--bg-sunken);
  color: var(--ink);
  border: 1px solid var(--line-bright);
  border-radius: 0;
  padding: 4px 26px 4px 10px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

/* The rows of the open list. Explicit on both axes, because inheriting one
   and not the other is what broke it. */
.language-select option {
  background: var(--bg-panel);
  color: var(--ink);
}

.language-select:hover {
  border-color: var(--ink-faint);
}

.language-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* The warning is the one piece of chrome that is allowed to interrupt: it
   qualifies every safety instruction on the page below it. Hairline on the
   leading edge rather than a filled box -- loud enough to read, quiet enough
   not to be mistaken for the heat warning this tool is actually about. */
.language-warning {
  flex: 1 1 320px;
  margin: 0;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--warm);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.language-warning strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.language-warning a {
  color: var(--ink-soft);
}

/* ---- right-to-left ----
   The page mirrors; the instruments do not. A time axis running 00 to 23 and
   a temperature axis running cold to hot are not script, and flipping them
   would put midnight on the right and call it a translation. */
[dir='rtl'] .wb-chart-svg,
[dir='rtl'] .globe-canvas,
[dir='rtl'] .weight-bar,
[dir='rtl'] .margin-bar {
  direction: ltr;
}

/* The readout table stays right-to-left -- label on the right, value on the
   left is what an Arabic reader expects. Forcing the TABLE to ltr was the
   first attempt and it glued every value to its label; what actually needed
   protecting was each number-plus-unit, which the bidi algorithm reorders
   into "C° 32.0" unless it is isolated from the text around it. */
/* The chevron moves to the leading edge under RTL (inset-inline-end handles
   that), so the padding that clears it has to move with it. */
[dir='rtl'] .language-select {
  padding: 4px 10px 4px 26px;
}

[dir='rtl'] .readout-table .value,
[dir='rtl'] .control-value,
[dir='rtl'] .factor-shift,
[dir='rtl'] .weight-value,
[dir='rtl'] .globe-note {
  unicode-bidi: isolate;
}