/* =====================================================================
   Nosnost traverzy — vzhled podle filsns.cz (barvy a písma z vizitek).
   Počítač: zadání vlevo (drží se při posouvání), výsledky vpravo.
   Telefon: pod sebou, verdikt v liště dole. Tisk: protokol A4.
   ===================================================================== */
:root{
  --noc:#1F1F29; --papir:#FEFFFC; --len:#F3F5F2; --plocha:#E7EBE8; --linka:#DCE1DD; --okraj:#C9D0CB; --lista:#F4F6F4;
  --grafit:#2C2C2C; --popel:#646464; --mlha:#A9AEB8;
  --cerulean:#0071A9; --blankyt:#41A1CF;
  /* barvy grafů a schématu */
  --v:#0071A9; --v-mekka:rgba(0,113,169,.12);
  --m:#1F1F29; --m-mekka:rgba(31,31,41,.08);
  --w:#2E8BB8; --w-mekka:rgba(65,161,207,.14);
  --zat:#B4421F; --reakce:#0071A9;
  --ok:#1E7B4A; --ok-mekka:#E8F4EC; --ko:#B42318; --ko-mekka:#FBEAE8;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --okraj-stranky:clamp(16px,3vw,32px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--len);color:var(--grafit);font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cerulean);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tlumene{color:var(--popel);font-weight:400}

/* ---- horní lišta ---- */
.lista{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;height:56px;padding:0 var(--okraj-stranky);
  background:var(--noc);color:var(--papir);--fokus:var(--blankyt)}
.lista :focus-visible{outline-color:var(--blankyt)}
.znacka{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.znacka svg{width:17px;height:25px;fill:currentColor}
.znacka span{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1}
.zpet{font-size:14.5px;opacity:.75;text-decoration:none}
.zpet:hover{opacity:1}
.jazyky{margin-left:auto;display:flex;gap:2px;font-size:13px;font-weight:500}
.jazyky a{padding:6px 7px;border-radius:4px;text-decoration:none;opacity:.6}
.jazyky a:hover{opacity:1}
.jazyky a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* ---- úvod ---- */
.stranka{max-width:1480px;margin:0 auto;padding:clamp(24px,4vw,48px) var(--okraj-stranky) 48px}
.uvod{margin-bottom:clamp(20px,3vw,32px)}
.uvod h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,1.5rem + 3vw,4.2rem);line-height:1;letter-spacing:-.025em;color:var(--noc)}
.perex{margin-top:14px;max-width:46em;font-size:clamp(16px,.4vw + 14px,19px);color:var(--grafit)}
.akce{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.tl{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid var(--okraj);border-radius:6px;text-decoration:none;
  background:#fff;font-size:15px;font-weight:600;color:var(--noc);cursor:pointer;transition:border-color .15s,background-color .15s}
.tl:hover{border-color:var(--noc)}
.tl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tl--hlavni{background:var(--noc);border-color:var(--noc);color:var(--papir)}
.tl--hlavni:hover{background:#34344A}
.hlaska{font-size:14px;color:var(--ok);font-weight:500}

/* ---- rozvržení ---- */
.rozvrzeni{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"zadani" "souhrn" "schema" "prubehy" "postup" "predpoklady" "poptavka"}
.zadani{grid-area:zadani}.souhrn{grid-area:souhrn}.schema{grid-area:schema}
.prubehy{grid-area:prubehy}.postup{grid-area:postup}.predpoklady{grid-area:predpoklady}.poptavka{grid-area:poptavka}
@media (min-width:1100px){
  body{background-color:var(--plocha);background-image:radial-gradient(rgba(31,31,41,.12) 1px,transparent 1.3px);background-size:24px 24px}
  .rozvrzeni{gap:18px;grid-template-columns:minmax(360px,410px) minmax(0,1fr);
    grid-template-areas:"zadani souhrn" "zadani schema" "zadani prubehy" "postup postup" "predpoklady predpoklady" "poptavka poptavka";align-items:start}
}

/* ---- panel (okno jako na filsns.cz) ---- */
.panel{background:var(--papir);border:1px solid var(--okraj);border-radius:10px;min-width:0;
  box-shadow:0 1px 0 rgba(31,31,41,.04),0 18px 40px -30px rgba(31,31,41,.35)}
.panel-lista{display:flex;align-items:center;height:38px;padding:0 16px;background:var(--lista);border-bottom:1px solid var(--linka);
  border-radius:10px 10px 0 0;font-size:13.5px;font-weight:500;color:var(--grafit)}
.panel-telo{padding:clamp(16px,1.6vw,24px)}

/* ---- formulář ---- */
.zadani{container-type:inline-size}
.skupina{border:0;margin:0;padding:0 0 20px;min-width:0}
.skupina + .skupina{padding-top:18px;border-top:1px solid var(--linka)}
.skupina:last-child{padding-bottom:0}
/* legenda plave, aby nesedla do čáry rámečku nad skupinou */
.skupina legend{float:left;width:100%;padding:0;margin-bottom:12px;font-size:15px;font-weight:600;color:var(--noc)}
.skupina legend + *{clear:both}
@container (min-width:700px){
  .zadani .panel-telo{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  .zadani .skupina:nth-child(3){grid-column:2;grid-row:1 / span 2;border-top:0;padding-top:0}
  .zadani .skupina:nth-child(2){padding-bottom:0}
}
.pole{display:flex;flex-direction:column;gap:5px;min-width:0}
.pole2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pole2 + .pole2{margin-top:12px}
.pole label{font-size:13.5px;color:var(--popel);line-height:1.3}
.pole input,.pole select,.dvojice input{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--okraj);border-radius:6px;background:#fff;
  font-size:16px;color:var(--noc)}
.pole select{padding-right:8px}
.pole input:hover,.pole select:hover{border-color:#A9B2AC}
.pole input:focus,.pole select:focus,.dvojice input:focus{outline:2px solid var(--cerulean);outline-offset:-1px;border-color:var(--cerulean)}
input.mimo{border-color:var(--ko);background:var(--ko-mekka)}
.dvojice{display:flex;gap:8px}
.odsazeni{margin-top:16px}
.napoveda{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--popel)}
.napoveda b{color:var(--grafit);font-weight:600}
.zaskrt{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:15px;cursor:pointer}
.zaskrt input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--noc);flex:none}
.vlastni{margin-top:12px}
.charakteristiky{display:flex;align-items:center;gap:16px;margin-top:14px;padding:12px;border:1px solid var(--linka);border-radius:8px;background:var(--len)}
.charakteristiky svg{width:72px;height:90px;flex:none}
/* v úzkém zadání (telefon) místo náčrtu raději celé názvy veličin */
@container (max-width:400px){.charakteristiky svg{display:none}.charakteristiky{padding:10px 12px}}
.charakteristiky table{border-collapse:collapse;width:100%;font-size:14px}
.charakteristiky th{text-align:left;font-weight:400;color:var(--popel);padding:3px 0}
.charakteristiky td{text-align:right;padding:3px 0 3px 8px;white-space:nowrap}
.charakteristiky td:nth-child(2){font-weight:600;color:var(--noc)}
.charakteristiky td:last-child{color:var(--popel);width:3.2em}

.sily{display:flex;flex-direction:column;gap:10px}
.sila{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,1fr) 44px;gap:10px;align-items:end}
.sila-oznaceni{height:44px;display:flex;align-items:center;font-weight:600;color:var(--zat);font-size:15px}
.sila-odebrat{width:44px;height:44px;border:1px solid var(--okraj);border-radius:6px;background:#fff;cursor:pointer;font-size:20px;line-height:1;color:var(--popel)}
.sila-odebrat:hover{border-color:var(--ko);color:var(--ko)}
.tl--pridat{width:100%;justify-content:center;margin-top:10px;border-style:dashed;font-weight:500;color:var(--grafit);background:transparent}
.tl--pridat:disabled{opacity:.45;cursor:not-allowed}
.varovani{margin-top:12px;padding:10px 12px;border:1px solid #EBC58A;border-radius:6px;background:#FFF6E6;color:#6B4300;font-size:14px}

/* ---- výsledek ---- */
.verdikt{padding:16px 18px;border-radius:8px;background:var(--ok-mekka);border:1px solid rgba(30,123,74,.25)}
.verdikt.ko{background:var(--ko-mekka);border-color:rgba(180,35,24,.3)}
.verdikt-hlava{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.verdikt-slovo{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);font-weight:600;letter-spacing:.02em;color:var(--ok)}
.verdikt.ko .verdikt-slovo{color:var(--ko)}
.verdikt-eta{font-size:16px;color:var(--grafit)}
.verdikt-eta b{font-size:1.35em;color:var(--noc)}
.metr{position:relative;height:8px;margin-top:12px;border-radius:4px;background:rgba(31,31,41,.1);overflow:hidden}
.metr i{position:absolute;inset:0 auto 0 0;border-radius:4px;background:var(--ok);transition:width .25s}
.verdikt.ko .metr i{background:var(--ko)}
.metr-100{display:none}
.verdikt-pozn{margin-top:10px;font-size:14.5px;color:var(--grafit)}
.ukazatele{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-top:16px;border:1px solid var(--linka);border-radius:8px;overflow:hidden;background:var(--linka)}
.ukazatele div{padding:12px 14px;background:var(--papir)}
.ukazatele dt{font-size:13px;color:var(--popel)}
.ukazatele dd{margin-top:2px;font-size:15px;color:var(--popel)}
.ukazatele dd b{font-size:22px;font-weight:600;color:var(--noc)}
.ukazatele dd .tlumene{display:block;font-size:13px}

/* ---- schéma a grafy ---- */
#schema{display:block;width:100%;height:auto}
.graf-hlava{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-top:18px}
.graf-hlava:first-child{margin-top:0}
.graf-nazev{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--noc)}
.graf-nazev i{width:12px;height:12px;border-radius:3px}
.barva-v{background:var(--v)}.barva-m{background:var(--m)}.barva-w{background:var(--w)}
.graf-pozn{font-size:13px;color:var(--popel)}
.graf{position:relative;margin-top:6px}
.graf svg{display:block;width:100%;height:auto;touch-action:pan-y}
.bublina{position:absolute;display:none;padding:5px 9px;border-radius:5px;background:var(--noc);color:var(--papir);font-size:12.5px;
  white-space:nowrap;pointer-events:none;z-index:3}
.tabulka-hodnot{margin-top:18px;border-top:1px solid var(--linka);padding-top:12px}
.tabulka-hodnot summary{cursor:pointer;font-size:14.5px;font-weight:500;color:var(--cerulean)}
.tabulka-obal{overflow-x:auto;margin-top:10px}
#tabulka{border-collapse:collapse;width:100%;font-size:14px}
#tabulka th,#tabulka td{padding:6px 10px;text-align:right;border-bottom:1px solid var(--linka);white-space:nowrap}
#tabulka th{font-weight:500;color:var(--popel)}

/* ---- postup ---- */
.postup-mriz{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px 36px}
.krok h3{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--noc);margin-bottom:12px}
.krok-cislo{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--noc);color:var(--papir);font-size:13px;flex:none}
.rovnice{font-size:14.5px;line-height:1.65;overflow-wrap:anywhere}
.rovnice + .rovnice{margin-top:8px}
.rovnice b{color:var(--noc)}
.radky{border-collapse:collapse;width:100%;font-size:14.5px}
.radky th{text-align:left;font-weight:400;color:var(--grafit);padding:8px 12px 8px 0;border-bottom:1px solid var(--linka);vertical-align:top}
.radky td{text-align:right;font-weight:600;color:var(--noc);padding:8px 0;border-bottom:1px solid var(--linka);white-space:nowrap;vertical-align:top}
.radek-vysledek th,.radek-vysledek td{border-bottom:0;padding-top:10px}
.radek-vysledek td{font-size:16px}

