/* COHAOS Expo - jasny wyglad ekranow gosci (zapis, numerek, telewizor, panel obok VR).
   Kanon redesignu systemu (kanwa „Cohaos - redesign systemu”, rzad J): papier, biale karty, kobalt tylko na akcje i status.
   Sam wyglad: ten plik nadpisuje style stron po nich, skrypty i trasy bez zmian. Panel zespolu (/operator) go nie laduje. */

:root {
  --bg: #F3F0EB;
  --papier: #FFFFFF;
  --papier-2: #EFEBE6;
  --ink: #0C0B0A;
  --piasek: #4A403B;
  --szary: #6B6158;
  --linia: #E7E3DE;
  --akcent: #1435C5;
  --kobalt: #1435C5;
  --cegla: #1435C5;          /* czerwien Damiana -> kobalt, jak w makietach */
  --ciemny: #1C1817;
  --kobalt-jasny: #8EA2FF;
  --kobalt-tlo: #EEF1FD;
  --zielony: #1435C5;
  --r: 12px;
}
html, body { background: var(--bg); color: var(--ink); }

/* logo: 27 + COHAOS w Panchang 500 z cieciem w C */
.marka { font-family: var(--naglowek); font-weight: 500; letter-spacing: -.02em; gap: 4px; align-items: flex-start; }
.marka small { font-family: var(--mono); font-size: .5em; line-height: 1; color: var(--kobalt); letter-spacing: 0; font-weight: 400; }
.marka .cut { display: inline-block; -webkit-mask-image: linear-gradient(to bottom, #000 0 45%, transparent 45% 55%, #000 55% 100%); mask-image: linear-gradient(to bottom, #000 0 45%, transparent 45% 55%, #000 55% 100%); }
.marka i { display: none !important; }

/* typografia: Host Grotesk w tekscie i przyciskach, Panchang tylko logo i numerki */
h1, h2, h3 { font-family: var(--tekst); font-weight: 500; letter-spacing: -.02em; }
.etykieta { letter-spacing: .08em; }

/* wybory, pola, przyciski */
.chip { background: var(--papier); border: 1px solid var(--linia); border-radius: 10px; min-height: 44px; }
.chip:hover { border-color: #CFC8BF; }
.chip.on { background: var(--ciemny); color: #F3F0EB; border-color: var(--ciemny); }
.pole { background: var(--papier); border: 1px solid var(--linia); border-radius: 10px; color: var(--ink); }
.pole::placeholder { color: #8A7F75; }
.pole:focus { border-color: var(--kobalt); box-shadow: 0 0 0 3px var(--kobalt-tlo); }
.przycisk { font-family: var(--tekst); font-weight: 500; letter-spacing: 0; background: var(--ciemny); color: #F3F0EB; border-radius: 12px; }
.przycisk.cegla, .przycisk.akcent { background: var(--kobalt); color: #fff; }
.przycisk.cegla:hover, .przycisk.akcent:hover { background: #0F2AA0; }
.przycisk.duch { background: var(--papier); color: var(--ink); border: 1px solid var(--linia); }
.blad { color: #B42318; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 2px; }

/* zapis: pytania jako biale karty */
.hero h1 { font-size: clamp(28px, 6vw, 42px); line-height: 1.1; letter-spacing: -.03em; }
.hero p { color: var(--piasek); }
.krok { background: var(--papier); border: 1px solid var(--linia); border-radius: 12px; padding: 16px; margin-top: 12px; }
.krok .etykieta b { color: var(--szary); }
.zgoda { color: var(--piasek); }
.zgoda input { accent-color: var(--kobalt); }
.rodo a { color: var(--ink); }
.numerek .nr, .nr { font-weight: 500; letter-spacing: -.03em; }
.numerek .info, .info { color: var(--piasek); }
.qrkarta { background: var(--papier); border: 1px solid var(--linia); border-radius: 16px; }
.qrkarta .qr { border: 1px solid var(--linia); }

/* numerek na telefonie */
.pasek { background: var(--linia); }
.karta { background: var(--ciemny); color: #F3F0EB; border: 0; border-radius: 12px; }
.karta h2 { color: var(--kobalt-jasny); font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.karta p { color: #CFC8BF; }
.powiad .ok { color: var(--kobalt); }
body.kolej { background: var(--kobalt); color: #fff; }
body.kolej .etykieta, body.kolej .marka small, body.kolej footer, body.kolej .powiad p { color: #DCE3FF; }
body.kolej .nr span { color: #fff; }
body.kolej .info { color: #DCE3FF; }
body.kolej .pasek { background: rgba(255,255,255,.25); }
body.kolej .przycisk.cegla { background: #fff; color: var(--kobalt); }
body.kolej .karta { background: #fff; color: var(--ink); }
body.kolej .karta h2 { color: var(--szary); }
body.kolej .karta p { color: var(--piasek); }

/* telewizor i panel obok VR */
#czastki { display: none; }
body:has(.scena) { background-image: none; }
.slot { border-left: 0; background: var(--papier); border: 1px solid var(--linia); border-radius: 20px; padding: 24px 28px; }
.slot.aktywny { background: var(--ciemny); color: #F3F0EB; border-color: var(--ciemny); }
.slot.aktywny .lbl { color: var(--kobalt-jasny); }
.slot.aktywny .nr span { color: var(--kobalt-jasny); }
.slot .nr { font-weight: 500; letter-spacing: -.03em; }
.slot .imie { font-family: var(--tekst); font-weight: 500; }
.slot.wolny .nr { color: #CFC8BF; }
.os { background: var(--papier); border: 1px solid var(--linia); }
.os b { font-weight: 500; }
.os.wezwany { background: var(--kobalt); border-color: var(--kobalt); color: #fff; }
.os.wezwany small { color: #DCE3FF; }
.os .zapr { background: #fff; color: var(--kobalt) !important; }
.chaos { background: var(--papier); border: 1px solid var(--linia); }
.chaos .lbl:first-child { color: var(--kobalt); }
.chaos h2 { font-family: var(--tekst); letter-spacing: -.03em; }
.bar .opis b { color: var(--ink); }
.bar .tlo { background: var(--papier-2); }
.bar .tlo i { background: var(--ciemny); }
.bar.pierwszy .tlo i { background: var(--kobalt); }
.qr { border: 1px solid var(--linia); }
.cta h3 { font-family: var(--tekst); letter-spacing: -.03em; }
.cta p { color: var(--piasek); }
.liczby div b { font-weight: 500; }
.founding { background: var(--ciemny); color: #F3F0EB; border: 0; border-radius: 20px; padding: 20px 26px; }
.founding .lbl { color: var(--kobalt-jasny); }
.founding b { color: #F3F0EB; font-weight: 500; }
.founding b small { color: #A99E93; }
.tost { background: var(--ciemny); color: #F3F0EB; box-shadow: 0 20px 60px rgba(28,24,23,.25); }
.tost i { background: var(--kobalt-jasny); }
.wezwanie { background: rgba(20,53,197,.96); color: #fff; }
.wezwanie .nr span { color: #fff; }
.wezwanie .lbl { color: #DCE3FF; }
.wezwanie .linia { background: #fff; }
.chaos .stopka b { color: var(--ink); }

/* szlif po renderze: logo nie lamie sie w waskim naglowku, plakietka „Zapraszamy” czytelna, Founding miesci sie w panelu */
.marka { white-space: nowrap; flex: none; }
header .etykieta { text-align: right; margin-left: 12px; }
.os .zapr { background: var(--ciemny) !important; color: #fff !important; opacity: 1; animation: none; }
.scena[data-w="800"] .founding { padding: 12px 18px; border-radius: 16px; }
.scena[data-w="800"] .founding b { font-size: 46px; margin: 4px 0; }

/* dodatki z makiet (kanwa, rzad J): konkrety pod naglowkiem zapisu, karta iMaca po zapisie, trzy kroki na telewizorze */
.meta-chipy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.meta-chipy span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: #fff; border: 1px solid var(--linia); font-size: 12.5px; color: var(--piasek); }
.meta-chipy span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--kobalt); }
.podpis1 { text-align: center; color: var(--szary); font-size: 12.5px; margin: 8px 0 14px; }
.karta-imac { display: grid; gap: 6px; max-width: 520px; margin: 14px auto 0; padding: 20px 22px; border-radius: 16px; background: var(--ciemny); color: #F3F0EB; text-align: left; }
.karta-imac .etykieta { color: var(--kobalt-jasny); }
.karta-imac b { font-size: 20px; font-weight: 500; }
.karta-imac span:last-child { color: #CFC8BF; font-size: 15px; line-height: 1.45; }
.kroki-tv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.kroki-tv div { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--papier-2); font-size: 21px; line-height: 1.25; }
.kroki-tv i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--kobalt); color: #fff; display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-size: 17px; }
/* telewizor z krokami: nizsze karty gogli i kolejki, zeby trzy kroki zmiescily sie nad stopka */
.scena:has(.kroki-tv) .gogle { margin-top: 16px; }
.scena:has(.kroki-tv) .slot { padding: 20px 26px; }
.scena:has(.kroki-tv) .slot .nr { font-size: 112px; margin-top: 8px; }
.scena:has(.kroki-tv) .slot .imie { font-size: 36px; margin-top: 10px; }
.scena:has(.kroki-tv) .kolejka { margin-top: 22px; padding-top: 18px; }
.scena:has(.kroki-tv) .nastepni { margin-top: 18px; }
.scena:has(.kroki-tv) .os { height: 100px; padding-top: 16px; }
.scena:has(.kroki-tv) .kroki-tv { margin-top: 18px; }
.scena:has(.kroki-tv) .kroki-tv div { padding: 12px 16px; font-size: 19px; }
.scena:has(.kroki-tv) main { min-height: 0; overflow: hidden; }
.scena:has(.kroki-tv) .chaos { align-self: start; max-height: 100%; }
.karta-imac { box-sizing: border-box; max-width: 430px; }