:root {
  
  --ciemnia: oklch(0.145 0 0);        
  --stol: oklch(0.196 0 0);           
  --stol-wyzej: oklch(0.248 0 0);     
  --stol-nizej: oklch(0.115 0 0);     

  
  --kreska: oklch(0.315 0 0);         
  --kreska-mocna: oklch(0.605 0 0);   

  
  --swiatlo: oklch(0.965 0 0);        
  --swiatlo-2: oklch(0.775 0 0);      
  --swiatlo-3: oklch(0.655 0 0);      

  
  --utrwalacz: oklch(0.815 0.115 182);       
  --utrwalacz-plyta: oklch(0.815 0.115 182); 
  --na-plycie: oklch(0.155 0.025 182);       
  --utrwalacz-pole: oklch(0.285 0.048 182);  
  --utrwalacz-kreska: oklch(0.545 0.085 182);

  
  --sygnal: oklch(0.825 0.155 88);    
  --sygnal-pole: oklch(0.285 0.055 88);
  --alarm: oklch(0.715 0.175 27);     
  --alarm-pole: oklch(0.275 0.065 27);
  --zgoda: oklch(0.805 0.145 152);    
  --zgoda-pole: oklch(0.275 0.055 152);

  
  --luz-1: 0.25rem;
  --luz-2: 0.5rem;
  --luz-3: 0.75rem;
  --luz-4: 1rem;
  --luz-5: 1.5rem;
  --luz-6: 2rem;
  --luz-7: 3rem;
  --luz-8: 4.5rem;
  --luz-9: 6.5rem;

  
  --gzyms: 3px;
  --gzyms-2: 6px;

  
  --warstwa-pasek: 20;
  --warstwa-lepki: 30;
  --warstwa-zaslona: 40;
  --warstwa-okno: 50;
  --warstwa-komunikat: 60;

  
  --tempo-1: 120ms;
  --tempo-2: 220ms;
  --tempo-3: 420ms;
  --krzywa: cubic-bezier(0.22, 1, 0.36, 1);   
  --krzywa-wejscie: cubic-bezier(0.16, 1, 0.3, 1);
}

