/* ============================================================================
   pages/grafy.css
   Stránka Grafy — Nordic Clean (Fáze 6 redesignu, 04/2026).
   Vzor: design_handoff/Grafy.html.
   Barvy ze design-tokens.css, lokální aliasy pro tokeny z designu.
   ============================================================================ */

.grafy-wrap {
  --temp-hot:#D85A2F; --temp-warm:#E89B4F; --temp-mild:#F4D07A;
  --temp-cool:#A8C1DE; --temp-cold:#4F82BF; --temp-frost:#1B4B8C;
  --rain:#3B6DB8; --rain-heavy:#0A4A08;
  --line-strong:#DDE1EB;
  --blue-50:#EEF1FA; --blue-100:#DCE3F3; --blue-deep:#001550;
  --green-50:#F1F9EA; --green-100:#E1F2D1;
  --warn:#E8994F; --alert:#C03030; --info:#3B6DB8; --gold:#B79A4F;
  --shadow-card:0 4px 24px rgba(15,25,51,.04);
  --shadow-card-hover:0 12px 32px rgba(15,25,51,.07);

  /* Sdílený layout token — na FHD 1320 px, na velkých monitorech do 1800 px */
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 28px 40px 80px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.5;
}
.grafy-wrap * { box-sizing: border-box; }
.grafy-wrap em { font-style: italic; }
.grafy-wrap a { color: inherit; text-decoration: none; }
.grafy-wrap h1, .grafy-wrap h2, .grafy-wrap h3, .grafy-wrap h4 { font-weight: 500; margin: 0; }
.grafy-wrap .serif { font-family: 'Instrument Serif', serif; font-weight: 400; }
.grafy-wrap .tab { font-variant-numeric: tabular-nums; }

/* Crumbs + nadpis */
.grafy-wrap .crumbs { font-size: 12px; color: var(--ink-muted); margin-bottom: 12px; }
.grafy-wrap .crumbs a:hover { color: var(--blue); }
.grafy-wrap .page-title {
  font-family: 'Instrument Serif', serif;
  font-size: 64px; font-weight: 400; line-height: 1.05;
  color: var(--ink); letter-spacing: -.01em;
}
.grafy-wrap .page-title em { color: var(--blue); font-style: italic; }
.grafy-wrap .page-sub { font-size: 15px; color: var(--ink-soft); max-width: 760px; margin-top: 12px; line-height: 1.55; }
.grafy-wrap .page-sub a { color: var(--blue); border-bottom: 1px solid var(--blue-100); }

