/* wwwdoktor.pl — szata „diagnostyczna”: papier milimetrowy, tusz, jeden kolor sygnału, cyfry tabelaryczne.
   Bez fontów zewnętrznych: stosy systemowe dobrane pod polskie znaki. Bez atrybutów style (CSP style-src 'self'). */
:root {
  --tusz: #0f1720;
  --tusz-2: #2b3644;
  --szary: #5b6675;
  --szary-2: #8a94a3;
  --papier: #f5f6f3;
  --bialy: #ffffff;
  --linia: #d9ddd8;
  --linia-2: #e8ebe6;
  --sygnal: #0b7a5e;
  --sygnal-jasny: #2fd3a5;
  --sygnal-tlo: #e3f4ee;
  --alarm: #c2410c;
  --alarm-tlo: #fdeee6;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --promien: 6px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--tusz);
  font: 17px/1.68 var(--sans); font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--sygnal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tusz); }
:focus-visible { outline: 2px solid var(--sygnal); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.022em; color: var(--tusz); font-weight: 720; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 4.4vw, 3.15rem); margin: 0 0 .55em; }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); margin: 0 0 .65em; }
h3 { font-size: 1.12rem; margin: 0 0 .4em; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 650; }
.szer { width: min(72rem, 100% - 2rem); margin-inline: auto; }
.tekst { max-width: 46rem; }
.pomin { position: absolute; left: -999px; }
.pomin:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--bialy); padding: .5rem 1rem; }
.drobne { font-size: .86rem; color: var(--szary); }
.liczba, td.l, th.l { font-variant-numeric: tabular-nums; }
.etykieta-mono, .okruszki, .metryka, .karta .etykieta, .dziennik time, .zrodlo-mono {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
}
.etykieta-mono { color: var(--sygnal); margin: 0 0 .5rem; font-weight: 600; }