@font-face {
  font-family: 'Naglowek';
  src: url('kroje/naglowek.woff2') format('woff2');
  font-weight: 600 800;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Tekst';
  src: url('kroje/tekst.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Dane';
  src: url('kroje/dane.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
  font-style: normal;
}

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

:where(h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }

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

body {
  margin: 0;
  background: var(--ciemnia);
  color: var(--swiatlo);
  font-family: 'Tekst', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Naglowek', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 1.35rem + 2.3vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.95vw, 1.95rem); }
h3 { font-size: 1.2rem; letter-spacing: 0; }
h4 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

a:hover { text-decoration-color: var(--utrwalacz); }

:focus-visible {
  outline: 2px solid var(--utrwalacz);
  outline-offset: 2px;
  border-radius: 1px;
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

table { border-collapse: collapse; }

hr {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--kreska);
}

.dane {
  font-family: 'Dane', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

.slabo { color: var(--swiatlo-2); }
.etykieta {
  color: var(--swiatlo-3);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

.tylko-czytnik {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pomin {
  position: absolute;
  top: var(--luz-2);
  left: var(--luz-2);
  z-index: var(--warstwa-komunikat);
  padding: var(--luz-2) var(--luz-4);
  background: var(--utrwalacz);
  color: var(--na-plycie);
  font-weight: 600;
  border-radius: var(--gzyms);
  transform: translateY(-200%);
}

.pomin:focus { transform: none; }

.ikona {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

.ikona--male { width: 1.125rem; height: 1.125rem; }

.miara { max-width: 34em; }
.miara--szeroka { max-width: 44em; }

.rama {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.belka {
  position: sticky;
  top: 0;
  z-index: var(--warstwa-lepki);
  display: flex;
  align-items: center;
  gap: var(--luz-3);
  min-height: 3.25rem;
  padding: 0 var(--luz-4);
  background: var(--ciemnia);
  border-bottom: 1px solid var(--kreska);
}

.belka__znak {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-right: var(--luz-2);
  gap: var(--luz-2);
  color: var(--swiatlo);
  text-decoration: none;
  font-family: 'Naglowek', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
}

.belka__znak .znak { width: 1.5rem; height: 1.5rem; color: var(--utrwalacz); }

.belka__stan {
  display: flex;
  align-items: center;
  gap: var(--luz-2);
  margin-left: auto;
}

.pasek {
  position: sticky;
  bottom: 0;
  z-index: var(--warstwa-pasek);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--stol);
  border-top: 1px solid var(--kreska);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.pasek__poz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-height: 3.5rem;
  padding: var(--luz-2) var(--luz-1);
  color: var(--swiatlo-2);
  font-size: 0.8125rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  border-top: 2px solid transparent;
  transition: color var(--tempo-1) var(--krzywa), background-color var(--tempo-1) var(--krzywa);
}

.pasek__poz .ikona { width: 1.375rem; height: 1.375rem; }

.pasek__poz:hover { color: var(--swiatlo); background: var(--stol-wyzej); }

.pasek__poz[aria-current='page'] {
  color: var(--utrwalacz);
  border-top-color: var(--utrwalacz);
  background: var(--stol-wyzej);
}

.pasek__licznik {
  position: absolute;
  translate: 0.85rem -0.7rem;
  min-width: 1.15rem;
  padding: 0 0.2rem;
  background: var(--utrwalacz);
  color: var(--na-plycie);
  font-family: 'Dane', ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.15rem;
  text-align: center;
  border-radius: var(--gzyms);
}

.pasek__licznik[hidden] { display: none; }

.pasek__licznik--puls { animation: licznik-puls var(--tempo-3) var(--krzywa); }

@keyframes licznik-puls {
  0% { scale: 1; }
  35% { scale: 1.28; }
  100% { scale: 1; }
}

.tresc {
  flex: 1;
  min-width: 0;
}

.pas {
  padding: var(--luz-6) var(--luz-4);
  border-bottom: 1px solid var(--kreska);
}

.pas--robocze {
  background: var(--stol-nizej);
  padding-top: var(--luz-5);
}

.pas--gesty { padding-block: var(--luz-5); }
.pas--luzny { padding-block: var(--luz-7); }
.pas--ostatni { border-bottom: 0; }

.pas__wnetrze {
  max-width: 74rem;
  margin: 0 auto;
}

.pas__naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--luz-2) var(--luz-4);
  margin-bottom: var(--luz-4);
}

.pas__naglowek p { color: var(--swiatlo-2); max-width: 32em; }

.perforacja {
  height: 6px;
  background-image: repeating-linear-gradient(
    to right,
    var(--kreska) 0 8px,
    transparent 8px 16px
  );
  background-position: 0 50%;
  background-repeat: repeat-x;
  background-size: 16px 2px;
}

.stopka {
  padding: var(--luz-6) var(--luz-4) var(--luz-7);
  background: var(--stol-nizej);
  color: var(--swiatlo-2);
  font-size: 0.9375rem;
}

.stopka__wnetrze {
  display: grid;
  gap: var(--luz-6);
  max-width: 74rem;
  margin: 0 auto;
}

.stopka__tytul { color: var(--swiatlo); font-size: 1rem; margin-bottom: var(--luz-2); }
.stopka a { color: var(--swiatlo-2); }
.stopka a:hover { color: var(--swiatlo); }

.stopka__spis li + li { margin-top: var(--luz-2); }

.stopka__dane li {
  display: flex;
  gap: var(--luz-2);
  align-items: flex-start;
}

.stopka__dane .ikona {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  color: var(--swiatlo-3);
}

.stopka__nota {
  max-width: 34em;
  padding-top: var(--luz-4);
  border-top: 1px solid var(--kreska);
  color: var(--swiatlo-2);
  font-size: 0.875rem;
}

.stopka__dane a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

@media (min-width: 48rem) {
  .pas { padding-inline: var(--luz-6); }
  .stopka { padding-inline: var(--luz-6); }
  .stopka__wnetrze { grid-template-columns: 1.4fr 1fr 1fr; }
  .stopka__nota { grid-column: 1 / -1; }
}

@media (min-width: 62rem) {
  .rama {
    display: grid;
    grid-template-columns: 13.5rem 1fr;
    grid-template-rows: auto 1fr;
  }

  .belka {
    grid-column: 1 / -1;
    padding-inline: var(--luz-5);
  }

  .pasek {
    position: sticky;
    top: 3.25rem;
    bottom: auto;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: calc(100dvh - 3.25rem);
    padding: var(--luz-4) var(--luz-3);
    background: var(--ciemnia);
    border-top: 0;
    border-right: 1px solid var(--kreska);
  }

  .pasek__poz {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--luz-3);
    min-height: 2.75rem;
    padding: var(--luz-2) var(--luz-3);
    font-size: 0.9375rem;
    border-top: 0;
    border-left: 2px solid transparent;
    border-radius: var(--gzyms);
  }

  .pasek__poz[aria-current='page'] { border-top: 0; border-left-color: var(--utrwalacz); }
  .pasek__licznik { position: static; translate: none; margin-left: auto; }

  .tresc { grid-column: 2; }
  .stopka { grid-column: 2; }
}

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--luz-2);
  min-height: 2.75rem;
  padding: 0 var(--luz-4);
  background: transparent;
  color: var(--swiatlo);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid var(--kreska-mocna);
  border-radius: var(--gzyms);
  cursor: pointer;
  transition: background-color var(--tempo-1) var(--krzywa),
              border-color var(--tempo-1) var(--krzywa),
              color var(--tempo-1) var(--krzywa);
}

.przycisk:hover { background: var(--stol-wyzej); border-color: var(--swiatlo-3); }
.przycisk:active { background: var(--stol); }

.przycisk--glowny {
  background: var(--utrwalacz-plyta);
  color: var(--na-plycie);
  border-color: var(--utrwalacz-plyta);
}

.przycisk--glowny:hover {
  background: color-mix(in oklab, var(--utrwalacz-plyta) 88%, white);
  border-color: color-mix(in oklab, var(--utrwalacz-plyta) 88%, white);
  color: var(--na-plycie);
}

.przycisk--glowny:active { background: color-mix(in oklab, var(--utrwalacz-plyta) 88%, black); }

.przycisk--cichy { border-color: transparent; color: var(--swiatlo-2); }
.przycisk--cichy:hover { color: var(--swiatlo); background: var(--stol-wyzej); }

.przycisk--male { min-height: 2.25rem; padding: 0 var(--luz-3); font-size: 0.875rem; }
.przycisk--szeroki { width: 100%; }

.przycisk[disabled],
.przycisk[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  background: transparent;
  color: var(--swiatlo-3);
  border-color: var(--kreska);
}

.przycisk--glowny[disabled] { background: var(--stol-wyzej); border-color: var(--stol-wyzej); }

.ikonka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  color: var(--swiatlo-2);
  border: 1px solid transparent;
  border-radius: var(--gzyms);
  cursor: pointer;
  transition: background-color var(--tempo-1) var(--krzywa), color var(--tempo-1) var(--krzywa);
}

.ikonka:hover { background: var(--stol-wyzej); color: var(--swiatlo); }
.ikonka[aria-pressed='true'] { background: var(--utrwalacz-pole); color: var(--utrwalacz); border-color: var(--utrwalacz-kreska); }

.pole {
  display: grid;
  gap: var(--luz-2);
}

.pole__etykieta {
  color: var(--swiatlo-2);
  font-size: 0.875rem;
  font-weight: 500;
}

.pole__wymog { color: var(--swiatlo-3); font-weight: 400; }

.pole input[type='text'],
.pole input[type='email'],
.pole input[type='tel'],
.pole input[type='number'],
.pole select,
.pole textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--luz-2) var(--luz-3);
  background: var(--stol-nizej);
  color: var(--swiatlo);
  border: 1px solid var(--kreska-mocna);
  border-radius: var(--gzyms);
  transition: border-color var(--tempo-1) var(--krzywa), background-color var(--tempo-1) var(--krzywa);
}

