/* =========================================================================
   Ług i soda — arkusz stylów.

   Motyw: karta receptury. Wszystko leży na białym, wszystko ma linię u góry
   i wszystko, co jest liczbą, jest pisane Inconsolatą. Kolumny liczbowe są
   wyrównane do prawej i mają cyfry tabelaryczne, bo tabela SAP, w której
   przecinki nie stoją w jednej pionowej linii, jest nieczytelna.

   Kolory: biel (papier), indygo (linie, nagłówki, kwasy nasycone),
   cytryna (wynik, ostrzeżenie, zakreślacz). Trzy i koniec.
   ========================================================================= */

/* --- Kroje --------------------------------------------------------------- */

@font-face {
  font-family: 'Spectral';
  src: url('/kroje/spectral-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Spectral';
  src: url('/kroje/spectral-400-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  src: url('/kroje/spectral-400i.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Spectral';
  src: url('/kroje/spectral-400i-ext.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  src: url('/kroje/spectral-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Spectral';
  src: url('/kroje/spectral-600-ext.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  src: url('/kroje/spectral-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Spectral';
  src: url('/kroje/spectral-700-ext.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inconsolata';
  src: url('/kroje/inconsolata-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Inconsolata';
  src: url('/kroje/inconsolata-400-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inconsolata';
  src: url('/kroje/inconsolata-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Inconsolata';
  src: url('/kroje/inconsolata-600-ext.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inconsolata';
  src: url('/kroje/inconsolata-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Inconsolata';
  src: url('/kroje/inconsolata-700-ext.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Zmienne ------------------------------------------------------------- */

:root {
  --papier: #ffffff;
  --plotno: #f4f5f9;
  --indygo: #26317a;
  --indygo-ciemne: #171d49;
  --indygo-mgla: #eceefa;
  --cytryna: #f0dd4e;
  --cytryna-ciemna: #a8930f;
  --cytryna-mgla: #fdf8dc;
  --atrament: #1a1c26;
  --szept: #6a6e83;
  --linia: #d8dbe6;
  --linia-mocna: #b3b8cc;

  --tresc: 44rem;
  --szeroko: 74rem;
  --pismo: 'Spectral', Georgia, 'Times New Roman', serif;
  --liczby: 'Inconsolata', 'SFMono-Regular', Consolas, monospace;
}

/* --- Podstawa ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plotno);
  color: var(--atrament);
  font: 400 1.0625rem/1.7 var(--pismo);
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0; }

a { color: var(--indygo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--indygo-ciemne); }

b, strong { font-weight: 600; }

code, kbd, samp {
  font-family: var(--liczby);
  font-size: 0.94em;
  background: var(--indygo-mgla);
  padding: 0.05em 0.3em;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--linia); margin: 2.5rem 0; }

.pomijak {
  position: absolute; left: -9999px;
  background: var(--indygo); color: #fff;
  padding: 0.6rem 1rem; z-index: 20;
}
.pomijak:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--indygo); outline-offset: 2px; }

/* Wszystko, co jest liczbą, jest Inconsolatą i cyframi tabelarycznymi. */
.lb, time, .metryczka dd, .receptura-parametry, .wsk-wartosc, .wsk-zakres, .kostka-stopa {
  font-family: var(--liczby);
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- Belka --------------------------------------------------------------- */

.belka {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  max-width: var(--szeroko);
  margin: 0 auto;
  padding: 1.6rem 1.5rem 1.3rem;
  border-bottom: 2px solid var(--indygo);
}

.marka { text-decoration: none; color: inherit; display: block; }
.marka-nazwa {
  display: block;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--indygo);
}
.marka-nazwa::after {
  content: '';
  display: inline-block;
  width: 0.55em; height: 0.55em;
  margin-left: 0.4em;
  background: var(--cytryna);
  border: 1px solid var(--cytryna-ciemna);
}
.marka-podpis {
  display: block;
  font-family: var(--liczby);
  font-size: 0.8rem; color: var(--szept);
  letter-spacing: 0.02em;
}

.nawigacja ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; flex-wrap: wrap; }
.nawigacja a {
  font-family: var(--liczby);
  font-size: 0.9rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--atrament); text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nawigacja a:hover { border-bottom-color: var(--linia-mocna); color: var(--indygo); }
.nawigacja a[aria-current='page'] { border-bottom-color: var(--cytryna); color: var(--indygo); }

/* --- Układ --------------------------------------------------------------- */

main { max-width: var(--szeroko); margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.trop { margin-bottom: 1.5rem; }
.trop ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0; padding: 0;
  font-family: var(--liczby); font-size: 0.82rem;
  color: var(--szept);
}
.trop li + li::before { content: '/'; margin-right: 0.5rem; color: var(--linia-mocna); }
.trop a { color: var(--szept); text-decoration: none; }
.trop a:hover { color: var(--indygo); text-decoration: underline; }

/* --- Strona główna: wstęp ------------------------------------------------ */

.wstep {
  background: var(--papier);
  border-top: 3px solid var(--indygo);
  padding: 2.5rem 2rem;
  margin-bottom: 1.5rem;
  max-width: 52rem;
}
.wstep h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1.2rem; }
.wstep-lid { font-size: 1.15rem; margin: 0 0 1rem; }
.wstep-granica {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--linia);
  font-size: 0.97rem; color: var(--szept);
}

/* --- Alarm (ług) --------------------------------------------------------- */

.alarm {
  background: var(--cytryna-mgla);
  border: 1px solid var(--cytryna-ciemna);
  border-left: 6px solid var(--cytryna);
  padding: 1.5rem 1.8rem;
  margin-bottom: 3rem;
  max-width: 52rem;
}
.alarm h2 {
  font-family: var(--liczby);
  font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--cytryna-ciemna);
  margin-bottom: 0.7rem;
}
.alarm p { margin: 0 0 0.6rem; font-size: 0.98rem; }
.alarm-link { margin: 0.9rem 0 0 !important; font-family: var(--liczby); font-size: 0.88rem; }

/* --- Bloki na stronie głównej -------------------------------------------- */

.blok { margin-bottom: 3.5rem; }
.blok-glowa {
  font-family: var(--liczby);
  font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--indygo);
  padding-bottom: 0.6rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--linia);
}
.blok-lid { max-width: 46rem; color: var(--szept); margin: -0.6rem 0 1.5rem; font-size: 0.97rem; }
.blok-wiecej { font-family: var(--liczby); font-size: 0.9rem; margin-top: 1rem; }

/* --- Siatka kostek ------------------------------------------------------- */

.siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.5rem;
}
.siatka--jeden { grid-template-columns: 1fr; }

.kostka {
  background: var(--papier);
  border: 1px solid var(--linia);
  border-top: 3px solid var(--indygo);
  display: flex; flex-direction: column;
}
.kostka--karta { border-top-color: var(--cytryna-ciemna); }

.kostka-obraz { display: block; border-bottom: 1px solid var(--linia); }
.kostka-obraz img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }

.kostka-tresc { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }

.kostka-metka {
  font-family: var(--liczby);
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--szept);
  margin: 0 0 0.6rem;
}
.kostka-metka a { color: var(--indygo); text-decoration: none; font-weight: 600; }
.kostka-metka a:hover { text-decoration: underline; }
.kostka-kropka { margin: 0 0.45rem; color: var(--linia-mocna); }

.kostka h3 { font-size: 1.22rem; margin-bottom: 0.55rem; }
.kostka h3 a { color: var(--atrament); text-decoration: none; }
.kostka h3 a:hover { color: var(--indygo); }

.kostka-zajawka { margin: 0 0 1rem; font-size: 0.97rem; color: #43465a; flex: 1; }
.kostka-stopa { margin: 0; font-size: 0.78rem; color: var(--szept); }

.kostka--duza { border-top-width: 5px; }
.kostka--duza .kostka-tresc { padding: 1.8rem 2rem 2rem; }
.kostka--duza h3 { font-size: 1.9rem; }
.kostka--duza .kostka-zajawka { font-size: 1.08rem; max-width: 44rem; }
.kostka--duza .kostka-obraz img { aspect-ratio: 3 / 1; }

/* --- Działy -------------------------------------------------------------- */

.dzialy { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linia); border: 1px solid var(--linia); }
.dzialy a {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  gap: 1.5rem; align-items: baseline;
  background: var(--papier);
  padding: 1.1rem 1.4rem;
  text-decoration: none; color: var(--atrament);
}
.dzialy a:hover { background: var(--indygo-mgla); }
.dzialy b { color: var(--indygo); font-size: 1.05rem; }
.dzialy span { color: var(--szept); font-size: 0.93rem; }
.dzialy em {
  font-family: var(--liczby); font-style: normal;
  font-size: 0.78rem; color: var(--szept); white-space: nowrap;
}

/* --- Nagłówek działu / listy --------------------------------------------- */

.naglowek-dzialu {
  background: var(--papier);
  border-top: 3px solid var(--indygo);
  padding: 2rem;
  margin-bottom: 2rem;
  max-width: 48rem;
}
.naglowek-dzialu h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin-bottom: 0.8rem; }
.naglowek-dzialu p { margin: 0; color: var(--szept); }

.pusto { color: var(--szept); font-style: italic; }
.lista-prosta { font-family: var(--liczby); font-size: 0.95rem; padding-left: 1.2rem; }

/* --- Tekst --------------------------------------------------------------- */

.tekst {
  background: var(--papier);
  border-top: 3px solid var(--indygo);
  padding: 2.5rem 2rem 3rem;
  max-width: 58rem;
}
.tekst--karta { border-top-color: var(--cytryna-ciemna); }

.tekst-glowa { max-width: var(--tresc); margin-bottom: 2.5rem; }

.tekst-nadtytul {
  font-family: var(--liczby);
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--indygo);
  margin: 0 0 0.9rem;
}
.tekst-glowa--karta .tekst-nadtytul { color: var(--cytryna-ciemna); }

.tekst-glowa h1 { font-size: clamp(1.85rem, 4vw, 2.55rem); margin-bottom: 1rem; }
.tekst-lid { font-size: 1.13rem; color: #3b3e52; margin: 0 0 1.6rem; }

/* Metryczka: nagłówek karty procesu. Etykieta nad wartością, wszystko monospace. */
.metryczka {
  display: flex; flex-wrap: wrap; gap: 0 2rem;
  margin: 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
}
.metryczka div { display: flex; flex-direction: column; }
.metryczka dt {
  font-family: var(--liczby);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--szept);
}
.metryczka dd { margin: 0; font-size: 0.9rem; font-weight: 600; }

/* --- Spis treści --------------------------------------------------------- */

.spis {
  background: var(--plotno);
  border-left: 3px solid var(--cytryna);
  padding: 1.2rem 1.5rem;
  margin-bottom: 2.5rem;
  max-width: var(--tresc);
}
.spis-glowa {
  font-family: var(--liczby);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--szept);
  margin: 0 0 0.6rem;
}
.spis ol { margin: 0; padding-left: 1.3rem; font-size: 0.95rem; }
.spis li { margin-bottom: 0.25rem; }
.spis a { text-decoration: none; }
.spis a:hover { text-decoration: underline; }

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

