/* ================================================================
   sit-doc-ts.css  ·  school-it.pl
   Wspólny arkusz stylów dla kursu TypeScript
   Namespace: .sit-doc  (izolacja od motywu WordPress)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

.sit-doc{
  --bg:#0d1117; --bg2:#161b22; --bg3:#1c2333; --bg4:#22272e;
  --bd:#30363d; --bd2:#21262d;
  --txt:#e6edf3; --txt2:#8b949e; --txt3:#6e7681;
  --blue:#388bfd; --pur:#a371f7; --grn:#3fb950;
  --org:#e3b341; --tel:#2dd4bf; --red:#f85149;
  --ts:#3178c6;
  --r:10px;
  --font:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','Fira Code',Consolas,monospace;
}

/* ── RESET / BAZA ── */
.sit-doc,.sit-doc *{box-sizing:border-box!important;}
.sit-doc{
  font-family:var(--font)!important;
  background:var(--bg)!important;color:var(--txt)!important;
  line-height:1.7!important;font-size:15px!important;
  border-radius:14px!important;overflow:hidden!important;
  border:1px solid var(--bd2)!important;
}
.sit-doc p{margin:0 0 14px!important;color:var(--txt)!important;max-width:74ch;}
.sit-doc a{color:var(--blue)!important;text-decoration:none!important;}
.sit-doc a:hover{text-decoration:underline!important;}
.sit-doc ul,.sit-doc ol{margin:0 0 16px!important;padding-left:22px!important;}
.sit-doc li{margin:0 0 7px!important;}
.sit-doc strong{color:#fff!important;font-weight:700!important;}
.sit-doc :focus-visible{outline:2px solid var(--tel)!important;outline-offset:2px!important;}

/* kod w tekście */
.sit-doc code{
  font-family:var(--mono)!important;font-size:.86em!important;
  background:var(--bg3)!important;color:var(--tel)!important;
  padding:2px 6px!important;border-radius:5px!important;
  border:1px solid var(--bd2)!important;white-space:nowrap;
}

/* ── HERO ── */
.sit-doc .sd-hero{
  padding:38px 40px 32px!important;
  background:
    radial-gradient(900px 220px at 8% -30%,rgba(49,120,198,.28),transparent 70%),
    linear-gradient(180deg,var(--bg2),var(--bg))!important;
  border-bottom:1px solid var(--bd2)!important;
}
.sit-doc .sd-eyebrow{
  font-family:var(--mono)!important;font-size:.74rem!important;
  color:var(--tel)!important;margin:0 0 10px!important;letter-spacing:.02em;
}
.sit-doc .sd-hero h1{
  font-size:2rem!important;line-height:1.2!important;font-weight:800!important;
  margin:0 0 12px!important;color:#fff!important;letter-spacing:-.02em!important;
  background:none!important;border:none!important;padding:0!important;
}
.sit-doc .sd-lead{font-size:1.02rem!important;color:var(--txt2)!important;max-width:70ch;margin:0 0 18px!important;}
.sit-doc .sd-tags{display:flex!important;flex-wrap:wrap;gap:7px;}
.sit-doc .sd-tag{
  font-size:.72rem!important;font-family:var(--mono)!important;
  padding:4px 10px!important;border-radius:20px!important;
  background:var(--bg3)!important;color:var(--txt2)!important;
  border:1px solid var(--bd)!important;
}
.sit-doc .sd-tag.is-ts{background:rgba(49,120,198,.15)!important;color:#79b8ff!important;border-color:rgba(49,120,198,.4)!important;}

/* ── LAYOUT ── */
.sit-doc .sd-wrap{display:grid!important;grid-template-columns:236px 1fr!important;align-items:start;}
.sit-doc .sd-nav{
  position:sticky!important;top:0;align-self:start;
  padding:26px 12px 40px!important;background:var(--bg2)!important;
  border-right:1px solid var(--bd2)!important;max-height:100vh;overflow-y:auto;
}
.sit-doc .sd-nav-t{
  font-size:.68rem!important;font-family:var(--mono)!important;color:var(--txt3)!important;
  padding:0 12px 10px!important;
}
.sit-doc .sd-nav a{
  display:block!important;padding:7px 12px!important;color:var(--txt2)!important;
  font-size:.8rem!important;border-left:2px solid transparent!important;
  background:transparent!important;transition:all .15s!important;
}
.sit-doc .sd-nav a:hover,.sit-doc .sd-nav a.is-active{
  color:var(--txt)!important;background:var(--bg3)!important;
  border-left-color:var(--tel)!important;text-decoration:none!important;
}
.sit-doc .sd-content{padding:34px 42px 60px!important;min-width:0;}
@media(max-width:820px){
  .sit-doc .sd-wrap{grid-template-columns:1fr!important;}
  .sit-doc .sd-nav{display:none!important;}
  .sit-doc .sd-content{padding:22px 16px 44px!important;}
  .sit-doc .sd-hero{padding:26px 18px 22px!important;}
  .sit-doc .sd-hero h1{font-size:1.5rem!important;}
}

/* ── SEKCJE ── */
.sit-doc .sd-section{margin-bottom:54px!important;scroll-margin-top:18px;}
.sit-doc .sd-badge{
  display:inline-flex!important;align-items:center;gap:6px;
  padding:3px 10px!important;border-radius:6px!important;
  font-size:.68rem!important;font-weight:700!important;font-family:var(--mono)!important;
  margin-bottom:9px!important;border:none!important;
}
.sit-doc .sd-b-blue  {background:rgba(56,139,253,.12)!important;color:var(--blue)!important;}
.sit-doc .sd-b-green {background:rgba(63,185,80,.12)!important;color:var(--grn)!important;}
.sit-doc .sd-b-purple{background:rgba(163,113,247,.12)!important;color:var(--pur)!important;}
.sit-doc .sd-b-orange{background:rgba(227,179,65,.12)!important;color:var(--org)!important;}
.sit-doc .sd-b-teal  {background:rgba(45,212,191,.12)!important;color:var(--tel)!important;}
.sit-doc .sd-b-red   {background:rgba(248,81,73,.12)!important;color:var(--red)!important;}

.sit-doc .sd-section h2{
  font-size:1.42rem!important;font-weight:700!important;color:#fff!important;
  margin:0 0 14px!important;padding:0!important;border:none!important;
  background:none!important;line-height:1.3!important;letter-spacing:-.01em!important;
}
.sit-doc .sd-section h3{
  font-size:1.02rem!important;font-weight:600!important;color:var(--txt)!important;
  margin:28px 0 10px!important;padding:0!important;border:none!important;background:none!important;
  display:flex!important;align-items:center;gap:9px;
}
.sit-doc .sd-section h3::before{
  content:''!important;width:3px;height:15px;border-radius:2px;
  background:var(--tel)!important;flex:0 0 auto;
}

/* ── CELE LEKCJI ── */
.sit-doc .sd-goals{
  background:var(--bg2)!important;border:1px solid var(--bd2)!important;
  border-radius:var(--r)!important;padding:18px 22px!important;margin:0 0 30px!important;
}
.sit-doc .sd-goals ul{list-style:none!important;padding:0!important;margin:0!important;}
.sit-doc .sd-goals li{
  padding-left:26px!important;position:relative;color:var(--txt)!important;margin-bottom:8px!important;
}
.sit-doc .sd-goals li::before{
  content:'✓';position:absolute;left:0;top:0;color:var(--grn)!important;font-weight:700;
}

/* ── KOD ── */
.sit-doc .sd-code{
  margin:0 0 18px!important;border:1px solid var(--bd)!important;
  border-radius:var(--r)!important;overflow:hidden!important;background:#0b0f16!important;
}
.sit-doc .sd-code-bar{
  display:flex!important;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 14px!important;background:var(--bg3)!important;
  border-bottom:1px solid var(--bd)!important;
}
.sit-doc .sd-code-name{font-family:var(--mono)!important;font-size:.74rem!important;color:var(--txt2)!important;}
.sit-doc .sd-copy{
  font-family:var(--mono)!important;font-size:.7rem!important;cursor:pointer;
  background:var(--bg4)!important;color:var(--txt2)!important;
  border:1px solid var(--bd)!important;border-radius:6px!important;padding:3px 9px!important;
}
.sit-doc .sd-copy:hover{color:var(--txt)!important;border-color:var(--tel)!important;}
.sit-doc pre{
  margin:0!important;padding:16px 18px!important;overflow-x:auto!important;
  background:transparent!important;border:none!important;
}
.sit-doc pre code{
  font-family:var(--mono)!important;font-size:.83rem!important;line-height:1.65!important;
  background:none!important;border:none!important;padding:0!important;
  color:#c9d1d9!important;white-space:pre!important;display:block;
}
/* kolory składni (nadaje sit-doc-ts.js) */
.sit-doc .t-com{color:#6a737d!important;font-style:italic;}
.sit-doc .t-str{color:#a5d6ff!important;}
.sit-doc .t-kw {color:#ff7b72!important;}
.sit-doc .t-num{color:#79c0ff!important;}
.sit-doc .t-typ{color:#ffa657!important;}
.sit-doc .t-fn {color:#d2a8ff!important;}

/* ── WYNIK / KONSOLA ── */
.sit-doc .sd-out{
  margin:-6px 0 20px!important;border:1px solid var(--bd)!important;border-radius:var(--r)!important;
  background:var(--bg2)!important;overflow:hidden;
}
.sit-doc .sd-out-t{
  padding:6px 14px!important;font-family:var(--mono)!important;font-size:.7rem!important;
  color:var(--grn)!important;background:rgba(63,185,80,.07)!important;
  border-bottom:1px solid var(--bd2)!important;
}
.sit-doc .sd-out pre code{color:#8b949e!important;font-size:.8rem!important;}

/* ── RAMKI INFORMACYJNE ── */
.sit-doc .sd-box{
  border-radius:var(--r)!important;padding:15px 18px!important;margin:0 0 20px!important;
  border:1px solid var(--bd)!important;border-left-width:3px!important;background:var(--bg2)!important;
}
.sit-doc .sd-box p:last-child{margin-bottom:0!important;}
.sit-doc .sd-box-t{font-weight:700!important;color:#fff!important;margin:0 0 6px!important;font-size:.92rem!important;}
.sit-doc .sd-info {border-left-color:var(--blue)!important;background:rgba(56,139,253,.06)!important;}
.sit-doc .sd-tip  {border-left-color:var(--grn)!important;background:rgba(63,185,80,.06)!important;}
.sit-doc .sd-warn {border-left-color:var(--org)!important;background:rgba(227,179,65,.06)!important;}
.sit-doc .sd-err  {border-left-color:var(--red)!important;background:rgba(248,81,73,.06)!important;}

/* ── TABELA ── */
.sit-doc .sd-table{
  width:100%!important;border-collapse:collapse!important;margin:0 0 22px!important;
  font-size:.86rem!important;border:1px solid var(--bd)!important;
  border-radius:var(--r)!important;overflow:hidden!important;display:table;
}
.sit-doc .sd-table th{
  background:var(--bg3)!important;color:#fff!important;text-align:left!important;
  padding:10px 14px!important;font-weight:600!important;font-size:.8rem!important;
  border-bottom:1px solid var(--bd)!important;
}
.sit-doc .sd-table td{
  padding:9px 14px!important;border-bottom:1px solid var(--bd2)!important;
  color:var(--txt)!important;vertical-align:top;
}
.sit-doc .sd-table tr:last-child td{border-bottom:none!important;}
.sit-doc .sd-table tr:hover td{background:rgba(255,255,255,.02)!important;}
.sit-doc .sd-scroll{overflow-x:auto;margin-bottom:22px;}

/* ── DWIE KOLUMNY / KARTY ── */
.sit-doc .sd-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:14px!important;margin:0 0 22px!important;}
.sit-doc .sd-card{
  background:var(--bg2)!important;border:1px solid var(--bd2)!important;
  border-radius:var(--r)!important;padding:15px 17px!important;
}
.sit-doc .sd-card h4{margin:0 0 7px!important;font-size:.92rem!important;color:#fff!important;font-weight:600!important;}
.sit-doc .sd-card p{font-size:.86rem!important;color:var(--txt2)!important;margin:0!important;}

/* ── ZADANIA ── */
.sit-doc .sd-task{
  background:linear-gradient(180deg,rgba(163,113,247,.07),transparent)!important;
  border:1px solid var(--bd)!important;border-radius:var(--r)!important;
  padding:18px 20px!important;margin:0 0 18px!important;
}
.sit-doc .sd-task-h{display:flex!important;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px!important;}
.sit-doc .sd-task-n{
  font-family:var(--mono)!important;font-size:.72rem!important;font-weight:700!important;
  background:rgba(163,113,247,.15)!important;color:var(--pur)!important;
  padding:3px 9px!important;border-radius:6px!important;
}
.sit-doc .sd-task-h strong{font-size:1rem!important;}
.sit-doc .sd-lvl{font-size:.72rem!important;color:var(--org)!important;font-family:var(--mono)!important;letter-spacing:1px;}
.sit-doc .sd-task ul{margin-bottom:10px!important;}
.sit-doc details{
  margin-top:10px!important;border:1px solid var(--bd)!important;
  border-radius:8px!important;background:var(--bg)!important;overflow:hidden;
}
.sit-doc details summary{
  cursor:pointer;padding:9px 14px!important;font-size:.82rem!important;
  color:var(--tel)!important;font-family:var(--mono)!important;list-style:none;
  background:var(--bg2)!important;user-select:none;
}
.sit-doc details summary::-webkit-details-marker{display:none;}
.sit-doc details summary::before{content:'▸ ';}
.sit-doc details[open] summary::before{content:'▾ ';}
.sit-doc details[open] summary{border-bottom:1px solid var(--bd)!important;}
.sit-doc details .sd-code{margin:0!important;border:none!important;border-radius:0!important;}

/* ── STOPKA / NAWIGACJA ── */
.sit-doc .sd-foot{
  display:flex!important;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--bd2)!important;padding-top:22px!important;margin-top:44px!important;
}
.sit-doc .sd-foot a{
  display:block!important;padding:11px 16px!important;background:var(--bg2)!important;
  border:1px solid var(--bd)!important;border-radius:var(--r)!important;
  color:var(--txt)!important;font-size:.86rem!important;
}
.sit-doc .sd-foot a:hover{border-color:var(--tel)!important;text-decoration:none!important;}
.sit-doc .sd-foot span{display:block;font-size:.7rem;color:var(--txt3);font-family:var(--mono);}

/* ── SPIS TREŚCI KURSU (index.html) ── */
.sit-doc .sd-block-t{
  font-family:var(--mono)!important;font-size:.76rem!important;color:var(--tel)!important;
  margin:34px 0 12px!important;padding-bottom:8px!important;border-bottom:1px solid var(--bd2)!important;
}
.sit-doc .sd-lessons{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;gap:12px!important;}
.sit-doc .sd-lesson{
  display:flex!important;gap:13px;align-items:flex-start;
  background:var(--bg2)!important;border:1px solid var(--bd2)!important;
  border-radius:var(--r)!important;padding:14px 16px!important;color:var(--txt)!important;
}
.sit-doc .sd-lesson:hover{border-color:var(--tel)!important;background:var(--bg3)!important;text-decoration:none!important;}
.sit-doc .sd-lesson-n{
  font-family:var(--mono)!important;font-size:.78rem!important;font-weight:700!important;
  color:var(--tel)!important;flex:0 0 auto;padding-top:1px;
}
.sit-doc .sd-lesson b{display:block;font-size:.9rem;color:#fff;font-weight:600;margin-bottom:3px;}
.sit-doc .sd-lesson small{color:var(--txt2);font-size:.78rem;line-height:1.5;display:block;}
.sit-doc .sd-lesson.is-soon{opacity:.55;pointer-events:none;}

/* ── PASEK POSTĘPU CZYTANIA ── */
.sit-doc .sd-progress{
  position:sticky;top:0;left:0;height:3px;width:100%;
  background:transparent!important;z-index:20;
}
.sit-doc .sd-progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--tel),var(--blue))!important;
}

@media (prefers-reduced-motion:reduce){
  .sit-doc *,.sit-doc *::before{transition:none!important;animation:none!important;}
}