.pole textarea { min-height: 6rem; resize: vertical; }

.pole input::placeholder,
.pole textarea::placeholder { color: var(--swiatlo-3); opacity: 1; }

.pole input:hover,
.pole select:hover,
.pole textarea:hover { border-color: var(--swiatlo-3); }

.pole input:focus-visible,
.pole select:focus-visible,
.pole textarea:focus-visible { border-color: var(--utrwalacz); }

.pole select {
  appearance: none;
  padding-right: var(--luz-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.85rem center;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.pole--blad input,
.pole--blad select,
.pole--blad textarea { border-color: var(--alarm); }

.pole__blad {
  display: flex;
  align-items: center;
  gap: var(--luz-2);
  color: var(--alarm);
  font-size: 0.875rem;
}

.pole__blad .ikona { width: 1.125rem; height: 1.125rem; }
.pole__podpowiedz { color: var(--swiatlo-2); font-size: 0.875rem; }

.wybor {
  display: grid;
  gap: var(--luz-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.wybor__legenda {
  padding: 0;
  margin-bottom: var(--luz-2);
  color: var(--swiatlo-2);
  font-size: 0.875rem;
  font-weight: 500;
}

.wybor__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luz-2);
}

.wybor__poz { position: relative; }
.wybor__poz input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.wybor__poz span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 3.25rem;
  padding: var(--luz-2) var(--luz-3);
  background: var(--stol);
  color: var(--swiatlo-2);
  border: 1px solid var(--kreska-mocna);
  border-radius: var(--gzyms);
  cursor: pointer;
  transition: background-color var(--tempo-1) var(--krzywa),
              color var(--tempo-1) var(--krzywa),
              border-color var(--tempo-1) var(--krzywa);
}

.wybor__poz input:hover + span { background: var(--stol-wyzej); color: var(--swiatlo); }
.wybor__poz input:focus-visible + span { outline: 2px solid var(--utrwalacz); outline-offset: 2px; }

.wybor__poz input:checked + span {
  background: var(--utrwalacz-pole);
  color: var(--utrwalacz);
  border-color: var(--utrwalacz-kreska);
  font-weight: 600;
}

.wybor--opisowy .wybor__lista { display: grid; gap: var(--luz-2); }

.wybor--opisowy .wybor__poz span {
  display: grid;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--luz-3);
  align-content: start;
  text-align: left;
  padding: var(--luz-3);
}

