/* =========================================================
   Termovize: obhlídkový list v noční verzi
   Noční modrá jako u kamer, aby obě ukázky byly jedna rodina. Teplo ukazují jen
   data: místnosti v náčrtu se barví podle potřeby chlazení
   na m³ (stupnice inferno, jako termokamera), okna na slunci
   září. Ledová = jednotky, chlad a hlavní akce.
   Písmo Archivo ve dvou šířkách: úzké nadpisy a čísla, plné tělo.
   ========================================================= */

:root {
  color-scheme: dark;
  --night:   #0b1530;  /* pozadí, noční modrá jako u ukázky kamer */
  --screen:  #081026;  /* plocha náčrtu, displej termokamery */
  --deep:    #101d3d;  /* panely a karty místností */
  --field:   #15254a;  /* pole k vyplnění */
  --raised:  #1c2f5a;  /* najetí myší */
  --line:    #213661;  /* vlasová linka */
  --line-2:  #33508a;  /* rámy polí a panelů */
  --text:    #eef3ff;
  --muted:   #9fb0d4;  /* druhý plán */
  --outline: #6f86c0;  /* obrysy domu a zdí */
  --ice:     #7ff0ff;  /* jednotky, chlad, hlavní akce */
  --ice-ink: #05121c;  /* text na ledové ploše */
  --ice-dim: rgba(127, 240, 255, 0.14);
  --sun:     #ffe9a0;  /* okna na slunci, nejteplejší místo */
  --alert:   #ff8a8a;
  /* termostupnice potřeby chlazení, 30–80 W/m³ — jen data, nikdy text */
  --t30: #bc3754; --t40: #dd513a; --t50: #f37819;
  --t60: #fca50a; --t70: #f6d746; --t80: #fcffa4;
  --heat-scale: linear-gradient(90deg, var(--t30), var(--t40), var(--t50), var(--t60), var(--t70), var(--t80));
  --narrow: 72%;       /* šířka písma pro nadpisy a čísla */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] { display: none !important; }
.hidden { display: none !important; }

::selection { background: rgba(127, 240, 255, 0.3); color: #fff; }

h1, h2, h3 {
  font-stretch: var(--narrow);
  font-weight: 700;
  margin: 0;
}

a { color: var(--ice); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }

button, label { -webkit-tap-highlight-color: transparent; }

.noscript-note {
  margin: 0; padding: 14px 20px;
  background: var(--alert); color: #1d0b10; font-size: 0.95rem;
}

/* ---------- List ---------- */

.sheet {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 40px) 0;
}

/* ---------- Záhlaví ---------- */

.masthead { padding-bottom: clamp(32px, 5vw, 60px); }

.recipient {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  margin: 0 0 clamp(22px, 4vw, 40px);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}

.recipient b { color: var(--text); font-weight: 600; }

.masthead-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-stretch: 68%;
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}

.standfirst {
  margin: 0 0 10px;
  max-width: 54ch;
  font-size: 1.04rem;
  color: #d2dcf2;
}

.fineprint {
  margin: 0 0 26px;
  max-width: 60ch;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
}

.claims-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  max-width: 620px;
}

.claims-head {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-stretch: 85%;
  font-weight: 600;
  color: var(--text);
}

.claims { list-style: none; margin: 0; padding: 0; }

.claims li {
  padding: 8px 0 8px 20px;
  border-top: 1px solid var(--line);
  position: relative;
  font-size: 0.95rem;
  font-stretch: 90%;
  line-height: 1.35;
  color: #d2dcf2;
}

.claims li:last-child { border-bottom: 1px solid var(--line); }

.claims li::before {
  content: ""; position: absolute;
  left: 1px; top: 14px;
  width: 8px; height: 8px;
  background: var(--ice);
}

.claims.is-later li::before {
  background: transparent;
  border: 1.5px solid var(--ice);
}

/* náčrt v záhlaví — ukázka výstupu dřív, než se cokoli vyplní */

