/* ====== DARK THEME (spójny z homepage) ====== */
:root{
  --bg:#1a1a1a; --text:#e0e0e0; --primary:#4a90e2;
  --secondary:#333; --border:#444; --accent:#2b2b2b;
  --ok:#47c27c; --warn:#e6a23c; --container:900px;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; padding:0;
  font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
  background:var(--bg); color:var(--text); line-height:1.8; overflow-x:hidden;
}

/* Bezpiecznik przed poziomym przewijaniem */
html, body {
  overflow-x: hidden;
}

/* ====== Layout ====== */
.container{
  max-width:var(--container); margin:40px auto; padding:20px;
  border-radius:8px; background:var(--secondary);
  box-shadow:0 0 20px rgba(0,0,0,.5);
}
.wrap{display:block}
.columns{display:block}
section{scroll-margin-top:90px}

/* ====== Header (jak homepage) ====== */
header.hero{ text-align:center; border-bottom:0; padding-bottom:20px; margin-bottom:20px }
header.hero h1{ color:var(--primary); font-size:2.5em; margin:0 }
header.hero .subtitle{ margin:8px 0 0; color:#cfcfcf; font-size:1.1em }
nav.hero{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:20px }
nav.hero a{
  font-size:.95em; background:#2a2a2a; padding:6px 10px;
  border:1px solid var(--border); border-radius:6px; color:var(--text); text-decoration:none;
}
nav.hero a:hover{ background:#2f2f2f }
nav.hero a[aria-current="page"]{ text-decoration:underline }

/* ====== Cards, banners, boxes ====== */
.card{
  background:var(--accent); border:1px solid var(--border);
  border-radius:8px; padding:16px 20px; margin:18px 0;
}
.card ul {
  margin-left: 0;
  padding-left: 1.2em;
}
.card ul li {
  margin: 0.25em 0;
}
.info{ background:var(--accent); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin:18px 0 }

/* Teza – lepsze odstępy i wyrównanie */
.teza{
  background:rgba(74,144,226,.1);
  border:1px solid #3a5c82;
  color:#d9e9ff;
  padding:12px 14px;
  border-radius:8px;
  margin-bottom:18px;
}
.teza p {
  margin: 0.35rem 0;
}
.teza .note {
  color: #cfd8e3;
}

/* Wizualny „badge” dla wersji */
.tag {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--primary);   /* zamiast #222 → spójny niebieski */
  color: #fff;                  /* jasny tekst */
  font-weight: 600;
  font-size: 0.95em;
}

/* ====== Typografia ====== */
h1{ color:var(--primary) }
h2{
  color:var(--primary); font-size:1.8em;
  margin:16px 0 10px; padding:0; border:0; /* bez poziomej kreski i zbity odstęp */
}
.card h2{ margin-top:0; } /* zero przerwy na początku karty */
h3{ color:var(--text); font-size:1.3em; margin:18px 0 8px }
a{ color:var(--primary); text-decoration:none } a:hover{text-decoration:underline}
kbd,code{ background:#2a2a2a; border:1px solid var(--border); border-radius:4px; padding:0 .3em }

/* ====== Grid helpers ====== */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px }
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px }

