/* ============================================================
   Entities speedup — lesson design system
   Direction: modern interactive lesson (distill-like), friendly.
   Display: Bricolage Grotesque · Body: Inter · Data: JetBrains Mono
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  color-scheme: light;
  --plane:#f4f6fa; --surface:#ffffff; --surface-2:#eef1f7;
  --ink:#151a2d; --ink-2:#454c63; --ink-muted:#7c8299;
  --grid:#e3e7ef; --baseline:#c9cfdd; --border:rgba(21,26,45,.10);
  --accent:#4f5ce5; --accent-2:#3a46c4; --accent-soft:#eaecfc;
  --amber:#b45f06; --amber-soft:#fdf0dc;
  --s-blue:#4f5ce5; --s-orange:#e8721c; --s-aqua:#0d9488;
  --good:#0f8a52; --good-soft:#e2f5eb;
  --warn:#a97803; --warn-soft:#faf0d7;
  --crit:#d43d51; --crit-soft:#fce8ea;
  --shadow:0 1px 2px rgba(21,26,45,.05), 0 8px 24px -12px rgba(21,26,45,.12);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --disp:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --plane:#0e1220; --surface:#171c30; --surface-2:#1d2338;
    --ink:#eef0f8; --ink-2:#b8bdd2; --ink-muted:#7e849c;
    --grid:#262d45; --baseline:#39415e; --border:rgba(238,240,248,.10);
    --accent:#8b96ff; --accent-2:#a5adff; --accent-soft:#232a4e;
    --amber:#e8a93c; --amber-soft:#33270f;
    --s-blue:#7b87f5; --s-orange:#ef8a45; --s-aqua:#2dd4bf;
    --good:#3ecf8e; --good-soft:#12291e;
    --warn:#e2b53e; --warn-soft:#2b2312;
    --crit:#f27285; --crit-soft:#331821;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --plane:#0e1220; --surface:#171c30; --surface-2:#1d2338;
  --ink:#eef0f8; --ink-2:#b8bdd2; --ink-muted:#7e849c;
  --grid:#262d45; --baseline:#39415e; --border:rgba(238,240,248,.10);
  --accent:#8b96ff; --accent-2:#a5adff; --accent-soft:#232a4e;
  --amber:#e8a93c; --amber-soft:#33270f;
  --s-blue:#7b87f5; --s-orange:#ef8a45; --s-aqua:#2dd4bf;
  --good:#3ecf8e; --good-soft:#12291e;
  --warn:#e2b53e; --warn-soft:#2b2312;
  --crit:#f27285; --crit-soft:#331821;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--plane); color:var(--ink);
  font-family:var(--sans); line-height:1.65; font-size:16px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- reading progress ---------- */
#progress{position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--s-aqua));
  z-index:60; transition:width .1s linear}

/* ---------- top bar ---------- */
.bar{position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--plane) 82%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
.bar .inner{max-width:1200px; margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.brand{font-family:var(--disp); font-weight:800; font-size:.95rem;
  letter-spacing:-.01em; display:flex; align-items:center; gap:9px; color:var(--ink)}
.brand .glyph{width:26px; height:26px; border-radius:8px; flex:none;
  background:linear-gradient(135deg,var(--accent),var(--s-aqua));
  display:grid; place-items:center; color:#fff; font-family:var(--mono);
  font-size:.72rem; font-weight:600}
.bar nav{display:flex; gap:4px; flex-wrap:wrap; font-size:.82rem}
.bar nav a{color:var(--ink-2); text-decoration:none; padding:5px 10px; border-radius:8px}
.bar nav a:hover{color:var(--accent); background:var(--accent-soft)}
.toggle{margin-left:auto; font:inherit; font-size:.8rem; cursor:pointer;
  background:var(--surface); color:var(--ink-2); border:1px solid var(--border);
  border-radius:10px; padding:6px 13px}
.toggle:hover{color:var(--ink); border-color:var(--baseline)}

/* ---------- hero ---------- */
.hd{max-width:1200px; margin:0 auto; padding:56px 24px 20px;
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  gap:44px; align-items:center}
@media(max-width:900px){.hd{grid-template-columns:1fr; padding-top:36px; gap:24px}}
.eyebrow{font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin:0 0 10px; font-weight:600}
h1{font-family:var(--disp); font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.06;
  letter-spacing:-.025em; font-weight:800; margin:.1em 0 .25em; text-wrap:balance}
.lede{font-size:1.1rem; color:var(--ink-2); max-width:58ch; line-height:1.7}
.facts{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 6px; padding:0; list-style:none}
.facts li{font-family:var(--mono); font-size:.75rem; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:6px 13px; color:var(--ink-2)}
.facts b{color:var(--accent); font-weight:600}

/* signature: live NER annotation demo */
.ner-demo{background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:22px 24px; box-shadow:var(--shadow); font-size:1.02rem;
  line-height:2.15}
.ner-demo .nd-label{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-muted); display:block;
  line-height:1.4; margin-bottom:12px}
