/**
 * idf-progress-ring - Fortschritts-Ring fuer apps-v2
 *
 * Logik: `_shared/primitives/progress-ring/idf-progress-ring.js`
 * Voraussetzung: `_shared/tokens/design-tokens/idf-tokens.css` ist vorher geladen.
 *
 * Farbrollen aus `blocks/time-grid`, dort bedeuten sie dasselbe:
 *   Spur      --accent (aufgehellt)   das Geplante, das Soll
 *   Fuellung  --confirm               "da", das Erreichte
 *   Ueberlauf --orange                mehr als geplant
 */

.idf-ring {
  display: block;
  /* Der Bogen startet oben statt rechts: eine Uhr, die um drei Uhr anfaengt,
     liest niemand. */
  transform: rotate(-90deg);
  overflow: visible;
}

/* --pastel-accent, nicht --tint-accent: der Tint sind 10 % Deckkraft, und das
   ist auf einer 3 px schmalen Linie praktisch unsichtbar - gemessen sah der
   Ring dadurch aus wie ein loser Bogen statt wie ein Kreis mit Fuellstand.
   Tints sind fuer Pillen gedacht, also fuer Flaechen, nicht fuer Striche. */
.idf-ring-spur {
  stroke: var(--pastel-accent, #e0f0f5);
}

.idf-ring-fuellung {
  stroke: var(--confirm, #0c998e);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.35s ease, stroke 0.2s ease;
}

/* Mehr als geplant. Nicht --red: Ueberstunde ist eine Auskunft, kein Alarm,
   und Rot an dieser Stelle waere jeden Abend rot. */
.idf-ring.is-ueberlauf .idf-ring-fuellung {
  stroke: var(--orange, #e8710a);
}

/* Kein Soll (Wochenende, Feiertag, kein Muster gepflegt): nur die Spur.
   Ein Tag ohne Vorgabe ist nicht zu 0 % erfuellt - er hat keine Vorgabe. */
.idf-ring.is-ohne-soll .idf-ring-fuellung {
  stroke: transparent;
}

/* Die Fuellung waechst ueber den Tag; wer Bewegung abgeschaltet hat, sieht
   den Wert trotzdem, nur ohne den Weg dorthin. */
@media (prefers-reduced-motion: reduce) {
  .idf-ring-fuellung { transition: none; }
}