.wybor__nazwa { grid-column: 1; grid-row: 1; font-weight: 600; color: var(--swiatlo); }
.wybor__poz input:checked + span .wybor__nazwa { color: var(--utrwalacz); }
.wybor__rodzaj { grid-column: 1; grid-row: 2; color: var(--swiatlo-2); font-size: 0.875rem; }
.wybor__cena { grid-column: 2; grid-row: 1; white-space: nowrap; }

.klatka {
  position: relative;
  display: grid;
  gap: var(--luz-3);
  padding: var(--luz-3);
  background: var(--stol);
  border: 1px solid var(--kreska);
  border-radius: var(--gzyms);
}

.klatka__podglad {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--stol-nizej);
  border-radius: 2px;
  overflow: hidden;
}

.klatka__podglad img { width: 100%; height: 100%; object-fit: contain; }

.znaczniki { position: relative; }
.znaczniki::before,
.znaczniki::after,
.znaczniki > .znaczniki__dol::before,
.znaczniki > .znaczniki__dol::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--utrwalacz);
  pointer-events: none;
}

.znaczniki::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.znaczniki::after { top: -3px; right: -3px; border-left: 0; border-bottom: 0; }
.znaczniki > .znaczniki__dol::before { bottom: -3px; left: -3px; border-right: 0; border-top: 0; }
.znaczniki > .znaczniki__dol::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }

.rubryka {
  display: grid;
  gap: 0;
  margin: 0;
}

.rubryka > div {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: var(--luz-3);
  padding: var(--luz-2) 0;
  border-bottom: 1px dotted var(--kreska);
}

.rubryka dt { color: var(--swiatlo-3); font-size: 0.875rem; }
.rubryka dd { margin: 0; text-align: right; }
.rubryka--lewa dd { text-align: left; }
.rubryka > div:last-child { border-bottom: 0; }

.komunikat {
  display: flex;
  align-items: flex-start;
  gap: var(--luz-3);
  padding: var(--luz-3) var(--luz-4);
  background: var(--stol);
  border: 1px solid var(--kreska);
  border-radius: var(--gzyms);
  font-size: 0.9375rem;
}

.komunikat .ikona { margin-top: 0.1rem; color: var(--swiatlo-2); }
.komunikat p { margin: 0; max-width: 32em; }
.komunikat strong { display: block; }

.komunikat--uwaga { background: var(--sygnal-pole); border-color: var(--sygnal); }
.komunikat--uwaga .ikona { color: var(--sygnal); }
.komunikat--blad { background: var(--alarm-pole); border-color: var(--alarm); }
.komunikat--blad .ikona { color: var(--alarm); }
.komunikat--gotowe { background: var(--zgoda-pole); border-color: var(--zgoda); }
.komunikat--gotowe .ikona { color: var(--zgoda); }

.stan {
  display: inline-flex;
  align-items: center;
  gap: var(--luz-1);
  font-family: 'Dane', ui-monospace, monospace;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

.stan .ikona { width: 1rem; height: 1rem; }
.stan--natywna, .stan--dobra { color: var(--zgoda); }
.stan--graniczna { color: var(--sygnal); }
.stan--za-mala { color: var(--alarm); }

.tabela {
  width: 100%;
  font-size: 0.9375rem;
}

.tabela th,
.tabela td {
  padding: var(--luz-3) var(--luz-3);
  text-align: right;
  border-bottom: 1px solid var(--kreska);
}

.tabela th:first-child,
.tabela td:first-child { text-align: left; padding-left: 0; }
.tabela th:last-child, .tabela td:last-child { padding-right: 0; }

.tabela thead th {
  color: var(--swiatlo-2);
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom-color: var(--kreska-mocna);
}

.tabela tbody th { font-weight: 600; }
.tabela td { font-family: 'Dane', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.tabela tbody tr:hover { background: var(--stol); }
.tabela__opakowanie { overflow-x: auto; }

 
.rysunek { width: 100%; height: auto; color: var(--swiatlo-2); }
.rysunek--droga { min-width: 926px; }
.rysunek--skala { min-width: 620px; }
.rysunek--przekroj { min-width: 430px; }
.rysunek--kadr { min-width: 350px; max-width: 480px; }
.rys-pole { fill: var(--stol-wyzej); stroke: var(--kreska-mocna); stroke-width: 1.6; }
.rys-pole--slabe { fill: var(--stol); stroke: var(--kreska-mocna); stroke-dasharray: 4 3; }
.rys-pole--mocne { fill: var(--stol-wyzej); stroke: var(--utrwalacz-kreska); }
.rys-kreska { stroke: var(--kreska-mocna); stroke-width: 1.6; fill: none; }
.rys-kreska--akcent { stroke: var(--utrwalacz); }
.rys-podpis { fill: var(--swiatlo); font-family: 'Tekst', sans-serif; font-size: 14px; font-weight: 600; }
.rys-dane { fill: var(--swiatlo-2); font-family: 'Dane', monospace; font-size: 13px; }

.pusto {
  display: grid;
  gap: var(--luz-3);
  justify-items: start;
  padding: var(--luz-6) var(--luz-4);
  background: var(--stol);
  border: 1px dashed var(--kreska-mocna);
  border-radius: var(--gzyms-2);
}

.pusto .ikona { width: 2rem; height: 2rem; color: var(--swiatlo-3); }
.pusto p { color: var(--swiatlo-2); max-width: 34em; }

.wgrywanie {
  display: grid;
  gap: var(--luz-4);
  padding: var(--luz-6) var(--luz-4);
  background: var(--stol);
  border: 1px dashed var(--kreska-mocna);
  border-radius: var(--gzyms-2);
  transition: border-color var(--tempo-2) var(--krzywa), background-color var(--tempo-2) var(--krzywa);
}

.wgrywanie--celuje {
  border-color: var(--utrwalacz);
  border-style: solid;
  background: var(--utrwalacz-pole);
}

.wgrywanie--pracuje { opacity: 0.7; }

.wgrywanie h1 { max-width: 16em; }
.wgrywanie__lead { max-width: 34em; color: var(--swiatlo-2); }

.wgrywanie__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luz-3);
  align-items: center;
}

