/* ============================================================
   CentrumKalkulatorow.pl — "warsztat techniczny" design system
   Paleta wzieta wprost z ilustracji serwisu (rendery 3D): granat #001830,
   turkus #30c0cc, blekit #245490, zloto #f0c060, chlodne biele #f0f0f0.
   Konstrukcja zostaje ta sama co w wersji papierowej — twarde ramki,
   przesuniete cienie, pieczatka — zmienia sie tylko kolor i krój pisma.
   Nazwy zmiennych --card/--line/--ink/--ink-soft/--teal sa zapisane w
   VARS_CK w sites.py (autopilot generuje po nich swoje bloki) i nie wolno
   ich przemianowac bez zmiany w toolkicie. ============================================================ */

:root{
  --paper: #e9eff7;
  --paper-2: #dae3f0;
  --card: #ffffff;
  --ink: #0c1c34;
  --ink-soft: #3e5674;
  --ink-faint: #8698b2;
  --line: #0c1c34;
  --brand: #14509b;
  --brand-ink: #ffffff;
  --teal: #0e727a;   /* turkus #30c0cc z renderow, przyciemniony do AA (4.9:1 na tle) */
  --teal-ink: #ffffff;
  --mint: #147a5c;
  --mint-ink: #ffffff;
  --gold: #c9931b;
  --gold-ink: #0c1c34;
  --violet: #5350bd;
  --violet-ink: #ffffff;
  --sky: #2a6fbe;
  --sky-ink: #ffffff;
  --amber: #a75f22;
  --amber-ink: #ffffff;
  --slate: #45607a;
  --slate-ink: #ffffff;

  --shadow-1: 5px 5px 0 var(--ink);
  --shadow-2: 8px 8px 0 var(--ink);
  --shadow-press: 2px 2px 0 var(--ink);
  --radius: 3px;
  --radius-badge: 999px;

  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Roboto Mono", "Liberation Mono", monospace;

  color-scheme: light;
}

/* Ciemny motyw to wprost tlo ilustracji: granat #001830 podniesiony do
   #0a1730, zeby tekst na nim nie wibrowal, i turkus #3fd0dc z renderow. */
:root[data-theme="dark"]{
  --paper: #0a1730;
  --paper-2: #0f2040;
  --card: #12243f;
  --ink: #e9eff7;
  --ink-soft: #a7bcd6;
  --ink-faint: #5f7699;
  --line: #e9eff7;
  --brand: #7ab6f5;
  --brand-ink: #0a1730;
  --teal: #3fd0dc;
  --teal-ink: #0a1730;
  --mint: #55d6b0;
  --mint-ink: #0a1730;
  --gold: #f0c060;
  --gold-ink: #0a1730;
  --violet: #a9a6f2;
  --violet-ink: #0a1730;
  --sky: #86c2f7;
  --sky-ink: #0a1730;
  --amber: #e2a765;
  --amber-ink: #0a1730;
  --slate: #a3b6cb;
  --slate-ink: #0a1730;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #0a1730;
    --paper-2: #0f2040;
    --card: #12243f;
    --ink: #e9eff7;
    --ink-soft: #a7bcd6;
    --ink-faint: #5f7699;
    --line: #e9eff7;
    --brand: #7ab6f5;
    --brand-ink: #0a1730;
    --teal: #3fd0dc;
    --teal-ink: #0a1730;
    --mint: #55d6b0;
    --mint-ink: #0a1730;
    --gold: #f0c060;
    --gold-ink: #0a1730;
    --violet: #a9a6f2;
    --violet-ink: #0a1730;
    --sky: #86c2f7;
    --sky-ink: #0a1730;
    --amber: #e2a765;
    --amber-ink: #0a1730;
    --slate: #a3b6cb;
    --slate-ink: #0a1730;
    color-scheme: dark;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:hidden; -webkit-text-size-adjust:100%; }
body{
  margin:0; overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.65;
  background-image:
    radial-gradient(var(--ink-faint) 0.6px, transparent 0.6px);
  background-size:22px 22px;
  background-attachment:fixed;
  opacity:1;
}
body{ transition:background-color .25s ease, color .25s ease; }