.tresc-tekstu { max-width: var(--tresc); }
.tresc-tekstu > * { max-width: var(--tresc); }

.tresc-tekstu h2 {
  font-size: 1.55rem;
  margin: 3rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linia);
}
.tresc-tekstu h3 { font-size: 1.2rem; margin: 2rem 0 0.7rem; }
.tresc-tekstu h4 {
  font-family: var(--liczby);
  font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--szept);
  margin: 1.6rem 0 0.5rem;
}
.tresc-tekstu p { margin: 0 0 1.15rem; }
.tresc-tekstu ul, .tresc-tekstu ol { margin: 0 0 1.3rem; padding-left: 1.4rem; }
.tresc-tekstu li { margin-bottom: 0.45rem; }
.tresc-tekstu li::marker { color: var(--indygo); }

/* Zakreślacz. Cytryna pod kluczową liczbą — dokładnie tak, jak zakreślam
   sobie w zeszycie masę ługu, żeby jej nie przeoczyć przy odważaniu. */
.tresc-tekstu mark {
  background: linear-gradient(transparent 55%, var(--cytryna) 55%);
  color: inherit;
  padding: 0 0.1em;
}

/* --- Zeszyt warów (blockquote) -------------------------------------------- */

.zeszyt {
  background: var(--indygo-mgla);
  border-left: 3px solid var(--indygo);
  padding: 1.2rem 1.5rem 0.4rem;
  margin: 2rem 0;
  font-size: 0.98rem;
}
.zeszyt p:first-child::before {
  content: 'Z zeszytu warów';
  display: block;
  font-family: var(--liczby);
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--indygo);
  margin-bottom: 0.5rem;
}

