/* ==========================================================================
   ARKUSZ SPECYFIKACJI — warstwa wizualna
   Osobny plik od `ef-creator.css` świadomie: dzięki temu widać, ile
   naprawdę waży pozycja z oferty, a nie ile waży kreator razem z nią.
   Tokeny wciąga `ef-creator.css`, ten plik ładuje się po nim.
   ========================================================================== */

/* --- układ dwukolumnowy -------------------------------------------------
   ⚠️ `max-width: none` jest tu konieczne, bo motyw (Twenty Twenty-Five)
   nakłada szerokość treści na KAŻDE dziecko `.is-layout-constrained`.
   W produkcji tego nadpisania nie będzie — szerokość ustawi nasz motyw. */

.ef-creator-layout {
  max-width: none;
  width: 100%;
  display: grid;
  gap: var(--wp--preset--spacing--space-7);
  align-items: start;
}

@media (min-width: 60rem) {
  .ef-creator-layout {
    grid-template-columns: minmax(0, 44rem) minmax(18rem, 22rem);

    /* Do krawędzi kontenera, nie na środek: wyśrodkowane tory zostawiały po
       16 px z obu stron, więc formularz stał o 16 px na prawo od tytułu strony
       i logo, a arkusz o 16 px przed przyciskiem w nagłówku (DEC-061). Nadmiar
       idzie w odstęp między kolumnami.                                     */
    justify-content: space-between;
    gap: var(--wp--preset--spacing--space-8);
  }

  /* ⚠️ `margin-inline: auto` z `ef-creator.css` WYŁĄCZA rozciąganie elementu
     siatki. Formularz sam z siebie robił się wtedy szeroki na 334 px w torze
     szerokim na 704 px i stawał wyśrodkowany w pustce. To nie jest pomyłka
     tamtej reguły — ona centruje formularz, gdy stoi sam na stronie —
     tylko koszt wstawienia go w siatkę. Zmierzone, nie założone.          */
  .ef-creator-layout > .fluentform { width: 100%; max-width: none; margin-inline: 0; }
}

/* --- arkusz -------------------------------------------------------------
   Wygląda jak tabliczka rysunkowa, nie jak karta podsumowania z koszyka:
   linia 1 px zamiast cienia (DEC-020 d), wartości w kroju danych. */

.ef-spec {
  border: var(--wp--custom--border--hair) solid var(--wp--preset--color--border-strong);
  background: var(--wp--preset--color--page);
  padding: var(--wp--preset--spacing--space-5);
}

@media (min-width: 60rem) {
  /* Arkusz jedzie z użytkownikiem przez wszystkie trzy kroki — inaczej
     na kroku 3 jest już poza ekranem i przestaje robić to jedno, po co
     istnieje.
     ⚠️ POPRAWKA 22.09: w spike'u offset liczył się od górnej krawędzi okna
     (Twenty Twenty-Five nie ma przypiętego nagłówka). W motywie nagłówek
     serwisu jest `sticky` od 60rem (DEC-031), czyli dokładnie od tej samej
     szerokości co arkusz, więc arkusz stawał na 32 px i chował pod
     nagłówkiem (0–73 px) swój tytuł i „Print". Offset = nagłówek + jego
     linia + ten sam odstęp co wcześniej.                               */
  .ef-spec {
    position: sticky;
    top: calc(var(--wp--custom--layout--header-height) + var(--wp--custom--border--hair) + var(--wp--preset--spacing--space-6));
  }
}

.ef-spec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--space-4);
  padding-bottom: var(--wp--preset--spacing--space-3);
  border-bottom: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
}

.ef-spec__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--fs-small);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--micro);
  text-transform: uppercase;
  color: var(--wp--preset--color--text);
}

/* Przycisk cichy — trzeci poziom z DEC-021 (a). Główny na tym widoku
   jest już jeden i jest nim wysyłka.                                   */