.wgrywanie__wejscie {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.wgrywanie__wejscie:focus-visible + .wgrywanie__etykieta {
  outline: 2px solid var(--utrwalacz);
  outline-offset: 2px;
}

.wgrywanie__etykieta { cursor: pointer; }

.wgrywanie__zasady {
  display: grid;
  gap: var(--luz-2);
  max-width: 40em;
  color: var(--swiatlo-2);
  font-size: 0.9375rem;
}

.wgrywanie__zasady li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--luz-2);
  align-items: start;
}

.wgrywanie__zasady .ikona { color: var(--utrwalacz); width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; }

.wgrywanie--zwiniete {
  padding: var(--luz-4);
  gap: var(--luz-3) var(--luz-5);
}

.wgrywanie--zwiniete h1 { font-size: 1.25rem; margin: 0; }
.wgrywanie--zwiniete .wgrywanie__akcje { margin: 0; }
.wgrywanie--zwiniete .wgrywanie__lead,
.wgrywanie--zwiniete .wgrywanie__zasady { display: none; }

.przyklad-klatki {
  display: grid;
  gap: var(--luz-4);
  margin: var(--luz-5) 0 0;
  padding: var(--luz-4);
  background: var(--stol);
  border: 1px solid var(--kreska);
  border-radius: var(--gzyms);
}

.przyklad-klatki[hidden] { display: none; }
.przyklad-klatki__kadr { background: var(--stol-nizej); }
.przyklad-klatki img { width: 100%; height: auto; }
.przyklad-klatki figcaption { display: grid; gap: var(--luz-2); align-content: center; }
.przyklad-klatki figcaption p:last-child { color: var(--swiatlo-2); max-width: 34em; }

.odrzucone:not(:empty) { margin-top: var(--luz-4); }

.zakladki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luz-2);
  margin-top: var(--luz-4);
  padding-bottom: var(--luz-2);
  border-bottom: 1px solid var(--kreska);
}

.zakladki__poz {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--luz-4);
  color: var(--swiatlo-2);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--gzyms);
  transition: background-color var(--tempo-1) var(--krzywa), color var(--tempo-1) var(--krzywa);
}

.zakladki__poz:hover { background: var(--stol); color: var(--swiatlo); }

.zakladki__poz[aria-current='page'] {
  background: var(--utrwalacz-pole);
  border-color: var(--utrwalacz-kreska);
  color: var(--utrwalacz);
  font-weight: 600;
}

.zbiorcze__tytul { font-size: 1.0625rem; }
.zbiorcze {
  display: grid;
  gap: var(--luz-4);
  padding: var(--luz-4);
  margin-bottom: var(--luz-5);
  background: var(--stol);
  border: 1px solid var(--kreska);
  border-radius: var(--gzyms);
}

.zbiorcze__pola {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--luz-3) var(--luz-4);
  align-items: end;
}

.zbiorcze__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luz-2);
}

.pole--waskie { max-width: 14rem; }

.naklad {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--kreska-mocna);
  border-radius: var(--gzyms);
  overflow: hidden;
}

.naklad__pole {
  width: 3.5rem;
  min-height: 2.75rem;
  padding: 0 var(--luz-1);
  text-align: center;
  background: var(--stol-nizej);
  border: 0;
  border-inline: 1px solid var(--kreska-mocna);
  font-family: 'Dane', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}

.naklad__pole::-webkit-outer-spin-button,
.naklad__pole::-webkit-inner-spin-button { appearance: none; margin: 0; }
.naklad__krok { border-radius: 0; }

