/* kalkulatorproc.pl — arkusz stylow
   Uklad: lewa szyna nawigacji na desktopie, pasek wyniku przyklejony u gory kalkulatora,
   listy wierszowe zamiast kafelkow, stopka jednokolumnowa. */

:root{
  --ink:#16141f;
  --ink-2:#413c52;
  --muted:#6e6880;
  --line:#e3dfea;
  --bg:#faf9fc;
  --surface:#ffffff;
  --surface-2:#f4f1f8;
  --brand:#6d28d9;
  --brand-dark:#5b21b6;
  --brand-soft:#f0e9fd;
  --accent:#b45309;
  --accent-soft:#fdf3e3;
  --ok:#15803d;
  --warn:#b45309;
  --err:#be123c;
  --radius:10px;
  --rail:232px;
  --shadow:0 1px 2px rgba(22,20,31,.05), 0 8px 24px -12px rgba(22,20,31,.18);
}

[data-theme="dark"]{
  --ink:#f2f0f7;
  --ink-2:#c9c3d8;
  --muted:#948da8;
  --line:#2e293b;
  --bg:#141220;
  --surface:#1c1928;
  --surface-2:#241f33;
  --brand:#a78bfa;
  --brand-dark:#c4b5fd;
  --brand-soft:#2a2140;
  --accent:#fbbf24;
  --accent-soft:#33260f;
  --ok:#4ade80;
  --warn:#fbbf24;
  --err:#fb7185;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--bg);
  font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.wordmark,.readout-value{font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-.02em}
h1{font-size:clamp(1.85rem,1.2rem + 2.2vw,2.6rem);line-height:1.15;font-weight:700}
h2{font-size:clamp(1.3rem,1.05rem + 1vw,1.65rem);line-height:1.25;font-weight:650;margin-top:2.2em;margin-bottom:.5em}
h3{font-size:1.1rem;font-weight:650;margin-top:1.6em;margin-bottom:.4em}
p{margin:0 0 1em}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:4px}
img{max-width:100%;height:auto}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--brand);color:#fff;padding:10px 16px;border-radius:6px}

/* ---------- pasek gorny ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:60px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);flex:none}
.brand:hover{text-decoration:none}
.glyph{
  width:29px;height:29px;flex:none;display:grid;place-items:center;
  background:var(--brand);color:#fff;border-radius:8px;
  font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;
}
.wordmark{font-size:1.05rem}
.wordmark span{color:var(--muted);font-weight:500}
.topnav{margin-left:auto;display:flex;align-items:center;gap:2px}
.topnav a{
  color:var(--ink-2);font-size:.93rem;font-weight:500;
  padding:7px 12px;border-radius:7px;
}
.topnav a:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)}
.topnav a[aria-current]{color:var(--brand);background:var(--brand-soft)}
.icon-btn{
  background:none;border:1px solid var(--line);color:var(--ink-2);
  width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:.95rem;
  display:grid;place-items:center;flex:none;
}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.menu-btn{display:none;font-family:inherit;font-size:.9rem;width:auto;padding:0 12px;gap:6px}

/* ---------- uklad z lewa szyna ---------- */
.layout{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:40px;align-items:start;padding:34px 0 60px}
.rail{position:sticky;top:80px;font-size:.9rem}
.rail-title{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:600;margin:0 0 8px 10px;
}
.rail nav{display:flex;flex-direction:column;gap:1px;margin-bottom:22px}
.rail nav a{
  color:var(--ink-2);padding:6px 10px;border-radius:6px;
  border-left:2px solid transparent;
}
.rail nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.rail nav a[aria-current]{
  color:var(--brand);font-weight:600;
  background:var(--brand-soft);border-left-color:var(--brand);
}
.full{padding:34px 0 60px}

/* ---------- kalkulator ---------- */
.tool{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.readout{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
  padding:20px 22px;
  background:linear-gradient(180deg,var(--brand-soft),transparent);
  border-bottom:1px solid var(--line);
}
.readout-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;width:100%}
.readout-value{
  font-size:clamp(2rem,1.4rem + 2.4vw,2.9rem);font-weight:700;color:var(--brand);
  font-variant-numeric:tabular-nums;line-height:1.05;
}
.readout-note{font-size:.9rem;color:var(--muted)}
.readout.is-error .readout-value{color:var(--err);font-size:1.5rem}

.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.tabs button{
  flex:none;background:none;border:none;border-bottom:2.5px solid transparent;
  font:inherit;font-size:.9rem;font-weight:500;color:var(--muted);
  padding:11px 16px;cursor:pointer;white-space:nowrap;
}
.tabs button:hover{color:var(--ink);background:var(--surface-2)}
.tabs button[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}