.masthead-plan { margin: 0; }
.masthead-plan svg { width: 100%; height: auto; display: block; }

.masthead-plan figcaption,
.plan-fig figcaption {
  margin-top: 10px;
  max-width: 62ch;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
}

/* stupnice pod náčrtem, jako na displeji termokamery */

.heat-scale {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  font-size: 0.78rem;
  font-stretch: 85%;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.heat-scale i { flex: 1; height: 6px; background: var(--heat-scale); }

/* ---------- Jazyk náčrtu ---------- */

.plan { width: 100%; height: auto; display: block; background: var(--screen); }

.plan .frame { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.plan .house { fill: none; stroke: var(--outline); stroke-width: 2.2; }  /* obvodové zdi */
.plan .part  { fill: none; stroke: rgba(241, 238, 251, 0.28); stroke-width: 1; }  /* příčky */
.plan .hatch { stroke: var(--line-2); stroke-width: 1; }  /* nechlazená část domu */
.plan .north { fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.plan .win   { stroke: #d6e0f7; stroke-width: 3.2; }  /* světlá, ať se liší od obvodové zdi */
.plan .win.is-sun { stroke: var(--sun); stroke-width: 4; }
.plan .idu   { fill: var(--ice); }
.plan .air   { fill: none; stroke: var(--ice); stroke-width: 1.3; opacity: 0.65; }
.plan .route { fill: none; stroke: var(--ice); stroke-opacity: 0.7; stroke-width: 1.3; stroke-dasharray: 5 4; }
.plan .odu   { fill: var(--deep); stroke: var(--outline); stroke-width: 1.3; }
.plan .fan   { fill: none; stroke: var(--ice); stroke-width: 1.4; }
.plan .cold  { transform-box: fill-box; }  /* počátek u zdi s jednotkou, inline u každé místnosti */

/* tmavý lem písma, aby se dalo číst i přes nejteplejší místo */
.plan text {
  fill: var(--text);
  stroke: var(--screen);
  stroke-width: 2.6px;
  stroke-linejoin: round;
  paint-order: stroke;
  font-stretch: 80%;
}

.plan .t-name, .plan .t-name2 { font-size: 13px; font-weight: 600; }  /* t-name2: druhý řádek názvu v náčrtu */
.plan .t-meta { font-size: 11px; fill: var(--muted); }
.plan .t-kw   { font-size: 15px; font-weight: 700; fill: var(--ice); }
.plan.is-tight .t-name, .plan.is-tight .t-name2 { font-size: 11px; }  /* 3D s mnoha malými místnostmi */
.plan.is-tight .t-kw { font-size: 12.5px; }
.plan .t-route { font-size: 11px; font-weight: 600; fill: var(--ice); }
.plan .t-odu  { font-size: 11px; font-weight: 600; }
.plan .t-north { font-size: 11px; font-weight: 700; fill: var(--muted); }
.plan .t-panel { font-size: 12px; font-weight: 600; fill: var(--muted); letter-spacing: 0.04em; }
.plan .t-ghost { font-size: 11px; fill: var(--muted); }
.plan .t-drop  { font-size: 10px; font-weight: 700; fill: var(--ice); }

/* podkroví, byt a okolí domu v náčrtu */
.plan .win-roof { fill: rgba(214, 224, 247, 0.22); stroke: #d6e0f7; stroke-width: 1.4; }  /* střešní okno */
.plan .win-roof.is-sun { fill: rgba(255, 233, 160, 0.3); stroke: var(--sun); }
.plan .deck   { fill: var(--screen); fill-opacity: 0.6; }  /* podlaha podkroví: ve 3D přes ni prosvítá podlaží pod ní */
.plan .party-wall { stroke: var(--outline); stroke-width: 0.8; }  /* společná zeď se sousedem */
.plan .ghost  { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 4 3; }  /* soused */
.plan .odu.ghost { fill: none; stroke: var(--outline); stroke-dasharray: 3 2; }  /* venkovní v druhém panelu */
.plan .drop   { fill: var(--ice); }  /* tady trasa sleduje fasádu dolů nebo nahoru */
.plan .balcony { fill: rgba(111, 134, 192, 0.14); stroke: var(--outline); stroke-width: 0.8; }
.plan .rail   { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.plan .annex  { stroke: var(--outline); stroke-width: 1.2; }

/* ---------- 3D pohled: maketa domu bez stropů, podkroví pod střechou ---------- */

.plan .plate { fill: #0d1838; }

.plan .slab polygon { stroke: var(--line-2); stroke-width: 1; stroke-linejoin: round; }
.plan .slab .f1 { fill: #0c1532; }
.plan .slab .f2 { fill: #091129; }

.plan .solids polygon { stroke-linejoin: round; }
.plan .wall { stroke: var(--outline); stroke-width: 0.9; }
.plan .wall.far  { fill: rgba(21, 37, 74, 0.9); }    /* vzdálená zeď zevnitř */
.plan .wall.near { fill: rgba(16, 29, 61, 0.4); }    /* bližší zeď průsvitně, ať je vidět podlaha */
.plan .wall.part { fill: rgba(21, 37, 74, 0.6); stroke-width: 0.7; }  /* příčka mezi místnostmi */
.plan .win3d { fill: var(--muted); opacity: 0.7; }
.plan .win3d.is-sun { fill: var(--sun); opacity: 1; }
.plan .solids .f1 { fill: #17264d; stroke: var(--outline); stroke-width: 1; }
.plan .solids .f2 { fill: #111c3c; stroke: var(--outline); stroke-width: 1; }
.plan .solids .lid { fill: #22335f; stroke: var(--outline); stroke-width: 1; }
.plan .fan3d { fill: none; stroke: var(--ice); stroke-width: 1.4; }
.plan .solids .idu3d polygon { fill: var(--ice); stroke: none; }
.plan .solids .idu3d .f2 { fill: #4fc6d8; }
.plan .air3d { fill: none; stroke: var(--ice); stroke-width: 1.1; stroke-linecap: round; opacity: 0.6; }
.plan .route3d { fill: none; stroke: var(--ice); stroke-opacity: 0.85; stroke-width: 1.4; stroke-dasharray: 5 4; stroke-linejoin: round; }  /* trasa po fasádě */
.plan .wall.empty { fill: rgba(16, 29, 61, 0.35); }  /* nechlazené podlaží pod podkrovím */
.plan .wall.party.far { fill: rgba(27, 44, 86, 0.95); }  /* společná zeď se sousedem */
.plan .roof3d { fill: var(--outline); fill-opacity: 0.12; stroke: var(--outline); stroke-width: 0.8; }  /* vzdálená šikmina */
.plan .ridge  { fill: none; stroke: var(--outline); stroke-width: 1.6; stroke-linecap: round; }
.plan .roofwin { fill: rgba(214, 224, 247, 0.35); stroke: #d6e0f7; stroke-width: 0.8; opacity: 1; }
.plan .roofwin.is-sun { fill: rgba(255, 233, 160, 0.55); stroke: var(--sun); }
.plan .solids .ghost3d polygon { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 4 3; }  /* jen obrys */
.plan .ghost-edge { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 4 3; }  /* nechlazené podlaží s venkovní jednotkou: celý obrys */
.plan .solids .ghost-wall { fill: rgba(111, 134, 192, 0.08); stroke: none; }  /* fasáda, na které visí venkovní jednotka */
.plan .brk { fill: none; stroke: var(--outline); stroke-width: 1; }  /* zlom: dům pokračuje dolů */
.plan .bracket { fill: none; stroke: var(--outline); stroke-width: 1.3; stroke-linecap: round; }
.plan .solids .feet polygon { fill: #33477a; stroke: none; }
.plan .solids .odu-shadow { fill: #050b1c; fill-opacity: 0.55; stroke: none; }  /* stín jednotky na střeše, zemi nebo balkoně */
.plan .solids .balc3d polygon { fill: #1c2f5a; stroke: var(--outline); stroke-width: 0.8; }
.plan .rail3d { fill: none; stroke: var(--muted); stroke-width: 1.1; stroke-linejoin: round; }
.plan .solids .annex3d .f1 { fill: rgba(23, 38, 77, 0.95); }
.plan .solids .annex3d .f2 { fill: rgba(17, 28, 60, 0.95); }
.plan .solids .annex3d .lid { fill: #22335f; }
.plan .roofslab { fill: #2a3d6e; fill-opacity: 0.6; stroke: var(--outline); stroke-width: 1.1; }  /* plochá střecha: plná plocha, na které jednotka stojí (průsvitná vypadala jako jednotka uvnitř bytu) */
.plan .parapet { fill: none; stroke: var(--outline); stroke-width: 0.9; }

.plan.is-3d { cursor: grab; touch-action: pan-y; }
.plan.is-3d:active { cursor: grabbing; }

.plan-hint { margin: 8px 0 0; font-size: 0.8rem; color: var(--muted); }
.plan-note { margin: 8px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }

/* přepínač náčrt / 3D nad výsledkem */
.view-switch {
  display: inline-flex;
  margin: 0 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  overflow: hidden;
  background: var(--field);
}

.view-switch label { position: relative; cursor: pointer; }
.view-switch label + label { border-left: 1px solid var(--line); }
.view-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.view-switch span {
  display: block;
  padding: 6px 16px;
  font-size: 0.92rem;
  font-stretch: 85%;
  color: var(--muted);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.view-switch label:hover span { background: var(--raised); color: var(--text); }

.view-switch input:checked + span {
  background: var(--ice-dim);
  color: #d8fbff;
  box-shadow: inset 0 -2px 0 var(--ice);
}

.view-switch input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: -2px; }

/* z jednotek proudí studený vzduch */
.plan .air, .plan .air3d { animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }

/* Jeden okamžik po výpočtu: obrys, místnosti se zahřejí, naskočí jednotky
   a od nich se rozlije chlad. */

.plan.is-drawing .house,
.plan.is-drawing .part {
  animation: draw 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

.plan.is-drawing .heat { animation: fade-in 600ms ease 200ms both; }

.plan.is-drawing .late {
  opacity: 0;
  animation: show 320ms ease forwards;
  animation-delay: calc(700ms + var(--i, 0) * 80ms);
}

.plan.is-drawing .cold { animation: cool 1200ms cubic-bezier(0.25, 0.7, 0.2, 1) 1000ms both; }
.plan.is-drawing .cold.cold-y { animation-name: cool-y; }  /* jednotka na severní nebo jižní zdi */

@keyframes draw {
  from { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
  to   { stroke-dasharray: 1400; stroke-dashoffset: 0; }
}

@keyframes show { to { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes cool { from { transform: scaleX(0); } }
@keyframes cool-y { from { transform: scaleY(0); } }

/* ---------- Pracovní plocha ---------- */

.work {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
  border-top: 1px solid var(--line-2);
  padding-top: 30px;
}

.col-title {
  font-size: 1.75rem;
  font-stretch: 70%;
  font-weight: 800;
  line-height: 1.1;
}

.col-lede { margin: 4px 0 18px; font-size: 0.94rem; color: var(--muted); }

.col-out { position: sticky; top: 20px; }

/* ---------- Formulář ---------- */

.group {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 30px 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.opt {
  font-size: 0.78rem; font-weight: 400; font-stretch: 100%;
  color: var(--muted);
}

.group-note { margin: 8px 0 16px; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }

.field { margin-bottom: 14px; }

.field > label,
.field-label {
  display: block;
  font-size: 0.86rem; font-weight: 500;
  color: #d2dcf2;
  margin-bottom: 6px;
}

.field input[type="text"],
.field input[type="number"],
.field select {
  width: 100%;
  padding: 10px 12px;
  font: inherit; font-size: 1rem;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239FB0D4' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

.field input::placeholder { color: #6a7ca6; }

.field input:hover,
.field select:hover { border-color: #4a69a6; }

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--ice);
  box-shadow: 0 0 0 3px var(--ice-dim);
}

.field input.is-bad { border-color: var(--alert); box-shadow: 0 0 0 3px rgba(255, 138, 138, 0.18); }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.hint { margin: 6px 0 0; font-size: 0.83rem; line-height: 1.5; color: var(--muted); }

.unit-field { position: relative; }
.unit-field input { padding-right: 40px; }

.unit-field .unit {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 0.9rem; color: var(--muted); pointer-events: none;
}

/* pruh štítků (typ objektu, zateplení, orientace, umístění) */

.types {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  overflow: hidden;
  background: var(--field);
}

.type {
  position: relative; flex: 1 1 auto;
  border-right: 1px solid var(--line);
  cursor: pointer;
}

.type:last-child { border-right: none; }
.type input { position: absolute; opacity: 0; width: 0; height: 0; }

.type span {
  display: block;
  padding: 9px 10px;
  font-size: 0.98rem;
  font-stretch: 85%;
  text-align: center;
  white-space: nowrap;
  color: var(--muted);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.type:hover span { background: var(--raised); color: var(--text); }

.type:has(input:checked) span {
  background: var(--ice-dim);
  color: #d8fbff;
  box-shadow: inset 0 -2px 0 var(--ice);
}

.type:has(input:focus-visible) span { outline: 2px solid var(--ice); outline-offset: -2px; }

/* jih a západ přidávají sluneční zátěž: teplá tečka jako okna v náčrtu */
.type input[value="J"] + span::after,
.type input[value="Z"] + span::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--t60);
  vertical-align: 2px;
}

.types.is-stacked { flex-direction: column; }
.types.is-stacked .type { border-right: none; border-bottom: 1px solid var(--line); }
.types.is-stacked .type:last-child { border-bottom: none; }
.types.is-stacked .type span { text-align: left; padding: 10px 12px; white-space: normal; }
.type-hint { display: block; font-size: 0.8rem; color: var(--muted); }

/* zaškrtnutí */

.toggles { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 2px; }

.toggle {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  font-size: 0.93rem; font-weight: 400;
}

.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.box {
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  border: 1.5px solid #4a69a6; background: var(--field);
  border-radius: 4px;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}

.box::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 10px; height: 5px;
  border-left: 2.4px solid var(--ice-ink); border-bottom: 2.4px solid var(--ice-ink);
  transform: translateY(-2px) rotate(-45deg) scale(0.6);
  opacity: 0; transition: opacity 0.12s, transform 0.12s;
}

.toggle:hover .box { border-color: var(--muted); }
.toggle input:checked + .box { background: var(--ice); border-color: var(--ice); }
.toggle input:checked + .box::after { opacity: 1; transform: translateY(-2px) rotate(-45deg) scale(1); }
.toggle input:focus-visible + .box { outline: 2px solid var(--ice); outline-offset: 2px; }
/* volba, která u téhle místnosti nedává smysl: velká okna u místnosti bez oken */
.toggle:has(input:disabled) { cursor: not-allowed; color: var(--muted); }
.toggle input:disabled + .box { opacity: 0.45; border-color: #4a69a6; }

/* místnosti: levý okraj se barví podle potřeby chlazení na m³ */

.rooms { display: grid; gap: 14px; }

.room-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--heat, var(--t30));
  padding: 12px 14px 14px;
  background: var(--deep);
  transition: border-left-color 0.3s;
}

.room-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}

.room-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }

.room-no {
  font-size: 1.12rem; font-weight: 700;
  font-stretch: var(--narrow);
}

.room-rate {
  font-size: 0.82rem;
  font-stretch: 85%;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.room-rm {
  background: none; border: none; padding: 0;
  font: inherit; font-size: 0.85rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.room-rm:hover { color: var(--alert); }

.room-card .field:last-child { margin-bottom: 0; }
.room-card .route-hint { margin: -6px 0 14px; }  /* trasa kratší než svislý kus k venkovní jednotce */

.add-room { margin-top: 12px; }

/* ---------- Tlačítka ---------- */

.btn {
  display: inline-block;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 1.1rem; font-weight: 700;
  font-stretch: 80%;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.2s;
}

.btn-solid { background: var(--ice); border-color: var(--ice); color: var(--ice-ink); }

.btn-solid:hover:not(:disabled) {
  background: #b5f7ff;
  border-color: #b5f7ff;
  box-shadow: 0 0 0 4px rgba(127, 240, 255, 0.14), 0 10px 32px -10px rgba(127, 240, 255, 0.6);
}

.btn-solid:disabled { opacity: 0.6; cursor: progress; }

.btn-quiet { background: transparent; color: var(--text); }
.btn-quiet:hover:not(:disabled) { background: var(--raised); border-color: #4a69a6; }
.btn-quiet:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-wide { display: block; width: 100%; margin-top: 22px; text-align: center; }
.btn-small { padding: 8px 16px; font-size: 1rem; }

.example-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 0 0 6px;
}

.example-row .hint { margin: 0; flex: 1 1 180px; }

.form-err { margin-top: 14px; font-size: 0.88rem; color: var(--alert); }
.form-err:empty { margin-top: 0; }

/* ---------- Prázdný list ---------- */

.empty { padding: 8px 0 40px; }

.empty-sheet { width: 100%; height: auto; display: block; background: var(--screen); }
.empty-sheet rect {
  fill: none; stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: 7 6;
}

.empty p {
  margin: 16px 0 0;
  max-width: 44ch;
  font-size: 1.1rem;
  font-stretch: 85%;
  color: var(--muted);
}

/* ---------- Razítko ---------- */

.stamp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  margin: 0 0 22px;
  border: 1px solid var(--line-2);
  background: var(--deep);
}

.stamp > div {
  padding: 8px 12px;
  border-right: 1px solid var(--line);
}

.stamp > div:last-child { border-right: none; }

.stamp dt {
  font-size: 0.72rem; font-weight: 500; color: var(--muted);
  margin-bottom: 1px;
}

.stamp dd {
  margin: 0;
  font-size: 1.02rem; font-weight: 600; line-height: 1.25;
  font-stretch: 85%;
  overflow-wrap: anywhere;
}

/* ---------- Náčrt ve výsledku ---------- */

.plan-block { margin-bottom: 28px; }
.plan-fig { margin: 0; }

/* ---------- Tabulka místností ---------- */

.section-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 8px;
}

.rooms-wrap { overflow-x: auto; margin-bottom: 10px; }

.rooms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.rooms-table th,
.rooms-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.rooms-table thead th {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

.rooms-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rooms-table td b {
  font-size: 1.15rem; font-weight: 800;
  font-stretch: var(--narrow);
  color: var(--ice);
}

.calc {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
}

/* velká místnost s víc jednotkami: vysvětlení, ne chyba */
.calc-note {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--ice);
}

.setup-note {
  margin: 0 0 26px;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ---------- Tři varianty: jeden srovnávací panel, ne tři karty ---------- */

.variants {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line-2);
  background: var(--deep);
}

.variant {
  position: relative;
  display: flex; flex-direction: column;
  padding: 18px 16px 16px;
  border-right: 1px solid var(--line);
}

.variant:last-child { border-right: none; }

.variant.is-rec {
  background: #14254a;
  box-shadow: inset 0 2px 0 var(--ice);
}

.v-tag {
  position: absolute; top: 16px; right: 14px;
  padding: 1px 8px;
  border-radius: 3px;
  background: var(--ice); color: var(--ice-ink);
  font-size: 0.78rem; font-weight: 700;
  font-stretch: 85%;
}

.v-name {
  display: block;
  font-size: 1.45rem; font-weight: 800; line-height: 1.1;
  font-stretch: var(--narrow);
}

.v-sub { display: block; margin-top: 3px; font-size: 0.82rem; line-height: 1.35; color: var(--muted); }

/* co je ve všech variantách stejné, jednou nad kartami */
.v-shared { margin: 0 0 14px; max-width: 70ch; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }

/* čím se řada liší: hlavní obsah karty */
.v-perks { list-style: none; margin: 12px 0 0; padding: 0; }

.v-perks li {
  position: relative;
  padding: 3px 0 3px 16px;
  font-size: 0.86rem;
  line-height: 1.35;
}

.v-perks li::before {
  content: ""; position: absolute;
  left: 1px; top: 0.62em;
  width: 7px; height: 7px;
  background: var(--ice);
}

.v-diff { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--muted); }

.v-lines { list-style: none; margin: 14px 0 0; padding: 0; flex: 1; }

.v-lines li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  line-height: 1.35;
}

.v-lines li span:first-child { color: var(--muted); }
.v-lines li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

.v-total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  text-align: right;
}

.v-total span { display: block; font-size: 0.8rem; line-height: 1.2; color: var(--muted); }

.v-total b {
  display: block;
  font-size: 2rem; font-weight: 800; line-height: 1.1;
  font-stretch: var(--narrow);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.variant.is-rec .v-total b { color: var(--ice); }

/* ---------- Doslov ---------- */

.note {
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--ice);
  font-size: 0.86rem; line-height: 1.6; color: var(--muted);
  max-width: 72ch;
}

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ---------- Tiráž ---------- */

.colophon {
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--line-2);
  padding: 14px 0 44px;
}

.colophon dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 28px;
  margin: 0;
}

.colophon dt { font-size: 0.72rem; color: var(--muted); }
.colophon dd { margin: 0; font-size: 0.92rem; }

/* ---------- Užší obrazovky ---------- */

@media (max-width: 1100px) {
  .variants { grid-template-columns: minmax(0, 1fr); }
  .variant { border-right: none; border-bottom: 1px solid var(--line); }
  .variant:last-child { border-bottom: none; }
}

@media (max-width: 1000px) {
  /* na telefonu nejdřív nadpis a hned náčrt, text až pod ním */
  .masthead-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .masthead-text { display: contents; }
  .masthead-grid h1 { order: 1; }
  .masthead-plan { order: 2; max-width: 560px; margin-bottom: 26px; }
  .standfirst { order: 3; }
  .fineprint { order: 4; }
  .claims-grid { order: 5; }
  .work { grid-template-columns: minmax(0, 1fr); }
  .col-out { position: static; }
  .col-form { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .variants { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .variant { border-right: 1px solid var(--line); border-bottom: none; }
  .variant:last-child { border-right: none; }
}

@media (max-width: 720px) {
  .variants { grid-template-columns: minmax(0, 1fr); }
  .variant { border-right: none; border-bottom: 1px solid var(--line); }
  .variant:last-child { border-bottom: none; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .rooms-table thead { display: none; }
  .rooms-table, .rooms-table tbody { display: block; }
  .rooms-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
  }
  .rooms-table td { padding: 0; border: none; }
  .rooms-table td.r-name { grid-column: 1 / -1; margin-bottom: 4px; font-weight: 500; }
  .rooms-table td.n { text-align: left; }
  .rooms-table td[data-l]::before {
    content: attr(data-l) ": ";
    color: var(--muted);
    font-size: 0.8rem;
  }
  .claims-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .types.is-wrap .type { flex: 1 1 33%; border-bottom: 1px solid var(--line); }
  .rooms-table { font-size: 0.84rem; }
  .rooms-table th, .rooms-table td { padding: 7px 6px; }
}

/* ---------- Bez :has() ---------- */

@supports not selector(:has(*)) {
  .type input:checked ~ span {
    background: var(--ice-dim);
    color: #d8fbff;
    box-shadow: inset 0 -2px 0 var(--ice);
  }
}

/* ---------- Omezený pohyb ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.v-lines small { display: block; margin-top: 1px; font-size: 0.76rem; color: var(--muted); }