/* ============================================================================
   upload.css - strona główna (`cleaner/upload.html`).

   Landing i formularz w jednym, zgodnie z decyzją z Etapu 5. Strona ma więc
   dwie połowy o różnych zadaniach i cała robota polega na tym, żeby było
   widać, gdzie przebiega granica:

     GÓRA - do zrobienia: tytuł, jedno zdanie o produkcie, formularz, licznik.
     DÓŁ  - do przeczytania: jak to działa, na co uważa, czego NIE zrobi.

   Granicę rysuje `<hr>`, który jest w szablonie od początku. Wracający
   użytkownik nie musi zejść niżej ani razu; nowy ma pod formularzem wszystko,
   czego potrzebuje do decyzji.

   Czego tu świadomie NIE ma: sekcji powitalnej z gradientem, trzech kafelków
   z ikonami, wyliczanki zalet w ramkach. Strona ma wyglądać jak narzędzie,
   które opisuje - to jest jedyny dowód działania, jaki mamy przed pierwszym
   uruchomieniem.
   ========================================================================= */

/* --- Blok startowy --------------------------------------------------------
   Formularz dostaje obrys, bo jest JEDYNĄ rzeczą do obsługi na tej stronie -
   ta sama zasada co przy liście scaleń na ekranie planu: co się czyta, leży
   na stronie; co się obsługuje, ma krawędź.

   Licznik przebiegów siedzi w tym samym bloku, w wydzielonej stopce. Osobny
   akapit pod formularzem czytałby się jak kolejna informacja na stronie,
   a to jest warunek uruchomienia - należy do formularza, nie obok niego. */

.starter {
  max-width: var(--measure);
  margin-top: var(--space-7);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.starter form {
  margin: 0;
  padding: var(--space-6);
}

.starter .errors { margin-top: 0; margin-bottom: var(--space-5); }

.starter label {
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* Podpowiedź o formacie należy do pola, nie do strony - stąd mały odstęp nad
   nią i duży pod, przed przyciskiem. */
.starter form > p { margin: 0 0 var(--space-2); }
.starter form > p + p { margin-bottom: var(--space-6); }

/* --- Zgoda na regulamin ---------------------------------------------------
   Wiersz zgody jest ZDANIEM, nie układem - ta sama pułapka, która wyłożyła
   wiersz scalenia na ekranie planu: flexbox rozbija ciągły tekst na osobne
   elementy i odkleja od siebie kawałki, które należą do jednego zdania.
   Kontrolka opływa tekst z lewej, reszta zostaje w normalnym przepływie.

   Etykieta jest w stopniu i wadze tekstu ciągłego, a nie etykiety pola:
   to zdanie do przeczytania, a nie nazwa kontrolki. */

.starter .consent { margin-bottom: var(--space-6); }

.starter .consent label {
  display: block;
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}

/* Kontrolka wisi na marginesie, a nie płynie w tekście: przy zawinięciu do
   drugiego wiersza opływanie kończy się po pierwszym i zdanie wraca pod
   checkbox, rozbijając jedyną lewą krawędź, na której stoi cały blok.
   Ta sama konstrukcja co numery kroków niżej - wiszący znacznik, tekst
   w jednej kolumnie. */

.starter .consent label { position: relative; padding-left: var(--space-6); }

.starter .consent input {
  position: absolute;
  left: 0;
  /* Wyrównanie optyczne do PIERWSZEGO wiersza tekstu, nie do środka bloku:
     przy dwóch wierszach checkbox stałby w połowie zdania. */
  top: 0.15em;
  margin: 0;
}

/* Sam licznik mieszka w systemie (base.css) - tutaj tylko przyspawanie go do
   formularza: bez własnej ramki po bokach i u dołu, bez zaokrągleń u góry,
   z paddingiem równym paddingowi formularza, żeby tekst stał w tej samej
   pionowej linii co etykieta pola nad nim. */
.starter .quota {
  max-width: none;
  padding-inline: var(--space-6);
  border-width: 1px 0 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Granica między „do zrobienia" a „do przeczytania" jest najważniejszym
   podziałem na stronie, więc dostaje więcej powietrza niż zwykła kreska. */
main > hr { margin: var(--space-9) 0; }

/* Rytm strony w trzech stopniach: 24px między pozycjami listy, 48px między
   sekcjami, 64px na granicy dwóch połów strony. Systemowe 32px dla nagłówka
   sekcji jest tu za małe, bo listy są długie i wielowierszowe. */
main > h2 { margin-top: var(--space-8); }

/* --- Jak to działa --------------------------------------------------------
   Sekwencja, więc numery - ale wiszące na marginesie i monospace'em, żeby
   lewa krawędź tekstu została ta sama co wszędzie indziej na stronie.
   Wcięta lista własnym wcięciem psuje jedyną oś, na której stoi cały układ. */

.steps {
  padding-left: 0;
  list-style: none;
  counter-reset: dc-step;
}

.steps > li {
  position: relative;
  padding-left: var(--space-7);
  counter-increment: dc-step;
}

.steps > li + li { margin-top: var(--space-6); }

/* Znacznik jest mniejszy od tekstu, więc w swoim własnym wierszu siedziałby
   wyżej niż pozycja, którą numeruje - dostaje więc wysokość wiersza policzoną
   z tekstu, nie ze swojego stopnia pisma. Inaczej numer wisi nad zdaniem. */
.steps > li::before {
  content: counter(dc-step) ".";
  position: absolute;
  left: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: calc(var(--fs-base) * var(--lh-body));
}

/* --- Na co uważa ----------------------------------------------------------
   Właściwości, nie kroki, więc bez numerów - i bez punktorów, bo każdy z tych
   czterech akapitów zaczyna się wytłuszczonym zdaniem, które samo jest
   znacznikiem. Dokładanie kropki przed pogrubieniem to znacznik do znacznika.

   Bez kresek rozdzielających: na tej stronie jest już obrys formularza i
   ramka ostrzeżenia niżej, a piąty rodzaj linii przestałby cokolwiek dzielić. */

.traits {
  padding-left: 0;
  list-style: none;
}

.traits > li + li { margin-top: var(--space-6); }

/* --- Czego nie zrobi ------------------------------------------------------
   Ramka bez koloru semantycznego. Bursztyn znaczy „coś poszło nie tak"
   i na stronie, na której jeszcze nic się nie wydarzyło, byłby fałszywym
   alarmem. To nie awaria, tylko granica tego, co narzędzie potrafi - i ma
   być przeczytana, a nie odhaczona jako ostrzeżenie. */

.notice--lead { margin-top: var(--space-3); }