/* --- Ramki --------------------------------------------------------------- */

.ramka { margin: 2rem 0; padding: 1.3rem 1.5rem 0.6rem; border: 1px solid var(--linia); }
.ramka p:last-child, .ramka ul:last-child, .ramka ol:last-child { margin-bottom: 0.8rem; }

.ramka-tytul {
  font-family: var(--liczby);
  font-size: 0.75rem !important; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: 0 0 0.7rem !important;
}

/* Ostrzeżenie BHP. Wygląda jak etykieta na butelce, bo tak ma wyglądać. */
.ramka--ostrzezenie {
  background: var(--cytryna-mgla);
  border: 1px solid var(--cytryna-ciemna);
  border-left: 6px solid var(--cytryna);
}
.ramka--ostrzezenie .ramka-tytul { color: var(--cytryna-ciemna); }
.ramka--ostrzezenie .ramka-tytul::before { content: '▲ '; }

.ramka--uwaga { background: var(--plotno); border-left: 3px solid var(--linia-mocna); }
.ramka--uwaga .ramka-tytul { color: var(--szept); }

.ramka--procedura { background: var(--papier); border: 1px solid var(--indygo); border-top: 3px solid var(--indygo); }
.ramka--procedura .ramka-tytul { color: var(--indygo); }
.ramka--procedura ol { counter-reset: krok; list-style: none; padding-left: 0; }
.ramka--procedura ol li {
  counter-increment: krok;
  padding-left: 2.4rem;
  position: relative;
  margin-bottom: 0.7rem;
}
.ramka--procedura ol li::before {
  content: counter(krok);
  position: absolute; left: 0; top: 0.1rem;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  background: var(--indygo); color: #fff;
  font-family: var(--liczby); font-size: 0.85rem; font-weight: 700;
}