.ef-spec__print {
  position: relative;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--fs-small);
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ef-spec__print:hover { color: var(--wp--preset--color--accent-hover); }
.ef-spec__print:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
  outline-offset: var(--wp--custom--focus--offset);
}
/* Pole trafienia 44 px bez rozpychania układu (DEC-021 c). */
.ef-spec__print::after {
  content: "";
  position: absolute;
  inset: 50% 0 0 0;
  transform: translateY(-50%);
  height: var(--wp--custom--hit--min);
  min-width: var(--wp--custom--hit--min);
}

.ef-spec__list { margin: 0; }

.ef-spec__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--wp--preset--spacing--space-4);
  align-items: baseline;
  padding: var(--wp--preset--spacing--space-3) 0;
  border-bottom: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
}
.ef-spec__row:last-child { border-bottom: 0; }

.ef-spec__row dt {
  font-size: var(--wp--preset--font-size--fs-small);
  color: var(--wp--preset--color--text-muted);
}

.ef-spec__row dd {
  margin: 0;
  font-family: var(--wp--preset--font-family--data);
  font-size: var(--wp--preset--font-size--fs-small);
  text-align: right;
  color: var(--wp--preset--color--text);
}

/* Zdanie własnymi słowami („Tell us what you do know") nie mieści się
   w kolumnie przeznaczonej na liczby. Ten jeden wiersz łamie się więc na
   dwie linie i wraca do kroju tekstowego — bo to jest zdanie, nie wymiar. */
.ef-spec__row--wide { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--space-2); }
.ef-spec__row--wide dd {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--fs-small);
  line-height: var(--wp--custom--line-height--small);
  text-align: left;
  overflow-wrap: anywhere;
}

/* Trzy puste stany różnią się WAGĄ, nie kolorem — bo kolorów mamy jeden
   i jest zajęty (DEC-014). Wypełniony wiersz jest ciemny, puste są ciche. */
.ef-spec__row--empty  dd,
.ef-spec__row--na     dd { color: var(--wp--preset--color--text-muted); }
.ef-spec__row--na     dd,
.ef-spec__row--advise dd { font-family: var(--wp--preset--font-family--body); font-style: italic; }
.ef-spec__row--advise dd { color: var(--wp--preset--color--accent); font-style: normal; }

.ef-spec__note {
  margin: var(--wp--preset--spacing--space-4) 0 0;
  font-size: var(--wp--preset--font-size--fs-micro);
  line-height: var(--wp--custom--line-height--micro);
  color: var(--wp--preset--color--text-muted);
}

/* --- warstwa mobilna: panel przypięty do dołu ---------------------------
   Problem, który to rozwiązuje: w jednej kolumnie arkusz stoi POD
   przyciskiem wysyłki, więc podczas wypełniania jest niewidoczny — a to
   jedyny moment, w którym cokolwiek znaczy. Zwinięty panel zajmuje jedną
   linię, więc nie odbiera miejsca formularzowi.                         */

@media (max-width: 59.999rem) {
  .ef-spec {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    border: 0;
    border-top: var(--wp--custom--border--hair) solid var(--wp--preset--color--border-strong);
    padding: 0;
  }

  .ef-spec__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--space-4);
    width: 100%;
    min-height: var(--wp--custom--hit--min);
    padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-5);
    border: 0;
    background: var(--wp--preset--color--surface);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--fs-small);
    font-weight: 600;
    letter-spacing: var(--wp--custom--tracking--micro);
    text-transform: uppercase;
    color: var(--wp--preset--color--text);
    text-align: left;
    cursor: pointer;
  }

  /* Strzałka rysowana kreską, nie znakiem — ten sam język co reszta
     systemu, i obraca się razem ze stanem.                            */
  .ef-spec__toggle::after {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-135deg);
    transition: transform var(--wp--custom--motion--expand) ease;
  }
  .ef-spec--open .ef-spec__toggle::after { transform: rotate(45deg); }

  .ef-spec__count {
    font-family: var(--wp--preset--font-family--data);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wp--preset--color--text-muted);
  }

  /* Zwinięty panel nie renderuje treści w ogóle, więc czytnik ekranu nie
     czyta dziewięciu wierszy, których nie widać. `aria-expanded` na
     przycisku mówi, że jest co rozwinąć.                               */
  .ef-spec__body { display: none; }
  .ef-spec--open .ef-spec__body {
    display: block;
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--wp--preset--spacing--space-5);
    background: var(--wp--preset--color--page);
    border-top: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
  }

  /* Zwinięty panel zasłania dół strony, więc przycisk wysyłki musi mieć
     pod sobą tyle miejsca, ile panel zajmuje. Wartość to wysokość
     przełącznika (44 px) plus oddech, nie liczba wzięta z oka.        */
  .ef-creator-layout { padding-bottom: calc(var(--wp--custom--hit--min) + var(--wp--preset--spacing--space-5)); }

  /* Po wysyłce formularza nie ma już co wypełniać, więc arkusz przestaje
     być panelem i wraca w tok strony jako potwierdzenie. Inaczej
     zasłaniałby podziękowanie, do którego się odnosi.                  */
  .ef-spec--sent {
    position: static;
    border: var(--wp--custom--border--hair) solid var(--wp--preset--color--accent);
  }
  .ef-spec--sent .ef-spec__toggle { display: none; }
  .ef-spec--sent .ef-spec__body { border-top: 0; max-height: none; }
}