.stykowka__tytul {
  display: flex;
  align-items: baseline;
  gap: var(--luz-3);
  margin-bottom: var(--luz-4);
}

.stykowka__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--luz-4);
}

.klatka {
  grid-template-rows: auto 1fr auto auto;
  transition: border-color var(--tempo-1) var(--krzywa), background-color var(--tempo-1) var(--krzywa);
  animation: klatka-wchodzi var(--tempo-3) var(--krzywa-wejscie) both;
  animation-delay: calc(min(var(--i, 0), 10) * 40ms);
}

@keyframes klatka-wchodzi {
  from { transform: translateY(8px) scale(0.985); filter: brightness(0.55); }
  to { transform: none; filter: none; }
}

.klatka__podglad--zmiana .klatka__plotno,
.edytor__podglad--zmiana .edytor__plotno {
  animation: kadr-przelozony var(--tempo-2) var(--krzywa);
}

@keyframes kadr-przelozony {
  from { transform: scale(0.97); filter: brightness(1.35) saturate(0.8); }
  to { transform: none; filter: none; }
}

.edytor { animation: edytor-wchodzi var(--tempo-2) var(--krzywa-wejscie); }

@keyframes edytor-wchodzi {
  from { transform: translateY(-6px); filter: brightness(0.6); }
  to { transform: none; filter: none; }
}

.klatka--wybrana { border-color: var(--utrwalacz-kreska); background: var(--stol-wyzej); }

.klatka__glowa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luz-2);
}

.klatka__zaznacz {
  display: inline-flex;
  align-items: center;
  gap: var(--luz-2);
  min-height: 2.75rem;
  padding-right: var(--luz-2);
  cursor: pointer;
}

.klatka__zaznacz input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--utrwalacz);
  cursor: pointer;
}

.klatka__numer { color: var(--swiatlo-3); font-size: 0.875rem; }
.klatka--wybrana .klatka__numer { color: var(--utrwalacz); }

.klatka__podglad { aspect-ratio: 4 / 3; }

.klatka__plotno {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.klatka__opis { display: grid; gap: var(--luz-1); }

.klatka__plik {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--swiatlo-2);
}

.klatka__stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--luz-2);
  padding-top: var(--luz-3);
  border-top: 1px solid var(--kreska);
}

.klatka__cena strong { font-size: 1.0625rem; }

.edytor {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--luz-5);
  padding: var(--luz-4);
  background: var(--stol-wyzej);
  border: 1px solid var(--utrwalacz-kreska);
  border-radius: var(--gzyms);
}

.edytor__podglad {
  display: grid;
  place-items: center;
  align-self: start;
  padding: var(--luz-3);
  background: var(--stol-nizej);
  border-radius: 2px;
}

.edytor__plotno { width: auto; max-width: 100%; max-height: 46vh; height: auto; }

@media (min-width: 48rem) {
  .edytor__plotno { max-width: 34rem; max-height: none; }
}

.edytor__sterowanie { display: grid; gap: var(--luz-4); align-content: start; }
.edytor__narzedzia { display: flex; flex-wrap: wrap; gap: var(--luz-2); }

.edytor__dol {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--luz-3);
}

.edytor__metryka { padding-top: var(--luz-3); border-top: 1px solid var(--kreska); }
.edytor__naprawa:not(:empty) { margin-top: calc(var(--luz-2) * -1); }

.przycisk--naprawa {
  border-color: var(--sygnal);
  color: var(--sygnal);
  background: var(--sygnal-pole);
}

.przycisk--naprawa:hover {
  background: var(--sygnal);
  color: var(--ciemnia);
  border-color: var(--sygnal);
}

.edytor input[type='range'] {
  width: 100%;
  height: 2.75rem;
  accent-color: var(--utrwalacz);
}

.edytor .wybor--opisowy .wybor__lista {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.podsumowanie {
  position: sticky;
  bottom: 0;
  margin-top: var(--luz-5);
  padding: var(--luz-3) var(--luz-4);
  background: var(--stol);
  border: 1px solid var(--kreska-mocna);
  border-radius: var(--gzyms);
}

#komunikaty-pulpitu:not(:empty) { display: grid; gap: var(--luz-3); margin-bottom: var(--luz-4); }
.podsumowanie__uwaga:empty { display: none; }
.podsumowanie__komunikat:empty { display: none; }

.podsumowanie__pasek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--luz-3);
}

.podsumowanie__licz { display: grid; gap: var(--luz-1); }

#panel-roboczy { padding-bottom: var(--luz-3); }
html { scroll-padding-bottom: 9rem; }
.podsumowanie__suma { font-size: 1.375rem; font-family: 'Naglowek', sans-serif; }
.podsumowanie__nota { font-size: 0.875rem; }
.lista-powodow { display: grid; gap: var(--luz-1); margin-top: var(--luz-2); font-size: 0.875rem; }

