/* ===== Styly kalkulaček (hub + jednotlivé stránky) =====
   Sdílený základ (tokeny, reset, .wrap, .eyebrow, .btn, .nav skelet) je v base.css,
   který se načítá PŘED tímto souborem. Zde zůstává jen to, co je pro kalkulačky odlišné. */
:root{--maxw:1100px}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:"TT Commons","Poppins",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;font-size:clamp(1rem,.5vw + .92rem,1.1rem);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.eyebrow,.btn,nav a{font-family:"TT Commons","Poppins",Arial,sans-serif}

/* nav — velikost loga + pravá strana (zpět/CTA) specifické pro kalkulačky */
.brand .brand-logo{height:50px;width:auto;transition:height .4s}
.nav.scrolled .brand .brand-logo{height:44px}
.nav-right{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;justify-content:flex-end;row-gap:.4rem}
.nav-right .back{font-weight:500;font-size:.95rem;color:var(--serious);display:inline-flex;align-items:center;gap:.45rem}
.nav-right .back svg{width:1.05em;height:1.05em;transition:transform .35s var(--eo)}
.nav-right .back:hover svg{transform:translateX(-4px)}

/* page header (hub) */
.tools-hero{position:relative;overflow:hidden;padding-top:clamp(7.5rem,15vh,9.5rem);padding-bottom:clamp(2.2rem,5vw,3.2rem);text-align:center;background:var(--calm-soft)}
/* měkký flek = radial-gradient místo filter:blur (SAFARI.md pravidlo 1) */
.tools-hero::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,171,189,.13) 0%,rgba(0,171,189,.08) 35%,rgba(0,171,189,0) 72%);top:-280px;right:-160px;pointer-events:none}
.tools-hero .eyebrow{justify-content:center}
.tools-hero h1{line-height:1.02;font-size:var(--fs-h1);color:var(--serious);margin:1rem 0 1rem}
.tools-hero h1 span{color:var(--hero-deep)}
.tools-hero p{color:var(--support);max-width:52ch;margin:0 auto;font-size:var(--fs-lede)}

/* === HUB: dlaždice kalkulaček === */
.hub{padding-block:clamp(2.4rem,5vw,4rem)}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.4rem)}
.hub-tile{position:relative;display:flex;flex-direction:column;gap:.55rem;background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:clamp(1.3rem,2.2vw,1.8rem);box-shadow:var(--sh-sm);transition:transform .5s var(--eo),box-shadow .5s var(--eo);min-height:172px}
.hub-tile:not(.soon):hover{transform:translateY(-6px);box-shadow:var(--sh)}
.hub-tile .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;color:#fff;margin-bottom:.3rem}
.hub-tile .ic svg{width:25px;height:25px}
.hub-tile h3{font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:700;font-size:1.08rem;color:var(--serious);letter-spacing:-.01em}
.hub-tile p{color:var(--support);font-size:.9rem;line-height:1.45;flex:1}
.hub-tile .go{display:inline-flex;align-items:center;gap:.4em;font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:700;font-size:.9rem;color:var(--hero-text);transition:gap .3s var(--eo)}
.hub-tile:hover .go{gap:.7em}
.hub-tile .go svg{width:1em;height:1em}
.hub-tile.soon{opacity:.72}
.hub-tile.soon .go{color:var(--support);font-weight:600}
.hub-tile .soon-badge{display:inline-flex;align-items:center;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--support);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem}

/* === HUB: vyhledávání + sbalené kategorie (redukce zdi 53 dlaždic, critique 2026-07-16) === */
.hub-search{display:flex;align-items:center;gap:.6rem;max-width:430px;margin:0 auto clamp(1.1rem,2vw,1.5rem);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.15rem 1.15rem;box-shadow:var(--sh-sm);transition:border-color .3s}
.hub-search:focus-within{border-color:var(--hero-deep);box-shadow:0 0 0 3px rgba(0,140,156,.6)}
.hub-search svg{width:19px;height:19px;color:var(--hero-text);flex:0 0 auto}
.hub-search input{flex:1;min-width:0;border:0;background:transparent;-webkit-appearance:none;appearance:none;font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:1rem;color:var(--serious);padding:.6rem 0;min-height:44px;outline:none}
.hub-search input::placeholder{color:var(--support);font-weight:500}
.hub-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.hs-count{text-align:center;color:var(--support);font-size:.9rem;min-height:1.5em;margin-bottom:.4rem}
.hm-hide{display:none}
.hub-cat.open .hm-hide,.hub.searching .hm-hide{display:flex}
.hub.searching .hub-showall{display:none}
.hs-hide{display:none!important}
.hub-showall{display:flex;align-items:center;gap:.5rem;width:fit-content;margin:1.1rem auto 0;padding:.6rem 1.35rem;min-height:44px;border:1.5px solid var(--line);border-radius:999px;background:transparent;cursor:pointer;font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.9rem;color:var(--serious);transition:border-color .18s var(--eo),color .18s var(--eo)}
.hub-showall:hover{border-color:var(--hero);color:var(--hero-deep)}
.hub-showall:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hub-showall svg{width:1.05em;height:1.05em;transition:transform .3s var(--eo)}
.hub-cat.open .hub-showall svg{transform:rotate(180deg)}
[data-theme="dark"] .hub-search{background:var(--paper-3)}
[data-theme="dark"] .hub-search input{color:var(--ink)}
[data-theme="dark"] .hub-showall{color:var(--ink)}
[data-theme="dark"] .hub-showall:hover{color:var(--hero-text)}

/* === Stránka jednotlivé kalkulačky === */
.calc-page{padding-top:clamp(7rem,14vh,9rem);padding-bottom:clamp(2.2rem,5vw,3.4rem)}
.calc-breadcrumb{display:inline-flex;align-items:center;gap:.45rem;font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.9rem;color:var(--hero-text);margin-bottom:.8rem;min-height:44px}
.calc-breadcrumb svg{width:1em;height:1em;transition:transform .35s var(--eo)}
.calc-breadcrumb:hover svg{transform:translateX(-4px)}

/* kategorie (nadpis sekce) */
.calc-cat{display:flex;align-items:center;gap:.85rem;margin:clamp(2rem,3.6vw,3rem) 0 1.3rem;font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:700;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--hero-text)}
.calc-cat::after{content:"";flex:1;height:1px;background:var(--line)}
.calc-cat:first-child{margin-top:0}
/* každá kategorie je vlastní <section class="hub-cat"> a štítek je v ní :first-child, takže měl margin 0;
   odstup mezi kategoriemi proto dostane sekce (audit 9.10.2026) */
.hub-cat+.hub-cat{margin-top:clamp(2.4rem,4vw,3.4rem)}
.hub-showall{margin-bottom:.2rem}

/* === kalkulačka (karta) === */
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--rxl);padding:clamp(1.6rem,3vw,2.8rem);box-shadow:var(--sh-sm)}
.calc-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.8rem}
.calc-head .ic{flex:0 0 auto;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff}
.calc-head .ic svg{width:27px;height:27px}
/* nadpis kalkulačky je h1 (hlavní nadpis stránky kalkulacka.html — a11y/SEO); h2 ponechán pro jistotu */
.calc-head h1,.calc-head h2{font-size:var(--fs-h3-panel);color:var(--serious);line-height:1.1}
.calc-head p{color:var(--support);font-size:.96rem;margin-top:.2rem}
.calc-body{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:center}
/* sloupce nesmí nafouknout obsah (min-width:auto u grid položek) — šířka bubliny je stabilní */
.calc-body>div{min-width:0}
.calc-fields{display:flex;flex-direction:column;gap:1.35rem}
.field label{display:block;font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.9rem;color:var(--serious);margin-bottom:.5rem}
.f-input{display:flex;align-items:center;gap:.5rem;background:var(--paper-2);border:1.5px solid var(--line);border-radius:14px;padding:.1rem .9rem;transition:border-color .3s}
.f-input:focus-within{border-color:var(--hero-deep);box-shadow:0 0 0 3px rgba(0,140,156,.6)}
.f-input input{flex:1;min-width:0;width:100%;border:0;background:transparent;-webkit-appearance:none;appearance:none;font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:700;font-size:1.1rem;color:var(--serious);padding:.8rem 0;outline:none;min-height:44px}
.f-input input::-webkit-outer-spin-button,.f-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.f-input input[type=number]{-moz-appearance:textfield}
.f-input .unit{font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;color:var(--support);font-size:.95rem;white-space:nowrap}
.f-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--calm-soft);margin-top:.9rem;cursor:pointer;touch-action:pan-y}
.f-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--hero-deep);border:3px solid #fff;box-shadow:0 4px 10px -2px rgba(0,140,156,.6);cursor:pointer}
.f-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--hero-deep);border:3px solid #fff;box-shadow:0 4px 10px -2px rgba(0,140,156,.6);cursor:pointer}
.f-range:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.acc-coral .f-range::-webkit-slider-thumb{background:var(--energy-deep)}
.acc-coral .f-range::-moz-range-thumb{background:var(--energy-deep)}