@media (min-width: 60rem) {
  /* Na szerokim ekranie przełącznik nie ma zadania: arkusz stoi obok. */
  .ef-spec__toggle { display: none; }
  .ef-spec__body { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .ef-spec__toggle::after { transition-duration: 1ms; }
}

/* Po wysyłce arkusz jest już potwierdzeniem, nie podglądem — obrys idzie
   na akcent, żeby było widać, że to on jest teraz treścią strony. */
.ef-spec--sent { border-color: var(--wp--preset--color--accent); }
.ef-spec--sent .ef-spec__note { color: var(--wp--preset--color--text); }

/* Nagłówek wydruku istnieje w DOM zawsze, ale na ekranie nie ma zadania.
   ⛔ Ta reguła MUSI stać PRZED blokiem druku: ma tę samą specyficzność
   co `display: block` w druku, więc stojąc niżej wygrywała i kartka
   wychodziła bez marki i daty (zmierzone 22.09 na PDF-ie).             */
.ef-spec__printhead,
.ef-spec__printfoot { display: none; }

/* --- druk ---------------------------------------------------------------
   Oferta obiecuje, że arkusz da się wydrukować. Drukuje się WYŁĄCZNIE on:
   formularz na papierze jest bezużyteczny. Nagłówek i stopkę serwisu
   zdejmuje już `base.css`; tu zostaje tylko sąsiad arkusza.

   ⛔ `display: none`, nie `visibility: hidden`. Poprzednia wersja chowała
   całe `body *` i odsłaniała arkusz, co psuło wydruk dwa razy (22.09):
   wtyczka daje przyciskom kroków inline `visibility: visible`, więc
   „Next” lądował na kartce, a schowany formularz zachowywał wysokość
   i dokładał dwie puste strony.

   ⚠️ Założenie: arkusz jest dzieckiem `.ef-creator-layout`, a jedynym
   jego sąsiadem jest formularz (wstawia go tak `creator-spec-sheet.js`).
   Kto przeniesie arkusz gdzie indziej, musi przenieść też tę regułę.

   ⛔ Blok druku zostaje OSTATNI w pliku, patrz reguła nad nim.          */

/* Margines strony zero: tylko tak Chrome i Safari nie dokładają swojej
   główki i stopki (tytuł, adres, „1 z 1”, druga data w innym formacie).
   Margines kartki niesie `.ef-spec` niżej. Koszt: druga strona, gdyby
   powstała, nie ma górnego marginesu; arkusz ma 10 wierszy, więc nie
   powstaje. Arkusz ładuje się tylko na /ask/, więc reszty serwisu to
   nie dotyczy.                                                          */
@page { size: A4; margin: 0; }

@media print {
  .ef-creator-layout > :not(.ef-spec) { display: none; }

  /* ⛔ Siatka dwukolumnowa (od 60rem) NIE MOŻE dożyć do druku. Safari
     układa wydruk w szerokości okna i dopiero skaluje go do kartki, więc
     przy szerokim oknie arkusz zostawał w torze 18–22rem i zajmował
     trzecią część strony (zgłoszone 22.09; Chrome łamie kartkę w jej
     własnej szerokości i tego nie pokazywał). Kartka nie ma kolumn.    */
  .ef-creator-layout { display: block; }
  .section > .container { max-width: none; }

  .section { padding-block: 0; }
  .section > .container { padding-inline: 0; }
  .ef-spec {
    position: static;
    border: 0;
    padding: var(--wp--preset--spacing--space-8);
  }
  .ef-spec,
  .ef-spec__body { background: none; }

  /* ⚠️ Na wąskim ekranie treść arkusza siedzi w zwijanym panelu z
     `display: none`. Bez tego nadpisania wydruk z telefonu wychodziłby
     PUSTY, a przycisk drukowania sam by o tym nie powiedział.          */
  .ef-spec__body {
    display: block;
    max-height: none;
    overflow: visible;
    padding: 0;
    border-top: 0;
  }

  /* Sterowanie nie należy do kartki. Razem z nim znikają dwie rzeczy
     ekranowe: tytuł „Your specification” (na papierze dubluje nagłówek
     kartki tuż nad nim) i podpowiedź pod listą (mówi, co się stanie po
     wysyłce albo radzi zachować kopię; stan wysyłki podaje już nagłówek
     kartki: „not yet sent” albo „Sent <data>”).                        */
  .ef-spec__toggle,
  .ef-spec__head,
  .ef-spec__note { display: none; }

  /* Nagłówek kartki: bez niego wydruk zaniesiony do maszyny nie mówi,
     czego dotyczy. Numeru zapytania tu NIE MA i nie może być, bo nadaje
     go wtyczka przy zapisie zgłoszenia — kartka drukowana przed wysyłką
     jest notatką z pomiaru, nie potwierdzeniem, i tak się podpisuje.   */
  .ef-spec__printhead {
    display: block;
    margin-bottom: var(--wp--preset--spacing--space-5);
    padding-bottom: var(--wp--preset--spacing--space-3);
    border-bottom: 1.5px solid var(--wp--preset--color--text);
  }
  .ef-spec__printhead b {
    display: block;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--fs-body);
    letter-spacing: var(--wp--custom--tracking--micro);
    text-transform: uppercase;
  }
  .ef-spec__printhead span {
    font-size: var(--wp--preset--font-size--fs-micro);
    color: var(--wp--preset--color--text-muted);
  }

  /* Wiersze na papierze: linia pełna, bo szarość 1 px gubi się w druku. */
  .ef-spec__row { break-inside: avoid; border-bottom-color: var(--wp--preset--color--text-muted); }

  /* Pusty wiersz na papierze to MIEJSCE DO WPISANIA, nie odpowiedź „brak”.
     Kartkę drukuje się też przed wypełnieniem i zanosi do odpylni, więc
     myślnik znika, a wiersz dostaje wysokość pod pismo ręczne. Linią do
     pisania jest dolna krawędź wiersza, stąd ostatni wiersz też ją ma.
     ⛔ Tylko stan `empty`. `not applicable` i `we will advise` to
     informacja i drukują się słowami (trzy stany, reguła projektu).    */
  .ef-spec__row--empty { padding-block: var(--wp--preset--spacing--space-4); }
  /* Myślnik przezroczysty, nie usunięty: trzyma wysokość linii, a za nim
     stoi jednostka, w której wpisać wymiar (`data-unit` ze skryptu).   */
  .ef-spec__row--empty dd { color: transparent; }
  .ef-spec__row--empty dd[data-unit]::after {
    content: " " attr(data-unit);
    color: var(--wp--preset--color--text-muted);
  }
  .ef-spec__row:last-child {
    border-bottom: var(--wp--custom--border--hair) solid var(--wp--preset--color--text-muted);
  }

  /* Wiersze bez sensu na papierze: „What you know”, którego nikt nie
     potrzebował, i puste „Photo attached” (patrz skrypt).              */
  .ef-spec__row--unused { display: none; }

  .ef-spec__printfoot {
    display: block;
    margin-top: var(--wp--preset--spacing--space-6);
    font-size: var(--wp--preset--font-size--fs-micro);
    color: var(--wp--preset--color--text-muted);
  }
}