/* E-Ink Steps-Tracker — reines Schwarz/Weiss, hoher Kontrast, kein Grau.
   Stil: harte Kanten, invertierte Leisten, fette tabellarische Ziffern.
   Hoehe wird per JS auf die echte Pixelhoehe gesetzt (vh-Bug-Umgehung). */
:root {
  --ink: #000;
  --paper: #fff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: none;
  font-variant-numeric: tabular-nums;
}

.board {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 2.4vh 3.2vw;
  gap: 2vh;
}

/* ---- Kopf ---------------------------------------------------------------- */
.board__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 0.5vh solid var(--ink);
  padding-bottom: 1.4vh;
}

.board__kicker {
  font-size: 1.8vh;
  font-weight: 800;
  letter-spacing: 0.5vw;
}

.board__title {
  font-size: 5vh;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -1px;
}

.board__date {
  font-size: 2.1vh;
  font-weight: 600;
  text-align: right;
  max-width: 45vw;
}

/* ---- Personen ------------------------------------------------------------ */
.people {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2vh;
  min-height: 0;
}

.person {
  flex: 1;
  border: 0.5vh solid var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Fuehrender bekommt einen doppelten Rahmen-Effekt */
.person.is-leader {
  outline: 0.5vh solid var(--ink);
  outline-offset: 0.6vh;
}

/* Invertierte Namensleiste: weiss auf schwarz */
.person__bar {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 1.5vw;
  padding: 1vh 1.6vw;
}

.person__crown {
  font-size: 4.4vh;
  width: 4.4vh;
  visibility: hidden;       /* nur beim Fuehrenden sichtbar */
}
.person.is-leader .person__crown { visibility: visible; }

.person__name {
  font-size: 5.6vh;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2vw;
  flex: 1;
}

.person__pct {
  font-size: 4.4vh;
  font-weight: 800;
}

.person__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.2vh 2vw;
  gap: 1vh;
  min-height: 0;
}

.person__steps {
  font-size: 12vh;
  font-weight: 800;
  line-height: 0.85;
  display: flex;
  align-items: baseline;
  gap: 1.2vw;
}

.person__unit {
  font-size: 2vh;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2vw;
}

/* Fortschrittsbalken mit Zielmarke bei 100% */
.track {
  position: relative;
  height: 2.6vh;
  border: 0.35vh solid var(--ink);
  background: var(--paper);
}

.track__fill {
  height: 100%;
  width: 0%;
  background: var(--ink);
}

/* gestrichelte Marke am rechten Rand = Tagesziel */
.track__goal {
  position: absolute;
  top: -0.6vh;
  bottom: -0.6vh;
  right: 0;
  width: 0;
  border-left: 0.35vh dashed var(--ink);
}

.person__status {
  font-size: 2vh;
  font-weight: 700;
}

/* ---- Fuss ---------------------------------------------------------------- */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 0.5vh solid var(--ink);
  padding-top: 1.2vh;
}

.foot__versus {
  font-size: 2.2vh;
  font-weight: 800;
}

.foot__meta {
  display: flex;
  align-items: center;
  gap: 1.2vw;
  font-size: 1.8vh;
  font-weight: 700;
}

/* invertierender Block = Refresh-Beweis */
.foot__flip {
  width: 2.4vh;
  height: 2.4vh;
  background: var(--ink);
  border: 0.3vh solid var(--ink);
  display: inline-block;
}
.foot__flip.is-inverted { background: var(--paper); }

.foot__dim {
  font-weight: 600;
  margin-left: 0.6vw;
}
.foot__dim:not(:empty)::before { content: "· "; }