.ramka--wynik { background: var(--indygo-mgla); border: 1px solid var(--indygo); }
.ramka--wynik .ramka-tytul { color: var(--indygo); }

/* --- Tabele -------------------------------------------------------------- */

.rolka { overflow-x: auto; margin: 2rem 0; max-width: 100% !important; }

table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }

caption {
  caption-side: top;
  text-align: left;
  font-size: 0.85rem; color: var(--szept);
  padding-bottom: 0.7rem;
}

th, td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--linia); }

thead th {
  font-family: var(--liczby);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--indygo);
  border-bottom: 2px solid var(--indygo);
  white-space: nowrap;
  vertical-align: bottom;
}

tbody th[scope='row'] { font-weight: 600; }

td.lb, th.lb {
  text-align: right;
  font-family: var(--liczby);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.szept { color: var(--szept); }

tbody tr:hover { background: var(--indygo-mgla); }

/* --- Receptura ----------------------------------------------------------- */

.receptura {
  background: var(--papier);
  border: 1px solid var(--linia-mocna);
  border-top: 3px solid var(--indygo);
  margin: 2.5rem 0;
  max-width: 100% !important;
}
.receptura-glowa { padding: 1.3rem 1.5rem 1rem; border-bottom: 1px solid var(--linia); }
.receptura-glowa h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }

