/* Spis modulow, uklad split i makieta panelu. Reszta ze site.css.
   Kolory makiety: --pg-* (light w :root, dark przy data-theme). */

:root{
  --pg-toc-bg:#ffffff;
  --pg-toc-fg:#3b4457;
  --pg-toc-line:rgba(10,20,40,.10);
  --pg-toc-hover-fg:#0b1220;
  --pg-toc-hover-bg:rgba(0,87,255,.08);
  --pg-toc-hover-line:rgba(0,87,255,.35);
  --pg-win-top:#ffffff;
  --pg-win-bot:#f7f9fd;
  --pg-win-line:rgba(10,20,40,.10);
  --pg-win-shadow:0 18px 50px rgba(15,25,50,.10);
  --pg-bar-line:rgba(10,20,40,.08);
  --pg-bar-fg:#5c6579;
  --pg-row-line:rgba(10,20,40,.08);
  --pg-row-fg:#3b4457;
  --pg-row-title:#0b1220;
  --pg-pill-bg:rgba(10,20,40,.06);
  --pg-pill-fg:#1f2736;
  --pg-ok-bg:rgba(11,107,63,.12);
  --pg-ok-fg:#0b6b3f;
  --pg-wait-bg:rgba(138,75,0,.12);
  --pg-wait-fg:#8a4b00;
  --pg-dot:#c5cad6;
}
:root[data-theme="dark"]{
  --pg-toc-bg:#12161f;
  --pg-toc-fg:#c3c8d3;
  --pg-toc-line:rgba(255,255,255,.08);
  --pg-toc-hover-fg:#ffffff;
  --pg-toc-hover-bg:rgba(0,87,255,.16);
  --pg-toc-hover-line:rgba(153,186,255,.3);
  --pg-win-top:#161b26;
  --pg-win-bot:#0e1219;
  --pg-win-line:rgba(255,255,255,.08);
  --pg-win-shadow:0 18px 40px rgba(0,0,0,.28);
  --pg-bar-line:rgba(255,255,255,.07);
  --pg-bar-fg:#aeb4c2;
  --pg-row-line:rgba(255,255,255,.07);
  --pg-row-fg:#c3c8d3;
  --pg-row-title:#ffffff;
  --pg-pill-bg:rgba(255,255,255,.08);
  --pg-pill-fg:#d7dbe4;
  --pg-ok-bg:rgba(77,255,159,.14);
  --pg-ok-fg:#c8ffe4;
  --pg-wait-bg:rgba(251,188,4,.14);
  --pg-wait-fg:#ffe7a3;
  --pg-dot:#33363d;
}

.fn-layout{display:grid;gap:clamp(28px,4vw,48px);min-width:0}
.fn-toc{display:flex;gap:8px;max-width:100%;margin:0;padding:0 0 4px;overflow-x:auto;scrollbar-width:thin}
.fn-toc a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--pg-toc-line);border-radius:999px;background:var(--pg-toc-bg);color:var(--pg-toc-fg);font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap}
.fn-toc a:hover,.fn-toc a:focus-visible{color:var(--pg-toc-hover-fg);border-color:var(--pg-toc-hover-line);background:var(--pg-toc-hover-bg)}
@media (min-width:1100px){
  .fn-layout{grid-template-columns:220px minmax(0,1fr);align-items:start}
  .fn-toc{position:sticky;top:92px;flex-direction:column;max-height:calc(100dvh - 110px);padding:0 4px 0 0;overflow:auto}
  .fn-toc a{white-space:normal}
}
.fn-modules{display:flex;flex-direction:column;gap:clamp(48px,6vw,88px);min-width:0}
.fn-mod,.fn-extra{scroll-margin-top:96px;min-width:0}
.fn-copy,.fn-ui{flex:1 1 300px;min-width:0;max-width:100%}
.fn-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.fn-copy .fe-h2,.fn-extra>.fe-h2{font-size:clamp(32px,3.4vw,52px);line-height:1.05}
.fn-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.fn-list li{position:relative;padding-left:18px;color:var(--fe-text);font-size:16px;line-height:1.45}
.fn-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--fe-blue)}
.fn-more{margin:0;font-weight:600}
.fn-win{border:1px solid var(--pg-win-line);border-radius:22px;background:linear-gradient(180deg,var(--pg-win-top),var(--pg-win-bot));overflow:hidden;box-shadow:var(--pg-win-shadow)}
.fn-win__bar{display:flex;align-items:center;gap:6px;height:42px;padding:0 14px;border-bottom:1px solid var(--pg-bar-line);color:var(--pg-bar-fg);font-size:12px;font-weight:600}
.fn-win__bar i{width:8px;height:8px;border-radius:50%;background:var(--pg-dot)}
.fn-win__bar i:nth-child(1){background:#ff5f57}
.fn-win__bar i:nth-child(2){background:#febc2e}
.fn-win__bar i:nth-child(3){background:#28c840}
.fn-win__bar span{margin-left:8px}
.fn-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) auto;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--pg-row-line);color:var(--pg-row-fg);font-size:13px}
.fn-row:last-child{border-bottom:0}
.fn-row b{min-width:0;overflow:hidden;color:var(--pg-row-title);font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.fn-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fn-pill{justify-self:end;padding:3px 8px;border-radius:999px;background:var(--pg-pill-bg);color:var(--pg-pill-fg);font-size:12px;font-weight:600}
.fn-pill--ok{background:var(--pg-ok-bg);color:var(--pg-ok-fg)}
.fn-pill--wait{background:var(--pg-wait-bg);color:var(--pg-wait-fg)}
.fn-extra{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.fn-extra .fe-p{max-width:68ch}
.fn-extra .fe-grid{width:100%}
@media (max-width:799px){
  .fn-mod,.fn-mod--flip{flex-direction:column}
  .fn-copy,.fn-ui{flex-basis:auto;width:100%}
}
@media (min-width:800px){
  .fn-mod--flip{flex-direction:row-reverse}
}