.koszyk__lista { display: grid; gap: var(--luz-3); }

.pozycja {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--luz-3);
  padding: var(--luz-3);
  background: var(--stol);
  border: 1px solid var(--kreska);
  border-radius: var(--gzyms);
}

.pozycja__miniatura {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  background: var(--stol-nizej);
  border-radius: 2px;
}

.pozycja__opis { display: grid; gap: var(--luz-1); align-content: start; }
.pozycja__nazwa { font-weight: 600; }
.pozycja__parametry { color: var(--swiatlo-2); font-size: 0.875rem; }
.pozycja__dol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--luz-2);
  margin-top: var(--luz-2);
}

.pozycja__cena { font-weight: 600; }
.pozycja__dol > p { display: flex; align-items: baseline; gap: var(--luz-2); }

.koszyk__suma {
  display: grid;
  gap: var(--luz-3);
  padding: var(--luz-4);
  background: var(--stol);
  border: 1px solid var(--kreska-mocna);
  border-radius: var(--gzyms);
}

.koszyk__razem {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--luz-3);
  padding-top: var(--luz-3);
  border-top: 1px solid var(--kreska);
  font-size: 1.25rem;
}

.koszyk__razem strong { font-family: 'Naglowek', sans-serif; font-size: 1.5rem; }

.kasa { display: grid; gap: var(--luz-6); }
.kasa__krok { display: grid; gap: var(--luz-4); }
.kasa__pola { display: grid; gap: var(--luz-4); }
.kasa__wybory { display: grid; gap: var(--luz-2); }

.kasa__wybor {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--luz-3);
  align-items: start;
  padding: var(--luz-3);
  background: var(--stol);
  border: 1px solid var(--kreska-mocna);
  border-radius: var(--gzyms);
  cursor: pointer;
}

.kasa__wybor:hover { background: var(--stol-wyzej); }
.kasa__wybor input { margin-top: 0.3rem; accent-color: var(--utrwalacz); width: 1.15rem; height: 1.15rem; }
.kasa__wybor:has(input:checked) { border-color: var(--utrwalacz-kreska); background: var(--utrwalacz-pole); }
.kasa__wybor:has(input:focus-visible) { outline: 2px solid var(--utrwalacz); outline-offset: 2px; }
.kasa__wybor small { display: block; color: var(--swiatlo-3); }

.zlecenie {
  padding: var(--luz-4);
  background: var(--stol);
  border: 1px solid var(--kreska-mocna);
  border-radius: var(--gzyms);
}

.zlecenie__glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--luz-3);
  padding-bottom: var(--luz-3);
  margin-bottom: var(--luz-4);
  border-bottom: 2px solid var(--kreska-mocna);
}

.zlecenie__numer { font-family: 'Dane', monospace; font-size: 1.125rem; color: var(--utrwalacz); }

.zlecenie__tabela { width: 100%; font-size: 0.875rem; }
.zlecenie__tabela th { text-align: left; color: var(--swiatlo-3); font-weight: 500; }
.zlecenie__tabela th,
.zlecenie__tabela td { padding: var(--luz-2) var(--luz-2) var(--luz-2) 0; border-bottom: 1px dotted var(--kreska); }
.zlecenie__tabela td:last-child,
.zlecenie__tabela th:last-child { text-align: right; padding-right: 0; }
.zlecenie__tabela .dane { white-space: nowrap; }

.pozycje { display: grid; gap: var(--luz-5); }

.towar {
  display: grid;
  gap: var(--luz-4);
  padding-bottom: var(--luz-5);
  border-bottom: 1px solid var(--kreska);
}

.towar:last-child { border-bottom: 0; padding-bottom: 0; }
.towar__tresc { display: grid; gap: var(--luz-3); align-content: start; }
.towar__opis { color: var(--swiatlo-2); max-width: 32em; }
.towar__cena { font-family: 'Naglowek', sans-serif; font-size: 1.5rem; }
.towar__zdjecie { width: 100%; border-radius: var(--gzyms); background: var(--stol-nizej); }

.papier {
  display: grid;
  gap: var(--luz-2);
  padding: var(--luz-4) 0;
  border-bottom: 1px solid var(--kreska);
}

.papier:last-of-type { border-bottom: 0; }
.papier__glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--luz-2) var(--luz-3); }
.papier__nazwa { font-family: 'Naglowek', sans-serif; font-size: 1.25rem; }
.papier__rodzaj { color: var(--swiatlo-2); font-size: 0.875rem; }
.papier__mnoznik { margin-left: auto; font-family: 'Dane', monospace; color: var(--utrwalacz); }
.papier__opis { color: var(--swiatlo-2); max-width: 30em; }
.papier__dobre { color: var(--swiatlo-2); font-size: 0.875rem; max-width: 30em; }

