/* Wspólna, spokojna przestrzeń dla aplikacji i modułu osadzonego w portalu. */
:root { --bg:#f5f7f4; --bg-alt:#fafbf9; --surface-2:#f0f4ef; --text:#233b32; --muted:#60726a; --accent:#237653; --accent-2:#165a3d; --line:#dfe7df; --panel-w:360px; --top-h:72px; }
.top, body.is-osadzone .top { grid-template-columns:auto 1fr minmax(180px,260px) auto; gap:20px; padding:0 24px; }
.brand b { font-size:20px; white-space:nowrap; }
.brand small { letter-spacing:.03em; font-family:var(--font-body); text-transform:none; margin-top:5px; }
.tryby { background:transparent; border:0; gap:5px; padding:0; }
.tryby button { padding:10px 13px; font-size:13px; }
.tryby button i { display:none; }
.tryby button[aria-selected="true"] { background:#eaf3ec; color:#185a3e; box-shadow:none; }
.tryby details { position:relative; }
.tryby summary { padding:10px 12px; cursor:pointer; color:var(--muted); border-radius:8px; }
.tryby details[open] > div { position:absolute; top:44px; right:0; width:220px; padding:8px; background:white; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 40px #18352822; display:grid; z-index:45; }
.tryby details button { width:100%; text-align:left; }
.zapis { font-size:9px; }
.pasek { background:#fff; min-height:42px; padding:8px 24px; font-size:12px; }
/* Podpowiedź nad sceną bywa dłuższa w jednym sposobie przeglądania niż w drugim,
   więc pasek rósł o wiersz, a razem z nim zjeżdżał w dół przełącznik „Gałęzie /
   Mapa całości”. Kliknięcie tuż po przełączeniu trafiało wtedy obok przycisku i
   wyglądało to tak, jakby przyciski nie działały. Stała wysokość to kończy. */
body[data-tryb="przegladaj"] .pasek, body[data-tryb="wiedza"] .pasek { min-height:70px; }
.scena { background:#f5f7f4; min-width:0; }
.panel { background:#fff; border-left:1px solid var(--line); }
.panel__tresc { padding:26px; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline:3px solid #35875e; outline-offset:3px; }
.explorer-switch { position:absolute; top:14px; left:24px; right:24px; display:flex; justify-content:space-between; gap:10px; z-index:5; }
.explorer-switch > div { display:flex; padding:4px; border:1px solid var(--line); background:white; border-radius:12px; box-shadow:0 3px 12px #18352805; }
.explorer-switch button { border:0; background:white; padding:8px 14px; border-radius:8px; font-size:12px; color:var(--muted); }
.explorer-switch button[aria-pressed="true"] { background:#eaf3ec; color:#1c6343; font-weight:600; }
body.explorer-on { grid-template-columns:minmax(0,1fr) 0; }
body.explorer-on .panel, body.explorer-on #plotno, body.explorer-on .narzedzia, body.explorer-on .legenda, body.explorer-on .statusy, body.explorer-on #panelUchwyt, body.explorer-on #tooltip { display:none; }
body.explorer-on.explorer-detail { grid-template-columns:minmax(0,1fr) var(--panel-w); }
body.explorer-on.explorer-detail .panel { display:block; }
body.explorer-on.explorer-detail #panelUchwyt { display:block; }
body.explorer-on.explorer-detail.panel-schowany { grid-template-columns:minmax(0,1fr) 0; }
body.explorer-on.explorer-detail.panel-schowany .panel { display:none; }
#eksplorator { position:absolute; inset:70px 0 0; overflow:auto; padding:8px 32px 40px; scrollbar-gutter:stable; }
.branch-path { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:24px; font-size:12px; }
.branch-path button { background:none; border:0; padding:5px 7px; border-radius:5px; color:var(--muted); }
.branch-path button:hover { background:#e7eee6; color:#185a3e; }
.branch-path button[aria-current] { color:#215f42; font-weight:600; }
.branch-path span { color:#a6b4a9; }
.branch-hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr); gap:40px; align-items:center; margin-bottom:32px; }
.branch-hero h1 { font:500 clamp(26px,2.8vw,39px)/1.17 var(--font-display); letter-spacing:-.035em; margin:8px 0 15px; max-width:680px; }
.branch-hero h1:focus { outline:none; }
.branch-hero p:not(.eyebrow) { max-width:610px; color:var(--muted); margin:0; line-height:1.7; font-size:13px; }
.branch-hero .eyebrow { color:#467c59; font:600 10px var(--font-body); letter-spacing:.14em; }
.knowledge-summary { display:flex; align-items:center; gap:20px; padding:22px; border:1px solid #d6e4d6; border-radius:20px; background:#edf4ea; }
.knowledge-summary b { font-size:13px; }
.knowledge-summary p { font-size:12px!important; margin:5px 0!important; }
.knowledge-summary small { color:#60726a; font-size:11px; line-height:1.6; display:block; }
.knowledge-ring { width:92px; height:92px; flex-shrink:0; border-radius:50%; background:conic-gradient(#2c8858 calc(var(--progress)*1%),#d7e5d4 0); display:grid; place-items:center; position:relative; }
.knowledge-ring:before { content:''; position:absolute; inset:7px; border-radius:50%; background:#edf4ea; }
.knowledge-ring strong { position:relative; font-size:24px; font-weight:500; letter-spacing:-.04em; }
.branch-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.branch-heading h2 { font:600 16px var(--font-body); margin:0; }
.branch-heading h2 span { display:inline-block; font-size:11px; margin-left:8px; padding:4px 8px; border-radius:6px; background:#e7ede5; color:#52694e; }
.branch-heading > span { font-size:11px; color:var(--muted); }
.branch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr)); gap:16px; align-items:stretch; }
.branch-card { background:white; border:1px solid #dce5dc; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s,box-shadow .15s; }
.branch-card:hover { border-color:#9bb59c; box-shadow:0 6px 22px #294b3110; }
.branch-open { background:none; border:0; padding:22px 22px 16px; width:100%; text-align:left; flex:1; }
.branch-type { display:flex; align-items:center; justify-content:space-between; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.branch-type:before { content:''; width:7px; height:7px; border-radius:50%; background:var(--branch); margin-right:8px; }
.branch-type span { margin-left:auto; font-size:20px; color:#7b927c; }
.branch-open h2 { font:500 22px/1.25 var(--font-display); letter-spacing:-.025em; margin:17px 0 12px; overflow-wrap:anywhere; }
.branch-open p { color:var(--muted); font-size:12px; line-height:1.7; margin:0 0 16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.branch-foot { display:block; color:#59795e; font-size:11px; }
.branch-knowledge { margin:0 22px; padding:14px 0 18px; border-top:1px solid #edf0ea; }
.branch-knowledge > div { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--muted); }
.branch-knowledge strong { color:#2d6746; font-size:17px; font-weight:500; }
.branch-knowledge meter { display:block; width:100%; height:7px; margin:9px 0; appearance:none; background:#edf1eb; border-radius:8px; overflow:hidden; }
.branch-knowledge meter::-webkit-meter-bar { background:#edf1eb; border:0; border-radius:8px; }
.branch-knowledge meter::-webkit-meter-optimum-value { background:#38875b; border-radius:8px; }
.branch-knowledge meter::-moz-meter-bar { background:#38875b; }
.branch-knowledge small { color:var(--muted); font-size:10px; }
.branch-card.is-known { background:#eff9f0; border-color:#75ae7e; box-shadow:0 0 18px #77b77a18; }
.branch-check { margin:0 22px 18px; border:1px solid #c5d9c6; background:white; color:#26613d; border-radius:8px; padding:10px; font-size:12px; text-align:left; }
.branch-check[aria-pressed="true"] { background:#dceedd; border-color:#9fc5a3; }
.branch-text { background:none; border:0; padding:12px 0 0; color:#26714a; font-size:12px; }
.knowledge-note { margin-top:26px; padding:20px 24px; border:1px dashed #ccd9cc; border-radius:12px; color:var(--muted); font-size:12px; }
.knowledge-note b { color:#36553c; }
.knowledge-note p { line-height:1.7; margin:6px 0 0; max-width:980px; }
body.legenda-schowana .legenda { background:white; border-radius:9px; }
body[data-tryb="wiedza"] .statusy { display:none; }
body:not([data-tryb="przegladaj"]) .narzedzia .grupa:first-child { display:none; }
#btnEtykiety { display:none; }
.statusy { top:auto; bottom:64px; max-width:calc(100% - 50px); }
.branch-check:disabled { cursor:default; }
@media (max-width:1100px) {
  :root { --top-h:112px; }
  .top, body.is-osadzone .top { grid-template-columns:1fr minmax(180px,300px) auto; grid-template-rows:56px 48px; gap:0 15px; padding:0 18px; }
  .tryby { grid-row:2; grid-column:1/-1; justify-self:start; overflow:visible; }
  .szukaj { grid-row:1; grid-column:2; }
  .top__akcje { grid-row:1; grid-column:3; }
  .zapis, .brand small { display:none; }
  .branch-hero { grid-template-columns:1fr; gap:22px; }
  .knowledge-summary { padding:16px 20px; }
  .knowledge-ring { width:70px; height:70px; }
}
@media (max-width:640px) {
  :root { --top-h:154px; }
  .top, body.is-osadzone .top { grid-template-columns:1fr auto; grid-template-rows:52px 50px 48px; padding:0 12px; }
  .brand b { font-size:18px; }
  .top__akcje { grid-column:2; }
  .szukaj { grid-row:2; grid-column:1/-1; }
  .szukaj input { min-height:40px; }
  .tryby { grid-row:3; gap:0; width:100%; justify-content:space-between; }
  .tryby button, .tryby summary { padding:10px 8px; font-size:11px; }
  #btnOkno { display:none; }
  .pasek { padding:8px 12px; font-size:11px; }
  #paskLiczby { display:none; }
  #eksplorator { padding:6px 16px 28px; }
  .explorer-switch { left:16px; right:16px; }
  .explorer-switch button { padding:9px 10px; }
  .explorer-switch > button { max-width:130px; font-size:10px; }
  .branch-path { margin-bottom:16px; }
  .branch-hero { margin-bottom:24px; }
  .branch-heading > span { display:none; }
  .branch-grid { grid-template-columns:1fr; }
  body.explorer-on.explorer-detail { grid-template-columns:minmax(0,1fr) 0; }
  body.explorer-on.explorer-detail .panel { position:fixed; inset:var(--top-h) 0 0 12%; width:auto; z-index:15; box-shadow:-20px 0 50px #203d3025; }
  body.explorer-on.explorer-detail #panelUchwyt { position:fixed; right:88%; top:50%; z-index:16; }
  body.explorer-on.explorer-detail.panel-schowany #panelUchwyt { right:0; }
}
@media (prefers-reduced-motion:reduce) { *, *:before, *:after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }