:root {
  /* Sidebar width is a live variable: dragged via #sidebar-resize (persisted
     in localStorage), consumed by both the sidebar and the globe container. */
  --sidebar-w: 380px;
  --bg: #0d1117;
  --bg2: #161b22;
  --border: #30363d;
  --fg: #e6edf3;
  --fg-dim: #8b949e;
  --accent: #4493f8;
  --accent2: #3fb950;
  --amoc: #f0883e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--fg);
  overflow: hidden;
}

#cesiumContainer {
  position: absolute; top: 0; left: var(--sidebar-w); right: 0; bottom: 0;
}

#sidebar {
  position: absolute; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--bg2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 10;
}

/* Drag strip between sidebar and globe: col-resize, widens the hit area a
   little beyond its visible line; double-click resets to the default. */
#sidebar-resize {
  position: absolute; top: 0; bottom: 0; left: calc(var(--sidebar-w) - 3px);
  width: 7px; z-index: 30; cursor: col-resize;
}
#sidebar-resize:hover, #sidebar-resize.dragging { background: rgba(68, 147, 248, 0.35); }

#sidebar header { padding: 14px 16px 0; }
#sidebar h1 { margin: 0; font-size: 22px; letter-spacing: 1px; }
#sidebar h1 .h1-sub { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--fg-dim); }
#sidebar .tagline { margin: 3px 0 12px; color: var(--fg-dim); font-size: 12.5px; line-height: 1.5; }
.tag-link {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent); text-decoration: underline dotted rgba(68,147,248,0.6);
  text-underline-offset: 2px;
}
.tag-link:hover { text-decoration-style: solid; }

/* Nine labels do not fit one row of a 320 px sidebar, so the row wraps to two
   rather than overflowing — a second row beats a tab you cannot reach. */
nav { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); }
/* Tabs size to their labels rather than sharing the width equally: with six of
   them in a 320 px sidebar, an equal split wrapped "Sea level" onto two lines. */
.tab {
  flex: 0 1 auto; padding: 8px 5px; background: none; border: none; color: var(--fg-dim);
  border-bottom: 2px solid transparent; cursor: pointer; font-size: 12.5px;
  white-space: nowrap; min-width: 0;
}
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }

.panel { flex: 1; overflow-y: auto; padding: 12px 16px; }
.panel.hidden { display: none; }
.panel h2 { font-size: 14px; margin: 12px 0 6px; }
.panel p, .panel li { font-size: 12.5px; line-height: 1.5; color: var(--fg-dim); }
.panel a { color: var(--accent); text-decoration: none; }

.control-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.control-row.filters { gap: 14px; }
.control-row input[type="date"], #catalog-search, #catalog-domain, #compare-select {
  flex: 1; background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; font-size: 13px;
}
#catalog-search { width: 100%; margin-bottom: 4px; }

/* The Compare/Aggregate explainer folds away — it's reference material, not a
   control, and at full length it pushed the layer list below the fold. */
.hint-details { margin: 8px 0; }
.hint-details summary {
  cursor: pointer; color: var(--fg-dim); font-size: 12px; user-select: none;
}
.hint-details summary:hover { color: var(--accent); }
.hint-details[open] summary { color: var(--fg); }
.hint-details p.hint { margin: 6px 0 6px 12px; }
.hint-details ul.hint {
  margin: 4px 0 6px 12px; padding-left: 16px; font-size: 11px; color: var(--fg-dim);
}
.hint-details ul.hint li { font-size: 11px; line-height: 1.55; margin-bottom: 5px; }
/* the intro guide reads as a welcome, not fine print */
#intro-guide { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--bg); }
#intro-guide summary.hint { font-size: 12.5px; color: var(--fg); }
#intro-guide strong { color: var(--fg); }