.kalkulator {
  display: grid;
  gap: var(--luz-4);
  padding: var(--luz-4);
  background: var(--stol);
  border: 1px solid var(--kreska);
  border-radius: var(--gzyms);
}

.kalkulator__wymiary { display: flex; flex-wrap: wrap; gap: var(--luz-3); align-items: end; }
.kalkulator__wymiary .pole { width: 8rem; }
.kalkulator__wynik {
  display: grid;
  gap: var(--luz-2);
  padding-top: var(--luz-3);
  border-top: 1px solid var(--kreska);
}

.kalkulator__cena { font-family: 'Naglowek', sans-serif; font-size: 1.75rem; }

.tresc-pisana { display: grid; gap: var(--luz-4); }
.tresc-pisana h2 { margin-top: var(--luz-4); }
.tresc-pisana h3 { margin-top: var(--luz-3); }
.tresc-pisana p,
.tresc-pisana li { color: var(--swiatlo-2); max-width: 32em; }
.tresc-pisana strong { color: var(--swiatlo); }

.tresc-pisana ul { display: grid; gap: var(--luz-2); padding-left: var(--luz-4); list-style: disc; }
.tresc-pisana ol { display: grid; gap: var(--luz-2); padding-left: var(--luz-4); list-style: decimal; }

.rysunek-opis {
  display: grid;
  justify-items: start;
  gap: var(--luz-3);
  padding: var(--luz-4);
  background: var(--stol);
  border: 1px solid var(--kreska);
  border-radius: var(--gzyms);
  overflow-x: auto;
}

.rysunek-opis figcaption { color: var(--swiatlo-2); font-size: 0.875rem; max-width: 32em; }

.komunikat__akcja { margin-top: var(--luz-3); }
.koszyk__akcje { display: flex; flex-wrap: wrap; gap: var(--luz-2); }
.gotowe__akcje { display: flex; flex-wrap: wrap; gap: var(--luz-3); margin-top: var(--luz-5); }
.stopka__wiecej { margin-top: var(--luz-3); }
.pas__stopka-akcja { display: flex; flex-wrap: wrap; align-items: center; gap: var(--luz-3); margin-top: var(--luz-5); }
.spis-wyjsc { display: flex; flex-wrap: wrap; gap: var(--luz-3); }
.papiery { margin-bottom: var(--luz-5); }
.przyklady-papieru { display: grid; gap: var(--luz-5); }
.przyklady-papieru img { width: 100%; height: auto; border-radius: var(--gzyms); }
.przyklady-papieru figcaption { margin-top: var(--luz-3); color: var(--swiatlo-2); max-width: 34em; }
.przyklady-papieru strong { color: var(--swiatlo); }
.kalkulator__gotowe { display: flex; flex-wrap: wrap; gap: var(--luz-2); }
.kalkulator__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: var(--luz-3); }
.towar--gadzet .rubryka { align-self: start; }

.kasa__podsumowanie {
  display: grid;
  gap: var(--luz-4);
  padding: var(--luz-4);
  background: var(--stol);
  border: 1px solid var(--kreska-mocna);
  border-radius: var(--gzyms);
}

.kasa__kolumna { display: grid; gap: var(--luz-6); }
.kasa__zloz { display: grid; gap: var(--luz-2); }

.podsumowanie__pozycje { display: grid; gap: var(--luz-3); }
.podsumowanie__pozycje li {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--luz-3);
  align-items: center;
  font-size: 0.9375rem;
}
.podsumowanie__pozycje span { display: grid; }
.podsumowanie__miniatura {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  background: var(--stol-nizej);
  border-radius: 2px;
}

@media (min-width: 48rem) {
  
  .wgrywanie--zwiniete { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .przyklad-klatki { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  .przyklad-klatki figcaption { gap: var(--luz-3); }
  .przyklady-papieru { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); align-items: start; }
  .wgrywanie { padding: var(--luz-7) var(--luz-6); }
  .edytor { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  
  .edytor__podglad { position: sticky; top: 4.5rem; }
  .kasa { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .kasa__pola { grid-template-columns: 1fr 1fr; }
  .kasa__pola .pole--pelne { grid-column: 1 / -1; }
  .towar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
  .towar--odwrocony .towar__zdjecie { order: -1; }
  .pozycja { grid-template-columns: 6rem 1fr; }
  .pozycja__miniatura { width: 6rem; height: 6rem; }
}

@media (min-width: 62rem) {
  .stykowka__lista { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
  .kasa__podsumowanie { position: sticky; top: 4.5rem; }

  
  .pas__wnetrze--start {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--luz-5);
    align-items: start;
  }

  .pas__wnetrze--start > .odrzucone,
  .pas__wnetrze--start > #panel-roboczy,
  .pas__wnetrze--start > .wgrywanie--zwiniete { grid-column: 1 / -1; }

  .przyklad-klatki { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}