/* Cestovatel.cz — vzhled „Výprava", část pro nástrojové stránky.
 *
 * Tři stránky nejsou články, ale malé aplikace s vlastními komponentami:
 *
 *   /cenovy-index/  .ci-*        grafy, měřidla, tabulka srovnání
 *   /teplota-more/  .heatmap, .hm-*   mřížka teplot 8 destinací × 12 měsíců
 *   /o-webu/        .timemachine, .tm-*, .retro-*   dobové okno prohlížeče
 *
 * Proč zvlášť soubor a ne `vyprava.css`: tyhle třídy používají právě tři
 * stránky ze sedmi set. V globálním stylu by je stahovalo všech 697 zbytečně.
 * Stránky si ho proto berou samy přes $strana['styly'].
 *
 * Pravidla jsou převzatá ze starého `web.css` (heatmapa, stroj času) a
 * z inline <style> cenového indexu, ale přebarvená do palety Výpravy:
 * ostré hrany (3px) místo zaoblených 10–14px a proměnné nového stylu.
 * Hodnoty v pixelech zůstaly, protože nesou rozvržení, ne vzhled.
 */

:root{
  /* Teplotní stupnice heatmapy. Ve dni jde od studené šedé k oranžové
     akcentní barvě; v noci musí být tmavší, aby bílé číslo zůstalo čitelné. */
  --heat-0:#e7e9e8; --heat-1:#fbe1d0; --heat-2:#f7c39c; --heat-3:#f0965b; --heat-4:#e8590c;
  /* Dobové okno prohlížeče a roky u milníků. Vlastní mono font web nenahrává,
     systémový je pro ten účel dostačující. */
  --mono:ui-monospace,'SFMono-Regular','Menlo','Consolas',monospace;
}
:root[data-rezim="noc"]{
  --heat-0:#222c2c; --heat-1:#5a3a23; --heat-2:#804924; --heat-3:#a8521d; --heat-4:#d4530a;
}


/* ——— drobečky a společné drobnosti ——————————————————————————————————————
 * Nástrojové stránky mají drobečkovou navigaci v obsahu (.breadcrumbs),
 * ne v záhlaví od šablony (.crumbs). Obojí vypadá stejně.
 */
.breadcrumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--tichy);
  margin:clamp(18px,3vw,28px) 0 0}
.breadcrumbs a{color:var(--tichy);border-bottom:1px solid transparent}
.breadcrumbs a:hover{color:var(--akcent);border-bottom-color:currentColor}
.breadcrumbs .is-current{color:var(--inkoust);font-weight:500}

.eyebrow--lg{font-size:12px}
.section-h{font-family:var(--display);font-weight:800;margin:0;
  font-size:clamp(21px,2.6vw,28px);letter-spacing:-.03em;line-height:1.15}
.lead{font-size:16px;line-height:1.6;color:var(--tichy);max-width:70ch}
.page-head{padding-top:clamp(18px,3vw,26px)}
.page-perex{font-size:17px;line-height:1.65;color:var(--tichy);max-width:62ch;margin:12px 0 0}


/* ——— /teplota-more/ ——————————————————————————————————————————————————————
 * POZOR: .heatmap není tabulka, ale mřížka z divů. Řádek = <b>název</b>
 * + 12 buněk + odkaz; hlavička má místo názvu .heatmap__label a místo buněk
 * tlačítka .hm-month. Stylovat to jako tabulku celý nástroj rozsype.
 */
.heatmap-card{margin:clamp(22px,4vw,34px) 0 0;padding:clamp(14px,2.4vw,22px);
  background:var(--karta);border:1px solid var(--linka)}
.heatmap{display:flex;flex-direction:column;gap:3px;overflow-x:auto}
.heatmap__row{display:grid;gap:3px;align-items:center;min-width:680px;
  grid-template-columns:minmax(108px,1.2fr) repeat(12,minmax(34px,1fr)) minmax(58px,auto)}
.heatmap__row>b,.heatmap__label{font-family:var(--display);font-weight:700;font-size:13px;
  color:var(--more);padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heatmap__label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tichy)}
.hm-month{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tichy);background:none;border:0;padding:7px 2px;
  cursor:pointer}
.hm-month:hover{color:var(--akcent)}
.hm-month.is-active,.hm-month.is-current{color:#fff;background:var(--more)}
.hm-cell{text-align:center;padding:9px 2px;font-weight:600;font-size:13px;
  font-variant-numeric:tabular-nums;outline:2px solid transparent;outline-offset:-2px}
/* Vybraný měsíc — JS přidává .is-hl na buňky v jeho sloupci. */
.hm-cell.is-hl{outline-color:var(--inkoust);font-weight:700}
/* Barvu textu v buňkách nese inline style v HTML (generuje ho jiný skript)
   a pro studené měsíce je to tmavě šedá — na nočním podkladu by se ztratila.
   Proto !important: přebít inline style jinak nejde. */
:root[data-rezim="noc"] .hm-cell{color:var(--inkoust) !important}
.heatmap__link{font-size:12px;font-weight:600;text-align:right;white-space:nowrap;color:var(--tichy)}
.heatmap__link:hover{color:var(--akcent)}
.heatmap-summary{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  justify-content:space-between;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--linka);font-size:13.5px;color:var(--tichy)}
.heatmap-summary b{font-family:var(--display);color:var(--inkoust)}
.heat-legend{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--tichy)}
.heat-legend span{display:inline-flex;align-items:center;gap:5px}
.heat-legend i{display:inline-block;width:13px;height:13px;border:1px solid var(--linka)}
.cite-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  margin:clamp(16px,3vw,24px) 0;padding:14px 16px;
  background:var(--plocha);font-size:12.5px;color:var(--tichy);line-height:1.5}