.date-steps { gap: 4px; margin-top: -2px; }
.date-steps button {
  flex: 1; background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 0; font-size: 12px; cursor: pointer;
}
.date-steps button:hover { border-color: var(--accent, #3987e5); color: var(--accent, #3987e5); }
#window-presets { margin-top: -4px; }
#window-presets button.active, #eei-smooth button.active {
  border-color: var(--accent, #3987e5); color: var(--accent, #3987e5);
}

.hint { font-size: 11px; color: var(--fg-dim); margin: 6px 0 10px; }

.layer-item {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px; background: var(--bg);
  position: relative;
}

/* Attention toast — fired when a date-independent layer is enabled, so the
 * user doesn't wonder why the date selector has no effect. Slides down from
 * the top of the globe and gives a quick shake so it can't be missed. */
#toast-host {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none; width: max-content; max-width: 90%;
}
.toast {
  pointer-events: auto; display: flex; gap: 10px; align-items: flex-start;
  max-width: 460px; background: #1b2333; color: var(--fg);
  border: 1px solid var(--accent); border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 11px 12px 11px 13px; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  animation: toast-in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.3),
             toast-shake 0.5s ease 0.36s;
}
.toast.toast-out { animation: toast-out 0.3s ease forwards; }
.toast .toast-ico { font-size: 15px; line-height: 1.35; }
.toast .toast-body { flex: 1; }
.toast .toast-body strong { color: var(--accent); }
.toast .toast-close {
  pointer-events: auto; background: none; border: none; color: var(--fg-dim);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; margin: -1px -2px 0 0;
}
.toast .toast-close:hover { color: var(--fg); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-12px) scale(0.97); }
}
@keyframes toast-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: toast-in 0.2s ease; }
}

/* Hover card: recording period · time interval · spatial granularity */
.layer-tip {
  position: absolute; left: 8px; right: 8px; top: calc(100% - 4px); z-index: 40;
  background: #0d1420; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 11px; line-height: 1.5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0s;
  pointer-events: none;
}
.layer-item:hover .layer-tip { opacity: 1; visibility: visible; transition-delay: 0.35s; }
.layer-tip .tip-sum {
  margin: 0 0 7px; padding-bottom: 7px; border-bottom: 1px solid var(--border);
  color: var(--fg); font-size: 11px; line-height: 1.5;
}
.layer-tip div { display: flex; gap: 8px; }
.layer-tip span {
  flex: 0 0 62px; color: var(--fg-dim); text-transform: uppercase;
  font-size: 9.5px; letter-spacing: 0.4px; padding-top: 1px;
}
.layer-item label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.layer-item .meta { font-size: 11px; color: var(--fg-dim); margin: 3px 0 0 24px; }
.layer-item input[type="range"] { width: 100%; margin-top: 6px; accent-color: var(--accent); }
.alpha-row { display: flex; align-items: center; gap: 6px; margin: 4px 0 0 24px; }
.alpha-row input[type="range"] { flex: 1; width: auto; margin-top: 0; }
.alpha-label { font-size: 10px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.alpha-val { font-size: 10.5px; color: var(--fg-dim); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.alpha-half {
  background: none; border: 1px solid var(--border); color: var(--fg-dim);
  border-radius: 4px; font-size: 11px; line-height: 1; padding: 2px 5px; cursor: pointer;
}
.alpha-half:hover { color: var(--accent); border-color: var(--accent); }

button.wide {
  width: 100%; padding: 8px; margin-top: 8px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: 13px;
}
button.wide:hover { border-color: var(--accent); }

.cat-item {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px; background: var(--bg);
}
.cat-item .cat-name { font-size: 13px; font-weight: 600; }
.cat-item .cat-name a { color: var(--fg); }
.cat-item .cat-name a:hover { color: var(--accent); }
.cat-item .cat-provider { font-size: 11px; color: var(--fg-dim); }
.cat-item .cat-note { font-size: 11.5px; color: var(--fg-dim); margin-top: 3px; }
.badge {
  display: inline-block; font-size: 9.5px; padding: 1px 6px; border-radius: 10px;
  margin-left: 5px; vertical-align: 1px;
}
.badge.amoc { background: rgba(240,136,62,.15); color: var(--amoc); border: 1px solid var(--amoc); }
.badge.globe { background: rgba(63,185,80,.15); color: var(--accent2); border: 1px solid var(--accent2); }

footer {
  padding: 8px 16px; font-size: 10.5px; color: var(--fg-dim);
  border-top: 1px solid var(--border);
}
footer a { color: var(--fg-dim); }

/* The build marker in About: present so a user can answer "did my reload
   actually get the new code?" without opening dev tools, but quiet enough
   that nobody reads it who isn't looking for it. */
.build-line { font-size: 11px; color: var(--fg-dim); }
.build-line code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Cesium widget tweaks */
.cesium-viewer-bottom { left: 8px !important; }
.cesium-widget-credits { font-size: 10px !important; }

@media (max-width: 720px) {
  #sidebar { width: 100%; height: 45%; bottom: auto; border-right: none; border-bottom: 1px solid var(--border); }
  #cesiumContainer { left: 0; top: 45%; }
  #sidebar-resize { display: none; }   /* stacked layout: no column to drag */
}

/* ---- zoom controls ---- */
#zoom-controls {
  position: absolute; right: 12px; top: 70px; z-index: 20;
  display: flex; flex-direction: column; gap: 6px;
}
#zoom-controls button {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(22, 27, 34, 0.88); color: var(--fg);
  border: 1px solid var(--border); font-size: 18px; line-height: 1;
  cursor: pointer;
}
#zoom-controls button:hover { border-color: var(--accent); }