img{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover{ color:var(--teal); }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.14; margin:0 0 .5em; letter-spacing:-0.022em; }
h1{ font-size:clamp(2rem,6vw,3.4rem); }
h2{ font-size:clamp(1.5rem,3.4vw,2.2rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; }
.container{ max-width:1180px; margin:0 auto; padding:0 20px; }
.mono{ font-family:var(--font-mono); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-mono); font-weight:700; font-size:.92rem; letter-spacing:.02em;
  padding:13px 22px; border:2.5px solid var(--line); border-radius:var(--radius);
  background:var(--card); color:var(--ink); cursor:pointer;
  box-shadow:var(--shadow-1); transition:transform .12s ease, box-shadow .12s ease;
  text-decoration:none; user-select:none;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-2); color:var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:var(--shadow-press); }
.btn-primary{ background:var(--brand); color:var(--brand-ink); }
.btn-teal{ background:var(--teal); color:var(--teal-ink); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:.8rem; box-shadow:var(--shadow-press); }
.btn-sm:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }

/* ---------- stamp logo ---------- */
.stamp{
  width:46px; height:46px; border-radius:50%;
  border:2.5px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:800; font-size:1rem;
  color:var(--brand); transform:rotate(-9deg); flex:none;
  background:var(--card);
}
.brand{
  display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:1.18rem; white-space:nowrap;
}
.brand .sub{ color:var(--ink-faint); font-weight:400; }

/* ---------- navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:60;
  background:var(--paper); border-bottom:2.5px solid var(--line);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:14px; padding-bottom:14px; }
.nav-links{ display:flex; align-items:center; gap:26px; font-family:var(--font-mono); font-size:.86rem; }
.nav-links a{ color:var(--ink); text-decoration:none; padding:4px 2px; border-bottom:2px solid transparent; }
.nav-links a:hover, .nav-links a.active{ border-bottom-color:var(--brand); color:var(--brand); }
.nav-links a.nav-cta{
  background:var(--ink); color:var(--paper); border:2px solid var(--line); border-bottom:2px solid var(--line);
  padding:8px 14px; border-radius:var(--radius); box-shadow:var(--shadow-press);
}
.nav-links a.nav-cta:hover{ color:var(--paper); border-bottom-color:var(--line); }
.nav-right{ display:flex; align-items:center; gap:10px; }
.theme-toggle,.nav-toggle{
  width:40px; height:40px; border:2.5px solid var(--line); border-radius:var(--radius);
  background:var(--card); cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-press); font-size:1.05rem;
}
.nav-toggle{ display:none; flex-direction:column; gap:4px; }
.nav-toggle span{ width:18px; height:2.5px; background:var(--ink); display:block; }

@media (max-width:920px){
  .nav-links{
    position:fixed; inset:69px 0 0 0; z-index:55;
    background:var(--paper); border-top:2.5px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:10px 20px 30px; font-size:1.05rem;
    transform:translateX(100%); transition:transform .28s ease;
    overflow-y:auto;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ width:100%; padding:15px 2px; border-bottom:1px solid var(--paper-2); }
  .nav-links a.nav-cta{ margin-top:14px; width:auto; }
  .nav-toggle{ display:flex; }
}

/* ---------- hero / sections ---------- */
.section{ padding:64px 0; }
.section-tight{ padding:40px 0 8px; }
.hero{ padding:56px 0 30px; position:relative; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.78rem;
  font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--teal);
  background:var(--card); border:2px solid var(--line); padding:6px 12px; border-radius:var(--radius-badge);
  box-shadow:var(--shadow-press); margin-bottom:16px; transform:rotate(-1.2deg);
}
.lead{ font-size:1.15rem; color:var(--ink-soft); max-width:640px; }
.section-head{ text-align:center; margin:0 auto 40px; max-width:760px; }
.section-head.left{ text-align:left; margin:0 0 32px; }

.breadcrumbs{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-faint); margin-bottom:18px; }
.breadcrumbs a{ color:var(--ink-faint); }
.breadcrumbs a:hover{ color:var(--brand); }

/* torn-tape accent */
.tape{
  position:absolute; background:rgba(234,180,40,0.55); height:30px; width:110px;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
  border-left:1px dashed rgba(32,28,21,.35); border-right:1px dashed rgba(32,28,21,.35);
}

