/* Tabela rozmiarów — arkusz partu `tabela-rozmiarow.php` (fala 1, `/produkt`).
 *
 * ŹRÓDŁA WARTOŚCI, przeczytane w chwili pisania:
 *   · nakładka i tabela ← `canvas:Karta Produktu Finalna` l. 581–607 (`chartOn`)
 *   · karty na 390 px   ← ten sam plik, klatka `2f`, l. 271–293
 *   · blok 40/60, legenda, kółka liter ← `poprawki/produkt-w1-r2-…md` §6
 *
 * ⚠︎ Nakładka desktopowa NIE MA WŁASNEJ KLATKI w rejestrze — siedzi wewnątrz
 * klatki `1a` jako `sc-if chartOn`. Kto szuka osobnego kadru, uzna widok
 * za nienarysowany (`PORT.md` §5).
 *
 * ZERO SUROWYCH HEKSÓW. Krycia z canvasu rozpisane jako `color-mix()`:
 * `rgba(28,16,7,0.92)` to Smoked Tent, `rgba(107,74,42,…)` Camel Brown,
 * `rgba(200,169,110,…)` Sand Gold. Sprawdzone znak w znak z `tokens.css`.
 */

.szewko-rozmiarowka {
  --rozmiarowka-kreska: color-mix(in srgb, var(--color-camel-brown) 18%, transparent);
  --rozmiarowka-obrys: color-mix(in srgb, var(--color-camel-brown) 40%, transparent);
  --rozmiarowka-ramka: color-mix(in srgb, var(--color-camel-brown) 35%, transparent);

  box-sizing: border-box;
}

/* ─── NAKŁADKA ──────────────────────────────────────────────────────────
 *
 * `position: fixed`, nie `absolute`: canvas rysuje nakładkę wewnątrz klatki
 * 1440 × 960, więc `absolute` wystarczało jemu. W żywym dokumencie strona
 * jest wyższa od okna i `absolute` przykleiłoby nakładkę do góry DOKUMENTU —
 * przy kliknięciu w połowie karty produktu użytkownik zobaczyłby puste tło.
 */
.szewko-rozmiarowka--overlay {
  position: fixed;
  inset: 0;
  z-index: 520;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);

  /* Bez tego zamknięta nakładka NADAL BY SIĘ POKAZYWAŁA — `[hidden]` jest
     regułą arkusza przeglądarki, a autorskie `display: flex` bije ją
     niezależnie od specyficzności. Ta sama pułapka co w panelu filtrów. */
  &[hidden] {
    display: none;
  }
}

.szewko-rozmiarowka__tlo {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent);
}

.szewko-rozmiarowka__panel {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  background: var(--color-parchment);
  border-radius: var(--radius-md);
  padding: var(--space-xl) 44px 36px;

  /* Nakładka przewija się w pionie, tło strony jest zablokowane (`r2` §6).
     `max-height` liczony z wysokości okna, nie stała: na laptopie 900 px
     tabela z figurą nie mieści się w kadrze, a to jest dokładnie ten przypadek,
     dla którego układ 40/60 w ogóle powstał. */
  max-height: calc(100vh - 2 * var(--space-xl));
  overflow-y: auto;

  .szewko-rozmiarowka--sekcja & {
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
}

.szewko-rozmiarowka__krzyzyk {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 44 × 44 bez wyjątków — reguła okupiona wpadką 36 px w banerze zgód. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-camel-brown);
  cursor: pointer;

  &:hover {
    color: var(--color-desert-rust);
  }
}