/* ---- comparison split ---- */
#split-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; z-index: 19;
  background: rgba(255, 255, 255, 0.65); cursor: ew-resize;
  touch-action: none;
}
#split-handle::after {
  content: "⇔"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg2); color: var(--fg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
/* ---- active-layer chips (top-left of the globe) ----
   One chip per layer that is currently on, so a layer can be switched off
   from anywhere — including from the Temp / AMOC / Catalog tabs, where the
   layer list isn't on screen at all. Doubles as a "what am I looking at"
   readout. --chips-h is published by updateActiveChips() so the comparison
   labels below can step out of the way. */
/* ---- place search (top-left, above the chips) ----
   The globe answers "what is happening here"; this is the only control that
   answers "take me to here". It shares the top-left corner with the chips
   rather than the top-right, which Cesium's scene-mode picker owns. */
#place-search {
  position: absolute; top: 12px; left: 12px; z-index: 21;
  width: min(280px, 46vw);
}
.ps-bar {
  display: flex; align-items: center;
  background: rgba(22, 27, 34, 0.92); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.ps-bar:focus-within { border-color: var(--accent); }
#ps-input {
  flex: 1; min-width: 0; padding: 7px 9px;
  background: none; border: none; color: var(--fg);
  font-size: 13px; font-family: inherit;
}
#ps-input:focus { outline: none; }
#ps-input::-webkit-search-cancel-button { display: none; }
#ps-clear {
  background: none; border: none; color: var(--fg-dim);
  font-size: 17px; line-height: 1; padding: 4px 9px; cursor: pointer;
}
#ps-clear:hover { color: var(--fg); }
#ps-results {
  margin: 5px 0 0; padding: 4px; list-style: none;
  background: rgba(22, 27, 34, 0.96); border: 1px solid var(--border);
  border-radius: 8px; max-height: 46vh; overflow-y: auto;
}
#ps-results.hidden { display: none; }
.ps-hit {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
}
.ps-hit:hover, .ps-cursor { background: rgba(121, 192, 255, 0.14); }
.ps-name { font-size: 13px; }
/* Country and population, because a search for "Springfield" is a
   disambiguation problem before it is a navigation problem. */
.ps-where { font-size: 11px; color: var(--fg-dim); }
.ps-empty { padding: 6px 8px; font-size: 12px; color: var(--fg-dim); }

