/* Tokens from the reference data-viz palette. Dark values are declared under
   both the media query (OS setting) and the [data-theme] scope (page toggle),
   so the toggle wins either way. */
:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --plane: #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --muted: #898781;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --series-1: #2a78d6;        /* single sequential hue: magnitude */
  --series-1-track: #cde2fb;  /* lighter step of the same ramp */
  --critical: #d03b3b;

  --radius: 10px;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --plane: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --muted: #898781;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --series-1: #3987e5;
    --series-1-track: #184f95;
    --critical: #e66767;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --plane: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --muted: #898781;
  --gridline: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --series-1: #3987e5;
  --series-1-track: #184f95;
  --critical: #e66767;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 4rem;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--plane);
}

h1 { font-size: 1.15rem; font-weight: 600; margin: 0; }
h2 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.15rem; }
.sub { margin: 0.1rem 0 0; color: var(--text-secondary); font-size: 0.82rem; }
.muted { color: var(--muted); }
a { color: var(--series-1); }

.topbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  max-width: 1020px; margin: 0 auto; padding: 1.5rem 1.25rem 1rem;
}

main { max-width: 1020px; margin: 0 auto; padding: 0 1.25rem; }

.panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

/* ---------------------------------------------------------------- form */

.row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.grow { flex: 1 1 22rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 11rem; }
.field-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.field-label + .segmented { margin-bottom: 0.5rem; }

.drop {
  position: relative;
  border: 1px dashed var(--baseline);
  border-radius: var(--radius);
  padding: 1.4rem 1rem;
  text-align: center;
  transition: border-color 120ms, background 120ms;
}
.drop.over { border-color: var(--series-1); background: color-mix(in oklab, var(--series-1) 7%, transparent); }
.drop input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.drop-hint { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.link-ish { color: var(--series-1); text-decoration: underline; }
.drop-file { margin: 0.5rem 0 0; font-weight: 600; font-size: 0.85rem; }
.help { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--text-secondary); }

textarea {
  width: 100%; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-primary); background: var(--plane);
  border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem;
  resize: vertical;
}

.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: block; padding: 0.35rem 0.7rem; font-size: 0.82rem; text-align: center;
  color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.segmented label + label span { border-left: 1px solid var(--border); }
.segmented input:checked + span { background: var(--series-1); color: #fff; font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--series-1); outline-offset: -2px; }

button { font-family: inherit; font-size: 0.85rem; border-radius: 8px; cursor: pointer; }
.primary {
  margin-top: auto; padding: 0.55rem 1rem; font-weight: 600;
  color: #fff; background: var(--series-1); border: 1px solid transparent;
}
.primary:disabled { opacity: 0.55; cursor: progress; }
.ghost {
  padding: 0.35rem 0.7rem; color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border);
}

.status {
  margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 8px;
  background: var(--surface-1); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 0.85rem;
}
.status.error { border-color: var(--critical); color: var(--critical); }

/* ------------------------------------------------------- figures & tiles */

.figures { display: flex; gap: 2rem; flex-wrap: wrap; align-items: stretch; }
.hero { display: flex; flex-direction: column; justify-content: center; min-width: 12rem; }
.hero-value {
  font-size: 56px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em;
}
.tiles { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; flex: 1; }
.tile { display: flex; flex-direction: column; min-width: 8rem; }
.tile-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.tile-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.tile-value .unit { font-size: 0.9rem; font-weight: 400; color: var(--text-secondary); }
.tile-note { font-size: 0.76rem; color: var(--text-secondary); }

/* ------------------------------------------------------------- WFE map */

.map-layout { display: flex; gap: 1.75rem; align-items: stretch; margin-top: 0.9rem; }

.map-frame {
  position: relative; width: min(560px, 62vw); aspect-ratio: 1;
  border: 1px solid var(--baseline); border-radius: 4px;
  background: var(--surface-1);
  margin: 0 0 1.5rem 4rem;
  cursor: crosshair;
}
#wfe-map { display: block; width: 100%; height: 100%; }

/* Watermark: the GMT pupil mark from the favicon. Parked in a corner rather
   than centred -- centred it would line up with the pupil in the data and read
   as part of the plot. The corner is outside the pupil, so it sits on the chart
   surface and never covers a WFE value. */
/* the data raster is targeted by id (#wfe-map) rather than `.map-frame img`, so
   this class is not outspecified and stretched across the whole frame */
.map-watermark {
  position: absolute; right: 10px; bottom: 10px;
  height: 46px; width: auto;
  opacity: 0.38;
  pointer-events: none;
}