.szewko-rozmiarowka__tytul {
  margin: 0 0 22px;
  /* T8 (12.08.2026) — Cinzel → Literata. Krój ozdobny poniżej 26 px zamienia
     wypustki liter w szum; pełny powód przy `.szewko-home-kafel__nazwa`
     w `home-kafel-kategorii.css`. */
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-smoked-tent);

  /* Krzyżyk stoi w prawym górnym rogu; bez zapasu długi tytuł wchodzi pod
     niego. Dotyczy wyłącznie nakładki — sekcja krzyżyka nie ma. */
  .szewko-rozmiarowka--overlay & {
    padding-right: 44px;
  }

  /* ─── Nagłówek slotu „JAK TO LEŻY" ──────────────────────────────────
   *
   * `canvas:Sklep Odziez Kategoria Finalny` l. 100–104: kreska 64 px, tytuł
   * 30 px, druga kreska na resztę szerokości w kryciu 0,45. Na 390 px
   * (`…Mobile Finalny` l. 76–80) kreska 28 px i tytuł 19 px.
   *
   * Kreski są PSEUDOELEMENTAMI, nie `<span aria-hidden>` w znaczniku: part
   * jest wspólny z nakładką `/produkt`, gdzie ich nie ma, a dwa puste
   * `<span>` istniejące po to, żeby jeden szablon je schował, byłyby
   * ornamentem wpisanym w DOM obu konsumentów.
   */
  .szewko-rozmiarowka--sekcja & {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    color: var(--color-dark-mahogany);
    font-size: 30px;

    &::before,
    &::after {
      content: "";
      display: block;
      height: 1px;
      background: var(--color-sand-gold);
    }

    &::before {
      flex: 0 0 64px;
    }

    &::after {
      flex: 1;
      opacity: 0.45;
    }

    @media (max-width: 767px) {
      gap: 12px;
      margin-bottom: 18px;
      font-size: 19px;

      &::before {
        flex-basis: 28px;
      }
    }
  }
}

/* ─── FIGURA I LEGENDA — układ 40/60 ────────────────────────────────────
 *
 * Dlaczego dwie kolumny, a nie figura nad tabelą (`r2` §6): panel ma 720 px,
 * a tabela zjada je w całości. Figura na pełną szerokość albo robi się
 * ogromna, albo zostawia dwa puste pola po bokach — a nakładka rośnie
 * w pionie do wysokości, przy której na laptopie tabela wypada poza ekran.
 */
.szewko-rozmiarowka__pomiar {
  display: grid;

  /* ⚠︎ `320px 1fr`, a NIE `40fr 60fr` ani `280px`. Dwa pomiary z 04.08:
     1. `40fr 60fr` przy panelu 720 px z wyściółką 44 px daje figurę **243 px**,
        czyli poniżej „ok. 280 px" z `r2` §6 — oba zapisy tej samej sekcji
        wykluczają się i wygrywa liczba, bo to ona opisuje figurę.
     2. Przy 280 px (skala 1024 → 0,273) **linie pomiarowe w Sand Gold miękną
        wobec konturu** — dokładnie warunek, dla którego `r2` §6 zawczasu podał
        dwa wyjścia: „figura idzie na min. 320 px **albo** linie dostają Camel
        Brown". Wybrane pierwsze, bo jest zmianą CSS, a drugie wymagałoby
        przegenerowania zatwierdzonego kadru rundy 3.
     Koszt przyjęty: panel rośnie z 802 do 839 px, więc na laptopie o wysokości
     900 px nakładka zaczyna się przewijać wewnętrznie. `r2` §6 wolał uniknąć
     przewijania, ale nieczytelna figura psuje więcej niż suwak. */
  grid-template-columns: 320px 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-lg);

  /* Slot „JAK TO LEŻY" ma więcej szerokości niż panel 720 px, więc figura
     idzie na 320 px i układ jest poziomy — `r2` §6, sekcja o `/sklep/odziez`. */
  .szewko-rozmiarowka--sekcja & {
    grid-template-columns: 320px 1fr;
    gap: var(--space-xl);
  }
}

/* ─── SEKCJA „JAK TO LEŻY": UKŁAD W1 (06.10.2026) ──────────────────────
 *
 * Transkrypcja canvasu „Rozmiarówka odzieży — Jak to leży", W1 Przełącznik
 * (`Main.dc.html` 1280, `W1-mobile.dc.html` 390). Na desktopie rysunek
 * 320 px po lewej przez całą wysokość, po prawej legenda W RZĘDZIE (dwie
 * miary obok siebie, odstęp 32) i pod nią tabela; odstęp kolumn 40, rzędów 24.
 *
 * `.szewko-rozmiarowka__pomiar` dostaje w sekcji `display: contents`, żeby
 * rysunek i legenda stały się komórkami tej samej siatki co tabela — bez
 * drugiego znacznika dla nakładki, która zostaje przy układzie 320/1fr
 * z tabelą pod spodem.
 */