.ent{border-radius:7px; padding:2px 6px 2px 7px; white-space:nowrap;
  border:1px solid transparent; font-weight:500}
.ent i{font-style:normal; font-family:var(--mono); font-size:.58em; font-weight:600;
  letter-spacing:.06em; vertical-align:.45em; margin-left:4px; opacity:.85}
.ent.central{background:var(--amber-soft); color:var(--amber);
  border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.ent.strong{background:var(--accent-soft); color:var(--accent-2);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.ent.junk{background:var(--surface-2); color:var(--ink-muted);
  text-decoration:line-through; text-decoration-thickness:1px}
.ner-demo .nd-note{font-size:.8rem; color:var(--ink-muted); line-height:1.5;
  margin-top:12px; border-top:1px dashed var(--grid); padding-top:10px}

/* ---------- layout: rail + content ---------- */
.shell{max-width:1200px; margin:0 auto; padding:0 24px 120px;
  display:grid; grid-template-columns:216px minmax(0,1fr); gap:48px}
@media(max-width:1000px){.shell{grid-template-columns:1fr; gap:0}}
.rail{position:sticky; top:64px; align-self:start; max-height:calc(100vh - 90px);
  overflow-y:auto; padding:20px 4px 20px 0; font-size:.82rem}
@media(max-width:1000px){.rail{display:none}}
.rail .part{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-muted); margin:18px 0 6px; font-weight:600}
.rail .part:first-child{margin-top:0}
.rail a{display:flex; gap:9px; align-items:baseline; color:var(--ink-2);
  text-decoration:none; padding:5px 10px; border-radius:8px; line-height:1.35;
  border-left:2px solid transparent}
.rail a .n{font-family:var(--mono); font-size:.68rem; color:var(--ink-muted); flex:none; width:1.4em}
.rail a:hover{background:var(--surface); color:var(--ink)}
.rail a.on{background:var(--accent-soft); color:var(--accent-2); border-left-color:var(--accent); font-weight:600}
.rail a.on .n{color:var(--accent)}

.wrap{min-width:0}
.wrap :is(p,ul,ol){max-width:70ch}
.callout,.tldr{max-width:74ch}
a{color:var(--accent)}

/* ---------- headings as lesson chapters ---------- */
h2{font-family:var(--disp); font-size:clamp(1.35rem,2.6vw,1.75rem); font-weight:700;
  letter-spacing:-.015em; margin:0 0 .3em; text-wrap:balance; scroll-margin-top:76px;
  padding-top:3.2em; position:relative}
h2::before{content:"Rozdział " counter(chapter); counter-increment:chapter;
  display:block; font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:8px}
h2::after{content:""; display:block; width:44px; height:3px; border-radius:2px;
  margin-top:.45em; background:linear-gradient(90deg,var(--accent),var(--s-aqua))}
.wrap{counter-reset:chapter}
h2 .num{display:none}
h3{font-family:var(--disp); font-size:1.08rem; font-weight:700; margin:1.8em 0 .35em; letter-spacing:-.01em}
p{margin:.7em 0}
b,strong{font-weight:600}

/* ---------- cards & callouts ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:20px 22px; margin:16px 0; box-shadow:var(--shadow)}
.tldr{background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--accent); border-radius:var(--r);
  padding:20px 24px; margin:26px 0; box-shadow:var(--shadow)}
.tldr h3{margin-top:0}
.tldr ol{margin:.4em 0; padding-left:1.3em}
.tldr li{margin:.4em 0}
.callout{border-radius:12px; padding:16px 20px; margin:18px 0; font-size:.93rem;
  border:1px solid var(--border); background:var(--surface); position:relative;
  padding-left:48px}
.callout::before{position:absolute; left:16px; top:14px; font-size:1.05rem}
.callout.crit{background:var(--crit-soft);
  border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
.callout.crit::before{content:"⚠️"}
.callout.good{background:var(--good-soft);
  border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.callout.good::before{content:"💡"}
.callout b{color:var(--ink)}

/* ---------- metrics / grid ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0}
@media(max-width:680px){.grid3{grid-template-columns:1fr}}
.metric{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--shadow)}
.metric .m-name{font-weight:600; display:flex; align-items:center; gap:8px}
.dot{width:11px; height:11px; border-radius:4px; display:inline-block; flex:none}
.metric .m-sub{font-size:.8rem; color:var(--ink-muted); margin:2px 0 12px}
.metric dl{display:grid; grid-template-columns:1fr auto; gap:3px 10px; margin:0; font-size:.86rem}
.metric dt{color:var(--ink-2)}
.metric dd{margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums;
  text-align:right; font-weight:600}
.win{color:var(--good)}

/* ---------- figures ---------- */
.figure{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:18px 18px 12px; margin:20px 0; box-shadow:var(--shadow)}
.figure figcaption{font-size:.85rem; color:var(--ink-2); margin-top:10px; max-width:70ch}
.figure .f-title{font-weight:600; font-size:.95rem; margin-bottom:2px}
.figure .f-hint{font-size:.78rem; color:var(--ink-muted); margin-bottom:10px}
.figure img{width:100%; height:auto; display:block; border-radius:8px; background:#fff;
  border:1px solid var(--border); cursor:zoom-in}
.figure a{display:block; text-decoration:none}
.figure.wide{position:relative; left:50%; transform:translateX(-50%); width:96vw; max-width:1200px}
@media(min-width:1001px){.figure.wide{left:0; transform:none; width:100%}}
.legend{display:flex; flex-wrap:wrap; gap:14px; margin:4px 0 8px; font-size:.82rem; color:var(--ink-2)}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend .swatch{width:14px; height:3px; border-radius:2px}
.chart-scroll{overflow-x:auto}
svg.chart{width:100%; height:auto; min-width:520px; display:block; font-family:var(--sans)}

/* ---------- tables ---------- */
.tbl-scroll{overflow-x:auto; margin:16px 0; border:1px solid var(--border);
  border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow)}
