/* ==========================================================================
   MetalCraft - tokeny i nadpisania (demo, siteverse.pl/demo/metalcraft/)
   Kierunek: "tolerancja". Stal, czerwien maszynowa jako jedyny akcent,
   Chivo w naglowkach i tresci, DM Mono w odczytach. Zero zaokraglen.
   Pasmo jasne = "blacha" (#8C959C) z ciemnym drukiem i ciemniejsza
   czerwienia. Komponent podpisowy: NONIUSZ (js/podpis.js): podzialka,
   na ktorej leza technologie ze swoimi tolerancjami. Limit 250 linii.
   ========================================================================== */

:root {
  --tlo:    #0A0B0D;
  --tlo-2:  #16191C;
  --tlo-3:  #1E2226;
  --tekst:   #EDEDEB;
  --tekst-2: rgba(237, 237, 235, 0.64);
  --tekst-3: #868C93;
  --akcent:  #E23B41;
  --akcent-tekst: #EDEDEB;
  --wlos:   rgba(237, 237, 235, 0.14);
  --wlos-2: rgba(237, 237, 235, 0.07);

  --tlo-jasne:         #8C959C;
  --tlo-jasne-2:       #7F888F;
  --tekst-na-jasnym:   #12161A;
  --tekst-2-na-jasnym: rgba(18, 22, 26, 0.74);
  --tekst-3-na-jasnym: rgba(18, 22, 26, 0.56);
  --wlos-na-jasnym:    rgba(18, 22, 26, 0.3);
  --wlos-2-na-jasnym:  rgba(18, 22, 26, 0.16);

  --f-display: "Chivo", system-ui, "Segoe UI", sans-serif;
  --f-body:    "Chivo", system-ui, "Segoe UI", sans-serif;
  --f-mono:    "DM Mono", ui-monospace, Menlo, monospace;
  --waga-display: 700;
  --interlinia-display: 1.02;
  --tracking-display: -0.035em;
  --promien: 0px;

  --nawi-tlo: rgba(10, 11, 13, 0.8);
  --pole-tlo: rgba(237, 237, 235, 0.04);
  --tint:
    linear-gradient(180deg, rgba(10, 11, 13, 0.45) 0%, rgba(10, 11, 13, 0.1) 40%, rgba(10, 11, 13, 0.85) 100%),
    linear-gradient(270deg, rgba(10, 11, 13, 0.75) 0%, rgba(10, 11, 13, 0.3) 40%, rgba(10, 11, 13, 0) 70%);
}

.pasmo--jasne { --akcent: #C4161C; --akcent-tekst: #EDEDEB; --pole-tlo: rgba(18, 22, 26, 0.06); }

h1 em, h2 em, h3 em { font-style: normal; color: var(--akcent); font-weight: 700; }
.nawi__marka { font-family: var(--f-display); font-weight: 900; font-size: 1.2rem; letter-spacing: -0.02em; text-transform: uppercase; }
.przycisk { border-radius: 0; font-weight: 700; letter-spacing: 0.16em; }
.liczba__v { font-weight: 700; letter-spacing: -0.035em; }
.tabela th { color: var(--akcent); border-bottom-color: var(--akcent); }
.tabela td b { font-weight: 700; letter-spacing: -0.025em; font-size: var(--step-1); }
.karta__tytul { letter-spacing: -0.025em; }
.stopka .nawi__marka { letter-spacing: -0.02em; }

/* pierwszy ekran: suwmiarka, tresc po prawej (tam fotografia jest czernia) */
.hero-mc { display: grid; gap: clamp(32px, 5vw, 64px); }
.hero-mc__tresc { justify-self: end; max-width: 720px; display: grid; gap: 22px; }
.hero-mc__tresc .tytul--1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem); max-width: 14ch; }
.pierwszy .tlo-foto__img { object-position: 30% 50%; }
@media (max-width: 900px) { .hero-mc__tresc { justify-self: start; } :root { --tint: linear-gradient(180deg, rgba(10, 11, 13, 0.6) 0%, rgba(10, 11, 13, 0.75) 50%, rgba(10, 11, 13, 0.92) 100%); } }

.tlo-foto--pas { --tint: linear-gradient(180deg, rgba(10, 11, 13, 0.8) 0%, rgba(10, 11, 13, 0.3) 50%, rgba(10, 11, 13, 0.9) 100%); }
.tlo-foto--pas .tlo-foto__img { filter: contrast(1.06) saturate(0.9); }
.tlo-foto--blacha { --tint: linear-gradient(90deg, rgba(140, 149, 156, 0.92) 0%, rgba(140, 149, 156, 0.75) 45%, rgba(140, 149, 156, 0.3) 100%); }
.okno { position: relative; overflow: hidden; }
.okno img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--okno-ar, 4 / 3); object-position: var(--foto-poz, 50% 50%); filter: contrast(1.06) saturate(0.9); }

/* pas stopki serii */
.metryka { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 34px; border-top: 1px solid var(--wlos); padding-top: 14px; font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tekst-3); }
.metryka b { font-weight: 400; color: var(--akcent); }

/* ---------- NONIUSZ: komponent podpisowy (js/podpis.js) ----------
   Podzialka logarytmiczna tolerancji (0,01 do 1 mm), technologie jako
   odczyty w swoich pozycjach, czerwona kreska rosnie transformem do
   wybranej tolerancji. Ponizej 760 px odczyty ukladaja sie w liste. */