.cite-bar a{font-weight:600;color:var(--more)}
.cite-bar a:hover{color:var(--akcent)}
.data-badge{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 9px;background:var(--more);color:#fff;flex:none}


/* ——— /cenovy-index/ ——————————————————————————————————————————————————————
 * Jediná stránka webu, kde barva nese význam: zelená = zlevnění,
 * červená = zdražení. Ty dvě se proto do palety Výpravy nepřebarvují.
 */
.ci-section{margin-top:clamp(34px,5vw,60px)}
.ci-section h2{font-family:var(--display);font-weight:800;margin:0 0 6px;
  font-size:clamp(21px,2.6vw,28px);letter-spacing:-.03em;line-height:1.15}
.ci-section .lead{margin:0 0 16px;font-size:15px}

.ci-hero{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:center;
  margin-top:clamp(20px,3vw,30px);padding:clamp(22px,3.4vw,32px);
  background:var(--more-tmavy);color:#fff}
.ci-hero p{margin:0;max-width:60ch;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.82)}
.ci-snap{padding:18px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08)}
.ci-snap__price{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.03em;
  font-size:clamp(30px,4vw,42px);font-variant-numeric:tabular-nums}
.ci-snap__meta{display:block;margin-top:8px;font-size:13px;color:rgba(255,255,255,.76)}
.ci-snap__row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px}
.ci-delta{display:inline-block;padding:5px 9px;background:#1f8a4c;color:#fff;
  font-family:var(--display);font-weight:700;font-size:12px}
.ci-delta.is-up{background:#b42318}
.ci-status{font-size:12px;color:rgba(255,255,255,.68)}

.ci-controls{padding:16px;background:var(--karta);border:1px solid var(--linka)}
.ci-control-label{display:block;margin:0 0 8px;font-family:var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tichy)}
.ci-chips{display:flex;gap:8px;flex-wrap:wrap}
.ci-chips button,.ci-months button{font-family:var(--display);font-weight:700;font-size:12.5px;
  padding:8px 13px;color:var(--inkoust);background:var(--papir);border:1px solid var(--linka);
  cursor:pointer}
.ci-chips button:hover,.ci-months button:hover{border-color:var(--more)}
.ci-chips button[aria-selected=true],.ci-months button[aria-pressed=true]{
  color:#fff;background:var(--more);border-color:var(--more)}
.ci-months{display:flex;gap:5px;overflow-x:auto;padding-top:13px}
.ci-months button{min-width:42px;padding:7px 8px}
.ci-summary{margin:16px 0 0;padding:13px 15px;background:var(--plocha);
  font-size:14px;line-height:1.55;border-left:3px solid var(--more)}

.ci-table-wrap{overflow-x:auto;background:var(--karta);border:1px solid var(--linka)}
.ci-table{width:100%;min-width:700px;border-collapse:collapse;font-size:13.5px}
.ci-table th,.ci-table td{padding:11px 13px;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--linka)}
.ci-table th{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tichy);background:var(--plocha)}
.ci-table tr:last-child td{border-bottom:0}
.ci-table tr.is-selected{background:color-mix(in srgb,var(--akcent) 10%,transparent)}
.ci-table .num{font-weight:700;font-variant-numeric:tabular-nums}
.ci-table a{font-weight:700;color:var(--more)}
.ci-table a:hover{color:var(--akcent)}

.ci-chart{margin-top:16px;padding:16px;background:var(--karta);border:1px solid var(--linka)}
.ci-chart__head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-family:var(--display);font-weight:700;font-size:13px}
.ci-chart__legend{font-family:var(--text);font-weight:400;font-size:11.5px;color:var(--tichy)}
.ci-bars{display:grid;grid-template-columns:repeat(12,minmax(38px,1fr));gap:6px;
  align-items:end;min-height:190px;margin-top:14px;overflow-x:auto}