.tbl-scroll table{margin:0; min-width:560px; border:none}
table{border-collapse:collapse; width:100%; font-size:.85rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r)}
th,td{padding:9px 13px; text-align:right; border-bottom:1px solid var(--grid);
  font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
th:first-child,td:first-child{text-align:left; font-variant-numeric:normal}
thead th, tr:first-child th{color:var(--ink-muted); font-weight:600; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  border-bottom:1px solid var(--baseline); position:sticky; top:0; background:var(--surface-2)}
tbody tr:hover{background:var(--surface-2)}
td.num{font-family:var(--mono)}
tr.hl{background:var(--good-soft); box-shadow:inset 3px 0 0 var(--good)}
tr.hl:hover{background:var(--good-soft)}
tr.hl td:first-child{font-weight:700; color:var(--good)}
tr.bad td{color:var(--ink-muted)}
tr .lm, td.lm{color:var(--ink-muted)}

/* ---------- tags ---------- */
.tag{font-family:var(--mono); font-size:.7rem; padding:3px 9px; border-radius:999px;
  font-weight:600; white-space:nowrap; letter-spacing:.02em}
.tag.good{background:var(--good-soft); color:var(--good)}
.tag.warn{background:var(--warn-soft); color:var(--warn)}
.tag.crit{background:var(--crit-soft); color:var(--crit)}

/* ---------- glossary / code ---------- */
.gloss{width:100%; font-size:.88rem}
.gloss td{text-align:left; vertical-align:top}
.gloss td:first-child{font-weight:600; white-space:nowrap; width:150px}
.gloss td:nth-child(3){color:var(--ink-muted); white-space:nowrap; width:88px; text-align:right}
code{font-family:var(--mono); font-size:.84em; background:var(--surface-2);
  padding:1px 6px; border-radius:6px; border:1px solid var(--border)}
pre{font-family:var(--mono); font-size:.8rem; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); padding:16px 18px;
  overflow-x:auto; line-height:1.55; box-shadow:var(--shadow)}
pre code{background:none; border:none; padding:0}

