/* Vzhled prezentace pro kupujícího. Barvy se používají i v grafech (js/charts.js čte proměnné). */
:root {
  --ink: #1B2430;
  --ink-2: #4A5664;
  --ink-3: #7B8794;
  --rule: #E2E7EC;
  --wash: #F3F6F8;
  --surface: #FFFFFF;
  --main: #27567F;      /* modrá: praxe, historie */
  --accent: #0F8B7E;    /* zelenomodrá: plán kupujícího, cena */
  --warn: #C8553D;      /* cihlová: alternativa, riziko */
  --gold: #B8860B;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --r-background-color: var(--surface);
  --r-main-font: var(--font);
  --r-main-color: var(--ink);
  --r-heading-font: var(--font);
  --r-heading-color: var(--ink);
  --r-link-color: var(--main);
}

html, body { background: var(--surface); }
.reveal { font-family: var(--font); font-size: 25px; color: var(--ink); }
.reveal .slides { text-align: left; }
.reveal .slides section { height: 100%; box-sizing: border-box; padding: 30px 8px 0; }

.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--font); text-transform: none; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 16px;
}
.reveal h1 { font-size: 2.3em; font-weight: 750; line-height: 1.05; }
.reveal h2 { font-size: 1.38em; font-weight: 700; line-height: 1.15; max-width: 24em; text-wrap: balance; }
.reveal h2 .hl { color: var(--accent); }
.reveal h3 { font-size: 0.9em; font-weight: 650; }
.reveal p, .reveal li { line-height: 1.4; }
.reveal ul { margin: 0 0 0 1em; }
.reveal li + li { margin-top: 0.3em; }
.reveal strong { font-weight: 700; }
.reveal em { color: var(--ink-2); font-style: normal; }

.kicker { font-size: 0.58em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.conf { position: absolute; top: 0; right: 0; font-size: 0.48em; color: var(--ink-3); font-weight: 600; letter-spacing: 0.06em; }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.cols > * { min-width: 0; }
.cols.wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.cols.wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.stack > * + * { margin-top: 12px; }
.muted { color: var(--ink-3); }
.small { font-size: 0.72em; }
.tiny { font-size: 0.56em; }
.source { font-size: 0.48em; color: var(--ink-3); margin-top: 8px; line-height: 1.35; }

/* Dlaždice */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--wash); border-radius: 10px; padding: 16px 18px; }
.card .value { font-size: 1.45em; font-weight: 750; letter-spacing: -0.02em; line-height: 1.05; }
.card .value.accent { color: var(--accent); }
.card .value.main { color: var(--main); }
.card .value.warn { color: var(--warn); }
.card .name { font-weight: 650; margin-top: 6px; font-size: 0.78em; }
.card .note { font-size: 0.58em; color: var(--ink-2); margin-top: 6px; line-height: 1.35; }