/* ---------- grids & cards ---------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:920px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--card); border:2.5px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow-1); position:relative;
}
.card-corner::after{
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 22px 22px 0; border-color:transparent var(--paper) transparent transparent;
  filter:drop-shadow(-1px 1px 0 var(--line));
}
.card-icon{ font-size:1.6rem; margin-bottom:10px; }

.calc-card{
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:10px;
  transition:transform .14s ease, box-shadow .14s ease;
  border-radius:18px;
}
.calc-card:hover{ transform:translate(-3px,-3px); box-shadow:var(--shadow-2); color:var(--ink); }
.calc-card .tag{ align-self:flex-start; }
.calc-card h3{ margin:2px 0 0; }
.calc-card p{ color:var(--ink-soft); font-size:.94rem; margin:0; }

/* per-category tile color */
.calc-card:has(.tag-finanse){ border-color:var(--teal); background:color-mix(in srgb, var(--teal) 12%, var(--card)); }
.calc-card:has(.tag-zdrowie){ border-color:var(--mint); background:color-mix(in srgb, var(--mint) 12%, var(--card)); }
.calc-card:has(.tag-praca){ border-color:var(--sky); background:color-mix(in srgb, var(--sky) 12%, var(--card)); }
.calc-card:has(.tag-codzienne){ border-color:var(--gold); background:color-mix(in srgb, var(--gold) 12%, var(--card)); }
.calc-card:has(.tag-matematyka){ border-color:var(--violet); background:color-mix(in srgb, var(--violet) 12%, var(--card)); }
.calc-card:has(.tag-dom){ border-color:var(--amber); background:color-mix(in srgb, var(--amber) 12%, var(--card)); }
.calc-card:has(.tag-motoryzacja){ border-color:var(--slate); background:color-mix(in srgb, var(--slate) 12%, var(--card)); }

.tag{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-badge);
  border:2px solid var(--line);
}
.tag-finanse{ background:var(--teal); color:var(--teal-ink); }
.tag-zdrowie{ background:var(--mint); color:var(--mint-ink); }
.tag-praca{ background:var(--sky); color:var(--sky-ink); }
.tag-codzienne{ background:var(--gold); color:var(--gold-ink); }
.tag-matematyka{ background:var(--violet); color:var(--violet-ink); }
.tag-dom{ background:var(--amber); color:var(--amber-ink); }
.tag-motoryzacja{ background:var(--slate); color:var(--slate-ink); }

/* category filter pills on hub page */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.filter-pill{
  font-family:var(--font-mono); font-size:.82rem; font-weight:700; padding:9px 16px;
  border:2.5px solid var(--line); border-radius:var(--radius-badge); background:var(--card);
  cursor:pointer; box-shadow:var(--shadow-press);
}
.filter-pill.active{ background:var(--ink); color:var(--paper); }

/* ---------- calculator shell ---------- */
.calc-shell{ display:grid; grid-template-columns:1.15fr 1fr; gap:32px; align-items:start; }
@media (max-width:900px){ .calc-shell{ grid-template-columns:1fr; } }
.calc-shell > .card{ border-radius:22px; padding:34px; }
.calc-shell .result-box{ border-radius:22px; }
.calc-shell .result-hero{ border-radius:19px 19px 0 0; }