/* nagłówek */
.naglowek { background: var(--bialy); border-bottom: 1px solid var(--linia); position: sticky; top: 0; z-index: 5; }
.naglowek::before { content: ""; display: block; height: 3px; background: var(--tusz); }
.naglowek-wnetrze { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; min-height: 62px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: .55rem; color: var(--tusz); text-decoration: none; font-size: 1.28rem; font-weight: 760; letter-spacing: -.02em; }
.logo:hover { color: var(--tusz); }
.logo-znak { width: 30px; height: 30px; }
.logo-www { font-family: var(--mono); font-weight: 500; font-size: .82em; color: var(--sygnal); letter-spacing: 0; margin-right: .06em; }
.menu ul { display: flex; flex-wrap: wrap; gap: .2rem 1.15rem; list-style: none; margin: 0; padding: .35rem 0; align-items: center; }
.menu a { color: var(--tusz-2); text-decoration: none; font-size: .94rem; padding: .2rem 0; }
.menu a[aria-current="page"] { color: var(--tusz); box-shadow: inset 0 -2px 0 var(--sygnal); }
.menu a:hover { color: var(--sygnal); }
.menu .menu-cta { background: var(--tusz); color: #fff; padding: .42rem .9rem; border-radius: var(--promien); }
.menu .menu-cta:hover { background: var(--sygnal); color: #fff; }

/* hero na papierze milimetrowym */
.hero {
  padding: clamp(2.2rem, 5vw, 4.2rem) 0 clamp(2rem, 4vw, 3rem);
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--linia-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--linia-2) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: 1px solid var(--linia);
}
.hero-siatka { display: grid; gap: 2.4rem; align-items: center; grid-template-columns: 1.1fr .9fr; }
.hero .lead { font-size: 1.16rem; color: var(--tusz-2); max-width: 40rem; }
.okruszki { color: var(--szary); margin-bottom: .9rem; }
.okruszki a { color: var(--szary); }
.przyciski { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.przycisk { display: inline-block; background: var(--tusz); color: #fff; padding: .78rem 1.2rem; border-radius: var(--promien); text-decoration: none; font-weight: 620; border: 1px solid var(--tusz); }
.przycisk:hover { background: var(--sygnal); border-color: var(--sygnal); color: #fff; }
.przycisk.jasny { background: var(--bialy); color: var(--tusz); border-color: var(--linia); }
.przycisk.jasny:hover { border-color: var(--tusz); color: var(--tusz); }

/* karta pomiaru (obok hero) */
.monitor { background: var(--bialy); border: 1px solid var(--linia); border-radius: 10px; box-shadow: 0 1px 0 var(--linia-2), 0 18px 40px -24px rgba(15,23,32,.35); overflow: hidden; }
.monitor-pasek { display: flex; justify-content: space-between; align-items: center; padding: .55rem .9rem; border-bottom: 1px solid var(--linia); font-family: var(--mono); font-size: .74rem; color: var(--szary); letter-spacing: .04em; }
.monitor-pasek .kropki { display: flex; gap: .3rem; }
.monitor-pasek .kropki i { width: 8px; height: 8px; border-radius: 50%; background: var(--linia); display: block; }
.monitor svg { width: 100%; }
.monitor dl { margin: 0; display: grid; grid-template-columns: 1fr auto; }
.monitor dt, .monitor dd { margin: 0; padding: .55rem .9rem; border-top: 1px solid var(--linia-2); font-size: .9rem; }
.monitor dd { font-family: var(--mono); font-size: .82rem; text-align: right; }
.stan-ok { color: var(--sygnal); }
.stan-uwaga { color: var(--alarm); }
.monitor .drobne { padding: .55rem .9rem; margin: 0; border-top: 1px solid var(--linia-2); }

/* sekcje */
.sekcja { padding: clamp(2.3rem, 5vw, 3.8rem) 0; }
.sekcja.biala { background: var(--bialy); border-block: 1px solid var(--linia-2); }
.sekcja .wstep { max-width: 46rem; color: var(--tusz-2); }
.karty { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 1.5rem; background: var(--linia); border: 1px solid var(--linia); border-radius: var(--promien); overflow: hidden; }
.karta { background: var(--bialy); padding: 1.35rem 1.35rem 1.1rem; }
.sekcja.biala .karta { background: var(--papier); }
.karta .etykieta { display: inline-block; color: var(--sygnal); font-weight: 600; margin-bottom: .55rem; }
.karta ul { padding-left: 1.1rem; margin: .4rem 0 0; }
.karta p:last-child { margin-bottom: 0; }
.tekst ul, .tekst ol { padding-left: 1.3rem; }
.tekst li { margin-bottom: .45rem; }
.kroki { counter-reset: krok; list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0; border-left: 2px solid var(--tusz); }
.kroki li { counter-increment: krok; position: relative; padding: 0 0 1.3rem 1.6rem; }
.kroki li:last-child { padding-bottom: 0; }
.kroki li::before { content: counter(krok, decimal-leading-zero); position: absolute; left: -1.05rem; top: -.1rem; width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--papier); border: 2px solid var(--tusz); border-radius: 50%; font-family: var(--mono); font-size: .78rem; font-weight: 700; }
.sekcja.biala .kroki li::before { background: var(--bialy); }
.kroki h3 { margin-bottom: .25rem; }
.ramka { background: var(--sygnal-tlo); border-left: 3px solid var(--sygnal); padding: 1rem 1.2rem; border-radius: 0 var(--promien) var(--promien) 0; margin: 1.3rem 0; }
.ramka.uwaga { background: var(--alarm-tlo); border-left-color: var(--alarm); }
.ramka p:last-child { margin-bottom: 0; }

/* tabele danych */
.tabela-owijka { overflow-x: auto; margin: 1rem 0 1.5rem; -webkit-overflow-scrolling: touch; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--bialy); }
.tabela { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 34rem; }
.tabela caption { caption-side: bottom; text-align: left; padding: .65rem .9rem; font-size: .82rem; color: var(--szary); border-top: 1px solid var(--linia); }
.tabela th, .tabela td { text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--linia-2); vertical-align: top; }
.tabela thead th { font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--szary); font-weight: 600; border-bottom: 1px solid var(--linia); background: var(--papier); }
.tabela td.l, .tabela th.l { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela tbody tr:hover { background: #fafbf9; }
.tabela tbody tr:last-child td { border-bottom: 0; }

/* najważniejsze liczby */
.metryki { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1px; background: var(--linia); border: 1px solid var(--linia); border-radius: var(--promien); overflow: hidden; margin: 1.4rem 0; }
.metryki > div { background: var(--bialy); padding: 1rem 1.1rem; }
.metryki .wartosc { display: block; font-size: 2rem; font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.metryki .opis { display: block; font-size: .9rem; color: var(--tusz-2); margin-top: .3rem; }
.metryki .zrodlo-mono { display: block; color: var(--szary-2); margin-top: .5rem; font-size: .68rem; text-transform: none; letter-spacing: .02em; }

/* wykresy */
.wykres { margin: 1.4rem 0; background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--promien); overflow: hidden; }
.wykres img { width: 100%; }
.wykres figcaption { padding: .65rem .9rem; font-size: .82rem; color: var(--szary); border-top: 1px solid var(--linia); }
.pliki { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; }
.pliki li { background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--promien); padding: .7rem .9rem; }
.pliki code, code { font-family: var(--mono); font-size: .86em; background: var(--linia-2); padding: .08em .35em; border-radius: 4px; overflow-wrap: anywhere; }
.cytuj { font-family: var(--mono); font-size: .84rem; background: var(--bialy); border: 1px dashed var(--szary-2); border-radius: var(--promien); padding: .9rem 1rem; overflow-wrap: anywhere; }

/* FAQ */
.faq details { background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--promien); padding: .85rem 1.1rem; margin-bottom: .6rem; }
.faq summary { cursor: pointer; font-weight: 650; color: var(--tusz); }
.faq summary::marker { color: var(--sygnal); }
.faq details p { margin: .7rem 0 .2rem; color: var(--tusz-2); }