/* ---- předpoklady ---- */
.seznam{padding:0;list-style:none;columns:2 340px;column-gap:40px}
.seznam li{break-inside:avoid;padding:10px 0 10px 18px;position:relative;font-size:14.5px;line-height:1.55;border-bottom:1px solid var(--linka)}
.seznam li::before{content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--okraj)}
.upozorneni{margin-top:16px;padding:12px 14px;border-left:3px solid #C77700;background:#FFF6E6;border-radius:0 6px 6px 0;font-size:14.5px;color:#4A3300}

/* ---- nabídka kalkulačky na míru (tmavé okno jako kontakt na filsns.cz) ---- */
.poptavka{background:var(--noc);border-color:#30303E;color:var(--papir)}
.poptavka .panel-lista{background:#262632;border-color:rgba(254,255,252,.12);color:var(--mlha)}
.poptavka .panel-telo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:clamp(20px,2.4vw,32px)}
.poptavka-text{max-width:46em;font-family:var(--serif);font-size:clamp(1.25rem,1rem + .8vw,1.7rem);line-height:1.3;color:var(--papir)}
.tl--svetle{background:var(--papir);border-color:var(--papir);color:var(--noc)}
.tl--svetle:hover{background:#E4ECF1;border-color:#E4ECF1}
.poptavka :focus-visible{outline-color:var(--blankyt)}

/* ---- patička ---- */
.pata{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;max-width:1480px;margin:0 auto;padding:0 var(--okraj-stranky) 32px;
  font-size:14px;color:var(--popel)}
.pata a{color:var(--cerulean)}

/* ---- jen tisk / telefon ---- */
.tisk-hlavicka,.tisk-odkaz,.tisk-zadani{display:none}
.mobil-verdikt{display:none}
@media (max-width:759.98px){
  .lista{gap:14px}
  .zpet{display:none}
  .akce .tl{flex:1 1 auto;justify-content:center}
  .panel-lista{height:36px}
  .sila{grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) 44px;gap:8px}
  .ukazatele{grid-template-columns:1fr 1fr}
  .ukazatele dd b{font-size:19px}
  /* verdikt stále po ruce; skryje se, když je výsledek na obrazovce */
  .mobil-verdikt:not([hidden]){display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;align-items:center;justify-content:space-between;gap:12px;
    min-height:52px;padding:0 18px;border-radius:10px;background:var(--noc);color:var(--papir);text-decoration:none;font-weight:600;
    box-shadow:0 12px 30px -10px rgba(31,31,41,.6)}
  .mobil-verdikt.ok span:first-child{color:#7FD3A3}
  .mobil-verdikt.ko span:first-child{color:#FF9B8F}
  .pata{padding-bottom:84px}
}

@media print{
  @page{size:A4;margin:13mm 12mm}
  body{background:#fff !important;font-size:11pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lista,.akce,.mobil-verdikt,.pata,.zadani,.tabulka-hodnot,.tl--pridat,.graf .bublina,.poptavka{display:none !important}
  .stranka{max-width:none;padding:0}
  .tisk-hlavicka{display:flex;justify-content:space-between;font-size:9.5pt;color:var(--popel);border-bottom:1px solid var(--okraj);padding-bottom:6px;margin-bottom:10px}
  .th-firma{font-weight:600;color:var(--noc)}
  .tisk-odkaz{display:block;margin-top:6px;font-size:8.5pt;color:var(--popel);overflow-wrap:anywhere}
  .uvod{margin-bottom:12px}
  .uvod h1{font-size:24pt}
  .perex{font-size:10.5pt;margin-top:6px}
  .tisk-zadani{display:block;break-inside:avoid;margin:0 0 12px;border:1px solid var(--okraj);border-radius:8px;padding:10px 14px}
  .tisk-zadani h2{font-size:11pt;font-weight:600;margin:0 0 6px}
  .tisk-zadani table{border-collapse:collapse;width:100%;font-size:10pt}
  .tisk-zadani th{text-align:left;font-weight:400;color:var(--popel);padding:3px 12px 3px 0;width:38%;vertical-align:top}
  .tisk-zadani td{padding:3px 0}
  .rozvrzeni{display:block}
  .tisk-zadani{order:-1}
  .panel{box-shadow:none;break-inside:avoid;margin-bottom:12px;border-color:var(--okraj)}
  .prubehy{break-inside:auto}
  .graf{break-inside:avoid}
  .graf-hlava{break-after:avoid}
  .krok{break-inside:avoid}
  .panel-lista{height:28px;font-size:10pt}
  .panel-telo{padding:10px 14px}
  .ukazatele dd b{font-size:15pt}
  .verdikt-slovo{font-size:18pt}
  .seznam{columns:1}
  .seznam li{padding:5px 0 5px 14px;font-size:9.5pt}
  .seznam li::before{top:12px}
  .upozorneni{font-size:9.5pt}
}