/* ============================================================
   CELE (wyzwania zbiorcze) — /cele, /cel/<id>
   Reużywa .panel, .leaderboard, .form, .chip, .hero, .pagination.
   Poniżej wyłącznie to, czego nie ma w bazie.
   ============================================================ */

/* ------------------------------------------------------------
   Wskaźnik postępu
   To JEDYNY nowy komponent tego modułu — i świadomie jest odczytem
   pomiarowym, a nie gamifikacją (.impeccable.md zakazuje odznak i poziomów):
   prostokątna ramka 1px, płaskie wypełnienie akcentem, liczba obok w .num.
   Bez gradientu, bez animacji, bez easingu, bez zaokrągleń.
   ------------------------------------------------------------ */
.goal-progress {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.goal-progress__track {
  flex: 1;
  height: 10px;
  min-width: 4rem;
  background: var(--color-card-inset);
  border: 1px solid var(--color-border);
}

.goal-progress__fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
}

/* Cel osiągnięty — sygnał, nie fajerwerki. */
.goal-progress__fill--done {
  background: var(--color-success);
}

.goal-progress__value {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.goal-progress__value .num {
  color: var(--color-ink);
  font-weight: 500;
}

/* W wierszu tabeli pasek ma być wąski i nie rozpychać kolumny. */
.leaderboard .goal-progress__track {
  min-width: 3rem;
  max-width: 10rem;
}

/* ------------------------------------------------------------
   Lista celów
   ------------------------------------------------------------ */
.goal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 40em) {
  .goal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .goal-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Ostre rogi jak .challenge-card — karty w tym serwisie nie są zaokrąglone.
   `position: relative` jest tu po to, żeby nakładka linku tytułu (niżej)
   miała się do czego zaczepić — cała karta jest klikalna. */
.goal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-none);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.goal-card:hover {
  background: var(--color-card-hover);
  border-color: var(--color-border-strong);
}

/* Wyróżniony przez moderację — ten sam pastel co .challenge-card--highlighted:
   color-mix na tokenach, które są już light-dark(), więc bez osobnych wariantów
   motywu. Samo tło; nakładka .goal-card__title a::before zostaje nietknięta. */
.goal-card--highlighted {
  background: color-mix(in oklch, var(--color-accent) 8%, var(--color-card));
}

.goal-card--highlighted:hover {
  background: color-mix(in oklch, var(--color-accent) 14%, var(--color-card));
}

.goal-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.goal-card__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-ink);
}

.goal-card__title a {
  color: inherit;
  text-decoration: none;
}

/* Ten sam chwyt co w .challenge-card__title: pusta nakładka rozciągnięta na
   całą kartę robi z kafelka jeden duży cel kliknięcia, bez zagnieżdżania
   treści w <a> i bez JS-owego onclick (ten nie daje ani kursora, ani menu
   kontekstowego, ani otwarcia w nowej karcie). Warunek: wewnątrz kafelka nie
   ma innego odnośnika ani pola — dziś są tam wyłącznie <span>-y, łącznie
   z paskiem postępu. Dokładając cokolwiek klikalnego trzeba temu elementowi
   dać `position: relative`, inaczej nakładka go przykryje. */
.goal-card__title a::before {
  content: "";
  position: absolute;
  inset: 0;
}

.goal-card__meta {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
}

.goal-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}

.goal-card__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
}

/* ------------------------------------------------------------
   Strona celu
   Układ jest celowo taki sam jak na /wyzwanie/<id>: .detail-hero__by,
   .params-grid, .detail-actions, panele. Poniżej tylko trzy dostrojenia.
   ------------------------------------------------------------ */

/* Siatka parametrów celu ma STAŁĄ liczbę kolumn, inaczej niż bazowa
   .params-grid z `auto-fit`. Powód: przy auto-fit puste ścieżki znikają tylko
   wtedy, gdy nic ich nie zajmuje — a wiersz postępu (poniżej) zajmuje wszystkie,
   więc nadmiarowe kolumny zostawały jako pusty, szary prostokąt obok „Przejazdy". */
.goal-params {
  margin-block-start: var(--space-xl);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48em) {
  .goal-params {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Pasek postępu jako ostatni wiersz tej samej siatki, na pełną szerokość. */
.goal-params__progress {
  grid-column: 1 / -1;
}

/* dd w .params-grid jest nastawione na wielką liczbę (fs-xl, line-height 1).
   Tu w środku siedzi pasek z podpisem, więc wracamy do normalnej typografii. */
.goal-params__progress dd {
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  font-weight: 400;
}

/* Wiersz księgi wykreślony przez moderację. Zostaje widoczny — księga ma
   pokazywać nie tylko kilometry, ale i to, że ktoś patrzył — ale wygaszony
   i przekreślony na liczbie, żeby nie dało się go pomylić z zaliczonym. */
.ledger-row--removed {
  opacity: 0.6;
}

.ledger-row--removed .leaderboard__time {
  text-decoration: line-through;
}

/* Chip w komórce z nickiem („to Ty", „zweryfikowano ręcznie"). Komórka jest
   flex-kolumną, więc bez tego chip rozciąga się na całą szerokość kolumny
   i wygląda jak rozjechane pole formularza. */
.leaderboard__nick .chip {
  align-self: flex-start;
}

/* Upload przejazdu: pole i przycisk w jednym rzędzie. Wzorzec z
   .challenge-upload__form — bez tego `.form__actions .btn { width: 100% }`
   rozciąga przycisk na całą szerokość panelu. */
.goal-upload__form {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
}

.goal-upload__form .form__field {
  flex: 1 1 280px;
}

.goal-upload__hint,
.goal-upload__closed,
.goal-note {
  margin-block-start: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

/* Pasek filtrów listy — chipy są linkami, więc potrzebują stanu aktywnego. */
.goal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.goal-filters .chip {
  text-decoration: none;
}

.goal-filters .chip:not(.chip--solid):hover {
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

/* Wariant wypełniony trzyma własną parę kolorów także pod kursorem — jego tło
   to --color-ink, więc nadpisanie koloru tekstu zrównałoby napis z tłem. */
.goal-filters .chip--solid:hover {
  background: var(--color-ink);
  color: var(--color-surface);
  border-color: var(--color-ink);
}