.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-mono); font-size:.82rem; font-weight:700; margin-bottom:7px; color:var(--ink-soft); }
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea{
  width:100%; padding:12px 14px; font-size:1rem; font-family:var(--font-display);
  background:var(--paper); color:var(--ink); border:2.5px solid var(--line); border-radius:var(--radius);
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:3px solid var(--gold); outline-offset:1px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.field-check{ display:flex; align-items:flex-start; gap:10px; margin-bottom:18px; font-size:.88rem; }
.field-check input{ margin-top:5px; width:18px; height:18px; flex:none; }
.help-text{ font-size:.82rem; color:var(--ink-faint); margin-top:6px; }
.radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-chip{ position:relative; }
.radio-chip input{ position:absolute; opacity:0; }
.radio-chip label{
  display:inline-block; font-family:var(--font-mono); font-size:.85rem; font-weight:700; padding:9px 15px;
  border:2.5px solid var(--line); border-radius:var(--radius-badge); cursor:pointer; background:var(--paper);
}
.radio-chip input:checked + label{ background:var(--brand); color:var(--brand-ink); }

/* result box = "receipt" */
.result-box{
  background:var(--card); border:2.5px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-2); overflow:hidden;
}
.result-hero{
  padding:26px 24px 22px; text-align:center; background:var(--ink); color:var(--paper);
  position:relative;
}
.result-hero .r-label{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.result-hero .r-value{ font-family:var(--font-mono); font-size:clamp(2rem,6vw,2.7rem); font-weight:800; margin:8px 0 6px; word-break:break-word; }
.result-hero .r-status{ display:inline-block; font-family:var(--font-mono); font-size:.78rem; font-weight:700; background:var(--gold); color:var(--gold-ink); padding:4px 12px; border-radius:var(--radius-badge); }
.result-perf{
  height:14px;
  background-image:radial-gradient(circle at 7px 0, transparent 7px, var(--paper) 7.5px);
  background-size:14px 14px; background-position:0 -7px; background-repeat:repeat-x;
}
.result-rows{ padding:6px 24px 22px; }
.result-row{
  display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed var(--ink-faint);
  font-size:.92rem;
}
.result-row span{ color:var(--ink-soft); }
.result-row b{ font-family:var(--font-mono); }
.result-row.total{ border-bottom:none; border-top:2.5px solid var(--line); margin-top:4px; padding-top:14px; font-size:1rem; }

/* ---------- article body / SEO copy ---------- */
.article-body{ max-width:760px; }
.article-body h2{ margin-top:2em; }
.article-body h2:first-child{ margin-top:0; }
.article-body ul,.article-body ol{ padding-left:1.3em; }
.article-body li{ margin-bottom:.5em; }
.callout{
  background:var(--paper-2); border:2px solid var(--line); border-left:8px solid var(--teal);
  border-radius:var(--radius); padding:16px 20px; margin:22px 0; font-size:.96rem;
}
.callout.warn{ border-left-color:var(--amber); }
.table-wrap{ overflow-x:auto; margin:20px 0; border:2.5px solid var(--line); border-radius:var(--radius); }
table{ width:100%; border-collapse:collapse; font-size:.92rem; }
th,td{ padding:10px 14px; border-bottom:1px solid var(--paper-2); text-align:left; }
thead th{ background:var(--ink); color:var(--paper); font-family:var(--font-mono); font-size:.8rem; letter-spacing:.03em; }
tbody tr:nth-child(even){ background:var(--paper-2); }

/* FAQ */
.faq-item{ border:2.5px solid var(--line); border-radius:var(--radius); margin-bottom:12px; background:var(--card); overflow:hidden; }
.faq-q{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 18px; cursor:pointer; font-weight:700; }
.faq-q .plus{ font-family:var(--font-mono); font-size:1.2rem; transition:transform .2s ease; flex:none; }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:600px; }
.faq-a p{ padding:0 18px 16px; margin:0; color:var(--ink-soft); }

/* index-card tabs (category nav on hub) */
.cat-band{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:36px; }
.cat-band a{
  flex:none; font-family:var(--font-mono); font-size:.8rem; font-weight:700; text-decoration:none;
  padding:9px 16px; border:2.5px solid var(--line); border-radius:var(--radius) var(--radius) 0 0;
  background:var(--paper-2); color:var(--ink); border-bottom:none;
}
.cat-band a:hover{ background:var(--card); color:var(--ink); }