/* výsledkový panel */
/* Přehled zadaných hodnot. Na obrazovce je zbytečný (pole jsou hned vedle), slouží tisku
   a PDF reportu — tam se ukáže pravidlem v @media print níž. Plní ho calc-core.js. */
.calc-zadani{display:none}
.calc-result{background:linear-gradient(155deg,#00838f,#00636f);border-radius:var(--rl);padding:clamp(1.5rem,3vw,2.2rem);color:#fff;box-shadow:var(--sh-sm)}
.calc-result .r-lbl{font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.92}
.calc-result .r-big{font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:800;font-size:clamp(1.7rem,3.8vw,2.5rem);letter-spacing:-.02em;margin:.3rem 0 1.2rem;line-height:1.04}
.calc-result .r-row{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;padding-top:.85rem;margin-top:.85rem;border-top:1px solid rgba(255,255,255,.22);font-size:.95rem}
.calc-result .r-row:first-of-type{margin-top:0}
.calc-result .r-row span{opacity:.92;flex:1 1 auto;min-width:0}
/* hodnota se u dlouhého textu zalomí (čísla drží pohromadě nedělitelnými mezerami);
   nowrap dřív roztahoval celý panel do šířky (BMI a další slovní výsledky) */
.calc-result .r-row b{font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:700;flex:0 1 auto;min-width:0;max-width:100%;text-align:right;overflow-wrap:break-word}
.calc-result .r-row b.neg{color:#ffece9}
/* proměnlivě dlouhé slovní výsledky (BMI): hodnota vždy na vlastním řádku (r-own) a u textu
   dopadu rezervovaná výška 3 řádků (r-h3) — jinak vystředěná bublina (.calc-body
   align-items:center) při přepočtu poskakuje nahoru/dolů podle zalomení textu */
.calc-result .r-row b.r-own{flex-basis:100%;text-align:left}
.calc-result .r-row b.r-h3{min-height:4.8em;min-height:3lh}
.calc-result .r-note{margin-top:1rem;font-size:.84rem;line-height:1.45;opacity:.92;display:flex;gap:.5rem}
.calc-result .r-note svg{flex:0 0 auto;width:1.05em;height:1.05em;margin-top:.18em}

/* accenty (barva ikony + výsledku podle typu) */
.acc-teal  .ic{background:linear-gradient(150deg,var(--hero),var(--hero-deep))}
.acc-teal2 .ic{background:linear-gradient(150deg,#3fb6c4,#1f7e8c)}
.acc-coral .ic{background:linear-gradient(150deg,var(--energy),var(--energy-deep))}
.acc-green .ic{background:linear-gradient(150deg,var(--serious-2),var(--serious))}  /* zelená není v paletě → petrolej */
.acc-dark  .ic{background:linear-gradient(150deg,var(--serious-2),var(--serious))}
.acc-gold  .ic{background:linear-gradient(150deg,#3fb6c4,#1f7e8c)}  /* zlatá není v paletě → tyrkysový odstín */
/* světlý konec gradientu musí unést bílý text ≥4,5:1 (WCAG AA) — coral 4,75 / green 4,67 / gold 4,77 (audit 2026-07-16) */
.calc.acc-teal  .calc-result{background:linear-gradient(155deg,#00838f,#00636f)}
.calc.acc-teal2 .calc-result{background:linear-gradient(155deg,#1b8290,#126470)}
.calc.acc-coral .calc-result{background:linear-gradient(155deg,#cd4231,#b93a29)}
.calc.acc-green .calc-result{background:linear-gradient(155deg,#063d4e,#002d3d)}
.calc.acc-dark  .calc-result{background:linear-gradient(155deg,#063d4e,#002d3d)}
.calc.acc-gold  .calc-result{background:linear-gradient(155deg,#1b8290,#126470)}

/* cílové presety u „Spoření na cíl" */
.goal-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.goal-chip{font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.82rem;color:var(--serious);background:var(--paper-2);border:1.5px solid var(--line);border-radius:999px;padding:.42rem .9rem;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s var(--eo)}
.goal-chip:hover{border-color:var(--hero);transform:translateY(-1px)}
.goal-chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.goal-chip.active{background:#0f7f68;color:#fff;border-color:#0f7f68}   /* 4,9:1 pro bílý text (AA) */

/* rozpočet 50/30/20 – světlý panel s donutem
   (vyšší specifita než .calc.acc-* .calc-result, aby gradient accentu nepřebil bílé pozadí) */
.calc .calc-result.calc-result--budget,
.calc.acc-teal2 .calc-result.calc-result--budget{background:#fff;border:1px solid var(--line);color:var(--serious);display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.budget-donut{position:relative;width:172px;height:172px;flex:0 0 auto}
.budget-donut canvas{width:100%;height:100%;display:block}
.budget-center{display:grid;place-content:center;text-align:center;gap:.1rem}
.budget-share{width:100%}
.budget-center small{font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--support)}
.budget-center b{font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:800;font-size:clamp(1.05rem,2.4vw,1.4rem);color:var(--serious);line-height:1.05}
.budget-legend{width:100%;display:flex;flex-direction:column;gap:.7rem}
.budget-legend .bl{display:flex;align-items:center;gap:.65rem}
.budget-legend .bl .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.budget-legend .bl .bl-name{flex:1;color:var(--serious);font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.92rem}
.budget-legend .bl .bl-name em{font-style:normal;color:var(--support);font-weight:500;font-size:.8rem}
.budget-legend .bl b{font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:700;color:var(--serious);white-space:nowrap}
.budget-help{font-size:.85rem;color:var(--support);line-height:1.5;margin-top:.4rem}

/* "připravujeme" stav na stránce kalkulačky */
.calc-soon{text-align:center;padding:clamp(2rem,5vw,3.5rem);background:#fff;border:1px solid var(--line);border-radius:var(--rxl);box-shadow:var(--sh-sm)}
.calc-soon h1,.calc-soon h2{color:var(--serious);font-size:var(--fs-h3-panel);margin-bottom:.6rem}
.calc-soon p{color:var(--support);max-width:46ch;margin:0 auto 1.4rem}

/* closing CTA */
.tools-cta{padding-block:clamp(2.6rem,5vw,4rem)}
.tools-cta-panel{position:relative;overflow:hidden;border-radius:var(--rxl);background:linear-gradient(150deg,#008c9c,#00707e);padding:clamp(2.4rem,5vw,3.6rem) clamp(1.4rem,4vw,3rem);text-align:center;color:#fff;box-shadow:var(--sh)}
.tools-cta-panel::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(closest-side,rgba(252,124,113,.4) 0%,rgba(252,124,113,.24) 35%,rgba(252,124,113,0) 72%);bottom:-230px;left:-140px}
.tools-cta-panel h2{position:relative;font-size:var(--fs-h2-panel);line-height:1.06;margin:0 auto .8rem;max-width:20ch}
.tools-cta-panel p{position:relative;opacity:.95;max-width:44ch;margin:0 auto 1.8rem}
.tools-cta-panel .btn{position:relative}
.disclaimer{max-width:var(--maxw);margin:clamp(1.6rem,3vw,2.4rem) auto 0;padding-inline:var(--gut);color:var(--support);font-size:.85rem;text-align:center}

/* footer */
footer{background:var(--serious);color:#9fc2bf;padding-block:clamp(2.2rem,5vw,3rem);margin-top:clamp(1rem,2vw,2rem)}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem}
.foot-logo{height:44px;width:auto;opacity:.92;filter:brightness(0) invert(1)}
footer nav{display:flex;flex-wrap:wrap;gap:1.4rem}
footer nav a{font-family:"TT Commons","Poppins",Arial,sans-serif;font-size:.92rem;transition:color .3s}
footer nav a:hover{color:#fff}
footer small{width:100%;font-size:.82rem;color:#7ea7a3;border-top:1px solid rgba(255,255,255,.08);padding-top:1.3rem;margin-top:.3rem}

@media(max-width:860px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  .calc-body{grid-template-columns:1fr;gap:1.8rem;align-items:stretch}
  .nav-right .back{position:relative}
  .nav-right .back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* bez textu zbyla holá šipka 16×16 → kulaté tlačítko 44×44 jako přepínač motivu (audit 9.10.2026) */
  .nav-right .back{width:44px;height:44px;justify-content:center;border-radius:50%;background:rgba(0,45,61,.06);transition:background .3s var(--eo)}
  .nav-right .back:hover{background:rgba(0,45,61,.12)}
  [data-theme="dark"] .nav-right .back{background:rgba(255,255,255,.08)}
  /* výsledek se na mobilu nestlačuje do úzkého sloupce – je plné šířky pod vstupy */
  .calc-result{align-self:stretch}
}
@media(max-width:600px){
  /* logo bez taglinu je širší → na mobilu menší + skrýt nav CTA, ať se nav nepřeplní (zpět + logo stačí) */
  .brand .brand-logo{height:42px;flex-shrink:0}
  .nav.scrolled .brand .brand-logo{height:38px}
  /* tlačítka vpravo mají vlastních 44 px, mezera mezi nimi stačí menší → víc místa pro logo */
  .nav{gap:.6rem}
  .nav-right{gap:.35rem;flex-wrap:nowrap;flex:0 0 auto}
  .nav-right .theme-toggle{margin-left:0}
  .nav .btn{display:none}
  /* hlavička kalkulačky se zalomí, ikona zůstane vlevo nahoře */
  .calc-head{align-items:flex-start;gap:.85rem;margin-bottom:1.4rem}
  .calc-fields{gap:1.15rem}
  /* pohodlnější ovládání palcem na dotyku */
  .f-range{height:7px;margin-top:1rem}
  .f-range::-webkit-slider-thumb{width:26px;height:26px}
  .f-range::-moz-range-thumb{width:26px;height:26px}
  .goal-chip{padding:.55rem 1rem;font-size:.84rem}
}
@media(max-width:520px){.hub-grid{grid-template-columns:1fr}}
@media(max-width:380px){
  /* na velmi úzkých displejích smí hodnota přepadnout pod popisek (bez ořezu) */
  .calc-result .r-row{align-items:flex-start}
  .calc-result .r-row b{flex-basis:100%;text-align:left}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}html{scroll-behavior:auto}}


/* ===== TYPE SYSTEM — Karma (display) · TT Commons/Poppins (text) · IBM Plex Mono (figures) ===== */
.tools-hero h1,.calc-head h1,.calc-head h2,.tools-cta-panel h2,.calc-soon h1,.calc-soon h2{font-family:"Karma",Georgia,serif;font-optical-sizing:auto;font-weight:600;letter-spacing:-.018em}
.calc-result .r-big,.calc-result .r-row b,.budget-center b,.f-input input{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;font-feature-settings:"tnum" 1,"lnum" 1;font-weight:600}
.calc-result .r-big{font-weight:600;letter-spacing:-.01em}
.budget-center b{font-weight:600}

/* ═══ DARK MODE kalkulaček (sdílené tokeny + přepínač v base.css) ═══ */
[data-theme="dark"] html,[data-theme="dark"] body{background:#0b171d}
[data-theme="dark"] .tools-hero{background:#0d2129}
[data-theme="dark"] .tools-hero h1,[data-theme="dark"] .calc-head h1,[data-theme="dark"] .calc-head h2,[data-theme="dark"] .calc-soon h1,[data-theme="dark"] .calc-soon h2{color:var(--ink)}
[data-theme="dark"] .nav-right .back{color:var(--ink)}
[data-theme="dark"] .hub-tile,[data-theme="dark"] .calc,[data-theme="dark"] .calc-soon{background:var(--paper-3);border-color:var(--line)}
[data-theme="dark"] .hub-tile h3{color:var(--ink)}
[data-theme="dark"] .hub-tile .soon-badge{background:rgba(255,255,255,.06);border-color:var(--line)}
[data-theme="dark"] .field label{color:var(--ink)}
[data-theme="dark"] .f-input input{color:var(--ink)}
[data-theme="dark"] .f-range{background:rgba(255,255,255,.14)}
[data-theme="dark"] .goal-chip{background:#17292f;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .goal-chip.active{background:#0f7f68;border-color:#0f7f68;color:#fff}
/* rozpočtový (bílý) výsledkový panel → tmavý */
[data-theme="dark"] .calc .calc-result.calc-result--budget,
[data-theme="dark"] .calc.acc-teal2 .calc-result.calc-result--budget{background:#0f1e25;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .budget-center b,[data-theme="dark"] .budget-legend .bl .bl-name,[data-theme="dark"] .budget-legend .bl b{color:var(--ink)}
[data-theme="dark"] .tools-cta-panel{background:linear-gradient(150deg,#0d4550,#07303a)}
[data-theme="dark"] footer{background:#081218}

/* ═══ Tabulka ve výsledku (amortizační kalendář) + CSV export ═══ */
.r-tablewrap{margin-top:1.15rem;max-height:320px;overflow:auto;border-radius:14px;background:rgba(255,255,255,.07);scrollbar-width:thin}
.r-table{width:100%;border-collapse:collapse;font-size:.8rem}
.r-table th,.r-table td{padding:.42rem .6rem;text-align:right;white-space:nowrap}
.r-table th:first-child,.r-table td:first-child{text-align:left}
.r-table thead th{position:sticky;top:0;background:#04333f;font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase}
.r-table tbody tr{border-top:1px solid rgba(255,255,255,.12)}
.r-table tbody tr:first-child{border-top:0}
.r-table td,.r-table tbody th{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;font-feature-settings:"tnum" 1,"lnum" 1;font-weight:500}
.r-tablewrap:focus-visible{outline:2px solid #fff;outline-offset:2px}
.r-csv{display:inline-flex;align-items:center;gap:.45rem;margin-top:.95rem;color:#fff;font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.84rem;text-decoration:underline;text-underline-offset:3px;opacity:.92}
.r-csv:hover,.r-csv:focus-visible{opacity:1}

/* pole typu 'checks' — zaškrtávací položky s částkami (např. náklady refinancování) */
.f-checks{display:flex;flex-direction:column;gap:.4rem;margin-top:.35rem}
.f-checks .fc{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .18s var(--eo),background .18s var(--eo)}
.f-checks .fc:hover{border-color:var(--hero);background:rgba(0,171,189,.05)}
.f-checks .fc input{width:16px;height:16px;accent-color:var(--hero-deep);flex:0 0 auto;cursor:pointer}
.f-checks .fc span{flex:1;font-size:.9rem;color:var(--ink);line-height:1.3}
.f-checks .fc b{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;font-feature-settings:"tnum" 1;font-weight:600;font-size:.86rem;color:var(--serious);white-space:nowrap}
/* nezaškrtnutá položka: ztlumit barvou, ne průhledností (opacity .55 dávala 3,6:1) */
html .f-checks .fc input:not(:checked)~span,html .f-checks .fc input:not(:checked)~b{color:var(--support)}
[data-theme="dark"] .f-checks .fc b{color:var(--ink)}

/* tisk výsledku pro klienta (tlačítko pod výsledkovým panelem) */
.r-print{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;padding:.55rem 1rem;border:1.5px solid var(--line);border-radius:999px;background:transparent;cursor:pointer;font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.85rem;color:var(--support);transition:border-color .18s var(--eo),color .18s var(--eo)}
/* Tisk výsledku má jen přihlášený, nepřihlášenému přijde PDF na e-mail (blok .fn-report níž).
   Odemyká se až po jl-auth-known, tedy když stav přihlášení opravdu známe. Bez toho by
   tlačítko při každém načtení probliklo a zase zmizelo. Reset (.r-reset) zůstává všem. */
.r-print:not(.r-reset){display:none}
html.jl-auth-known.jl-in .r-print:not(.r-reset){display:inline-flex}
.r-print svg{width:1.05em;height:1.05em}
.r-print:hover,.r-print:focus-visible{border-color:var(--hero);color:var(--hero-deep)}
[data-theme="dark"] .r-print:hover,[data-theme="dark"] .r-print:focus-visible{color:var(--hero-text)}

/* pole typu 'switch' — přepínač ano/ne (např. delší splatnost, pojištění splácení) */
.field--switch .fsw{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .18s var(--eo),background .18s var(--eo)}
.field--switch .fsw:hover{border-color:var(--hero);background:rgba(0,171,189,.05)}
.field--switch .fsw input{width:16px;height:16px;accent-color:var(--hero-deep);flex:0 0 auto;cursor:pointer}
.field--switch .fsw span{flex:1;font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.9rem;color:var(--serious);line-height:1.3}
.field--switch .fsw input:not(:checked)+span{opacity:.7}
.fsw-hint{font-size:.8rem;color:var(--support);line-height:1.45;margin:.45rem .2rem 0}
[data-theme="dark"] .field--switch .fsw span{color:var(--ink)}
.field.field-off{display:none}

/* akční tlačítka pod výsledkem (tisk + reset) */
.r-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.r-actions .r-print{margin-top:.9rem}

/* ═══ Konsolidace úvěrů — víc-úvěrová custom kalkulačka ═══ */
.calc--custom .calc-fields{gap:1.6rem}
.kons-h{font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--support);margin:0 0 .1rem}
.kons-loans,.kons-prop{display:flex;flex-direction:column;gap:.9rem}
.kons-prop{padding-top:1.4rem;border-top:1px dashed var(--line)}
/* karta jednoho úvěru */
.kloan{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:1rem 1.05rem;display:flex;flex-direction:column;gap:.7rem}
.kloan-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.kloan-t{font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:700;font-size:.95rem;color:var(--serious)}
.kloan-x{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--support);cursor:pointer;transition:color .18s var(--eo),border-color .18s var(--eo),background .18s var(--eo)}
.kloan-x svg{width:15px;height:15px}
.kloan-x:hover,.kloan-x:focus-visible{color:var(--energy-deep);border-color:var(--energy);background:rgba(252,124,113,.08)}
.kloan-grid,.kloan-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .8rem}
.kloan-grid2{grid-template-columns:1fr}
.kloan .field label{font-size:.82rem;margin-bottom:.3rem}
.kloan .f-input{background:var(--paper);padding:.05rem .7rem}
.kloan .f-input input{font-size:1rem;padding:.55rem 0;min-height:40px}
.kloan .f-range{margin-top:.55rem}
/* segment: znám dobu / znám splátku */
.kseg{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:.25rem}
.kseg-b{border:0;background:transparent;border-radius:8px;padding:.5rem .4rem;font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.83rem;color:var(--support);cursor:pointer;min-height:38px;transition:background .18s var(--eo),color .18s var(--eo)}
.kseg-b.is-on{background:var(--hero);color:var(--serious);box-shadow:0 2px 6px -2px rgba(0,140,156,.5)}
.acc-dark .kseg-b.is-on{background:var(--serious);color:#fff}
.kseg-b:not(.is-on):hover{color:var(--serious)}
/* odvozený řádek pod úvěrem */
.kloan-derived{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;font-feature-settings:"tnum" 1;font-size:.78rem;color:var(--support);line-height:1.5;margin:0}
.kloan-derived.is-warn{font-family:"TT Commons","Poppins",Arial,sans-serif;color:var(--energy-text);font-weight:600}
/* přidat úvěr */
.kadd{display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;padding:.6rem 1rem;border:1.5px dashed var(--line);border-radius:12px;background:transparent;color:var(--hero-text);font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.88rem;cursor:pointer;transition:border-color .18s var(--eo),background .18s var(--eo)}
.kadd svg{width:1.05em;height:1.05em}
.kadd:hover,.kadd:focus-visible{border-color:var(--hero);background:rgba(0,171,189,.06)}
/* souhrn současného stavu */
.kons-sum{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;padding:.85rem 1rem;background:var(--calm-soft);border-radius:12px;font-size:.86rem;color:var(--support);line-height:1.4}
.kons-sum b{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;font-feature-settings:"tnum" 1;font-weight:600;color:var(--serious)}
.kons-sum:empty{display:none}
[data-theme="dark"] .kons-h{color:var(--support)}
[data-theme="dark"] .kloan-t{color:var(--ink)}
[data-theme="dark"] .kloan .field label{color:var(--ink)}
[data-theme="dark"] .kons-sum{background:#12242b}
[data-theme="dark"] .kons-sum b{color:var(--ink)}
[data-theme="dark"] .kadd{color:var(--hero-text)}
@media(max-width:520px){
  .kloan-grid{grid-template-columns:1fr}
  .kloan .f-input input{font-size:1.05rem}
}

/* ═══ Rodné číslo — přepínač režimu, datum a akční tlačítka ═══ */
.rc-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.rc-actions .kadd{padding:.5rem .85rem;font-size:.84rem}
/* dlouhé číslo se v panelu nesmí useknout ani přetéct */
.calc[data-calc="rodnecislo"] .calc-result .r-big{letter-spacing:.01em;overflow-wrap:anywhere}
/* nativní kalendářová ikona je v tmavém režimu jinak černá na tmavém */
.f-input input[type=date]{color-scheme:light}
[data-theme="dark"] .f-input input[type=date]{color-scheme:dark}

/* ═══ Graf průběhu splácení (široký blok pod kalkulačkou) ═══ */
.calc-chart{margin-top:clamp(1.4rem,3vw,2.2rem);padding-top:1.2rem;border-top:1px solid var(--line);position:relative}
.calc-chart .ch-title{font-family:"TT Commons","Poppins",Arial,sans-serif;font-weight:600;font-size:.9rem;color:var(--serious);margin:0 0 .5rem}
.calc-chart .ch-legend{display:flex;flex-wrap:wrap;gap:1rem;font-size:.78rem;color:var(--support);margin-bottom:.6rem}
.calc-chart .ch-legend span{display:inline-flex;align-items:center;gap:.4rem}
.ch-dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.ch-dot--urok{background:var(--energy-deep)}
.ch-dot--jist{background:var(--hero)}
.ch-dot--zust{background:var(--serious);height:3px;border-radius:2px;width:16px}
.ch-box{position:relative}
.ch-box svg{display:block}
.calc-chart .ch-urok{fill:var(--energy-deep)}
.calc-chart .ch-jist{fill:var(--hero)}
.calc-chart rect.dim{opacity:.45}
.calc-chart .ch-zust{fill:none;stroke:var(--serious);stroke-width:2}
.calc-chart .ch-axis{stroke:var(--line);stroke-width:1}
.calc-chart .ch-lbl{fill:var(--support);font-family:"TT Commons","Poppins",Arial,sans-serif;font-size:11px}
.ch-tip{position:absolute;bottom:calc(100% + .2rem);background:var(--serious);color:#fff;border-radius:10px;padding:.5rem .7rem;font-size:.78rem;line-height:1.5;pointer-events:none;white-space:nowrap;box-shadow:var(--sh-sm);z-index:3}
.ch-tip b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;opacity:.75}
[data-theme="dark"] .calc-chart .ch-title{color:var(--ink)}
[data-theme="dark"] .calc-chart .ch-zust{stroke:var(--ink)}
[data-theme="dark"] .ch-dot--zust{background:var(--ink)}
[data-theme="dark"] .ch-tip{background:#04333f}

/* odkaz v poznámce výsledku (barevný panel) */
.r-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ═══ ZDROJE DAT pod kalkulačkou — oficiální odkazy (důvěryhodnost + kde ověřit sazby) ═══ */
.r-zdroje{margin-top:1.15rem;padding-top:.85rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--support);line-height:1.55}
.r-zdroje>b{display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;margin-bottom:.45rem}
.r-zdroje ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem}
.r-zdroje li{position:relative;padding-left:.95rem}
.r-zdroje li::before{content:"↗";position:absolute;left:0;opacity:.55;font-size:.85em}
.r-zdroje a{color:var(--hero-text,#007483);text-decoration:none;
  border-bottom:1px solid rgba(0,116,131,.35)}
.r-zdroje a:hover{border-bottom-color:currentColor}
.r-zdroje a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
[data-theme="dark"] .r-zdroje a{color:var(--hero);border-bottom-color:rgba(0,171,189,.4)}

/* ═══ TISK — klient si vytiskne/uloží výsledek kalkulačky (cíl: jedna strana A4) ═══
   Tiskne se jen „bublina s výsledkem“: .calc-head, .calc-result (se vším uvnitř),
   .calc-chart, .r-zdroje a .disclaimer. Celý vstupní sloupec .calc-fields je pryč. */
@media print{
  @page{size:A4;margin:11mm}
  /* Tmavý režim se tiskne světle. Stránky kalkulaček a článků mají tenhle reset i inline,
     tady je kvůli stránkám, které mají jen calc.css (třeba rozcestník /kalkulacky/). */
  html[data-theme="dark"]{--ink:#0b272f;--serious:#002d3d;--support:#5d6b6f;--hero-text:#007483;
    --energy-text:#c9402f;--paper:#fff;--paper-2:#f3f8f6;--paper-3:#fff;--calm-soft:#e7f7f1;--line:#002d3d17}
  /* Světlé plochy (bublina, rámečky, donut) vyjdou i bez zaškrtnutého
     „tisknout barvy pozadí“ v dialogu tisku. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .nav,.tools-cta,footer,.calc-breadcrumb,.f-range,.goal-chips,.r-actions,.r-csv,.r-print,
  .budget-help,.fsw-hint,.theme-toggle,.rc-mode,.rc-actions,.hub-search,.hs-count,.hub-showall,
  .skip-link,.calc-fields,.kons-loans,.kons-h,.kloan,.kadd,.kons-sum,.kons-prop,
  .jl-save-bar,.fn-report,.contact-panel,.tp-tool{display:none!important}
  html,body{background:#fff!important}
  /* Hero rozcestníku má natvrdo tmavé pozadí. Bez tohohle by při zapnutém tisku pozadí
     vyšel tmavý text na tmavé ploše (tokeny výš už text ztmavily). */
  .tools-hero,.hub-hero,.calc-hero{background:#fff!important;color:#0b272f!important}
  /* Na papír patří jen výsledek. Hero stránky (drobečky, H1, perex) a blok Rychlá odpověď
     jsou obrazovkový obsah, kalkulačku identifikuje .calc-head. Platí jen pro samostatnou stránku
     kalkulačky (#calcView). V článku s vloženou kalkulačkou se tiskne i text článku. Blok .fn-answer měl navíc
     natvrdo tmavé pozadí, takže se tiskl jako prázdný černý obdélník přes třetinu strany. */
  body:has(#calcView .calc) :is(.tp-crumb,.fn-hero,.fn-answer,.fn-sec,.fn-faq,.tp-rel,.tp-author,.tp-meta,.tp-src,
  .calc-fb,.calc-break){display:none!important}
  /* Články bez kalkulačky se tisknou celé. Rychlá odpověď má v tmavém režimu natvrdo tmavé pozadí,
     při tisku by vyšel tmavý text na tmavé ploše (prázdný černý obdélník). */
  html[data-theme] :is(.fn-qa,.fn-answer,.qa-answer,.gd-key){background:#e7f7f1!important;color:#0b272f!important;box-shadow:none}
  html[data-theme] :is(.fn-qa,.fn-answer,.qa-answer,.gd-key) :is(p,b,li,span){color:#0b272f!important}
  /* Tisk vždy ve světlém — i když má uživatel zapnutý dark mode (jinak vyjde PDF tmavé
     a nečitelné). Vynutíme bílé pozadí kalkulačky a tmavý text napříč prvky. */
  .calc{background:#fff!important}
  .calc,.calc-head h1,.calc-head h2,.calc-head p{color:#0b272f!important}
  /* Zdroje se TISKNOU (na papíře dělají z výpočtu doložitelný podklad), ale vždy tmavě —
     i když má uživatel zapnutý dark mode. Nesmí se roztrhnout přes zlom stránky. */
  .r-zdroje{color:#5d6b6f!important;border-top-color:#ccc!important;break-inside:avoid;
    page-break-inside:avoid;margin-top:.7rem;padding-top:.5rem;font-size:.68rem}
  .r-zdroje>b{margin-bottom:.2rem}
  .r-zdroje ul{gap:.15rem .8rem}
  .r-zdroje a{color:#0b272f!important;border-bottom-color:#bbb!important}
  /* adresa odkazu se tiskne, ať je zdroj na papíře dohledatelný */
  .r-zdroje a::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all;opacity:.8}
  .calc-page{padding:0}
  .wrap{max-width:none;padding:0}
  /* Dlouhý obsah (amortizace, konsolidace) se smí zalomit přes zlom; proti rozseknutí
     chráníme jen jednotlivé bloky (výsledek, graf, zdroje) níž. */
  .calc{box-shadow:none;border:1px solid #ccc;border-radius:12px;padding:.9rem 1.1rem;
    page-break-inside:auto;break-inside:auto}
  .calc-head{margin-bottom:.6rem}
  .calc-head .ic{width:34px;height:34px}
  .calc-head h1,.calc-head h2{font-size:1.15rem}
  .calc-head p{font-size:.8rem}
  /* vstupní sloupec je skrytý → výsledek je přes celou šířku (jednosloupec) */
  .calc-body{display:block!important}
  /* Zadané hodnoty. Vstupní pole se tisknout nedají (slidery, textová pole), proto se
     jejich obsah vysází sem jako prostý přehled. Bez toho je na papíře jen výsledek
     a nikdo pak nepozná, z čeho vyšel (Honza 2026-08-02). Plní calc-core.js. */
  .calc-zadani{display:block;margin:0 0 .7rem;padding:.55rem .8rem;border:1px solid #ccc;
    border-radius:10px;background:#fff!important;color:#0b272f!important;
    page-break-inside:avoid;break-inside:avoid}
  .calc-zadani:empty{display:none}
  .calc-zadani .z-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
    color:#5d6b6f!important;margin:0 0 .3rem;font-weight:700}
  .calc-zadani .z-g{font-size:.72rem;font-weight:700;color:#0b272f!important;
    margin:.45rem 0 .1rem;padding-top:.3rem;border-top:1px solid #ddd}
  .calc-zadani .z-g:first-of-type{margin-top:.15rem;padding-top:0;border-top:0}
  .calc-zadani .z-row{display:flex;justify-content:space-between;align-items:baseline;
    gap:1.2rem;font-size:.76rem;padding:.13rem 0;border-top:1px dotted #dbe4e4}
  .calc-zadani .z-row:first-of-type{border-top:0}
  .calc-zadani .z-row span{color:#5d6b6f!important}
  .calc-zadani .z-row b{font-weight:700;white-space:nowrap;color:#0b272f!important}
  /* bublina: světlé pozadí, tenký rámeček, dost vnitřního odsazení, zaoblení */
  .calc-result{background:#f2f7f7!important;color:#0b272f!important;box-shadow:none;
    border:1px solid #ccc;border-radius:10px;padding:14px 16px;
    page-break-inside:avoid;break-inside:avoid}
  .calc-result .r-lbl{font-size:.72rem}
  .calc-result .r-big{font-size:28px;line-height:1.15;margin:.3rem 0 .9rem}
  /* rozpis: tečkovaný oddělovač, popisek vlevo, hodnota vpravo tučně */
  .calc-result .r-row{padding:.3rem 0;margin-top:0;font-size:.8rem;border-top:1px dashed #b9cbc8}
  .calc-result .r-row:first-of-type{border-top:none}
  .calc-result .r-row b{font-weight:700;color:#0b272f}
  .calc-result .r-row b.neg{color:#b23527}
  .calc-result .r-row b.r-h3{min-height:0}   /* rezerva výšky je jen pro obrazovku, tisk = 1 strana */
  .r-note{font-size:.7rem;margin-top:.5rem;opacity:1}
  .r-tablewrap{max-height:none;overflow:visible;background:none;margin-top:.5rem}
  .r-table{font-size:.66rem;border-collapse:collapse}
  .r-table th,.r-table td{padding:.18rem .4rem}
  .r-table thead th{position:static;background:none;color:#0b272f;border-bottom:1px solid #999}
  .r-table tbody tr{border-top-color:#ccc}
  .calc-chart{margin-top:.8rem;padding-top:.6rem;page-break-inside:avoid;break-inside:avoid}
  .calc-chart .ch-zust{stroke:#0b272f}
  .calc-chart .ch-axis{stroke:#ccc}
  /* tyče a tečky legendy natvrdo tmavé (tokeny --hero/--energy-deep jsou v dark režimu světlé) */
  .calc-chart .ch-urok{fill:#f25b4e}
  .calc-chart .ch-jist{fill:#00abbd}
  .calc-chart .ch-dot--urok{background:#f25b4e}
  .calc-chart .ch-dot--jist{background:#00abbd}
  .calc-chart .ch-dot--zust{background:#002d3d}
  .ch-tip{display:none}
  .disclaimer{display:block;color:#555;font-size:.68rem}
}

/* ── Průvodník po stránce (obsah článku) ────────────────────────────────
   Honza 2026-07-27: „je bomba ten průvodník, přidej ho k článkům."
   Od 920 px výš je to postranní lepící sloupec (.tp-layout níž), pod tím
   karta nad textem. Kontaktní panel dole zůstává vždy přes celou šířku.
   Styl je 1:1 s .gd-toc na stránkách průvodců.                            */
.tp-toc{background:var(--paper-2);border-radius:18px;padding:1.05rem 1.3rem;margin:0 0 2rem}
[data-theme="dark"] .tp-toc{background:var(--paper-3)}
.tp-toc .t{font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hero-text);margin:0 0 .55rem}
.tp-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.15rem 1.6rem}
.tp-toc li{margin:0}
.tp-toc a{display:block;padding:.3rem 0;font-size:.94rem;line-height:1.35;color:var(--support);
  text-decoration:none;transition:color .2s}
.tp-toc a:hover{color:var(--serious);text-decoration:underline;text-underline-offset:3px}
[data-theme="dark"] .tp-toc a:hover{color:var(--ink)}
.tp-toc a.on{color:var(--hero-text);font-weight:600}
@media(max-width:620px){ .tp-toc ol{display:block} }
@media print{ .tp-toc{display:none} }
/* nadpisy nesmí zmizet pod lepící hlavičkou, když se na ně skočí */
.fn-sec h2[id],.fn-hero h2[id]{scroll-margin-top:110px}

/* ── Dvousloupcová podoba článku: průvodník vlevo, text vpravo ──────────
   Honza 2026-07-27 chce stejný postranní průvodník jako na /o-nas.
   Grid obaluje jen obsahové sekce. Kontaktní panel a patičkové bloky
   (autor, zdroje, související) zůstávají přes celou šířku.
   Pod 920 px se průvodník vrací do podoby karty (pravidla výš).          */
.tp-layout{display:grid;grid-template-columns:215px minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.tp-layout>.tp-toc{position:sticky;top:110px;background:none;padding:.4rem 0 0;margin:0}
[data-theme="dark"] .tp-layout>.tp-toc{background:none}
.tp-layout>.tp-toc ol{display:block;gap:0}
.tp-layout>.tp-toc a{border-left:2px solid var(--line);padding:.42rem 0 .42rem .85rem;
  transition:color .25s,border-color .25s}
.tp-layout>.tp-toc a.on{border-left-color:var(--hero-deep)}
.tp-layout>.tp-body{min-width:0}
.tp-layout>.tp-body>.fn-sec:first-child{margin-top:0}
@media(max-width:920px){
  .tp-layout{display:block;margin-top:0}
  /* pod 920 px se průvodník vrací do podoby karty (pravidla .tp-toc výš),
     takže se tady musí zrušit všechno, co z něj dělalo postranní sloupec */
  .tp-layout>.tp-toc{position:static;top:auto;background:var(--paper-2);
    padding:1.05rem 1.3rem;margin:0 0 2rem}
  [data-theme="dark"] .tp-layout>.tp-toc{background:var(--paper-3)}
  .tp-layout>.tp-toc ol{display:flex;flex-wrap:wrap;gap:.15rem 1.6rem}
  .tp-layout>.tp-toc a{border-left:0;padding:.3rem 0}
}
@media(max-width:620px){ .tp-layout>.tp-toc ol{display:block} }
@media print{ .tp-layout{display:block} }

/* úzké mobily: logo se dřív smrsklo až na 27 px šířky. Teď drží poměr a jen se sníží. */
@media(max-width:380px){.brand .brand-logo,.nav.scrolled .brand .brand-logo{height:40px}}
@media(max-width:340px){.brand .brand-logo,.nav.scrolled .brand .brand-logo{height:34px}}

/* ═══ Závěrečný audit 9.10.2026 ═══ */
/* Kontaktní panel na mobilu: dvojice zůstává VEDLE SEBE (Eliška vlevo, Jan vpravo), písmo se
   dopočítá na maximum, které se do šířky vejde (stejný výpočet jako home.css, zdroj čísel je tam).
   Dřív to měla jen homepage; kopie panelu v cta.css, article-a/b.css a inline v o-nas.html počítaly
   písmo z jiného kontejneru a spadly na 6,9 px. calc.css je na všech těchto stránkách, proto je
   přepočet jednou tady; prefix .contact-panel zvedá specificitu nad inline kopii v o-nas.html.
   Klikací plocha odkazu min 44 px (WCAG 2.5.8), řádky se proto těsněji dotýkají (gap .1rem). */
@media(max-width:600px){
  .contact-panel .contact-info{container-type:inline-size;margin-inline:calc(6px - clamp(.8rem,4vw,3rem));gap:clamp(.6rem,4.06cqi,1.4rem)}
  .contact-panel .contact-info a{font-size:min(2.898cqi,.95rem);gap:1.6cqi;min-height:44px}
  .contact-panel .contact-info .ci{width:6.96cqi;height:6.96cqi;border-radius:2.2cqi}
  .contact-panel .contact-info .ci svg{width:3.6cqi;height:3.6cqi}
  .contact-panel .ci-name{font-size:clamp(.78rem,3.6cqi,1.05rem)}
  .contact-panel .ci-person{gap:.1rem}
}
/* tlačítka na teal pásu: tmavě tyrkysový fokusový kruh by splynul s pozadím */
.fn-tool .btn:focus-visible,.tools-cta-panel .btn:focus-visible,.contact-panel .btn:focus-visible{outline-color:#fff}

/* Dotykové cíle 44 px na telefonu a tabletu. U hustých prvků (patička, odkazy v řádku) se plocha
   zvětšuje paddingem a vyrovnává záporným okrajem, takže vzhled a hustota zůstávají. */
@media(pointer:coarse),(max-width:760px){
  footer nav a{padding:.7rem .35rem;margin:-.7rem -.35rem}
  footer small a{display:inline-block;padding:.75rem .3rem;margin:-.75rem -.3rem}
  .tp-toc a,.tp-layout>.tp-toc a{min-height:44px;display:flex;align-items:center}
  .tp-crumb a{display:inline-block;padding:.75rem .15rem;margin:-.75rem -.15rem}
  .r-reset,.r-print{min-height:44px}
  .kseg-b,.goal-chip{min-height:44px}
  .kloan-x{width:44px;height:44px}
  .pd-faq summary{min-height:44px;display:flex;align-items:center}
  .hub-showall{min-height:44px}
}
/* odkazy ve zdrojích nástrojů: --hero-deep dává na bílé 4,0:1, --hero-text 5,3:1 (v tmavém světlý) */
html .pd-faq .tp-src a,html .pd-gdpr a{color:var(--hero-text)}

/* Odkazy v souvislém textu článku musí jít poznat i bez barvy (WCAG 1.4.1); je v calc.css, protože ho potřebují i články s inline styly: podtržení + barva z tokenů
   (--hero-text má v obou režimech ≥4,7:1). Tlačítka, karty, obsah, drobečky a patička se nedotknou. */
.fn-sec :is(p,li,dd) a:not(.btn),.fn-answer a:not(.btn),.qa-answer a:not(.btn),.fn-faq details p a,.fn-praxe a,.fn-tab td a,.fn-tab caption a,.tp-src a,.tp-meta a{color:var(--hero-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
/* Kontaktní panel má tyrkysové pozadí: jeho odkazy zůstávají bílé (jako na homepage). */
.contact-panel .qf-gdpr a:not(.btn),.contact-panel :is(p,li) a:not(.btn){color:#fff}
.fn-sec :is(p,li,dd) a:not(.btn):hover,.fn-answer a:not(.btn):hover,.qa-answer a:not(.btn):hover,.fn-faq details p a:hover,.fn-praxe a:hover,.fn-tab td a:hover,.tp-src a:hover,.tp-meta a:hover{text-decoration-thickness:2px}
.fn-box--deep a:not(.btn),.fn-tool :is(p,li) a:not(.btn){color:#fff}
.tp-crumb a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
body .fnr-gdpr a,body .pd-gdpr a,.qf-gdpr a{text-decoration:underline;text-underline-offset:.18em}
/* starší šablona .tp (refinancovani-hypoteky): odkazy v odstavcích a seznamech taky podtržené */
.tp>p a:not(.btn),.tp>ul li a:not(.btn),.tp>ol li a:not(.btn){color:var(--hero-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}

/* ═══ Závěrečný audit 10.10.2026, 2. kolo ═══ */
/* placeholder v poli rodného čísla: UA výchozí barva dávala 4,29:1 na --paper-2 */
.f-input input::placeholder{color:var(--support)}
/* vizitka Elišky na /o-nas: čtvercový výřez celé postavy se ořízne na obličej (jako u Jana).
   Prohlížeč bez object-view-box dostane aspoň zarovnání nahoru. */
.tp-author img[src*="eliska"]{object-position:50% 12%}
@supports (object-view-box:inset(0)){
  .tp-author img[src*="eliska"]{object-view-box:inset(5% 25% 50% 30%);object-position:50% 50%}
}
/* checkbox bez zvětšeného labelu měl dotykovou plochu 16 px */
@media(pointer:coarse),(max-width:760px){
  label:has(>input[type=checkbox]){min-height:44px;display:flex;align-items:center;gap:.5rem}
}
/* Rychlá odpověď: inline pravidlo článků nechává odstavec na ~939 px (~90 znaků). Čtivá šířka ~68 znaků. */
.gd-head .fn-qa p,.fn-qa p{max-width:68ch}
/* Rozcestník: kategorie vykreslené skriptem jsou v #hubMount, takže `.hub-cat+.hub-cat` na první z nich
   nedosáhne a štítek seděl 7 px pod předchozí kartou. */
#hubMount>.hub-cat:first-child{margin-top:clamp(2.4rem,4vw,3.4rem)}
/* Posuvníky na dotyku: dráha zůstává 7 px, klikací plocha je 39 px (padding + clip na content-box,
   okraje to vyrovnají, takže se rozložení nehne). */
@media(pointer:coarse),(max-width:760px){
  .f-range{--rm:.9rem;height:44px;padding:18.5px 0;background-clip:content-box;margin-top:calc(var(--rm) - 18.5px);margin-bottom:-18.5px}
  .kloan .f-range{--rm:.55rem}
}
@media(max-width:600px){.f-range{--rm:1rem}}
/* zbylé dotykové cíle pod 44 px (kontrola 375 px) */
@media(pointer:coarse),(max-width:760px){
  .kadd{min-height:44px}
  .kloan .f-input input{min-height:44px}
  .rc-actions .kadd{min-height:44px}
}

/* ===== GRAFY KALKULAČEK (JLCharts, 16.10.2026) — paleta ověřená validátorem
   Barvy grafů = validovaná paleta (dataviz validate_palette.js, 16.10.2026):
   světlé na #fff:    #008c9c · #f25b4e · #5b6fd6 · #a87a00   (ΔE CVD min 11,1; kontrast ≥ 3:1)
   tmavé na #132630:  #109aaa · #ec6356 · #7280e3 · #b98a12   (ΔE CVD min 12,4; L v pásmu 0,48–0,67)
   Pořadí je pevné: 1 = tyrkysová (hlavní řada), 2 = korálová (náklad, úrok), 3 = modrá, 4 = okrová. */
.calc-chart,.calc-result--budget{
  --c1:#008c9c; --c2:#f25b4e; --c3:#5b6fd6; --c4:#a87a00;
  --c-mute:#c3ccce;            /* odsunutá řada (srovnání, kontext) */
  --jc-surface:#fff;
  --jc-ink:#0b272f; --jc-ink-2:#4f5f63; --jc-ink-3:#6b7a7e;
  --jc-grid:rgba(0,45,61,.08); --jc-axis:rgba(0,45,61,.22);
  --jc-tip:#002d3d; --jc-tip-ink:#fff;
  --jc-ok:#1a7f5a; --jc-mid:#a87a00; --jc-low:#c9402f;
}
[data-theme="dark"] .calc-chart,[data-theme="dark"] .calc-result--budget{
  --c1:#109aaa; --c2:#ec6356; --c3:#7280e3; --c4:#b98a12;
  --c-mute:#3a4f57;
  --jc-surface:#132630;
  --jc-ink:#e6f0f0; --jc-ink-2:#b4c4c6; --jc-ink-3:#93a6a9;
  --jc-grid:rgba(255,255,255,.07); --jc-axis:rgba(255,255,255,.2);
  --jc-tip:#e6f0f0; --jc-tip-ink:#0b272f;
  --jc-ok:#3fc58f; --jc-mid:#d9a52b; --jc-low:#ff8a7e;
}
.jc{font-family:"TT Commons","Poppins",Arial,sans-serif;color:var(--jc-ink);position:relative}
.jc-title{font-weight:600;font-size:.95rem;margin:0 0 .15rem;color:var(--jc-ink)}
.jc-sub{font-size:.8rem;line-height:1.5;color:var(--jc-ink-2);margin:0 0 .7rem;max-width:62ch}
.jc-legend{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font-size:.78rem;color:var(--jc-ink-2);margin:.2rem 0 .5rem}
.jc-legend span{display:inline-flex;align-items:center;gap:.45rem}
.jc-key{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--k);flex:none}
.jc-key--line{height:2px;width:16px;border-radius:2px}
.jc-box{position:relative}
.jc-box svg{display:block;overflow:visible;height:auto}   /* výška z viewBoxu: v tisku se graf zmenší celý, ne jen do šířky */
.jc-grid{stroke:var(--jc-grid);stroke-width:1;shape-rendering:crispEdges}
.jc-axis{stroke:var(--jc-axis);stroke-width:1;shape-rendering:crispEdges}
.jc-tick{fill:var(--jc-ink-3);font-size:11px;font-variant-numeric:tabular-nums}
.jc-col path,.jc-seg{transition:opacity .2s}
.jc-col.jc-dim path,.jc-seg.jc-dim{opacity:.35}
.jc-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.jc-line--muted{stroke-width:2;opacity:.9}
.jc-area{fill-opacity:.1}
.jc-cross{stroke:var(--jc-axis);stroke-width:1}
.jc-dot{stroke:var(--jc-surface);stroke-width:2}
.jc-markline{stroke:var(--jc-ink-3);stroke-width:1}
.jc-marktext{fill:var(--jc-ink-2);font-size:11px;font-weight:600}
.jc-leader{stroke:var(--jc-ink-3);stroke-width:1}
.jc-endlbl{fill:var(--jc-ink);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.jc-endname{fill:var(--jc-ink-3);font-size:10.5px}
.jc-hit{outline:none;cursor:crosshair}
.jc-hit:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
.jc-inlbl{fill:#fff;font-size:11.5px;font-weight:600;pointer-events:none}
.jc-inlbl--ink{fill:#0b272f}   /* korálová a okrová: bílá by měla pod 4,5:1 */
.jc-target{stroke:var(--jc-ink);stroke-width:1.5}
/* tooltip */
.jc-tip{position:absolute;z-index:5;pointer-events:none;background:var(--jc-tip);color:var(--jc-tip-ink);border-radius:12px;padding:.55rem .75rem;font-size:.78rem;line-height:1.55;white-space:nowrap;box-shadow:0 12px 28px -14px rgba(0,0,0,.45)}
.jc-tip b{display:block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:.15rem}
.jc-tip span{display:flex;align-items:center;gap:.45rem}
.jc-tip span i{width:8px;height:8px;border-radius:2px;background:var(--k);flex:none}
.jc-tip em{font-style:normal;font-weight:600;margin-left:auto;padding-left:1rem;font-variant-numeric:tabular-nums}
/* tabulka hodnot */
.jc-table{margin-top:.6rem;font-size:.8rem}
.jc-table summary{cursor:pointer;color:var(--jc-ink-2);display:inline-flex;gap:.4rem;align-items:center;padding:.3rem 0}
.jc-table summary:focus-visible{outline:2px solid var(--c1);outline-offset:2px;border-radius:4px}
.jc-tablewrap{max-height:240px;overflow:auto;margin-top:.4rem;border:1px solid var(--jc-grid);border-radius:12px}
.jc-table table{border-collapse:collapse;width:100%}
.jc-table th,.jc-table td{padding:.35rem .7rem;text-align:right;border-bottom:1px solid var(--jc-grid);font-variant-numeric:tabular-nums;white-space:nowrap}
.jc-table th[scope="row"],.jc-table thead th:first-child{text-align:left}
.jc-table thead th{position:sticky;top:0;background:var(--jc-surface);color:var(--jc-ink-2);font-weight:600}
/* podíl z celku */
.jc-sharelist{list-style:none;padding:0;margin:.7rem 0 0;display:grid;gap:.15rem}
.jc-sharelist li{display:grid;grid-template-columns:auto 1fr auto 3.2rem;align-items:center;gap:.6rem;font-size:.86rem;padding:.35rem 0;border-bottom:1px solid var(--jc-grid)}
.jc-sharelist li:last-child{border-bottom:0}
.jc-sharelist small{display:block;font-size:.74rem;color:var(--jc-ink-3)}
.jc-sharelist b{font-variant-numeric:tabular-nums;font-weight:600}
.jc-sharelist em{font-style:normal;color:var(--jc-ink-3);text-align:right;font-variant-numeric:tabular-nums}
.jc-sharelist li.is-emph span,.jc-sharelist li.is-emph b{font-weight:700}
/* srovnání */
.jc-bars{display:grid;gap:.75rem;margin-top:.3rem}
.jc-bar{display:grid;grid-template-columns:minmax(7rem,9.5rem) 1fr auto;gap:.9rem;align-items:center}
.jc-bar-name{font-size:.86rem;font-weight:600;line-height:1.25}
.jc-bar-name small{display:block;font-weight:400;font-size:.74rem;color:var(--jc-ink-3)}
.jc-bar-track{height:18px;position:relative}
.jc-bar-track span{display:block;height:100%;background:var(--c-mute);border-radius:0 4px 4px 0;min-width:2px;transform-origin:left center;animation:jc-grow .7s cubic-bezier(.16,1,.3,1) both}
@keyframes jc-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.jc-bar.is-best .jc-bar-track span{background:var(--c1)}
.jc-bar-val{font-weight:600;font-size:.9rem;font-variant-numeric:tabular-nums;text-align:right;min-width:6.5rem}
.jc-bar-val small{display:block;font-weight:500;font-size:.72rem;color:var(--jc-ok)}
.jc-bar.is-best .jc-bar-val small::before{content:"✓ "}
@media(max-width:520px){
  .jc-bar{grid-template-columns:1fr auto;gap:.3rem .8rem}
  .jc-bar-track{grid-column:1/-1;grid-row:2}
}
/* měřidlo */
.jc-meter-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .6rem;margin:.3rem 0 .6rem}
.jc-meter-head b{font-size:1.6rem;font-weight:700;letter-spacing:-.01em}
.jc-meter-head span{color:var(--jc-ink-2);font-size:.9rem}
.jc-state{font-style:normal;font-size:.76rem;font-weight:600;margin-left:auto;padding:.2rem .6rem;border-radius:999px;border:1px solid currentColor}
.jc-state--ok{color:var(--jc-ok)} .jc-state--mid{color:var(--jc-mid)} .jc-state--low{color:var(--jc-low)}
.jc-meter-track{position:relative;height:14px;border-radius:999px;background:color-mix(in srgb,var(--c1) 16%,transparent);overflow:hidden}
.jc-meter-track span{position:absolute;inset:0 auto 0 0;background:var(--c1);border-radius:999px}
.jc-meter-track--low span{background:var(--c2)}
.jc-meter-track i{position:absolute;top:0;bottom:0;width:2px;background:var(--jc-surface)}
.jc-meter-ticks{position:relative;height:1.2rem;font-size:.72rem;color:var(--jc-ink-3);margin-top:.3rem}
.jc-meter-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.jc-meter-ticks span.is-end{transform:translateX(-100%)}
/* tisk: světlé barvy, bez hoveru a tabulky */
@media print{
  .calc-chart,[data-theme="dark"] .calc-chart,.calc-result--budget,[data-theme="dark"] .calc-result--budget{--c1:#008c9c;--c2:#f25b4e;--c3:#5b6fd6;--c4:#a87a00;--c-mute:#c3ccce;--jc-surface:#fff;--jc-ink:#0b272f;--jc-ink-2:#4f5f63;--jc-ink-3:#6b7a7e;--jc-grid:rgba(0,45,61,.1);--jc-axis:rgba(0,45,61,.3);--jc-ok:#1a7f5a;--jc-mid:#a87a00;--jc-low:#c9402f}
  .jc-tip,.jc-table,.jc-hit{display:none}
  .jc-table[open] .jc-tablewrap{max-height:none}
  .jc{break-inside:avoid;page-break-inside:avoid}
  .calc-chart{page-break-inside:auto!important;break-inside:auto!important}
  .calc-chart .jc-g1{margin-bottom:.5rem}
  .calc-chart .jc-box svg{width:88%}
  .calc-chart .jc-title{font-size:.82rem;margin:0}
  .calc-chart .jc-legend{margin:.1rem 0 .2rem}
}
@media (prefers-reduced-motion:reduce){ .jc-bar-track span{animation:none} .jc-col path,.jc-seg{transition:none} }

.calc-chart .jc-g1{margin-bottom:clamp(1.4rem,3vw,2rem)}