/* Statistiky pod grafem */
.stats { display: flex; gap: 36px; margin-top: 12px; flex-wrap: wrap; }
.stats.compact .stat .value { font-size: 1.25em; }
.stats.compact { gap: 24px; }
.stats.vertical { flex-direction: column; gap: 22px; margin-top: 0; }
.stat .value { font-size: 1.55em; font-weight: 750; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.stat .value.accent { color: var(--accent); }
.stat .value.main { color: var(--main); }
.stat .value.warn { color: var(--warn); }
.stat .label { font-size: 0.56em; color: var(--ink-2); margin-top: 6px; max-width: 16em; line-height: 1.3; }

/* Tabulky */
.reveal table.t { border-collapse: collapse; font-size: 0.64em; width: 100%; margin: 0; }
.reveal table.t th, .reveal table.t td { padding: 7px 10px; border: 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.reveal table.t thead th { font-weight: 650; color: var(--ink-2); border-bottom: 1.5px solid var(--ink-3); }
.reveal table.t td.num, .reveal table.t th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reveal table.t tr.total td { font-weight: 700; border-top: 1.5px solid var(--ink-3); }
.reveal table.t tr.sub td { color: var(--ink-2); }
.reveal table.t tr.sub td:first-child { padding-left: 24px; }
.reveal table.t td.ok { color: var(--accent); font-weight: 650; }
.reveal table.t.compact td, .reveal table.t.compact th { padding: 5px 8px; }
.reveal table.t.plan th:first-child { width: 40%; }

.note-box { border-left: 4px solid var(--accent); background: #EEF7F6; padding: 11px 15px; border-radius: 0 8px 8px 0; font-size: 0.66em; line-height: 1.4; }
.note-box.blue { border-color: var(--main); background: #EEF3F8; }
.note-box.warn { border-color: var(--warn); background: #FBF1EE; }

/* Titulní slide */
.title-slide { display: flex; flex-direction: column; justify-content: center; height: 100%; max-width: 820px; }
.title-slide .sub { font-size: 1.02em; color: var(--ink-2); margin: 0; }
.title-slide .meta { font-size: 0.6em; color: var(--ink-3); margin-top: 26px; line-height: 1.5; }
.title-slide .price { margin-top: 30px; display: inline-flex; align-items: baseline; gap: 14px; border-top: 2px solid var(--ink); padding-top: 12px; }
.title-slide .price b { font-size: 1.5em; font-weight: 750; color: var(--accent); letter-spacing: -0.02em; }
.title-slide .price span { font-size: 0.62em; color: var(--ink-2); max-width: 18em; line-height: 1.3; }

/* Graf (inline SVG) */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font); }
.chart .axis { stroke: var(--rule); stroke-width: 1; }
.chart .tick { font-size: 13px; fill: var(--ink-3); }
.chart .lbl { font-size: 13px; fill: var(--ink-2); }
.chart .val { font-size: 13px; font-weight: 650; fill: var(--ink); }
.chart .bar-main { fill: var(--main); }
.chart .bar-accent { fill: var(--accent); }
.chart .bar-warn { fill: var(--warn); }
.chart .bar-muted { fill: #C9D1D9; }
.chart .line-main { fill: none; stroke: var(--main); stroke-width: 3; }
.chart .line-accent { fill: none; stroke: var(--accent); stroke-width: 3; }
.chart .dot-main { fill: var(--main); }
.chart .dot-accent { fill: var(--accent); }
.chart .range { fill: #C9D1D9; }
.chart .range.accent { fill: #9ED3CC; }
.chart .range.warn { fill: #EFBBAE; }
.chart .mid { stroke: var(--ink); stroke-width: 2.5; }
.chart .price-line { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 4; }
.chart .price-lbl { font-size: 14px; font-weight: 750; fill: var(--accent); }
.chart .ff-row:hover .range { fill: #B4BFC9; }
.chart .ff-row:hover .range.accent { fill: #7BC4BB; }
.chart .hover-lbl { font-size: 13px; fill: var(--ink-2); }
.chart .ff-row:hover .val { fill: var(--accent); }
.legend { display: flex; gap: 22px; font-size: 0.54em; color: var(--ink-2); margin-top: 6px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Kalkulačky */
.calc { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 30px; align-items: start; }
.calc .calc-controls { font-size: 0.6em; }
.calc .calc-controls .source { font-size: 0.82em; margin-top: 12px; }
.calc .ctl { display: grid; grid-template-columns: 1fr 86px; gap: 4px 12px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.calc .ctl label { color: var(--ink-2); }
.calc .ctl output { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc .ctl input[type=range] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--accent); height: 18px; }
.calc .ctl select { grid-column: 1 / -1; font: inherit; font-size: 0.95em; padding: 3px 6px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); }
.calc .reset { margin-top: 8px; font: inherit; font-size: 0.9em; color: var(--main); background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.calc .reset:hover { background: var(--wash); }
.calc .results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.calc .results .card { padding: 14px 16px; }
.calc .results .card .value { font-size: 1.3em; }
.calc .results .card.wide { grid-column: 1 / -1; }
.calc .check { font-size: 0.5em; color: var(--ink-3); margin-top: 6px; }
.calc .check.bad { color: var(--warn); }

/* Přepínač nízký / střední / vysoký */
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; font-size: 0.6em; }
.seg button { font: inherit; background: var(--surface); color: var(--ink-2); border: 0; padding: 6px 14px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button.on { background: var(--main); color: #fff; }
.toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }

/* Otázky a odpovědi */
.faq { font-size: 0.62em; columns: 2; column-gap: 34px; }
.faq details { break-inside: avoid; border-bottom: 1px solid var(--rule); padding: 7px 0; }
.faq summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; gap: 10px; }
.faq summary::before { content: '+'; color: var(--accent); font-weight: 750; width: 1em; flex: none; }
.faq details[open] summary::before { content: '–'; }
.faq details p { margin: 6px 0 0 1.4em; color: var(--ink-2); line-height: 1.4; }

/* Kroky */
.steps { list-style: none; margin: 0 !important; padding: 0; font-size: 0.76em; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 2.4em 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); margin: 0 !important; }
.steps li b { color: var(--accent); font-size: 1.3em; line-height: 1.1; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; font-size: 0.58em; margin-top: 14px; }
.timeline div { background: var(--wash); border-radius: 8px; padding: 10px 12px; }
.timeline b { display: block; color: var(--main); margin-bottom: 4px; }

.reveal .progress { color: var(--accent); height: 4px; }
/* Sdílení obrazovky (Zoom): spodní a horní okraje překrývají ovládací prvky a náhledy účastníků. Číslo slidu
   proto sedí uprostřed nad lištou průběhu, navigační šipky zůstávají spolu v pravém dolním rohu (Zoom prezentujícího zabírá jen levý dolní roh) a obsah slidu končí
   nejméně 60 px nad spodním okrajem. */
.reveal .slide-number {
  background: rgba(255, 255, 255, 0.85); color: var(--ink-2); font-family: var(--font); font-size: 14px; font-weight: 600;
  right: auto; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 3px 12px; border-radius: 12px;
}
.reveal .slides section { padding-bottom: 60px; }
.reveal .controls { color: var(--ink-3); }