.szewko-rozmiarowka--sekcja {
  .szewko-rozmiarowka__kroj {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-areas:
      "rysunek legenda"
      "rysunek tabela";
    grid-template-rows: auto 1fr;
    gap: var(--space-lg) var(--space-xl);
    align-items: start;

    /* `display: grid` bije `[hidden]` z arkusza przeglądarki — ta sama
       pułapka co przy nakładce wyżej. */
    &[hidden] {
      display: none;
    }

    @media (max-width: 640px) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "rysunek"
        "legenda"
        "tabela";
      grid-template-rows: none;
      gap: var(--space-md);
    }
  }

  .szewko-rozmiarowka__pomiar {
    display: contents;
  }

  .szewko-rozmiarowka__rysunek {
    grid-area: rysunek;

    /* 390 px: canvas `W1-mobile` rysuje figurę 300 px na środku. */
    @media (max-width: 640px) {
      max-width: 300px;
    }
  }

  .szewko-rozmiarowka__legenda {
    grid-area: legenda;
    flex-direction: row;
    gap: 32px;

    @media (max-width: 640px) {
      flex-direction: column;
      gap: var(--space-md);
    }
  }

  .szewko-rozmiarowka__wiersz-legendy {
    flex: 1;
  }

  .szewko-rozmiarowka__przewijak {
    grid-area: tabela;

    /* Karty na 390 px stoją 8 px niżej niż legenda (`W1-mobile`). */
    @media (max-width: 640px) {
      margin-top: var(--space-sm);
    }
  }

  /* Nota wspólna pod panelami: 28 px od tabeli (`W1`), 24 px na 390. */
  .szewko-rozmiarowka__nota:first-of-type {
    margin-top: 28px;

    @media (max-width: 640px) {
      margin-top: var(--space-lg);
    }
  }
}

/* Przyciski krojów — `W1`: ramka Sand Gold, wybrany wypełniony Dark Mahogany.
   44 px wysokości bez wyjątków. Pasek wychodzi z serwera `hidden` (powód
   w `rozmiarowka-zakladki.js`), więc `display: flex` musi ustąpić `[hidden]`. */
.szewko-rozmiarowka__zakladki {
  display: flex;
  margin: 0 0 32px;

  &[hidden] {
    display: none;
  }

  @media (max-width: 640px) {
    margin-bottom: var(--space-lg);
  }
}

.szewko-rozmiarowka__zakladka {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--color-sand-gold);
  background: transparent;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-camel-brown);
  cursor: pointer;

  &:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }

  & + & {
    margin-left: -1px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }

  &:hover {
    color: var(--color-desert-rust);
  }

  &[aria-selected="true"] {
    border-color: var(--color-dark-mahogany);
    background: var(--color-dark-mahogany);
    color: var(--color-parchment);
  }

  &:focus-visible {
    outline: 2px solid var(--color-desert-rust);
    outline-offset: 2px;
  }

  @media (max-width: 640px) {
    flex: 1;
    padding: 0 10px;
    font-size: 12px;
    letter-spacing: 0.1em;
  }
}

/* „z kapturem" znika na 390 px — canvas pisze tam samo „Bluza". */
.szewko-rozmiarowka__zakladka-dopisek {
  @media (max-width: 640px) {
    display: none;
  }
}

/* Opakowanie rysunku — układ odniesienia dla liter A · B. Szerokość i środek
   przeszły tu z `<img>`, bo procenty `--x`/`--y` liczą się od pudełka obrazu,
   a nie od kolumny siatki. */
.szewko-rozmiarowka__rysunek {
  position: relative;
  width: 100%;

  /* 320 px, nie 280 — powód przy `grid-template-columns` wyżej. */
  max-width: 320px;
  margin-inline: auto;
}

.szewko-rozmiarowka__figura {
  display: block;
  width: 100%;
  height: auto;
}

/* Litera NA linii pomiarowej, jak opis wymiaru na rysunku technicznym:
   kółko z legendy, ale z wypełnieniem w kolorze papieru, żeby przerywało
   złotą linię zamiast na niej leżeć. Położenie z `szewko_rozmiarowka_znaczniki()`. */