/* footer */
footer{ border-top:2.5px solid var(--line); background:var(--paper-2); padding:48px 0 22px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:30px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-col b{ display:block; font-family:var(--font-mono); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; }
.footer-col a{ display:block; color:var(--ink-soft); text-decoration:none; font-size:.92rem; margin-bottom:9px; }
.footer-col a:hover{ color:var(--brand); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px dashed var(--ink-faint); padding-top:18px; font-size:.82rem; color:var(--ink-faint); font-family:var(--font-mono); }
.footer-bottom a{ color:var(--ink-faint); }
.consent-btn{ background:none; border:0; padding:0; margin:0; font:inherit; color:var(--ink-faint); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.consent-btn:hover{ color:var(--brand); }
.footer-sep{ opacity:.5; margin:0 6px; }

/* misc */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
.center{ text-align:center; }
.muted{ color:var(--ink-soft); }
.stat-row{ display:flex; flex-wrap:wrap; gap:34px; margin:34px 0; }
.stat-row .stat b{ display:block; font-family:var(--font-mono); font-size:2rem; }
.stat-row .stat span{ font-size:.82rem; color:var(--ink-soft); }

.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:200; }
.skip-link:focus{ left:12px; top:12px; }

::selection{ background:var(--gold); color:var(--ink); }

/* ---------- plansze (ilustracje) — dodane 2026-08-10 ----------------------
   Ilustracje sa renderami 3D w zimnych blekitach, a witryna jest papierowa.
   Zamiast udawac, ze sa czescia tla, wklejamy je jak plansze do kartoteki:
   papierowe passe-partout, twarda ramka, twardy cien, podpis maszynowy.
   Dzieki oprawie z var(--card)/var(--line) plansza siedzi tak samo dobrze
   w motywie jasnym i ciemnym — kolor obrazka nigdy nie musi trafic w tlo.
   Blok celowo stoi PRZED znacznikami GEO/autopilota, bo patch_seo ucina
   arkusz na swoim naglowku i doklejone nizej reguly by przepadly.          */
.plansza{
  margin:34px 0; padding:12px; max-width:100%;
  background:var(--card); border:2.5px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
}
.plansza img{
  width:100%; height:auto; display:block;
  border:2px solid var(--line); border-radius:2px; background:var(--paper-2);
}
.plansza figcaption{ margin-top:14px; }
.plansza-et{
  display:inline-block; font-family:var(--font-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--teal);
  border-bottom:2px solid var(--teal); padding-bottom:2px; margin-right:9px;
}
.plansza-tx{ font-size:.92rem; color:var(--ink-soft); }
.article-body .plansza{ margin-left:0; margin-right:0; }

/* strona startowa: tekst z lewej, plansza z prawej, lekko przekrzywiona */
.hero-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:46px; align-items:center; }
.hero-plate{ margin:0; transform:rotate(1.4deg); }
.hero-plate img{ border-width:2.5px; }
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:30px; }
  .hero-plate{ transform:none; max-width:520px; }
}

/* ---------- walidacja pol kalkulatora (dodane 2026-08-16) -----------------
   Blad pokazujemy przy polu, a wynik zaslaniamy — zamiast zostawiac na
   ekranie poprzednia, juz nieaktualna liczbe. Kolory z motywu (--amber),
   zeby nie wprowadzac nowej palety. Blok stoi PRZED znacznikami GEO/
   autopilota z tego samego powodu, co plansze wyzej.                       */
.field input.is-invalid{
  border-color:var(--amber);
  box-shadow:inset 0 0 0 1px var(--amber);
}
.field input.is-invalid:focus{ outline-color:var(--amber); }
.field-error{
  margin:6px 0 0; font-family:var(--font-mono); font-size:.78rem;
  line-height:1.45; color:var(--amber);
}
.result-box.is-blocked .result-hero,
.result-box.is-blocked .result-rows,
.result-box.is-blocked .result-perf{ opacity:.22; }
.ac-out.is-blocked .ac-out-label,
.ac-out.is-blocked .ac-out-main,
.ac-out.is-blocked .ac-row{ opacity:.22; }
.ac-field .field-error{ margin-top:6px; }
.result-veil{
  margin:14px 0 0; padding:12px 14px;
  font-family:var(--font-mono); font-size:.82rem; line-height:1.5;
  color:var(--amber); background:var(--card);
  border:2px dashed var(--amber); border-radius:var(--radius);
}

/* ---------- telefon: narzedzie przed streszczeniem (dodane 2026-08-16) ----
   Na 375 px blok "W skrócie" ma 408 px wysokosci i spycha kalkulator na
   858 px — czyli ponizej pierwszego ekranu. Na waskich ekranach zwijamy
   wiec sama liste do przycisku; zdanie-odpowiedz zostaje widoczne, a caly
   tekst nadal jest w DOM (liczy sie dla wyszukiwarek generatywnych).       */
.geo-more{
  display:none;
  margin-top:10px; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--font-mono); font-size:.78rem; font-weight:700;
  letter-spacing:.04em; color:var(--teal);
  border-bottom:2px solid var(--teal);
}
@media (max-width:700px){
  .geo-tldr.is-collapsed .geo-tldr-list{ display:none; }
  .geo-tldr.is-collapsed .geo-more{ display:inline-block; }
}