.noniusz { position: relative; display: grid; gap: 0; }
.noniusz__skala { position: relative; height: 46px; }
.noniusz__linia { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(237, 237, 235, 0.5); }
.pasmo--jasne .noniusz__linia { background: rgba(18, 22, 26, 0.5); }
.noniusz__kreska { position: absolute; top: 0; width: 1px; height: 12px; background: rgba(237, 237, 235, 0.5); }
.noniusz__kreska--duza { height: 22px; background: rgba(237, 237, 235, 0.85); }
.pasmo--jasne .noniusz__kreska { background: rgba(18, 22, 26, 0.45); }
.pasmo--jasne .noniusz__kreska--duza { background: rgba(18, 22, 26, 0.8); }
.noniusz__kreska span { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--tekst-3); white-space: nowrap; }
.noniusz__kreska--pierwsza span { left: 0; transform: none; }
.noniusz__kreska--ostatnia span { left: auto; right: 0; transform: none; }
.noniusz__czerw { position: absolute; left: 0; top: 34px; height: 1.6px; background: var(--akcent); width: var(--do, 0%); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease), width 0.6s var(--ease); }
.noniusz.jest-widoczna .noniusz__czerw, html:not(.js) .noniusz__czerw { transform: scaleX(1); }
.noniusz__poz { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.poz { position: relative; display: grid; gap: 8px; text-align: left; padding: 0; color: inherit; cursor: pointer; }
.poz::before { content: ""; position: absolute; left: 0; top: -28px; width: 1px; height: 18px; background: var(--akcent); opacity: 0; transition: opacity 0.3s var(--ease); }
.poz[aria-pressed="true"]::before, .poz:hover::before { opacity: 1; }
.poz u { text-decoration: none; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--akcent); }
.poz b { font-weight: 700; font-size: var(--step-2); letter-spacing: -0.025em; line-height: 1.05; }
.poz span { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--tekst-3); }
.poz[aria-pressed="true"] b { color: var(--akcent); }
.poz--znacznik { position: absolute; top: 0; width: 1px; height: 46px; background: var(--akcent); transform: translateX(-0.5px); opacity: 0; transition: opacity 0.4s var(--ease) calc(var(--i, 0) * 200ms + 400ms); }
.noniusz.jest-widoczna .poz--znacznik, html:not(.js) .poz--znacznik { opacity: 1; }
/* Telefon: siedem etykiet skali nie miesci sie w 320-430 px (nachodzily na siebie,
   sesja 3). Sesja 4: regula z s3 nie dzialala, bo "duza" to 1, 2 i 5 kazdej dekady, czyli
   wszystkie siedem; zostaja wylacznie dekady (0,01 / 0,1 / 1 mm, klasa --dekada z podpis.js). */
@media (max-width: 560px) { .noniusz__kreska:not(.noniusz__kreska--dekada) span { display: none; } }
@media (max-width: 760px) { .noniusz__poz { grid-template-columns: minmax(0, 1fr); gap: 14px; } .poz { grid-template-columns: 90px minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--wlos-2); } .poz u { grid-row: 1 / span 2; } .poz::before { display: none; } }

/* odczyty z tolerancja (kadr 02) */
.odczyty { display: grid; }
.odczyty__rzad { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 14px 0; border-top: 1px solid var(--wlos); }
.odczyty__rzad:last-child { border-bottom: 1px solid var(--wlos); }
.odczyty__rzad u { text-decoration: none; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tekst-3); }
.odczyty__rzad b { font-weight: 700; font-size: var(--step-2); letter-spacing: -0.03em; text-align: right; overflow-wrap: anywhere; }
.odczyty__rzad dd { min-width: 0; }
.odczyty__rzad--akcent b { color: var(--akcent); }

/* droga detalu (kadr 03): temperatura jako kolumna */
.droga .krok { grid-template-columns: 110px minmax(0, 1fr); }
.droga .krok__nr { font-family: var(--f-mono); font-size: var(--step-1); letter-spacing: -0.01em; color: var(--akcent); padding-top: 2px; }
.droga .krok--zimny .krok__nr { color: rgba(237, 237, 235, 0.72); }
/* s4: lista lezy na jasnej czesci fotografii (para, rozgrzany wsad), wiec dostaje wlasna
   ciemna podkladke i jasniejsze podpisy; fotografia zostaje */
.droga { position: relative; z-index: 1; padding: clamp(6px, 1.5vw, 18px) clamp(14px, 2.5vw, 28px); border-radius: var(--promien); background: rgba(10, 11, 13, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(237, 237, 235, 0.08); }
.droga .krok__meta { color: rgba(237, 237, 235, 0.78); text-shadow: 0 1px 2px rgba(10, 11, 13, 0.8); }
.droga .krok__tytul { text-shadow: 0 1px 2px rgba(10, 11, 13, 0.8); }
@media (max-width: 480px) { .droga .krok { grid-template-columns: minmax(0, 1fr); } }

/* zapytanie: dobor maszyny */
.dobor { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--wlos-2); }
.dobor__stan { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; }
.dobor__stan--ok { color: var(--akcent); }
.dobor__stan--poza { color: var(--tekst-3); }
.zap__podsumowanie .cena b { font-size: var(--step-3); }
.skladowe li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--wlos-2); font-family: var(--f-mono); font-size: 0.72rem; color: var(--tekst-2); }
.skladowe li b { font-weight: 500; color: var(--tekst); white-space: nowrap; }
.pasmo--jasne .karta { border-color: var(--wlos); }