/* ------------------------------------------------------------------
   TERMINAL — the desk's palette, shared by both apps (2026-09-10).

   Kevin, of the palette this replaces: "the current defaults were based
   on the j-lab assistant design. But it's really unattractive." It was
   three muddy warm neutrals with no true black and no real accent, so
   nothing on a page had hierarchy. Seven themes were drawn on the real
   components, light and dark, and this is the one chosen: DARK-FIRST,
   mono-forward — amber and cyan on near-black, with a light mode that
   is a pale companion rather than the point. It looks like what it is,
   a scan running against a city's data.

   Add tokens here rather than literals anywhere else. The map, the
   explorer, the beat pages and every chart read these names, so this
   file is the only place a colour decision lives.

   DARK IS DECLARED TWICE, and that is deliberate (the dataviz skill's
   rule): the media query follows the reader's OS, the [data-theme]
   scope follows an explicit choice and must win in both directions.
   Before today only the attribute existed and nothing set it, so the
   apps were light for everyone whatever their machine said.
   ------------------------------------------------------------------ */
:root {
  /* Chart pair: the place under examination against the rest of the city.
     Slots 1-4 are the categorical order, assigned in this fixed order and
     never cycled; a fifth series folds into "other" or becomes its own
     chart. Every slot was run through the dataviz validator against this
     mode's --leaf surface — lightness band, chroma floor, CVD separation,
     normal-vision floor, contrast. Light passes with one contrast WARN on
     the cyan (2.87:1), whose required relief is the direct label and the
     table view every chart here ships. Do not hand-tune without re-running
     the validator. */
  --mark-here: #96670d;   /* amber — the place under examination */
  --mark-rest: #09a4bd;   /* cyan  — the rest of the city */
  --series-1: #96670d;
  --series-2: #09a4bd;
  --series-3: #ad2d7d;
  --series-4: #45720a;

  --desk:   #F4F5F2;
  --leaf:   #FBFBF7;
  --ink:    #12150F;
  --graphite:#63685C;
  --rule:   #DDE0D8;
  --hover:  #F0F1EC;
  --hl:     #E4E9C8;

  /* Accents wear TEXT, so they are stepped for contrast on --leaf, not for
     a chart: the chart cyan reads at 2.87:1 and would fail as a word. */
  --red:    #9e2b2f;
  --blue:   #0a6d80;
  --ochre:  #8a5f0c;
  --green:  #3d6a10;

  --scrim:  rgba(18,21,15,.35);
  --tint-fact: rgba(150,103,13,.10);
  --tint-err:  rgba(158,43,47,.10);
  --tint-blue: rgba(10,109,128,.07);
  --line-ok:   rgba(61,106,16,.4);

  /* IBM Plex: the sans for reading, the mono for every figure. --serif keeps
     its name for the pages that already ask for it and holds the body face,
     which in this theme is a sans; new code should say --body / --display. */
  --display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:   var(--body);
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --measure: 34rem;
}

/* The dark steps are CHOSEN, not flipped: they were validated against the
   dark --leaf (#14181A) on their own, and the cyan is the one hue that sits
   at the same value in both modes because it passes in both. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mark-here: #b07f2a;
    --mark-rest: #09a4bd;
    --series-1: #b07f2a;
    --series-2: #09a4bd;
    --series-3: #c84895;
    --series-4: #598728;
    --desk:   #0D100F;
    --leaf:   #14181A;
    --ink:    #DCE5DE;
    --graphite:#838C84;
    --rule:   #262C2B;
    --hover:  #1C2222;
    --hl:     #2B3A2E;
    --red:    #e2696e;
    --blue:   #45c3da;
    --ochre:  #d9a441;
    --green:  #79b84a;
    --scrim:  rgba(0,0,0,.6);
    --tint-fact: rgba(217,164,65,.13);
    --tint-err:  rgba(226,105,110,.16);
    --tint-blue: rgba(69,195,218,.12);
    --line-ok:   rgba(121,184,74,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --mark-here: #b07f2a;
  --mark-rest: #09a4bd;
  --series-1: #b07f2a;
  --series-2: #09a4bd;
  --series-3: #c84895;
  --series-4: #598728;
  --desk:   #0D100F;
  --leaf:   #14181A;
  --ink:    #DCE5DE;
  --graphite:#838C84;
  --rule:   #262C2B;
  --hover:  #1C2222;
  --hl:     #2B3A2E;
  --red:    #e2696e;
  --blue:   #45c3da;
  --ochre:  #d9a441;
  --green:  #79b84a;
  --scrim:  rgba(0,0,0,.6);
  --tint-fact: rgba(217,164,65,.13);
  --tint-err:  rgba(226,105,110,.16);
  --tint-blue: rgba(69,195,218,.12);
  --line-ok:   rgba(121,184,74,.55);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--desk); color: var(--ink);
  font-family: var(--mono); font-size: 13px;
}
header {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: nowrap;
  padding: .5rem 1rem; border-bottom: 1px solid var(--rule);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--graphite); overflow-x: clip; overflow-y: visible;
}
header b { font-weight: 500; letter-spacing: .12em; color: var(--ink);
  white-space: nowrap; flex-shrink: 0; }
/* The way back to the other app, in the bar's own voice. It is a word,
   not a button: the bar stays one line, and nothing here gains a level. */
header .home { color: var(--graphite); text-decoration: none;
  letter-spacing: .12em; white-space: nowrap; flex-shrink: 0;
  border-bottom: 1px solid var(--rule); padding-bottom: .1rem; }
header .home:hover { color: var(--ink); border-color: var(--graphite); }
header .spacer { margin-left: auto; }
button, .btn {
  font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  background: none; color: var(--ink); border: 1px solid var(--rule);
  padding: .25rem .6rem; cursor: pointer; white-space: nowrap;
}
button:hover, .btn:hover { background: var(--hover); border-color: var(--graphite); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
a { color: inherit; }