/* =============================================================
   idf-skala.css - Shared Skala (v0.2.0, Issue 742)

   Eine Zahl als Leiste, die man fuellt. Geometrie und Zustaende;
   die Bedienung steht in idf-skala.js.
   ============================================================= */

.idf-skala {
  /* Hoehe der Leiste. Bewusst duenner als eine time-grid-Zelle (26 px):
     dort malt man Zeit und braucht die Flaeche, hier steht die Leiste zu
     dritt in einer Tabellenzeile und darf sie nicht aufschieben. */
  --idf-skala-hoehe: 10px;
  /* Unter dieser Segmentbreite trifft man mit der Maus die falsche Stufe.
     Wird die Spalte schmaler, bleibt die Leiste stehen und die Zelle
     scrollt, statt die Stufen unbedienbar zu machen. */
  --idf-skala-segment-min: 6px;
  --idf-skala-luecke: 2px;
  /* Die Farbe der gefuellten Segmente. Der Baustein bringt das Brand-Rot
     mit; wer mehrere Leisten nebeneinander stellt, setzt je Spalte eine
     eigene Farbe. Das ist eine KATEGORIE, keine Wertung: der Baustein
     weiss weiterhin nicht, ob acht gut ist. */
  --idf-skala-farbe: var(--primary);

  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.idf-skala-leiste {
  display: grid;
  grid-template-columns: repeat(var(--idf-skala-stufen, 10),
                                minmax(var(--idf-skala-segment-min), 1fr));
  gap: var(--idf-skala-luecke);
  flex: 1 1 auto;
  min-width: 0;
  /* Beim Ziehen ueber die Leiste soll nichts markiert werden. */
  user-select: none;
}

.idf-skala-segment {
  height: var(--idf-skala-hoehe);
  border-radius: var(--radius-xs);
  /* Leer ist eine Spur, kein Loch: die Stufe muss auch ungefuellt sichtbar
     sein, sonst kann man nicht abschaetzen, wohin man klickt. */
  background: var(--neutral-bg);
}

.idf-skala-segment.is-an {
  background: var(--idf-skala-farbe);
}

/* Vorschau beim Ueberfahren: dieselbe Farbe, nur zurueckgenommen. Ein
   zweiter Farbton waere eine Aussage („anderer Wert"), gemeint ist aber
   derselbe Wert, nur noch nicht gesetzt. */
.idf-skala-segment.is-vorschau {
  background: color-mix(in srgb, var(--idf-skala-farbe) 45%, var(--white));
}

/* Die Zahl neben der Leiste. Sie ist der Inhalt, die Leiste ist seine
   Form: deshalb Standard-Schriftgroesse und Ink, nicht kleiner und nicht
   grau (CLAUDE.md, Harte Verbote Nr. 11). Feste Breite mit
   Tabellenziffern, damit die Leisten dreier Spalten auf einer Linie
   enden und nicht bei jedem Wertwechsel springen. */
.idf-skala-zahl {
  flex: 0 0 auto;
  min-width: 2ch;
  text-align: right;
  font-size: var(--font-base);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.idf-skala.is-leer .idf-skala-zahl {
  color: var(--mid);
}

/* Bedienbar: der Zeiger sagt es, und die Leiste hebt sich beim Ueberfahren
   leicht an. Ohne Hover-Antwort wirkt sie wie eine Anzeige. */
.idf-skala:not(.is-readonly) .idf-skala-leiste {
  cursor: pointer;
}

.idf-skala:not(.is-readonly):hover .idf-skala-segment:not(.is-an):not(.is-vorschau) {
  background: var(--shade-08);
}

.idf-skala:focus-visible {
  outline: 2px solid var(--idf-skala-farbe);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Nur-Lesen: keine Zeigerhand, kein Hover. Die Leiste bleibt in voller
   Farbe stehen - sie ist dann eine Anzeige, keine ausgegraute Eingabe.
   Ein blasser Balken laese sich als „kein Wert" statt als „nicht
   aenderbar". */
.idf-skala.is-readonly .idf-skala-leiste {
  cursor: default;
}

/* Touch: der Finger ist breiter als die Maus. Die Segmente werden hoeher
   statt breiter, weil die Spaltenbreite in der Tabelle feststeht - eine
   hoehere Trefferflaeche hilft, eine breitere gaebe es nicht her.
   Gemessen wird die echte Eingabe, nie eine Media-Query. */
html[data-input-mode="touch"] .idf-skala {
  --idf-skala-hoehe: 18px;
  --idf-skala-segment-min: 10px;
}