.foot{margin-top:56px; padding-top:22px; border-top:1px solid var(--border);
  font-size:.82rem; color:var(--ink-muted)}

/* ---------- tooltip / lightbox ---------- */
#tip{position:fixed; pointer-events:none; z-index:50; background:var(--ink);
  color:var(--plane); font-family:var(--mono); font-size:.74rem; padding:6px 9px;
  border-radius:8px; opacity:0; transition:opacity .1s; max-width:240px; line-height:1.4}
#lightbox{position:fixed; inset:0; z-index:100; background:rgba(8,10,20,.92);
  display:none; align-items:center; justify-content:center; padding:2vh 2vw;
  cursor:zoom-out; overflow:auto}
#lightbox.open{display:flex}
#lightbox img{max-width:98vw; height:auto; background:#fff; border-radius:8px;
  box-shadow:0 8px 40px rgba(0,0,0,.5)}
#lightbox .hint{position:fixed; top:14px; right:18px; color:#fff;
  font-family:var(--mono); font-size:.8rem; opacity:.8}

/* ---------- learning layer ---------- */
h2::before{content:"Rozdział " counter(chapter) " " attr(data-rt)}
.term{border-bottom:1.5px dotted var(--accent); cursor:help; border-radius:2px}
.term:hover{background:var(--accent-soft)}

.quiz{background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--s-aqua); border-radius:var(--r);
  padding:18px 22px; margin:30px 0 8px; max-width:74ch; box-shadow:var(--shadow)}
.q-head{display:flex; align-items:center; gap:10px; margin-bottom:4px}
.q-chip{font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--s-aqua);
  background:color-mix(in srgb,var(--s-aqua) 12%,transparent);
  padding:4px 10px; border-radius:999px}
.q-state{font-size:.78rem; color:var(--ink-muted); margin-left:auto; font-family:var(--mono)}
.q-q{font-weight:600; font-size:1rem; margin:.3em 0 .7em}
.q-opts{display:grid; gap:8px}
.q-opt{font:inherit; font-size:.92rem; text-align:left; cursor:pointer;
  display:flex; gap:11px; align-items:baseline; line-height:1.5;
  background:var(--surface-2); color:var(--ink); border:1px solid var(--border);
  border-radius:10px; padding:10px 14px; transition:border-color .15s, background .15s}
.q-opt:hover:not(:disabled){border-color:var(--accent); background:var(--accent-soft)}
.q-opt:disabled{cursor:default; opacity:.9}
.q-key{font-family:var(--mono); font-size:.72rem; font-weight:600; flex:none;
  width:20px; height:20px; border-radius:6px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--border); color:var(--ink-muted)}
.q-opt.right{border-color:var(--good); background:var(--good-soft)}
.q-opt.right .q-key{background:var(--good); border-color:var(--good); color:#fff}
.q-opt.wrong{border-color:var(--crit); background:var(--crit-soft)}
.q-opt.wrong .q-key{background:var(--crit); border-color:var(--crit); color:#fff}
.q-why{margin-top:12px; font-size:.9rem; color:var(--ink-2);
  border-top:1px dashed var(--grid); padding-top:10px}

.rail-sum{padding:0 10px 4px; font-size:.72rem; color:var(--ink-muted); font-family:var(--mono)}
.rs-bar{height:5px; border-radius:3px; background:var(--surface-2);
  border:1px solid var(--border); overflow:hidden; margin-bottom:6px}
.rs-bar i{display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--s-aqua)); transition:width .4s}
#rail a.done .n{color:var(--good)}
#rail a.done .n::after{content:"✓"; margin-left:1px}
#rail a.quiz-ok::after{content:"★"; color:var(--warn); font-size:.7rem; margin-left:auto; padding-left:6px}

.resume{position:fixed; bottom:18px; right:18px; z-index:40;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:12px 14px; font-size:.85rem;
  display:flex; gap:10px; align-items:center; max-width:min(92vw,420px)}
.resume button{font:inherit; cursor:pointer; border-radius:8px; padding:5px 11px}
.resume .r-go{background:var(--accent); color:#fff; border:none; font-weight:600}
.resume .r-x{background:none; border:none; color:var(--ink-muted)}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease}
.rv.in{opacity:1; transform:none}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important; scroll-behavior:auto!important}
  .rv{opacity:1; transform:none}
}