.receptura-parametry {
  display: flex; flex-wrap: wrap; gap: 0 1.5rem;
  margin: 0;
  font-size: 0.8rem; color: var(--szept);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.receptura-parametry b { color: var(--atrament); font-weight: 700; }

.receptura .rolka { margin: 0; }
.receptura-tabela { font-size: 0.9rem; }
.receptura-tabela th, .receptura-tabela td { padding: 0.45rem 0.75rem; }
.receptura-tabela tbody tr:first-child th, .receptura-tabela tbody tr:first-child td { padding-top: 0.7rem; }
.receptura-tabela tfoot th, .receptura-tabela tfoot td {
  border-top: 2px solid var(--linia-mocna);
  border-bottom: 0;
  padding-top: 0.6rem;
}
.receptura-tabela tfoot .wiersz-wynik th,
.receptura-tabela tfoot .wiersz-wynik td {
  background: var(--cytryna-mgla);
  border-top: 1px solid var(--cytryna-ciemna);
  border-bottom: 1px solid var(--cytryna-ciemna);
}
.wiersz-wynik { background: var(--cytryna-mgla); }

/* Karta odważania. To jest ta część, którą się drukuje i kładzie przy wadze. */
.receptura-odwaz {
  list-style: none;
  margin: 0; padding: 1.2rem 1.5rem;
  border-top: 1px solid var(--linia);
  background: var(--plotno);
  display: grid; gap: 0.4rem;
}
.receptura-odwaz li {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--liczby);
  font-size: 0.95rem;
}
.receptura-odwaz li span:first-child { flex: 0 0 auto; }
.receptura-odwaz li::after {
  content: '';
  flex: 1;
  border-bottom: 1px dotted var(--linia-mocna);
  order: 1;
}
.receptura-odwaz li b { order: 2; font-size: 1.05rem; }
.receptura-odwaz li em { order: 3; font-style: normal; color: var(--szept); font-size: 0.85rem; }
.receptura-odwaz li:first-child b { background: var(--cytryna); padding: 0 0.35em; }

/* Wskaźniki */
.wskazniki {
  list-style: none;
  margin: 0; padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--linia);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.9rem 1.2rem;
}
.wskazniki li { display: flex; flex-direction: column; }
.wsk-nazwa {
  font-family: var(--liczby);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--szept);
}
.wsk-wartosc { font-size: 1.35rem; font-weight: 700; color: var(--indygo); line-height: 1.2; }
.wsk-wartosc.wsk-poza { color: var(--cytryna-ciemna); }
.wsk-wartosc.wsk-poza::after { content: ' !'; font-size: 0.9rem; }
.wsk-zakres { font-size: 0.72rem; color: var(--szept); }

.receptura-nota, .receptura-rozrzut {
  margin: 0;
  padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--linia);
  font-size: 0.93rem;
  color: #43465a;
}
.receptura-rozrzut { background: var(--plotno); color: var(--szept); font-size: 0.88rem; }

/* --- Tabela SAP ---------------------------------------------------------- */

.tabela-sap { font-size: 0.86rem; }
.tabela-sap th, .tabela-sap td { padding: 0.42rem 0.6rem; }
.tabela-sap tbody th { font-weight: 600; white-space: nowrap; }

/* --- Wykaz wskaźników ---------------------------------------------------- */

.wykaz { display: grid; gap: 1px; background: var(--linia); border: 1px solid var(--linia); margin: 2rem 0; max-width: 100% !important; }
.wykaz-pozycja { background: var(--papier); padding: 1.1rem 1.3rem; }
.wykaz-pozycja h3 { font-size: 1.02rem; margin-bottom: 0.4rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.wykaz-zakres { font-family: var(--liczby); font-size: 0.78rem; font-weight: 400; color: var(--szept); }
.wykaz-pozycja p { margin: 0; font-size: 0.93rem; color: #43465a; }

/* --- Ryciny -------------------------------------------------------------- */

.rycina { margin: 2rem 0; padding: 0; max-width: 100% !important; }
.rycina svg { width: 100%; height: auto; background: var(--papier); border: 1px solid var(--linia); padding: 0.8rem; }
.rycina img { border: 1px solid var(--linia); }
.rycina figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem; color: var(--szept);
  border-left: 2px solid var(--cytryna);
  padding-left: 0.7rem;
}

/* --- Pytania ------------------------------------------------------------- */

.pytania { max-width: var(--tresc); margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--indygo); }
.pytania h2 { font-size: 1.35rem; margin-bottom: 1.2rem; }
.pytanie { margin-bottom: 1.3rem; }
.pytanie h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.pytanie p { margin: 0; color: #43465a; font-size: 0.97rem; }

/* --- Bibliografia -------------------------------------------------------- */

.bibliografia { max-width: var(--tresc); margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--indygo); }
.bibliografia h2 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.bibliografia-nota { font-size: 0.88rem; color: var(--szept); margin: 0 0 1rem; }
.bibliografia ol { padding-left: 1.3rem; font-size: 0.93rem; }
.bibliografia li { margin-bottom: 0.5rem; }

