/* =====================================================================
   Moja Pracownia: wspólny system wizualny, oprawa MARKER (od 9.11.2026)
   Importują: aplikacja uczestnika, ekran sali, panel prowadzącej,
   strony /informacja i /regulamin. Pakiet ma własną kopię tokenów.

   Ta sama ręka co prezentacja i materiały warsztatu:
   kremowy papier, odręczna czarna ramka, czerń #111111,
   pomarańcz #FF4C00 (nagłówki, akcenty), żółć #FFE600 jak zakreślacz
   (etykiety, naklejki, przycisk główny). Nagłówki Kalam, tekst Manrope.
   Pomarańczowy tekst drobnym drukiem zawsze w --pomarancz-tekst (AA).
   ===================================================================== */

/* Fonty z własnego serwera (bez Google Fonts, uwaga PRAWO nr 1).
   Wyciągnięte z osadzonych @font-face wzorców MARKER (KalamV3, ManropeV3), licencja SIL OFL. */
@font-face { font-family: "Kalam"; font-style: normal; font-weight: 400; font-display: swap; src: url("/wspolne/fonty/kalam-400.woff2") format("woff2"); }
@font-face { font-family: "Kalam"; font-style: normal; font-weight: 700; font-display: swap; src: url("/wspolne/fonty/kalam-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/wspolne/fonty/manrope-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("/wspolne/fonty/manrope-500.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/wspolne/fonty/manrope-600.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/wspolne/fonty/manrope-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("/wspolne/fonty/manrope-800.woff2") format("woff2"); }

:root {
  /* kolory MARKER */
  --papier: #faf8f3;          /* kremowy papier, tło strony (ten sam co tło slajdów) */
  --biel: #fffef8;            /* powierzchnie kart, jaśniejszy papier */
  --len: #f3efe6;             /* ciche wypełnienia */
  --len-2: #e9e3d6;
  --linia: #d6cfc1;           /* cienkie linie pomocnicze */
  --linia-mocna: #8a8377;     /* obrysy pól nieaktywnych, 3,6:1 */
  --tusz: #111111;            /* tekst i kontur markera */
  --tusz-2: #4e4b45;          /* tekst drugoplanowy, 8:1 */
  --tusz-3: #5e5a53;          /* podpisy, 6:1 nawet na lnie */
  --pomarancz: #ff4c00;       /* nagłówki i akcenty (duży tekst, linie, wykreślenia) */
  --pomarancz-tekst: #c23800; /* pomarańczowy drobny tekst na papierze, 5:1 */
  --pomarancz-tlo: #fff0e3;
  --zolc: #ffe600;            /* zakreślacz: etykiety, naklejki, przycisk główny */
  --zolc-tlo: #fff9c9;
  --blekit: #2f6fd6;          /* sporadycznie, jak promienie na ilustracjach */

  /* stare nazwy (używane w CSS widoków i w JS): teraz znaczą pomarańcz i żółć */
  --czerwien: var(--pomarancz);
  --czerwien-tekst: var(--pomarancz-tekst);
  --czerwien-tlo: var(--pomarancz-tlo);
  --czerwien-linia: #ffc29e;
  --zolty: var(--zolc);
  --zolty-tlo: var(--zolc-tlo);
  --pieczec-tlo: var(--zolc);

  /* typografia */
  --ui: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --reka: "Kalam", "Comic Neue", "Segoe Print", "Bradley Hand", cursive;
  --serif: var(--reka);       /* dawny krój nagłówków; teraz odręczny Kalam */
  --rozmiar: 17px;
  --t-mini: 0.8125rem;   /* 13,8 px */
  --t-maly: 0.875rem;    /* 14,9 px */
  --t-podstawa: 1rem;    /* 17 px */
  --t-sredni: 1.1765rem; /* 20 px */
  --t-duzy: 1.4118rem;   /* 24 px */
  --t-tytul: 1.7647rem;  /* 30 px */
  --t-wielki: 2.2353rem; /* 38 px */

  /* forma: nierówne narożniki jak z markera */
  --r-maly: 4px 9px 5px 8px / 8px 4px 9px 5px;
  --r: 5px 14px 6px 12px / 12px 5px 14px 6px;
  --r-duzy: 6px 18px 8px 15px / 15px 7px 18px 6px;
  --r-guzik: 12px 5px 14px 6px / 6px 14px 5px 12px;
  --kontur: 2px solid var(--tusz);
  --kontur-gruby: 2.5px solid var(--tusz);
  --cien-zolty: 6px 7px 0 var(--zolc);
  --cien-pom: 4px 4px 0 var(--pomarancz);
  --dotyk: 48px;
  --cien: none;
  --ruch: 180ms cubic-bezier(.2, .7, .2, 1);

  /* tło papieru i ramka z prezentacji (border-image z /wspolne/marker/ramka.png 1672×941) */
  --tlo-papieru: url("/wspolne/marker/papier.webp") repeat, var(--papier);
  --ramka-obraz: url("/wspolne/marker/ramka.png");
  --ramka-ciecie: 60 95 125 165;
  /* kreska markera: podkreślenia belki, nawigacji, sekcji (dane SVG, bez zewnętrznych plików) */
  --kreska: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6C60 1.6 118 4.9 200 3.1S332 1.7 399 3.9' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: var(--rozmiar); background: var(--papier); }
body {
  margin: 0;
  background: var(--tlo-papieru);
  color: var(--tusz);
  font-family: var(--ui);
  font-size: var(--t-podstawa);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--pomarancz-tekst); }
:focus-visible { outline: 3px solid var(--pomarancz); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--zolc); color: var(--tusz); }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ukryte, [hidden] { display: none !important; }