/* ---------- 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(--card, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-left: 5px solid var(--teal, #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(--teal, #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(--ink-soft, #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(--ink-soft, #64748b); margin: 0 0 18px; }
.ac-crumbs a { color: inherit; }
.ac-kicker {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--teal, #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(--ink-soft, #64748b); margin-bottom: 6px; }
.ac-toc { margin: 26px 0; padding: 18px 22px; border: 1px solid var(--line, #e5e7eb);
          border-radius: 12px; background: var(--card, #fff); }
.ac-toc strong { display: block; margin-bottom: 8px; font-size: .82rem;
                 letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft, #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(--card, #fff); border: 1px solid var(--line, #e5e7eb);
           border-left: 5px solid var(--teal, #2563eb); }
.ac-faq { margin: 10px 0; border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
          background: var(--card, #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(--teal, #2563eb); }
.ac-faq[open] > summary::after { content: "\2013"; }
.ac-faq > div { padding: 0 20px 16px; color: var(--ink-soft, #4b5563); }
.ac-src { margin-top: 30px; font-size: .84rem; color: var(--ink-soft, #64748b); }
/* Stopka redakcyjna nowszych podstron. Wyciszona - to metryczka, nie wyroznik:
   te same 2px ramki i --radius co reszta motywu, ale bez kolorowej krawedzi. */
.ac-about{
  margin:34px 0 0; padding:18px 20px;
  background:var(--paper-2); border:2px solid var(--line); border-radius:var(--radius);
  font-size:.9rem; line-height:1.6; color:var(--ink-soft);
}
.ac-about h2{ margin:0 0 10px; font-size:1.05rem; color:var(--ink); }
.ac-about p{ margin:0 0 10px; }
.ac-about-h{ font-weight:700; color:var(--ink); }
.ac-about ul{ margin:0; padding-left:1.2em; }
.ac-about li{ margin-bottom:.35em; }
.ac-about a{ color:var(--brand); }

/* kalkulator */
.ac-calc { margin: 26px 0; padding: 22px; border-radius: 14px;
           border: 1px solid var(--line, #e5e7eb); background: var(--card, #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(--card, #fff); color: var(--ink, #111827);
}
.ac-btn { width: 100%; padding: 13px 18px; border: 0; border-radius: 10px; cursor: pointer;
          background: var(--teal, #2563eb); color: #fff; font-size: 1rem; font-weight: 700; }
.ac-out { margin-top: 18px; padding: 18px; border-radius: 12px;
          background: var(--card, #fff); border: 1px dashed var(--line, #cbd5e1); }
.ac-out-main { font-size: 1.9rem; font-weight: 800; color: var(--teal, #2563eb); line-height: 1.2; }
.ac-out-label { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase;
                color: var(--ink-soft, #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; } }


/* --- Telefon: narzedzie ma byc widoczne bez przewijania (2026-09-09) ---
   Na 375 px formularz zaczynal sie na 652 px, a przycisk na 908 px, czyli
   pod ekranem. Tu tylko zaciskamy odstepy naglowka i bloku "W skrocie" -
   zadna tresc nie znika. */
@media (max-width: 640px){
  .section-tight{ padding-top: 22px; }
  main h1{ font-size: 1.72rem; margin-top: 6px !important; margin-bottom: 10px; }
  main .lead{ font-size: 1rem; margin-bottom: 12px; }
  .geo-tldr{ margin: 16px 0 20px; padding: 12px 14px; }
  .geo-tldr-answer{ font-size: .95rem; margin-bottom: 8px; }
  .geo-more{ margin-top: 6px; }
  .breadcrumbs{ margin-bottom: 12px; }
}

/* ---------- ac-*: uzupelnienie brakujacych regul (audyt 2026-10-09) ----------
   Autopilot wysylal arkusz do img/, wiec te reguly nie dotarly do stron. */
.ac-fig { margin: 26px 0; }
.ac-fig img { display: block; width: 100%; height: auto; border-radius: 14px;
              border: 1px solid var(--line, #e5e7eb); }
.ac-fig figcaption { margin-top: 8px; font-size: .84rem; color: var(--ink-soft, #64748b); }
.ac-related { margin: 30px 0; padding: 18px 22px; border-radius: 12px;
              background: var(--card, #fff); border: 1px solid var(--line, #e5e7eb); }
.ac-related strong { display: block; margin-bottom: 8px; font-size: .82rem;
                     letter-spacing: .08em; text-transform: uppercase;
                     color: var(--ink-soft, #64748b); }
.ac-related ul { margin: 0; padding-left: 20px; }
.ac-related li { margin: 5px 0; }