/*
 * Shared shell for every page: palette, header, and the controls that appear on
 * more than one screen. Page-specific rules stay in that page's own <style>.
 */

:root {
  --bg:#0d1117; --panel:#151b23; --line:#232c37; --grid:#1e2631;
  --text:#e6edf3; --muted:#8b949e;
  --accent:#3fb950; --warn:#d29922; --bad:#f85149;

  /* One fixed colour per cube, used on its button, its chart line, its
     time-lapse label and its time-travel panel. Checked for contrast and
     colour-blind separation against --panel. */
  --dev-newyork:#3987e5; --dev-london:#d95926; --dev-paris:#199e70; --dev-tokyo:#c98500;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
}

/* ---- header ------------------------------------------------------------- */

header {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
}
h1 { margin: 0; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand img { height: 34px; width: auto; display: block; }
.brand h1 { white-space: nowrap; }
.brand:hover h1 { color: #fff; }

header .sub { color: var(--muted); font-size: 12px; }
header nav { margin-left: auto; display: flex; gap: 14px; }
header a { color: var(--muted); font-size: 12px; text-decoration: none; }
header a:hover { color: var(--text); }
header nav a, header .sub { white-space: nowrap; }

header .cube {
  display: grid; place-items: center; padding: 0 2px; margin: -4px 0; border: 0; background: none;
  color: var(--muted); cursor: pointer; border-radius: 4px; user-select: none; -webkit-user-select: none;
}
header .cube:hover { color: var(--text); }
header .cube:focus-visible { outline: 1px solid var(--muted); outline-offset: 2px; }
header .cube.film { font-size: 17px; line-height: 20px; filter: grayscale(.25); }
header .cube.film:hover { filter: none; }

/* ---- controls shared by the chart pages --------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }

.control { display: flex; flex-direction: column; gap: 5px; }
.control > .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
                  color: var(--muted); }

.range { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.range button { background: var(--panel); color: var(--muted); border: 0;
                padding: 7px 14px; font: inherit; cursor: pointer; }
.range button + button { border-left: 1px solid var(--line); }
.range button[aria-pressed=true] { background: #1d2733; color: var(--text); }
.range.cube button[aria-pressed=true] { box-shadow: inset 0 -2px 0 var(--dev, var(--text)); }

button.ghost { background: var(--panel); color: var(--muted); border: 1px solid var(--line);
               border-radius: 6px; padding: 7px 12px; font: inherit; cursor: pointer; }

.period { margin-left: auto; text-align: right; line-height: 1.35; }
.period .span { font-size: 15px; font-variant-numeric: tabular-nums; }
.period .meta { color: var(--muted); font-size: 11px; }
.filters .period + button { margin-left: 14px; }

.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.legend span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: block; }

/* ---- charts ------------------------------------------------------------- */

.chart { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
         padding: 12px 14px 6px; margin-bottom: 14px; position: relative; }
.chart h2 { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
.chart .unit { color: var(--muted); font-size: 11px; }
.chart svg { display: block; max-width: 100%; }
.chart .empty { color: var(--muted); font-size: 12px; padding: 28px 0 34px; text-align: center; }

.tip { position: absolute; pointer-events: none; background: #0b0f14ee;
       border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 12px;
       white-space: nowrap; z-index: 5; box-shadow: 0 4px 14px #0008; }
.tip .when { color: var(--muted); margin-bottom: 5px; }
.tip .row { display: flex; align-items: center; gap: 6px; }
.tip .row i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.tip .row b { font-weight: 600; font-variant-numeric: tabular-nums;
              margin-left: auto; padding-left: 12px; }

/* ---- overview strip ------------------------------------------------------ */

.overview { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
            padding: 8px 10px 5px; margin-bottom: 14px; }
.overview .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
                 color: var(--muted); display: block; margin-bottom: 4px; }
.ov-track { position: relative; height: 40px; cursor: crosshair; touch-action: none; }
.ov-spark { position: absolute; inset: 0; }
.ov-spark svg { display: block; width: 100%; height: 40px; }
.ov-box { position: absolute; top: 0; bottom: 0; background: #3987e51f;
          border-left: 2px solid var(--sel, #3987e5); border-right: 2px solid var(--sel, #3987e5);
          cursor: grab; touch-action: none; }
.ov-handle { position: absolute; top: 50%; width: 9px; height: 20px; margin-top: -10px;
             background: var(--sel, #3987e5); border-radius: 2px; cursor: ew-resize; }
.ov-handle.from { left: -6px; }
.ov-handle.to { right: -6px; }
.ov-labels { display: flex; justify-content: space-between; color: var(--muted);
             font-size: 10px; margin-top: 2px; }