/* ============================================================================================
   Kontor am Tresen — die Anordnung der Steuer-Ansicht.
   Die gemeinsame Blatt-Huelle des Geld-Blocks steht in view-kassa.css.

   HIER STEHT DAS EINE, WAS §5 NICHT KENNT
   §7.6 verlangt woertlich "ein Balkendiagramm ueber zwoelf Monate (eine Reihe, Messing,
   laufender Monat hervorgehoben — kein Wert-Farbverlauf)". §5 fuehrt dafuer kein Bauteil;
   `verlaufslinie()` zeichnet eine Linie, `anteilsbalken()` einen Anteil. Das Diagramm steht
   deshalb hier unter `gb-` und ist als Luecke der Bibliothek gemeldet — es gehoert nach
   parts.js/parts.css, sobald die Runde nicht mehr parallel baut.

   Keine font-size (die Balken tragen .v7), keine Farbe ausser Tokens, Radien §4.2,
   Abstaende §4.1.
   ============================================================================================ */

/* ---- Monatsblaettern (§7.6) ------------------------------------------------------------------ */

.gb-wechsler {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
}

.gb-wechsler > .v4 {
  color: var(--ink);
}

/* ---- Zwoelf Monate, eine Reihe (§7.6) -------------------------------------------------------- */

.gb-jahr {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 4px;
  height: 116px;
  padding-top: 8px;
}

.gb-monat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
  min-width: 0;
}

/* Die Saeule selbst. Eine Reihe, eine Farbe — kein Wert-Farbverlauf (§7.6, §2.7).
   Der Eckbogen (2 px, §4.2) steht in parts.css — §11.2 Regel 1. */
.gb-monat-saeule {
  display: block;
  width: 100%;
  background: var(--brass);
  opacity: .30;
  transition: opacity var(--t-gedrueckt) var(--ease);
}

/* Der laufende Monat ist hervorgehoben — durch volle Deckung, nicht durch eine zweite
   Farbe. Die Beschriftung darunter wechselt mit auf --brass-ink, damit die Hervorhebung
   nicht allein an der Flaeche haengt (§2.1: Farbe traegt nie allein). */
.gb-monat-an .gb-monat-saeule {
  opacity: 1;
}

.gb-monat-an > .v7 {
  color: var(--brass-ink);
}

.gb-monat:active .gb-monat-saeule {
  opacity: .6;
}

/* §4.4: die Trefferflaeche ist die ganze Spalte, mindestens 44 px hoch — sie ist 116 px. */