/* ---------- odręczna ramka (ta sama co na slajdach) ----------
   Element z klasą .ramka-reki dostaje ramkę, żółty zamach w lewym górnym rogu
   i pomarańczowe promienie w prawym dolnym. --skala ustala grubość kreski. */
.ramka-reki { position: relative; }
.ramka-reki::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-style: solid; border-width: 0;
  border-image: var(--ramka-obraz) var(--ramka-ciecie) fill / calc(60px * var(--skala, .5)) calc(95px * var(--skala, .5)) calc(125px * var(--skala, .5)) calc(165px * var(--skala, .5)) stretch;
}

/* ---------- typografia ---------- */
.serif, h1, h2, h3 { font-family: var(--reka); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-wielki); line-height: 1.08; }
h2 { font-size: var(--t-duzy); line-height: 1.15; }
h3 { font-size: var(--t-sredni); line-height: 1.2; }
p { margin: 0 0 0.75em; text-wrap: pretty; }
.cichy-tekst { color: var(--tusz-2); }
.podpis { color: var(--tusz-3); font-size: var(--t-maly); }
.liczby { font-variant-numeric: tabular-nums; }
.zakreslone { background: linear-gradient(transparent 52%, var(--zolc) 52%, var(--zolc) 92%, transparent 92%); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* żółta etykieta jak „WARSZAWA DLA RZEMIOSŁA / MODUŁ 9” */
.etykieta-zolta {
  display: inline-block; background: var(--zolc); color: var(--tusz);
  font: 700 var(--t-maly)/1.25 var(--reka); padding: 3px 10px 1px; transform: rotate(-1deg);
}

/* ---------- przyciski ---------- */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--dotyk); padding: 10px 20px;
  border: var(--kontur); border-radius: var(--r-guzik);
  background: var(--biel); color: var(--tusz);
  font-weight: 700; font-size: var(--t-podstawa); line-height: 1.2; text-decoration: none;
  transition: background var(--ruch), border-color var(--ruch), color var(--ruch), transform var(--ruch), box-shadow var(--ruch);
  -webkit-tap-highlight-color: transparent;
}
.przycisk:hover { background: var(--zolc-tlo); color: var(--tusz); }
.przycisk:active { transform: translate(1px, 1px); }
.przycisk .ikona-svg { flex: none; }
.przycisk[disabled], .przycisk[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

/* główny: żółty zakreślacz, czarny kontur, pomarańczowy cień; Kalam jak na slajdach */
.przycisk--glowny {
  background: var(--zolc); border: var(--kontur-gruby); color: var(--tusz);
  font-family: var(--reka); font-size: 1.24rem; font-weight: 700; min-height: 56px; padding: 10px 24px 8px;
  box-shadow: var(--cien-pom);
}
.przycisk--glowny:hover { background: #fff04d; box-shadow: 5px 5px 0 var(--pomarancz); }
.przycisk--glowny:active { box-shadow: 2px 2px 0 var(--pomarancz); transform: translate(2px, 2px); }
.przycisk--tusz { background: var(--tusz); border-color: var(--tusz); color: var(--biel); }
.przycisk--tusz:hover { background: #2a2824; color: var(--biel); }
.przycisk--cichy { font-weight: 650; border-width: 1.5px; }
.przycisk--cichy:hover { background: var(--zolc-tlo); }
.przycisk--tekstowy {
  border-color: transparent; background: transparent; padding-inline: 10px; color: var(--tusz-2); font-weight: 700;
}
.przycisk--tekstowy:hover { background: var(--zolc-tlo); color: var(--tusz); }
.przycisk--szeroki { width: 100%; }
.przycisk--ikona { padding: 0; width: var(--dotyk); flex: none; }
.przycisk--grozny { border-color: var(--pomarancz-tekst); color: var(--pomarancz-tekst); }
.przycisk--grozny:hover { background: var(--pomarancz-tlo); color: var(--pomarancz-tekst); }

/* ---------- karty ---------- */
.karta {
  position: relative; background: var(--biel); border: var(--kontur); border-radius: var(--r-duzy);
  padding: 20px;
}
.karta--cicha { background: transparent; border: 2px dashed var(--tusz-3); }
.karta--len { background: var(--len); border: 0; }

/* płytka ikony: żółta naklejka z czarnym konturem */
.plytka-ikony {
  width: 48px; height: 48px; flex: none; border-radius: var(--r-maly);
  display: grid; place-items: center; background: var(--zolc); color: var(--tusz);
  border: 2px solid var(--tusz); transform: rotate(-2deg);
}

/* ---------- pola formularzy ---------- */
.pole { display: block; margin: 0 0 18px; }
.pole__etykieta { display: block; font-weight: 800; margin-bottom: 6px; }
.pole__podpowiedz { display: block; color: var(--tusz-3); font-size: var(--t-maly); margin-top: 6px; }
.pole input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.pole textarea, .pole select, .wejscie-tekstu {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 2px solid var(--tusz); border-radius: var(--r-maly);
  background: var(--biel); font-size: var(--t-podstawa); line-height: 1.45;
  transition: border-color var(--ruch), box-shadow var(--ruch);
}
.pole textarea, textarea.wejscie-tekstu { min-height: 120px; resize: vertical; }
.pole input:focus, .pole textarea:focus, .pole select:focus, .wejscie-tekstu:focus {
  outline: none; border-color: var(--tusz); box-shadow: 4px 4px 0 var(--zolc);
}
.pole select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
::placeholder { color: #6b665d; opacity: 1; }

.zgoda { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.zgoda input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--tusz); }

/* ---------- drobne elementy ---------- */
.znaczek {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 1px;
  background: var(--zolc); color: var(--tusz); font: 700 var(--t-maly)/1.35 var(--reka);
  border-radius: 2px; transform: rotate(-1deg);
}
.znaczek--czerwony { background: var(--pomarancz); color: var(--tusz); }
.znaczek--tusz { background: var(--tusz); color: var(--biel); }

.uwaga {
  border-left: 5px solid var(--pomarancz); background: var(--zolc-tlo);
  padding: 12px 14px; border-radius: 0 var(--r-maly); color: var(--tusz);
}

/* ---------- miarka pięciu kroków ----------
   Pasek metody dnia: fakty, polecenie, ocena, poprawka, zapis.
   Kreski jak na miarce stolarskiej; bieżący krok na żółtej naklejce. */
.miarka { --wys-kreski: 10px; position: relative; padding-top: 18px; }
.miarka__lista {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  position: relative;
}
.miarka::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--tusz-3) 0 1.5px, transparent 1.5px 8px) left top / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--tusz) 0 2px, transparent 2px 40px) left top / 100% 12px no-repeat;
  border-top: 2.5px solid var(--tusz); border-radius: 2px 6px 0 0;
}
.miarka__krok {
  position: relative; padding: 8px 4px 0 0; font-size: var(--t-maly); font-weight: 700; color: var(--tusz-3);
  line-height: 1.2;
}
.miarka__krok::before {
  content: ""; position: absolute; top: -18px; left: 0; width: 2.5px; height: 18px; background: var(--tusz);
}
.miarka__nr { display: block; font-family: var(--reka); font-weight: 700; font-size: 1.45rem; color: var(--pomarancz); line-height: 1; margin-bottom: 2px; }
.miarka__krok--zrobiony { color: var(--tusz-2); }
.miarka__krok--teraz { color: var(--tusz); }
.miarka__krok--teraz::before { background: var(--pomarancz); width: 5px; height: 22px; top: -20px; left: -1px; }
.miarka__krok--teraz .miarka__nr { display: inline-block; background: var(--zolc); color: var(--tusz); padding: 2px 6px 0; transform: rotate(-3deg); }

/* ---------- przed i po: różnice słów ---------- */
.roznice { font-size: var(--t-podstawa); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.roznice del, .wykreslone {
  color: var(--tusz-2); text-decoration: line-through; text-decoration-color: var(--pomarancz);
  text-decoration-thickness: 3px;
}
.roznice ins {
  text-decoration: none; color: var(--tusz);
  background: linear-gradient(transparent 52%, var(--zolc) 52%, var(--zolc) 92%, transparent 92%);
}

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