.panel{padding:22px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:.84rem;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:.78rem;color:var(--muted);font-weight:400}
input[type=number],input[type=text],select,textarea{
  font:inherit;font-size:1rem;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:8px;padding:9px 11px;width:100%;
  font-variant-numeric:tabular-nums;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
input[type=range]{width:100%;accent-color:var(--brand)}

.btn{
  font:inherit;font-weight:600;font-size:.94rem;cursor:pointer;
  border-radius:8px;padding:10px 18px;border:1.5px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:none;border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}

.steps{
  margin-top:18px;padding:14px 16px;background:var(--surface-2);
  border-radius:8px;font-size:.9rem;
}
.steps b{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:6px}
.steps code{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.88em;
  color:var(--ink);background:var(--surface);padding:1px 5px;border-radius:4px;border:1px solid var(--line);
}
.steps ol{margin:0;padding-left:20px}
.steps li{margin:3px 0}

/* ---------- listy wierszowe zamiast kafelkow ---------- */
.rows{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.row{display:flex;align-items:flex-start;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
a.row{color:inherit}
a.row:hover{background:var(--surface-2);text-decoration:none}
.row-mark{
  flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;
}
.row-body{min-width:0;flex:1}
.row-body b{display:block;font-weight:600;font-size:1rem;margin-bottom:1px}
.row-body span{color:var(--muted);font-size:.89rem}
.row-go{color:var(--muted);flex:none;align-self:center}
a.row:hover .row-go{color:var(--brand)}

/* ---------- tresc ---------- */
.prose{max-width:none}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:22px}
.prose li{margin:.3em 0}
.prose>h2:first-child{margin-top:0}
.lede{font-size:1.08rem;color:var(--ink-2);margin-bottom:1.4em}

.note{
  border-left:3px solid var(--brand);background:var(--brand-soft);
  padding:13px 16px;border-radius:0 8px 8px 0;margin:1.3em 0;font-size:.95rem;
}
.note.warn{border-left-color:var(--warn);background:var(--accent-soft)}
.note b{display:block;margin-bottom:2px}

.tbl{overflow-x:auto;margin:1.3em 0;border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:.93rem;background:var(--surface)}
th,td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--surface-2);font-weight:650;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

.faq{border-top:1px solid var(--line);margin-top:1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:13px 26px 13px 0;font-weight:600;font-size:.98rem;
  list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:11px;
  color:var(--brand);font-size:1.25rem;font-weight:400;line-height:1;
}
.faq details[open] summary::after{content:"−"}
.faq details>div{padding:0 0 14px;color:var(--ink-2);font-size:.95rem}
.faq details>div>p:last-child{margin-bottom:0}

.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--brand)}
.eyebrow{
  display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;
  font-weight:650;color:var(--brand);background:var(--brand-soft);
  padding:3px 9px;border-radius:999px;margin-bottom:10px;
}
.page-head{margin-bottom:26px}
.page-head p{color:var(--ink-2);font-size:1.06rem;margin-top:.5em}

.hero{padding:44px 0 30px;border-bottom:1px solid var(--line)}
.hero h1{max-width:15ch}
.hero p{font-size:1.1rem;color:var(--ink-2);max-width:56ch;margin-top:.6em}

.stat-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.stat{
  border:1px solid var(--line);border-radius:8px;padding:9px 14px;background:var(--surface);
  font-size:.86rem;color:var(--muted);
}
.stat b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.2rem;color:var(--ink);font-variant-numeric:tabular-nums}

.related{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--line)}
.related b{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips a{
  font-size:.87rem;padding:5px 12px;border:1px solid var(--line);
  border-radius:999px;color:var(--ink-2);background:var(--surface);
}
.chips a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);text-decoration:none}