.szewko-rozmiarowka__znacznik {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid var(--color-sand-gold);
  border-radius: var(--radius-full);
  background: var(--color-parchment);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: var(--color-camel-brown);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.szewko-rozmiarowka__legenda {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.szewko-rozmiarowka__wiersz-legendy {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 4px 10px;
  align-items: center;
}

.szewko-rozmiarowka__litera {
  grid-row: span 2;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-sand-gold);
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-camel-brown);
}

.szewko-rozmiarowka__nazwa {
  font-family: var(--font-ui);
  font-weight: 600;
  /* `mikro` (ekw. 12) — było 11 px, czyli 11,2 (`docs/TYPOGRAFIA.md` §4).
     Nazwa wymiaru jest etykietą liczby w tabeli obok: bez niej „52" nie
     znaczy nic, więc podłoga obowiązuje ją jak każdą DANĄ (T5). */
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dark-mahogany);
}

.szewko-rozmiarowka__opis {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-camel-brown);
}

/* ─── TABELA ────────────────────────────────────────────────────────────── */

.szewko-rozmiarowka__przewijak {
  /* Pasek przewijania jest WIDOCZNYM sygnałem, że kolumny nie mieszczą się
     w kadrze — cichy brak byłby gorszy. Poniżej 640 px tabela i tak przechodzi
     w karty, więc ta reguła obsługuje wyłącznie pas pośredni. */
  overflow-x: auto;
}

.szewko-rozmiarowka__tabela {
  width: 100%;
  border-collapse: collapse;

  & th,
  & td {
    padding: 9px 0;
    border-bottom: 1px solid var(--rozmiarowka-kreska);
  }

  & thead th {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--rozmiarowka-obrys);
    font-family: var(--font-ui);
    font-weight: 600;
    /* `mikro` — było 11 px (ekw. 11,2). Nagłówek kolumny niesie jednostkę
        („(cm)"), której w komórkach nie ma. */
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-camel-brown);
    text-align: right;
    vertical-align: bottom;

    &:first-child {
      text-align: left;
    }
  }

  & tbody th {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-smoked-tent);
    text-align: left;
  }

  & td {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-dark-mahogany);
    text-align: right;
  }
}

/* Litera przed nazwą kolumny — to ona spina figurę z liczbami. Kółko jak
   w legendzie byłoby w nagłówku tabeli za ciężkie, więc zostaje sam znak
   w Brass Lantern, oddzielony od nazwy. */
.szewko-rozmiarowka__th-litera {
  display: block;
  font-size: 13px;
  color: var(--color-brass-lantern);
}

/* Jednostka jest w każdej komórce, ale na desktopie niesie ją nagłówek
   kolumny („(cm)"), więc w komórce byłaby szumem. Wraca przy 390 px, gdzie
   nagłówka nie ma. */
.szewko-rozmiarowka__jednostka {
  display: none;
}

/* ⚠︎ Sonda tego nie zobaczyła — podpis „Wyprzedane" wypisuje się tylko przy
   rozmiarze bez zapasu. Odczytane z arkusza: 11 px to ekwiwalent 11,2,
   a 10,5 px przy 390 px — 10,7. Podpis jest jedynym miejscem, w którym
   wygaszony rząd MÓWI, czemu jest wygaszony (kolor sam nie niesie
   znaczenia), więc podłoga obowiązuje go bez wyjątku. */
.szewko-rozmiarowka__podpis {
  margin-left: var(--space-sm);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-camel-brown) 80%, transparent);
}

/* Wyprzedany rozmiar jest WYGASZONY, a nie ukryty — „brak XXL na liście czyta
   się jako «nie produkujemy», a to inna informacja" (`produkt.md:209`).
   `opacity` na całym rzędzie, dokładnie jak `row.op` na canvasie. */
.szewko-rozmiarowka__rzad--brak {
  opacity: 0.45;
}

.szewko-rozmiarowka__nota {
  margin: var(--space-md) 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-camel-brown);

  & + & {
    margin-top: var(--space-sm);
  }
}

/* ─── 390 px: TABELA PRZECHODZI W KARTY ─────────────────────────────────
 *
 * Wzorzec zatwierdzony na `/sklep/odziez` mobile r2 i opisany tam jako
 * „idealny". Jeden `<table>` zostaje w znaczniku — karty robi układ, nie
 * drugi markup, więc czytnik ekranu nadal dostaje tabelę z nagłówkami.
 *
 * Próg 640 px, nie 390: przy czterech kolumnach liczbowych i nagłówkach
 * po trzy słowa tabela rozpada się dużo wcześniej niż na telefonie.
 */