/* GMT segment numbers. Each badge carries its own patch of surface colour so
   the digit clears contrast over any WFE value underneath, rather than being
   tinted by the data it sits on. */
.seg-labels { position: absolute; inset: 0; pointer-events: none; }
.seg-label {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 19px; height: 19px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 0.72rem; font-weight: 600; line-height: 1;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: 0 0 0 1px var(--surface-1);
}

.crosshair { position: absolute; background: var(--text-primary); opacity: 0.45; pointer-events: none; }
.crosshair-v { top: 0; bottom: 0; width: 1px; }
.crosshair-h { left: 0; right: 0; height: 1px; }

.tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, -130%);
  padding: 0.35rem 0.55rem; border-radius: 6px; white-space: nowrap;
  font-size: 0.76rem; font-variant-numeric: tabular-nums;
  color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.tooltip b { font-weight: 600; }
/* the bar tooltip rides beside its row rather than above it, so row 1 has room */
.tooltip.bar-tip { transform: translate(0, -50%); }

.axis-tick, .axis-name, .cb-tick, .cb-name {
  position: absolute; font-size: 0.72rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tick-left   { left: 0; bottom: -1.25rem; }
.tick-right  { right: 0; bottom: -1.25rem; }
.axis-x      { left: 50%; transform: translateX(-50%); bottom: -1.25rem; color: var(--text-secondary); }

/* y ticks grow leftwards from the frame edge; the axis name clears them */
.tick-top    { right: calc(100% + 0.4rem); top: -0.1rem; text-align: right; }
.tick-bottom { right: calc(100% + 0.4rem); bottom: -0.1rem; text-align: right; }
.axis-y {
  right: calc(100% + 2.6rem); top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  color: var(--text-secondary); white-space: nowrap;
}

.colorbar-wrap {
  position: relative; padding: 0 0 0 0.25rem; margin-bottom: 1.5rem;
  display: flex; flex-direction: column;
}
.colorbar {
  width: 14px; flex: 1 1 auto; border-radius: 3px;
  border: 1px solid var(--border);
}
.cb-tick { left: 22px; }
#cb-max { top: -0.4rem; }
#cb-min { bottom: -0.4rem; }
.cb-name {
  left: 34px; top: 50%; transform: translateY(-50%) rotate(-90deg);
  color: var(--text-secondary); white-space: nowrap;
}

/* --------------------------------------------------------------- bars */

.bars {
  position: relative;  /* the bar tooltip anchors here */
  margin-top: 0.9rem; display: flex; flex-direction: column; gap: 2px;
}

.bar-row {
  display: grid; grid-template-columns: 4.5rem 1fr; align-items: center;
  gap: 0.6rem; padding: 1px 0;
}
.bar-name { font-size: 0.8rem; color: var(--text-secondary); text-align: right; }
.bar-name .amp { color: var(--muted); }

/* the axis baseline all bars grow from, plus recessive hairline gridlines */
.bar-track {
  position: relative; height: 22px;
  background:
    linear-gradient(to right, var(--gridline) 0 1px, transparent 1px) 25% 0/25% 100% repeat-x,
    linear-gradient(to right, var(--baseline) 0 1px, transparent 1px) 0 0/100% 100% no-repeat;
}
.bar {
  position: absolute; top: 2px; bottom: 2px; left: 0;      /* <= 24px thick */
  background: var(--series-1);
  border-radius: 0 4px 4px 0;                              /* square at the baseline */
}
.bar-value {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 0.76rem; font-variant-numeric: tabular-nums;
  color: var(--text-secondary); white-space: nowrap;       /* value at the tip */
}
.bar-row:hover .bar-track { background-color: color-mix(in oklab, var(--series-1) 6%, transparent); }

.bar-axis {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.6rem;
  margin-top: 0.35rem; font-size: 0.72rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bar-axis-ticks { display: flex; justify-content: space-between; }

.table-view { margin-top: 1.1rem; }
.table-view summary { font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; }
.table-view table { border-collapse: collapse; margin-top: 0.7rem; font-size: 0.82rem; }
.table-view th, .table-view td {
  text-align: right; padding: 0.3rem 0.85rem 0.3rem 0;
  border-bottom: 1px solid var(--gridline); font-variant-numeric: tabular-nums;
}
.table-view th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.table-view td:first-child, .table-view th:first-child { text-align: left; }

@media (max-width: 720px) {
  .map-layout { flex-direction: column; }
  .map-frame { width: min(100%, 84vw); }
  .colorbar-wrap { margin-bottom: 0; }
  .colorbar { flex: 0 0 auto; height: min(300px, 70vw); }
}