/* --- Legitymacja --------------------------------------------------------- */

.legitymacja {
  max-width: var(--tresc);
  margin-top: 2.5rem;
  padding: 1.3rem 1.5rem;
  background: var(--plotno);
  border-left: 3px solid var(--indygo);
}
.legitymacja-glowa {
  font-family: var(--liczby);
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--szept);
  margin: 0 0 0.5rem;
}
.legitymacja p:last-child { margin: 0; font-size: 0.95rem; }

/* --- Obok (powiązane) ---------------------------------------------------- */

.obok { margin-top: 3.5rem; }
.obok h2 {
  font-family: var(--liczby);
  font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--indygo);
  padding-bottom: 0.6rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--linia);
}

/* --- Stopka -------------------------------------------------------------- */

.stopa {
  border-top: 2px solid var(--indygo);
  background: var(--papier);
  margin-top: 3rem;
}
.stopa > * { max-width: var(--szeroko); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

.stopa-ostrzezenie {
  background: var(--cytryna-mgla);
  border-bottom: 1px solid var(--cytryna-ciemna);
  max-width: none !important;
  padding-top: 1.2rem; padding-bottom: 1.2rem;
}
.stopa-ostrzezenie p {
  max-width: var(--szeroko);
  margin: 0 auto;
  padding: 0 1.5rem;
  font-size: 0.92rem;
}

.stopa-siatka {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-top: 2.5rem; padding-bottom: 2rem;
}
.stopa-blok h2 {
  font-family: var(--liczby);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--szept);
  margin-bottom: 0.8rem;
}
.stopa-blok p { margin: 0 0 0.6rem; font-size: 0.93rem; color: #43465a; }
.stopa-blok ul { list-style: none; margin: 0; padding: 0; font-size: 0.93rem; }
.stopa-blok li { margin-bottom: 0.35rem; }
.stopa-mail { font-family: var(--liczby); font-size: 0.88rem !important; }

.stopa-nota, .stopa-dol {
  border-top: 1px solid var(--linia);
  padding-top: 1.2rem; padding-bottom: 1.2rem;
  font-size: 0.88rem; color: var(--szept);
  margin: 0;
}
.stopa-dol { font-family: var(--liczby); font-size: 0.8rem; border-top: 0; padding-top: 0; }
.stopa-formalnosci { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; padding-bottom: 1.4rem; font-size: 0.85rem; }
.stopa-formalnosci a { color: var(--szept); }
.stopa-formalnosci a:hover { color: var(--indygo); }

/* --- Wąskie ekrany ------------------------------------------------------- */

@media (max-width: 46rem) {
  body { font-size: 1rem; }
  .belka { padding: 1.2rem 1rem 1rem; }
  main { padding: 1.5rem 1rem 3rem; }
  .wstep, .tekst, .naglowek-dzialu { padding: 1.5rem 1.2rem 2rem; }
  .alarm { padding: 1.2rem 1.2rem; }
  .stopa-siatka { grid-template-columns: 1fr; gap: 1.8rem; }
  .dzialy a { grid-template-columns: 1fr; gap: 0.3rem; }
  .metryczka { gap: 0.8rem 1.5rem; }
  .receptura-odwaz li::after { display: none; }
  .kostka--duza .kostka-obraz img { aspect-ratio: 8 / 5; }
}

/* --- Druk ---------------------------------------------------------------- */
/* Receptura ma się dać wydrukować i położyć przy wadze. Sprawdziłam, że się da. */

@media print {
  body { background: #fff; font-size: 10.5pt; }
  .belka, .stopa, .trop, .spis, .obok, .legitymacja, .pomijak { display: none; }
  main { max-width: none; padding: 0; }
  .tekst, .receptura, .wstep { border: 0; padding: 0; }
  .receptura { border: 1pt solid #000; page-break-inside: avoid; }
  .ramka--ostrzezenie { border: 2pt solid #000; page-break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
  .tresc-tekstu a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #444; }
}