/* ====== Code blocks ====== */
pre{
  background:#1e1e1e; border:1px solid #3a3a3a; border-radius:6px;
  padding:14px; line-height:1.5; overflow-x:auto; white-space:pre;
}
pre code{ background:transparent; border:none; padding:0; color:#ddd }
.code-toolbar{ display:flex; gap:8px; margin-bottom:8px }
.code-toolbar button{
  appearance:none; border:1px solid var(--border); background:#222; color:#ddd;
  font-size:.85em; padding:6px 10px; border-radius:6px; cursor:pointer;
}
.code-toolbar button:hover{ background:#2a2a2a }

/* ====== GH status ====== */
.gh-status{ list-style:none; padding:0; margin:0 }
.gh-status li{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem;
  border:1px dashed var(--border); border-radius:.5rem; margin-bottom:.5rem; background:#262626;
}
.gh-status .path{ font-family:ui-monospace,Menlo,Consolas,monospace }
.gh-status .result{ margin-left:auto; font-weight:600 }
.gh-status .ok{ color:var(--ok) } .gh-status .warn{ color:var(--warn) } .gh-status .err{ color:#f44336 }

/* ====== Floating TOC (desktop) ====== */
.toc-float{
  position:fixed; right:24px; top:120px; width:220px; max-height:60vh; overflow:auto;
  background:var(--accent); border:1px solid var(--border); border-radius:10px; padding:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.35); z-index:999;
}
.toc-float strong{display:block;margin:0 0 8px;color:#cfd8e3}
.toc-float nav a{display:block;padding:6px 8px;border-radius:6px;color:var(--text);text-decoration:none}
.toc-float nav a:hover{background:#2f2f2f}
.toc-float nav a[aria-current="true"]{outline:2px solid var(--primary)}

/* na wąskich ekranach – kompaktowy tryb + fix scrolla */
@media (max-width:1100px){
  .toc-float{
    right:12px;
    top:auto;
    bottom:80px;
    max-height:46vh;

    /* FIX: nie używamy width:vw */
    box-sizing: border-box;
    width: auto;
    max-width: calc(100vw - (12px + env(safe-area-inset-right, 0px)));
    overflow: hidden;
  }
}

/* ====== Scroll to top ====== */
#toTop{
  position:fixed; right:24px; bottom:24px; display:none;
  width:44px; height:44px; border-radius:999px; border:1px solid var(--border);
  background:#222; color:#fff; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.35); z-index:1002;
}
#toTop:hover{ background:#2a2a2a }
@media (max-width:1100px){ #toTop{ right:12px; bottom:12px } }

/* ====== Mobile TOC: FAB + bottom-sheet ====== */
#tocFab{
  position:fixed; right:24px; bottom:84px; display:none;
  align-items:center; gap:.5rem; padding:.6rem .85rem;
  background:var(--primary); color:#fff; border:0; border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.35); cursor:pointer; z-index:1001;
}
#tocFab:active{ transform:translateY(1px) }

#sheetBackdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000 }
#tocSheet{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:1001;
  background:var(--accent); border-top-left-radius:16px; border-top-right-radius:16px;
  border:1px solid var(--border); box-shadow:0 -8px 32px rgba(0,0,0,.45);
  max-height:70vh; overflow:auto; padding:12px 14px;
}
#tocSheet h3{ margin:4px 0 10px; color:#cfd8e3 }
#tocSheet a{ display:block; padding:10px 8px; border-radius:8px; color:var(--text); text-decoration:none }
#tocSheet a:hover{ background:#2f2f2f }

@media (max-width: 1200px){
  .toc-float{ display:none !important; } /* panel znika wcześniej */
  #tocFab{ display:flex; }               /* pastylka pojawia się wcześniej */
}

/* ====== Footer ====== */
footer{ text-align:center; margin:40px 0 10px; font-size:.95em; color:#b3b3b3 }

/* ====== Print ====== */
@media print{
  @page{ size:A4; margin:20mm 15mm }
  body{ background:#fff !important; color:#000 !important; font-size:11pt; line-height:1.4 }
  .container{ max-width:100% !important; box-shadow:none !important; border:none !important; margin:0 !important; padding:0 !important }
  h1,h2,h3,strong{ color:#000 !important }
  h2{ border-bottom:1px solid #ccc !important; padding-bottom:10px !important }
  nav.hero,.code-toolbar,footer{ display:none !important }
  .card,.info,.teza{ background:#f0f0f0 !important; border:1px solid #ccc !important }
  pre{ background:#f5f5f5 !important; border:1px solid #ccc !important; white-space:pre-wrap !important; word-break:break-all !important }
  code,kbd{ background:#f5f5f5 !important; border:1px solid #ccc !important; color:#000 !important }
}
/* SR-only link: niewidoczny, pokazuj tylko przy focus */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.sr-only-focusable:focus{
  position:fixed;left:12px;top:12px;width:auto;height:auto;margin:0;
  padding:8px 12px;background:#000;color:#fff;z-index:1100;border-radius:6px;clip:auto;white-space:normal;
}

/* mniej luftu nad kontenerem */
.container{ margin:24px auto; }   /* było 40px */

/* ===== Tryb kompaktowy nagłówka tylko dla /sim/spec ===== */
.page-spec header.hero{
  padding-bottom:8px;        /* było ~20px */
  margin-bottom:12px;        /* było ~20px */
  border-bottom:0;
}
.page-spec header.hero h1{
  font-size:2.1em;           /* było 2.5em */
  margin:0 0 4px;
  margin-bottom: 4px;
}
.page-spec header.hero .subtitle{
  margin:0;                  /* było ~8px 0 0 */
  margin-top: 0;
  margin-bottom: 6px;
  font-size:1.0em;
  color:#cfd8e3;
}
.page-spec nav.hero{
  margin-top:6px;           /* było 20px potem 10px */
  gap:8px;
}
.page-spec nav.hero a{
  font-size:.9em;            /* było .95em */
  padding:4px 8px;           /* było 6px 10px */
  border-radius:6px;
}

/* lekko ciaśniejszy banner tezy pod nagłówkiem */
.page-spec .teza{
  margin-top:8px;
  padding:10px 12px;
}

.neocities-button img { display:inline-block; vertical-align:middle; }

.js-off { margin: 12px 0; }