/* dziennik zmian */
.dziennik { padding: 2rem 0; border-top: 1px solid var(--linia); background: var(--papier); }
.dziennik h2 { font-size: 1.2rem; }
.dziennik-lista { list-style: none; padding: 0; margin: .8rem 0 0; border-left: 1px solid var(--linia); }
.dziennik-lista li { padding: .25rem 0 .55rem 1rem; position: relative; font-size: .95rem; }
.dziennik-lista li::before { content: ""; position: absolute; left: -4px; top: .7rem; width: 7px; height: 7px; border-radius: 50%; background: var(--sygnal); }
.dziennik time { color: var(--sygnal); margin-right: .5rem; font-weight: 600; }

/* kontakt */
.kontakt { background: var(--tusz); color: #d6dde5; padding: clamp(2.3rem, 5vw, 3.8rem) 0; }
.kontakt h2 { color: #fff; }
.kontakt a { color: var(--sygnal-jasny); }
.kontakt .etykieta-mono { color: var(--sygnal-jasny); }
.kontakt .drobne { color: #9aa6b4; }
.kontakt-siatka { display: grid; gap: 2rem; grid-template-columns: 1fr 1.1fr; }
.formularz { background: var(--bialy); color: var(--tusz); border-radius: 10px; padding: 1.4rem; display: grid; gap: .9rem; }
.formularz fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .35rem; }
.formularz legend { font-weight: 650; margin-bottom: .35rem; }
.formularz label { display: grid; gap: .3rem; font-size: .95rem; }
.formularz fieldset label { display: flex; gap: .55rem; align-items: center; }
.formularz input:not([type=radio]), .formularz textarea {
  font: inherit; padding: .6rem .7rem; border: 1px solid #c5ccc6; border-radius: var(--promien); background: #fbfcfa; width: 100%;
}
.formularz input[type=radio] { accent-color: var(--sygnal); }
.formularz input:focus, .formularz textarea:focus { outline: 2px solid var(--sygnal); outline-offset: 1px; }
.formularz button { font: inherit; font-weight: 680; background: var(--sygnal); color: #fff; border: 0; border-radius: var(--promien); padding: .85rem 1.2rem; cursor: pointer; }
.formularz button:hover { background: var(--tusz); }
.formularz-info { margin: 0; font-size: .9rem; color: var(--tusz-2); min-height: 1.2em; }

/* stopka */
.stopka { background: #0a1016; color: #a9b3bf; padding: 2.4rem 0 1.4rem; font-size: .92rem; }
.stopka a { color: #dfe6ee; }
.stopka-siatka { display: grid; gap: 1.6rem; grid-template-columns: 1.3fr 1.2fr 1fr; margin-bottom: 1.4rem; }
.stopka-marka { font-size: 1.25rem; color: #fff; font-weight: 760; letter-spacing: -.02em; margin-bottom: .4rem; }
.stopka .logo-www { color: var(--sygnal-jasny); }
.stopka-linki { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.stopka .drobne { color: #7c8794; }

@media (max-width: 860px) {
  .hero-siatka, .kontakt-siatka, .stopka-siatka { grid-template-columns: 1fr; }
  .naglowek { position: static; }
  body { font-size: 16px; }
  .menu ul { gap: .1rem .9rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .naglowek, .kontakt, .stopka, .menu { display: none; }
  body { background: #fff; }
  .hero { background: none; }
}

/* warstwa obrazów koncepcyjnych (kino.css ładuje się PO tym pliku, dlatego zmienne na html:root — wyższa specyficzność) */
html:root { --k-noc: #0f1720; --k-karta: rgba(255, 255, 255, .97); --k-tekst: #0f1720; --k-jasny: #f3f6f4; --k-jasny-2: #d8e0e6; --k-akcent: #2fd3a5; --k-promien: 10px; }
.kino-hero .etykieta-mono { color: var(--k-akcent); }
.kino-hero .przycisk { border-color: var(--k-akcent); }
.kino-hero .przycisk.jasny { border-color: var(--k-jasny-2); }
.kino-hero .hero-siatka { align-items: end; }
body .kino-hero .monitor { color: var(--tusz); text-shadow: none; }
body .kino-hero .monitor .drobne { color: var(--szary); }
.kino-sekcje > section .etykieta-mono:first-child { margin-top: 0; }
.kino-sekcje.zwarte > section { margin-bottom: 6svh; }
.kino-strona .dziennik { position: relative; z-index: 1; background: none; border: 0; padding: 0 0 8svh; }
.kino-strona .dziennik > .szer { background: var(--k-karta); color: var(--k-tekst); border-radius: var(--k-promien); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); padding: 24px 22px; }
.stopka-foto .drobne { color: #c3ccd5; }
@media (max-width: 860px) { .kino-strona .naglowek { position: relative; z-index: 5; } }
/* wwwDoktor: hero tego serwisu ma tekst od góry (etykieta, H1, dwa akapity), a kadry biur są jasne — na telefonie mocniejszy gradient także u góry */
@media (max-width: 899px) { main .kino-hero::before { background: linear-gradient(180deg, rgba(16, 20, 28, .52) 0, rgba(16, 20, 28, .6) 45%, rgba(16, 20, 28, .8) 100%); } }