/* Skorka "karta pozycyjna" - warstwa na style.css, ladowana po nim.
   Nie zmienia zadnej klasy ani struktury HTML, tylko wyglad.
   Wylaczenie: usunac odnosnik do tego pliku w inc/layout.php. */

/* ——— palety ——— */
:root{--paper:#e4eaea;--ink:#0c2b33;--ink-soft:#3d5f68;--rule-strong:#7d9ba1;--signal:#a3204f;--signal-soft:#f4dae2;--good:#256042;--good-soft:#e2efe8;--warn:#8a5c0a;--warn-soft:#f6ecd6;--map-filter:grayscale(.5) sepia(.45) hue-rotate(152deg) saturate(1.6) contrast(1.25) brightness(.97)}
:root{--text:#0c2b33;--text-strong:#0c2b33;--muted:#3d5f68;--line:#a9bfc1;--line-soft:#c8d6d6;--bg:#fff;--bg-soft:#eef3f3;--accent:#a3204f;--accent-dark:#7d1a3d;--radius:0}
@media (prefers-color-scheme:dark){:root{--paper:#061219;--ink:#dceaec;--ink-soft:#9cb8bd;--rule-strong:#4c7079;--signal:#f07fa3;--signal-soft:#3a1723;--good:#6cb894;--good-soft:#142b23;--warn:#e0ad4d;--warn-soft:#2e2415;--map-filter:invert(.92) grayscale(.35) sepia(.4) hue-rotate(152deg) saturate(1.5) contrast(1.12) brightness(.88);--text:#dceaec;--text-strong:#dceaec;--muted:#9cb8bd;--line:#26454e;--line-soft:#1b373f;--bg:#132c34;--bg-soft:#0f2229;--accent:#f07fa3;--accent-dark:#f7a3bd}}

/* ——— papier arkusza z siatka wspolrzednych ——— */
body{background:var(--paper);background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:72px 72px;background-position:-1px -1px;font-family:"IBM Plex Sans","Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px}
.wrap{max-width:1180px}

/* ——— naglowek ——— */
.site-header{background:var(--paper);border-bottom:2px solid var(--ink);box-shadow:none}
.logo{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-size:20px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.logo-mark{background:var(--ink);color:var(--paper);font-family:"IBM Plex Mono",monospace;font-weight:600}
.nav ul{gap:0}
.nav a{padding:7px 14px;border-left:1px solid var(--line);font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-size:14.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}
.nav li:first-child a{border-left:0}
.nav a:hover{background:var(--bg);color:var(--ink)}
.nav a.active{background:var(--ink);color:var(--paper)}
.nav-lang a{border:1px solid var(--ink);color:var(--ink)}
.nav-lang a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav-toggle{border-color:var(--ink);background:var(--bg)}
.nav-toggle span{background:var(--ink);border-radius:0}

/* ——— panele z danymi: biel na szarym papierze, ostre narozniki ——— */
.card{position:relative;margin:0 0 22px;border:1px solid var(--line);background:var(--bg);box-shadow:none}
.card::before,.card::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--ink);pointer-events:none;z-index:1}
.card::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.card::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.card>h2,.card>h3,.card-title{padding:13px 18px;border-bottom:1px solid var(--line);background:transparent;font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.card>h2,.card>h3{font-size:15.5px}
.card-title{font-size:17px}
.card-body{padding:18px}

/* ——— tabele danych ——— */
.data-table th,.det-table th{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.data-table th{text-align:left;width:34%}
.data-table td{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink)}
.data-table th,.data-table td{padding:12px 18px}
.det-table th{border-bottom:2px solid var(--ink)}
.det-table td{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

/* ——— adres jako glowny element strony ——— */
.ip-hero{padding:24px 18px;background:transparent;border-bottom:1px solid var(--line)}
.ip-hero h1{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ip-value{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;font-size:clamp(32px,6.5vw,58px);font-weight:500;letter-spacing:-.02em;color:var(--ink)}

/* ——— przyciski i formularze ——— */
.btn{background:var(--ink);color:var(--paper);font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.btn:hover{background:var(--signal);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.lookup input,.cd-split-form select{border-color:var(--line);background:var(--bg);color:var(--ink);font-family:"IBM Plex Mono",ui-monospace,monospace}
.lookup input:focus{outline-color:var(--signal)}
.pager a,.pager span{border-color:var(--line)}
.pager .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ——— mapa: OpenStreetMap wpasowany w palete, ze znacznikiem pozycji ——— */
.chart-frame{position:relative;line-height:0}
.map{filter:var(--map-filter);height:320px}
.chart-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;opacity:.22}

/* ——— listy adresow ——— */
.ip-list li a{border-color:var(--line);font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink)}
.ip-list li a:hover{background:var(--ink);color:var(--paper)}

/* ——— czarne listy: stan niesie znak, nie tylko kolor ——— */
.bl-item{border-color:var(--line);font-size:13.5px;color:var(--ink-soft)}
.bl-item.bl-ok{border-color:var(--good);color:var(--good);background:var(--good-soft)}
.bl-item.bl-hit{border-color:var(--signal);color:var(--signal);background:var(--signal-soft)}
.bl-item.bl-policy{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.bl-item.bl-error{border-color:var(--line);color:var(--ink-soft);background:transparent;border-style:dashed}
.bl-name{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-size:14.5px}
.bl-status.bl-good{color:var(--good)}
.bl-status.bl-bad{color:var(--signal)}
.bl-hist-bad,.det-score{color:var(--signal)}
.bl-hist-ok{color:var(--good)}
.bl-note{border-left-color:var(--signal);background:var(--bg-soft);color:var(--ink-soft);font-size:13.5px}
.bl-note-policy{border-left-color:var(--warn)}
.bl-note-error{border-left-color:var(--line)}

/* ——— sprawdzanie linkow ——— */
.lk-verdict{border-color:var(--line)}
.lk-verdict.lk-bad{border-color:var(--signal);color:var(--signal);background:var(--signal-soft)}
.lk-verdict.lk-ok{border-color:var(--good);color:var(--good);background:var(--good-soft)}
.lk-verdict.lk-unknown{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.lk-host{font-family:"IBM Plex Mono",ui-monospace,monospace}
.lk-dom{border-bottom-color:var(--signal)}
.lk-notes li{border-color:var(--line)}
.lk-notes li.lk-bad{border-color:var(--signal);background:var(--signal-soft)}
.lk-notes li.lk-bad::before{color:var(--signal)}
.lk-notes li.lk-warn{border-color:var(--warn);background:var(--warn-soft)}
.lk-notes li.lk-warn::before{color:var(--warn)}
.lk-example{background:var(--bg-soft);font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ——— kalkulator podsieci ——— */
.cd-stat{border-color:var(--line);background:var(--bg-soft)}
.cd-stat-value{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--ink)}
.cd-stat-label{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.cd-bit{background:var(--line-soft);color:var(--ink-soft);font-family:"IBM Plex Mono",ui-monospace,monospace}
.cd-bit.is-net{background:var(--ink);color:var(--paper)}
.cd-key{background:var(--line-soft)}
.cd-key-net{background:var(--ink)}
.cd-scope{border-left-color:var(--signal);background:var(--bg-soft)}
.cd-table td code,.cd-bits{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ——— reklama wlasna ——— */
.cp-ad{border:1px solid var(--ink);border-radius:0;background:var(--ink)}
.cp-label{color:rgba(228,234,234,.62);font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif}
.cp-mark{border-radius:0;background:rgba(228,234,234,.14);color:var(--paper)}
.cp-logo{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;color:#fff}
.cp-logo span{color:var(--signal)}
.cp-title{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;color:#fff}
.cp-text{color:rgba(228,234,234,.8)}
.cp-cta{border-radius:0;background:var(--signal);color:#fff;font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;letter-spacing:.05em;text-transform:uppercase}
.cp-cta:hover{background:var(--signal);color:#fff;filter:brightness(1.14)}
.cp-note{color:rgba(228,234,234,.55)}
@media (prefers-color-scheme:dark){.cp-ad{background:var(--bg);border-color:var(--line)}.cp-logo,.cp-title{color:var(--ink)}.cp-text{color:var(--ink-soft)}.cp-label,.cp-note{color:var(--ink-soft)}.cp-mark{background:var(--bg-soft);color:var(--ink)}}

/* ——— drobiazgi ——— */
.intro{max-width:68ch;color:var(--ink-soft);font-size:15.5px}
.muted{font-size:13.5px;color:var(--ink-soft)}
.prose code{background:var(--bg-soft);border-radius:0;font-family:"IBM Plex Mono",ui-monospace,monospace}
.contact-email{font-family:"IBM Plex Mono",ui-monospace,monospace}
.layout{gap:26px}
.site-footer{border-top:2px solid var(--ink);background:transparent}
.footer-inner{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.04em}
.footer-nav a{color:var(--ink-soft)}
.w-load{border-radius:0}
.slot,.det-note{color:var(--ink-soft)}

/* ——— responsywnosc: to samo, co w arkuszu bazowym, tylko dostrojone ——— */
@media (max-width:940px){.data-table th{width:38%}}
@media (max-width:720px){.nav a{border-left:0;border-top:1px solid var(--line)}.nav li:first-child a{border-top:0}.nav-lang a{border:0;border-top:1px solid var(--line)}.data-table th{width:auto;padding-bottom:0}.data-table td{padding-top:2px}.map{height:240px}.card-title{font-size:16px}}
@media (max-width:560px){.card>h2,.card>h3,.card-title{padding:12px 14px}.card-body{padding:14px}.data-table th,.data-table td{padding-left:14px;padding-right:14px}}
.w-load{min-width:110px;background:linear-gradient(90deg,var(--bg-soft) 25%,var(--line-soft) 50%,var(--bg-soft) 75%);background-size:400% 100%}