/* ---------- stopka: jedna kolumna, wysrodkowana ---------- */
footer{border-top:1px solid var(--line);background:var(--surface);padding:36px 0 30px;margin-top:20px}
.foot{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.foot-brand{display:flex;align-items:center;gap:8px;font-weight:700}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;font-size:.9rem}
.foot-links a{color:var(--ink-2);padding:0 12px;border-right:1px solid var(--line);line-height:1.1}
.foot-links a:last-child{border-right:none}
.foot-links a:hover{color:var(--brand)}
.foot-note{font-size:.83rem;color:var(--muted);max-width:60ch}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .layout{grid-template-columns:1fr;gap:0;padding-top:22px}
  .rail{
    position:fixed;inset:60px 0 auto;z-index:39;display:none;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:14px 20px 18px;max-height:calc(100vh - 60px);overflow:auto;
    box-shadow:var(--shadow);
  }
  .rail.open{display:block}
  .menu-btn{display:inline-flex}
  .topnav{display:none}
  .topnav.open{
    display:flex;flex-direction:column;align-items:stretch;
    position:fixed;inset:60px 0 auto;background:var(--surface);
    border-bottom:1px solid var(--line);padding:10px 14px 16px;gap:2px;z-index:39;
  }
  .topnav.open a{padding:10px 12px}
}
@media (max-width:560px){
  body{font-size:16px}
  .panel,.readout{padding:16px}
  .row{padding:13px 14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .topbar,.rail,footer,.btn-row,.tabs{display:none}
  body{background:#fff}
}

/* ---------- GEO: blok "W skrócie" (dodane 2026-08-01) ---------------------
   Odpowiedź podana wprost, na samej górze strony — to ten fragment cytują
   wyszukiwarki generatywne. Styl korzysta ze zmiennych motywu tej witryny,
   więc działa w wersji jasnej i ciemnej bez osobnych reguł.                */
.geo-tldr {
  margin: 26px 0 30px;
  padding: 20px 24px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-left: 5px solid var(--brand, #2563eb);
  border-radius: 12px;
}
.geo-tldr-head {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand, #2563eb);
}
.geo-tldr-answer {
  margin: 0 0 12px;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink, #111827);
}
.geo-tldr-list { margin: 0; padding-left: 20px; }
.geo-tldr-list li {
  margin: 5px 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--muted, #4b5563);
}
@media (max-width: 640px) {
  .geo-tldr { padding: 16px 18px; }
  .geo-tldr-answer { font-size: 1rem; }
}

/* ---------- Komponenty autopilota tresci (ac-*) --------------------------
   Uzywane przez podstrony dokladane automatycznie co dwa dni. Kolory,
   typografia i zaokraglenia biora sie ze zmiennych motywu tej witryny,
   wiec komponent wyglada u siebie w kazdym z pieciu serwisow.            */
/* Szerokosc i wysrodkowanie ustawiamy tutaj, a nie liczymy na klase kontenera
   witryny: czesc serwisow uzywa `.container`, czesc `.wrap`, a cwiczwdomu.pl
   nie ma zadnej z nich. Komponent musi wygladac poprawnie wszedzie. */
.ac-page { max-width: 860px; margin-left: auto; margin-right: auto;
           padding: 26px 20px 56px; }
.ac-crumbs { font-size: .86rem; color: var(--muted, #64748b); margin: 0 0 18px; }
.ac-crumbs a { color: inherit; }
.ac-kicker {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--brand, #2563eb); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.ac-page h1 { margin: 14px 0 10px; line-height: 1.18; }
.ac-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .86rem;
           color: var(--muted, #64748b); margin-bottom: 6px; }
.ac-toc { margin: 26px 0; padding: 18px 22px; border: 1px solid var(--line, #e5e7eb);
          border-radius: 12px; background: var(--surface, #fff); }
.ac-toc strong { display: block; margin-bottom: 8px; font-size: .82rem;
                 letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #64748b); }
.ac-toc ol { margin: 0; padding-left: 20px; }
.ac-toc li { margin: 4px 0; }
.ac-page h2 { margin: 34px 0 12px; line-height: 1.28; }
.ac-page p, .ac-page li { line-height: 1.72; }
.ac-note { margin: 22px 0; padding: 16px 20px; border-radius: 12px;
           background: var(--surface, #fff); border: 1px solid var(--line, #e5e7eb);
           border-left: 5px solid var(--brand, #2563eb); }
.ac-faq { margin: 10px 0; border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
          background: var(--surface, #fff); overflow: hidden; }
.ac-faq > summary { cursor: pointer; padding: 15px 20px; font-weight: 600;
                    list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ac-faq > summary::-webkit-details-marker { display: none; }
.ac-faq > summary::after { content: "+"; font-weight: 700; color: var(--brand, #2563eb); }
.ac-faq[open] > summary::after { content: "\2013"; }
.ac-faq > div { padding: 0 20px 16px; color: var(--muted, #4b5563); }
.ac-src { margin-top: 30px; font-size: .84rem; color: var(--muted, #64748b); }

/* kalkulator */
.ac-calc { margin: 26px 0; padding: 22px; border-radius: 14px;
           border: 1px solid var(--line, #e5e7eb); background: var(--surface, #fff); }
.ac-field { margin-bottom: 14px; }
.ac-field label { display: block; margin-bottom: 5px; font-size: .88rem; font-weight: 600; }
.ac-field input, .ac-field select {
  width: 100%; padding: 11px 13px; font-size: 1rem; font: inherit;
  border: 1px solid var(--line, #cbd5e1); border-radius: 10px;
  background: var(--surface, #fff); color: var(--ink, #111827);
}
.ac-btn { width: 100%; padding: 13px 18px; border: 0; border-radius: 10px; cursor: pointer;
          background: var(--brand, #2563eb); color: #fff; font-size: 1rem; font-weight: 700; }
.ac-out { margin-top: 18px; padding: 18px; border-radius: 12px;
          background: var(--surface, #fff); border: 1px dashed var(--line, #cbd5e1); }
.ac-out-main { font-size: 1.9rem; font-weight: 800; color: var(--brand, #2563eb); line-height: 1.2; }
.ac-out-label { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase;
                color: var(--muted, #64748b); }
.ac-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0;
          border-top: 1px solid var(--line, #e5e7eb); font-size: .95rem; }
.ac-row b { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ac-calc { padding: 16px; } .ac-out-main { font-size: 1.5rem; } }