/* MataMath - the console's own styling.
 *
 * Loaded after game.css and seiten.css, which own the palette tokens.
 *
 * COLOUR NOTE. Every chart here is single-series, so no categorical palette is
 * needed and none is defined - a categorical scale would be inventing identity
 * where the data has none. What is defined is a STATUS palette, and it was
 * validated rather than eyeballed:
 *
 *   gut  #4ade80   warn #ffb03a   schlecht #ff4d5e   Akzent #38e1ff
 *
 * Against the panel surface #1a2130: contrast ≥ 3:1 all round, normal-vision
 * separation ΔE 17.1 worst pair, CVD separation ΔE 8.0 worst pair (deuteranopia,
 * amber against green - the classic collision). That last figure sits at the
 * floor, which is admissible only with a second encoding, so every status in
 * this console is a WORD. There is no bare coloured dot anywhere, and there
 * must not be.
 *
 * The green is deliberately NOT the #6ee7a0 used in tests.html: against this
 * accent cyan it measured ΔE 13.8, below the normal-vision floor of 15, so
 * even a reader with full colour vision would struggle to tell a "good" badge
 * from a data mark.
 */

:root {
  --gut:      #4ade80;
  --warn:     #ffb03a;
  --schlecht: #ff4d5e;
  --flaeche:  #1a2130;
}

/* ---------------------------------------------------------------- tiles */

/* Hero numbers, not charts. Four counts do not need axes. */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0 8px;
}

.kachel {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--flaeche);
  border: 1px solid var(--edge-dim);
}

.kachel b {
  display: block;
  font-family: var(--mono);
  font-size: 26px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.kachel span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.kachel em {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-style: normal;
  color: var(--text-dim);
  opacity: 0.85;
}

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

figure { margin: 16px 0 24px; }

figcaption {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 10px;
}

figcaption .einheit {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-dim);
}

.diagramm { overflow-x: auto; }
.diagramm svg { display: block; }

/* Recessive by design: the data carries the eye, not the scaffolding. But
   recessive is not invisible - at opacity 0.4 on --edge-dim the gridlines
   vanished entirely against this background, leaving axis numbers with nothing
   to line up against. */
.achse    { stroke: var(--edge-dim); stroke-width: 1; }
.gitter   { stroke: var(--edge); stroke-width: 1; opacity: 0.55; }
.achstext { fill: var(--text-dim); font-size: 11px; font-family: var(--mono); }

/* The direction hints are prose, not data, and the mono face has no arrow. */
.richtung { fill: var(--text-dim); font-size: 11px; letter-spacing: 0.06em; }

/* A scatter is squarish by nature; centred it reads as a considered figure
   rather than as content that failed to fill its column. */
.diagramm svg.mittig { margin: 0 auto; }
.nulllinie { stroke: var(--edge); stroke-width: 1; stroke-dasharray: 3 3; }

/* The target band is context behind the data, not data. Barely-there fill with
   a defined edge, so it reads as a region rather than as another series. */
.band { fill: var(--cyan); fill-opacity: 0.07; stroke: var(--cyan-dim); stroke-opacity: 0.4; }

/* Range marks: 4px rounded ends, thin, anchored to their own scale. */
.spanne   { stroke: var(--cyan-dim); stroke-width: 8; stroke-linecap: round; }
.mittel   { fill: var(--cyan); }
.punkt    { fill: var(--cyan); fill-opacity: 0.75; stroke: var(--flaeche); stroke-width: 2; }
.trend    { stroke: var(--cyan-dim); stroke-width: 2; stroke-dasharray: 5 4; }

.balkenzeile:hover .spanne { stroke: var(--cyan); }

/* ---------------------------------------------------------------- status */

.marke {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  /* The word is the encoding; the colour only reinforces it. */
}

.marke.gut      { color: var(--gut); }
.marke.warn     { color: var(--warn); }
.marke.schlecht { color: var(--schlecht); }
.marke.ruhig    { color: var(--text-dim); }

/* -------------------------------------------------------------- filters */

/* One row, above the table it filters. */
.filterzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 14px 0 4px;
}

.filterzeile label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.filterzeile select {
  font: inherit;
  font-size: 14px;
  padding: 6px 10px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-top);
  border-radius: 7px;
}

.filterzeile .ankreuz { text-transform: none; letter-spacing: 0; }
.filterzeile input[type="checkbox"] { width: auto; margin: 0; }

/* --------------------------------------------------------------- tables */

table.daten th.sortierbar { cursor: pointer; user-select: none; }
table.daten th.sortierbar:hover { color: var(--cyan); }
table.daten th.aktiv { color: var(--cyan); }
table.daten td.gedimmt { color: var(--text-dim); }

/* --------------------------------------------------------------- empty */

/* An empty console should explain how it stops being empty. A blank page
   reads as broken; this reads as "not yet". */
.leer {
  padding: 18px 20px;
  border: 1px dashed var(--edge-dim);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}

/* -------------------------------------------------------------- tooltip */

.tooltip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  padding: 8px 11px;
  border-radius: 8px;
  background: #05070d;
  border: 1px solid var(--edge);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  max-width: 260px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.tooltip b { font-family: var(--mono); }
.tooltip .zeile { color: var(--text-dim); }
.tooltip .zeile span { color: var(--text); float: right; padding-left: 14px; }