@media (max-width: 640px) {
  .szewko-rozmiarowka__pomiar {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* ⚠︎ **Wariant sekcyjny trzeba zresetować OSOBNO** i to jest poprawka
     usterki, nie powtórzenie. Nadpisanie `320px 1fr` siedzi w regule
     zagnieżdżonej `.szewko-rozmiarowka--sekcja &`, czyli ma specyficzność
     0,2,0 i **wygrywa z regułą wyżej** (0,1,0) niezależnie od kolejności
     — media query wagi nie podnosi. Do fali 2b nie było tego widać, bo
     wariant `sekcja` nie miał ani jednego konsumenta: nakładka `/produkt`
     jedzie na wariancie `overlay`. Na 390 px dawało to figurę 320 px obok
     legendy przy 342 px dostępnych i przewijanie strony w poziomie o 110 px.
     Zmierzone na `/sklep/odziez`. */
  .szewko-rozmiarowka--sekcja .szewko-rozmiarowka__pomiar {
    grid-template-columns: 1fr;
  }

  .szewko-rozmiarowka__panel {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    max-height: calc(100vh - 2 * var(--space-md));
  }

  .szewko-rozmiarowka--overlay {
    padding: var(--space-md);
  }

  .szewko-rozmiarowka__tabela {
    display: block;

    /* Nagłówek kolumn znika z oczu, ale ZOSTAJE dla czytnika — jego rolę
       przejmują `data-etykieta` na komórkach. `display: none` zabrałby
       powiązanie `th`↔`td`, którego karty nie odtwarzają. */
    & thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    & tbody {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    & tr {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 0 14px;
      align-items: start;
      padding: 12px 14px;
      border: 1px solid var(--rozmiarowka-ramka);
      border-radius: var(--radius-sm);
    }

    & tbody th {
      grid-row: 1 / span 2;
      padding: 0;
      border: none;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 22px;
      color: var(--color-smoked-tent);
    }

    /* ⚠︎ Komórka ma DOKŁADNIE DWOJE dzieci flexa: etykietę z `::before`
       i `.szewko-rozmiarowka__wartosc` (liczba + „cm"). Do 06.10.2026 liczba
       i jednostka były osobnymi dziećmi i `space-between` rozpychał je na
       trzy kolumny — zrzut właściciela 118/119. */
    & td {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      padding: 3px 0;
      border: none;
      font-size: 13px;

      /* Litera i nazwa wymiaru jako etykieta pola — karta rozmiaru czyta
         się „A 55,9 cm · B 71,1 cm" z legendą tuż wyżej na tym samym
         ekranie (`r2` §6). Legendy w karcie NIE dublujemy. Etykieta może się
         łamać, liczba nie. */
      &::before {
        content: attr(data-etykieta);
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        font-family: var(--font-ui);
        /* `mikro` — było 11 px (ekw. 11,2). To jest cała etykieta wymiaru
           w karcie: przy 390 px nagłówka kolumny nie ma. */
        font-size: 12px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-camel-brown);
      }
    }
  }

  /* Podpis „Wyprzedane" stoi pod literą rozmiaru, nie obok niej — w karcie
     nie ma na to szerokości. */
  .szewko-rozmiarowka__podpis {
    display: block;
    margin-left: 0;

    /* ⚠︎ Kolumna litery rozmiaru ma tu 44 px, a „Wyprzedane" przy 12 px mierzy
       ~63 px — nie mieściło się już przy 10,5 px (~55 px) i nie zmieści się
       przy żadnym rozmiarze nad podłogą. Zamiast ciąć stopień poniżej progu
       czytelności, pozwalamy łamać wyraz: rząd i tak jest wygaszony, a dwa
       wiersze pod literą nie ruszają siatki (`grid-row: 1 / span 4`). */
    overflow-wrap: anywhere;
    line-height: 1.25;
  }

  .szewko-rozmiarowka__wartosc {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .szewko-rozmiarowka__jednostka {
    display: inline;
    margin-left: 4px;
  }
}