/* =====================================================================
   kdg — Shell_Diagnozy (zadanie 4.1)

   Wymagania: REQ-UX-05.1, REQ-UX-05.3, REQ-UX-05.4, REQ-UX-05.6
   Projekt: design.md §3.4, §4.1.4

   Arkusz powierzchni wczytywany wyłącznie przez `views/layouts/diagnosis.hbs`,
   PO `kds.css`. Rodzina `kdg-*` (korki diagnosis) opisuje tylko UKŁAD shellu:
   pasek nagłówka, obszar treści i skróconą stopkę. Komponenty — przycisk,
   kolory, promienie, odstępy — pochodzą z warstwy Design_System i ten arkusz
   ich nie przepisuje (REQ-UX-32.4). Dlatego nie ma tu ani jednej deklaracji
   `background`, `border-radius`, `gap` czy `min-height` na selektorze akcji.

   Nagłówek jest przyklejony do góry, bo REQ-UX-09.1 wymaga, żeby podczas
   dobierania kolejnego pytania nagłówek i wskaźnik postępu pozostały widoczne.
   ===================================================================== */

.kdg-shell-body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: var(--kds-color-background);
  color: var(--kds-color-ink);
  font-size: var(--kds-font-size-body);
  line-height: var(--kds-line-height-body);
}

/* --- Nagłówek: logo + jedna akcja wyjścia --------------------------- */

.kdg-shell-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--kds-color-line);
  background: var(--kds-color-surface);
}

.kdg-shell-header__inner {
  display: flex;
  max-width: 1140px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: var(--kds-space-3) var(--kds-space-4);
}

.kdg-shell-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.kdg-shell-brand img {
  height: auto;
  max-width: 120px;
}

.kdg-shell-brand:focus-visible {
  outline: var(--kds-focus-ring-width) solid var(--kds-focus-ring-color);
  outline-offset: var(--kds-focus-ring-offset);
}

/* --- Treść ---------------------------------------------------------- */

.kdg-shell-main {
  flex: 1 0 auto;
}

.kdg-shell-main:focus {
  outline: none;
}

/* --- Stopka: dokładnie trzy odnośniki ------------------------------- */

.kdg-shell-footer {
  border-top: 1px solid var(--kds-color-line);
  padding: var(--kds-space-4);
  background: var(--kds-color-surface);
}

.kdg-shell-footer__links {
  display: flex;
  max-width: 1140px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  column-gap: var(--kds-space-5);
  row-gap: var(--kds-space-2);
}

.kdg-shell-footer__links a {
  color: var(--kds-color-muted);
  font-size: var(--kds-font-size-support);
  text-decoration: none;
}

.kdg-shell-footer__links a:hover,
.kdg-shell-footer__links a:focus-visible {
  color: var(--kds-color-primary-strong);
  text-decoration: underline;
}

.kdg-shell-footer__links a:focus-visible {
  outline: var(--kds-focus-ring-width) solid var(--kds-focus-ring-color);
  outline-offset: var(--kds-focus-ring-offset);
}

/* --- Parametry wejścia nad pierwszym pytaniem (zadanie 4.4) ----------
   Wymagania: REQ-UX-04.2, REQ-UX-04.3, REQ-UX-04.4, REQ-UX-04.6
   Podsumowanie jest LEKTURĄ, nie akcją: dlatego „Zmień” i „Uzupełnij cel” są
   odnośnikami tekstowymi, a nie komponentem przycisku. Gdyby wyglądały jak
   przycisk, konkurowałyby z „Dalej”, a na ekran przypada dokładnie jedno główne
   CTA (REQ-UX-05.6). Jawny brak ma własny stan `is-missing` — wyciszony, ale nie
   ukryty, bo brak wartości jest informacją, nie usterką do zamaskowania. */

.kdg-parameters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  border: 1px solid var(--kds-color-line);
  border-radius: var(--kds-radius-lg);
  padding: var(--kds-space-3) var(--kds-space-4);
  background: var(--kds-color-surface-quiet);
  column-gap: var(--kds-space-4);
  row-gap: var(--kds-space-2);
}

.kdg-parameters__heading {
  flex: 1 0 100%;
  margin: 0;
  color: var(--kds-color-muted);
  font-size: var(--kds-font-size-support);
  font-weight: 600;
}

.kdg-parameters__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  column-gap: var(--kds-space-5);
  row-gap: var(--kds-space-2);
}

.kdg-parameters__item {
  display: flex;
  align-items: baseline;
  gap: var(--kds-space-1);
}

.kdg-parameters__item dt {
  color: var(--kds-color-muted);
  font-size: var(--kds-font-size-support);
  font-weight: 400;
}

.kdg-parameters__item dd {
  margin: 0;
  font-size: var(--kds-font-size-support);
  font-weight: 600;
}

.kdg-parameters__item.is-missing dd {
  color: var(--kds-color-muted);
  font-style: italic;
  font-weight: 400;
}

.kdg-parameters__change,
.kdg-parameters__fill {
  color: var(--kds-color-primary-strong);
  font-size: var(--kds-font-size-support);
}

.kdg-parameters__fill {
  margin-left: var(--kds-space-2);
  font-weight: 400;
}

.kdg-parameters__change:focus-visible,
.kdg-parameters__fill:focus-visible {
  outline: var(--kds-focus-ring-width) solid var(--kds-focus-ring-color);
  outline-offset: var(--kds-focus-ring-offset);
}

/* --- Wąski ekran ---------------------------------------------------- */

@media (max-width: 375px) {
  .kdg-shell-header__inner {
    padding: var(--kds-space-2) var(--kds-space-3);
  }

  .kdg-shell-brand img {
    max-width: 96px;
  }

  .kdg-parameters__list {
    column-gap: var(--kds-space-4);
  }
}