/* windview: the map fills the left, the controls sit in a panel on the right.
   Light surface throughout; the air owns all the colour. Tokens and control
   styling carried over from interactive_GHG_plots' essay.css. */

:root {
  --surface: #fcfcfb;
  --page: #f4f4f1;
  --ink: #0b0b0b;
  --ink2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --hairline: rgba(11, 11, 11, 0.1);
  --accent: #2a78d6;
  --radius: 12px;
  --gap: 16px;
  --side-w: 300px;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* An author display rule beats the browser's own [hidden]; keep this explicit. */
[hidden] { display: none !important; }

/* ---------- layout ---------- */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-w);
  gap: var(--gap);
  height: 100vh;
  padding: var(--gap);
}

.map-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The map box takes the domain's own shape: main.js sets --aspect to the view's
   width over its height, in degrees, since plate carree gives both axes the same
   pixels per degree. The width is the largest box of that shape that fits the
   column both ways. 1.6 is only the fallback before a domain loads. */
.map-shell {
  aspect-ratio: var(--aspect, 1.6);
  width: min(100%, calc((100vh - 2 * var(--gap)) * var(--aspect, 1.6)));
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.map-shell canvas { display: block; width: 100%; height: 100%; }

.side {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

/* ---------- small screens ---------- */
/* The page fits the screen and never scrolls; the controls become a drawer
   that scrolls on its own. Time, height and the legend come first, so they
   sit right under the map, and the panels start folded (main.js,
   SMALL_SCREEN, which must match these two queries). dvh, where the browser
   has it, is the height left once a phone's toolbars are shown. */
@media (max-width: 900px) {
  .app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    gap: 10px;
    padding: 10px;
  }
  .map-col { flex: none; }
  /* Full width, but always leaving the drawer room for time and height. */
  .map-shell {
    width: min(100%, calc((100vh - 250px) * var(--aspect, 1.6)));
    width: min(100%, calc((100dvh - 250px) * var(--aspect, 1.6)));
  }
  .side { flex: 1 1 auto; gap: 14px; padding: 14px; }
}

/* A phone on its side: too short to stack, so map and panel side by side
   again, with a narrower panel. Placed after the rule above to override it. */
@media (orientation: landscape) and (max-height: 540px) {
  .app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    height: 100vh;
    height: 100dvh;
    gap: 8px;
    padding: 8px;
  }
  .map-shell {
    width: min(100%, calc((100vh - 16px) * var(--aspect, 1.6)));
    width: min(100%, calc((100dvh - 16px) * var(--aspect, 1.6)));
  }
  .side { gap: 12px; padding: 12px; }
}

@media (max-width: 900px), (orientation: landscape) and (max-height: 540px) {
  .side > header { order: 1; }
  .side > .panel { order: 2; }
  .panel.about { margin-top: 0; }
  h1 { font-size: 18px; }
}

/* ---------- panel content ---------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 6px;
}
/* The map page's way back to the landing page, styled as its eyebrow. */
a.eyebrow { display: inline-block; text-decoration: none; border-radius: 4px; }
a.eyebrow:hover { color: var(--ink); }
a.eyebrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1 { font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 6px; font-weight: 650; }
.standfirst { font-size: 13px; color: var(--ink2); margin: 0; }

.group { display: flex; flex-direction: column; gap: 8px; }
.group-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.buttons.stacked { flex-direction: column; }
.buttons.stacked button { text-align: left; }
.readout { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

button {
  appearance: none;
  border: 1px solid var(--axis);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
/* Hover only where there is one: on a phone a tapped button keeps it. */
@media (hover: hover) { button:hover { background: #f1f1ed; } }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* A level whose atlases are still decoding. */
button[aria-busy="true"] { opacity: 0.55; cursor: progress; }

/* A number box with its arrows stacked on the right, like a native number
   input, but walking a list of values (main.js, air speed). */
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper-value {
  min-width: 52px;
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid var(--axis);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.stepper-value:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stepper-arrows { display: flex; flex-direction: column; margin-left: -10px; }
.stepper-arrows button {
  width: 26px;
  height: 17px;
  padding: 0;
  font-size: 8px;
  line-height: 1;
  border-radius: 0;
}
.stepper-arrows button:first-child { border-radius: 0 8px 0 0; border-bottom-width: 0.5px; }
.stepper-arrows button:last-child { border-radius: 0 0 8px 0; border-top-width: 0.5px; }
.stepper-arrows button:disabled { color: var(--axis); cursor: default; background: var(--surface); }
.stepper .readout { line-height: 1.3; }

input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; height: 24px; margin: 0; }
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.time-row { display: flex; align-items: center; gap: 10px; }
.play { width: 34px; height: 34px; padding: 0; font-size: 12px; flex: none; }
.tstamp { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--ink); }

.legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink2); }
.legend .ramp { width: 90px; height: 8px; border-radius: 4px; border: 1px solid var(--hairline); flex: none; }

.keys { font-size: 12px; color: var(--muted); margin: 0; }
kbd {
  font: inherit;
  font-size: 11px;
  padding: 0 5px;
  border: 1px solid var(--axis);
  border-radius: 4px;
  background: #f6f6f3;
  color: var(--ink2);
}
.note { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 0; }

/* ---------- foldable panels ---------- */
/* Native <details>: the browser handles the keyboard and the open state. The
   summary reads like a group label, with a chevron that turns when open. */
.panel { border-top: 1px solid var(--hairline); padding-top: 12px; }
.panel > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink2);
  font-weight: 600;
  border-radius: 4px;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
  flex: none;
}
.panel[open] > summary::before { transform: rotate(45deg); }
.panel > summary:hover { color: var(--ink); }
.panel > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.panel[open] > summary { margin-bottom: 10px; }
.panel > * + * { margin-top: 8px; }
/* About sits at the foot of the side panel, where the notes always were. */
.panel.about { margin-top: auto; }

/* ---------- touch ---------- */
/* Fingers, not a mouse: targets of about 44 px, and no double-tap zoom delay
   on the controls. The key list is for keyboards, so it goes. */
button, summary, input[type="range"] { touch-action: manipulation; }
@media (pointer: coarse) {
  button { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .play { width: 44px; height: 44px; font-size: 14px; }
  input[type="range"] { height: 40px; }
  .panel > summary { min-height: 40px; }
  .stepper-value { height: 44px; }
  .stepper-arrows button { width: 40px; height: 22px; min-height: 0; font-size: 10px; }
}
@media (hover: none) {
  .keys { display: none; }
}

/* ---------- loading ---------- */
.loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  background: var(--page);
  z-index: 50;
  text-align: center;
  transition: opacity 0.5s;
}
.loader.done { opacity: 0; pointer-events: none; }
.loader .bar { width: 220px; height: 3px; background: var(--grid); border-radius: 2px; overflow: hidden; }
.loader .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s; }
.loader p { color: var(--muted); font-size: 13px; margin: 0; }