/**
 * styleguide.css — rusztowanie strony podglądu sekcji (template-styleguide.php).
 *
 * Wyłącznie narzędzie deweloperskie: pasek u góry, spis sekcji, etykiety
 * nad każdą z nich. Świadomie NIE stylizuje samych sekcji — każda z nich
 * renderuje się swoim własnym plikiem z assets/css/sections/. Klasy tego
 * pliku (dc-styleguide__*) nie występują w żadnym innym miejscu motywu,
 * więc nie ma ryzyka, że coś stąd wycieknie do prawdziwej strony.
 */

/* ==========================================================================
   1. PASEK GÓRNY
   ========================================================================== */
.dc-styleguide__bar {
  position: sticky;
  top: 0;
  z-index: var(--dc-z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dc-space-16);
  padding: var(--dc-space-16) var(--dc-space-24);
  background-color: var(--dc-surface);
  border-bottom: var(--dc-border) solid var(--dc-border-line);
}

.dc-styleguide__heading {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-4);
}

/* Celowo krój body, nie display: to narzędzie, nie nagłówek marki. */
.dc-styleguide__title {
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-6xl);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-tight);
}

.dc-styleguide__intro {
  max-width: var(--dc-measure-md);
  color: var(--dc-text-muted);
  font-size: var(--dc-text-sm);
}

.dc-styleguide__bar-controls {
  display: flex;
  align-items: center;
  gap: var(--dc-space-16);
}

.dc-styleguide__counter {
  display: flex;
  gap: var(--dc-space-8);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-bold);
}

.dc-styleguide__counter-built,
.dc-styleguide__counter-remaining {
  padding: var(--dc-space-4) var(--dc-space-10);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-sunken);
  white-space: nowrap;
}

.dc-styleguide__counter-built {
  color: var(--dc-success);
}

.dc-styleguide__counter-remaining {
  color: var(--dc-text-muted);
}

/* Złoto, nie czerwień: wstrzymanie to stan oczekiwania, a nie błąd.
   --dc-accent-strong, bo to TEKST — patrz decisions.md, wpis o złotym tekście. */
.dc-styleguide__counter-hold {
  padding: var(--dc-space-4) var(--dc-space-10);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent-a10);
  color: var(--dc-accent-strong);
  white-space: nowrap;
}

/* ==========================================================================
   2. „JESZCZE NIE ZBUDOWANE", „WSTRZYMANE" I SPIS SEKCJI
   ========================================================================== */
.dc-styleguide__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-lg), 100%), 1fr));
  gap: var(--dc-space-24);
  padding: var(--dc-space-24);
  border-bottom: var(--dc-border) solid var(--dc-border-line);
}

.dc-styleguide__meta-heading {
  margin-bottom: var(--dc-space-10);
  color: var(--dc-text-muted);
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wider);
  text-transform: uppercase;
}

.dc-styleguide__meta-empty {
  color: var(--dc-text-muted);
  font-size: var(--dc-text-sm);
  font-style: italic;
}

/* Zdanie wyjaśniające grupę. Bez niego „wstrzymane" wygląda jak synonim
   „niezbudowanych" i cała różnica między nimi ginie. */
.dc-styleguide__meta-note {
  max-width: var(--dc-measure-md);
  margin-bottom: var(--dc-space-10);
  color: var(--dc-text-muted);
  font-size: var(--dc-text-xs);
  line-height: var(--dc-leading-normal);
}

.dc-styleguide__todo-list,
.dc-styleguide__hold-list,
.dc-styleguide__toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dc-styleguide__todo-list code {
  padding: var(--dc-space-4) var(--dc-space-10);
  border-radius: var(--dc-radius-6);
  background-color: var(--dc-surface-sunken);
  color: var(--dc-text-muted);
  font-size: var(--dc-text-xs);
}

/* Kolumna, nie rząd: powód stoi pod nazwą pliku, żeby dało się go przeczytać
   bez rozjeżdżania listy przy dłuższym zdaniu. */
.dc-styleguide__hold-item {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
  padding: var(--dc-space-6) var(--dc-space-10);
  border: var(--dc-border) solid var(--dc-accent-a15);
  border-radius: var(--dc-radius-6);
  background-color: var(--dc-accent-a10);
}

.dc-styleguide__hold-item code {
  color: var(--dc-accent-strong);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-bold);
}

.dc-styleguide__hold-reason {
  color: var(--dc-text-muted);
  font-size: var(--dc-text-2xs);
}

.dc-styleguide__toc-link {
  display: inline-flex;
  padding: var(--dc-space-4) var(--dc-space-10);
  border-radius: var(--dc-radius-6);
  background-color: var(--dc-surface-sunken);
  color: var(--dc-text-secondary);
  font-size: var(--dc-text-xs);
  text-decoration: none;
  transition: background-color var(--dc-duration-fast) var(--dc-ease), color var(--dc-duration-fast) var(--dc-ease);
}

.dc-styleguide__toc-link:hover,
.dc-styleguide__toc-link:focus-visible {
  background-color: var(--dc-accent-a15);
  color: var(--dc-text);
}

/* ==========================================================================
   3. SEKCJE
   ========================================================================== */
.dc-styleguide__sections {
  display: flex;
  flex-direction: column;
}

.dc-styleguide__section {
  border-bottom: var(--dc-border) solid var(--dc-border-line);
}

.dc-styleguide__section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-16);
  margin: 0;
  padding: var(--dc-space-8) var(--dc-space-24);
  background-color: var(--dc-surface-sunken);
  font-size: var(--dc-text-xs);
}

.dc-styleguide__section-label code {
  color: var(--dc-text);
  font-weight: var(--dc-weight-bold);
}

.dc-styleguide__section-top {
  color: var(--dc-text-muted);
  font-size: var(--dc-text-xs);
  text-decoration: none;
}

.dc-styleguide__section-top:hover,
.dc-styleguide__section-top:focus-visible {
  color: var(--dc-text);
}

/* Obwódka przerywana tylko po to, by widzieć granicę sekcji przy zrzucie —
   to jedyna reguła w pliku, która „dotyka" wyglądu treści, i celowo nie ma
   koloru z palety marki (--dc-accent), żeby nie sugerować, że to element
   projektu. */
.dc-styleguide__section-frame {
  outline: var(--dc-border) dashed var(--dc-border-line);
  outline-offset: calc(-1 * var(--dc-border));
}

/* TODO USUNĄĆ — wyzwalacz testowy komponentu modal (etap 1, 2026-08-29).
   Znika razem z przyciskiem i <dialog> z template-styleguide.php, gdy okno
   dostanie prawdziwych konsumentów. Wygląd celowo taki sam jak pozycji spisu
   sekcji: to narzędzie deweloperskie, nie element projektu. */
.dc-styleguide__modal-probe {
  padding: var(--dc-space-4) var(--dc-space-10);
  border: none;
  border-radius: var(--dc-radius-6);
  background-color: var(--dc-surface-sunken);
  color: var(--dc-text-secondary);
  font-family: inherit;
  font-size: var(--dc-text-xs);
  cursor: pointer;
  transition: background-color var(--dc-duration-fast) var(--dc-ease), color var(--dc-duration-fast) var(--dc-ease);
}

.dc-styleguide__modal-probe:hover {
  background-color: var(--dc-accent-a15);
  color: var(--dc-text);
}