/* ============= SUMMARY STRIP ============= */
.grafy-wrap .strip {
  margin-top: 28px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.grafy-wrap .strip-cell { padding: 18px 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.grafy-wrap .strip-cell:last-child { border-right: 0; }
.grafy-wrap .strip-cell .lbl { font-size: 10.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }
.grafy-wrap .strip-cell .val {
  font-family: 'Instrument Serif', serif;
  font-size: 28px; color: var(--ink); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.grafy-wrap .strip-cell .val .u { font-size: 14px; color: var(--ink-muted); margin-left: 3px; }
.grafy-wrap .strip-cell .sub { font-size: 11.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.grafy-wrap .strip-cell .sub strong { color: var(--ink-soft); font-weight: 500; }

/* ============= FEATURED CHART ============= */
.grafy-wrap .featured {
  margin-top: 24px;
  background: var(--surface, #fff);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 28px 32px; box-shadow: var(--shadow-card);
}
.grafy-wrap .feat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.grafy-wrap .feat-title { display: flex; flex-direction: column; gap: 6px; }
.grafy-wrap .feat-title h2 { font-family: 'Instrument Serif', serif; font-size: 32px; font-weight: 400; }
.grafy-wrap .feat-title h2 em { color: var(--blue); font-style: italic; }
.grafy-wrap .feat-title .meta { font-size: 12.5px; color: var(--ink-muted); display: flex; align-items: center; gap: 10px; }
.grafy-wrap .feat-title .meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 3px var(--green-50);
  animation: grafyLiveDot 2s ease-in-out infinite;
}
@keyframes grafyLiveDot { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.grafy-wrap .range-picker {
  display: inline-flex; gap: 2px;
  background: var(--bg); padding: 4px; border-radius: 24px;
  border: 1px solid var(--line);
  font-size: 12px;
}
.grafy-wrap .range-picker button {
  padding: 7px 14px; border-radius: 20px; border: 0;
  background: transparent; font-size: 12px; font-weight: 500;
  color: var(--ink-soft); cursor: pointer;
  font-family: inherit; transition: color .15s;
}
.grafy-wrap .range-picker button:hover { color: var(--ink); }
.grafy-wrap .range-picker button.active {
  background: var(--surface, #fff); color: var(--blue);
  box-shadow: 0 1px 3px rgba(0,32,114,.12);
}

.grafy-wrap .feat-meta-row {
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 10px; padding: 12px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.grafy-wrap .feat-stat { display: flex; flex-direction: column; gap: 2px; }
.grafy-wrap .feat-stat .k { font-size: 10.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }
.grafy-wrap .feat-stat .v {
  font-family: 'Instrument Serif', serif; font-size: 22px;
  color: var(--ink); font-variant-numeric: tabular-nums;
  line-height: 1; margin-top: 2px;
}
.grafy-wrap .feat-stat.max .v { color: var(--temp-hot); }
.grafy-wrap .feat-stat.min .v { color: var(--temp-cold); }
.grafy-wrap .feat-stat .t { font-size: 10px; color: var(--ink-faint, #A5ACBF); margin-top: 1px; font-variant-numeric: tabular-nums; }
.grafy-wrap .feat-legend { margin-left: auto; display: flex; gap: 14px; font-size: 11.5px; color: var(--ink-soft); }
.grafy-wrap .feat-legend .swatch { display: inline-flex; align-items: center; gap: 6px; }
.grafy-wrap .feat-legend .swatch i { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.grafy-wrap .feat-legend .swatch .solid { background: var(--temp-warm); }
.grafy-wrap .feat-legend .swatch .ghost { background: #A5ACBF; height: 2px; border-radius: 1px; position: relative; }
.grafy-wrap .feat-legend .swatch .ghost::after {
  content: ''; position: absolute; inset: 0; background-image: linear-gradient(90deg, #A5ACBF 50%, transparent 50%); background-size: 5px 2px;
}
.grafy-wrap .feat-legend .swatch .band { background: rgba(244,208,122,.45); height: 8px; border-radius: 2px; }
.grafy-wrap .feat-legend .swatch .edge-max { background: #E89B4F; opacity: .75; }
.grafy-wrap .feat-legend .swatch .edge-min { background: #3B6DB8; opacity: .65; }
.grafy-wrap .feat-legend .swatch[hidden] { display: none; }

.grafy-wrap .chart-big { width: 100%; height: 340px; position: relative; }
.grafy-wrap .chart-big svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ============= SECTION HEAD ============= */
.grafy-wrap .sh { margin-top: 56px; margin-bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.grafy-wrap .sh .sh-t h2 { font-family: 'Instrument Serif', serif; font-size: 34px; font-weight: 400; color: var(--ink); letter-spacing: -.005em; }
.grafy-wrap .sh .sh-t h2 em { color: var(--blue); font-style: italic; }
.grafy-wrap .sh .sh-sub { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* ============= DASHBOARD GRID ============= */
.grafy-wrap .dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grafy-wrap .dash-card {
  background: var(--surface, #fff); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px;
  transition: box-shadow .2s, transform .15s;
  display: flex; flex-direction: column; gap: 10px; position: relative;
}
.grafy-wrap .dash-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.grafy-wrap .dash-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.grafy-wrap .dash-head .lbl {
  font-size: 11px; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
}
.grafy-wrap .dash-head .lbl .ic {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue-50);
  display: inline-flex; align-items: center; justify-content: center;
}
.grafy-wrap .dash-head .lbl .ic svg { width: 13px; height: 13px; stroke: var(--blue); fill: none; stroke-width: 1.7; }
.grafy-wrap .dash-head .chg { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.grafy-wrap .dash-head .chg.up { color: var(--temp-hot); }
.grafy-wrap .dash-head .chg.dn { color: var(--temp-cold); }

.grafy-wrap .dash-val { display: flex; align-items: baseline; gap: 6px; font-family: 'Instrument Serif', serif; color: var(--ink); }
.grafy-wrap .dash-val .n { font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.grafy-wrap .dash-val .u { font-size: 14px; color: var(--ink-muted); }
.grafy-wrap .dash-spark { width: 100%; height: 50px; margin-top: auto; }
.grafy-wrap .dash-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.grafy-wrap .dash-foot { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-top: 4px; }

/* ikony per veličina */
.grafy-wrap .dash-card.wind .ic { background: var(--green-50); } .grafy-wrap .dash-card.wind .ic svg { stroke: var(--green-deep); }
.grafy-wrap .dash-card.rain .ic { background: #E8F0FB; } .grafy-wrap .dash-card.rain .ic svg { stroke: var(--info); }
.grafy-wrap .dash-card.solar .ic { background: #FFF3DC; } .grafy-wrap .dash-card.solar .ic svg { stroke: var(--warn); }
.grafy-wrap .dash-card.uv .ic { background: #F4E8F6; } .grafy-wrap .dash-card.uv .ic svg { stroke: #7A2D8B; }
.grafy-wrap .dash-card.soil .ic { background: #F0EBDB; } .grafy-wrap .dash-card.soil .ic svg { stroke: var(--gold); }

/* ============= VELKÉ SEKCE ============= */
.grafy-wrap .section {
  background: var(--surface, #fff); border: 1px solid var(--line);
  border-radius: 20px; padding: 28px 32px;
  box-shadow: var(--shadow-card); margin-bottom: 22px;
}
.grafy-wrap .sec-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.grafy-wrap .sec-head h3 { font-family: 'Instrument Serif', serif; font-size: 26px; font-weight: 400; }
.grafy-wrap .sec-head h3 em { color: var(--blue); font-style: italic; }
.grafy-wrap .sec-head .sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 4px; max-width: 520px; }

/* VÍTR */
.grafy-wrap .wind-grid { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: flex-start; }
.grafy-wrap .windrose-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.grafy-wrap .windrose-wrap svg { width: 320px; height: 320px; }
.grafy-wrap .windrose-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 4px; text-align: center; }
.grafy-wrap .windrose-stats .k { font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }
.grafy-wrap .windrose-stats .v { font-family: 'Instrument Serif', serif; font-size: 18px; color: var(--ink); }
.grafy-wrap .wind-chart-wrap { display: flex; flex-direction: column; gap: 10px; }
.grafy-wrap .wind-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.grafy-wrap .wind-chart-title {
  font-size: 13px; color: var(--ink-soft); font-weight: 500;
}
.grafy-wrap .wind-chart-range {
  display: inline-flex; gap: 4px;
  padding: 3px;
  background: var(--bg, #F4EFE5);
  border-radius: 99px;
  border: 1px solid var(--line);
}
.grafy-wrap .wind-range-btn {
  border: 0; background: transparent;
  padding: 5px 12px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-muted);
  border-radius: 99px;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: inherit;
}
.grafy-wrap .wind-range-btn:hover { color: var(--ink); }
.grafy-wrap .wind-range-btn.is-active {
  background: var(--surface, #fff);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(15, 25, 51, .08);
}
/* viewBox grafu je 1200×300 → height 300px drží stejný aspect a brání
   vertikálnímu squashi textu (osy/legenda by jinak vypadaly "rozplácaně"). */
.grafy-wrap .wind-chart { height: 300px; width: 100%; }
.grafy-wrap .wind-chart svg { width: 100%; height: 100%; overflow: visible; }

/* SRÁŽKY (+ EVAPOTRANSPIRACE — sdílí stejnou kostru)
   ────────────────────────────────────────────────────────────────────────
   Layout: graf plnoširoký nahoře, pod ním řada KPI karet (3 sloupce).
   Předtím byl graf vlevo a KPI vpravo (1.5fr | 1fr) — uživatel chtěl víc
   prostoru pro graf, drobnější KPI a sjednotit napříč podobnými sekcemi. */
.grafy-wrap .rain-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.grafy-wrap .rain-chart { height: 280px; width: 100%; }
.grafy-wrap .rain-chart svg { width: 100%; height: 100%; overflow: visible; }
.grafy-wrap .rain-side {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.grafy-wrap .rain-kpi {
  padding: 12px 16px;
  background: linear-gradient(135deg, #F4F8FE, #FAFBFD);
  border: 1px solid var(--line); border-radius: 12px;
}
.grafy-wrap .rain-kpi.ok { background: linear-gradient(135deg, #F1F9EA, #FAFCF7); border-color: var(--green-100); }
.grafy-wrap .rain-kpi.warn { background: linear-gradient(135deg, #FFF3DC, #FDFAEF); border-color: #F2E6BF; }
.grafy-wrap .rain-kpi .k { font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }
.grafy-wrap .rain-kpi .v { font-family: 'Instrument Serif', serif; font-size: 28px; color: var(--rain); line-height: 1; margin-top: 4px; }
.grafy-wrap .rain-kpi.ok .v { color: var(--green-deep); }
.grafy-wrap .rain-kpi.warn .v { color: var(--warn); }
.grafy-wrap .rain-kpi .v .u { font-size: 12px; color: var(--ink-muted); margin-left: 3px; }
.grafy-wrap .rain-kpi .t { font-size: 11px; color: var(--ink-muted); margin-top: 5px; line-height: 1.4; }

/* Wind run pod-sekce uvnitř sekce Vítr — vlastní nadpis + reuse rain-grid kostry */
.grafy-wrap .wrun-block {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.grafy-wrap .wrun-head { margin-bottom: 16px; }
.grafy-wrap .wrun-head h3 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.1;
}
.grafy-wrap .wrun-head h3 em { color: var(--blue); font-style: italic; }
.grafy-wrap .wrun-sub { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
/* Range picker uvnitř wrun-block — sedí nad samotným grafem, KPI karty zůstávají dole */
.grafy-wrap .wrun-block .wind-chart-head { margin-bottom: -8px; }

/* VODNÍ BILANCE (ET vs srážky) — měsíční bar chart na celou šířku */
.grafy-wrap .et-balance-wrap { display: flex; flex-direction: column; gap: 14px; }
.grafy-wrap .et-balance-chart { width: 100%; height: 300px; }
.grafy-wrap .et-balance-chart svg { width: 100%; height: 100%; overflow: visible; }
.grafy-wrap .et-balance-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  justify-content: center;
  padding: 12px 20px;
  background: var(--cream, #FBFAF6);
  border: 1px solid var(--line); border-radius: 12px;
  font-size: 12px; color: var(--ink-soft);
}
.grafy-wrap .et-balance-legend .lg-item { display: inline-flex; align-items: center; gap: 8px; }
.grafy-wrap .et-balance-legend .lg-box {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
}

/* =====================================================================
 * SOLAR + UV
 * Layout: vertikální stack (uživatel chtěl plnoširoký graf, statistiky pod
 * ním v gridu — stejný princip jako srážky).
 *   1) Solar legenda
 *   2) Solar graf (plnoširoký)
 *   3) UV box (plnoširoký, horizontálně organizovaný)
 *   4) 4 statistiky vedle sebe v gridu
 * ===================================================================== */
.grafy-wrap .solar-grid { display: flex; flex-direction: column; gap: 18px; }
.grafy-wrap .solar-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Legenda nad grafem — vytažena ze SVG aby nepřekrývala křivku ve špičce */
.grafy-wrap .solar-chart-legend {
  display: flex; align-items: center; gap: 18px;
  padding: 0 4px;
  font-size: 12px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.grafy-wrap .solar-chart-legend .lg-item {
  display: inline-flex; align-items: center; gap: 8px;
}
.grafy-wrap .solar-chart-legend .lg-line {
  display: inline-block; width: 18px; height: 2.4px;
  border-radius: 2px;
}
.grafy-wrap .solar-chart-legend .lg-line--solid { background: #E8994F; }
.grafy-wrap .solar-chart-legend .lg-line--dashed {
  background: transparent;
  border-top: 1.5px dashed #A5ACBF;
  height: 0;
}

.grafy-wrap .solar-chart { height: 280px; width: 100%; background: linear-gradient(180deg, #FFF8E8, transparent); border-radius: 12px; padding: 8px; }
.grafy-wrap .solar-chart svg { width: 100%; height: 100%; overflow: visible; }
.grafy-wrap .solar-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.grafy-wrap .solar-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px;
}
.grafy-wrap .solar-row .k { font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }
.grafy-wrap .solar-row .v { font-family: 'Instrument Serif', serif; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }

/* UV box — organizovaný do horizontálního layoutu pod grafem */
.grafy-wrap .uv-box { padding: 14px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.grafy-wrap .uv-box .uv-box-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.grafy-wrap .uv-box .k { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.grafy-wrap .uv-box .v-wrap { display: inline-flex; align-items: baseline; gap: 8px; }
.grafy-wrap .uv-box .v-wrap .v { font-family: 'Instrument Serif', serif; font-size: 28px; line-height: 1; color: var(--ink); }
.grafy-wrap .uv-box .v-wrap .label { font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
/* Barva UV — sleduje CSS gradient legendy (5 pásem po 20 %).
   Barvy jsou identické s gradient stops, aby text matchoval legendu 1:1. */
.grafy-wrap .uv-box.uv-low     .v-wrap .v,
.grafy-wrap .uv-box.uv-low     .v-wrap .label { color: #3EA055; }   /* zelená */
.grafy-wrap .uv-box.uv-mid     .v-wrap .v,
.grafy-wrap .uv-box.uv-mid     .v-wrap .label { color: #F5C739; }   /* žlutá (stejně jako gradient) */
.grafy-wrap .uv-box.uv-high    .v-wrap .v,
.grafy-wrap .uv-box.uv-high    .v-wrap .label { color: #E8994F; }   /* oranžová */
.grafy-wrap .uv-box.uv-vhigh   .v-wrap .v,
.grafy-wrap .uv-box.uv-vhigh   .v-wrap .label { color: #C03030; }   /* červená */
.grafy-wrap .uv-box.uv-extreme .v-wrap .v,
.grafy-wrap .uv-box.uv-extreme .v-wrap .label { color: #7A2D8B; }   /* fialová */
.grafy-wrap .uv-scale {
  position: relative; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #3EA055 0% 20%, #F5C739 20% 40%, #E8994F 40% 60%, #C03030 60% 80%, #7A2D8B 80% 100%);
}
.grafy-wrap .uv-marker {
  position: absolute; top: -5px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface, #fff); border: 2px solid var(--ink); transform: translateX(-50%);
  box-shadow: 0 2px 6px rgba(15,25,51,.18);
}
.grafy-wrap .uv-scale-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-muted); margin-top: 8px; text-transform: uppercase; letter-spacing: .06em; }

/* =====================================================================
 * PŮDA & VLHKOST LISTU — design převzat z handoff Grafy.html (verbatim)
 * Layout: vlevo velká karta vlhkosti půdy (1.4fr), vpravo tři teplotní
 * karty + 1 vlhkost listu (1fr). Pod tím průběhový graf přes celou šířku.
 * ===================================================================== */
.grafy-wrap .soil-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 880px) {
  .grafy-wrap .soil-grid { grid-template-columns: 1fr; }
}

/* ---- Levá velká karta: VLHKOST PŮDY 20 cm ---- */
.grafy-wrap .soil-moisture {
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, #FAF6E8 0%, #F2EAD0 100%);
  border: 1px solid #E5D9B2;
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.grafy-wrap .soil-moisture .head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 14px;
}
.grafy-wrap .soil-moisture .lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: #8A7747; font-weight: 600;
}
.grafy-wrap .soil-moisture .lbl em {
  color: var(--ink-muted); font-style: normal; font-weight: 500; margin-left: 6px;
}
.grafy-wrap .soil-moisture .badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: #E1F0D5; color: var(--green-deep); border: 1px solid #C5DAB6;
}
.grafy-wrap .soil-moisture .badge.dry { background: #FBE7D2; color: #A85820; border-color: #F4CFA4; }
.grafy-wrap .soil-moisture .badge.ok  { background: #E1F0D5; color: var(--green-deep); border-color: #C5DAB6; }
.grafy-wrap .soil-moisture .badge.sat { background: #D6E3F4; color: #1F4A8C; border-color: #B5C8E5; }

.grafy-wrap .soil-moisture .val {
  font-family: 'Instrument Serif', serif;
  font-size: 64px; font-weight: 400; line-height: 1;
  color: #3A2E11;
  font-variant-numeric: tabular-nums;
}
.grafy-wrap .soil-moisture .val .u {
  font-size: 22px; color: var(--ink-muted); margin-left: 6px;
  font-style: italic; font-family: 'Instrument Serif', serif;
}

.grafy-wrap .soil-moisture .scale {
  position: relative; height: 14px; margin-top: 18px;
  background: linear-gradient(90deg, #2A6B23 0%, #66BC29 25%, #C5DAB6 45%, #F4D07A 65%, #E89B4F 85%, #C04A14 100%);
  border-radius: 7px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.grafy-wrap .soil-moisture .scale .marker {
  position: absolute; top: -5px;
  width: 24px; height: 24px;
  background: var(--surface, #fff);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.grafy-wrap .soil-moisture .scale-labels {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--ink-muted);
  margin-top: 10px; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.grafy-wrap .soil-moisture .scale-labels span em {
  color: #9A8856; font-style: italic; font-weight: 400; margin-left: 2px;
}
.grafy-wrap .soil-moisture .footer-note {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed #D4C796;
  font-size: 12px; color: var(--ink-soft); line-height: 1.55;
}
.grafy-wrap .soil-moisture .footer-note strong { color: var(--ink); font-weight: 600; }

/* ---- Pravý sloupec ---- */
.grafy-wrap .soil-side {
  display: flex; flex-direction: column; gap: 10px;
}

/* Teplotní karta (3×) */
.grafy-wrap .soil-temp {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 16px; align-items: center;
  padding: 16px 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s, transform .2s;
}
.grafy-wrap .soil-temp:hover {
  border-color: #D4C796;
  transform: translateX(2px);
}
.grafy-wrap .soil-temp .icon {
  width: 56px; height: 64px; position: relative;
}
.grafy-wrap .soil-temp .icon svg {
  width: 100%; height: 100%; display: block; overflow: visible;
}
.grafy-wrap .soil-temp .meta .lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: #8A7747; font-weight: 600;
}
.grafy-wrap .soil-temp .meta .depth {
  font-size: 14px; color: var(--ink); margin-top: 2px;
}
.grafy-wrap .soil-temp .val {
  font-family: 'Instrument Serif', serif;
  font-size: 32px; line-height: 1; color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.grafy-wrap .soil-temp .val .u {
  font-size: 13px; color: var(--ink-muted); margin-left: 3px;
  font-style: italic; font-family: 'Instrument Serif', serif;
}

/* Vlhkost listu (zelená karta) */
.grafy-wrap .soil-leaf {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 16px; align-items: center;
  padding: 16px 18px;
  background: linear-gradient(180deg, #F2F8E9 0%, #E1F0D5 100%);
  border: 1px solid #C5DAB6;
  border-radius: 14px;
}
.grafy-wrap .soil-leaf .icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: #FFFFFF; border: 1px solid #C5DAB6;
  color: var(--green-deep);
  /* zarovnání ikony (36px) ve sloupci 56px — udržuje vizuální odsazení */
  margin-left: 10px;
}
.grafy-wrap .soil-leaf .lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--green-deep); font-weight: 600;
}
.grafy-wrap .soil-leaf .desc {
  font-size: 12.5px; color: var(--ink-soft); margin-top: 2px;
}
.grafy-wrap .soil-leaf .val {
  font-family: 'Instrument Serif', serif;
  font-size: 32px; color: var(--ink); line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.grafy-wrap .soil-leaf .val .u {
  font-size: 12px; color: var(--ink-muted); font-style: italic;
  margin-left: 3px; font-family: 'Instrument Serif', serif;
}

/* ---- Časový průběh (chart) ---- */
.grafy-wrap .soil-chart-wrap {
  margin-top: 18px;
  padding: 20px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.grafy-wrap .soil-chart-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.grafy-wrap .soil-chart-head h4 {
  font-family: 'Instrument Serif', serif;
  font-size: 22px; font-weight: 400; color: var(--ink);
  margin: 0 0 4px;
}
.grafy-wrap .soil-chart-head .sub {
  font-size: 12.5px; color: var(--ink-muted);
}
.grafy-wrap .soil-chart-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-soft);
}
.grafy-wrap .soil-chart-legend span {
  display: inline-flex; align-items: center; gap: 6px;
}
.grafy-wrap .soil-chart-legend i {
  display: inline-block; width: 14px; height: 3px; border-radius: 2px;
}
/* Čárkovaná verze pro vlhkost listu — ladí s dashed křivkou v grafu */
.grafy-wrap .soil-chart-legend i.legend-dashed {
  background: transparent !important;
  border-top: 2.5px dashed #1B9A7C;
  height: 0;
  border-radius: 0;
  width: 16px;
}
.grafy-wrap .soil-chart {
  height: 300px; width: 100%;
}
.grafy-wrap .soil-chart svg {
  width: 100%; height: 100%; overflow: visible;
}
.grafy-wrap .soil-chart .axis-text {
  font-size: 10.5px; fill: var(--ink-muted);
  font-family: 'Inter', sans-serif;
}

/* ===========================================================
   SOIL REDESIGN v4 — 5-cell strip (3 teploty + 2 vlhkosti)
   Pattern: stejný jako aq-strip ("Kvalita ovzduší"), takže celá stránka
   používá konzistentní layout pro "Aktuální stav".
   Žádné karty, žádné prázdné prostory, žádné dashed boxy.
   =========================================================== */

.grafy-wrap .soil-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
}
@media (max-width: 1100px) {
  .grafy-wrap .soil-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .grafy-wrap .soil-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .grafy-wrap .soil-strip { grid-template-columns: 1fr; }
}

.grafy-wrap .soil-cell {
  padding: 18px 20px 16px;
  position: relative;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.grafy-wrap .soil-cell:last-child { border-right: none; }
@media (max-width: 1100px) {
  .grafy-wrap .soil-cell:nth-child(3n) { border-right: none; }
}
@media (max-width: 720px) {
  .grafy-wrap .soil-cell:nth-child(3n) { border-right: 1px solid var(--line); }
  .grafy-wrap .soil-cell:nth-child(2n) { border-right: none; }
}

/* Levý 4px proužek = barva stavu */
.grafy-wrap .soil-cell::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: var(--cell-color, #C9CFD9);
}

/* Status barvy (sdílené mezi teplotou a vlhkostí) */
.grafy-wrap .soil-cell--cold    { --cell-color: #4A6FA8; --cell-tint: #DFE7F2; --cell-ink: #1F4A8C; }
.grafy-wrap .soil-cell--cool    { --cell-color: #6798B5; --cell-tint: #E3EEF4; --cell-ink: #285574; }
.grafy-wrap .soil-cell--good    { --cell-color: #6BA147; --cell-tint: #E2EFD4; --cell-ink: #2C6B22; }
.grafy-wrap .soil-cell--warm    { --cell-color: #C58430; --cell-tint: #F5E0CB; --cell-ink: #8B4A14; }
.grafy-wrap .soil-cell--hot     { --cell-color: #C03030; --cell-tint: #F5D2D2; --cell-ink: #8B1A1A; }
.grafy-wrap .soil-cell--na      { --cell-color: #C9CFD9; --cell-tint: #F0F2F6; --cell-ink: #6B7280; }
/* Vlhkost půdy: sat (modrá saturovaná) / ok (zelená vhodná) / dry (oranžová suchá) */
.grafy-wrap .soil-cell--m-sat   { --cell-color: #3B82B5; --cell-tint: #DCEAF3; --cell-ink: #1F4A8C; }
.grafy-wrap .soil-cell--m-ok    { --cell-color: #6BA147; --cell-tint: #E2EFD4; --cell-ink: #2C6B22; }
.grafy-wrap .soil-cell--m-dry   { --cell-color: #C58430; --cell-tint: #F5E0CB; --cell-ink: #8B4A14; }
/* Vlhkost listu: dry (béžová) / mid (světle zelená) / wet (sytě zelená) */
.grafy-wrap .soil-cell--l-dry   { --cell-color: #B58E2A; --cell-tint: #F5EBCB; --cell-ink: #6B5318; }
.grafy-wrap .soil-cell--l-mid   { --cell-color: #6BA147; --cell-tint: #E2EFD4; --cell-ink: #2C6B22; }
.grafy-wrap .soil-cell--l-wet   { --cell-color: #2A6C45; --cell-tint: #D2E5DA; --cell-ink: #1A4A2E; }

/* Label + sub-label nahoře */
.grafy-wrap .soil-cell__lbl {
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #4A5260);
  display: flex;
  align-items: center;
  gap: 6px;
}
.grafy-wrap .soil-cell__sub {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-muted, #6B7186);
  margin-bottom: 8px;
}

/* Hlavní hodnota — velká, **v barvě stavu** */
.grafy-wrap .soil-cell__val {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 500;
  color: var(--cell-ink, var(--ink));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.grafy-wrap .soil-cell__val .u {
  font-size: 14px;
  color: var(--ink-muted);
  margin-left: 4px;
  font-weight: 400;
}

/* Status text — v barevné tabletce sjednocené s levým pruhem */
.grafy-wrap .soil-cell__status {
  display: inline-block;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--cell-tint);
  color: var(--cell-ink);
  text-transform: lowercase;
  margin-top: 4px;
}

/* Mini progress bar — JEN pro vlhkostní buňky */
.grafy-wrap .soil-cell__progress {
  position: relative;
  margin-top: 10px;
}
.grafy-wrap .soil-cell__bar {
  display: flex;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: #ECEEF4;
}
.grafy-wrap .soil-cell__bar span {
  height: 100%;
  display: block;
}
.grafy-wrap .soil-cell__needle {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 9px;
  background: var(--ink, #0F1933);
  transform: translateX(-50%);
  border-radius: 1px;
}

/* — Blok pro nadpis sekce (Teplota / Vlhkost) — */
.grafy-wrap .soil-block { margin-bottom: 18px; }
.grafy-wrap .soil-block__head {
  margin-bottom: 12px;
}
.grafy-wrap .soil-block__head h3 {
  font-family: 'Instrument Serif', serif;
  font-size: 24px; font-weight: 400;
  margin: 0 0 4px; color: var(--ink);
}
.grafy-wrap .soil-block__head h3 em {
  font-style: italic; color: var(--blue, #2E5B9E);
}
.grafy-wrap .soil-block__head p {
  font-size: 12.5px; color: var(--ink-muted);
  line-height: 1.5; margin: 0;
}

/* ── 3 teplotní karty v řádku ── */
.grafy-wrap .soil-temp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 880px) {
  .grafy-wrap .soil-temp-grid { grid-template-columns: 1fr; }
}

.grafy-wrap .soil-tcard {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
/* Levý barevný pruh per hloubka */
.grafy-wrap .soil-tcard::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.grafy-wrap .soil-tcard--surface::before { background: #D8722E; }
.grafy-wrap .soil-tcard--middle::before  { background: #9E8331; }
.grafy-wrap .soil-tcard--deep::before    { background: #2E78A8; }

.grafy-wrap .soil-tcard__zone {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 500;
}
.grafy-wrap .soil-tcard__depth {
  font-family: 'Instrument Serif', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 10px;
}
.grafy-wrap .soil-tcard__val {
  font-family: 'Inter', sans-serif;
  font-size: 42px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.grafy-wrap .soil-tcard__val .u {
  font-size: 18px;
  color: var(--ink-muted);
  margin-left: 4px;
  font-weight: 400;
}
.grafy-wrap .soil-tcard__status {
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
}
.grafy-wrap .soil-tcard--cold  .soil-tcard__status { background: #DDE6F2; color: #1F4A8C; }
.grafy-wrap .soil-tcard--cool  .soil-tcard__status { background: #DDEAEF; color: #28556D; }
.grafy-wrap .soil-tcard--good  .soil-tcard__status { background: #DDEFD0; color: #2C6B22; }
.grafy-wrap .soil-tcard--warm  .soil-tcard__status { background: #F5DEC4; color: #8B4A14; }
.grafy-wrap .soil-tcard--hot   .soil-tcard__status { background: #F5C8B8; color: #8B2A14; }
.grafy-wrap .soil-tcard--na    .soil-tcard__status { background: #ECEEF4; color: #6B7280; }

/* ── 2 vlhkostní karty v řádku ── */
.grafy-wrap .soil-moist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 880px) {
  .grafy-wrap .soil-moist-grid { grid-template-columns: 1fr; }
}

.grafy-wrap .soil-mcard {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.grafy-wrap .soil-mcard--sat   { border-left: 4px solid #3B82B5; }
.grafy-wrap .soil-mcard--ok    { border-left: 4px solid #7CB342; }
.grafy-wrap .soil-mcard--dry   { border-left: 4px solid #E8A845; }
.grafy-wrap .soil-mcard--leaf-dry { border-left: 4px solid #E8C47D; }
.grafy-wrap .soil-mcard--leaf-mid { border-left: 4px solid #B5D9A5; }
.grafy-wrap .soil-mcard--leaf-wet { border-left: 4px solid #3D8C5F; }

.grafy-wrap .soil-mcard__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.grafy-wrap .soil-mcard__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.grafy-wrap .soil-mcard__title svg {
  color: var(--ink-soft);
  flex: 0 0 auto;
}
.grafy-wrap .soil-mcard__title small {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 400;
}
.grafy-wrap .soil-mcard__badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  color: #FFFEFA;
}
.grafy-wrap .soil-mcard--sat .soil-mcard__badge { background: #3B82B5; }
.grafy-wrap .soil-mcard--ok  .soil-mcard__badge { background: #5C9A33; }
.grafy-wrap .soil-mcard--dry .soil-mcard__badge { background: #C58430; }
.grafy-wrap .soil-mcard--leaf-dry .soil-mcard__badge { background: #B5892E; }
.grafy-wrap .soil-mcard--leaf-mid .soil-mcard__badge { background: #5C9A33; }
.grafy-wrap .soil-mcard--leaf-wet .soil-mcard__badge { background: #2A6C45; }

.grafy-wrap .soil-mcard__val {
  font-family: 'Inter', sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.grafy-wrap .soil-mcard__val .u {
  font-size: 18px;
  color: var(--ink-muted);
  margin-left: 6px;
  font-weight: 400;
}

/* Segmentová škála: bar se 3 barevnými segmenty + marker */
.grafy-wrap .soil-mcard__scale {
  position: relative;
  margin: 4px 0 26px;
}
.grafy-wrap .soil-mcard__bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,25,51,0.08);
}
.grafy-wrap .soil-mcard__seg { height: 100%; }
.grafy-wrap .soil-mcard__marker {
  position: absolute;
  top: -4px;
  width: 18px;
  height: 18px;
  background: #FFFEFA;
  border: 3px solid var(--ink);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 5px rgba(15,25,51,0.25);
  z-index: 2;
}
.grafy-wrap .soil-mcard__ticks {
  position: relative;
  height: 16px;
  margin-top: 6px;
}
.grafy-wrap .soil-mcard__ticks span {
  position: absolute;
  font-size: 10.5px;
  color: var(--ink-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
  white-space: nowrap;
}

.grafy-wrap .soil-mcard__note {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.6;
  background: var(--surface, #FFFEFA);
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px dashed var(--line);
}
.grafy-wrap .soil-mcard__note strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* 2-grafový grid — vlhkost + teplota vedle sebe */
/* Plnošířkové grafy pod sebou (stack), místo 2 sloupců vedle sebe */
.grafy-wrap .soil-charts-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.grafy-wrap .soil-chart-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 18px;
  padding: 28px 32px 26px;
  box-shadow: 0 1px 3px rgba(15, 25, 51, 0.04), 0 4px 16px rgba(15, 25, 51, 0.03);
  display: flex;
  flex-direction: column;
}
.grafy-wrap .soil-chart-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(15, 25, 51, 0.08);
}
@media (max-width: 760px) {
  .grafy-wrap .soil-chart-card__head { flex-direction: column; align-items: stretch; gap: 14px; }
}
.grafy-wrap .soil-chart-card__title { flex: 1; min-width: 0; }
.grafy-wrap .soil-chart-card__head h4 {
  font-family: 'Instrument Serif', serif;
  font-size: 26px; font-weight: 400;
  margin: 0 0 6px;
  color: var(--ink);
  line-height: 1.15;
}
.grafy-wrap .soil-chart-card__head h4 em {
  font-style: italic; color: var(--ink-muted);
  font-size: 18px;
}
.grafy-wrap .soil-chart-card__head p {
  font-size: 13px; color: var(--ink-muted);
  line-height: 1.55; margin: 0;
  max-width: 80ch;
}

/* Range picker — segmented control */
.grafy-wrap .soil-chart-card__range {
  display: inline-flex;
  background: rgba(15, 25, 51, 0.04);
  border-radius: 10px;
  padding: 3px;
  flex-shrink: 0;
  align-self: flex-start;
}
.grafy-wrap .soil-range-btn {
  border: none;
  background: transparent;
  padding: 7px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  letter-spacing: -0.1px;
  white-space: nowrap;
}
.grafy-wrap .soil-range-btn:hover {
  color: var(--ink);
}
.grafy-wrap .soil-range-btn.is-active {
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 25, 51, 0.08), 0 0 0 1px rgba(15, 25, 51, 0.04);
  font-weight: 600;
}
.grafy-wrap .soil-range-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Loading state (probíhá fetch) — wait cursor pouze v této chvíli */
.grafy-wrap .soil-chart-card.is-loading .soil-range-btn:disabled {
  cursor: wait;
}

/* Plnošířková výška grafů — vyšší kvůli stack layoutu */
.grafy-wrap .soil-chart--moist,
.grafy-wrap .soil-chart--temp {
  height: 380px; width: 100%;
  flex: 0 0 380px;
  min-height: 380px;
  position: relative;
}
/* Loading overlay během fetch */
.grafy-wrap .soil-chart-card.is-loading .soil-chart {
  opacity: 0.4;
  transition: opacity .15s ease;
}
.grafy-wrap .soil-chart--moist svg,
.grafy-wrap .soil-chart--temp svg {
  width: 100%; height: 100%; overflow: visible;
}
/* Půdní grafy — typografie sjednocená s Nordic Clean designem.
   viewBox 1180×380 odpovídá aspect ratio kontejneru, takže stretchování
   preserveAspectRatio="none" je minimální a text se renderuje téměř 1:1. */
.grafy-wrap .soil-chart--moist .axis-text,
.grafy-wrap .soil-chart--temp .axis-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  fill: #6B7390;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.1px;
}
.grafy-wrap .soil-chart--moist .axis-text--y,
.grafy-wrap .soil-chart--temp .axis-text--y {
  font-size: 11.5px;
  fill: #6B7390;
}
.grafy-wrap .soil-chart--moist .axis-text--x,
.grafy-wrap .soil-chart--temp .axis-text--x {
  font-size: 11.5px;
  fill: #6B7390;
}
.grafy-wrap .soil-chart--moist .grid-line,
.grafy-wrap .soil-chart--temp .grid-line {
  stroke: rgba(15, 25, 51, 0.08);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.grafy-wrap .soil-chart .grid-line {
  stroke: rgba(15, 25, 51, 0.08); stroke-width: 1; stroke-dasharray: 2 4;
}
.grafy-wrap .soil-chart--moist .axis-label,
.grafy-wrap .soil-chart--temp .axis-label,
.grafy-wrap .soil-chart .axis-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  fill: #6B7390;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================================
   KVALITA OVZDUŠÍ — strip + 24h chart + hourly profile
   ============================================================================ */
.grafy-wrap .aq-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.grafy-wrap .aq-strip-cell {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  overflow: hidden;
}
.grafy-wrap .aq-strip-cell .lbl {
  font-size: 11.5px; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 500;
}
.grafy-wrap .aq-strip-cell .val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.grafy-wrap .aq-strip-cell .val .u {
  font-size: 13px; color: var(--ink-muted); margin-left: 4px;
  font-family: 'Inter', sans-serif;
}
.grafy-wrap .aq-strip-cell .sub {
  font-size: 12px; color: var(--ink-soft); margin-top: 2px;
}

/* Akcent na AQI buňce — barvený levý pruh dle EAQI kategorie */
.grafy-wrap .aq-strip-cell.aq-now { padding-left: 22px; }
.grafy-wrap .aq-strip-cell.aq-now::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--ink-soft);
}
.grafy-wrap .aq-strip-cell.aq-good::before { background: #2EAD6F; }
.grafy-wrap .aq-strip-cell.aq-ok::before   { background: #B6C432; }
.grafy-wrap .aq-strip-cell.aq-mid::before  { background: #E8B14A; }
.grafy-wrap .aq-strip-cell.aq-bad::before  { background: #E8744A; }
.grafy-wrap .aq-strip-cell.aq-vbad::before { background: #C03030; }
.grafy-wrap .aq-strip-cell.aq-na::before   { background: #C8CDDA; }

/* Empty-state pro málo dat */
.grafy-wrap .aq-empty {
  background: linear-gradient(135deg, #F5F8F5 0%, #FAFCF7 100%);
  border: 1px dashed #C8D5C0;
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  color: var(--ink-soft);
}
.grafy-wrap .aq-empty-icon {
  display: inline-flex; color: #6B8260; margin-bottom: 8px;
}
.grafy-wrap .aq-empty h4 {
  font-family: 'Instrument Serif', serif;
  font-size: 22px; font-weight: 400; color: var(--ink);
  margin: 0 0 8px;
}
.grafy-wrap .aq-empty p {
  margin: 0; font-size: 13.5px; line-height: 1.55; max-width: 540px;
  display: inline-block;
}

/* AQ chart card (.aq-chart-wrap.soil-chart-card) — sjednocený design se soil-chart-card,
   ale s vlastním .aq-chart-legend a .aq-archive-notice. Ostatní wrappery (aq-profile-wrap,
   aq-daily-wrap, aq-weekly-wrap, aq-dist-wrap) zachovávají původní styl. */
.grafy-wrap .aq-profile-wrap,
.grafy-wrap .aq-daily-wrap,
.grafy-wrap .aq-weekly-wrap,
.grafy-wrap .aq-dist-wrap {
  margin-top: 18px;
  padding: 20px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.grafy-wrap .aq-chart-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.grafy-wrap .aq-chart-head h4 {
  font-family: 'Instrument Serif', serif;
  font-size: 22px; font-weight: 400; color: var(--ink);
  margin: 0 0 4px;
}
.grafy-wrap .aq-chart-head .sub {
  font-size: 12.5px; color: var(--ink-muted); max-width: 640px;
}

/* Legenda — pro nový aq-chart-wrap.soil-chart-card jde mimo head,
   pod ní; pro ostatní wrapy zůstává inline v head. */
.grafy-wrap .aq-chart-wrap.soil-chart-card .aq-chart-legend {
  margin: -6px 0 10px;
  padding: 0;
}
.grafy-wrap .aq-chart-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-soft, #4A5260);
}
.grafy-wrap .aq-chart-legend span {
  display: inline-flex; align-items: center; gap: 6px;
}
.grafy-wrap .aq-chart-legend i {
  display: inline-block; width: 14px; height: 3px; border-radius: 2px;
}
.grafy-wrap .aq-chart-legend i.legend-dashed {
  background: transparent !important;
  border-top: 2.5px dashed #5A6F94;
  height: 0; border-radius: 0; width: 16px;
}

/* Notice o omezeném archivu (pro období se sběrem dat < 7 dní) */
.grafy-wrap .aq-archive-notice {
  font-size: 12.5px;
  color: var(--ink-soft, #4A5260);
  background: rgba(45, 105, 165, 0.06);
  border-left: 3px solid #3D7AB5;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 0 14px;
  line-height: 1.5;
}
.grafy-wrap .aq-archive-notice strong {
  color: var(--ink, #0F1933);
  font-weight: 600;
}

/* Velký AQ graf — sjednocený s soil-chart výškou + typografií */
.grafy-wrap .aq-chart {
  height: 380px; width: 100%;
  flex: 0 0 380px;
  min-height: 380px;
  position: relative;
}
.grafy-wrap .aq-profile  { height: 220px; width: 100%; }
.grafy-wrap .aq-chart svg,
.grafy-wrap .aq-profile svg { width: 100%; height: 100%; overflow: visible; }
.grafy-wrap .aq-chart .axis-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  fill: #6B7390;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.1px;
}
.grafy-wrap .aq-chart .axis-text--limit {
  font-size: 11px;
  /* fill se nastavuje per-limit přes inline atribut (PM 2,5 červená, PM 10 oranžová) */
  font-weight: 600;
  letter-spacing: 0.02em;
}
.grafy-wrap .aq-chart .axis-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  fill: #6B7390;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.grafy-wrap .aq-profile .axis-text {
  font-size: 10.5px; fill: var(--ink-muted); font-family: 'Inter', sans-serif;
}
.grafy-wrap .aq-chart .grid-line {
  stroke: rgba(15, 25, 51, 0.08);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.grafy-wrap .aq-profile .grid-line {
  stroke: #E8EAF0; stroke-width: 1; stroke-dasharray: 2 3;
}

/* — Denní bary za 7 dní — */
.grafy-wrap .aq-daily-bars { width: 100%; height: 240px; }
.grafy-wrap .aq-daily-bars svg { width: 100%; height: 100%; overflow: visible; }
.grafy-wrap .aq-daily-bars .axis-text {
  font-size: 10.5px; fill: var(--ink-muted); font-family: 'Inter', sans-serif;
}
.grafy-wrap .aq-daily-bars .grid-line {
  stroke: #E8EAF0; stroke-width: 1; stroke-dasharray: 2 3;
}

/* — Týdenní heatmapa den × hodina — */
.grafy-wrap .aq-weekly-heatmap { width: 100%; }
.grafy-wrap .aq-hm-grid {
  display: grid;
  gap: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
}
.grafy-wrap .aq-hm-row {
  display: grid;
  grid-template-columns: 92px repeat(24, 1fr);
  gap: 2px;
  align-items: center;
}
.grafy-wrap .aq-hm-cell {
  aspect-ratio: 1 / 1;
  min-height: 22px;
  border-radius: 3px;
  background: #F2F4F8;
  display: flex; align-items: center; justify-content: center;
  color: #0F1933;
  font-variant-numeric: tabular-nums;
}
.grafy-wrap .aq-hm-cell--label {
  aspect-ratio: auto;
  background: transparent;
  justify-content: flex-start;
  padding-right: 6px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.grafy-wrap .aq-hm-cell--label.is-weekend {
  color: var(--ink);
  font-weight: 500;
}
.grafy-wrap .aq-hm-row--head .aq-hm-cell {
  background: transparent;
  font-size: 10.5px;
  color: var(--ink-muted);
}
.grafy-wrap .aq-hm-cell--hour.is-major {
  color: var(--ink-soft);
  font-weight: 500;
}
.grafy-wrap .aq-hm-cell.is-empty {
  background: repeating-linear-gradient(45deg, #F2F4F8, #F2F4F8 2px, #ECEEF4 2px, #ECEEF4 4px);
}
.grafy-wrap .aq-hm-cell:hover {
  outline: 2px solid #2E5B9E;
  outline-offset: -1px;
  z-index: 2;
}

/* — EAQI distribuce (stacked bar 100% + legenda) — */
.grafy-wrap .aq-dist-bar { width: 100%; }
.grafy-wrap .aq-dist-stack {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,25,51,0.08);
  border: 1px solid rgba(15,25,51,0.06);
}
.grafy-wrap .aq-dist-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #FFFEFA;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition: filter .15s;
  min-width: 1px;
}
.grafy-wrap .aq-dist-seg:hover { filter: brightness(1.08); }
.grafy-wrap .aq-dist-legend {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-top: 12px;
  font-size: 12px; color: var(--ink-soft);
}
.grafy-wrap .aq-dist-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
}
.grafy-wrap .aq-dist-legend-item i {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
}
.grafy-wrap .aq-dist-legend-item strong {
  color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 4px;
}

.grafy-wrap .aq-foot-note {
  font-size: 12.5px; color: var(--ink-soft);
  margin: 14px 0 0; line-height: 1.55;
}

/* Responsivní strip — zalomení na 2 sloupce a pak 1 */
@media (max-width: 880px) {
  .grafy-wrap .aq-strip { grid-template-columns: repeat(2, 1fr); }
  .grafy-wrap .aq-hm-row { grid-template-columns: 64px repeat(24, 1fr); }
  .grafy-wrap .aq-hm-cell--label { font-size: 10px; }
}
@media (max-width: 520px) {
  .grafy-wrap .aq-strip { grid-template-columns: 1fr; }
  .grafy-wrap .aq-hm-cell { min-height: 16px; }
}

/* KLIMA — přepracováno dle designu */
/* Headline insight banner */
.grafy-wrap .clima-insight { display: flex; align-items: stretch; gap: 0; background: linear-gradient(135deg,#FFF3ED 0%,#FEF7E0 100%); border: 1px solid #F5D9C0; border-radius: 16px; padding: 22px 28px; margin-bottom: 20px; }
.grafy-wrap .clima-insight .num { font-family: 'Instrument Serif', serif; font-size: 64px; line-height: 1; color: var(--temp-hot); font-variant-numeric: tabular-nums; padding-right: 28px; border-right: 1px solid #F5D9C0; display: flex; align-items: center; }
.grafy-wrap .clima-insight .num.cold { color: var(--temp-cold); }
.grafy-wrap .clima-insight .num .sign { font-size: 40px; vertical-align: top; margin-right: 2px; }
.grafy-wrap .clima-insight .num .u { font-size: 22px; color: var(--ink-soft); margin-left: 6px; font-variant: normal; }
.grafy-wrap .clima-insight .txt { padding-left: 28px; display: flex; flex-direction: column; justify-content: center; gap: 6px; flex: 1; }
.grafy-wrap .clima-insight .txt .head { font-family: 'Instrument Serif', serif; font-size: 24px; line-height: 1.2; color: var(--ink); }
.grafy-wrap .clima-insight .txt .body { font-size: 13px; color: var(--ink-soft); line-height: 1.55; max-width: 560px; }

/* Subsekce uvnitř klima */
.grafy-wrap .clima-sub { margin-top: 14px; padding-top: 26px; border-top: 1px solid var(--line); }
.grafy-wrap .clima-sub:first-of-type { border-top: 0; padding-top: 0; }
.grafy-wrap .clima-sub-head {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 18px; max-width: 760px;
}
.grafy-wrap .clima-sub-head .title {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.grafy-wrap .clima-sub-head .title .tag {
  font-size: 10.5px; color: var(--ink-muted); text-transform: uppercase;
  letter-spacing: .1em; font-weight: 500;
}
.grafy-wrap .clima-sub-head h4 { font-family: 'Instrument Serif', serif; font-size: 26px; font-weight: 400; color: var(--ink); line-height: 1.15; }
.grafy-wrap .clima-sub-head h4 em { color: var(--blue); font-style: italic; }
.grafy-wrap .clima-sub-head .help {
  font-size: 13px; color: var(--ink-soft); line-height: 1.6;
  margin-top: 2px;
}
.grafy-wrap .clima-sub-head .help strong { color: var(--ink); font-weight: 500; }

/* Warming Stripes */
.grafy-wrap .stripes-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: stretch; }
/* Levý sloupec se sloupci: flex-column s justify-content:center
   aby se sloupce vertikálně vyrovnaly v rámci dostupné výšky
   (kterou diktuje vyšší pravá legenda). Tím zmizí prázdné místo. */
.grafy-wrap .stripes-chart { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.grafy-wrap .stripes-row { display: flex; gap: 3px; height: 110px; position: relative; padding-top: 22px; }
.grafy-wrap .stripe-col { flex: 1; display: flex; flex-direction: column; gap: 3px; position: relative; cursor: default; }
.grafy-wrap .stripe-col .stripe-bar { flex: 1; border-radius: 3px; position: relative; transition: transform .12s; }
.grafy-wrap .stripe-col:hover .stripe-bar { transform: scaleY(1.04); }
.grafy-wrap .stripe-col .stripe-val { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.grafy-wrap .stripe-col .stripe-year { margin-top: 6px; font-size: 10px; color: var(--ink-muted); text-align: center; font-variant-numeric: tabular-nums; }
.grafy-wrap .stripe-col.warmest .stripe-val { color: var(--temp-hot); font-weight: 600; }
.grafy-wrap .stripe-col.coolest .stripe-val { color: var(--temp-cold); font-weight: 600; }
/* Neúplný (dopočítaný) rok — šrafování pruhu + čárkovaný okraj */
.grafy-wrap .stripe-col.is-estimated .stripe-bar {
  outline: 1.5px dashed rgba(15, 25, 51, .42);
  outline-offset: -1.5px;
}
.grafy-wrap .stripe-col.is-estimated .stripe-bar::after {
  content: ""; position: absolute; inset: 0; border-radius: 3px; pointer-events: none;
  background: repeating-linear-gradient(45deg,
    rgba(15, 25, 51, .17) 0 2px, rgba(15, 25, 51, 0) 2px 6px);
}
.grafy-wrap .stripe-col .stripe-val .est-mark { color: var(--ink-muted); font-weight: 700; }
.grafy-wrap .stripes-note {
  font-size: 11px; line-height: 1.6; color: var(--ink-muted); margin-top: 14px;
}
.grafy-wrap .stripes-note .est-mark { color: var(--ink-soft); font-weight: 700; margin-right: 1px; }
.grafy-wrap .stripes-note strong { color: var(--ink-soft); font-weight: 600; }
.grafy-wrap .stripes-baseline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; font-size: 11px; color: var(--ink-muted);
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--line-strong); flex-wrap: wrap;
}
.grafy-wrap .stripes-baseline .bl-left,
.grafy-wrap .stripes-baseline .bl-right { display: inline-flex; align-items: center; gap: 6px; }
.grafy-wrap .stripes-baseline strong { color: var(--ink-soft); font-weight: 500; }
.grafy-wrap .stripes-baseline .bl-right { color: var(--ink-muted); font-style: italic; }

.grafy-wrap .stripes-legend { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.grafy-wrap .stripes-legend h5 { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; margin-bottom: 2px; }
.grafy-wrap .stripes-legend .scale-caption { font-size: 11px; color: var(--ink-soft); line-height: 1.4; }
.grafy-wrap .stripes-legend .scale { height: 12px; border-radius: 6px; background: linear-gradient(90deg,#1B4B8C 0%,#4F82BF 15%,#A8C1DE 30%,#ECEEF4 50%,#F4D07A 65%,#E89B4F 80%,#D85A2F 92%,#A82215 100%); }
.grafy-wrap .stripes-legend .scale-ticks {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--ink-soft); line-height: 1.3; margin-top: 4px; text-align: center;
}
.grafy-wrap .stripes-legend .scale-ticks span { flex: 1; }
.grafy-wrap .stripes-legend .scale-ticks span:first-child { text-align: left; }
.grafy-wrap .stripes-legend .scale-ticks span:last-child { text-align: right; }
.grafy-wrap .stripes-legend .scale-ticks em {
  font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-muted); font-size: 10px;
}
.grafy-wrap .stripes-legend .hint { font-size: 11.5px; color: var(--ink-soft); line-height: 1.55; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; }
.grafy-wrap .stripes-legend .hint strong { color: var(--ink); font-weight: 500; }
.grafy-wrap .stripes-legend .hint .h-row { display: flex; align-items: baseline; gap: 8px; }
.grafy-wrap .stripes-legend .hint .h-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; transform: translateY(1px); }
.grafy-wrap .stripes-legend .hint .h-dot.hot { background: var(--temp-hot); }
.grafy-wrap .stripes-legend .hint .h-dot.cold { background: var(--temp-cold); }
.grafy-wrap .stripes-legend .hint .h-lbl { color: var(--ink-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.grafy-wrap .stripes-legend .hint .h-val { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; }

/* Anomaly chart */
.grafy-wrap .ano-wrap { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: flex-start; }
.grafy-wrap .ano-chart { width: 100%; padding: 4px 0 0; }

/* ── Měsíční anomálie — HTML/CSS graf (ostré písmo, interaktivní) ── */
.grafy-wrap .ano2 { position: relative; --gut: 34px; }
.grafy-wrap .ano2-plot { position: relative; height: 280px; }

/* teplá / studená zóna */
.grafy-wrap .ano2-zone { position: absolute; left: var(--gut); right: 4px; pointer-events: none; }
.grafy-wrap .ano2-zone--warm { top: 0; height: 50%; background: linear-gradient(180deg, #FCEDE4, #FDF5F0); }
.grafy-wrap .ano2-zone--cold { bottom: 0; height: 50%; background: linear-gradient(180deg, #EDF2FA, #E6EDF7); }

/* jemné gridlines + osa Y */
.grafy-wrap .ano2-gl { position: absolute; left: var(--gut); right: 4px; height: 1px; background: rgba(15, 25, 51, .055); pointer-events: none; }
.grafy-wrap .ano2-yl { position: absolute; left: 0; width: calc(var(--gut) - 8px); text-align: right; transform: translateY(-50%); font-size: 9.5px; line-height: 1; color: var(--ink-muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.grafy-wrap .ano2-yl.is-zero { color: var(--ink-soft); font-weight: 600; }

/* nulová čára */
.grafy-wrap .ano2-zero { position: absolute; left: var(--gut); right: 4px; top: 50%; height: 2px; background: #0F1933; border-radius: 2px; transform: translateY(-50%); }

/* zónové hinty */
.grafy-wrap .ano2-hint { position: absolute; left: calc(var(--gut) + 8px); font-size: 10px; font-weight: 600; letter-spacing: .01em; pointer-events: none; }
.grafy-wrap .ano2-hint--warm { top: 7px; color: #C0572F; }
.grafy-wrap .ano2-hint--cold { bottom: 7px; color: #3D6BB0; }

/* sloupce */
.grafy-wrap .ano2-cols { position: absolute; top: 0; bottom: 0; left: var(--gut); right: 4px; display: flex; }
.grafy-wrap .ano2-col { position: relative; flex: 1 1 0; min-width: 0; }
.grafy-wrap .ano2-col::before { content: ""; position: absolute; inset: 4px 2px; border-radius: 6px; background: transparent; transition: background .15s; }
.grafy-wrap .ano2-col.is-hot::before { background: rgba(15, 25, 51, .045); }
.grafy-wrap .ano2-col:focus-visible { outline: none; }
.grafy-wrap .ano2-col:focus-visible::before { background: rgba(46, 173, 111, .10); box-shadow: inset 0 0 0 2px var(--green-deep, #2EAD6F); }

.grafy-wrap .ano2-bar {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 62%; max-width: 30px; height: var(--h, 0px);
  transition: height .6s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 32ms);
}
.grafy-wrap .ano2-col.is-warm .ano2-bar { bottom: 50%; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #D85A2F, #ECA257); box-shadow: 0 1px 3px rgba(216, 90, 47, .3); }
.grafy-wrap .ano2-col.is-cold .ano2-bar { top: 50%; border-radius: 2px 2px 5px 5px; background: linear-gradient(180deg, #5288C4, #3B6DB8); box-shadow: 0 1px 3px rgba(59, 109, 184, .3); }
.grafy-wrap .ano2-col.is-hot .ano2-bar { filter: brightness(1.05) saturate(1.12); }

/* hodnota nad / pod sloupcem */
.grafy-wrap .ano2-val {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
}
.grafy-wrap .ano2.is-in .ano2-val { opacity: 1; transition-delay: calc(var(--i, 0) * 32ms + .26s); }
.grafy-wrap .ano2-col.is-warm .ano2-val { bottom: calc(50% + var(--h, 0px) + 5px); color: #BE4D27; }
.grafy-wrap .ano2-col.is-cold .ano2-val { top: calc(50% + var(--h, 0px) + 5px); color: #34619E; }

/* budoucí měsíc */
.grafy-wrap .ano2-col.is-future .ano2-nub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62%; max-width: 30px; height: 12px; border-radius: 3px;
  border: 1px solid #E1E4ED;
  background: repeating-linear-gradient(45deg, #E7E9F0 0 3px, #F6F7F9 3px 6px);
}

/* osa měsíců */
.grafy-wrap .ano2-axis { display: flex; padding: 9px 4px 0 var(--gut); }
.grafy-wrap .ano2-m { flex: 1 1 0; min-width: 0; text-align: center; line-height: 1.3; }
.grafy-wrap .ano2-m b { display: block; font-size: 11px; font-weight: 600; color: var(--ink); }
.grafy-wrap .ano2-m i { display: block; font-style: normal; font-size: 9.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.grafy-wrap .ano2-m.is-future b { color: var(--ink-muted); font-weight: 500; }

/* tooltip */
.grafy-wrap .ano2-tip {
  position: absolute; z-index: 6; top: 8px;
  min-width: 158px; max-width: 240px; padding: 9px 11px;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 10px 28px rgba(15, 25, 51, .16);
  pointer-events: none;
}
.grafy-wrap .ano2-tip[hidden] { display: none; }
.grafy-wrap .ano2-tip.at-bottom { top: auto; bottom: 8px; }
.grafy-wrap .ano2-tip .tip-h { font-size: 12px; font-weight: 600; color: var(--ink); }
.grafy-wrap .ano2-tip .tip-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 3px; }
.grafy-wrap .ano2-tip .tip-big { font-size: 12.5px; font-weight: 600; margin: 6px 0; }
.grafy-wrap .ano2-tip .tip-big.warm { color: #BE4D27; }
.grafy-wrap .ano2-tip .tip-big.cold { color: #34619E; }
.grafy-wrap .ano2-tip .tip-row { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--ink-soft); padding: 2px 0; }
.grafy-wrap .ano2-tip .tip-row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .grafy-wrap .ano2-bar { transition: none; }
  .grafy-wrap .ano2-val { transition: none; }
}
@media (max-width: 560px) {
  .grafy-wrap .ano2 { --gut: 26px; }
  .grafy-wrap .ano2-plot { height: 240px; }
  .grafy-wrap .ano2-hint { font-size: 9px; }
  .grafy-wrap .ano2-val { font-size: 10px; }
  .grafy-wrap .ano2-m b { font-size: 10px; }
  .grafy-wrap .ano2-m i { font-size: 9px; }
}
.grafy-wrap .ano-sidebar { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.grafy-wrap .ano-sidebar h5 { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.grafy-wrap .ano-sidebar .big { font-family: 'Instrument Serif', serif; font-size: 32px; color: var(--temp-hot); line-height: 1; font-variant-numeric: tabular-nums; }
.grafy-wrap .ano-sidebar .big.cold { color: var(--temp-cold); }
.grafy-wrap .ano-sidebar .big .sign { font-size: 22px; vertical-align: top; }
.grafy-wrap .ano-sidebar .desc { font-size: 12px; color: var(--ink-soft); line-height: 1.55; }
.grafy-wrap .ano-sidebar .row { display: flex; justify-content: space-between; font-size: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.grafy-wrap .ano-sidebar .row:first-of-type { border-top: 0; padding-top: 0; }
.grafy-wrap .ano-sidebar .row .k { color: var(--ink-muted); }
.grafy-wrap .ano-sidebar .row .v { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; }
.grafy-wrap .ano-sidebar .row .v.hot { color: var(--temp-hot); }
.grafy-wrap .ano-sidebar .row .v.cold { color: var(--temp-cold); }

/* Rekordy — karty */
.grafy-wrap .records-wrap { margin-top: 6px; }
.grafy-wrap .records-perex { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; max-width: 780px; line-height: 1.6; }
.grafy-wrap .records-perex strong { color: var(--ink); font-weight: 500; }
.grafy-wrap .records-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grafy-wrap .record-card { padding: 18px 20px; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.grafy-wrap .record-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--line); }
.grafy-wrap .record-card.hot::before { background: var(--temp-hot); }
.grafy-wrap .record-card.cold::before { background: var(--temp-cold); }
.grafy-wrap .record-card.rain::before { background: var(--rain); }
.grafy-wrap .record-card.wind::before { background: var(--green-deep); }
.grafy-wrap .record-card.pres-low::before { background: #9A7AB8; }
.grafy-wrap .record-card.pres-high::before { background: var(--gold); }
.grafy-wrap .record-card .rc-lbl { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.grafy-wrap .record-card .rc-ic { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.grafy-wrap .record-card .rc-ic.hot { color: var(--temp-hot); }
.grafy-wrap .record-card .rc-ic.cold { color: var(--temp-cold); }
.grafy-wrap .record-card .rc-ic.rain { color: var(--rain); }
.grafy-wrap .record-card .rc-ic.wind { color: var(--green-deep); }
.grafy-wrap .record-card .rc-val { font-family: 'Instrument Serif', serif; font-size: 32px; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 2px; }
.grafy-wrap .record-card .rc-val .u { font-size: 15px; color: var(--ink-muted); margin-left: 4px; }
.grafy-wrap .record-card .rc-date { font-size: 11.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.grafy-wrap .record-card .rc-context { font-size: 11.5px; color: var(--ink-soft); margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); line-height: 1.5; }

/* "Jak to číst" panel */
.grafy-wrap .how-to-read { margin-top: 14px; padding: 14px 18px; background: #F4F8FE; border: 1px solid #DCE6F5; border-radius: 12px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.grafy-wrap .how-to-read strong { color: var(--ink); font-weight: 500; }
.grafy-wrap .how-to-read .label { display: inline-block; font-size: 11px; color: var(--blue); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; margin-bottom: 4px; }

/* Slovníček pojmů — dvousloupcový layout, každý sloupec = jeden graf */
.grafy-wrap .how-to-read--split {
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
}
.grafy-wrap .how-to-read--split .how-to-read__col {
  border-left: 3px solid var(--blue, #002072);
  padding-left: 14px;
}
.grafy-wrap .how-to-read--split .how-to-read__col:nth-child(2) {
  border-left-color: #D85A2F; /* odlišení druhého grafu — oranžová akcent */
}
.grafy-wrap .how-to-read--split .how-to-read__tag {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  color: var(--ink-muted, #727A92);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 6px;
}
.grafy-wrap .how-to-read--split .how-to-read__title {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 22px; font-weight: 400; color: var(--ink, #0F1933);
  margin: 0 0 10px; line-height: 1.15;
}
.grafy-wrap .how-to-read--split .how-to-read__title em {
  font-style: italic; color: var(--ink-soft, #3D4869);
}
.grafy-wrap .how-to-read--split p { margin: 0 0 8px; }
.grafy-wrap .how-to-read--split p:last-child { margin-bottom: 0; }
.grafy-wrap .how-to-read--split .hot-w  { color: #D85A2F; font-weight: 600; }
.grafy-wrap .how-to-read--split .cold-w { color: #3B6DB8; font-weight: 600; }
.grafy-wrap .how-to-read--split .how-to-read__foot {
  grid-column: 1 / -1;
  margin-top: 4px; padding-top: 14px;
  border-top: 1px dashed #DCE6F5;
  font-size: 12px; color: var(--ink-muted, #727A92);
}
@media (max-width: 720px) {
  .grafy-wrap .how-to-read--split { grid-template-columns: 1fr; gap: 20px; }
}

/* =====================================================================
 * CUSTOM BUILDER — verbatim z handoff Grafy.html (catalog | stage)
 * Levý panel: katalog veličin (kliknutí přidá/odebere řadu).
 * Pravý panel: chip selection + chart + toolbar (Vykreslit, PNG, CSV, Sdílet).
 * ===================================================================== */
.grafy-wrap .builder {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.grafy-wrap .builder .build-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 28px 18px; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #FBFAF6 0%, var(--surface) 100%);
}
.grafy-wrap .builder h3 {
  font-family: 'Instrument Serif', serif;
  font-size: 28px; font-weight: 400; line-height: 1.1;
  margin: 0;
}
.grafy-wrap .builder h3 em { color: var(--blue); font-style: italic; }
.grafy-wrap .builder .sub {
  font-size: 13px; color: var(--ink-muted);
  max-width: 520px; margin-top: 6px;
}

/* Časový rozsah — segmented pill */
.grafy-wrap .builder .range-seg {
  display: inline-flex; padding: 3px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 99px;
}
.grafy-wrap .builder .range-seg button {
  border: 0; background: transparent;
  padding: 7px 14px; border-radius: 99px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.grafy-wrap .builder .range-seg button:hover { color: var(--ink); }
.grafy-wrap .builder .range-seg button.active {
  background: var(--surface); color: var(--blue);
  box-shadow: 0 1px 3px rgba(0,32,114,.12);
  font-weight: 600;
}

/* Hlavní 2-sloupcový layout: katalog | stage */
.grafy-wrap .build-body {
  display: grid; grid-template-columns: 280px 1fr;
  min-height: 540px;
}
@media (max-width: 980px) {
  .grafy-wrap .build-body { grid-template-columns: 1fr; }
}

/* LEVÝ PANEL — katalog veličin */
.grafy-wrap .catalog {
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 18px 18px 22px;
  overflow-y: auto;
  max-height: 640px;
}
.grafy-wrap .catalog-hint {
  font-size: 11.5px; color: var(--ink-muted);
  padding: 2px 4px 10px; line-height: 1.5;
}
.grafy-wrap .catalog-group { margin-bottom: 14px; }
.grafy-wrap .catalog-group h5 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-muted); font-weight: 700;
  margin: 6px 4px 8px; display: flex; align-items: center; gap: 8px;
}
.grafy-wrap .catalog-group h5::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.grafy-wrap .var-pill {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; margin: 4px 0;
  border-radius: 9px;
  background: var(--surface); border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .1s;
  text-align: left; font-family: inherit;
  font-size: 12.5px; color: var(--ink);
}
.grafy-wrap .var-pill:hover { border-color: #B8C0D6; transform: translateX(2px); }
.grafy-wrap .var-pill .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #DDE1EB; flex-shrink: 0;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px #C8CFE2;
  transition: background .15s, box-shadow .15s;
}
.grafy-wrap .var-pill .name { flex: 1; font-weight: 500; }
.grafy-wrap .var-pill .unit { font-size: 11px; color: var(--ink-muted); font-style: italic; }
.grafy-wrap .var-pill.active {
  background: rgba(0,32,114,.04);
  border-color: var(--blue);
}
.grafy-wrap .var-pill.active .name { color: var(--blue); font-weight: 600; }
.grafy-wrap .var-pill.active .unit { color: var(--blue-soft, #4F82BF); }
.grafy-wrap .var-pill.active .dot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px currentColor;
}
.grafy-wrap .var-pill.disabled { opacity: .42; cursor: not-allowed; }
.grafy-wrap .var-pill.disabled:hover { transform: none; border-color: var(--line); }

/* PRAVÝ PANEL — stage */
.grafy-wrap .build-stage {
  display: flex; flex-direction: column;
  padding: 0; min-width: 0;
}
.grafy-wrap .stage-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 24px; min-height: 54px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  background: linear-gradient(180deg, #FBFAF6 0%, var(--surface) 100%);
}
.grafy-wrap .stage-head .lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-muted); font-weight: 600; margin-right: 4px;
}
.grafy-wrap .stage-head .empty-hint {
  font-size: 13px; color: var(--ink-muted); font-style: italic;
}
.grafy-wrap .stage-head .counter {
  margin-left: auto;
  font-size: 11.5px; color: var(--ink-muted);
}
.grafy-wrap .stage-head .counter strong { color: var(--ink); }

/* Selected chip */
.grafy-wrap .sel-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 11px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font-size: 12px; color: var(--ink);
  transition: background .12s, border-color .12s;
}
.grafy-wrap .sel-chip:hover { background: #FBFAF6; }
.grafy-wrap .sel-chip .sw {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.grafy-wrap .sel-chip .name { font-weight: 500; }
.grafy-wrap .sel-chip .range {
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
  font-size: 11px; padding-left: 7px;
  border-left: 1px dashed var(--line-strong); margin-left: 2px;
}
.grafy-wrap .sel-chip .x {
  width: 18px; height: 18px; border-radius: 50%;
  background: transparent; border: 0;
  color: var(--ink-muted); font-size: 13px; line-height: 0;
  cursor: pointer; padding: 0;
  display: grid; place-items: center;
  transition: background .12s, color .12s;
}
.grafy-wrap .sel-chip .x:hover { background: var(--ink); color: var(--surface); }

.grafy-wrap .stage-chart {
  padding: 14px 22px 4px; flex: 1;
  min-height: 360px;
}
.grafy-wrap .stage-chart svg {
  width: 100%; height: 360px; overflow: visible; display: block;
}
.grafy-wrap .stage-chart .empty-state {
  height: 360px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); font-style: italic; font-size: 13px;
}

/* Spodní toolbar */
.grafy-wrap .stage-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 22px 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.grafy-wrap .stage-toolbar .btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.grafy-wrap .stage-toolbar .btn:hover { border-color: var(--blue); color: var(--blue); }
.grafy-wrap .stage-toolbar .btn.primary {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.grafy-wrap .stage-toolbar .btn.primary:hover {
  background: var(--blue-deep, #001550); border-color: var(--blue-deep, #001550); color: #fff;
}
.grafy-wrap .stage-toolbar .btn.ghost {
  background: transparent; border-color: transparent; color: var(--ink-muted);
}
.grafy-wrap .stage-toolbar .btn.ghost:hover {
  color: var(--ink); border-color: var(--line); background: var(--surface);
}
.grafy-wrap .stage-toolbar .spacer { flex: 1; }
.grafy-wrap .stage-toolbar .url-hint {
  font-size: 11.5px; color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.grafy-wrap .stage-toolbar .url-hint code {
  padding: 2px 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10.5px; color: var(--ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.grafy-wrap .btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 20px;
  background: var(--surface, #fff); border: 1px solid var(--line-strong);
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.grafy-wrap .btn:hover { border-color: var(--blue); color: var(--blue); }
.grafy-wrap .btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.grafy-wrap .btn.primary:hover { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.grafy-wrap .btn.ghost { background: transparent; border-color: var(--line); color: var(--ink-muted); }

/* ============= EXPORT BAR ============= */
.grafy-wrap .export-bar {
  margin-top: 40px; padding: 22px 28px;
  background: var(--bg); border: 1px dashed var(--line-strong);
  border-radius: 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between;
}
.grafy-wrap .export-bar .txt { font-size: 13px; color: var(--ink-soft); max-width: 640px; line-height: 1.55; }
.grafy-wrap .export-bar .txt strong { color: var(--ink); font-weight: 500; }
.grafy-wrap .export-bar .txt a { color: var(--blue); border-bottom: 1px solid var(--blue-100); }
.grafy-wrap .export-bar .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============= PATTERNS (SVG helpers) ============= */
.grafy-wrap .axis-text { font-size: 10.5px; fill: var(--ink-muted); font-family: 'Inter', sans-serif; }
.grafy-wrap .grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.grafy-wrap .now-marker { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* ============= HOVER TOOLTIP (sdílený pro SVG grafy) ============= */
.grafy-wrap .chart-tooltip {
  position: absolute; pointer-events: none; z-index: 12;
  min-width: 140px; max-width: 280px;
  padding: 10px 13px;
  background: rgba(255,255,255,.97); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 22px rgba(15,25,51,.12), 0 2px 6px rgba(15,25,51,.06);
  font-size: 12px; line-height: 1.4; color: var(--ink);
  transition: opacity .08s ease-out;
}
.grafy-wrap .chart-tooltip .tt-when {
  font-family: 'Instrument Serif', serif; font-size: 15px;
  color: var(--ink); font-variant-numeric: tabular-nums;
  margin-bottom: 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.grafy-wrap .chart-tooltip .tt-row {
  display: grid; grid-template-columns: 10px 1fr auto;
  gap: 8px; align-items: center; margin-top: 3px;
}
.grafy-wrap .chart-tooltip .tt-sw {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--surface,#fff);
  box-shadow: 0 0 0 1px rgba(15,25,51,.15);
}
.grafy-wrap .chart-tooltip .tt-lbl {
  color: var(--ink-soft); font-size: 11.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.grafy-wrap .chart-tooltip .tt-val {
  color: var(--ink); font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.grafy-wrap .hover-layer { pointer-events: none; }
.grafy-wrap .hover-layer .hover-line { shape-rendering: crispEdges; }

/* Empty state (pro sekce bez dat) */
.grafy-wrap .empty-state {
  padding: 30px 20px; text-align: center;
  font-size: 13px; color: var(--ink-muted);
  border: 1px dashed var(--line-strong); border-radius: 12px;
  background: var(--bg);
}

/* ============= Responzivní chování ============= */
@media (max-width: 1100px) {
  .grafy-wrap .strip { grid-template-columns: repeat(2, 1fr); }
  .grafy-wrap .strip-cell:nth-child(2n) { border-right: 0; }
  .grafy-wrap .strip-cell:nth-child(5) { grid-column: span 2; border-top: 1px solid var(--line); border-right: 0; }
  .grafy-wrap .strip-cell { border-bottom: 1px solid var(--line); }
  .grafy-wrap .dash { grid-template-columns: repeat(2, 1fr); }
  .grafy-wrap .wind-grid,
  .grafy-wrap .soil-grid,
  .grafy-wrap .stripes-grid,
  .grafy-wrap .ano-wrap { grid-template-columns: 1fr; }
  .grafy-wrap .records-grid { grid-template-columns: repeat(2, 1fr); }
  .grafy-wrap .build-info { grid-template-columns: 1fr; }
  /* .rain-grid a .solar-grid jsou už vertikální stack (flex-direction:column),
     stačí redukovat počet KPI sloupců na menších šířkách. */
  .grafy-wrap .rain-side { grid-template-columns: 1fr; }
  .grafy-wrap .solar-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grafy-wrap .solar-meta { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grafy-wrap { padding: 20px 16px 56px; }
  .grafy-wrap .page-title { font-size: 44px; }
  .grafy-wrap .featured { padding: 20px; }
  .grafy-wrap .section { padding: 20px; }
  .grafy-wrap .builder { padding: 20px; }
  .grafy-wrap .strip { grid-template-columns: 1fr; }
  .grafy-wrap .strip-cell { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .grafy-wrap .strip-cell:last-child { border-bottom: 0; grid-column: auto; border-top: 0; }
  .grafy-wrap .dash { grid-template-columns: 1fr; }
  .grafy-wrap .feat-legend { margin-left: 0; }
}