#active-layers {
  position: absolute; top: 56px; left: 12px; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 6px;
  max-width: min(560px, 55%); max-height: 34%; overflow-y: auto;
}
#active-layers.hidden { display: none; }
.chip {
  display: flex; align-items: stretch; overflow: hidden;
  background: rgba(22, 27, 34, 0.92); border: 1px solid var(--border);
  border-radius: 15px; font-size: 12px; line-height: 1;
}
.chip:hover { border-color: var(--accent); }
.chip-warn { border-color: #d29922; }
.chip button {
  background: none; border: none; color: var(--fg);
  font-size: 12px; font-family: inherit; cursor: pointer; padding: 0;
}
/* Pill padding is deliberately generous, and was raised TWICE: on a full
 * pill the corner sweeps through the text's own line, so an inset that
 * measures fine still reads as cramped. 18px left against a 15px radius is
 * the value that finally looked right at 12px type. */
.chip-label { padding: 8px 6px 8px 18px; white-space: nowrap; }
.chip-label:hover { color: var(--accent); }
.chip-x {
  padding: 8px 15px 8px 7px; color: var(--fg-dim) !important;
  font-size: 14px !important;
}
.chip-x:hover { color: #f85149 !important; }
.chip-clear {
  border-style: dashed; color: var(--fg-dim);
}
.chip-clear .chip-label { padding: 8px 18px; color: var(--fg-dim); }
.chip-clear:hover .chip-label { color: #f85149; }
/* ---- pixel inspector card (right side of the globe) ----
   One card composing everything the app knows about a clicked point:
   live weather + 7-day forecast, every GIBS raster at the current date,
   climatology normals with anomalies, and nearby context. */
#pixel-card {
  position: absolute; top: 56px; right: 56px; z-index: 22;
  width: 300px; max-height: calc(100% - 90px); overflow-y: auto;
  background: rgba(22, 27, 34, 0.96); border: 1px solid var(--border);
  border-radius: 10px; font-size: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
#pixel-card.hidden { display: none; }
.px-head {
  position: sticky; top: 0; display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; background: rgba(22, 27, 34, 0.98);
  border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.px-close {
  margin-left: auto; background: none; border: none; color: var(--fg-dim);
  font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.px-close:hover { color: #f85149; }
.px-body { padding: 6px 12px 10px; }
.px-loading { color: var(--fg-dim); padding: 10px 0; }
.px-sec { margin: 8px 0; }
.px-sec-title {
  font-weight: 600; margin-bottom: 4px; color: var(--fg);
  display: flex; align-items: baseline; gap: 6px;
}
.px-src { font-weight: 400; font-size: 10.5px; color: var(--fg-dim); margin-left: auto; }
.px-row { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 2px 0; }
/* Every value carries WHEN it was observed. The card is 300px, so "2026-08-03
 * 18:30 UTC · just now" does not fit beside a long value: wrap lets the stamp
 * right-align on the value's own line when it fits and drop to its own line
 * when it doesn't, instead of squeezing the number. */
.px-when {
  margin-left: auto; font-size: 10px; color: var(--fg-dim);
  white-space: nowrap; align-self: baseline;
}
.px-label { color: var(--fg-dim); flex: 0 0 46%; }
.px-val { color: var(--fg); }
.px-warm { color: #f0883e; }
.px-cool { color: #58a6ff; }
.px-forecast { display: flex; flex-direction: column; margin-top: 5px; }
.px-day {
  display: flex; gap: 8px; padding: 1px 0; color: var(--fg-dim); font-size: 11.5px;
}
.px-day span:first-child { flex: 0 0 44px; }
.px-day span:nth-child(2) { flex: 0 0 60px; color: var(--fg); }
.px-profile { display: block; margin: 2px 0 4px; }
.px-note { margin-top: 8px; font-size: 10.5px; color: var(--fg-dim); }
/* Two notes about sources, and they mean opposite things. Still loading is
 * transient and expected — accent, and it pulses so it reads as motion rather
 * than as a warning that has stopped changing. Didn't answer is final. */
.px-loading { border-left: 2px solid var(--accent); padding-left: 7px;
  animation: px-pulse 1.6s ease-in-out infinite; }
@keyframes px-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .px-loading { animation: none; } }
.px-late { border-left: 2px solid var(--warn, #d19a3a); padding-left: 7px; }
.px-note a { color: var(--accent); text-decoration: none; }

/* Briefly highlights the layer's row after "find in sidebar". */
.layer-item.flash {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .layer-item.flash { transition: outline-color 0.2s; }
}

#split-labels { position: absolute; top: calc(56px + var(--chips-h, 0px)); left: 0; right: 0; z-index: 18; pointer-events: none; }
#split-labels span {
  position: absolute; top: 0; padding: 3px 10px; border-radius: 12px;
  background: rgba(22, 27, 34, 0.88); border: 1px solid var(--border);
  font-size: 12px; color: var(--fg);
}
#split-label-left { left: 12px; }
#split-label-right { right: 60px; }

/* ---- pick card ---- */
#pick-card {
  position: absolute; left: 12px; bottom: 34px; z-index: 20; max-width: 300px;
  background: rgba(22, 27, 34, 0.94); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--fg);
}
#pick-card a { color: var(--accent); text-decoration: none; }

/* ---- AMOC dashboard ---- */
.stat-row { display: flex; gap: 8px; margin: 10px 0 4px; }
.stat {
  flex: 1; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 6px; text-align: center;
}
.stat-value { font-size: 20px; font-weight: 650; color: var(--fg); }
.stat-sub { font-size: 9.5px; color: var(--fg-dim); margin-top: 2px; }
#amoc-chart-wrap { position: relative; margin: 8px 0 4px; }
#amoc-chart { display: block; width: 100%; }
#amoc-tooltip {
  position: absolute; top: -6px; padding: 2px 8px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 11px; color: var(--fg); white-space: nowrap; pointer-events: none;
}
.hidden { display: none !important; }

/* ---- legends ---- */
#legend-panel {
  position: absolute; right: 12px; bottom: 34px; z-index: 20;
  display: flex; flex-direction: column; gap: 6px; width: 300px;
}
.legend-item {
  background: rgba(22, 27, 34, 0.92); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 8px;
}
.legend-title { font-size: 10.5px; color: var(--fg-dim); margin-bottom: 4px; }
.legend-item img {
  display: block; width: 100%; background: #f2f2f0;
  border-radius: 4px; padding: 2px 3px; box-sizing: border-box;
}
.legend-note { font-size: 9.5px; color: var(--fg-dim); margin-top: 3px; }
.delta-scale { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--fg); }
.delta-bar {
  flex: 1; height: 10px; border-radius: 5px; border: 1px solid var(--border);
  background: linear-gradient(to right,
    rgb(37, 99, 235) 0%, rgba(37, 99, 235, 0) 50%,
    rgba(230, 59, 46, 0) 50%, rgb(230, 59, 46) 100%);
}

/* ---- interactive legend bars ---- */
.legend-bar-wrap { position: relative; }
.legend-bar {
  display: block; width: 100%; border-radius: 4px; cursor: crosshair;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.legend-tip {
  position: absolute; top: -22px; padding: 1px 7px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 10.5px; color: var(--fg); white-space: nowrap; pointer-events: none;
  z-index: 21;
}
.legend-range {
  display: flex; justify-content: space-between;
  font-size: 9.5px; color: var(--fg-dim); margin-top: 3px;
}
.delta-bar { cursor: crosshair; }

/* ---- classification legends (OPERA disturbance): labelled swatches, not a
   gradient — the classes have no ordering a bar could imply ---- */
.legend-classes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.legend-class { display: flex; align-items: center; gap: 5px; min-width: 0; }
.legend-swatch {
  flex: none; width: 11px; height: 11px; border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.legend-class-label {
  font-size: 9.5px; color: var(--fg-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- clickable layer titles ---- */
.layer-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.layer-head .title-link { color: var(--fg); text-decoration: none; }
.layer-head .title-link:hover { color: var(--accent); text-decoration: underline; }
.layer-head .title-link::after { content: " ↗"; font-size: 10px; color: var(--fg-dim); }

/* ---- ensemble spread legend ---- */
.spread-bar, .legend-item .spread-bar {
  display: block; width: 100%; height: 12px; border-radius: 4px; cursor: crosshair;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(to right,
    rgb(8,48,107) 0%, rgb(33,145,140) 35%, rgb(253,231,37) 70%, rgb(240,59,46) 100%);
}

/* ---- aggregation slider ---- */
#window-days { flex: 1; accent-color: var(--accent); }
.window-value { font-size: 11px; color: var(--fg-dim); min-width: 78px; text-align: right; }

/* ---- sea-level dashboard ---- */
#sl-chart-wrap { position: relative; margin: 8px 0 4px; }
#sl-chart { display: block; width: 100%; }

/* Tides tab: the animated map fills the panel width; buttons echo .tab */
#td-map-wrap { margin: 8px 0 2px; background: #0a0f16; border-radius: 6px; overflow: hidden; }
#td-map { display: block; width: 100%; cursor: crosshair; }
.td-btn { background: #21262d; color: #c9d1d9; border: 1px solid #30363d;
  border-radius: 6px; padding: 3px 12px; cursor: pointer; font-size: 14px; }
.td-btn:hover { background: #30363d; }
#td-curve { display: block; width: 100%; background: #0a0f16; border-radius: 6px; margin-top: 4px; }
/* Next high / low water — the tab's headline answer, so it sits ABOVE the
 * curve and reads as two facts, not as chart furniture. The left rule takes
 * the globe's own colours: red is water above mean, blue below. */
.td-hl {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-top: 6px;
  background: var(--bg2); border: 1px solid var(--border);
  border-left-width: 3px; border-radius: 7px;
}
.td-high { border-left-color: #e34948; }
.td-low { border-left-color: #3b82f6; }
.td-hl-k {
  flex: 0 0 96px; font-size: 10.5px; color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.td-hl-t { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.td-hl-v { font-size: 13px; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.td-hl-in {
  margin-left: auto; font-size: 12px; color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
/* The invitation stands where the chart will be, at chart size — a hint line
 * under the fold was invisible (reported 2026-08-07: "I don't know where to
 * find the next high tide and the curve"). */
#td-empty {
  margin: 10px 0 2px; padding: 20px 16px; text-align: center;
  border: 1px dashed var(--border); border-radius: 8px;
  color: var(--fg-dim); font-size: 12.5px; line-height: 1.55;
}
#td-empty.hidden { display: none; }
#td-empty strong { display: block; color: var(--fg); font-size: 13.5px; margin-bottom: 3px; }
.td-hl-z { font-size: 11px; font-weight: 400; color: var(--fg-dim); }
.td-place { color: var(--accent); font-size: 13px; }
#td-tz { font-size: 10.5px; color: var(--fg-dim); margin-top: 5px; line-height: 1.45; }

/* Tick labels under a COMPRESSED colour bar: absolutely placed at the tick
 * they name, because the bar's ends are not the numbers (the ramp runs on
 * past ±2.5 m). The tide legend previously used two class names — legend-labels
 * and legend-read — that no stylesheet defined, so its three labels rendered
 * as one run-on line. */
.legend-ticks { position: relative; height: 12px; margin-top: 3px; }
.legend-ticks span {
  position: absolute; transform: translateX(-50%);
  font-size: 9.5px; color: var(--fg-dim); white-space: nowrap;
}
.legend-read { font-size: 10px; color: var(--fg); margin-top: 2px; }
.legend-read.hidden { display: none; }
#tides-controls select { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; border-radius: 4px; }
#sl-tooltip {
  position: absolute; top: -4px; padding: 4px 8px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 10.5px; line-height: 1.5; color: var(--fg); white-space: nowrap; pointer-events: none;
}
.sl-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 8px; }
.sl-legend span { font-size: 10.5px; color: var(--fg-dim); }
.sl-legend b { font-weight: 600; }

/* ---- species selector ---- */
#species-select { flex: 1; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 6px; font-size: 12px; }
#species-select optgroup { color: var(--fg-dim); font-style: normal; font-weight: 600; background: var(--bg); }
#species-select option { color: var(--fg); font-weight: 400; background: var(--bg); }

/* ---- hover value probe ---- */
#value-probe {
  position: absolute; z-index: 22; pointer-events: none;
  background: rgba(13, 17, 23, 0.92); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 9px; color: var(--fg);
}
#value-probe .vp-val { font-size: 17px; font-weight: 650; }
#value-probe .vp-unit { font-size: 12px; color: var(--fg-dim); }
#value-probe .vp-nd { font-size: 13px; font-weight: 500; color: var(--fg-dim); }
/* a class name is a phrase, not a number — it needs room and a smaller face */
#value-probe .vp-class { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
#value-probe .vp-meta { font-size: 10px; color: var(--fg-dim); margin-top: 2px; line-height: 1.35; }

/* ---- temperature dashboard (reuses sea-level chart styles) ---- */
#temp-chart-wrap, #eei-chart-wrap, #eei-rate-chart-wrap { position: relative; margin: 8px 0 4px; }
#temp-chart, #eei-chart, #eei-rate-chart { display: block; width: 100%; }
#eei-tooltip, #eei-rate-tooltip {
  position: absolute; padding: 4px 8px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 10.5px; line-height: 1.5; color: var(--fg); white-space: nowrap; pointer-events: none;
}
#temp-tooltip {
  position: absolute; top: -4px; padding: 4px 8px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 10.5px; line-height: 1.5; color: var(--fg); white-space: nowrap; pointer-events: none;
}

/* ---- inline checkbox rows ---- */
.check-inline { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg); cursor: pointer; }
.check-inline input { flex: none; }

/* ---- glacier change legend ---- */
#glacier-mode { flex: 1; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 6px; font-size: 12px; }
.glacier-legend { margin: 4px 0 2px; }
.glacier-scale {
  height: 10px; border-radius: 5px; border: 1px solid var(--border);
  background: linear-gradient(to right, #f22 0%, #f2bf26 45%, #8fb0d0 60%, #388ff2 100%);
}
.glacier-scale-labels { display: flex; justify-content: space-between; font-size: 9px; color: var(--fg-dim); margin-top: 2px; }

/* ---- Play tab (E-041): the transport for the date clock. Everything here is
 * either a primitive that already exists (.control-row, .td-btn, .hint) or one
 * of the four things the panel needs that no primitive covers: a left column
 * the four rows can line up on, a full-width scrub, a transport row whose
 * three buttons are the same size, and a readout with room for two lines. */
#panel-play .control-row > label:first-child { flex: 0 0 44px; }
#pb-step, #pb-speed {
  flex: 1; min-width: 0; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 6px; font-size: 12.5px;
}
/* three prose labels in a 320 px sidebar: smaller face, equal shares, no wrap */
#pb-presets { gap: 4px; margin-top: -2px; }
#pb-presets .td-btn { flex: 1 1 0; padding: 4px 2px; font-size: 11px; white-space: nowrap; }
/* ⏮ ▶ ⏭ read as one control, so they share the row evenly and sit taller than
 * an ordinary button — this is the thing a finger aims at. */
#pb-transport { gap: 6px; margin-top: 2px; }
#pb-transport .td-btn { flex: 1; padding: 5px 0; font-size: 16px; line-height: 1.2; }
#pb-transport .td-btn.playing { border-color: var(--accent); color: var(--accent); }
/* the scrub is the frame axis: it spans the panel, not a label's leftovers */
#pb-scrub { display: block; width: 100%; margin: 8px 0 2px; accent-color: var(--accent); }
/* frame / date on line one, the per-layer provenance stamp on line two — sized
 * for both so the box does not jump as the stamp appears and disappears */
#pb-readout {
  min-height: 54px; padding: 7px 10px; margin: 4px 0 2px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 7px;
  font-size: 12.5px; line-height: 1.45; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
#pb-readout .pb-when { color: var(--fg-dim); font-size: 11px; display: block; margin-top: 2px; }
#pb-readout .pb-frame { color: var(--fg-dim); }
/* The playback read-out that rides in the chip row. It is not a layer — no ×,
 * nothing to click — so it takes the right-hand padding the missing close
 * button would have provided, and wears the accent so it reads as a state the
 * app is IN rather than one more thing that is switched on. */
.chip-play { border-color: var(--accent); }
.chip-play .chip-label { padding-right: 18px; color: var(--accent); cursor: default; }
.chip-play .chip-label:hover { color: var(--accent); }