.ci-bar{display:flex;min-width:38px;height:170px;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:5px}
.ci-bar__val{font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tichy)}
.ci-bar__col{width:100%;min-height:8px;background:#f3b183}
.ci-bar.is-current .ci-bar__col{background:var(--more)}
.ci-bar.is-best .ci-bar__col{background:#1f8a4c}
.ci-bar__m{font-family:var(--display);font-size:10px;font-weight:700;color:var(--tichy)}

.ci-score{display:grid;gap:8px}
.ci-score-row{display:grid;grid-template-columns:145px 1fr 85px 105px 48px;gap:12px;
  align-items:center;padding:13px 15px;background:var(--karta);border:1px solid var(--linka)}
.ci-score-row b{font-family:var(--display);font-size:14.5px}
.ci-score-row span{font-size:12px;color:var(--tichy)}
.ci-meter{height:8px;overflow:hidden;background:var(--plocha)}
.ci-meter i{display:block;height:100%;background:linear-gradient(90deg,#1f8a4c,var(--akcent))}
.ci-score-row .score{text-align:right;font-family:var(--display);font-size:20px;font-weight:800;
  color:var(--inkoust);font-variant-numeric:tabular-nums}

.ci-method{padding:20px;background:var(--karta);border:1px solid var(--linka)}
.ci-method ol{margin:10px 0 0;padding-left:20px;color:var(--tichy);font-size:14px;line-height:1.6}
.ci-method li{margin-bottom:7px}
.ci-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--tichy)}
.ci-links{display:flex;gap:16px;flex-wrap:wrap;margin:clamp(22px,4vw,34px) 0 clamp(38px,6vw,76px);
  padding:15px;background:var(--plocha);font-family:var(--display);font-weight:700;font-size:13px}
.ci-links a{color:var(--more)}
.ci-links a:hover{color:var(--akcent)}


/* ——— /o-webu/ — stroj času ———————————————————————————————————————————————
 * Tmavá sekce o dvou sloupcích: vlevo text s milníky, vpravo dobové okno
 * prohlížeče. Panely roků přepíná JS třídou .is-active; skrytí zbytku musí
 * zajistit CSS, jinak se vykreslí všech osm podob webu pod sebou.
 */
.timemachine{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  margin:clamp(22px,4vw,34px) 0 0;background:var(--more-tmavy);color:#fff;overflow:hidden}
.timemachine__copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4vw,56px) clamp(22px,3.4vw,48px);font-size:16.5px;line-height:1.65}
.timemachine .eyebrow,.timemachine .eyebrow--lg{display:block;margin:0 0 18px;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:#ffc9a6}
.timemachine__copy>p{margin:0;max-width:46ch;color:rgba(255,255,255,.86)}
.timemachine__milestones{margin:30px 0 0;padding:6px 0 0;border-top:1px solid rgba(255,255,255,.2)}
.timemachine__milestones>div{display:flex;gap:16px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.timemachine__milestones>div:last-child{border-bottom:0}
.timemachine__milestones .yr{flex:none;width:44px;font-family:var(--mono);font-size:13px;
  color:#ffc9a6}
.timemachine__milestones .txt{font-size:14.5px;color:rgba(255,255,255,.9)}
.timemachine__tabs{display:flex;gap:9px;flex-wrap:wrap;margin:28px 0 0}
.tm-tab{display:inline-flex;padding:9px 15px;font-family:var(--display);font-weight:700;
  font-size:13.5px;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.32);
  cursor:pointer}
.tm-tab:hover{border-color:rgba(255,255,255,.65)}
.tm-tab.is-active{background:var(--akcent);border-color:var(--akcent)}
.timemachine__note{margin:20px 0 0;font-size:13px;color:rgba(255,255,255,.62)}
/* Dobové okno: stylizovaná náhrada Internet Exploreru, proto šedé rámy
   a mono font — nejsou to barvy Výpravy, ale rekvizita. */
.timemachine__browser{align-self:center;margin:clamp(22px,3.4vw,48px);background:#e9e9e0;
  border:1px solid rgba(0,0,0,.3);box-shadow:0 20px 50px rgba(0,0,0,.4);overflow:hidden}
.retro-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:linear-gradient(#fdfdfb,#e4e4dc);border-bottom:1px solid #b9b9ac}
.retro-bar i{display:block;width:22px;height:16px;background:#dcdcd2;border:1px solid #9a9a8d}
.retro-bar .url{flex:1;padding:4px 10px;background:#fff;border:1px solid #9a9a8d;
  font-family:var(--mono);font-size:12.5px;color:#333;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.retro-bar .ie{font-family:var(--mono);font-size:11px;color:#6a6a5d;white-space:nowrap}
.retro-view{max-height:560px;overflow:hidden;background:#fff}
.tm-panel{display:none}
.tm-panel.is-active{display:block}
.tm-shot{margin:0}
.tm-shot__img,.tm-shot img{display:block;width:100%}
.tm-shot figcaption{padding:8px 16px;background:#efeee4;border-top:1px solid #c9c9bb;
  font-family:var(--mono);font-size:11px;color:#6a6a5d;text-align:center}


@media (max-width:900px){
  .timemachine__browser{margin:0 clamp(16px,4vw,30px) clamp(22px,4vw,34px)}
}
@media (max-width:800px){
  .ci-hero{grid-template-columns:1fr}
  .ci-score-row{grid-template-columns:1fr 1fr}
  .ci-score-row .meter-wrap{grid-column:1/-1}
  .ci-table{min-width:620px}
}